:root {
  --bg: #0b0e14; --surface: #131824; --ink: #eeebe2; --muted: #a8a294;
  --line: #2a3040; --amber: #d8a45a; --teal: #5ea8be; --alert: #d9704f;
  --radius: 12px;
}
[data-theme="light"] {
  --bg: #f7f4ec; --surface: #fffdf8; --ink: #1c1a15; --muted: #6b6455;
  --line: #ddd5c2; --amber: #9a6b1f; --teal: #1f6e86; --alert: #b34a2e;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: Georgia, "Times New Roman", serif; line-height: 1.6; }
body, .topbar, .langs a, .evbtn, input, button { font-family: -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3, .deck, main p, main li { font-family: Georgia, "Times New Roman", serif; }
main { max-width: 44rem; margin: 0 auto; padding: 0 1.1rem 4rem; }
section { scroll-margin-top: 4rem; margin: 3rem 0; }
h1 { font-size: 2rem; line-height: 1.15; margin: 0.6rem 0; }
h2 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.8rem; }
h3 { font-size: 1.05rem; margin: 1.2rem 0 0.3rem; }
a { color: var(--amber); }
.kicker { color: var(--amber); font-size: 0.8rem; letter-spacing: 0.12em; margin: 2.2rem 0 0; }
.deck { font-size: 1.15rem; color: var(--muted); }
.byline { color: var(--muted); font-size: 0.85rem; }
.note { color: var(--muted); font-size: 0.92rem; }
.guard { border-left: 3px solid var(--amber); padding: 0.4rem 0.9rem; background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.concl { font-size: 1.1rem; }

/* topbar: one line, rail, evidence button, theme icon, languages */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.4rem 0.7rem;
  flex-wrap: wrap; background: var(--bg); border-bottom: 1px solid var(--line); padding: 0.45rem 0.8rem; font-size: 0.82rem; }
.rail { order: 5; flex-basis: 100%; }
@media (min-width: 40rem) {
  .topbar { flex-wrap: nowrap; }
  .rail { order: 0; flex-basis: auto; }
}
.brand { color: var(--ink); text-decoration: none; font-weight: 700; white-space: nowrap; }
.rail { display: flex; gap: 0.7rem; overflow-x: auto; flex: 1; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.rail a:hover { color: var(--ink); }
.evbtn { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px;
  padding: 0.15rem 0.6rem; font-size: 0.75rem; cursor: pointer; white-space: nowrap; }
.evbtn[aria-pressed="true"] { color: var(--amber); border-color: var(--amber); }
.themebtn { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0.2rem; display: flex; }
.themebtn .moon { display: none; }
[data-theme="light"] .themebtn .moon { display: block; }
[data-theme="light"] .themebtn svg:first-child { display: none; }
.langs { display: flex; gap: 0.45rem; }
.langs a { color: var(--muted); text-decoration: none; font-size: 0.75rem; }
.langs a:hover { color: var(--ink); }

/* hero + wake form */
.wake { display: flex; align-items: center; gap: 0.7rem; margin: 1.2rem 0 0.4rem; flex-wrap: wrap; }
.wake input { font-size: 1.2rem; padding: 0.35rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.awake { font-size: 1.3rem; font-weight: 700; color: var(--amber); }
.ctas { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.2rem 0; }
.cta { display: inline-block; background: var(--amber); color: #141414; font-weight: 700;
  text-decoration: none; border: 0; border-radius: 10px; padding: 0.65rem 1.2rem; cursor: pointer; font-size: 1rem; }
[data-theme="light"] .cta { color: #fffdf8; }
.cta.ghost { background: none; color: var(--amber); border: 1px solid var(--amber); }
.cta:disabled { opacity: 0.5; cursor: default; }
.ghostlink { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 0.9rem; }

/* clock */
.clockctl { margin: 1rem 0; }
.clockctl label { font-size: 1.1rem; font-weight: 700; }
.clockctl input[type="range"] { width: 100%; accent-color: var(--amber); min-height: 2.5rem; }
.meters { margin: 1rem 0; }
.meter { margin: 0.5rem 0; }
.meter span { font-size: 0.85rem; color: var(--muted); }
.bar { height: 0.7rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-top: 0.2rem; }
.bar i { display: block; height: 100%; background: var(--amber); border-radius: 999px; }
.bar.c i { background: var(--teal); }
.brain { width: 100%; height: auto; display: block; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); margin: 1rem 0; }
.msline { font-size: 1.05rem; }
.mslist { list-style: none; padding: 0; margin: 1rem 0; }
.mslist li { padding: 0.45rem 0.7rem; border-left: 2px solid var(--line); margin: 0.3rem 0; color: var(--muted); font-size: 0.92rem; }
.mslist li strong { display: block; color: var(--ink); }
.mslist li.hit { border-color: var(--amber); background: var(--surface); border-radius: 0 8px 8px 0; }
.mslist li span { display: block; }

/* legend + pills + evidence */
.legend { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 1rem; margin: 1.2rem 0; background: var(--surface); }
.legend p { margin: 0 0 0.4rem; font-size: 0.85rem; font-weight: 700; }
.legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.82rem; color: var(--muted); }
.legend strong { color: var(--teal); margin-right: 0.3rem; }
.pill { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--teal); border: 1px solid var(--teal); border-radius: 999px; padding: 0.1rem 0.55rem; white-space: nowrap; }
details.ev { border: 1px dashed var(--line); border-radius: 8px; padding: 0.35rem 0.7rem; margin: 0.7rem 0; font-size: 0.88rem; }
details.ev summary { cursor: pointer; color: var(--muted); }
details.ev p { color: var(--muted); margin: 0.4rem 0; }

/* versus / split / bands */
.split { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .split { grid-template-columns: 1fr 1fr; } }
.pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1rem; }
.pane h3 { margin-top: 0.4rem; }
.versus { display: grid; gap: 1rem; margin: 1rem 0; }
@media (min-width: 40rem) { .versus { grid-template-columns: 1fr 1fr; } }
.versus .old, .versus .new { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1rem; }
.versus .new { border-color: var(--amber); }
.band { padding: 0.5rem 0.9rem; border-radius: 8px; font-size: 0.92rem; }
.band.sure { background: var(--surface); border: 1px solid var(--line); }
.band.past { border: 1px dashed var(--muted); color: var(--muted); }

