/* Window sizes come from the 669 × 475.5 Figma display; the runtime projects a 626 × 445 screen plane. */
.demo-desktop.mini-desktop { container-type:inline-size; isolation:isolate; overflow:hidden; clip-path:inset(0); }
.demo-desktop.mini-desktop .mini-desktop-content { position:absolute; inset:0; width:100%; height:100%; transform-origin:72% 65%; }
#toggle-auto-zoom[aria-pressed="true"]::before { content:"✓ "; color:#0071e3; }
.demo-desktop.mini-desktop .mini-desktop-art { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; }
.demo-desktop.mini-desktop #demo-pointer { z-index:30; pointer-events:none; }
.demo-desktop.mini-desktop .mini-window {
  position:absolute;
  display:block;
  overflow:hidden;
  border:0;
  background:#fbfbfc;
  color:#242426;
  box-shadow:0 2.39cqw 3.36cqw #23354c30;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:max(.625rem,1.95cqw);
  line-height:1.4;
  letter-spacing:normal;
}
.demo-desktop.mini-desktop [hidden] { display:none!important; }
.demo-desktop.mini-desktop .mini-window.is-front { box-shadow:0 2.39cqw 3.36cqw #23354c40; }
.demo-desktop.mini-desktop .mini-window:focus-visible { outline:2px solid #0071e3; outline-offset:1px; }
.demo-desktop.mini-desktop .mini-window-screenshot,
.demo-desktop.mini-desktop .mini-safari-chrome { position:absolute; left:0; top:0; display:block; width:100%; height:100%; max-width:none; object-fit:contain; pointer-events:none; user-select:none; }
.demo-desktop.mini-desktop .mini-safari-toolbar { position:absolute; left:0; top:0; width:100%; overflow:hidden; }
.demo-desktop.mini-desktop .mini-safari-address { position:absolute; left:32.8%; top:25%; width:34.4%; height:50%; display:flex; align-items:center; justify-content:center; overflow:hidden; white-space:nowrap; color:#404040; font-size:.691cqw; font-weight:400; line-height:normal; pointer-events:none; }
.demo-desktop.mini-desktop .mini-window-bar,
.demo-desktop.mini-desktop .mini-traffic-lights { position:absolute; inset:0; pointer-events:none; }
.demo-desktop.mini-desktop .mini-window-close { position:absolute; width:2.69cqw; height:2.69cqw; padding:0; border:0; border-radius:50%; background:transparent; appearance:none; pointer-events:auto; }
.demo-desktop.mini-desktop .mini-window-close::before,
.demo-desktop.mini-desktop .mini-window-close::after { content:""; position:absolute; top:47%; left:32%; width:36%; height:1px; background:#641610; opacity:0; transform:rotate(45deg); }
.demo-desktop.mini-desktop .mini-window-close::after { transform:rotate(-45deg); }
.demo-desktop.mini-desktop .mini-window-close:hover::before,
.demo-desktop.mini-desktop .mini-window-close:hover::after,
.demo-desktop.mini-desktop .mini-window-close:focus-visible::before,
.demo-desktop.mini-desktop .mini-window-close:focus-visible::after { opacity:1; }
.demo-desktop.mini-desktop .mini-window-close:focus-visible { outline:2px solid #0071e3; outline-offset:1px; }
.demo-desktop.mini-desktop .mini-window-fallback { position:absolute; inset:6cqw 0 0; display:grid; align-content:center; margin:0; padding:3cqw; background:#fbfbfc; color:#6e6e73; font:inherit; text-align:center; }
.demo-desktop.mini-desktop .typing-area { position:absolute; inset:6cqw 0 0; margin:0; padding:3cqw; overflow:auto; border:0; border-radius:0; background:#fff; color:#242426; font:inherit; line-height:1.5; letter-spacing:normal; overflow-wrap:anywhere; pointer-events:none; }
.demo-desktop.mini-desktop .caret { display:inline-block; width:max(1px,.24cqw); height:1em; margin-left:.35cqw; vertical-align:-.1em; background:#0071e3; animation:none; }
.demo-desktop.mini-desktop .mini-note-editor { position:absolute; inset:6cqw 0 0; width:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent; appearance:none; }
.demo-desktop.mini-desktop .mini-note-editor:focus-visible { outline:2px solid #0071e3; outline-offset:-3px; }
.demo-desktop.mini-desktop .mini-dock-hotspot { position:absolute; z-index:4; min-width:0; min-height:0; padding:0; border:0; border-radius:1cqw; background:transparent; appearance:none; }
.demo-desktop.mini-desktop .mini-dock-hotspot:hover,
.demo-desktop.mini-desktop .mini-dock-hotspot:focus-visible { outline:2px solid white; outline-offset:1px; background:#ffffff18; box-shadow:0 0 0 1px #0008; }
.demo-desktop.mini-desktop .mini-dock-hotspot[aria-pressed="true"]::after { content:""; position:absolute; bottom:-.45cqw; left:calc(50% - .24cqw); width:.48cqw; height:.48cqw; border-radius:50%; background:#242426; }
.interactive-product .mini-desktop-cue { display:flex; justify-content:center; align-items:center; gap:8px; margin:22px 0 0; color:#6e6e73; font-size:.9375rem; font-weight:400; line-height:1.5; text-align:center; }
.interactive-product .mini-desktop-cue svg { flex-shrink:0; width:20px; height:20px; stroke:currentColor; stroke-width:1.5; }
@media (prefers-reduced-motion:reduce) {
  .demo-desktop.mini-desktop .mini-window,
  .demo-desktop.mini-desktop .mini-dock-hotspot,
  .demo-desktop.mini-desktop .caret,
  .interactive-product .mini-desktop-cue { animation:none; transition:none; }
}

/* Keep the magnified desktop inside the actual projected display outline. */
.product-device .demo-upper-clip { position:absolute; inset:0; pointer-events:none; }
.product-device .demo-upper-clip .demo-upper { pointer-events:auto; }

/* A separate feature cue keeps the general navigation instruction primary. */
.interactive-product .mini-zoom-feature { display:flex; align-items:center; gap:10px; max-width:460px; margin:12px auto 0; padding:10px 14px; border:1px solid rgba(0,0,0,.07); border-radius:14px; background:rgba(255,255,255,.55); color:#6e6e73; font-size:.8125rem; line-height:1.45; text-align:left; }
.mini-zoom-feature svg { flex-shrink:0; width:20px; height:20px; stroke:currentColor; stroke-width:1.5; }
.mini-zoom-feature strong { display:block; color:#1d1d1f; font-weight:600; }
.mini-zoom-feature span span { display:block; }
@media (prefers-reduced-motion:reduce) { .interactive-product .mini-zoom-feature { display:none; } }