:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#0b1220;color:#e2e8f0}*{box-sizing:border-box}body{margin:0}main{max-width:1150px;margin:auto;padding:24px}a{color:#87c8ff}header{margin-bottom:24px}header>a{font-size:14px;text-decoration:none}header>span{float:right;font-size:10px;letter-spacing:1.4px;color:#83d9b9}h1{font-size:clamp(25px,4vw,38px);letter-spacing:-1px;margin:18px 0 6px}header p{margin:0;color:#9badc4;font-size:15px;line-height:1.5}.film-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:24px;align-items:start}.player{background:#101e2d;border:1px solid #30445b;border-radius:18px;padding:16px;position:sticky;top:15px;overflow:hidden}.scene-head{display:flex;align-items:center;gap:8px}.scene-head>span:first-child{font-size:11px;color:#9badc4;white-space:nowrap}.scene-head h2{font-size:17px;line-height:1.2;margin:0;flex:1}.sim-label{font-size:9px;color:#f7cf84;border:1px solid #7f6640;border-radius:4px;padding:4px;letter-spacing:.7px}.visual{max-width:520px;margin:auto}#cube{width:100%;height:auto;display:block}.readings{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:4px;border-top:1px solid #30445b;padding:10px 0 8px}.readings span{display:block;font-size:10px;color:#9badc4}.readings strong{display:block;font-size:21px;font-variant-numeric:tabular-nums;margin-top:3px}.readings div:nth-child(1) strong{color:#83bbff}.readings div:nth-child(2) strong{color:#f6c67c}.readings div:nth-child(3) strong{color:#75dcb3}.flow{font-size:12px;line-height:1.55;min-height:38px;color:#becbdd;padding:5px 0}.flow b{color:#e2e8f0}.status{font-size:12px;line-height:1.5;border-left:3px solid #64cdb2;padding:8px 10px;background:#152b30;min-height:51px}.status[data-level=critical]{border-color:#ff7484;background:#35202a}.status[data-level=warning]{border-color:#f6c67c;background:#302c21}.status[data-level=unknown]{border-color:#a6afbe;background:#242c39}.transport{display:flex;gap:6px;align-items:center;margin:12px 0 8px}button{font:inherit;cursor:pointer;color:#e2e8f0;border:1px solid #4c657f;border-radius:8px;background:#1b3147;padding:10px 12px;min-height:42px}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #83bbff;outline-offset:3px}button:disabled{opacity:.4;cursor:default}#play{flex:1;background:#205b59;border-color:#6ed7bd;font-size:13px;font-weight:600}.voice{font-size:12px;white-space:nowrap}.voice input{accent-color:#6ed7bd}.timeline{font-size:11px;color:#aabbd0;display:block}.timeline>span{float:right}input[type=range]{width:100%;accent-color:#6ed7bd;margin:8px 0 0;display:block}.audio-status{font-size:11px;line-height:1.4;color:#91a7bf;margin:9px 0 0}.commentary{background:#101b2a;border-radius:16px;padding:22px;border:1px solid #26394e}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#76d8b6}#caption{font-size:18px;line-height:1.65;min-height:125px;margin:13px 0 18px}.balance{font-size:16px;line-height:1.6;border-top:1px solid #30445b;padding-top:14px;white-space:pre-line;font-variant-numeric:tabular-nums}.note{color:#9badc4;font-size:12px;line-height:1.6}.chapters{padding:20px 0}.chapters h2{font-size:16px;margin:0 0 10px}#chapters{display:grid;gap:7px}#chapters button{display:flex;align-items:center;text-align:left;font-size:13px;background:#101b2a;border-color:#26394e;gap:12px;padding:11px 13px}#chapters button span{color:#8195ae;font-size:11px}#chapters button[aria-current=true]{background:#173c3c;border-color:#63c5ab}#chapters button[aria-current=true] span{color:#80e7c6}.documentation{margin:35px 0 20px;border-top:1px solid #30445b;padding-top:22px}.documentation h2{font-size:23px}.documentation p{font-size:14px;line-height:1.7;color:#b8c7d9}.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 30px}.documentation h3{font-size:15px;margin:15px 0 6px}.documentation details{margin:20px 0;padding:16px;border:1px solid #30445b;border-radius:10px}.documentation summary{cursor:pointer}#transcript h3{color:#83d9b9}svg text{font-family:system-ui,sans-serif}svg .flow-dot{animation:flowing 1.2s linear infinite}@keyframes flowing{to{stroke-dashoffset:-16}}@media(prefers-reduced-motion:reduce){svg .flow-dot{animation:none}}@media(max-width:760px){main{padding:14px}.film-layout{display:block}.player{position:relative;top:auto;padding:12px;border-radius:13px}header{margin-bottom:14px}header>span{font-size:8px;letter-spacing:.8px}h1{margin-top:13px}header p{font-size:12px}.scene-head h2{font-size:14px}.visual{max-width:380px}.commentary{padding:17px;margin-top:14px}#caption{font-size:16px;min-height:0}.readings strong{font-size:20px}.notes-grid{grid-template-columns:1fr}.documentation{margin-top:15px}.chapters{padding-bottom:5px}.flow{min-height:34px}.audio-status{margin-bottom:0}}@media(max-width:350px){main{padding:9px}.player{padding:9px}.scene-head h2{font-size:12px}.sim-label{font-size:8px}.readings span{font-size:9px}.readings strong{font-size:18px}#play{font-size:11px;padding:9px 4px}.transport{gap:4px}.transport button:not(#play){padding:8px 10px}.voice{font-size:11px}}

