:root{color-scheme:dark;--paper:#e6d9c0;--muted:#929da2;--line:#2b353b;--gold:#bb945c}*{box-sizing:border-box}body{margin:0;background:#080d11;color:var(--paper);font-family:system-ui,sans-serif}main{max-width:1380px;margin:auto;padding:22px 32px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.eyebrow{font-size:9px;letter-spacing:.27em;color:var(--gold);margin:0 0 8px}h1{font:normal 29px Georgia,serif;margin:0}nav{display:flex;gap:6px}button{cursor:pointer;color:inherit;background:transparent;border:1px solid var(--line);border-radius:3px;padding:10px 15px;font:inherit;font-size:12px;letter-spacing:.02em}button:hover{border-color:var(--gold);background:#ffffff05}button[aria-pressed=true],button.primary{background:var(--paper);color:#11191d;border-color:var(--paper)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #e2b274;outline-offset:4px}#stage{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#172027,#040709 76%);border:1px solid #273036;min-height:200px;overflow:hidden}#frame{position:relative;width:min(100%,calc((100svh - 270px)*16/9));aspect-ratio:16/9;overflow:hidden;background:#030609}#stage.portrait #frame{width:min(100%,calc((100svh - 270px)*9/16));aspect-ratio:9/16}canvas{position:absolute;inset:0;width:100%;height:100%}#overlay{pointer-events:none}#cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:17px;border:0;border-radius:0;background:linear-gradient(#0306090d,#03060955);text-shadow:0 2px 14px #000;font-size:11px;letter-spacing:.19em}#cover:hover{background:linear-gradient(#03060900,#03060933)}#cover small{font:11px system-ui,sans-serif;letter-spacing:.02em;color:#c1c5c4}.playmark{font-size:20px;border:1px solid #ad98716b;border-radius:50%;padding:17px 18px 17px 22px;background:#090e1180;color:#f4e5ca}#cover[hidden]{display:none}#loading{position:absolute;left:0;right:0;bottom:15%;text-align:center;font-size:12px;color:#bdc5c8}.controls{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:14px}.actions,.options{display:flex;gap:8px;align-items:center}.options{gap:15px}.options label{display:flex;gap:5px;align-items:center;font-size:11px;color:#acb5b6}input[type=checkbox]{accent-color:#bd985f}#clock{font:11px ui-monospace,monospace;color:#a4adb0;font-variant-numeric:tabular-nums}#seek{width:100%;height:14px;margin:10px 0 9px;accent-color:#bd985f;cursor:pointer}.chapters{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.chapters button{text-align:left;color:#9aa5aa;font-size:11px;padding:10px 12px}.chapters span{font:13px Georgia,serif;color:#b79768;margin-right:9px}.chapters button.active{color:#e6d9c0;border-color:#87714c;background:#b99b5f0a}footer{display:flex;justify-content:space-between;gap:15px;margin-top:13px;font-size:10px;color:#7f8b91;line-height:1.6}a{color:#9da7aa;text-underline-offset:3px}#notice{font-size:12px;color:#cbb48e;min-height:15px;margin:8px 0 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#stage:fullscreen{border:0;background:#030609;width:100vw;height:100vh}#stage:fullscreen #frame{width:min(100vw,calc(100vh*16/9));max-height:100vh}#stage.portrait:fullscreen #frame{width:min(100vw,calc(100vh*9/16));max-height:100vh}@media(max-width:730px){main{padding:16px 12px}header{gap:10px}h1{font-size:25px}.eyebrow{font-size:7px;letter-spacing:.18em}header nav button{padding:9px 10px;font-size:11px}.controls{flex-wrap:wrap;gap:11px}.options{width:100%;justify-content:space-between;gap:7px}.actions{width:100%}.actions button{flex:1;font-size:11px;padding:10px 9px}.chapters{gap:4px}.chapters button{text-align:center;padding:9px 2px;font-size:9px;line-height:1.4}.chapters span{display:block;margin:0 0 4px;font-size:13px}#frame{width:min(100%,calc((100svh - 330px)*16/9))}#stage.portrait #frame{width:min(100%,calc((100svh - 330px)*9/16))}footer{font-size:9px}#cover{font-size:9px;letter-spacing:.09em;gap:12px}#cover small{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
:is(#cover,#cover:hover){background:linear-gradient(#03060933,#03060999),url('assets/seal-landscape.webp') center/cover}
#stage.portrait :is(#cover,#cover:hover){background-image:linear-gradient(#03060933,#03060999),url('assets/seal-portrait.webp')}
.transcript{max-width:65ch;margin-top:20px;color:#bfc4bd;line-height:1.7;font-size:14px}.transcript summary{cursor:pointer;color:var(--paper)}