/* FRONTIER // DECODED — shelf offices (library/<shelf>.html) */
.of{--of-cy:#30cbdd;--of-line:rgba(48,203,221,.22);--of-dim:#a0b1be;--of-amb:#ffb547}
.of .rf-container{max-width:1320px}
.of-head{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;margin-bottom:18px}
.of-head h1{margin:6px 0 8px}
.of-sub{color:var(--of-dim);margin:0;max-width:640px;line-height:1.6}
.of-sub b{color:#fff}
.of-station{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--of-cy);border-radius:999px;padding:10px 18px;color:var(--of-cy);text-decoration:none;font:700 14px Inter,system-ui,sans-serif;white-space:nowrap}
.of-station:hover{background:rgba(48,203,221,.1)}
.of-station .dot{width:8px;height:8px;border-radius:50%;background:#ff5d5d;box-shadow:0 0 0 4px rgba(255,93,93,.18)}
/* the stage */
.of-stage{position:relative;height:min(74vh,760px);min-height:440px;border-radius:22px;overflow:hidden;border:1px solid var(--of-line);background:radial-gradient(ellipse at 50% 30%,#14262c,#070b0e 70%);touch-action:pan-y}
.of-stage canvas{display:block;width:100%;height:100%;cursor:grab}.of-stage canvas:active{cursor:grabbing}
.of-flat .of-stage{height:auto;min-height:0;padding:28px;display:grid;place-items:center}
.of-flat .of-stage:before{content:"The 3D office needs WebGL — the talk, captions and cast below still work.";color:var(--of-dim);font:500 14px Inter,sans-serif}
.of-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--of-dim);font:600 12px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
.of-3d .of-loading,.of-flat .of-loading{display:none}
.of-hint{position:absolute;left:16px;top:14px;font:600 11px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(230,240,242,.7);background:rgba(4,10,12,.55);padding:6px 10px;border-radius:999px;pointer-events:none}
.of-reset{position:absolute;right:14px;top:12px;border:1px solid var(--of-line);background:rgba(4,10,12,.6);color:#e6f0f2;border-radius:999px;padding:6px 12px;font:600 12px Inter,sans-serif;cursor:pointer}
.of-bubble{position:absolute;left:0;top:0;max-width:min(360px,70%);background:#fff7eb;color:#11191c;border-radius:14px;padding:10px 14px;font:500 14px/1.45 Inter,sans-serif;box-shadow:0 12px 30px rgba(0,0,0,.4);pointer-events:none;will-change:transform;z-index:2}
.of-bubble b{display:block;font:700 11px "JetBrains Mono",monospace;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:#fff7eb;transform:translateX(-50%) rotate(45deg);border-radius:3px}
.of-bubble[hidden]{display:none}
/* the control bar */
.of-ctl{margin-top:14px;border:1px solid var(--of-line);border-radius:18px;background:rgba(0,0,0,.32);padding:14px 16px;display:grid;gap:12px}
.of-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.of-btn{border:1px solid var(--of-line);background:transparent;color:#e9f4f5;border-radius:999px;padding:9px 16px;font:600 14px Inter,sans-serif;cursor:pointer}
.of-btn:hover{border-color:var(--of-cy)}
.of-play{background:var(--of-cy);border-color:var(--of-cy);color:#021316;font-weight:800;min-width:118px}
.of-modes{display:inline-flex;border:1px solid var(--of-line);border-radius:999px;padding:3px;margin-left:auto}
.of-modes button{border:0;background:transparent;color:#cfe0e2;border-radius:999px;padding:7px 14px;font:600 13px Inter,sans-serif;cursor:pointer}
.of-modes button[aria-pressed="true"]{background:#e9f4f5;color:#021316}
.of-modes button[data-mode=live][aria-pressed="true"]{background:var(--of-amb)}
.of-now{display:grid;gap:4px}
.of-who{font:600 11px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--of-cy);min-height:1.2em}
.of-cap{font:500 18px/1.55 Inter,sans-serif;color:#fff;min-height:2.4em;margin:0}
.of-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}.of-bar i{display:block;height:100%;width:0;background:var(--of-cy);transition:width .4s}
.of-modenote{font:500 12px "JetBrains Mono",monospace;color:var(--of-dim)}
.of-transcript{border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.of-transcript[hidden]{display:none}
.of-transcript ol{margin:0;padding-left:22px;display:grid;gap:6px;max-height:320px;overflow:auto}
.of-transcript li{color:#cfe0e2;line-height:1.55;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,.12)}
/* cast */
.rf-section .of-h2{font-family:"JetBrains Mono",monospace!important;font-size:12px!important;font-weight:600!important;line-height:1.4!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--of-dim);margin:34px 0 12px!important}
.of-castlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.of-person{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;background:rgba(0,0,0,.25);display:grid;gap:8px;transition:border-color .2s,background .2s}
.of-person.host{border-color:var(--of-line)}
.of-person.on{border-color:var(--of-cy);background:rgba(48,203,221,.08)}
.of-pick{display:flex;gap:10px;align-items:center;background:none;border:0;color:inherit;text-align:left;padding:0;cursor:pointer}
.of-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#0d2a30;border:1px solid var(--of-line);color:var(--of-cy);font:700 13px "JetBrains Mono",monospace;flex:none}
.of-person.host .of-av{background:var(--of-cy);color:#021316}
.of-pw b{display:block;color:#fff;font:700 15px Inter,sans-serif}.of-pw small{color:var(--of-dim);font:500 12px Inter,sans-serif}
.of-latest{margin:0;color:#cfe0e2;font-size:13px;line-height:1.5}.of-latest .d{font:600 11px "JetBrains Mono",monospace;color:var(--of-amb);margin-right:4px}
.of-beat{color:var(--of-cy);font-size:13px;text-decoration:none}.of-beat:hover{text-decoration:underline}
/* shelf cards */
.of-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.of-cards li{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;background:rgba(0,0,0,.22)}
.of-cards b{color:#fff;display:block;margin-bottom:6px}.of-cards p{margin:0 0 6px;color:#c3cbd0;font-size:14px;line-height:1.5}.of-cards small{color:var(--of-dim);font:500 11px "JetBrains Mono",monospace}
.of-cards .none{color:var(--of-dim)}
.of-more{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.of-error .of-cap{color:#ffb4a8}
@media (max-width:760px){.of-hint{display:none}.of-head{grid-template-columns:1fr}.of-stage{height:62vh;min-height:380px;border-radius:16px}.of-modes{margin-left:0}.of-cap{font-size:16px}.of-bubble{font-size:13px;max-width:78%}}