/* ============================================================
   Voice Memory — project page
   Light page, dark demo stage, NVIDIA-green accent.
   ============================================================ */

:root {
  --accent: #76b900;
  --accent-dark: #5a8f00;
  --accent-deep: #195b24;
  --ink: #1c2128;
  --ink-2: #4b5563;
  --ink-3: #8b949e;
  --paper: #ffffff;
  --paper-2: #f6f8f7;
  --line: #e2e8e4;
  --stage: #0b1220;
  --stage-2: #101a2e;
  --stage-line: #22304a;
  --stage-ink: #e8edf5;
  --stage-ink-2: #9fb0c9;
  --accent-on-dark: #9ade3d;
  /* highlight categories (always paired with a text label) */
  --hl-entity: #7cc0ff;
  --hl-fixed: #7fd069;
  --hl-gen: #c9a6ff;
  --hl-bad: #ff8a80;
  --act-color: #7fd069;
  --abstain-color: #ffc76e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}
code, pre, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
main { max-width: 1060px; margin: 0 auto; padding: 0 22px 90px; }
section { margin: 76px 0; }
h2 { font-size: 2rem; font-weight: 700; margin-bottom: 14px; letter-spacing: -0.022em; }
h3 { font-size: 1.15rem; margin: 26px 0 10px; }
p { margin: 10px 0; color: var(--ink-2); }
a { color: var(--accent-dark); }
.emoji { font-style: normal; }

/* ---------- floating top nav ---------- */
.topnav {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.topnav-inner {
  max-width: 1060px; margin: 0 auto; padding: 10px 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.topnav-links { display: flex; gap: 4px; align-items: center; }
.topnav-links a {
  position: relative; padding: 8px 12px; font-weight: 500; font-size: 1rem;
  color: var(--ink); text-decoration: none; transition: color 0.25s;
}
.topnav-links a::after {
  content: ""; position: absolute; bottom: 2px; left: 12px; right: 12px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform 0.25s ease;
}
.topnav-links a:hover { color: var(--accent-dark); }
.topnav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.topnav-actions { display: flex; gap: 8px; align-items: center; }
.topnav-actions .btn { padding: 7px 16px; font-size: 0.88rem; }
section { scroll-margin-top: 70px; }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 64px 0 10px; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: -80px -200px auto; height: 420px; z-index: -1;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(118,185,0,0.10), transparent 70%);
  pointer-events: none;
}
.hero h1 { font-size: 3.1rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.hero h1 .vm-green {
  background: linear-gradient(120deg, #76b900 10%, #3f7d12 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtitle { font-size: 1.18rem; color: var(--ink-2); margin-top: 12px; }
.authors { margin-top: 16px; font-size: 1rem; color: var(--ink); }
.authors a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(118,185,0,0.5);
  transition: color 0.2s, border-color 0.2s; }
.authors a:hover { color: var(--accent-dark); border-bottom-color: var(--accent-dark); }
.authors .star { color: var(--accent-dark); }
.venue { color: var(--ink-3); font-size: 0.9rem; margin-top: 2px; }
.links { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn {
  display: inline-block; padding: 9px 20px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  font-size: 0.95rem; background: var(--paper);
  transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn:hover { border-color: var(--accent); background: var(--paper-2);
  transform: translateY(-1px); box-shadow: 0 4px 14px rgba(28,33,40,0.08); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
  box-shadow: 0 2px 10px rgba(118,185,0,0.35); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark);
  box-shadow: 0 6px 18px rgba(118,185,0,0.4); }
.btn-soon { opacity: 0.55; pointer-events: none; }

/* ---------- pipeline figure ---------- */
.pipeline-sec { margin: 30px 0 64px; }
.pipeline-fig { margin: 0 auto; max-width: 780px; }
.pipeline-fig img {
  display: block; width: 100%; height: auto; padding: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(28,33,40,0.04), 0 14px 36px rgba(28,33,40,0.07);
}
.pipeline-fig figcaption {
  margin-top: 14px; font-size: 0.95rem; color: var(--ink-2); line-height: 1.6;
}

/* ---------- demo stage ---------- */
.demo-lede { max-width: 860px; }
.stage-wrap { border-radius: 20px; overflow: hidden; border: 1px solid var(--stage-line);
  background: var(--stage); margin-top: 20px;
  box-shadow: 0 1px 3px rgba(11,18,32,0.2), 0 18px 48px rgba(11,18,32,0.22); }
.stage-controls {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; background: rgba(16,26,46,0.75);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stage-line);
}
#play-btn {
  font-size: 1rem; font-weight: 700; padding: 10px 24px; border-radius: 999px;
  border: none; background: linear-gradient(120deg, #8ed13f, #76b900); color: #08240b; cursor: pointer;
  box-shadow: 0 2px 12px rgba(118,185,0,0.45); transition: transform 0.15s, box-shadow 0.2s;
}
#play-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(118,185,0,0.5); }
#play-btn:disabled { opacity: 0.6; cursor: default; }
.case-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.case-tabs button {
  background: transparent; color: var(--stage-ink-2); border: 1px solid var(--stage-line);
  border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; cursor: pointer;
}
.case-tabs button.active { color: var(--stage); background: var(--accent-on-dark); border-color: var(--accent-on-dark); font-weight: 700; }
.ctrl-hint { color: var(--stage-ink-2); font-size: 0.8rem; margin-left: auto; }

.stage { position: relative; min-height: 470px; padding: 26px 28px 60px; color: var(--stage-ink); }
.stage-badge {
  position: absolute; top: 16px; right: 18px; font-size: 0.78rem;
  color: var(--stage-ink-2); border: 1px solid var(--stage-line);
  padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,0.03);
}
/* step rail */
.step-rail { position: absolute; left: 0; right: 0; bottom: 0; display: flex;
  border-top: 1px solid var(--stage-line); background: var(--stage-2); }
.step-rail button {
  flex: 1; padding: 9px 4px; background: transparent; border: none;
  color: var(--stage-ink-2); font-size: 0.78rem; cursor: pointer;
  border-right: 1px solid var(--stage-line);
}
.step-rail button:last-child { border-right: none; }
.step-rail button.done { color: var(--stage-ink); }
.step-rail button.active { color: var(--accent-on-dark); font-weight: 700; background: rgba(154,222,61,0.08); }
.step-num { display: inline-block; width: 17px; height: 17px; line-height: 17px; border-radius: 50%;
  border: 1px solid currentColor; font-size: 0.68rem; margin-right: 6px; text-align: center; }

.panel { display: none; animation: fadeUp 0.45s ease; }
.panel.show { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.panel h4 { font-size: 1.02rem; color: var(--accent-on-dark); margin-bottom: 12px; letter-spacing: 0.02em; }
.panel h4 .sub { color: var(--stage-ink-2); font-weight: 400; font-size: 0.85rem; margin-left: 8px; }

/* step 1 — noisy audio */
.audio-scene { display: flex; align-items: center; justify-content: center; gap: 26px;
  padding: 20px 0 10px; flex-wrap: wrap; }
.scene-shot { flex: 0 0 auto; width: 176px; margin: 0; }
.scene-shot img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--stage-line); border-radius: 12px; background: var(--stage-2); }
.scene-shot figcaption { margin-top: 8px; font-size: 0.72rem; line-height: 1.45;
  color: var(--stage-ink-2); text-align: center; }
.audio-core { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; align-items: center; }
@media (max-width: 640px) { .scene-shot { width: 140px; } }
.wave-box { position: relative; width: min(560px, 90%); height: 120px; display: flex;
  align-items: center; justify-content: center; gap: 3px;
  border: 1px solid var(--stage-line); border-radius: 12px; background: rgba(255,255,255,0.02);
  overflow: hidden; }
.noise-layer { position: absolute; inset: 0; opacity: 0.35;
  background-image: repeating-linear-gradient(90deg, transparent 0 2px, rgba(159,176,201,0.25) 2px 3px);
  animation: noiseShift 0.6s steps(6) infinite; }
@keyframes noiseShift { to { transform: translateX(6px); } }
.wave-box span { width: 5px; border-radius: 3px; background: var(--accent-on-dark); height: 12%; opacity: 0.9; }
.stage.playing .wave-box span { animation: wob 0.9s ease-in-out infinite; }
.wave-box span:nth-child(3n)  { animation-delay: 0.12s; }
.wave-box span:nth-child(3n+1){ animation-delay: 0.31s; }
.wave-box span:nth-child(4n)  { animation-delay: 0.22s; }
.wave-box span:nth-child(5n)  { animation-delay: 0.05s; }
@keyframes wob { 0%,100% { height: 10%; } 35% { height: 82%; } 60% { height: 30%; } 80% { height: 64%; } }
#case-audio { display: none; }
.audio-ctrl-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
#audio-play {
  font-size: 0.88rem; font-weight: 700; padding: 8px 20px; border-radius: 999px;
  border: 1px solid var(--stage-line); background: rgba(154,222,61,0.12);
  color: var(--accent-on-dark); cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
#audio-play:hover { background: rgba(154,222,61,0.22); transform: translateY(-1px); }
.sim-chip { font-size: 0.74rem; color: var(--stage-ink-2); border: 1px dashed var(--stage-line);
  padding: 4px 12px; border-radius: 999px; }
.audio-caption { margin-top: 14px; color: var(--stage-ink-2); font-size: 0.92rem; text-align: center; }
.audio-caption b { color: var(--stage-ink); }

/* step 2 — n-best */
.nbest-list { display: flex; flex-direction: column; gap: 7px; max-width: 820px; }
.nbest-row { display: flex; gap: 10px; align-items: baseline; opacity: 0; transform: translateX(-8px);
  transition: opacity 0.35s, transform 0.35s; }
.nbest-row.on { opacity: 1; transform: none; }
.nbest-rank { flex: 0 0 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px;
  background: var(--stage-2); border: 1px solid var(--stage-line); color: var(--stage-ink-2); font-size: 0.75rem; }
.nbest-row code { font-size: 0.9rem; color: var(--stage-ink); background: transparent; }
.nbest-row .dif { color: var(--hl-bad); border-bottom: 1px dashed var(--hl-bad); }
.nbest-note { margin-top: 14px; color: var(--stage-ink-2); font-size: 0.85rem; }

/* step 3 — memory file */
.memory-scene { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.memfile { flex: 1 1 430px; border: 1px solid var(--stage-line); border-radius: 10px; overflow: hidden;
  background: #0d1526; }
.memfile-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--stage-2); border-bottom: 1px solid var(--stage-line);
  font-size: 0.8rem; color: var(--stage-ink-2); }
.memfile-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-on-dark); }
.memfile pre { padding: 14px 16px; font-size: 0.8rem; line-height: 1.65; color: var(--stage-ink-2);
  white-space: pre-wrap; min-height: 150px; }
