@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap');
:root{color-scheme:dark;--accent:#c8a0ff;--cyan:#9edbff;--bg:#05000a;--text:#f3eaff;--muted:#c9c0df;--line:rgba(200,160,255,.25)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
body{padding-top:104px;background-image:radial-gradient(ellipse at 80% 5%,rgba(120,180,255,.12),transparent 46%),radial-gradient(ellipse at 10% 80%,rgba(180,120,255,.1),transparent 50%);line-height:1.6}
.presentation-main a{color:var(--cyan);text-underline-offset:4px}.presentation-main button,.presentation-main select{font:inherit}.presentation-main button,.presentation-main a,.presentation-main select{touch-action:manipulation}
.presentation-main :focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.skip{position:absolute;top:-100px;left:12px;background:var(--bg);z-index:9999;padding:12px}.skip:focus{position:fixed;top:12px}
.player-header{max-width:1328px;padding:18px 24px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line)}.wordmark{font-size:19px;font-weight:300;letter-spacing:3px;text-decoration:none;color:var(--accent)}.player-header nav{display:flex;flex-wrap:wrap;gap:16px}.player-header nav a{font-size:13px;text-decoration:none;color:var(--muted)}
.presentation-main{max-width:1328px;padding:32px 24px 56px;margin:auto;position:relative;z-index:10}
.presentation-main .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.23em;color:var(--cyan);margin:0 0 14px}
.presentation-main h1{font-size:clamp(25px,3.5vw,42px);font-weight:200;line-height:1.2;letter-spacing:.04em;margin:0 0 12px}.presentation-main h2{font-size:18px;font-weight:400;letter-spacing:.02em;margin:0 0 10px}.presentation-main .intro{font-size:15px;color:var(--muted);max-width:900px;margin:0 0 36px}
#viewer{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);padding:12px}
.playback-focus{width:100%;margin:0 auto;scroll-margin-top:110px;outline:none}
.stage{position:relative;width:100%;margin:0 auto;aspect-ratio:16/9;overflow:hidden;background:#08061b;border:1px solid rgba(120,180,255,.16);border-radius:5px}
.stage iframe{position:absolute;top:0;left:0;width:1280px;height:720px;border:0;display:block;transform-origin:top left;background:#08061b}
.load-message{position:absolute;z-index:2;top:16px;left:16px;max-width:calc(100% - 32px);background:#10071d;color:#d9c9f3;padding:10px 14px;border-radius:8px;font-size:14px;margin:0}.load-message[hidden]{display:none}
.progress{height:3px;background:#211734;margin:8px auto 0}.progress>div{width:0;height:100%;background:linear-gradient(90deg,#a1ddff,#c8a0ff)}
.controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:20px 6px 0;font-size:13px}
.controls button,.controls select{border:1px solid var(--line);background:#140c24;color:var(--text);border-radius:999px;padding:10px 14px;cursor:pointer}
.controls button:hover{border-color:var(--cyan)}.controls .primary{background:rgba(200,160,255,.16);border-color:rgba(200,160,255,.6);min-width:155px}
.controls label{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.controls input{accent-color:#c8a0ff}.controls select{padding:8px 9px}.controls button:disabled{opacity:.4;cursor:default}.counter{font-size:13px;min-width:48px;text-align:center;color:var(--muted)}
.status{margin:24px 0 0;text-align:center;font-size:13px;color:var(--cyan)}.hint{font-size:12px;color:#b0a5c4;text-align:center;margin:12px 0 36px}
.chapters{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;border-top:1px solid var(--line);padding-top:24px}.chapters a{font-size:12px;text-decoration:none;color:var(--muted);padding:7px 10px;border-radius:999px;border:1px solid transparent}.chapters a[aria-current]{color:var(--cyan);border-color:rgba(120,180,255,.45);background:rgba(120,180,255,.08)}
.direct{text-align:center;font-size:12px;margin:30px 0}.reference{max-width:920px;margin:36px auto 8px;padding:22px;border-left:2px solid #c8a0ff;background:rgba(200,160,255,.05);font-size:13px;color:var(--muted)}.reference h2{font-size:14px}.reference p{margin:0 0 12px}
.continue{margin:36px 0 0}.continue nav{display:flex;gap:12px;flex-wrap:wrap}.continue a{font-size:14px;border:1px solid var(--line);border-radius:12px;padding:12px 16px;text-decoration:none}
.player-fallback-footer{border-top:1px solid var(--line);padding:22px 24px 36px;max-width:1328px;margin:auto;color:#b0a5c4;font-size:12px}.error{color:#ffc9bf;text-align:center}
#viewer:fullscreen{overflow:auto;background:var(--bg);border-radius:0;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center}#viewer:fullscreen .playback-focus{width:100%}#viewer:fullscreen .reference,#viewer:fullscreen .chapters,#viewer:fullscreen .hint,#viewer:fullscreen .direct{display:none}
body.reading-mode{--text:#2f3d45;--muted:#52616d;--cyan:#3f5d78;--line:rgba(63,76,88,.25)}body.reading-mode #viewer{background:rgba(255,253,248,.65)}body.reading-mode .controls button,body.reading-mode .controls select{background:#fffdf8;color:#2f3d45}body.reading-mode .reference{background:rgba(89,72,111,.05)}body.reading-mode .hint{color:#52616d}
@media(max-width:1240px){body{padding-top:92px}}
@media(max-width:600px){.presentation-main{padding:26px 12px 36px}.player-header{padding:14px 12px;align-items:flex-start}.player-header nav{gap:8px 12px;justify-content:flex-end;max-width:235px}.player-header nav a{font-size:12px}.wordmark{font-size:16px;white-space:nowrap}#viewer{padding:6px}.controls{gap:8px;padding-top:14px}.controls button{font-size:12px;padding:9px 10px}.controls .primary{min-width:138px}.presentation-main .intro{font-size:14px}.hint{padding:0 10px}.chapters{gap:2px}.chapters a{font-size:11px}.continue nav{flex-direction:column}.reference{padding:18px}.status{padding:0 8px}.playback-focus{scroll-margin-top:90px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}