:root {
  --bg: #080a10;
  --panel: #0c1018;
  --line: #1a2230;
  --ink: #d8e0ea;
  --dim: #7a8799;
  --accent: #80ecff;
  --gf: #ffd84a;
  --ok: #3dff88;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); }
body { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
a { color: var(--accent); }
.side {
  border-right: 1px solid var(--line); background: linear-gradient(180deg, #0c1018, #090c12);
  padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; overflow: auto;
}
.brand { letter-spacing: .16em; font-size: 11px; color: var(--accent); text-transform: uppercase; }
h1 { margin: 0; font-size: 18px; font-weight: 600; }
.lede { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.45; }
.stat {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.stat .card {
  background: #0a0e15; border: 1px solid var(--line); border-radius: 8px; padding: 10px;
}
.stat .k { font-size: 10px; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.stat .v { font-family: var(--mono); font-size: 14px; margin-top: 4px; color: var(--accent); }
.legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; box-shadow: 0 0 8px currentColor; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; }
button {
  appearance: none; border: 1px solid var(--line); background: #101622; color: var(--ink);
  border-radius: 7px; padding: 7px 10px; font-size: 11px; cursor: pointer;
}
button:hover { border-color: var(--accent); color: var(--accent); }
button.primary { background: #122033; border-color: #2a4a66; color: var(--accent); }
.foot { margin-top: auto; font-size: 11px; color: var(--dim); line-height: 1.4; }
.stage { position: relative; min-width: 0; min-height: 100vh; background: var(--bg); }
#viewport { position: absolute; inset: 0; }
#viewport canvas { display: block; width: 100% !important; height: 100% !important; }
#label {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.55); color: #f2f2f2;
  font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity .15s; z-index: 2;
}
#label.on { opacity: 1; }
#hud {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-family: var(--mono); font-size: 11px; color: var(--ok);
  background: rgba(2,7,4,.72); border: 1px solid #123a24; border-radius: 8px;
  padding: 8px 10px; min-width: 190px; pointer-events: none;
}
#hud .t { letter-spacing: .12em; opacity: .7; margin-bottom: 4px; font-size: 10px; }
#status {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  background: rgba(8,10,16,.7); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px;
}
@media (max-width: 860px) {
  body { grid-template-columns: 1fr; }
  .side { border-right: 0; border-bottom: 1px solid var(--line); max-height: 42vh; }
  .stage { min-height: 58vh; }
}

#hud { pointer-events: auto; }
#hud a { color: var(--ok); text-decoration: none; opacity: .85; }
#hud a:hover { opacity: 1; text-decoration: underline; }
#hud .links { margin-top: 6px; opacity: .8; font-size: 10px; }
#tape {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  font-family: var(--mono); font-size: 11px; color: #9fe8c2;
  background: linear-gradient(90deg, rgba(2,10,6,.92), rgba(2,10,6,.75));
  border-top: 1px solid #123a24; padding: 8px 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.voice-panel{border-top:1px solid #284237;padding-top:14px;margin-top:14px;font-size:12px;overflow-wrap:anywhere}
.speech-panel { border:1px solid var(--line); border-radius:12px; padding:12px; font-size:12px; }
.speech-option { display:flex; align-items:center; gap:6px; margin-top:10px; }
#speech-status { color:var(--accent); font:11px/1.5 var(--mono); }
#speech-caption { overflow-wrap:anywhere; max-height:100px; overflow:auto; }
.speech-panel .foot { margin-bottom:0; }
.voice-panel input{max-width:170px;background:#0a1612;color:#c2f7da;border:1px solid #426b58;padding:6px}
.voice-setting{display:flex;align-items:center;gap:8px;margin:8px 0;color:#b9c7c0;flex-wrap:wrap}
.voice-setting select{min-width:0;max-width:100%;padding:5px;background:#0a1612;color:#c2f7da;border:1px solid #426b58;border-radius:5px}
.voice-setting input[type=range]{flex:1;min-width:80px;accent-color:#b5f27b;padding:0}
.voice-setting :disabled{opacity:.6}
#voice-status{margin-top:8px;color:#9fe8c2}
.brain-speaking #viewport{filter:drop-shadow(0 0 12px #54aa91)}
.brain-speaking #voice-toggle{box-shadow:0 0 18px #519e75}

/* SOLGPT Observatory: keep the measured circuit colors, use desk accents. */
:root { --accent:#a3ffcf; --bg:#080c10; --panel:#101b21; }
.brand { text-decoration:none; font-weight:700; }
h1 { font-size:27px; line-height:1.12; letter-spacing:-.035em; }
.experiences { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:11px; }
.experiences a { text-decoration:none; }
.chat-panel { border-top:1px solid var(--line); padding-top:16px; }
.chat-panel .k { font:10px var(--mono); letter-spacing:.15em; color:var(--accent); }
#brain-question { resize:vertical; min-height:70px; width:100%; margin:0 0 8px; padding:10px; border:1px solid #294039; border-radius:8px; color:var(--ink); background:#07120e; font:12px/1.5 var(--sans); }
#brain-chat-status { color:var(--accent); font:11px/1.5 var(--mono); }
#brain-chat-reply { max-height:240px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.65 var(--sans); }
button:disabled { opacity:.5; cursor:wait; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(min-width:861px) { body { grid-template-columns:310px 1fr; height:100vh; overflow:hidden; } .stage { min-height:0; height:100vh; } }
@media(max-width:860px) { .side { max-height:46vh; } .stage { min-height:54vh; } #hud { top:58px; right:10px; max-width:calc(100% - 20px); } #status { max-width:calc(100% - 20px); font-size:10px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }