/* Fonts: the site's own self-hosted variable Geist and JetBrains Mono (SIL OFL 1.1),
   served first-party from /brand/fonts/. No other font is named anywhere. */
@font-face { font-family: 'Geist'; src: url('/brand/fonts/geist-variable.woff2') format('woff2'); font-weight: 100 900; }
@font-face { font-family: 'JetBrains Mono'; src: url('/brand/fonts/jetbrains-mono-variable.woff2') format('woff2'); font-weight: 100 900; }
:root { --cy: #78f0ff; --cy2: rgba(120,240,255,.75); --cy3: rgba(120,240,255,.35); --amb: #ffbe46; --red: #ff3c32; --grn: #6effaa;
  --t1: #ff2d23; --t2: #ff961e; --t3: #5aa0ff; --bg: rgba(2,10,16,.84); --wht: #ebfaff; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #010407; color: var(--cy); font-family: 'JetBrains Mono', monospace; overflow: hidden; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.panel { position: fixed; background: var(--bg); border: 1px solid var(--cy3); backdrop-filter: blur(2px); text-shadow: 0 0 6px rgba(120,240,255,.35); }
.panel .head { font-weight: 700; font-size: 13px; letter-spacing: .08em; padding: 8px 12px 6px; border-bottom: 1px solid var(--cy3); display: flex; justify-content: space-between; align-items: center; }
.panel .head.small { font-size: 11px; border-top: 1px solid var(--cy3); }
.panel .sub { color: var(--cy2); font-weight: 400; }
.hidden { display: none !important; }
button, select { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--cy); background: rgba(10,30,40,.9); border: 1px solid var(--cy3); padding: 5px 8px; cursor: pointer; letter-spacing: .05em; }
button:hover, select:hover { border-color: var(--cy); background: rgba(20,60,80,.9); }
button.on { background: var(--cy); color: #01151c; }
#idbar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); text-align: center; background: var(--bg); border: 1px solid var(--cy3); padding: 6px 26px; }
#idbar .id { font-weight: 700; font-size: 20px; letter-spacing: .12em; }
#mode { font-size: 12px; color: var(--amb); font-weight: 700; letter-spacing: .1em; margin-top: 2px; }
#left { top: 90px; left: 16px; width: 430px; max-height: 300px; overflow: hidden; }
#feed { padding: 6px 12px 10px; font-size: 11px; line-height: 1.6; white-space: pre; }
#feed .t { color: var(--cy2); }
#right { top: 90px; right: 16px; width: 380px; }
#telemetry { padding: 8px 12px; font-size: 12px; line-height: 1.75; }
#telemetry .row { display: flex; } #telemetry .k { width: 130px; color: var(--cy2); font-size: 11px; } #telemetry .v { color: var(--cy); }
#telemetry .warn { color: var(--amb); }
#page-select { margin: 8px 12px 4px; width: calc(100% - 24px); }
.btnrow { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 12px; }
#dossier { top: 400px; left: 16px; width: 640px; max-height: calc(100vh - 560px); overflow-y: auto; border-left: 6px solid var(--amb); }
#dossier .head { position: sticky; top: 0; background: rgba(2,10,16,.97); }
#d-body { padding: 10px 14px 14px; font-size: 12px; line-height: 1.55; }
#d-body .tier { font-weight: 700; } #d-body .lab { color: var(--cy2); font-size: 11px; display: inline-block; width: 92px; }
#d-body .sec { margin-top: 10px; font-weight: 700; font-size: 12px; color: var(--wht); letter-spacing: .06em; }
#d-body pre { margin: 4px 0; white-space: pre-wrap; word-break: break-all; color: var(--cy2); font-size: 11px; background: rgba(0,0,0,.35); padding: 6px 8px; border: 1px solid rgba(120,240,255,.15); }
#d-body .ev { color: var(--amb); font-size: 11px; word-break: break-all; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.chip { border: 1px solid var(--cy3); padding: 2px 7px; font-size: 11px; color: var(--cy); background: rgba(4,22,30,.9); }
.chip.cite { color: var(--grn); border-color: rgba(110,255,170,.45); }
.chip .src { color: var(--cy2); margin-right: 5px; font-size: 10px; }
#d-body .assess { margin-top: 8px; color: var(--wht); font-family: 'Geist', sans-serif; font-size: 13px; line-height: 1.5; text-shadow: none; }
#d-body .note { color: var(--cy2); font-size: 10.5px; margin-top: 6px; font-family: 'Geist', sans-serif; text-shadow: none; }
#d-close, #m-close { padding: 1px 8px; }
#modal { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1100px, 92vw); max-height: 78vh; overflow-y: auto; border-color: rgba(110,255,170,.5); }
#m-body { padding: 14px 18px 18px; font-size: 13px; line-height: 1.6; }
#m-body table { border-collapse: collapse; width: 100%; } #m-body td, #m-body th { padding: 4px 8px; border-bottom: 1px solid rgba(120,240,255,.12); text-align: left; font-weight: 400; }
#m-body th { color: var(--cy2); font-size: 11px; } #m-body .big { font-size: 34px; font-weight: 700; color: var(--wht); }
#m-body .bar { height: 10px; background: var(--cy2); display: inline-block; vertical-align: middle; }
#m-body .red { color: var(--red); } #m-body .amb { color: var(--amb); } #m-body .grn { color: var(--grn); }
#timeline { left: 16px; right: 16px; bottom: 14px; padding: 8px 12px 6px; }
.tl-row { display: flex; align-items: center; gap: 10px; }
#speeds { display: flex; gap: 4px; } #clock { font-weight: 700; font-size: 16px; min-width: 150px; color: var(--wht); } #window-ctl { margin-left: auto; }
#tl-wrap { position: relative; height: 46px; margin-top: 6px; }
#tl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#scrub { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.tl-url { font-size: 10px; color: var(--cy2); margin-top: 3px; }
#hint { position: fixed; bottom: 128px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--cy2); opacity: .7; pointer-events: none; }
#reticle { position: fixed; width: 0; height: 0; pointer-events: none; }
#reticle .ring { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border: 3px solid var(--red); border-radius: 50%; box-shadow: 0 0 14px var(--red), inset 0 0 8px var(--red); animation: spin 3s linear infinite; }
#reticle .ring::before, #reticle .ring::after { content: ''; position: absolute; background: var(--red); }
#reticle .ring::before { left: 50%; top: -12px; width: 3px; height: 76px; margin-left: -1.5px; } #reticle .ring::after { top: 50%; left: -12px; height: 3px; width: 76px; margin-top: -1.5px; }
#reticle .dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
#tether { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#tether line { stroke: var(--amb); stroke-width: 2; filter: drop-shadow(0 0 4px var(--amb)); }
.flash { animation: flash .5s steps(2) infinite; } @keyframes flash { 50% { opacity: .25; } }