:root { color-scheme:dark; background:#020817; color:#e9d5aa; font-family:system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; }
main { min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px 16px max(24px,env(safe-area-inset-bottom)); }
.stage { position:relative; width:min(100%,1200px); aspect-ratio:8/5; }
.stage img,.stage video { width:100%; height:100%; object-fit:contain; display:block; }
.stage video { position:absolute; inset:0; visibility:hidden; }
.stage.playing video { visibility:visible; }
nav { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px; margin-top:8px; }
a,button { font:inherit; font-size:16px; min-height:48px; padding:12px 24px; border:1px solid #9c7b43; border-radius:4px; color:#ead6ac; background:transparent; text-decoration:none; cursor:pointer; }
button { border-color:transparent; color:#c0b5a4; }
[hidden] { display:none!important; }
a:hover,button:hover { background:#131c2a; }
:focus-visible { outline:2px solid #f6d58d; outline-offset:5px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
p { font-size:14px; text-align:center; }
@media(max-width:600px) { main { padding-inline:0; overflow-x:clip; } .stage { width:200%; flex-shrink:0; } nav { padding:16px; } }
@media(prefers-reduced-motion:reduce) { .stage video { display:none; } }