.memfile pre .rule-hit { color: var(--accent-on-dark); font-weight: 600; }
.mem-side { flex: 1 1 260px; color: var(--stage-ink-2); font-size: 0.9rem; }
.mem-side b { color: var(--stage-ink); }
.mem-size { display: inline-block; margin-top: 10px; padding: 3px 12px; border-radius: 999px;
  border: 1px solid var(--stage-line); font-size: 0.78rem; }

/* step 4 — decision */
.decide-scene { display: flex; gap: 26px; justify-content: center; padding: 26px 0; flex-wrap: wrap; }
.lane { position: relative; width: 240px; padding: 20px 18px 16px; border-radius: 12px; text-align: center;
  border: 1px solid var(--stage-line); background: rgba(255,255,255,0.02); transition: all 0.3s; }
.lane code { font-size: 1.05rem; }
.lane .lane-desc { color: var(--stage-ink-2); font-size: 0.84rem; margin-top: 6px; }
.lane.act code { color: var(--act-color); }
.lane.abstain code { color: var(--abstain-color); }
.lane.considering { border-color: var(--stage-ink-2); box-shadow: 0 0 22px rgba(159,176,201,0.15); }
.lane.selected { border-color: var(--accent-on-dark); box-shadow: 0 0 26px rgba(154,222,61,0.25); }
.lane.rejected { opacity: 0.35; }
.sel-ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%) scale(0);
  background: var(--accent-on-dark); color: #08240b; font-size: 0.7rem; font-weight: 800;
  padding: 2px 12px; border-radius: 999px; transition: transform 0.25s; }
