styles.css

:root {
  --bg:        #0a0b0d;
  --text:      #f4f5f7;
  --muted:     #8b8f98;   /* inactive tokens, captions */
  --dim:       #5a5e66;   /* separators, hairlines */
  --accent:    #38bdf8;   /* active token, slider, play, progress */
  --hairline:  #1e2127;
  --ui:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 1.5rem 2rem 2rem; }

/* Header — one line, no hero */
.head { display:flex; justify-content:space-between; align-items:baseline;
        gap:1.5rem; flex-wrap:wrap; }
.head h1 { font-size:1.5rem; font-weight:600; letter-spacing:-0.02em; }
.head h1 .muted { color:var(--muted); font-weight:400; }
.head-links { display:flex; gap:1.25rem; flex-shrink:0; }
.head-links a { color:var(--muted); text-decoration:none; font-size:.95rem;
                display:inline-flex; align-items:center; gap:.35rem;
                border-bottom:1px solid transparent; transition:.15s; }
.head-links a:hover { color:var(--text); border-bottom-color:var(--dim); }
.head-links svg { width:14px; height:14px; }
.caption { margin-top:.5rem; font-family:var(--mono); font-size:.95rem;
           color:var(--muted); letter-spacing:.02em; }

/* Plot — globes float on the dark canvas */
.viz-wrap { position:relative; }
#plot { width:100%; height:clamp(280px, 37vw, 440px); margin:0 0 .1rem; }

/* Spectra panel — overlays the right half of #plot in spectra mode */
#spectra-panel {
  position:absolute; left:50%; top:0;
  width:50%; height:100%;
  background:var(--bg); z-index:5;
  padding:.75rem .5rem .75rem 1.5rem;
  display:flex; flex-direction:column;
}
#spectra-panel.hidden { display:none; }
#spectra-chart { flex:1; min-height:0; display:block; }
.spectra-msg {
  flex:1; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.75rem; color:var(--muted);
}

/* Globe labels — positioned over each sphere center */
.globe-labels { position:relative; width:100%; height:1.3rem; margin-top:1.1rem; }
.globe-label { position:absolute; transform:translateX(-50%);
               font-family:var(--mono); font-size:.95rem; color:#aab0bb;
               letter-spacing:.08em; white-space:nowrap; }
.globe-label:first-child { left:24.25%; }
.globe-label:last-child  { left:75.75%; }
.drag-hint { font-family:var(--mono); font-size:.7rem; color:var(--dim);
             text-align:center; margin:.12rem 0 0; letter-spacing:.04em; }

/* Thin streamed progress / status bar */
.status { position:relative; height:30px; border-radius:6px; overflow:hidden;
          background:rgba(56,189,248,0.06);
          border:1px solid rgba(56,189,248,0.18);
          display:flex; align-items:center; padding:0 .9rem;
          font-family:var(--mono); font-size:.72rem; color:var(--muted);
          transition:opacity .3s; }
.status::before { content:''; position:absolute; inset:0;
                  width:var(--p,0%); background:rgba(56,189,248,0.16);
                  transition:width .25s ease; }
.status span { position:relative; z-index:1; }
.status.hidden { opacity:0; pointer-events:none; height:0; border:0; margin:0; }

/* Controls */
.controls { display:flex; flex-direction:column; gap:.7rem; margin-top:.6rem; }
.row { display:flex; align-items:baseline; gap:.5rem 1.5rem; flex-wrap:wrap; }
.row > .label { font-family:var(--mono); font-size:.85rem; color:var(--muted);
                text-transform:uppercase; letter-spacing:.08em;
                min-width:9.5rem; flex-shrink:0; }

/* Inline text-token selector */
.tokens { display:flex; flex-wrap:wrap; align-items:baseline; flex:1; }
.token { font-size:.95rem; color:var(--muted); cursor:pointer;
         transition:color .15s; white-space:nowrap; }
.token:hover { color:var(--text); }
.token.active { color:var(--text); text-decoration:underline;
                text-decoration-color:var(--accent);
                text-underline-offset:4px; text-decoration-thickness:1.5px; }
.sep { color:var(--dim); pointer-events:none; padding:0 .5rem; }

/* Hairline slider (members) */
.slider-row input[type=range] { -webkit-appearance:none; appearance:none;
  flex:1; max-width:220px; height:16px; background:transparent; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track { height:1px; background:var(--dim); }
input[type=range]::-moz-range-track { height:1px; background:var(--dim); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
  width:12px; height:12px; margin-top:-6px; border-radius:50%;
  background:var(--accent); }
input[type=range]::-moz-range-thumb { width:12px; height:12px; border:0;
  border-radius:50%; background:var(--accent); }
.val { font-family:var(--mono); font-size:.9rem; color:var(--text);
       min-width:2ch; }

/* Timeline + play */
.timeline-controls { display:flex; align-items:center; gap:.75rem; flex:1; }
.timeline-controls #timeline { flex:1; }
.play { font-family:var(--mono); font-size:.78rem; color:var(--accent);
        background:none; border:0; cursor:pointer; padding:0;
        letter-spacing:.04em; }
.play:hover { color:var(--text); }
.lead { font-family:var(--mono); font-size:.9rem; color:var(--muted);
        min-width:9ch; }

@media (max-width:720px) {
  .wrap { padding:1.5rem 1.1rem 3rem; }
  .row > .label { min-width:100%; }
  #plot { height:78vw; }
}