:root {
  --bg: #070707;
  --panel: #0d0d0d;
  --line: #2a2a2a;
  --fg: #e8e8e8;
  --muted: #888;
  --accent: #2fa7c9;
  --warn: #d98a2b;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  line-height: 1.6;
}
.wrap { max-width: 1000px; margin: 0 auto; padding: 40px 24px 100px; }

.kicker { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
h1 { font-size: clamp(26px, 4vw, 40px); margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.01em; }
/* CSS text-transform:uppercase doesn't just restyle a letter — for a
   lowercase Greek omega (ω) it swaps in the actual UPPERCASE OMEGA
   codepoint (Ω, an arch shape) instead, which is a genuinely different
   glyph from the "w"-like lowercase one that's the project's one
   canonical way of writing its own name (see docs/MANIFESTO.md). Every
   .brand-title/h1 that includes "SOL-ω" wraps just that character in
   <span class="keep-case">, exempting it from the parent's uppercase
   transform without touching the transform itself (everything else in
   the heading still uppercases normally) and without needing a
   different font. */
.keep-case { text-transform: none; }
.tagline {
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 600;
  color: #fff;
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}
.subtitle { color: var(--muted); font-size: 14px; max-width: 680px; margin-bottom: 28px; }
.subtitle strong { color: #fff; }
.nasa-tag {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--accent);
  padding: 0 1px;
}

.status-line {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px 16px;
  font-size: 12.5px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.status-line.error { border-color: #803030; color: #e08080; }
.status-line.ok { border-color: #2f6b40; color: #7fd99a; }

.btn {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg);
  padding: 10px 18px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

section { margin: 40px 0; }
section h2 {
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em;
  border-left: 3px solid var(--accent); padding-left: 12px; margin-bottom: 16px;
}

/* ---- Unified instrument panel (3D view + waveforms + cymatics + controls) ---- */
.instrument-panel {
  border: 1px solid var(--line);
  background: #050505;
  padding: 18px;
}
.instrument-block { margin-bottom: 26px; }
.instrument-block:last-child { margin-bottom: 0; }
.instrument-block .fine-print { margin-top: 10px; margin-bottom: 0; }
.panel-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--accent); margin-bottom: 10px;
}
.three-wrap { border: 1px solid var(--line); background: #000; margin-bottom: 8px; position: relative; }
.three-wrap canvas { display: block; width: 100%; }
.clock-overlay {
  position: absolute; top: 10px; left: 12px;
  font-size: 11px; letter-spacing: 0.05em; color: #ddd;
  background: rgba(0,0,0,0.55); border: 1px solid var(--line);
  padding: 5px 9px;
  font-family: var(--mono);
}
/* The clock doubles as a button (click it to pick a different date) —
   everywhere else .clock-overlay is non-interactive, so only this one
   needs pointer styling and a hover cue. */
#liveClock { cursor: pointer; transition: border-color .15s, color .15s; }
#liveClock:hover { border-color: var(--accent); color: #fff; }
.epoch-overlay {
  top: auto; bottom: 10px; left: 12px;
  border-color: var(--accent); color: var(--accent);
  font-weight: 600;
  pointer-events: none;
}
.epoch-overlay.live-now {
  border-color: #2dca73; color: #2dca73;
}
.epoch-overlay.is-snapshot {
  border-color: var(--accent); color: var(--accent);
}
.snapshot-dot {
  display: inline-block;
  margin-right: 3px;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.live-pulse {
  display: inline-block;
  animation: live-pulse 1.8s ease-in-out infinite;
  margin-right: 3px;
}

/* Inline date editor — replaces the clock overlay, in the same corner,
   while it's open, instead of living in a separate panel elsewhere. */
.date-editor {
  position: absolute; top: 10px; left: 12px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: rgba(0,0,0,0.85); border: 1px solid var(--accent);
  padding: 8px 10px;
}
.date-editor .btn { font-size: 10px; padding: 6px 10px; }
.date-editor input[type="datetime-local"] { font-size: 11px; padding: 5px 6px; }

/* Engine controls — docked to the bottom of the Heliocentric view itself,
   not a separate boxed-off panel; buttons are self-explanatory, so no
   label is needed above them. */
.engine-controls {
  position: absolute; bottom: 10px; right: 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(0,0,0,0.55);
  padding: 8px;
}
.engine-controls .btn { font-size: 11px; padding: 8px 14px; }
.control-slider {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted); white-space: nowrap;
}
.control-slider input[type="range"] { width: 70px; }

.attribution-line {
  font-family: var(--mono); font-size: 11.5px; color: var(--fg);
  border-left: 2px solid var(--accent); padding-left: 10px; margin: 12px 0;
}

.spectrum-wrap { border: 1px solid var(--line); background: #000; }
.spectrum-wrap canvas { display: block; width: 100%; height: 160px; }

.cymatics-wrap {
  border: 1px solid var(--line); background: #000;
  width: 100%; max-width: 480px; aspect-ratio: 1 / 1; margin: 0 auto;
}
.cymatics-wrap canvas { display: block; width: 100%; height: 100%; }

table.readout { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.readout th, table.readout td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; }
table.readout th { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; }
table.readout .mute-btn { font-size: 10px; padding: 3px 8px; }
table.readout tr.muted { opacity: 0.35; }

.planet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
/* 9 cards read better as 3 rows of 3 once there's room for it — below
   this width, let auto-fit keep adapting freely. */
@media (min-width: 700px) {
  .planet-grid { grid-template-columns: repeat(3, 1fr); }
}
.planet-card {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px;
}
.planet-card-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; margin-bottom: 10px;
}
.planet-visual-wrap { position: relative; width: 40px; height: 40px; flex: none; }
.planet-visual {
  width: 36px; height: 36px; border-radius: 50%;
  box-shadow: inset -6px -6px 10px rgba(0,0,0,0.55), 0 0 10px rgba(255,255,255,0.06);
}
.planet-visual.has-ring::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 58px; height: 16px;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  pointer-events: none;
}
.planet-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.planet-card canvas { display: block; width: 100%; height: 70px; background: #000; border: 1px solid var(--line); margin-bottom: 8px; }
.planet-card-readout {
  font-size: 11px; color: var(--muted); margin-bottom: 8px;
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px;
}
.planet-card-readout .k { color: #666; }
.planet-card-readout .v { color: var(--fg); text-align: right; }
.planet-card-volume {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; color: var(--muted); margin-bottom: 8px;
}
.planet-card-volume input[type="range"] { flex: 1; }
.oct-value { width: 22px; text-align: right; color: var(--fg); }
.waveform-select {
  flex: 1; background: #000; color: var(--fg); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; padding: 3px 4px;
}
.planet-card-btns { display: flex; gap: 6px; }
.planet-card-btns .btn { font-size: 10px; padding: 5px 10px; flex: 1; }
.planet-card-btns .btn.muted-state { border-color: #803030; color: #e08080; }
.planet-card-btns .btn.solo-state { background: var(--warn); border-color: var(--warn); color: #000; }
.planet-card.is-soloed { border-color: var(--warn); }

.note { color: var(--accent); }
.cents { color: var(--warn); font-size: 11px; }

p { color: #cfcfcf; }
.fine-print { color: var(--muted); font-size: 12px; }
code { background: #161616; padding: 2px 6px; border: 1px solid var(--line); }

/* ---- Historical figures (duotone-processed portraits) ---- */
.figure-card {
  display: flex; gap: 20px; align-items: flex-start;
  border: 1px solid var(--line); background: var(--panel);
  padding: 16px; margin: 0;
}
.figure-card img {
  width: 130px; flex: none; display: block;
  border: 1px solid var(--line);
  filter: saturate(1.1);
}
.figure-card p { margin: 0; font-size: 13.5px; }
.figure-name { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.figure-date { font-size: 11px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

@media (max-width: 560px) {
  .figure-card { flex-direction: column; }
  .figure-card img { width: 100%; max-width: 220px; }
}

/* ---- Timeline ---- */
.timeline {
  position: relative;
  margin: 28px 0 0;
  padding-left: 34px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 8px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent) 0%, var(--accent) 82%, var(--warn) 100%);
  opacity: 0.6;
}
.timeline-item { position: relative; margin-bottom: 22px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -34px; top: 22px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  z-index: 1;
}
.timeline-item .plate-figure { margin: 14px 0 0; }

.timeline-item.is-destination::before {
  border-color: var(--warn);
  background: var(--warn);
  box-shadow: 0 0 14px 2px rgba(216, 138, 43, 0.7);
}
.timeline-item.is-destination .figure-card {
  border-color: var(--warn);
  box-shadow: 0 0 0 1px var(--warn), 0 0 24px rgba(216, 138, 43, 0.25);
}
.timeline-item.is-destination .figure-name { color: var(--warn); }

.plate-figure {
  margin: 18px 0; border: 1px solid var(--line); background: var(--panel);
  padding: 16px; text-align: center;
}
.plate-figure img { max-width: 320px; width: 100%; border: 1px solid var(--line); }
.plate-figure figcaption {
  margin-top: 10px; font-size: 12px; color: var(--muted); text-align: left;
}


/* ---- Credits / support footer ---- */
.credits-footer { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.credits-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
}
.credits-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 6px; }
.credits-name { font-size: 16px; font-weight: 600; color: #fff; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); font-size: 12.5px; text-decoration: none; transition: color .15s; }
.footer-links a:hover { color: var(--accent); }

.support-box {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--panel); padding: 20px 22px;
}
.support-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 12px; }
.support-box p { font-size: 13.5px; margin: 0 0 16px; }
.cta-btn-support {
  display: inline-block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: #000; background: var(--accent);
  padding: 11px 20px; transition: opacity .15s;
}
.cta-btn-support:hover { opacity: 0.8; }
.support-note { display: inline-block; margin-left: 12px; font-size: 11px; color: var(--muted); }

/* ---- Music analysis: staff + cluster + chord match ---- */
.staff-wrap {
  border: 1px solid var(--line); background: #0a0a0a;
  padding: 12px; margin: 16px 0; overflow-x: auto;
}
.staff-wrap svg { display: block; }
.analysis-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 700px) { .analysis-grid { grid-template-columns: 1fr; } }
.analysis-grid .analysis-block:nth-child(n+3) { grid-column: 1 / -1; }
#circleOfFifths svg, #pitchSpiral svg { margin: 0 auto; }
.analysis-block { border: 1px solid var(--line); background: var(--panel); padding: 16px; }
.chord-match-out {
  font-size: 16px; color: var(--warn); font-weight: 600;
  border: 1px solid var(--line); background: #0a0a0a;
  padding: 14px 16px; margin: 4px 0 10px;
}
.chord-match-out .detail { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 6px; }

/* ---- Staff C-reference label ---- */
.staff-c-ref {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: 0.06em; margin-bottom: 4px; padding-left: 2px;
}

/* ---- Harmonic Anomalies panel ---- */
.harmonic-anomalies {
  font-family: var(--mono); font-size: 12.5px;
  border: 1px solid var(--line); background: #0a0a0a;
  padding: 10px 14px; margin: 4px 0 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.anom-section { display: flex; flex-direction: column; gap: 4px; }
.anom-title {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px; font-weight: 600;
}
.anom-chord {
  display: flex; align-items: baseline; gap: 8px;
  border-left: 2px solid var(--warn); padding-left: 8px;
}
.anom-chord-name { color: var(--warn); font-weight: 700; font-size: 14px; }
.anom-rank      { font-size: 10px; color: var(--muted); }
.anom-notes     { font-size: 10.5px; color: #aaa; }
.anom-event {
  display: flex; align-items: baseline; gap: 8px;
  border-left: 2px solid #2dca73; padding-left: 8px;
}
.anom-span      { color: #2dca73; font-weight: 600; font-size: 12.5px; }
.anom-detail    { font-size: 10.5px; color: var(--muted); }

/* ---- Ephemerides cluster table ---- */
table.ephem-table {
  font-family: var(--mono); font-size: 11.5px;
  border-collapse: collapse; width: 100%;
}
table.ephem-table th, table.ephem-table td {
  border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left;
}
table.ephem-table th {
  color: var(--muted); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
table.ephem-table .sym-cell  { font-size: 15px; color: #ccc; padding-right: 4px; }
table.ephem-table .body-cell { color: var(--fg); font-weight: 600; }
table.ephem-table .note-cell { color: var(--warn); font-weight: 600; letter-spacing: 0.04em; }
table.ephem-table .freq-cell { color: #9bb; font-variant-numeric: tabular-nums; }
table.ephem-table .pc-cell   { color: #aaa; }
table.ephem-table .cent-cell { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Bravura Text — the SMuFL companion font that actually maps the Unicode
   Musical Symbols block (clefs, etc.) to real engraved glyphs. Very few
   system fonts cover this Unicode range at all, so without loading this,
   clef characters fall back to whatever generic glyph (or "tofu" box)
   the browser has — which explains clef positioning looking wrong no
   matter what offset is used: it's not the same glyph being measured.
   SIL Open Font License. */
@font-face {
  font-family: 'BravuraText';
  src: url('https://cdn.jsdelivr.net/gh/steinbergmedia/bravura@bravura-1.392/redist/woff/BravuraText.woff2') format('woff2');
  font-display: swap;
}

/* ---- Pitch-spiral reference picker: a row of clickable planet nodes ---- */
.ref-picker {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin: 4px 0 18px; padding: 14px 16px;
  border: 1px solid var(--line); background: #0a0a0a;
}
.ref-node {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  font-family: var(--mono); color: var(--muted);
  transition: transform .15s, color .15s;
}
.ref-node:hover { color: #fff; transform: translateY(-2px); }
.ref-node-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ref-color, #888);
  box-shadow: inset -3px -3px 6px rgba(0,0,0,0.5), 0 0 0 2px #0a0a0a, 0 0 0 3px #333;
  transition: box-shadow .15s, transform .15s;
}
.ref-node.is-auto .ref-node-dot {
  background: repeating-conic-gradient(#666 0deg 90deg, #2a2a2a 90deg 180deg);
}
.ref-node:hover .ref-node-dot { transform: scale(1.12); }
.ref-node-label { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.ref-node.is-active { color: var(--warn); }
.ref-node.is-active .ref-node-dot {
  box-shadow: inset -3px -3px 6px rgba(0,0,0,0.5), 0 0 0 2px #0a0a0a, 0 0 0 3px var(--warn), 0 0 14px 2px rgba(216, 138, 43, 0.7);
}
.ref-node.is-active .ref-node-label { font-weight: 700; }

.spiral-legend { border-top: 1px dashed var(--line); padding-top: 4px; }
.spiral-legend ul li { margin-bottom: 6px; }
.spiral-examples {
  display: flex; gap: 18px; flex-wrap: wrap;
}
.spiral-example {
  flex: 1 1 220px; min-width: 220px;
  border: 1px solid var(--line); background: #0a0a0a;
  padding: 10px; text-align: center;
}
.spiral-example svg { display: block; margin: 0 auto; }
.spiral-example p { margin: 8px 0 0; text-align: left; }

/* ---- Planetary Control Panel ---- */
.pcp {
  border: 1px solid var(--line);
  background: #050505;
  padding: 18px;
  margin: 20px 0;
}

.pcp > .panel-label { margin-bottom: 8px; }
.pcp > .three-wrap { margin-bottom: 0; }

/* Horizontal controls bar sits flush below the 3D canvas */
/* ── Master strip (replaces old pcp-controls-bar) ── */
.master-strip {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line);
  border-top: none;
  background: #050505;
  min-height: 52px;
}
.master-strip-id {
  width: 140px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-right: 1px solid var(--line);
  height: 100%;
  min-height: 52px;
}
.master-strip-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #444;
  font-weight: 700;
}
.master-strip-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  flex: 1;
}
.master-strip-controls .control-slider {
  white-space: nowrap;
  gap: 6px;
}
.master-strip-controls .control-slider input[type="range"] { width: 80px; }

.pcp-start-btn {
  font-size: 11px;
  padding: 9px 16px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex: none;
}

.pcp-bar-status {
  flex: 1;
  min-width: 120px;
  margin: 0;
}

/* ── Master strip planet-strip alignment ── */
.master-strip + .panel-label { margin-top: 14px; }

/* ---- Planet Strip List (DAW-style tracks) ---- */
.planet-strip-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.planet-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--planet-color, var(--line));
  background: var(--panel);
  padding: 6px 10px 6px 8px;
  min-height: 60px;
}
.planet-strip.is-soloed { border-color: var(--warn); border-left-color: var(--warn); }

/* Identity: sphere + name */
.strip-id {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 90px;
  min-width: 90px;
}
.strip-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Waveform scope */
.strip-canvas {
  display: block;
  flex: 0 0 110px;
  width: 110px;
  height: 48px;
  background: #000;
  border: 1px solid var(--line);
}

/* Note readout */
.strip-readout {
  flex: 0 0 178px;
  min-width: 178px;
  font-size: 10.5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}
.strip-readout .rw {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  line-height: 1.25;
}
.strip-readout .k {
  font-size: 9px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex: 0 0 26px;
}
.strip-readout .hz {
  font-size: 9.5px;
  color: var(--muted);
}

/* Octave knob */
.oct-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 40px;
  cursor: ns-resize;
  user-select: none;
}
.oct-knob:hover .knob-ring { border-color: var(--accent); }
.oct-knob.is-shifted .knob-ring { border-color: var(--warn); }
.oct-knob.is-shifted .knob-val { color: var(--warn); }

.knob-ring {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: radial-gradient(circle at 38% 32%, #252525 0%, #080808 100%);
  position: relative;
  transition: border-color 0.15s;
}
/* The indicator dot — the ring itself rotates, dot stays at top */
.knob-ring::after {
  content: '';
  position: absolute;
  left: calc(50% - 1.5px);
  top: 3px;
  width: 3px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
}
.knob-val {
  font-size: 9px;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* Volume slider in strip */
.strip-vol-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--muted);
  flex: 1;
  min-width: 80px;
}
.strip-vol-label input[type="range"] { flex: 1; }

/* Wave selector in strip */
.strip-wave-select {
  flex: 0 0 62px;
  background: #000;
  color: var(--fg);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 4px;
}

/* Mute / Solo in strip */
.strip-btns {
  display: flex;
  gap: 5px;
  flex: none;
}
.strip-btns .btn {
  font-size: 10px;
  padding: 5px 9px;
  letter-spacing: 0.08em;
}
.strip-btns .btn.muted-state { border-color: #803030; color: #e08080; }
.strip-btns .btn.solo-state { background: var(--warn); border-color: var(--warn); color: #000; }

/* ---- Signal Visualizations panel ---- */
.viz-panel {
  border: 1px solid var(--line);
  background: #050505;
  padding: 18px;
  margin: 20px 0;
}
.viz-panel .instrument-block { margin-bottom: 28px; }
.viz-panel .instrument-block:last-child { margin-bottom: 0; }
.viz-panel .instrument-block .fine-print { margin-top: 10px; margin-bottom: 0; }

/* ---- Lissajous ---- */
.lissajous-selects {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}
.lissajous-selects .waveform-select { flex: 1; min-width: 90px; }
.lissajous-sep { color: var(--accent); font-size: 14px; font-weight: 600; }
.lissajous-axis { color: var(--muted); letter-spacing: 0.08em; white-space: nowrap; }

.lissajous-wrap {
  border: 1px solid var(--line);
  background: #000;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.lissajous-wrap canvas { display: block; width: 100%; height: 100%; }

.lissajous-ratio {
  text-align: center;
  font-size: 11px;
  padding: 6px 0 2px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
.lissajous-ratio .lj-interval {
  color: var(--accent);
  font-weight: 600;
  margin-right: 10px;
}
.lissajous-ratio .lj-dev { color: var(--muted); }

/* ── Harmonic Ephemeris Preview (main page) ─────────────────────────────── */
.ephemeris-preview {
  margin: 0 0 36px;
  padding: 22px 24px 24px;
  border: 1px solid #1e1e1e;
  background: #070a0d;
}
.ephemeris-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.ephemeris-preview-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 4px 0 6px;
}
.ephemeris-preview-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  max-width: 520px;
}
.ephemeris-preview-all {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.06em;
  padding-top: 2px;
}
.ephemeris-preview-all:hover { text-decoration: underline; }
.ephemeris-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 680px) {
  .ephemeris-preview-grid { grid-template-columns: 1fr; }
  .ephemeris-preview-header { flex-direction: column; }
}
.ohc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 14px 12px;
  background: #0b0b0b;
  border: 1px solid #1e1e1e;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s;
}
.ohc:hover { border-color: #3a3a3a; }
.ohc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.ohc-date {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.ohc-badge {
  font-size: 7.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid;
  font-weight: 700;
  white-space: nowrap;
}
.ohc-badge-ji2  { color: #f5c518; border-color: #f5c518; }
.ohc-badge-ji3  { color: #fa8a3a; border-color: #fa8a3a; }
.ohc-badge-ji5  { color: #fce080; border-color: #fce080; }
.ohc-badge-tet  { color: #5bf; border-color: #5bf; }
.ohc-badge-scale { color: #20c8b4; border-color: #20c8b4; }
.ohc-badge-solo { color: #2dca73; border-color: #2dca73; }
.ohc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.ohc-bodies {
  font-size: 10.5px;
  color: #777;
  letter-spacing: 0.03em;
}
.ohc-ratio {
  font-size: 10px;
  color: #555;
  letter-spacing: 0.04em;
  font-family: var(--mono);
}
.ohc-iv {
  font-size: 10.5px;
  color: #f5c518;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.ohc-viz {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #070707;
  overflow: hidden;
  margin: 2px 0;
}
.ohc-viz svg { display: block; width: 100%; height: auto; }
.ohc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  margin-top: 2px;
}
.ohc-sub {
  font-size: 10px;
  color: #666;
  letter-spacing: 0.03em;
  line-height: 1.35;
  flex: 1;
}
.ohc-listen {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}
.ohc-listen-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
}
.ohc:hover .ohc-listen { text-decoration: underline; }

/* ── Celestial Circle ── */
.celestial-circle-block {
  margin: 36px 0 12px;
  padding: 20px 0 4px;
  border-top: 1px solid #181818;
}
#celestialCircle {
  max-width: 560px;
  margin: 12px auto 0;
}
#celestialCircle svg { width: 100%; height: auto; }
.cc-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px auto 0;
  max-width: 340px;
}
.cc-legend-label {
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cc-legend-bar {
  flex: 1;
  height: 3px;
  background: linear-gradient(to right, hsl(0,70%,45%), hsl(40,80%,50%), hsl(80,82%,48%), hsl(120,85%,50%));
  border-radius: 2px;
  opacity: 0.75;
}

/* ── Alpha badge (used on sphaera.html's own h1) ─────────────────────────
   Deliberately its own small font-size/border, not inherited from the
   h1 it sits inside — a badge, not a headline. Plain ASCII text, so
   the h1's uppercase text-transform is harmless here (unlike the
   lowercase-omega glyph mistake documented in DECISIONS.md). */
.alpha-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 10px;
  padding: 3px 10px;
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: 999px;
  letter-spacing: 0.08em;
}

/* ── Responsive 16:9 video embed — shared by the main page's SPHAERA
   promo block and sphaera.html's own demo section, so the padding-top
   aspect-ratio trick only has to be written once. ── */
.video-embed-16x9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border: 1px solid #1e1e1e;
}
.video-embed-16x9 iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* ── SPHAERA promo (main page, right below the Planetary Control Panel) ──
   Same border/background family as .ephemeris-preview above — a second
   "here's another real thing to go do" block, not a new visual
   language — but its CTA (.sphaera-promo-cta, below) is deliberately
   its OWN, bigger, filled/glowing button rather than reusing
   .ephemeris-preview-all's plain text-link style: this is the entrance
   to a whole separate instrument, not another list item. */
.sphaera-promo {
  margin: 20px 0 36px;
  padding: 22px 24px 24px;
  border: 1px solid #1e1e1e;
  background: #070a0d;
}
.sphaera-promo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.sphaera-promo-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 4px 0 6px;
}
.sphaera-promo-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  max-width: 560px;
}
.sphaera-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #04141a;
  background: linear-gradient(135deg, var(--accent), #8be9ff);
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 26px rgba(47, 167, 201, 0.5), 0 0 0 1px rgba(47, 167, 201, 0.7) inset;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sphaera-promo-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 36px rgba(47, 167, 201, 0.75), 0 0 0 1px rgba(139, 233, 255, 0.9) inset;
  text-decoration: none;
}
@media (max-width: 680px) {
  .sphaera-promo-header { flex-direction: column; align-items: flex-start; }
  .sphaera-promo-cta { align-self: stretch; justify-content: center; }
}