.lane.selected .sel-ribbon { transform: translateX(-50%) scale(1); }
.decide-note { text-align: center; color: var(--stage-ink-2); font-size: 0.88rem; max-width: 640px; margin: 0 auto; }

/* step 5 — final transcript */
.final-scene { text-align: center; padding: 12px 0; }
.final-quote { font-size: 1.25rem; line-height: 1.9; max-width: 820px; margin: 18px auto; color: var(--stage-ink); }
.final-quote .tok { padding: 2px 5px; border-radius: 6px; }
.tok.entity { background: rgba(124,192,255,0.16); color: var(--hl-entity); }
.tok.fixed { background: rgba(127,208,105,0.16); color: var(--hl-fixed); }
.tok.gen { background: rgba(201,166,255,0.18); color: var(--hl-gen); }
.hl-legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.hl-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--stage-ink-2); }
.hl-chip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.hl-chip.entity i { background: var(--hl-entity); } .hl-chip.fixed i { background: var(--hl-fixed); }
.hl-chip.gen i { background: var(--hl-gen); }
.wer-pill-row { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wer-pill { border: 1px solid var(--stage-line); border-radius: 999px; padding: 5px 16px;
  font-size: 0.85rem; color: var(--stage-ink-2); }
.wer-pill b { color: var(--stage-ink); }
.wer-pill.good b { color: var(--accent-on-dark); }

/* finale stats */
.stats-scene { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 26px 0; }
.stats-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.stat-tile { min-width: 190px; padding: 20px 24px; border: 1px solid var(--stage-line); border-radius: 16px;
  text-align: center; background: rgba(255,255,255,0.02); }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--stage-ink); font-variant-numeric: tabular-nums; }
