@font-face{font-family:Plex;src:url('./fonts/IBMPlexSans-Regular-Complete.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:PlexCondensed;src:url('./fonts/IBMPlexSansCondensed-SemiBold-Complete.woff2') format('woff2');font-display:swap;font-weight:600}
:root{color-scheme:dark;--ink:#f7eedc;--muted:#cdc3b1;--ground:#151e20;--accent:#efb96f;--rule:rgba(247,238,220,.22);font-family:Plex,sans-serif;color:var(--ink);background:var(--ground)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{overscroll-behavior:none}button,select,input,summary{font:inherit;color:inherit}button,select,summary{cursor:pointer}button,a,select,summary{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:4px}::selection{background:var(--accent);color:var(--ground)}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}canvas:focus-visible{outline-offset:-6px}body[data-camera="orbit"] canvas{cursor:grab}body[data-camera="orbit"] canvas:active{cursor:grabbing}
#interface{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:calc(24px + env(safe-area-inset-top)) calc(36px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(36px + env(safe-area-inset-left))}
#interface::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(9,18,20,.55),transparent 24%,transparent 58%,rgba(9,18,20,.70));z-index:-1}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.film-brand{display:flex;align-items:center;gap:24px}.back-link{font-size:13px;min-height:44px;display:flex;align-items:center;pointer-events:auto;text-decoration:none;color:var(--muted)}.back-link:hover{color:var(--ink)}h1{font:600 30px/1.05 PlexCondensed,sans-serif;margin:0}h1,h2{text-wrap:balance}.film-note{font-size:13px;color:var(--muted);margin:13px 0 0}
.bottom{width:100%;max-width:1380px;align-self:center}#chapter{margin-bottom:24px;transition:opacity 180ms ease-out;max-width:520px}#chapter h2{font:600 24px/1.2 PlexCondensed,sans-serif;margin:0 0 6px}#chapter p{font-size:14px;line-height:1.5;color:var(--muted);margin:0;text-wrap:pretty}.timeline-meta{display:flex;align-items:center;justify-content:space-between;min-height:32px;gap:16px}#timecode{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}.chapter-picker{pointer-events:auto}.chapter-picker select{font-size:12px;border:0;padding:8px 24px 8px 0;max-width:210px;background:transparent;color:var(--ink)}option{background:var(--ground);color:var(--ink)}
.timeline-wrap{display:flex;align-items:center;min-height:44px;pointer-events:auto;cursor:pointer}#timeline{--progress:0%;appearance:none;-webkit-appearance:none;width:100%;height:36px;margin:0;cursor:pointer;background:transparent;border-radius:0;touch-action:none}#timeline::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--accent) var(--progress),var(--rule) var(--progress))}#timeline::-moz-range-track{height:3px;background:linear-gradient(to right,var(--accent) var(--progress),var(--rule) var(--progress))}#timeline::-webkit-slider-thumb{margin-top:-3.5px;appearance:none;-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--accent);border:0}#timeline::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--accent);border:0}.timeline-wrap:focus-within #timeline::-webkit-slider-runnable-track{outline:1px solid var(--accent)}#timeline:focus-visible{outline-offset:8px}
.control-row{display:flex;align-items:center;gap:16px;min-height:44px;pointer-events:auto}.transport{display:flex;gap:8px}button,summary{min-height:44px;border:1px solid var(--rule);border-radius:4px;background:rgba(20,30,31,.48);padding:10px 16px;font-size:13px;line-height:22px;transition:background 160ms ease-out,border-color 160ms ease-out}button:hover,summary:hover{background:#344140;border-color:#9a9683}button.primary{background:var(--ink);color:#192326;border-color:var(--ink);min-width:100px}button.primary:hover{background:#e9d8b8}button[aria-pressed="true"]{background:#4b4535;border-color:var(--accent)}button svg,summary svg{display:block;width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}#soundBtn{padding:11px}.sound-on{display:none}#soundBtn[aria-pressed="true"] .sound-on{display:block}#soundBtn[aria-pressed="true"] .sound-off{display:none}.hint{color:var(--muted);font-size:12px;margin:0 0 0 auto}#settings{position:relative;margin-left:auto}summary{display:flex;align-items:center;justify-content:center;padding:11px;list-style:none}summary::-webkit-details-marker{display:none}.settings-panel{position:absolute;bottom:58px;right:0;width:290px;padding:20px;background:#202a2c;box-shadow:0 12px 40px rgba(0,0,0,.3);border-radius:4px;display:grid;gap:12px}.settings-panel label{display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:12px}.settings-panel select{border:1px solid var(--rule);background:#151e20;border-radius:3px;min-height:40px;padding:6px 10px;max-width:150px}.settings-panel button{width:100%;text-align:left}.settings-panel p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#loading{position:fixed;inset:0;display:grid;place-items:center;background:#182528;z-index:10;transition:opacity 200ms ease-out,visibility 200ms}.loading-copy{max-width:380px;padding:32px;text-align:center}.loading-copy strong{font:600 36px/1.1 PlexCondensed,sans-serif}.loading-copy p{font-size:14px;line-height:1.6;color:var(--muted)}#loading.hidden{opacity:0;visibility:hidden;pointer-events:none}#loading.failed{background:rgba(17,28,29,.92)}#retry{display:inline-flex;align-items:center;min-height:44px}#retry[hidden]{display:none}.no-script{position:fixed;inset:0;z-index:20;display:grid;align-content:center;justify-items:center;gap:16px;padding:32px;background:#182528;text-align:center}#veil,#flash{position:fixed;inset:0;pointer-events:none;opacity:0}#veil{background:#172528}#flash{background:#ffe4bb}
.topbar,.bottom{transition:opacity 200ms ease-out}.controls-hidden .topbar,.controls-hidden .bottom{opacity:0;pointer-events:none}.controls-hidden .topbar *,.controls-hidden .bottom *{pointer-events:none}.controls-hidden:focus-within .topbar,.controls-hidden:focus-within .bottom{opacity:1;pointer-events:auto}
@media(max-width:700px){#interface{padding:calc(18px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left))}.film-brand{align-items:flex-start;flex-direction:column;gap:6px}.back-link{min-height:32px}h1{font-size:24px}.film-note{display:none}#chapter{margin-bottom:14px;max-width:290px}#chapter h2{font-size:22px}#chapter p{font-size:13px;line-height:1.45}.hint{display:none}.control-row{gap:8px}.transport{gap:6px}button{padding:10px 13px}button.primary{min-width:93px}.settings-panel{width:min(290px,calc(100vw - 36px))}#interface::before{background:linear-gradient(180deg,rgba(9,18,20,.5),transparent 25%,transparent 55%,rgba(9,18,20,.8))}}
@media(max-height:500px){#interface{padding-top:12px;padding-bottom:10px}.film-brand{flex-direction:row;align-items:center;gap:18px}h1{font-size:22px}#chapter{display:none}.timeline-wrap{min-height:26px}.settings-panel{bottom:52px;padding:14px;gap:8px;max-height:calc(100dvh - 88px);overflow:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}