/* ===== design tokens (single source of truth for colour + type) ===== */
:root{
  --gold:#ffd24a; --green:#7fe0a0; --line:#6f8aa3;
  --ink:#e6eef6;        /* standard text / subtitles / scene labels-primary */
  --muted:#9fb3c8;      /* labels + additions + secondary scene labels */
  --panel:#16293a; --panel-b:#2c4258;
  --font:'Segoe UI','Helvetica Neue',Arial,sans-serif;
}
.reveal{ font-family:var(--font); font-size:30px; }
.reveal h1,.reveal h2,.reveal h3{ font-family:var(--font); }

/* ===== type scale ===== */
.reveal h1.title{ font-size:1.9em; }
.reveal h2.title{ font-size:1.18em; }
.title{ text-transform:uppercase; font-weight:800; color:#fff; letter-spacing:.5px; margin-bottom:.45em; }
.sub{ font-size:.64em; font-weight:400; color:var(--ink); line-height:1.5; margin:.35em 0; }
.label{ font-size:.64em; font-weight:400; color:var(--muted); line-height:1.5; margin:.35em 0; }
.add{ font-size:.52em; font-weight:400; color:var(--muted); line-height:1.45; margin:.3em 0; }
.center{ text-align:center; }
.hot{ color:var(--gold); animation:starpulse 1.5s ease-in-out infinite; }
@keyframes starpulse{ 0%,100%{ text-shadow:0 0 8px rgba(255,210,74,.55) } 50%{ text-shadow:0 0 18px rgba(255,210,74,1) } }

/* ===== radial tree (D3) ===== */
#tree-container svg{ width:100%; height:auto; max-height:480px; }
.tree-branch{ fill:none; stroke:url(#trunkGrad); stroke-linecap:round; opacity:.85; transition:opacity .5s ease; }
.tree-branch.dim{ opacity:.12; }
.tree-branch.hl{ stroke:var(--gold); opacity:1; filter:drop-shadow(0 0 5px rgba(255,210,74,.85)); }
.tip-leaf{ fill:var(--green); }
.tip-label{ fill:var(--ink); font-size:14px; }
.clade-label{ fill:var(--ink); font-size:13px; font-weight:700; }
.clade-age{ fill:var(--muted); font-size:11px; }
.numt-note{ fill:var(--gold); font-size:14px; font-weight:700; }
.pin-glow{ fill:var(--gold); animation:glow 1.3s ease-in-out infinite; }
@keyframes glow{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }

/* ===== DNA insertion: 3D cell (Three.js) with schematic fallback ===== */
#insertion-demo{ display:inline-block; line-height:0; }
#insertion-demo canvas{ border-radius:10px; max-width:100%; height:auto; }
.insert-svg{ width:80%; max-height:300px; }
.cell{ fill:#13212f; stroke:#2f5e85; stroke-width:2; }
.nucleus{ fill:#172f44; stroke:#4f86b5; stroke-width:2; }
.mito{ fill:#3a1d1d; stroke:#b5564f; stroke-width:2; }
.strand{ fill:none; stroke:var(--gold); stroke-width:3; }
.rung{ stroke:#e2a23a; stroke-width:2; }
.inserted-dna.flash{ animation:glow 1.1s ease-in-out 3; }
.svg-lbl{ fill:var(--muted); font-size:13px; text-anchor:middle; } .svg-lbl.accent{ fill:var(--gold); font-weight:700; }

/* ===== PTOV1 story ===== */
.story{ display:flex; flex-direction:column; gap:10px; max-width:880px; margin:14px auto; }
.story-step{ background:var(--panel); border-left:4px solid var(--gold); border-radius:8px; padding:10px 18px; text-align:left; }
.story-step .when{ display:block; color:var(--gold); font-weight:700; font-size:.5em; text-transform:uppercase; letter-spacing:.5px; }
.story-step .sub{ margin:.2em 0 0; }

/* ===== alignment ===== */
#align-demo{ display:inline-block; }
.aln-row{ display:flex; align-items:center; margin:2px 0; }
.aln-row.ref{ margin-bottom:8px; }
.aln-tag{ width:104px; text-align:right; padding-right:10px; color:var(--ink); font-size:.46em; }
.aln-tile{ width:22px; height:28px; line-height:28px; margin:1px; border-radius:4px; font-family:monospace;
  font-size:.52em; background:#1b2c3d; color:var(--muted); transition:background .25s,color .25s; }
.aln-tile.reftile{ background:#23405a; color:#eaf6ff; } .aln-tile.mismatch{ background:#2a1622; }
#align-demo.play .aln-tile.match{ background:#2f7d4f; color:#eafff0; }
#align-demo.play .aln-tile.mismatch{ background:#7d3a4f; color:#ffd9e2; }
.aln-meta{ margin-left:12px; font-size:.46em; color:var(--muted); white-space:nowrap; } .aln-meta b{ color:var(--green); }

/* ===== lottery ===== */
#lottery{ width:58%; margin:10px auto 0; }
.draw{ display:inline-block; background:#22344a; border:1px solid #3a5170; border-radius:7px;
  padding:5px 16px; font-size:.5em; color:var(--gold); margin-bottom:10px; min-height:1.1em; }
.board-mask{ height:220px; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(transparent, #000 22%, #000 78%, transparent);
          mask-image:linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.board{ position:relative; height:100%; }
.lot-row{ position:absolute; left:0; right:0; height:38px; box-sizing:border-box; display:flex; align-items:center;
  justify-content:space-between; gap:10px; background:var(--panel); border:1px solid var(--panel-b); border-radius:7px;
  padding:0 14px; font-size:.5em; transition:top .45s ease, opacity .45s ease; }
.lot-row .rk{ color:var(--muted); width:42px; } .lot-row .nm{ flex:1; text-align:left; color:var(--ink); font-family:monospace; }
.lot-row .sc{ color:var(--muted); font-weight:700; }
.lot-row.ptov1{ background:#3a3416; border-color:var(--gold); animation:blink 1.1s ease-in-out infinite; }
.lot-row.ptov1 .nm,.lot-row.ptov1 .sc{ color:var(--gold); }
@keyframes blink{ 0%,100%{ box-shadow:0 0 6px rgba(255,210,74,.4) } 50%{ box-shadow:0 0 22px rgba(255,210,74,.95) } }

/* ===== histogram ===== */
#score-plot{ width:100%; }
.star-pin{ position:absolute; top:6px; right:14px; color:var(--gold); font-size:.5em; font-weight:700;
  text-shadow:0 0 8px rgba(255,210,74,.9); animation:blink 1.1s ease-in-out infinite; z-index:3; }

/* ===== PTOV1 hero (consistent captions #12) ===== */
.hero-tabs{ margin:6px 0; }
.hero-tabs button{ font-family:var(--font); background:var(--panel); color:var(--ink); border:1px solid #355;
  border-radius:8px; padding:6px 16px; font-size:.5em; cursor:pointer; margin:0 4px; }
.hero-tabs button.active{ background:var(--gold); color:#111; }
.hero-pane{ position:relative; }
.hero-pane .label{ text-align:center; }      /* genome + protein captions: same place, same style */
#igv-div{ background:#fff; border-radius:8px; height:430px; }
#mol-div{ height:430px; position:relative; border-radius:8px; overflow:hidden; }

/* ===== feature deep-dive cards ===== */
.feat-grid{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:14px 0; }
.feat{ width:30%; min-width:230px; background:var(--panel); border:1px solid var(--panel-b); border-radius:10px; padding:12px 16px; text-align:left; }
.feat.warn{ background:#3a2e16; border-color:#caa24a; }
.feat-h{ font-weight:700; color:var(--ink); font-size:.58em; margin-bottom:4px; }
.feat.warn .feat-h{ color:var(--gold); }
.feat .label{ margin:0; font-size:.5em; }

/* ===== close: Done / Next + chips ===== */
.done-next{ display:flex; gap:24px; justify-content:center; margin:10px 0; }
.dn-card{ width:38%; border-radius:12px; padding:14px 20px; text-align:left; }
.dn-card .label{ margin:0; }
.dn-card.done{ background:var(--panel); border:1px solid #3a5; }
.dn-card.next{ background:#3a3416; border:2px solid var(--gold); box-shadow:0 0 18px rgba(255,210,74,.32); }
.dn-h{ font-weight:700; margin-bottom:6px; font-size:.7em; text-transform:uppercase; letter-spacing:.5px; }
.dn-card.done .dn-h{ color:var(--green); } .dn-card.next .dn-h{ color:var(--gold); }
.chips{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:6px 0 4px; }
.chip{ font-size:.46em; padding:6px 14px; border-radius:18px; border:1px solid var(--panel-b); background:var(--panel); }
.chip.ok{ border-color:#3a6f4e; color:var(--green); }
.chip.warn{ border-color:#caa24a; color:var(--gold); }