.stat-value .unit { font-size: 1.05rem; color: var(--stage-ink-2); font-weight: 600; }
.stat-value.up { color: var(--accent-on-dark); }
.stat-label { margin-top: 6px; font-size: 0.8rem; color: var(--stage-ink-2); line-height: 1.4; }
.stats-tagline { color: var(--stage-ink-2); font-size: 0.9rem; }

/* ---------- method ---------- */
.lt-diagram { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
@media (max-width: 760px) { .lt-diagram { grid-template-columns: 1fr; } }
.lt-box { border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; background: var(--paper-2);
  box-shadow: 0 1px 2px rgba(28,33,40,0.04); }
.lt-box h4 { font-size: 1rem; margin-bottom: 6px; }
.lt-box .lt-when { display: inline-block; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent-deep); background: rgba(118,185,0,0.12); border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; }
.lt-box p { font-size: 0.92rem; margin: 6px 0; }
.lt-flow { font-size: 0.85rem; color: var(--ink-2); background: var(--paper); border: 1px dashed var(--line);
  border-radius: 8px; padding: 8px 12px; margin-top: 10px; }
.lt-coupler { grid-column: 1 / -1; text-align: center; color: var(--ink-2); font-size: 0.9rem;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: #fbfdf8; }

.tokens { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; }
@media (max-width: 700px) { .tokens { grid-template-columns: 1fr; } }
.token-card { border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(28,33,40,0.04); transition: box-shadow 0.2s, transform 0.15s; }
.token-card:hover { box-shadow: 0 8px 24px rgba(28,33,40,0.08); transform: translateY(-2px); }
.token-card code { font-size: 1rem; }
.token-card.act code { color: var(--accent-dark); }
.token-card.abstain code { color: #b07811; }
.token-card h3 { margin: 8px 0 4px; }
.token-card p { font-size: 0.92rem; }

.memfile-light { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 16px 0; }
.memfile-light .memfile-head { background: var(--paper-2); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.memfile-light pre { padding: 14px 16px; font-size: 0.82rem; line-height: 1.6; color: var(--ink-2);
  white-space: pre-wrap; background: #fcfdfb; }

/* ---------- results ---------- */
.table-lede { font-size: 0.95rem; }
/* direction-of-better arrows in table headers */
.dir { font-weight: 700; font-size: 0.95em; color: var(--accent-dark); }
.dir-key { font-size: 0.85rem; color: var(--ink-2); margin: 14px 0 0; }
.dir-key .dir { font-size: 1em; }
.table-wrap { overflow-x: auto; margin: 12px 0 28px; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28,33,40,0.04); }
table.results { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
table.results th, table.results td { padding: 7px 12px; text-align: right; white-space: nowrap; }
table.results th:first-child, table.results td:first-child { text-align: left; }
table.results thead th { background: var(--paper-2); color: var(--ink-2); font-weight: 600;
  border-bottom: 1px solid var(--line); }
table.results tbody tr { border-bottom: 1px solid #eef2ee; }
table.results tbody tr:last-child { border-bottom: none; }
table.results .sec td { background: var(--paper-2); color: var(--ink-2); font-size: 0.8rem; font-weight: 600; }
table.results b { color: var(--accent-deep); }
table.results tr.best { background: #f4fbe8; }
.stat-strip { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 6px; }
.stat-strip .stat-tile { background: var(--paper-2); border-color: var(--line); min-width: 170px; }
.stat-strip .stat-value { color: var(--ink); font-size: 1.6rem; }
.stat-strip .stat-value.up { color: var(--accent-dark); }
.stat-strip .stat-label { color: var(--ink-2); }

/* ---------- case gallery ---------- */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .case-grid { grid-template-columns: 1fr; } }
.case-card { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(28,33,40,0.04); transition: box-shadow 0.2s; }
.case-card:hover { box-shadow: 0 8px 24px rgba(28,33,40,0.08); }
.case-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.case-domain { font-size: 0.78rem; font-weight: 700; color: var(--ink-2); letter-spacing: 0.04em; }
.pill { font-size: 0.72rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.pill.generative { border-color: #b9a2e6; color: #6a4fa3; background: #f6f1ff; }
.pill.helpful { border-color: #9cc96a; color: #48711d; background: #f2f9e8; }
.pill.suppressed { border-color: #e6b96a; color: #94660f; background: #fdf6e7; }
.case-card table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.case-card td { padding: 5px 6px; vertical-align: top; }
.case-card td:first-child { color: var(--ink-3); white-space: nowrap; font-size: 0.76rem; padding-top: 7px; width: 74px; }
.case-card code { background: var(--paper-2); border-radius: 5px; padding: 2px 6px; display: inline-block; line-height: 1.5; }
.case-card .werr { color: #b3372c; background: #fdeeec; border-radius: 4px; padding: 0 3px; }
.case-card tr.vm code { background: #f2f9e8; }
.case-card tr.ref code { background: transparent; border: 1px dashed var(--line); }

/* ---------- bibtex & footer ---------- */
#bibtex pre { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; font-size: 0.82rem; overflow-x: auto; }
footer { margin-top: 60px; border-top: 1px solid var(--line); padding-top: 18px; }
footer p { font-size: 0.82rem; color: var(--ink-3); }