.demo{max-width:1120px}.demo [hidden]{display:none!important}
.demo-top{margin-bottom:16px}.demo-label{font-size:12px}
.showcase-views,.gallery-position,.frame-layout{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.showcase-views button,.gallery-position button,.frame-layout button{min-height:44px;border:1px solid #ffffff26;border-radius:9px;padding:8px 17px;background:#ffffff06;font-size:14px}
.showcase-views .selected,.gallery-position [aria-pressed="true"],.frame-layout [aria-pressed="true"]{background:#77c6ff;color:#061220;border-color:#77c6ff}
.gallery-position,.frame-layout{font-size:14px;color:#b4c5d6}.gallery-position button,.frame-layout button{padding:7px 14px}
.device-scene{position:relative;width:100%;aspect-ratio:3/2;isolation:isolate}
.device-hardware{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.demo .demo-surface{position:absolute;left:18.10%;top:12.30%;width:63.67%;height:56.84%;padding:0;border:0;border-radius:0;background:#78a7d0 url('assets/golden-gate-sunset.jpg') center/cover;box-shadow:none;overflow:hidden;isolation:isolate;container-type:inline-size}
.desktop-context{position:absolute;inset:0;pointer-events:none;z-index:-1;text-align:left}.desktop-window{display:none}
.desktop-menu{height:44px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;background:#dce6f447;color:white;backdrop-filter:blur(12px);font-size:12px;line-height:1;white-space:nowrap}.desktop-menu>div{display:flex;align-items:center;gap:10px}.desktop-menu strong:first-child{font-size:18px}
.demo .memory-rail{position:absolute;top:0;left:17%;right:17%;height:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.45fr repeat(3,minmax(0,1fr));align-items:start;gap:3px;margin:0;padding:0;z-index:2}
.demo .memory-rail .thumb{display:block;width:100%;height:44px;border-radius:0 0 6px 6px;border:1px solid #ffffff55;box-shadow:0 3px 8px #0003;min-width:0;margin:0}
.demo .memory-rail .thumb.active{border:2px solid #8cceff}.demo .thumb:hover{transform:none;filter:brightness(1.12)}
.demo .memory-rail .notch{display:block;width:calc(100% + 6px);height:44px;margin:0 0 0 -3px;border-radius:0 0 11px 11px;background:#05080c;border:0;box-shadow:none}.notch span{top:18px;right:23%;width:4px;height:4px}
.desktop-dock{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid #ffffff70;background:#dbe7f34f;border-radius:11px;backdrop-filter:blur(13px);box-shadow:0 3px 10px #0003}.desktop-dock img{width:29px;height:29px;object-fit:contain}.desktop-dock>span{width:1px;height:25px;background:#fff5;margin:0 2px}
.preview-stage{position:absolute;inset:56px 0 62px;display:flex;align-items:flex-start;justify-content:center;pointer-events:none}
.demo .viewer{pointer-events:auto;width:24%;margin:0;aspect-ratio:3/2;background:#03080d;border:1px solid #ffffff6b;border-radius:9px;box-shadow:0 12px 28px #0007;transition:width .35s ease;position:relative;overflow:hidden}
/* Both previews stay under the notch. The gallery overlays the desktop without
   shifting them; meeting mode doubles the small preview, as in the native app. */
.demo.meeting .viewer{width:48%}
.demo .viewer>img{width:100%;height:100%;object-fit:contain;display:block}
.viewer-actions{position:absolute;top:6px;right:6px;display:flex;gap:4px}.viewer button{display:grid;place-items:center;width:32px;height:32px;padding:0;background:#061521de;color:white;border:1px solid #ffffff30;border-radius:50%;box-shadow:0 2px 6px #0002}.viewer button:hover{background:#215475}.viewer button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.viewer-arrow{position:absolute;top:50%;transform:translateY(-50%)}.viewer-arrow.previous{left:6px}.viewer-arrow.next{right:6px}
.demo .viewer-bottom{padding:25px 10px 9px;font-size:12px;line-height:1.4;gap:10px;pointer-events:none}.demo .mode-badge{font-size:11px}.demo:not(.meeting) .mode-badge{display:none}
.demo-gallery{position:absolute;left:7px;top:55px;bottom:60px;width:19%;border:1px solid #ffffff78;border-radius:6px;overflow:hidden;background:#e5ebeed9;box-shadow:0 5px 17px #0004;display:flex;flex-direction:column}
.gallery-right .demo-gallery{left:auto;right:7px}.gallery-toolbar{height:23px;flex-shrink:0;color:#596874;font-size:11px;padding:2px 6px;display:flex;gap:7px;align-items:center;border-bottom:1px solid #9faeb933}
.gallery-list{overflow:auto;scrollbar-width:thin;padding:3px;display:flex;flex-direction:column;gap:4px}.gallery-card{padding:0;border:1px solid transparent;border-radius:4px;background:#17252f;flex-shrink:0;overflow:hidden}.gallery-card img{width:100%;height:auto;display:block}.gallery-card.active{border-color:#2aa0ff;box-shadow:0 0 0 1px #2aa0ff}
.demo-frame{position:absolute;inset:0;padding:7px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;background:#071019}
.demo-frame img{width:100%;height:100%;object-fit:contain;background:#03060b;border-radius:4px}
.demo-frame[data-count="1"]{grid-template-columns:1fr;grid-template-rows:1fr}
.demo-frame[data-count="8"]{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.demo.frame-view .memory-rail,.demo.frame-view .desktop-context{display:none}
.demo .demo-controls{gap:15px;flex-wrap:wrap;margin:2px 0 10px}.demo .demo-controls button{min-height:44px;font-size:14px}.demo .demo-controls span{font-size:14px}.demo #auto-toggle{font-size:14px;margin:0;min-height:44px}.demo .demo-tip{font-size:14px;margin:8px auto 0;max-width:none}.demo .demo-disclaimer{font-size:12px;margin-top:10px}
@container desktop(max-width:500px){
  .desktop-menu{height:30px;padding:0 5px;font-size:9px}.desktop-menu>div{gap:5px}.desktop-menu strong:first-child{font-size:14px}
  .demo .memory-rail,.demo .memory-rail .thumb,.demo .memory-rail .notch{height:30px}.demo .memory-rail{left:19%;right:15%;gap:2px}.demo .memory-rail .notch{margin-left:-2px;width:calc(100% + 4px);border-radius:0 0 7px 7px}.notch span{top:13px;width:3px;height:3px}
  .preview-stage{inset:38px 0 38px}.desktop-dock{bottom:5px;gap:4px;padding:3px 5px;border-radius:7px}.desktop-dock img{width:20px;height:20px}.desktop-dock>span{height:18px}
  .viewer-actions{top:3px;right:3px;gap:3px}.viewer button{width:24px;height:24px}.viewer button svg{width:13px;height:13px}.viewer-arrow.previous{left:3px}.viewer-arrow.next{right:3px}.demo .viewer-bottom{display:none}
  .demo-gallery{top:38px;bottom:38px;left:4px;width:23%}.gallery-right .demo-gallery{right:4px}.gallery-toolbar{font-size:8px;height:15px;padding:1px 3px}.gallery-list{padding:2px;gap:3px}
}
@media(max-width:700px){.showcase-views{gap:6px}.showcase-views button{padding:8px 10px;font-size:14px}.demo .demo-controls{gap:12px}.demo .demo-tip{font-size:14px}.demo .demo-disclaimer{font-size:12px}.device-scene{margin:0 auto}}
@media(prefers-reduced-motion:reduce){.demo .viewer{transition:none}.desktop-menu,.desktop-dock{backdrop-filter:none}}

/* All simulated desktop chrome scales with the display, not the page viewport. */
.demo .demo-surface{--bar-height:3.2cqw;--chrome-font:1.05cqw;container-name:desktop}
.desktop-menu{height:var(--bar-height);padding:0 .9cqw;font-size:var(--chrome-font);background:#dde6ef50}
.desktop-menu .finder-menus{gap:.8cqw;max-width:28%;overflow:hidden}
.desktop-menu strong:first-child{font-size:1.6cqw}.desktop-menu strong{flex-shrink:0}
.finder-menus>span{flex-shrink:0}.finder-menus>span:nth-last-child(-n+2){display:none}
.desktop-menu .menu-status{gap:.75cqw;max-width:28%;justify-content:flex-end}
.menu-status svg{width:1.4cqw;height:1.4cqw;fill:none;stroke:currentColor;stroke-width:1.8;flex-shrink:0}
.menu-status .battery-charge{fill:currentColor;stroke:none}.menu-time{margin-left:.4cqw}
.siri-icon{width:1.3cqw;height:1.3cqw;flex-shrink:0;border-radius:50%;background:conic-gradient(#79eaff,#b786ff,#ff88c7,#fff,#79eaff);box-shadow:inset 0 0 .3cqw #fff}
.demo .memory-rail{height:var(--bar-height);left:29%;right:29%;grid-template-columns:repeat(3,minmax(0,1fr)) 2.75fr repeat(3,minmax(0,1fr));gap:.25cqw}
.demo .memory-rail .thumb,.demo .memory-rail .notch{height:var(--bar-height)}
.demo .memory-rail .thumb{border-radius:0 0 .45cqw .45cqw;border-width:.08cqw}
.demo .memory-rail .thumb.active{border-width:.18cqw}
.demo .memory-rail .notch{width:calc(100% + .5cqw);margin-left:-.25cqw;border-radius:0 0 1cqw 1cqw}
.notch span{top:1.3cqw;right:22%;width:.35cqw;height:.35cqw}
.preview-stage{top:calc(var(--bar-height) + 1.2cqw)}
.demo-gallery{top:calc(var(--bar-height) + 1.2cqw)}

/* Controls scale with the photo instead of retaining full-size page buttons.
   The 44px external controls remain available for touch/keyboard navigation. */
.demo .viewer{container-type:inline-size}
.viewer-actions{top:2cqw;right:2cqw;gap:1.5cqw}
.viewer button{width:min(8cqw,24px);height:min(8cqw,24px)}
.viewer button svg{width:min(4cqw,12px);height:min(4cqw,12px)}
.viewer-arrow.previous{left:2cqw}.viewer-arrow.next{right:2cqw}
.demo .viewer-bottom{padding:10cqw 4cqw 3cqw;font-size:4cqw;gap:3cqw}
.demo .mode-badge{font-size:3.5cqw}