:root {
  --burgundy-950: #26040d;
  --burgundy-900: #3a0714;
  --burgundy-800: #5d1024;
  --burgundy-650: #8f1835;
  --gold-500: #f4c542;
  --gold-300: #ffe38a;
  --gold-100: #fff4c9;
  --ink: #211014;
  --paper: #fffaf0;
  --paper-strong: #fffdf8;
  --muted: #74565f;
  --line: rgba(93, 16, 36, 0.18);
  --shadow: 0 26px 80px rgba(38, 4, 13, 0.24);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(93,16,36,.05) 1px, transparent 1px),
    linear-gradient(rgba(93,16,36,.05) 1px, transparent 1px),
    radial-gradient(circle at 12% 7%, rgba(244,197,66,.32), transparent 24rem),
    radial-gradient(circle at 90% 4%, rgba(93,16,36,.14), transparent 28rem),
    var(--paper);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, .graph-node:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 4px; }
@keyframes particleDrift { from { background-position: 0 0,0 0,0 0,28px 36px,16px 22px; } to { background-position: 0 0,0 0,74px 74px,146px 154px,62px 68px; } }
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4.75rem; padding: .75rem clamp(1rem,4vw,3rem); color: white;
  background: rgba(38,4,13,.9); border-bottom: 1px solid rgba(244,197,66,.32); backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: .85rem; color: white; text-decoration: none; }