/* PVT */
.arena { min-height: 9rem; display: flex; align-items: center; justify-content: center;
  background: #05070c; border: 2px solid var(--line); border-radius: var(--radius);
  font-size: 2rem; color: var(--muted); cursor: pointer; user-select: none; touch-action: manipulation; }
[data-theme="light"] .arena { background: #e9e2d2; }
.arena.go { background: var(--amber); color: #141414; border-color: var(--amber); font-weight: 800; }
.arena:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.pvtstatus { min-height: 1.6em; color: var(--muted); }
.dots { position: relative; height: 2.2rem; border-bottom: 2px solid var(--line); margin: 1rem 0 0.4rem; }
.dot { position: absolute; bottom: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); transform: translateX(-50%); }
.dot.slow { background: var(--amber); }
.dot.lapse { background: var(--alert); width: 12px; height: 12px; }
.tail { font-size: 1.05rem; }

/* SMD bars */
.smd { list-style: none; padding: 0; }
.smd li { display: grid; grid-template-columns: 1fr; gap: 0.15rem; margin: 0.7rem 0; }
.smd span { font-size: 0.9rem; }
.smd strong { color: var(--amber); }

/* adenosine */
.chain { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.02em; }
.receptors { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.rec { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--teal); display: inline-block; }
.rec.ade { background: var(--amber); border-color: var(--amber); }
.rec.caf { background: var(--surface); border-color: var(--alert); border-style: dashed; }

/* timeline / myths / tabs / micro */
.timeline { list-style: none; padding: 0; counter-reset: t; }
.timeline li { counter-increment: t; border-left: 2px solid var(--teal); padding: 0 0 1.2rem 1rem; margin-left: 0.4rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 0.35rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--teal); }
.myths { list-style: none; padding: 0; }
.myths li { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 1rem; margin: 0.7rem 0; }
.myth { font-weight: 700; margin: 0 0 0.3rem; }
.real { margin: 0; color: var(--muted); }
.real::before { content: "→ "; color: var(--amber); }
.tablist { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.tablist button { background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 0.45rem 0.9rem; cursor: pointer; font-size: 0.9rem; min-height: 2.75rem; }
.tablist button[aria-selected="true"] { border-color: var(--amber); color: var(--amber); font-weight: 700; }
.micro { text-align: center; margin: 1.5rem 0; }
.mdot { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--amber); margin: 0 auto 1rem; }
.mdot.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.6); opacity: 0.6; } }
body.blackout::after { content: ""; position: fixed; inset: 0; background: #000; z-index: 99; }

/* faq / bib / footer */
details.faq { border-bottom: 1px solid var(--line); padding: 0.6rem 0; }
details.faq summary { cursor: pointer; font-weight: 700; }
.bib { font-size: 0.9rem; color: var(--muted); }
.bib a { color: var(--muted); }
footer { border-top: 1px solid var(--line); padding: 1.2rem; text-align: center; color: var(--muted); font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}