:root {
  color-scheme: dark;
  --page-ground: #1a1a2e;
  --page-panel: #212137;
  --page-ink: #f5f5fb;
  --page-soft: #c0c0c0;
  --page-blue: #0080ff;
  --page-pink: #ff006e;
  --page-cyan: #00ffff;
  --page-purple: #5d34d0;
  --page-gold: #ffd700;
  --page-bright-pink: #ff10f0;
  --page-rule: #494961;
  --page-type: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 28px; }
body {
  margin: 0;
  background: var(--page-ground);
  color: var(--page-ink);
  font-family: var(--page-type);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
body::before {
  content: "";
  position: absolute;
  top: 90px;
  right: 0;
  left: 0;
  height: 730px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(155deg, #5d34d017, transparent 62%);
}
[hidden] { display: none !important; }
a { color: var(--page-cyan); text-decoration-thickness: 1px; text-underline-offset: 5px; }
a:hover { color: var(--page-ink); }
a, summary, button, select { -webkit-tap-highlight-color: #00ffff35; }
a:focus-visible, summary:focus-visible, select:focus-visible {
  outline: 3px solid var(--page-gold);
  outline-offset: 5px;
}
h1, h2, h3 { font-weight: 700; line-height: 1.16; text-wrap: balance; }
h1 { margin: 12px 0 24px; font-size: 2.25rem; letter-spacing: -0.035em; max-width: 27ch; }
h2 { margin: 0 0 20px; font-size: 1.875rem; letter-spacing: -0.025em; max-width: 30ch; }
h3 { margin: 0 0 14px; font-size: 1.375rem; letter-spacing: -0.015em; }
p { margin: 0 0 16px; max-width: 68ch; }
section { scroll-margin-top: 28px; }
h2:focus, main:focus { outline: none; }
::selection { background: var(--page-cyan); color: var(--page-ground); }
.page-shell { width: calc(100% - 96px); max-width: 1216px; margin: 0 auto; }
.page-kicker {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.055em;
  line-height: 1.5;
  color: var(--page-soft);
  margin: 0 0 16px;
}
.page-skip {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 20px;
  transform: translateY(-200%);
  padding: 12px 20px;
  min-height: 48px;
  color: var(--page-ground);
  background: var(--page-gold);
}
.page-skip:focus { transform: none; }
.page-header { border-bottom: 1px solid var(--page-rule); position: relative; z-index: 20; }
.page-header-inner { display: flex; justify-content: space-between; align-items: center; min-height: 96px; gap: 36px; }
.page-wordmark { display: flex; align-items: center; gap: 14px; color: var(--page-ink); line-height: 1.3; text-decoration: none; min-height: 56px; font-size: 16px; padding: 4px 0; }
.page-wordmark strong { font-weight: 700; }
.page-mark { width: 26px; height: 32px; display: block; border: 1px solid var(--page-cyan); transform: skewY(-18deg); box-shadow: 5px 3px 0 var(--page-purple); position: relative; }
.page-mark::after { content: ""; position: absolute; top: 8px; left: 5px; right: 5px; border-top: 1px solid var(--page-pink); border-bottom: 1px solid var(--page-pink); height: 12px; }
.page-topic-nav { display: flex; gap: 16px; }
.page-topic { position: relative; min-width: 160px; }
.page-topic summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 12px 16px; min-height: 48px; color: var(--page-soft); cursor: pointer; border: 1px solid transparent; font-size: 16px; }
summary::-webkit-details-marker { display: none; }
.page-topic summary span { color: var(--page-cyan); font-size: 20px; line-height: 1; }
.page-topic summary:hover, .page-topic[open] summary { border-color: var(--page-blue); color: var(--page-ink); background: var(--page-panel); }
.page-topic-current summary { color: var(--page-ink); border-bottom-color: var(--page-cyan); }
.page-topic[open] summary span { transform: rotate(45deg); }
.page-topic-links { position: absolute; top: calc(100% + 8px); right: 0; min-width: 264px; padding: 8px; background: #151525; border: 1px solid var(--page-blue); box-shadow: 8px 8px 0 #0080ff18; }
.page-topic-links a { display: flex; align-items: center; min-height: 48px; padding: 10px 14px; color: var(--page-ink); text-decoration: none; font-size: 16px; }
.page-topic-links a:hover { background: #292942; color: var(--page-cyan); }
.page-topic-links a[aria-current="page"] { box-shadow: inset 3px 0 var(--page-cyan); color: var(--page-cyan); background: #24243b; }
.page-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 52px; padding: 12px 20px; text-decoration: none; color: var(--page-ground); background: var(--page-cyan); font-weight: 600; font-size: 16px; border: 1px solid var(--page-cyan); }
.page-action:hover { background: var(--page-gold); color: var(--page-ground); border-color: var(--page-gold); }
.page-action span { font-size: 22px; line-height: 1; }

.page-home-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; padding: 64px 0 76px; align-items: start; }
.page-guide-label { color: var(--page-cyan); display: flex; gap: 10px; align-items: center; }
.page-guide-label::before { content: ""; width: 8px; height: 8px; background: var(--page-cyan); box-shadow: 0 0 10px #00ffff40; }
.page-home h1 { font-size: clamp(2.5rem, 4.4vw, 4rem); max-width: 18ch; margin: 24px 0 20px; line-height: 1.04; letter-spacing: -0.045em; text-shadow: 1px 0 #00ffff45, -1px 0 #ff006e45; }
.page-home-deck { font-size: 1.5rem; line-height: 1.4; max-width: 26ch; font-weight: 500; margin: 0 0 20px; }
.page-home-intro { color: var(--page-soft); max-width: 44ch; margin: 0 0 28px; }
.page-home-visual { position: relative; padding-top: 12px; }
.page-home-visual .page-myth-panel { margin: -30px 0 0 36px; z-index: 1; position: relative; padding: 24px 28px 28px; box-shadow: 8px 8px 0 #ff006e0e; }
.page-myth-panel { padding: 30px 36px; border: 1px solid var(--page-rule); border-left: 3px solid var(--page-pink); background: #212137; max-width: 872px; margin-bottom: 48px; }
.page-myth-panel .page-kicker { color: #ffa3ca; margin-bottom: 8px; }
.page-myth-text { font-size: 1.25rem; line-height: 1.45; font-weight: 500; max-width: 52ch; margin-bottom: 22px; }
.page-answer-label { display: inline-flex; padding: 3px 8px; background: #00ffff12; color: var(--page-cyan); font-size: 16px; font-weight: 600; margin: 0 0 10px; }
.page-myth-panel > p:last-child { margin-bottom: 0; max-width: 66ch; }

.page-geometry { position: relative; isolation: isolate; width: 220px; height: 180px; overflow: hidden; border: 1px solid #0080ff60; background: #131324; }
.page-geometry-hero { width: 100%; height: 290px; }
.page-geometry::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, #0000001a 3px, #0000001a 4px); }
.page-geometry-grid { position: absolute; inset: 0; overflow: hidden; }
.page-geometry-grid::before { content: ""; position: absolute; width: 150%; height: 60%; left: -22%; bottom: -10%; transform: perspective(180px) rotateX(48deg); background: linear-gradient(90deg, #0080ff38 1px, transparent 1px), linear-gradient(#0080ff38 1px, transparent 1px); background-size: 30px 30px; }
.page-geometry-disc { position: absolute; width: 118px; height: 118px; border-radius: 50%; top: 15%; left: 26%; background: linear-gradient(150deg, var(--page-purple), #31205b); border: 1px solid #c0c0c055; }
.page-geometry-ring { position: absolute; width: 156px; height: 156px; border: 1px solid var(--page-cyan); border-radius: 50%; top: 3%; left: 17%; box-shadow: inset 0 0 18px #00ffff0d, 0 0 18px #00ffff15; }
.page-geometry-orbit { position: absolute; width: 220px; height: 72px; top: 34%; left: 0; border: 2px solid var(--page-pink); border-radius: 50%; transform: rotate(-28deg); box-shadow: 0 0 16px #ff006e20; }
.page-geometry-plane { position: absolute; width: 110px; height: 50px; right: -8%; top: 12%; background: #5d34d070; border: 1px solid var(--page-bright-pink); transform: rotate(-26deg) skewX(-25deg); }
.page-geometry-spark { position: absolute; width: 14px; height: 14px; top: 18%; left: 15%; transform: rotate(45deg); background: var(--page-gold); box-shadow: 0 0 18px #ffd70030; }
.page-geometry-cross { position: absolute; width: 16px; height: 16px; right: 12%; bottom: 17%; }
.page-geometry-cross::before, .page-geometry-cross::after { content: ""; position: absolute; background: var(--page-cyan); }
.page-geometry-cross::before { top: 7px; left: 0; width: 16px; height: 1px; }
.page-geometry-cross::after { left: 7px; top: 0; height: 16px; width: 1px; }
.page-geometry-hero .page-geometry-disc { width: 184px; height: 184px; top: 12%; left: 30%; }
.page-geometry-hero .page-geometry-ring { width: 244px; height: 244px; top: 2%; left: 22%; }
.page-geometry-hero .page-geometry-orbit { width: 352px; height: 104px; top: 32%; left: 7%; transform: rotate(-27deg); animation: page-orbit-offset 13s ease-in-out infinite; }
.page-geometry-hero .page-geometry-plane { width: 156px; height: 68px; top: 15%; right: -1%; }
.page-geometry-hero .page-geometry-spark { left: 16%; top: 22%; width: 20px; height: 20px; }
@keyframes page-orbit-offset { 0%, 96%, 100% { transform: rotate(-27deg) translateX(0); } 97% { transform: rotate(-27deg) translateX(3px); } 98% { transform: rotate(-27deg) translateX(-2px); } }

.page-note-hero { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 80px; align-items: center; padding: 44px 0 36px; }
.page-note-hero .page-geometry { margin-left: auto; transform: rotate(-3deg); }
.page-note-hero .page-kicker { margin-top: 14px; color: var(--page-cyan); }
.page-breadcrumb { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--page-soft); font-size: 16px; text-decoration: none; }
.page-breadcrumb:hover { color: var(--page-cyan); }
.page-breadcrumb span { color: var(--page-cyan); }
.page-note-intro { color: var(--page-soft); max-width: 61ch; }
.page-reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 80px; padding-bottom: 80px; align-items: start; }
.page-reading-body { min-width: 0; }
.page-note-section { padding: 0 0 38px; margin-bottom: 38px; border-bottom: 1px solid var(--page-rule); }
.page-note-section p:last-child { margin-bottom: 0; }
.page-note-section > h2::before { content: ""; display: block; width: 28px; height: 3px; margin: 0 0 16px; background: var(--page-blue); }
.page-note-section:target > h2::before { background: var(--page-cyan); }
.page-home .page-note-section:first-child { max-width: 760px; }
.page-reading-rail { position: sticky; top: 28px; }
.page-jump { border: 1px solid var(--page-rule); border-top: 2px solid var(--page-cyan); background: var(--page-panel); }
.page-jump summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 12px 18px; font-size: 16px; font-weight: 600; list-style: none; cursor: pointer; }
.page-jump summary span { color: var(--page-cyan); }
.page-jump-links { padding: 0 8px 10px; }
.page-jump-links a { display: flex; align-items: center; padding: 9px 10px; min-height: 48px; font-size: 16px; line-height: 1.45; color: var(--page-soft); text-decoration: none; border-left: 2px solid transparent; }
.page-jump-links a:hover { color: var(--page-cyan); background: #00ffff08; }
.page-jump-links a[aria-current="location"] { color: var(--page-cyan); border-left-color: var(--page-cyan); background: #00ffff09; }
.page-jump-picker { display: none; }
.page-rail-thought { color: var(--page-soft); margin: 32px 0; padding-left: 18px; border-left: 1px solid var(--page-pink); line-height: 1.8; }
.page-related { margin-top: 32px; }
.page-related .page-kicker { margin-bottom: 8px; }
.page-next-link { display: flex; gap: 14px; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--page-rule); padding: 12px 0; line-height: 1.45; font-size: 16px; text-decoration: none; }
.page-next-link span:last-child { color: var(--page-cyan); font-size: 20px; }
.page-evidence { padding-top: 0; }
.page-evidence > h2 { font-size: 1.5rem; margin-bottom: 24px; }
.page-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.page-evidence-card { border: 1px solid var(--page-rule); border-top: 2px solid var(--page-gold); padding: 24px; display: flex; flex-direction: column; align-items: start; background: #1f1f33; }
.page-evidence-card h3 { font-size: 1.25rem; line-height: 1.3; }
.page-evidence-card p { font-size: 16px; line-height: 1.6; }
.page-evidence-card > .page-kicker { color: var(--page-gold); margin-bottom: 10px; }
.page-source-name { color: var(--page-soft); margin-top: auto; padding-top: 10px; margin-bottom: 12px; }
.page-source-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 48px; padding: 10px 0; font-size: 16px; line-height: 1.4; border-top: 1px solid var(--page-rule); text-decoration: none; }
.page-source-link span { font-size: 20px; flex-shrink: 0; }
.page-sources .page-evidence-card:last-child { grid-column: 1 / -1; }
.page-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 30px 0 0; }
.page-route-card { position: relative; min-height: 226px; padding: 24px 24px 50px; border: 1px solid var(--page-rule); color: var(--page-ink); text-decoration: none; background: #202035; display: flex; flex-direction: column; align-items: start; }
.page-route-card .page-kicker { color: var(--page-soft); margin-bottom: 22px; }
.page-route-card h3 { max-width: 20ch; margin-bottom: 12px; }
.page-route-card p { font-size: 16px; line-height: 1.55; max-width: 38ch; margin-bottom: 0; }
.page-route-arrow { position: absolute; right: 24px; bottom: 17px; font-size: 26px; color: var(--page-cyan); line-height: 1; }
.page-route-wide { grid-column: span 2; }
.page-route-care { border-color: var(--page-blue); background: #252139; }
.page-route-compound { border-top: 2px solid var(--page-pink); }
.page-route-cost { border-color: #ffd70070; background: #242336; }
.page-route-card:hover { border-color: var(--page-cyan); color: var(--page-ink); background: #272744; }
.page-route-card:hover .page-route-arrow { color: var(--page-gold); }
.page-question { padding: 26px 0; border-bottom: 1px solid var(--page-rule); }
.page-question:first-of-type { padding-top: 8px; }
.page-question:last-child { border: 0; padding-bottom: 0; }
.page-question h3 { max-width: 42ch; }
.page-footer { border-top: 1px solid var(--page-rule); background: #151525; }
.page-footer-inner { padding: 36px 0 32px; display: flex; gap: 56px; justify-content: space-between; align-items: start; }
.page-footer p { color: var(--page-soft); max-width: 52ch; font-size: 16px; margin: 0; }
.page-footer nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.page-footer a { display: inline-flex; min-height: 48px; align-items: center; padding: 10px 0; font-size: 16px; line-height: 1.4; text-decoration: none; }
.page-error-main { padding: 88px 0 80px; position: relative; min-height: 550px; }
.page-error-main > p { max-width: 54ch; }
.page-error-main .page-geometry { position: absolute; right: 4%; top: 100px; transform: rotate(-6deg); }

@media (max-width: 1120px) {
  .page-shell { width: calc(100% - 64px); }
  .page-topic-nav { gap: 4px; }
  .page-topic { min-width: 145px; }
  .page-topic summary { padding: 12px; gap: 12px; }
  .page-home-hero { gap: 40px; }
  .page-home-visual .page-myth-panel { margin-left: 16px; padding: 22px; }
  .page-reading-layout, .page-note-hero { gap: 44px; grid-template-columns: minmax(0, 1fr) 242px; }
  .page-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-route-wide { grid-column: auto; }
  .page-route-care, .page-route-cost { grid-column: 1 / -1; min-height: 196px; }
  .page-evidence-grid { grid-template-columns: minmax(0, 1fr); }
  .page-footer-inner { gap: 36px; }
  .page-footer nav { max-width: 310px; }
}

@media (max-width: 800px) {
  .page-shell { width: calc(100% - 40px); }
  .page-header-inner { display: block; padding-top: 14px; padding-bottom: 12px; }
  .page-wordmark { display: inline-flex; margin-bottom: 12px; }
  .page-topic-nav { gap: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .page-topic { min-width: 0; }
  .page-topic summary { min-height: 48px; padding: 10px 12px; gap: 8px; border: 1px solid var(--page-rule); color: var(--page-ink); }
  .page-topic-links { min-width: 0; width: 264px; max-width: calc(100vw - 40px); }
  .page-topic:first-child .page-topic-links { left: 0; right: auto; }
  .page-topic:nth-child(2) .page-topic-links { left: 50%; right: auto; transform: translateX(-50%); }
  .page-topic:last-child .page-topic-links { right: 0; }
  .page-home-hero { gap: 30px; padding: 40px 0 48px; grid-template-columns: minmax(0, 1fr); }
  .page-home h1 { font-size: 3.5rem; max-width: 20ch; }
  .page-home-intro { max-width: 56ch; }
  .page-home-visual { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); padding-top: 0; align-items: center; }
  .page-geometry-hero { height: 256px; }
  .page-home-visual .page-myth-panel { margin: 16px 0 16px -20px; padding: 24px; }
  .page-note-hero { padding-top: 28px; gap: 20px; grid-template-columns: minmax(0, 1fr) 128px; }
  .page-note-hero .page-geometry { width: 122px; height: 158px; }
  .page-note-hero .page-geometry-disc { width: 94px; height: 94px; top: 22%; left: 23%; }
  .page-note-hero .page-geometry-ring { width: 123px; height: 123px; top: 12%; left: 10%; }
  .page-note-hero .page-geometry-orbit { width: 152px; left: -14px; top: 40%; }
  .page-reading-layout { display: flex; flex-direction: column; gap: 30px; padding-bottom: 48px; }
  .page-reading-rail { position: static; width: 100%; order: -1; }
  .page-reading-body { width: 100%; }
  .page-reading-rail .page-rail-thought, .page-reading-rail .page-related { display: none; }
  .page-jump-picker { padding: 0 16px 18px; }
  .page-jump-ready .page-jump-picker { display: block; }
  .page-jump-ready .page-jump-links { display: none; }
  .page-jump-picker label { display: block; font-size: 16px; margin: 0 0 10px; color: var(--page-soft); }
  .page-jump-picker select { display: block; width: 100%; min-height: 48px; max-width: 100%; padding: 10px 12px; border: 1px solid var(--page-rule); color: var(--page-ink); background: #151525; font-family: var(--page-type); font-size: 16px; line-height: 1.6; border-radius: 0; }
  .page-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-myth-panel { margin-bottom: 30px; padding: 26px; }
  .page-note-section { padding-bottom: 28px; margin-bottom: 30px; }
  .page-footer-inner { display: block; padding: 28px 0; }
  .page-footer p { max-width: 65ch; margin-bottom: 16px; }
  .page-footer nav { max-width: none; gap: 4px 24px; }
  .page-error-main .page-geometry { display: none; }
}

@media (max-width: 540px) {
  .page-topic-nav { gap: 6px; }
  .page-topic summary { padding: 9px; font-size: 16px; line-height: 1.35; min-height: 62px; }
  .page-topic summary span { font-size: 19px; }
  .page-home h1 { font-size: clamp(2.5rem, 10.4vw, 3.4rem); line-height: 1.08; margin-top: 22px; }
  .page-home-deck { font-size: 1.375rem; }
  .page-home-hero { padding-top: 32px; gap: 32px; }
  .page-home-visual { display: block; }
  .page-geometry-hero { height: 230px; }
  .page-geometry-hero .page-geometry-ring { width: 202px; height: 202px; left: 25%; }
  .page-geometry-hero .page-geometry-disc { width: 156px; height: 156px; left: 31%; }
  .page-geometry-hero .page-geometry-orbit { width: 290px; height: 92px; left: 8%; }
  .page-home-visual .page-myth-panel { margin: -20px 0 0 14px; padding: 24px 20px; }
  .page-myth-text { font-size: 1.125rem; line-height: 1.5; }
  .page-note-hero { display: block; padding-bottom: 14px; }
  .page-note-hero .page-geometry { display: none; }
  .page-note-hero h1 { font-size: 2.25rem; margin-bottom: 18px; }
  .page-note-hero .page-kicker { margin-top: 16px; max-width: 34ch; }
  .page-note-intro { margin-bottom: 24px; }
  .page-myth-panel { padding: 24px 20px; }
  h2 { font-size: 1.625rem; line-height: 1.22; }
  .page-evidence-grid, .page-route-grid { grid-template-columns: minmax(0, 1fr); }
  .page-route-care, .page-route-cost { grid-column: auto; }
  .page-route-card { min-height: 190px; padding: 24px 22px 48px; }
  .page-route-card .page-kicker { margin-bottom: 14px; }
  .page-route-card p { max-width: 36ch; }
  .page-evidence-card { padding: 22px; }
  .page-source-link { min-height: 52px; }
  .page-evidence > h2 { font-size: 1.5rem; }
  .page-footer nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .page-footer a { min-height: 48px; width: 100%; border-bottom: 1px solid var(--page-rule); }
  .page-footer a:last-child { border-bottom: 0; }
  .page-error-main { min-height: 450px; padding-top: 48px; }
}

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

@media print {
  body { color: #161616; background: white; }
  .page-header, .page-reading-rail, .page-geometry, .page-action, .page-breadcrumb, .page-skip { display: none; }
  .page-shell { width: 100%; max-width: none; }
  .page-home-hero, .page-note-hero, .page-reading-layout, .page-home-visual, .page-evidence-grid, .page-route-grid { display: block; }
  .page-myth-panel, .page-evidence-card, .page-route-card, .page-footer { color: #161616; background: white; border-color: #555; break-inside: avoid; box-shadow: none; }
  .page-home-visual .page-myth-panel { margin: 0; }
  .page-kicker, .page-answer-label, .page-home-intro, .page-note-intro, .page-source-name, .page-footer p, a { color: #222 !important; background: transparent !important; }
  .page-route-card { min-height: auto; margin-bottom: 16px; }
  .page-home h1 { text-shadow: none; }
  .page-evidence-card { margin-bottom: 20px; }
}