/* Point coordinates and cube form one visual unit, also on narrow phones. */
.visual{max-width:440px}
.point-readings{border:1px solid #4a627b;border-radius:10px;background:#0b1725;margin:12px 0 2px;padding:10px}
.readings-heading{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;font-size:9px;line-height:1.5;color:#b5c9dd;letter-spacing:.5px}
#read-state{letter-spacing:0;color:#cddceb}
.point-readings .readings{border:0;padding:8px 0 0;grid-template-columns:1fr 1fr 1fr;gap:6px}
.point-readings .readings>div{min-width:0;border-left:2px solid #75dcb3;padding-left:7px}
.point-readings .readings>div:nth-child(2){border-color:#83bbff}
.point-readings .readings>div:nth-child(3){border-color:#f6c67c}
.point-readings .readings span{font-size:10px;color:#d5e1ed;line-height:1.5}
.point-readings .readings small{display:block;font-size:9px;color:#9badc4;line-height:1.5}
.point-readings #read-z{color:#75dcb3}.point-readings #read-j{color:#83bbff}.point-readings #read-b{color:#f6c67c}
.point-readings .readings strong{font-size:clamp(16px,4.6vw,22px);white-space:nowrap;letter-spacing:-.4px}
.point-readings[data-level=critical]{border-color:#ff7484;background:#2b1b28}
.point-readings[data-level=warning]{border-color:#f6c67c;background:#29251e}
.point-readings[data-level=unknown]{border-color:#a6afbe;background:#242c39}
.point-readings[data-level=critical] .readings strong,.point-readings[data-level=critical] #read-state{color:#ff8593}
.point-readings[data-level=warning] .readings strong,.point-readings[data-level=warning] #read-state{color:#f6c67c}
.point-readings[data-level=unknown] .readings strong,.point-readings[data-level=unknown] #read-state{color:#b5c0ce}
.voice{font-size:11px}
@media(max-width:350px){.point-readings{padding:8px}.point-readings .readings>div{padding-left:5px}.point-readings .readings span{font-size:9px}.point-readings .readings small{font-size:8px}.point-readings .readings{gap:4px}}

.film-mode{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:14px}.film-mode select{font:inherit;max-width:100%;padding:12px;background:#142b32;color:#e2e8f0;border:1px solid #6ed7bd;border-radius:8px}#island-soc{padding:8px;border:1px solid #3e6256;border-radius:8px;color:#75dcb3}
