:root { color-scheme: dark; --ink:#eef7ff; --muted:#9bb1c6; --line:rgba(181,226,255,.20); --mint:#87e8d2; --night:#050b17; }
* { box-sizing:border-box; }
html, body { min-height:100%; margin:0; background:#050b17; }
body { height:100svh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:radial-gradient(circle at 50% -35%, #16314b 0, #081322 38%, var(--night) 71%); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:fixed; left:14px; top:-48px; z-index:30; padding:10px 14px; color:#041016; border-radius:9px; background:var(--mint); transition:top .15s; }
.skip:focus { top:14px; }
.bar { min-height:68px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; padding:10px clamp(16px,3vw,48px); border-bottom:1px solid var(--line); background:rgba(5,11,23,.82); backdrop-filter:blur(18px); }
.back, .brand { font-size:.76rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.back { color:var(--muted); text-decoration:none; }
.back:hover { color:var(--mint); }
.brand { margin:0; color:var(--ink); white-space:nowrap; }
.brand span { color:var(--mint); }
.bar-actions { justify-self:end; display:flex; align-items:center; gap:8px; }
.slide-picker select, .bar button, .controls button { min-height:38px; padding:0 13px; color:var(--ink); border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.045); font:700 .78rem/1 inherit; cursor:pointer; }
.slide-picker span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.slide-picker select { width:min(222px,30vw); }
.bar button:hover, .controls button:hover:not(:disabled), .slide-picker select:hover { border-color:var(--mint); background:rgba(135,232,210,.12); }
.stage { min-width:0; min-height:0; display:grid; place-items:center; padding:clamp(10px,1.6vw,24px) clamp(10px,2.4vw,38px); }
.frame { position:relative; display:grid; place-items:center; width:100%; height:100%; min-width:0; min-height:0; max-width:100%; max-height:100%; margin:0; }
.frame img { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; filter:drop-shadow(0 22px 30px rgba(0,0,0,.42)); opacity:1; transition:opacity .15s ease; touch-action:pan-y; }
.frame img.is-changing { opacity:.35; }
.controls { min-height:66px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:15px; padding:10px clamp(16px,3vw,48px); border-top:1px solid var(--line); background:rgba(5,11,23,.82); backdrop-filter:blur(18px); }
.controls button { width:max-content; justify-self:start; }
.controls button:last-child { justify-self:end; }
.controls button:disabled { opacity:.35; cursor:default; }
.progress { width:min(220px,30vw); height:4px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.12); }
.progress span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#57e3e8,#9b7dff); transition:width .2s ease; }
@media (max-width:700px) { .bar { grid-template-columns:1fr auto; min-height:60px; } .brand { display:none; } .slide-picker { display:none; } .bar button { padding:0 10px; font-size:.7rem; } .stage { padding:8px 6px; } .controls { min-height:58px; padding:8px 14px; } .controls button { min-height:34px; padding:0 11px; } .progress { width:min(130px,34vw); } }
@media (max-width:390px) { .controls button span { display:none; } }