/* FRONTIER // DECODED — full-screen shelf offices (library/<id>.html), same feel as the Signal Room */
:root{color-scheme:dark;--bg:#04060a;--cy:#30cbdd;--amb:#ffb547;--cream:#fff7eb;--dim:#b4c6cc;--line:rgba(48,203,221,.28);--glass:rgba(5,12,15,.72);--mono:"JetBrains Mono",ui-monospace,monospace;--disp:"Saira Condensed","Arial Narrow",sans-serif;--sans:Inter,system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--cream);font:15px/1.5 var(--sans);overflow:hidden}
a{color:var(--cy)}button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--amb);outline-offset:2px}
.of{position:fixed;inset:0}
/* the 3D room fills the screen */
.of-stage{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,#14262c,#05080a 72%);touch-action:none}
.of-stage canvas{display:block;width:100%;height:100%;cursor:grab}.of-stage canvas:active{cursor:grabbing}
.of-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,6,10,.78) 0,rgba(4,6,10,0) 22%,rgba(4,6,10,0) 62%,rgba(4,6,10,.85) 100%)}
.of-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
.of-3d .of-loading,.of-flat .of-loading{display:none}
.of-flat .of-stage:before{content:"The 3D office needs WebGL — the talk, captions and cast still work.";position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font:500 14px var(--sans);padding:24px;text-align:center}
.of-bubble{position:absolute;left:0;top:0;max-width:min(360px,70%);background:var(--cream);color:#11191c;border-radius:14px;padding:10px 14px;font:500 14px/1.45 var(--sans);box-shadow:0 12px 30px rgba(0,0,0,.45);pointer-events:none;will-change:transform;z-index:3}
.of-bubble b{display:block;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#0d6f7a;margin-bottom:3px}
.of-bubble:after{content:"";position:absolute;left:var(--tail,40px);bottom:-8px;width:16px;height:16px;background:var(--cream);transform:translateX(-50%) rotate(45deg);border-radius:3px}
.of-bubble[hidden]{display:none}
/* top bar */
.of-top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;gap:18px;align-items:flex-start;padding:18px 22px;pointer-events:none}
.of-top>*{pointer-events:auto}
.of-brand{font:800 15px/1.02 var(--disp);letter-spacing:.06em;color:var(--cream);text-decoration:none;flex:none;padding-top:4px}
.of-brand span{color:var(--cy)}
.of-title{min-width:0;flex:1}
.of-kick{font:600 10.5px var(--mono);letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.of-kick a{color:var(--cy);text-decoration:none}
.of-title h1{margin:4px 0 2px;font:800 clamp(28px,4vw,52px)/.95 var(--disp);letter-spacing:.01em;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.of-sub{margin:0;color:var(--dim);font-size:14px}.of-sub b{color:#fff}
.of-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:520px}
.of-pill,.of-station{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);color:var(--cream);border-radius:999px;padding:8px 14px;font:600 13px var(--sans);text-decoration:none;white-space:nowrap}
.of-pill:hover,.of-station:hover{border-color:var(--cy)}
.of-station{color:var(--cy);border-color:var(--cy)}
.of-station .dot{width:8px;height:8px;border-radius:50%;background:#ff5d5d;box-shadow:0 0 0 4px rgba(255,93,93,.2)}
.of-hint{position:absolute;left:22px;top:150px;z-index:4;font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(230,240,242,.75);background:rgba(4,10,12,.55);padding:6px 10px;border-radius:999px;pointer-events:none}
.of-reset{position:absolute;right:22px;top:150px;z-index:4;border:1px solid var(--line);background:var(--glass);color:var(--cream);border-radius:999px;padding:6px 12px;font:600 12px var(--sans)}
/* bottom control dock */
.of-ctl{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;width:min(980px,calc(100% - 32px));border:1px solid var(--line);border-radius:20px;background:var(--glass);backdrop-filter:blur(14px);padding:14px 16px;display:grid;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.of-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.of-btn{border:1px solid var(--line);background:transparent;color:#e9f4f5;border-radius:999px;padding:8px 15px;font:600 14px var(--sans)}
.of-btn:hover{border-color:var(--cy)}
.of-play{background:var(--cy);border-color:var(--cy);color:#021316;font-weight:800;min-width:118px}
.of-modes{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;margin-left:auto}
.of-modes button{border:0;background:transparent;color:#d6e4e6;border-radius:999px;padding:6px 13px;font:600 13px var(--sans)}
.of-modes button[aria-pressed="true"]{background:#e9f4f5;color:#021316}
.of-modes button[data-mode=live][aria-pressed="true"]{background:var(--amb)}
.of-now{display:grid;gap:4px}
.of-who{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cy);min-height:1.2em}
.of-cap{font:500 17px/1.5 var(--sans);color:#fff;margin:0;max-height:4.6em;overflow:auto}
.of-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}.of-bar i{display:block;height:100%;width:0;background:var(--cy);transition:width .4s}
.of-modenote{font:500 12px var(--mono);color:var(--dim)}.of-modenote:empty{display:none}
.of-transcript{border-top:1px solid rgba(255,255,255,.1);padding-top:8px}
.of-transcript[hidden]{display:none}
.of-transcript ol{margin:0;padding-left:22px;display:grid;gap:5px;max-height:28vh;overflow:auto}
.of-transcript li{color:#d6e4e6;line-height:1.5;cursor:pointer;border-radius:8px;padding:2px 6px}
.of-transcript li b{color:#fff;margin-right:6px}.of-transcript li.on{background:rgba(48,203,221,.14)}
.of-error .of-cap{color:#ffc4b8}
/* side drawer: cast and shelf */
.of-drawer{position:absolute;top:0;right:0;bottom:0;z-index:8;width:min(440px,100%);background:rgba(5,10,13,.94);backdrop-filter:blur(16px);border-left:1px solid var(--line);padding:20px 18px 28px;overflow:auto}
.of-drawer[hidden]{display:none}
.of-dh{display:flex;align-items:center;justify-content:space-between}
.of-close{border:1px solid var(--line);background:none;border-radius:50%;width:36px;height:36px;font-size:20px;line-height:1}
.of-h2{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:16px 0 10px}
.of-castlist,.of-cards{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.of-person{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:11px;background:rgba(0,0,0,.3);display:grid;gap:7px}
.of-person.host{border-color:var(--line)}.of-person.on{border-color:var(--cy);background:rgba(48,203,221,.1)}
.of-pick{display:flex;gap:10px;align-items:center;background:none;border:0;text-align:left;padding:0}
.of-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#0d2a30;border:1px solid var(--line);color:var(--cy);font:700 12px var(--mono);flex:none}
.of-person.host .of-av{background:var(--cy);color:#021316}
.of-pw b{display:block;color:#fff;font:700 15px var(--sans)}.of-pw small{color:var(--dim);font:500 12px var(--sans)}
.of-latest{margin:0;color:#d6e4e6;font-size:13px;line-height:1.5}.of-latest .d{font:600 11px var(--mono);color:var(--amb);margin-right:4px}
.of-beat{color:var(--cy);font-size:13px;text-decoration:none}.of-beat:hover{text-decoration:underline}
.of-cards li{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px;background:rgba(0,0,0,.28)}
.of-cards b{color:#fff;display:block;margin-bottom:5px}.of-cards p{margin:0 0 5px;color:#cfd8dc;font-size:14px}.of-cards small{color:var(--dim);font:500 11px var(--mono)}
.of-cards .none{color:var(--dim)}
.of-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.rf-button{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--cream);text-decoration:none;font:600 13px var(--sans)}
.rf-button:hover{border-color:var(--cy)}
.of-noscript{position:fixed;inset:auto 16px 16px;background:#111;padding:12px;border-radius:12px}
@media (max-width:760px){
 .of-top{flex-wrap:wrap;padding:12px 14px;gap:8px}.of-brand{display:none}
 .of-nav{max-width:none;justify-content:flex-start}.of-pill,.of-station{padding:6px 11px;font-size:12px}
 .of-hint{display:none}.of-reset{top:auto;bottom:calc(var(--ctlh,190px) + 26px);right:14px}
 .of-ctl{bottom:10px;width:calc(100% - 20px);padding:11px 12px;border-radius:16px}
 .of-cap{font-size:15px;max-height:4.5em}.of-modes{margin-left:0}.of-btn{padding:7px 12px;font-size:13px}
 .of-fs{display:none}
}
@media (prefers-reduced-motion:reduce){.of-bar i{transition:none}}