:root{color-scheme:dark;--ground:#040917;--text:#fffaf0;--line:#365979;--accent:#ffbf59}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#21335d 0%,#080d20 46%,#02050e 95%);color:var(--text);font-family:ui-sans-serif,system-ui,sans-serif}
#stage{position:relative;display:flex;width:min(100vw,calc(100dvh * 9 / 16));height:min(100dvh,calc(100vw * 16 / 9));aspect-ratio:9/16;overflow:hidden;border-radius:1px;box-shadow:0 0 110px #000b,0 0 0 2px #33496f;touch-action:pan-y}
#film{display:block;width:100%;height:100%;object-fit:contain;background:#08152f}
#controls{position:absolute;inset:auto 2% 1.5%;z-index:3;padding:16px 16px 14px;border:1px solid #769aba80;border-radius:20px;background:#081426e8;box-shadow:0 8px 40px #0008;backdrop-filter:blur(18px);display:flex;flex-direction:column;gap:8px}
#progressline{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:clamp(11px,1.65vh,19px);font-weight:750;letter-spacing:.025em;white-space:nowrap}
#chapter{overflow:hidden;text-overflow:ellipsis;max-width:70%;color:#fff0ca}#counter{color:#b9d8e4;font-variant-numeric:tabular-nums}
#scrub{width:100%;margin:4px 0;accent-color:#ffba57;cursor:pointer}
#buttons{display:flex;gap:7px;justify-content:space-between}button{appearance:none;border:1px solid #618bab75;border-radius:10px;background:#29435c;color:#f6fbff;font-weight:800;font-size:clamp(10px,1.6vh,19px);min-width:0;min-height:33px;padding:4px 10px;cursor:pointer;white-space:nowrap}button:hover,button:focus-visible{background:#386a83;outline:2px solid #ffcc7e;outline-offset:1px}
#play{background:#faac42;color:#121c35;flex:2}#speed{color:#ffcf7a}#export{color:#84e8ca}#export:disabled{opacity:.85;cursor:wait}
.record #controls{display:none!important}.record #stage{box-shadow:none}#status{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:460px){#controls{padding:9px 8px 7px;gap:3px;border-radius:12px}button{font-size:10px;padding:4px 4px;min-height:28px;border-radius:7px}#progressline{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}