.brand-symbol { position: relative; display: block; width: 3rem; height: 3rem; border: 1px solid rgba(244,197,66,.45); border-radius: .6rem; background: radial-gradient(circle at 30% 32%, var(--gold-500) 0 .46rem, transparent .48rem), radial-gradient(circle at 70% 30%, var(--gold-300) 0 .22rem, transparent .24rem), radial-gradient(circle at 72% 72%, var(--gold-500) 0 .33rem, transparent .35rem), linear-gradient(135deg,var(--burgundy-650),var(--burgundy-950)); box-shadow: 0 16px 30px rgba(0,0,0,.24); }
.brand-symbol span { position: absolute; height: 1px; background: rgba(255,227,138,.75); transform-origin: left center; }
.brand-symbol span:nth-child(1) { width: 1.2rem; left: .95rem; top: 1rem; rotate: 16deg; }
.brand-symbol span:nth-child(2) { width: 1rem; left: 1.8rem; top: 1.05rem; rotate: 92deg; }
.brand-symbol span:nth-child(3) { width: 1.05rem; left: 1.8rem; top: 2.1rem; rotate: -148deg; }
.brand-symbol span:nth-child(4) { width: 1.25rem; left: .92rem; top: 1rem; rotate: 75deg; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1rem; letter-spacing: .02em; }
.brand small { color: rgba(255,244,201,.74); font-size: .76rem; }
.nav { display: flex; align-items: center; gap: .35rem; }
.nav a { color: rgba(255,250,240,.86); padding: .58rem .82rem; border-radius: 999px; text-decoration: none; }
.nav a:hover, .nav a[aria-current="location"] { color: var(--burgundy-950); background: var(--gold-500); }
main { overflow: hidden; }
.hero { position: relative; min-height: calc(100svh - 4.75rem); isolation: isolate; color: white; background: linear-gradient(125deg, rgba(38,4,13,.98), rgba(93,16,36,.9) 48%, rgba(244,197,66,.18)), var(--burgundy-950); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 20%, rgba(244,197,66,.15), transparent 22rem), radial-gradient(circle at 82% 34%, rgba(244,197,66,.12), transparent 20rem), radial-gradient(circle, rgba(255,244,201,.42) 0 1px, transparent 1.7px) 0 0 / 74px 74px, radial-gradient(circle, rgba(244,197,66,.32) 0 1.25px, transparent 1.9px) 28px 36px / 118px 118px, radial-gradient(circle, rgba(255,250,240,.26) 0 .8px, transparent 1.5px) 16px 22px / 46px 46px; pointer-events: none; z-index: 0; opacity: .72; animation: particleDrift 18s linear infinite; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 9rem; background: linear-gradient(transparent,var(--paper)); pointer-events: none; z-index: 0; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.84fr) minmax(0,1fr); gap: clamp(1.5rem,2.5vw,3rem); align-items: center; width: min(1360px,calc(100% - 7rem)); min-height: calc(100svh - 4.75rem); margin: 0 auto; padding: clamp(2.8rem,6vw,4.5rem) 0 clamp(4rem,7vw,6rem); }
.journal-tag, .micro-label { margin: 0 0 .65rem; color: var(--gold-500); font-size: .78rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.hero-copy { min-width: 0; }
.hero-copy h1 { max-width: none; margin: 0; color: white; font-size: clamp(2.35rem,3.85vw,5rem); line-height: .92; letter-spacing: 0; overflow-wrap: anywhere; text-shadow: 0 20px 70px rgba(0,0,0,.32); }
.hero-copy p:not(.journal-tag) { max-width: 45rem; color: rgba(255,250,240,.82); font-size: 1.08rem; }
.hero-copy .article-authors { max-width: 48rem; color: #ffd95a; font-size: .95rem; font-weight: 700; text-shadow: 0 10px 32px rgba(38,4,13,.5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.button, .primary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .8rem 1.1rem; border-radius: .55rem; font-weight: 850; text-decoration: none; }
.button.primary, .primary-action { color: var(--burgundy-950); border: 0; background: linear-gradient(135deg,var(--gold-500),var(--gold-300)); box-shadow: 0 18px 44px rgba(244,197,66,.18); }
.button.secondary { color: var(--burgundy-800); border: 1px solid rgba(93,16,36,.22); background: var(--paper-strong); }
.band-visual { position: relative; overflow: hidden; min-height: 43rem; border: 1px solid rgba(255,227,138,.28); border-radius: .9rem; background: radial-gradient(circle at 25% 18%, rgba(244,197,66,.2), transparent 14rem), linear-gradient(135deg, rgba(255,250,240,.09), rgba(255,250,240,.03)); box-shadow: 0 26px 80px rgba(0,0,0,.22); backdrop-filter: blur(18px); }
.band-visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,227,138,.08) 1px, transparent 1px), linear-gradient(rgba(255,227,138,.08) 1px, transparent 1px); background-size: 46px 46px; pointer-events: none; }
.band-visual-top { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .8rem; padding: 1rem 1rem 0; }
.band-visual-top strong { color: rgba(255,250,240,.9); }
#animation-toggle { position: relative; z-index: 2; border: 1px solid rgba(255,227,138,.4); border-radius: .4rem; padding: .4rem .6rem; color: var(--gold-100); background: rgba(38,4,13,.4); font-size: .75rem; }
#band-animation { position: relative; z-index: 1; display: block; width: 100%; min-height: 35rem; }
.band-grid line { stroke: rgba(255,227,138,.16); stroke-width: 1; }
.stage-card rect { fill: rgba(255,250,240,.12); stroke: rgba(255,227,138,.35); stroke-width: 1.4; }
.stage-card.active rect { fill: rgba(244,197,66,.88); stroke: #fff; filter: drop-shadow(0 0 12px rgba(244,197,66,.48)); }
.stage-card text { fill: rgba(255,250,240,.9); font-weight: 900; font-size: 13px; }
.stage-card.active text { fill: var(--burgundy-950); }
.stage-arrow { stroke: rgba(255,227,138,.8); stroke-width: 4; stroke-linecap: round; }
.continuum-caption {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: -1.5rem 1rem 1rem;
  padding: .85rem;
  color: var(--burgundy-950);
  border: 1px solid rgba(255,227,138,.3);
  border-radius: .65rem;
  background: rgba(255,244,201,.92);
}
.continuum-caption span {
  display: inline-flex;
  align-items: center;
  padding: .42rem .58rem;
  border-radius: 999px;
  background: white;
  font-size: .78rem;
  font-weight: 900;
}
.continuum-caption span:not(:last-of-type)::after {
  content: ">";
  margin-left: .5rem;
  color: var(--burgundy-650);
}
.continuum-caption strong {
  flex-basis: 100%;
  font-size: .9rem;
  line-height: 1.35;
}
.band-readout { position: relative; z-index: 1; display: grid; align-content: start; gap: .3rem; min-height: 6.2rem; margin: 0 1rem 1rem; padding: .9rem 1rem; color: var(--burgundy-950); border-radius: .65rem; background: linear-gradient(135deg,var(--gold-500),var(--gold-100)); }
.band-readout span { font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.paper-station, .pathway-section, .atlas-section, .figure-section, .simulator-section { width: min(1240px,calc(100% - 7rem)); margin: 0 auto; padding: 2.25rem 0; }
.section-title { display: grid; grid-template-columns: minmax(0,1fr) minmax(18rem,.44fr); gap: 1.4rem; align-items: end; margin-bottom: 1.4rem; }
.section-title.compact { display: block; max-width: none; }
.section-title > .journal-tag { grid-column: 1 / -1; color: var(--burgundy-650); }
.section-title h2 { margin: 0; color: var(--burgundy-950); font-size: clamp(2rem,4vw,4.05rem); line-height: .95; white-space: nowrap; }
.section-title.compact h2,
.atlas-section .section-title h2 { font-size: clamp(2rem,3.6vw,3.75rem); }
.figure-section .section-title h2 { font-size: clamp(1.8rem,2.9vw,2.45rem); }
.section-title p:last-child { margin: 0; color: var(--muted); }
.paper-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.paper-panel, .mechanism-stage, .pathway-track, .atlas-card, .atlas-toolbar, .case-list, .case-workbench, .figure-tabs, .figure-viewer { border: 1px solid var(--line); border-radius: .75rem; background: rgba(255,253,248,.88); box-shadow: 0 18px 56px rgba(38,4,13,.1); backdrop-filter: blur(16px); }
.paper-panel { min-height: 20rem; padding: 1.2rem; }
.paper-panel.accent { color: white; background: radial-gradient(circle at top right, rgba(244,197,66,.34), transparent 13rem), linear-gradient(135deg,var(--burgundy-800),var(--burgundy-950)); }
.panel-topline { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--burgundy-650); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.paper-panel.accent .panel-topline { color: var(--gold-300); }
.panel-topline span { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--gold-500); color: var(--burgundy-950); }
.paper-panel h3 { margin: 3rem 0 .8rem; color: var(--burgundy-950); font-size: 1.85rem; line-height: 1.05; }
.paper-panel.accent h3 { color: white; }
.paper-panel p, .atlas-card p:not(.micro-label), .case-workbench p, .feedback, .figure-viewer p { color: var(--muted); }
.paper-panel.accent p { color: rgba(255,250,240,.82); }
.comparison-table { display: grid; margin-top: 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: .75rem; background: rgba(255,253,248,.9); box-shadow: 0 18px 56px rgba(38,4,13,.1); backdrop-filter: blur(16px); }
.comparison-table > div { display: grid; grid-template-columns: minmax(9rem,.42fr) minmax(0,1fr) minmax(0,1fr); border-top: 1px solid var(--line); }
.comparison-table > div:first-child { border-top: 0; }
.comparison-table span { padding: .95rem; border-left: 1px solid var(--line); }
.comparison-table span:first-child { border-left: 0; color: var(--burgundy-950); font-weight: 900; }
.comparison-head { color: var(--burgundy-950); background: linear-gradient(135deg,var(--gold-500),var(--gold-100)); font-weight: 950; }
.pathway-layout, .simulator-grid, .figure-layout { display: grid; grid-template-columns: minmax(22rem,.46fr) minmax(0,1fr); gap: 1rem; margin-top: 1.4rem; }
.pathway-track, .case-list, .figure-tabs { display: grid; gap: .55rem; align-content: start; padding: .75rem; }
.path-step, .figure-tab, .case-card { display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; align-items: center; width: 100%; min-height: 4rem; padding: .7rem; color: var(--burgundy-800); text-align: left; border: 1px solid transparent; border-radius: .55rem; background: transparent; }
.path-step span, .figure-tab span { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; color: var(--burgundy-950); border-radius: 50%; background: var(--gold-500); font-size: .76rem; font-weight: 950; }
.path-step:hover, .path-step.active, .figure-tab:hover, .figure-tab.active, .case-card:hover, .case-card.active { background: var(--paper-strong); border-color: rgba(93,16,36,.2); transform: translateX(.2rem); }
.mechanism-stage { position: relative; min-height: 36rem; overflow: hidden; padding: clamp(1.3rem,4vw,2.4rem); color: white; background: radial-gradient(circle at 82% 78%, rgba(244,197,66,.24), transparent 17rem), linear-gradient(135deg,var(--burgundy-800),var(--burgundy-950)); }
.mechanism-stage > :not(.stage-orbit) { position: relative; z-index: 1; }
.mechanism-stage h3, .case-workbench h3, .figure-viewer h3 { margin: 0 0 .8rem; font-size: clamp(1.9rem,4vw,3.4rem); line-height: 1.02; }
.mechanism-stage p:not(.micro-label) { max-width: 44rem; color: rgba(255,250,240,.82); }
#pathway-points, #study-signals { display: grid; gap: .72rem; padding: 0; margin: 1.5rem 0 0; list-style: none; }
#pathway-points li { padding: .85rem .95rem; border: 1px solid rgba(255,227,138,.26); border-radius: .55rem; background: rgba(255,255,255,.08); }
.stage-orbit { position: absolute; right: -5rem; bottom: -5rem; width: 25rem; height: 25rem; opacity: .65; pointer-events: none; }
.stage-orbit span { position: absolute; inset: 12%; border: 1px solid rgba(255,227,138,.35); border-radius: 50%; }
.stage-orbit span:nth-child(2) { inset: 28%; }
.stage-orbit span:nth-child(3) { inset: 44%; background: var(--gold-500); }
.atlas-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(20rem,.42fr); gap: 1rem; }
.atlas-toolbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .55rem; padding: .75rem; box-shadow: none; }
.filter-chip, .segmented button, .tool-option { color: var(--burgundy-800); border: 1px solid rgba(93,16,36,.22); border-radius: 999px; background: var(--paper-strong); padding: .58rem .88rem; }
.filter-chip.active, .segmented button.active, .tool-option.active { color: var(--burgundy-950); border-color: transparent; background: var(--gold-500); font-weight: 900; }
.knowledge-map { width: 100%; min-height: 35rem; border: 1px solid rgba(244,197,66,.22); border-radius: .75rem; background: radial-gradient(circle at center, rgba(244,197,66,.2), transparent 18rem), linear-gradient(135deg, rgba(38,4,13,.96), rgba(93,16,36,.9)); box-shadow: var(--shadow); }
.graph-line { stroke: rgba(255,227,138,.28); stroke-width: 2.2; }
.graph-node { cursor: pointer; }
.graph-node circle { fill: rgba(255,250,240,.94); stroke: var(--gold-500); stroke-width: 3; filter: url("#nodeGlow"); }
.graph-node text { fill: var(--burgundy-950); font-size: 11.5px; font-weight: 900; pointer-events: none; }
.graph-node tspan { dominant-baseline: middle; }
.graph-node.active circle, .graph-node:hover circle { fill: var(--gold-500); stroke: white; stroke-width: 4; }
.graph-node.dimmed, .graph-line.dimmed { opacity: .18; }
.atlas-card, .case-workbench { align-self: stretch; padding: 1.2rem; min-width: 0; overflow: hidden; }
.atlas-card h3 { max-width: 100%; margin: 0 0 .8rem; font-size: clamp(1.65rem,2.6vw,2.45rem); line-height: 1.05; overflow-wrap: anywhere; }
.map-links, .segmented, .tool-grid { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.map-links span { padding: .45rem .6rem; color: var(--burgundy-950); border-radius: 999px; background: var(--gold-100); font-size: .84rem; font-weight: 850; }
.figure-viewer { overflow: hidden; }
.evidence-card > div { padding: 1.2rem; }
.study-facts { display: grid; grid-template-columns: minmax(8rem,.35fr) 1fr; gap: .6rem 1rem; margin: 1rem 0; }
.study-facts dt { color: var(--burgundy-650); font-weight: 900; }
.study-facts dd { margin: 0; color: var(--ink); }
#study-signals li { padding: .7rem .8rem; border-radius: .55rem; background: var(--gold-100); color: var(--burgundy-950); }
.case-card { display: block; background: var(--paper-strong); }
.case-card strong, .case-card span { display: block; }
.case-card span { color: var(--muted); font-size: .88rem; }
.choice-block { margin-top: 1.35rem; }
.choice-block h4 { margin: 0 0 .7rem; color: var(--burgundy-950); }
.tool-option { border-radius: .55rem; }
.primary-action { margin-top: 1.35rem; }
.feedback { min-height: 5rem; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(93,16,36,.18); border-radius: .55rem; background: var(--gold-100); }
.quiz-grid { grid-template-columns: minmax(18rem,.36fr) minmax(0,1fr); }
.quiz-progress-panel { gap: 1rem; }
.quiz-scorecard {
  display: grid;
  gap: .45rem;
  padding: 1rem;
  border-radius: .65rem;
  background: linear-gradient(135deg,var(--burgundy-800),var(--burgundy-950));
  color: white;
}
.quiz-scorecard .micro-label { margin: 0; }
.quiz-scorecard strong { color: var(--gold-300); font-size: 2rem; line-height: 1; }
.quiz-scorecard span:last-child { color: rgba(255,250,240,.82); font-weight: 850; }
.quiz-dots { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .55rem; }
.quiz-dot {
  min-height: 2.55rem;
  border: 1px solid rgba(93,16,36,.2);
  border-radius: .55rem;
  color: var(--burgundy-800);
  background: var(--paper-strong);
  font-weight: 950;
}
.quiz-dot.active { border-color: transparent; background: var(--gold-500); color: var(--burgundy-950); }
.quiz-dot.answered-correct { background: #dff4df; border-color: #2f8f46; color: #115923; }
.quiz-dot.answered-incorrect { background: #ffe0df; border-color: #b3261e; color: #7c1a14; }
.quiz-workbench h3 { font-size: clamp(1.7rem,3vw,3.2rem); }
.quiz-options { display: grid; gap: .75rem; margin-top: 1.2rem; }
.quiz-option {
  width: 100%;
  padding: .95rem 1rem;
  border: 1px solid rgba(93,16,36,.22);
  border-radius: .65rem;
  color: var(--burgundy-800);
  background: var(--paper-strong);
  text-align: left;
  font-weight: 780;
}
.quiz-option:hover:not(:disabled) { border-color: var(--burgundy-650); transform: translateX(.15rem); }
.quiz-option.correct {
  border-color: #2f8f46;
  background: linear-gradient(135deg,#dcf5dd,#f5fff5);
  color: #115923;
}
.quiz-option.incorrect {
  border-color: #b3261e;
  background: linear-gradient(135deg,#ffe0df,#fff7f6);
  color: #7c1a14;
}
.quiz-option:disabled { cursor: default; }
.quiz-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.quiz-actions .primary-action:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}
.quiz-reset { margin-top: 1.35rem; }
.quiz-feedback strong { display: block; margin-bottom: .35rem; color: var(--burgundy-950); }
.footer { display: flex; justify-content: center; align-items: center; padding: 2.25rem 1.5rem; background: var(--burgundy-950); }
.footer strong { color: var(--gold-500); }
section[id] { scroll-margin-top: 6rem; }
html.animation-paused .hero::before { animation-play-state: paused; }
@media (max-width: 1280px) {
  .hero-grid, .section-title, .pathway-layout, .atlas-grid, .figure-layout, .simulator-grid { grid-template-columns: 1fr; }
  .section-title h2 { font-size: clamp(1.85rem,5vw,3.55rem); }
  .figure-section .section-title h2 { font-size: clamp(1.75rem,3vw,2.35rem); }
  .paper-grid { grid-template-columns: 1fr; }
  .comparison-table > div { grid-template-columns: 1fr; }
  .comparison-table span { border-left: 0; border-top: 1px solid var(--line); }
  .comparison-table span:first-child { border-top: 0; background: var(--gold-100); }
  .hero-grid { min-height: auto; padding-top: 4rem; }
  .band-visual { min-height: 40rem; }
  #band-animation { min-height: 32rem; }
}
@media (max-width: 680px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .nav { width: 100%; overflow-x: auto; gap: .1rem; }
  .nav a { white-space: nowrap; font-size: .82rem; padding: .55rem .5rem; }
  .brand small { max-width: 16rem; }
  .paper-station, .pathway-section, .atlas-section, .figure-section, .simulator-section { width: calc(100% - 2rem); padding: 2rem 0; }
  .hero-grid { width: calc(100% - 2rem); }
  .section-title h2,
  .section-title.compact h2,
  .figure-section .section-title h2,
  .atlas-section .section-title h2 { white-space: normal; font-size: clamp(2rem,10vw,2.65rem); }
  .hero-copy h1 { font-size: clamp(1.95rem,8vw,2.45rem); line-height: .96; }
  .band-visual { min-height: 0; }
  #band-animation { min-height: 0; aspect-ratio: 760/520; }
  .continuum-caption { margin-top: .75rem; }
  .continuum-caption span { width: 100%; justify-content: space-between; }
  .knowledge-map { min-height: 0; aspect-ratio: 960/560; }
  .mechanism-stage { min-height: 30rem; }
  .study-facts { grid-template-columns: 1fr; }
  .quiz-dots { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quiz-scorecard strong { font-size: 1.6rem; }
  section[id] { scroll-margin-top: 9rem; }
  .footer { padding: 2rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none!important; transition: none!important; }
}