/* Fixed capture coordinates keep camera motion independent of responsive layout. */
.hero-demo { width:min(100%,30rem); margin:0 auto; padding:1.25rem; border-radius:var(--corner-panel); background:transparent; color:var(--ink); }
.hero-demo-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; font-size:.8125rem; font-weight:600; }
.hero-demo-controls { display:flex; flex-wrap:wrap; gap:.35rem; min-width:0; max-width:100%; }
.hero-demo-controls button, .demo-play { min-height:44px; padding:.4rem .7rem; font:600 .8125rem/1.5 var(--font); color:inherit; background:transparent; border:1px solid var(--line-2); border-radius:999px; cursor:pointer; }
.hero-demo-controls button:hover, .demo-play:hover { background:var(--card); }
.hero-demo-controls button:focus-visible, .demo-play:focus-visible, .hero-stage:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.hero-stage { position:relative; width:100%; aspect-ratio:480/720; overflow:hidden; border-radius:20px; isolation:isolate; margin-top:.5rem; }
.hero-artboard { position:absolute; inset:0 auto auto 0; width:480px; height:720px; transform:scale(var(--hero-fit,1)); transform-origin:0 0; pointer-events:none; }
.hero-camera { width:480px; height:720px; transform-origin:0 0; }
.hero-stage[data-playing="true"] .hero-camera { will-change:transform; }
.hero-phone { position:absolute; left:84px; top:34px; width:312px; padding:9px 9px 22px; border:1px solid var(--line-2); border-radius:36px; background:var(--card); box-shadow:0 18px 45px -22px var(--quiet-shadow); }
.hero-crop { width:292px; aspect-ratio:860/1730; border-radius:26px; overflow:hidden; background:var(--paper); }
.hero-crop img { width:100%; height:auto; display:block; margin-top:-12.790697674%; }
.hero-crop .screen-dark { display:none; }
:root[data-theme="dark"] .hero-crop .screen-light { display:none; }
:root[data-theme="dark"] .hero-crop .screen-dark { display:block; }
.hero-home-indicator { position:absolute; bottom:9px; left:109px; width:94px; height:4px; border-radius:3px; background:var(--ink); opacity:.5; }
.hero-demo figcaption { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1rem; padding-top:.85rem; font-size:.875rem; }
.hero-demo figcaption strong { font-weight:600; }
.hero-demo-note { color:var(--ink); font-size:.75rem; }
@media (max-width:35rem) { .hero-demo { padding:.8rem; } .hero-demo figcaption { flex-direction:column; align-items:flex-start; } }
@media (prefers-reduced-motion:reduce) { .hero-camera { transform:none !important; } }
.hero-chapters { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.hero-chapters button { flex:1 1 auto; min-height:44px; padding:.45rem .65rem; font:600 .75rem/1.5 var(--font); color:var(--ink); border:1px solid var(--line-2); border-radius:999px; background:transparent; cursor:pointer; }
.hero-chapters button[aria-pressed="true"] { background:var(--card); border-color:var(--accent); }
.hero-chapters button:hover { background:var(--card); }
.hero-chapters button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }

.hero-scene-picker { display:block; width:100%; min-width:0; max-width:100%; font-size:.75rem; }
.hero-scene-picker select { display:block; width:100%; min-width:0; max-width:100%; min-height:44px; color:var(--ink); background:var(--card); border:1px solid var(--line-2); border-radius:8px; padding:.35rem; font:inherit; }
.hero-scene-picker[hidden] { display:none; }
.reading-steps .originals-reminder { max-width:none; margin-top:1.5rem; color:var(--ink-2); font-size:.875rem; text-align:center; }