@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/JetBrainsMono.ttf') format('truetype');font-weight:100 800;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/SpaceGrotesk.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:'Michroma';src:url('assets/fonts/Michroma-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#03070e;color:#cadce6;font:14px 'Space Grotesk',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
/* the fixed, clipped frame keeps the full-size stage from widening the mobile layout viewport */
#film{position:fixed;inset:0;overflow:hidden}#stage{position:absolute;left:0;top:0;transform-origin:0 0}#stage canvas{position:absolute;inset:0;display:block}
#loading{position:fixed;inset:0;z-index:30;background:#050b13;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px}
#loading strong{font:400 clamp(22px,5vw,40px) 'Michroma',sans-serif;letter-spacing:.06em;color:#eef6fa}
#loading span{color:#8baabc;font:13px 'JetBrains Mono',monospace}#loading progress{width:min(260px,70vw);accent-color:#ff9a3c;height:3px}
#error{white-space:pre-wrap;color:#ffb55d;font:14px/1.6 'JetBrains Mono',monospace;max-width:80vw}
button,select{background:rgba(16,31,47,.85);color:#d3e3ee;border:1px solid #2c4153;border-radius:6px;font:13px 'Space Grotesk',sans-serif;height:34px;padding:0 12px;cursor:pointer}
button:hover,select:hover{border-color:#ff9a3c}button.on,button[aria-pressed=true]{background:#3a2412;color:#ffc58f;border-color:#ff9a3c}
#poster{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;cursor:pointer;background:radial-gradient(ellipse at center,rgba(3,8,16,.35),rgba(3,8,16,.82))}
#poster[hidden]{display:none}
.poster-inner{text-align:center;padding:24px;max-width:900px}
.poster-kicker{font:12px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:#ffb36b}
.poster-title{font:400 clamp(30px,7vw,84px)/1.05 'Michroma',sans-serif;color:#f3f8fb;margin:14px 0 6px;letter-spacing:.03em;text-shadow:0 0 30px rgba(90,166,255,.35)}
.poster-sub{font:clamp(13px,2vw,17px) 'Space Grotesk',sans-serif;color:#a9c3d3}
.poster-play{margin:clamp(18px,4vw,34px) auto 0;width:clamp(64px,11vw,96px);height:clamp(64px,11vw,96px);border-radius:50%;border:2px solid #ff9a3c;display:flex;align-items:center;justify-content:center;font-size:clamp(24px,4vw,36px);color:#ff9a3c;background:rgba(255,154,60,.08);transition:transform .15s,background .15s;padding-left:6px}
#poster:hover .poster-play{transform:scale(1.06);background:rgba(255,154,60,.18)}
.poster-note{margin-top:16px;font:12px 'JetBrains Mono',monospace;color:#7f9cb0}
.poster-rotate{display:none;margin-top:8px;font:12px 'JetBrains Mono',monospace;color:#ffb36b}
@media (orientation:portrait) and (pointer:coarse){.poster-rotate{display:block}}
#bar{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:10px clamp(10px,2vw,22px) calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(3,7,14,.92),rgba(3,7,14,.6) 70%,rgba(3,7,14,0));transition:opacity .45s}
#ui.idle #bar{opacity:0;pointer-events:none}#ui.idle{cursor:none}
#ui.expert #bar{background:#08111c;border-top:1px solid #20374b}
#scrub{position:relative;height:58px;cursor:pointer;touch-action:none;margin-bottom:6px}#scrub canvas{width:100%;height:100%;display:block}
#row,#expert-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#play{width:48px;font-size:15px}#back10,#fwd10{font:12px 'JetBrains Mono',monospace;padding:0 10px}#clock{font:13px 'JetBrains Mono',monospace;color:#d3e3ee;min-width:92px}
#chapter-name{color:#9fb8c8;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.spacer{flex:1}#volume{width:80px;accent-color:#ff9a3c}
#expert-row{display:none;margin-top:8px;padding-top:8px;border-top:1px solid #1b3043}#ui.expert #expert-row{display:flex}
#fine-clock{font:12px 'JetBrains Mono',monospace;color:#8ca6b8}.hint{font:11px 'JetBrains Mono',monospace;color:#5f7d92;margin-left:auto}
#toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:25;background:#101f2f;border:1px solid #ff9a3c;border-radius:8px;padding:8px 10px 8px 14px;display:flex;gap:10px;align-items:center;font-size:13px;max-width:92vw}
#toast[hidden]{display:none}#toast-close{width:34px;padding:0}
@media(max-width:700px){#volume,.hint,#chapter-name{display:none}#clock{min-width:0}button,select{height:38px}}
#back{color:#cfe3ee;text-decoration:none;font:13px 'Space Grotesk',sans-serif;border:1px solid #2c4153;border-radius:6px;height:34px;line-height:32px;padding:0 12px;background:rgba(16,31,47,.85)}#back:hover{border-color:#ff9a3c}
@media(max-width:700px){#scrub{height:50px}#back10,#fwd10{padding:0 8px}}
/* small frames (embedded on phones): poster only until the first play, then a compact bar */
@media(max-height:360px){#ui.fresh #bar{display:none}.poster-sub,.poster-note,.poster-rotate{display:none}.poster-title{font-size:clamp(22px,8vw,40px);margin:6px 0}.poster-kicker{font-size:10px}.poster-play{margin-top:10px;width:54px;height:54px;font-size:20px}
 #scrub{height:34px;margin-bottom:2px}#bar{padding:4px 8px}#row{gap:5px}#mute,#volume,#expert,#chapter-name,#back10,#fwd10{display:none}button,select{height:30px}#clock{font-size:11px}}

/* languages (same switch as the site) and the "not a video" marks */
html[data-lang="en"] [data-l="de"],html[data-lang="de"] [data-l="en"]{display:none!important}
#loading .load-kind{font:600 12px 'JetBrains Mono',monospace;color:#ffb36b;letter-spacing:.08em}
.poster-code{margin-top:14px;font:600 12px 'JetBrains Mono',monospace;color:#d8f6ff;letter-spacing:.06em}
.poster-code:empty{display:none}
.code-chip{font:11px 'JetBrains Mono',monospace;color:#8fd2ff;border:1px solid #2c4153;border-radius:4px;padding:2px 6px;white-space:nowrap}
.code-chip:empty{display:none}
@media(max-width:620px){.code-chip{display:none}}