/* ==========================================================================
   THE COSMIC RUBBER BAND THEORY — EDITORIAL STYLESHEET
   Author: Saksham Uppal — Axion (aka Son of Sun)
   Design: Dual-Theme Architecture (Universe Deep Bio Black & Pure White)
           + 5 Adaptive Celestial & Cyber Accent Palettes
   Layout: Sticky Sidebar ToC + Centered Reading Column
   ========================================================================== */

/* -----------------------------------------------------------------------
   1. DESIGN TOKENS & DUAL-THEME / MULTI-ACCENT PALETTES
   ----------------------------------------------------------------------- */
:root {
  /* Default Palette: Hyper Cobalt + Skin Sand (Electric Celestial Blue) */
  --theme-accent-primary:    #38bdf8;
  --theme-accent-secondary:  #fed7aa;
  --theme-accent-rgb:        56, 189, 248;
  --theme-accent-sec-rgb:    254, 215, 170;
  --theme-accent-glow:       rgba(56, 189, 248, 0.45);
  --theme-accent-handwriting:#fde68a;

  /* Universe Deep Bio Black Base (Dark Mode) */
  --color-void:          #040608;
  --color-surface:       #090e15;
  --color-surface-card:  #0e1420;
  --color-surface-hover: #151e2e;
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-card-border:   rgba(255, 255, 255, 0.1);
  --color-card-shadow:   0 16px 40px rgba(0, 0, 0, 0.6);

  /* High-Contrast Starfield Text Hierarchy (WCAG AAA) */
  --color-text-primary:  #f8fafc;
  --color-text-secondary:#cbd5e1;
  --color-text-muted:    #78889e;
  --color-text-highlight:var(--theme-accent-primary);

  /* Aliased Accents (Preserved for validator and full backward compatibility) */
  --accent-gold:        var(--theme-accent-primary);
  --accent-amber:       #f59e0b;
  --accent-azure:       #38bdf8;
  --accent-teal:        var(--theme-accent-secondary);
  --accent-indigo:      #818cf8;
  --accent-coral:       #fb7185;
  --accent-sage:        #34d399;
  --accent-handwriting: var(--theme-accent-handwriting);

  /* Typography */
  --font-sans:        'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:     'Syne', var(--font-sans);
  --font-mono:        'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --font-handwriting: 'Caveat', cursive, sans-serif;

  /* Gradients */
  --grad-cosmos: linear-gradient(135deg, var(--theme-accent-primary) 0%, var(--theme-accent-secondary) 100%);
  --grad-nebula: linear-gradient(135deg, var(--accent-azure) 0%, var(--accent-indigo) 100%);
  --grad-aurora: linear-gradient(135deg, var(--accent-sage) 0%, var(--accent-azure) 100%);

  /* Header & Navigation */
  --header-bg:  rgba(4, 6, 8, 0.85);
  --sidebar-bg: rgba(4, 6, 8, 0.75);

  /* Layout */
  --sidebar-width: 280px;
  --content-max:   740px;
  --header-height: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   0.15s ease;
  --t-normal: 0.3s var(--ease-out);
  --t-slow:   0.6s var(--ease-out);
}

/* -----------------------------------------------------------------------
   ACCENT PALETTES — DARK THEME (Universe Deep Bio Black Base)
   ----------------------------------------------------------------------- */
/* 1. Synthetic Lime + Bio Black */
[data-accent="synthetic-lime"] {
  --theme-accent-primary:    #a3e635;
  --theme-accent-secondary:  #22c55e;
  --theme-accent-rgb:        163, 230, 53;
  --theme-accent-sec-rgb:    34, 197, 94;
  --theme-accent-glow:       rgba(163, 230, 53, 0.45);
  --theme-accent-handwriting:#bef264;
  --grad-cosmos: linear-gradient(135deg, #a3e635 0%, #22c55e 50%, #10b981 100%);
}

/* 2. Chrome Violet + Glass Blue */
[data-accent="chrome-violet"] {
  --theme-accent-primary:    #c084fc;
  --theme-accent-secondary:  #38bdf8;
  --theme-accent-rgb:        192, 132, 252;
  --theme-accent-sec-rgb:    56, 189, 248;
  --theme-accent-glow:       rgba(192, 132, 252, 0.45);
  --theme-accent-handwriting:#e879f9;
  --grad-cosmos: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #38bdf8 100%);
}

/* 3. Hyper Cobalt + Skin Sand (Default) */
[data-accent="hyper-cobalt"],
:root:not([data-accent]) {
  --theme-accent-primary:    #38bdf8;
  --theme-accent-secondary:  #fed7aa;
  --theme-accent-rgb:        56, 189, 248;
  --theme-accent-sec-rgb:    254, 215, 170;
  --theme-accent-glow:       rgba(56, 189, 248, 0.45);
  --theme-accent-handwriting:#fde68a;
  --grad-cosmos: linear-gradient(135deg, #38bdf8 0%, #60a5fa 50%, #fed7aa 100%);
}

/* 4. Toxic Violet + Soft Chrome */
[data-accent="toxic-violet"] {
  --theme-accent-primary:    #e879f9;
  --theme-accent-secondary:  #cbd5e1;
  --theme-accent-rgb:        232, 121, 249;
  --theme-accent-sec-rgb:    203, 213, 225;
  --theme-accent-glow:       rgba(232, 121, 249, 0.45);
  --theme-accent-handwriting:#f0abfc;
  --grad-cosmos: linear-gradient(135deg, #e879f9 0%, #d946ef 50%, #cbd5e1 100%);
}

/* 5. Warm Lime + Olive Ink */
[data-accent="warm-lime"] {
  --theme-accent-primary:    #bef264;
  --theme-accent-secondary:  #84cc16;
  --theme-accent-rgb:        190, 242, 100;
  --theme-accent-sec-rgb:    132, 204, 22;
  --theme-accent-glow:       rgba(190, 242, 100, 0.45);
  --theme-accent-handwriting:#d9f99d;
  --grad-cosmos: linear-gradient(135deg, #bef264 0%, #84cc16 50%, #4d7c0f 100%);
}

/* -----------------------------------------------------------------------
   LIGHT THEME (Pure White Base #ffffff / #fcfcfd)
   ----------------------------------------------------------------------- */
[data-theme="light"] {
  --color-void:          #ffffff;
  --color-surface:       #f8fafc;
  --color-surface-card:  #ffffff;
  --color-surface-hover: #f1f5f9;
  --color-border-subtle: rgba(0, 0, 0, 0.08);
  --color-card-border:   #e2e8f0;
  --color-card-shadow:   0 8px 25px rgba(0, 0, 0, 0.05);

  /* Deep ink text hierarchy (WCAG AAA) */
  --color-text-primary:  #040608;
  --color-text-secondary:#334155;
  --color-text-muted:    #64748b;
  --color-text-highlight:var(--theme-accent-primary);

  --header-bg:  rgba(255, 255, 255, 0.92);
  --sidebar-bg: rgba(255, 255, 255, 0.88);

  /* Default Light Mode Accent: Hyper Cobalt (Deep Electric Blue) */
  --theme-accent-primary:    #1d4ed8;
  --theme-accent-secondary:  #b45309;
  --theme-accent-rgb:        29, 78, 216;
  --theme-accent-sec-rgb:    180, 83, 9;
  --theme-accent-glow:       rgba(29, 78, 216, 0.25);
  --theme-accent-handwriting:#9a3412;
  --grad-cosmos: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #d97706 100%);
}

/* ACCENT PALETTES — LIGHT THEME (WCAG AAA Calibrated on White) */
/* 1. Synthetic Lime + Bio Black in Light Mode */
[data-theme="light"][data-accent="synthetic-lime"] {
  --theme-accent-primary:    #4d7c0f; /* Deep Olive Lime */
  --theme-accent-secondary:  #16a34a;
  --theme-accent-rgb:        77, 124, 15;
  --theme-accent-sec-rgb:    22, 163, 74;
  --theme-accent-glow:       rgba(77, 124, 15, 0.25);
  --theme-accent-handwriting:#3f6212;
  --grad-cosmos: linear-gradient(135deg, #4d7c0f 0%, #16a34a 50%, #0d9488 100%);
}

/* 2. Chrome Violet + Glass Blue in Light Mode */
[data-theme="light"][data-accent="chrome-violet"] {
  --theme-accent-primary:    #7c3aed; /* Royal Chrome Violet */
  --theme-accent-secondary:  #0284c7; /* Glass Blue */
  --theme-accent-rgb:        124, 58, 237;
  --theme-accent-sec-rgb:    2, 132, 199;
  --theme-accent-glow:       rgba(124, 58, 237, 0.25);
  --theme-accent-handwriting:#6d28d9;
  --grad-cosmos: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #0284c7 100%);
}

/* 3. Hyper Cobalt + Skin Sand in Light Mode (Default) */
[data-theme="light"][data-accent="hyper-cobalt"],
[data-theme="light"]:not([data-accent]) {
  --theme-accent-primary:    #1d4ed8; /* Deep Hyper Cobalt */
  --theme-accent-secondary:  #b45309; /* Deep Skin Sand */
  --theme-accent-rgb:        29, 78, 216;
  --theme-accent-sec-rgb:    180, 83, 9;
  --theme-accent-glow:       rgba(29, 78, 216, 0.25);
  --theme-accent-handwriting:#9a3412;
  --grad-cosmos: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #d97706 100%);
}

/* 4. Toxic Violet + Soft Chrome in Light Mode */
[data-theme="light"][data-accent="toxic-violet"] {
  --theme-accent-primary:    #a21caf; /* Deep Toxic Violet */
  --theme-accent-secondary:  #475569; /* Soft Chrome Slate */
  --theme-accent-rgb:        162, 28, 175;
  --theme-accent-sec-rgb:    71, 85, 105;
  --theme-accent-glow:       rgba(162, 28, 175, 0.25);
  --theme-accent-handwriting:#86198f;
  --grad-cosmos: linear-gradient(135deg, #a21caf 0%, #c026d3 50%, #475569 100%);
}

/* 5. Warm Lime + Olive Ink in Light Mode */
[data-theme="light"][data-accent="warm-lime"] {
  --theme-accent-primary:    #3f6212; /* Deep Olive Ink */
  --theme-accent-secondary:  #65a30d; /* Warm Lime */
  --theme-accent-rgb:        63, 98, 18;
  --theme-accent-sec-rgb:    101, 163, 13;
  --theme-accent-glow:       rgba(63, 98, 18, 0.25);
  --theme-accent-handwriting:#365314;
  --grad-cosmos: linear-gradient(135deg, #3f6212 0%, #65a30d 50%, #84cc16 100%);
}

/* -----------------------------------------------------------------------
   PURE CSS ENDLESS UNIVERSE STARFIELD (STILL & IMMERSIVE, ZERO DISTORTION)
   ----------------------------------------------------------------------- */
.cosmic-stars-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s var(--ease-out);
}

[data-theme="light"] .cosmic-stars-layer {
  opacity: 0;
  visibility: hidden;
}

.stars-sm, .stars-md, .stars-lg {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: none !important; /* Stationary in space: zero movement, zero scale */
}

.stars-sm {
  width: 1px;
  height: 1px;
  background: transparent;
  animation: starTwinkleSm 10s ease-in-out infinite;
}

.stars-md {
  width: 2px;
  height: 2px;
  background: transparent;
  animation: starTwinkleMd 14s ease-in-out infinite 3s;
}

.stars-lg {
  width: 3px;
  height: 3px;
  background: transparent;
  animation: starTwinkleLg 8s ease-in-out infinite 1.5s;
}

/* Pure luminescence breathing: zero movement, zero transform scale, 100% still in position */
@keyframes starTwinkleSm {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 0.95; }
}

@keyframes starTwinkleMd {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.9; }
}

@keyframes starTwinkleLg {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stars-sm, .stars-md, .stars-lg {
    animation: none;
    opacity: 0.85;
  }
}

.stars-sm { box-shadow:
    1243px 769px rgba(255, 255, 255, 0.53),
    544px 2290px rgba(255, 255, 255, 0.75),
    1773px 1273px rgba(255, 255, 255, 0.86),
    1130px 1117px rgba(255, 255, 255, 0.59),
    2015px 422px rgba(255, 255, 255, 0.58),
    627px 188px rgba(255, 255, 255, 0.58),
    367px 1415px rgba(255, 255, 255, 0.76),
    2235px 303px rgba(255, 255, 255, 0.86),
    30px 252px rgba(255, 255, 255, 0.63),
    1954px 2263px rgba(255, 255, 255, 0.69),
    1805px 134px rgba(255, 255, 255, 0.79),
    584px 2067px rgba(255, 255, 255, 0.67),
    1690px 1860px rgba(255, 255, 255, 0.50),
    1325px 515px rgba(255, 255, 255, 0.49),
    487px 1431px rgba(255, 255, 255, 0.81),
    177px 808px rgba(255, 255, 255, 0.75),
    1395px 2046px rgba(255, 255, 255, 0.51),
    340px 1346px rgba(255, 255, 255, 0.72),
    414px 2106px rgba(255, 255, 255, 0.66),
    215px 528px rgba(255, 255, 255, 0.52),
    744px 10px rgba(255, 255, 255, 0.50),
    601px 1554px rgba(255, 255, 255, 0.78),
    785px 1359px rgba(255, 255, 255, 0.64),
    2297px 425px rgba(255, 255, 255, 0.73),
    1337px 2152px rgba(255, 255, 255, 0.78),
    1305px 340px rgba(255, 255, 255, 0.52),
    801px 789px rgba(255, 255, 255, 0.61),
    824px 2100px rgba(255, 255, 255, 0.77),
    2375px 471px rgba(255, 255, 255, 0.74),
    1654px 1704px rgba(255, 255, 255, 0.70),
    2061px 1998px rgba(255, 255, 255, 0.86),
    2195px 2353px rgba(255, 255, 255, 0.49),
    658px 1368px rgba(255, 255, 255, 0.68),
    848px 46px rgba(255, 255, 255, 0.72),
    1365px 1784px rgba(255, 255, 255, 0.79),
    811px 383px rgba(255, 255, 255, 0.64),
    184px 1643px rgba(255, 255, 255, 0.45),
    486px 1765px rgba(255, 255, 255, 0.86),
    314px 1748px rgba(255, 255, 255, 0.71),
    671px 191px rgba(255, 255, 255, 0.63),
    156px 496px rgba(255, 255, 255, 0.81),
    2168px 1262px rgba(255, 255, 255, 0.54),
    508px 1089px rgba(255, 255, 255, 0.46),
    976px 977px rgba(255, 255, 255, 0.75),
    2171px 1927px rgba(255, 255, 255, 0.70),
    295px 137px rgba(255, 255, 255, 0.50),
    1146px 1409px rgba(255, 255, 255, 0.79),
    925px 1941px rgba(255, 255, 255, 0.85),
    631px 335px rgba(255, 255, 255, 0.88),
    1266px 2390px rgba(255, 255, 255, 0.60),
    1428px 1906px rgba(255, 255, 255, 0.66),
    2118px 2283px rgba(255, 255, 255, 0.79),
    1936px 2121px rgba(255, 255, 255, 0.74),
    1882px 20px rgba(255, 255, 255, 0.68),
    555px 1781px rgba(255, 255, 255, 0.81),
    1356px 1202px rgba(255, 255, 255, 0.86),
    485px 1685px rgba(255, 255, 255, 0.58),
    1342px 1828px rgba(255, 255, 255, 0.59),
    126px 233px rgba(255, 255, 255, 0.64),
    238px 299px rgba(255, 255, 255, 0.47),
    278px 626px rgba(255, 255, 255, 0.70),
    1246px 2215px rgba(255, 255, 255, 0.64),
    1742px 1264px rgba(255, 255, 255, 0.46),
    365px 1174px rgba(255, 255, 255, 0.81),
    516px 546px rgba(255, 255, 255, 0.51),
    795px 378px rgba(255, 255, 255, 0.67),
    2202px 1672px rgba(255, 255, 255, 0.56),
    936px 627px rgba(255, 255, 255, 0.83),
    399px 643px rgba(255, 255, 255, 0.75),
    1589px 320px rgba(255, 255, 255, 0.53),
    707px 658px rgba(255, 255, 255, 0.79),
    1152px 257px rgba(255, 255, 255, 0.83),
    1525px 118px rgba(255, 255, 255, 0.83),
    427px 1239px rgba(255, 255, 255, 0.53),
    1256px 2222px rgba(255, 255, 255, 0.56),
    212px 1666px rgba(255, 255, 255, 0.67),
    697px 571px rgba(255, 255, 255, 0.59),
    1309px 2337px rgba(255, 255, 255, 0.51),
    649px 764px rgba(255, 255, 255, 0.61),
    2117px 1652px rgba(255, 255, 255, 0.64),
    1912px 1201px rgba(255, 255, 255, 0.78),
    1036px 411px rgba(255, 255, 255, 0.77),
    487px 283px rgba(255, 255, 255, 0.79),
    1266px 1816px rgba(255, 255, 255, 0.59),
    1973px 1209px rgba(255, 255, 255, 0.80),
    1207px 1864px rgba(255, 255, 255, 0.71),
    2369px 2380px rgba(255, 255, 255, 0.51),
    1659px 1357px rgba(255, 255, 255, 0.83),
    77px 2195px rgba(255, 255, 255, 0.51),
    1023px 1095px rgba(255, 255, 255, 0.64),
    696px 1455px rgba(255, 255, 255, 0.51),
    97px 1877px rgba(255, 255, 255, 0.75),
    226px 959px rgba(255, 255, 255, 0.65),
    2083px 2103px rgba(255, 255, 255, 0.86),
    1867px 1508px rgba(255, 255, 255, 0.64),
    580px 174px rgba(255, 255, 255, 0.66),
    1620px 1501px rgba(255, 255, 255, 0.63),
    1187px 1689px rgba(255, 255, 255, 0.75),
    283px 1738px rgba(255, 255, 255, 0.76),
    2306px 249px rgba(255, 255, 255, 0.84),
    1057px 620px rgba(255, 255, 255, 0.74),
    2336px 1453px rgba(255, 255, 255, 0.63),
    2343px 1347px rgba(255, 255, 255, 0.71),
    2078px 1301px rgba(255, 255, 255, 0.72),
    140px 2317px rgba(255, 255, 255, 0.83),
    2330px 594px rgba(255, 255, 255, 0.79),
    48px 1933px rgba(255, 255, 255, 0.79),
    1493px 132px rgba(255, 255, 255, 0.57),
    467px 992px rgba(255, 255, 255, 0.76),
    368px 714px rgba(255, 255, 255, 0.64),
    2197px 296px rgba(255, 255, 255, 0.86),
    2153px 740px rgba(255, 255, 255, 0.71),
    1238px 645px rgba(255, 255, 255, 0.81),
    450px 1011px rgba(255, 255, 255, 0.47),
    790px 438px rgba(255, 255, 255, 0.76),
    858px 2326px rgba(255, 255, 255, 0.53),
    1654px 475px rgba(255, 255, 255, 0.86),
    1777px 686px rgba(255, 255, 255, 0.58),
    2228px 1557px rgba(255, 255, 255, 0.80),
    1607px 1690px rgba(255, 255, 255, 0.78),
    914px 2084px rgba(255, 255, 255, 0.73),
    1148px 1339px rgba(255, 255, 255, 0.83),
    910px 455px rgba(255, 255, 255, 0.81),
    1200px 432px rgba(255, 255, 255, 0.87),
    618px 2270px rgba(255, 255, 255, 0.74),
    164px 2169px rgba(255, 255, 255, 0.61),
    837px 1130px rgba(255, 255, 255, 0.66),
    1238px 151px rgba(255, 255, 255, 0.64),
    2367px 234px rgba(255, 255, 255, 0.73),
    424px 2377px rgba(255, 255, 255, 0.67),
    1208px 382px rgba(255, 255, 255, 0.65),
    921px 48px rgba(255, 255, 255, 0.85),
    561px 2375px rgba(255, 255, 255, 0.56),
    1128px 1163px rgba(255, 255, 255, 0.87),
    1224px 2213px rgba(255, 255, 255, 0.61),
    1847px 1723px rgba(255, 255, 255, 0.88),
    1599px 695px rgba(255, 255, 255, 0.51),
    1477px 127px rgba(255, 255, 255, 0.60),
    84px 1021px rgba(255, 255, 255, 0.86),
    819px 1976px rgba(255, 255, 255, 0.60),
    2281px 1592px rgba(255, 255, 255, 0.46),
    671px 869px rgba(255, 255, 255, 0.61),
    1789px 807px rgba(255, 255, 255, 0.80),
    1834px 6px rgba(255, 255, 255, 0.76),
    1808px 1867px rgba(255, 255, 255, 0.68),
    309px 188px rgba(255, 255, 255, 0.75),
    738px 771px rgba(255, 255, 255, 0.71),
    1694px 2215px rgba(255, 255, 255, 0.75),
    1779px 719px rgba(255, 255, 255, 0.59),
    1991px 2085px rgba(255, 255, 255, 0.88),
    931px 112px rgba(255, 255, 255, 0.46),
    1999px 601px rgba(255, 255, 255, 0.87),
    1395px 2150px rgba(255, 255, 255, 0.48),
    118px 960px rgba(255, 255, 255, 0.85),
    1569px 432px rgba(255, 255, 255, 0.80),
    1948px 1564px rgba(255, 255, 255, 0.52),
    2255px 558px rgba(255, 255, 255, 0.66),
    1089px 813px rgba(255, 255, 255, 0.49),
    1851px 929px rgba(255, 255, 255, 0.66),
    742px 1906px rgba(255, 255, 255, 0.46);
}

.stars-md { box-shadow:
    1159px 2344px rgba(255, 255, 255, 0.85),
    844px 648px rgba(224, 242, 254, 0.72),
    1940px 2379px rgba(224, 242, 254, 0.66),
    2108px 1908px rgba(254, 243, 199, 0.77),
    252px 182px rgba(255, 255, 255, 0.84),
    1052px 1262px rgba(254, 243, 199, 0.70),
    1902px 850px rgba(255, 255, 255, 0.76),
    638px 428px rgba(254, 243, 199, 0.64),
    75px 1389px rgba(255, 255, 255, 0.62),
    2140px 769px rgba(224, 242, 254, 0.69),
    1202px 584px rgba(255, 255, 255, 0.70),
    609px 1960px rgba(255, 255, 255, 0.63),
    2022px 866px rgba(255, 255, 255, 0.81),
    1143px 2252px rgba(224, 242, 254, 0.90),
    1855px 2175px rgba(254, 243, 199, 0.64),
    749px 341px rgba(224, 242, 254, 0.64),
    2063px 2230px rgba(254, 243, 199, 0.78),
    611px 1236px rgba(224, 242, 254, 0.86),
    2320px 794px rgba(254, 243, 199, 0.77),
    760px 2120px rgba(224, 242, 254, 0.92),
    879px 740px rgba(224, 242, 254, 0.84),
    1136px 1424px rgba(255, 255, 255, 0.73),
    1235px 1121px rgba(224, 242, 254, 0.85),
    1857px 2289px rgba(224, 242, 254, 0.80),
    1196px 1433px rgba(255, 255, 255, 0.75),
    288px 833px rgba(255, 255, 255, 0.80),
    347px 283px rgba(224, 242, 254, 0.64),
    1700px 19px rgba(224, 242, 254, 0.72),
    1918px 456px rgba(224, 242, 254, 0.67),
    348px 1121px rgba(224, 242, 254, 0.93),
    1849px 1183px rgba(254, 243, 199, 0.88),
    526px 1590px rgba(254, 243, 199, 0.68),
    1060px 1603px rgba(254, 243, 199, 0.85),
    843px 1724px rgba(254, 243, 199, 0.75),
    112px 1036px rgba(255, 255, 255, 0.71),
    1683px 930px rgba(254, 243, 199, 0.65),
    281px 844px rgba(255, 255, 255, 0.92),
    2276px 392px rgba(255, 255, 255, 0.65),
    1417px 701px rgba(224, 242, 254, 0.90),
    1763px 141px rgba(224, 242, 254, 0.91),
    1418px 1259px rgba(255, 255, 255, 0.74),
    1862px 117px rgba(254, 243, 199, 0.78),
    2090px 1216px rgba(255, 255, 255, 0.63),
    1537px 438px rgba(255, 255, 255, 0.85),
    2219px 777px rgba(255, 255, 255, 0.89),
    461px 868px rgba(255, 255, 255, 0.64),
    1834px 1928px rgba(224, 242, 254, 0.87),
    1686px 1881px rgba(254, 243, 199, 0.75),
    877px 699px rgba(224, 242, 254, 0.83),
    1509px 129px rgba(255, 255, 255, 0.68),
    1865px 230px rgba(224, 242, 254, 0.95),
    137px 2307px rgba(255, 255, 255, 0.74),
    2162px 1441px rgba(224, 242, 254, 0.87),
    1955px 2224px rgba(255, 255, 255, 0.67),
    2242px 93px rgba(255, 255, 255, 0.95),
    592px 264px rgba(224, 242, 254, 0.62),
    1156px 2262px rgba(254, 243, 199, 0.84),
    1591px 457px rgba(255, 255, 255, 0.64),
    801px 598px rgba(254, 243, 199, 0.86),
    1068px 1944px rgba(254, 243, 199, 0.65),
    2184px 199px rgba(254, 243, 199, 0.74),
    1987px 1643px rgba(254, 243, 199, 0.78),
    891px 471px rgba(224, 242, 254, 0.68),
    822px 918px rgba(224, 242, 254, 0.79),
    951px 200px rgba(255, 255, 255, 0.61),
    2225px 1842px rgba(224, 242, 254, 0.81),
    1504px 1815px rgba(224, 242, 254, 0.67),
    1692px 267px rgba(254, 243, 199, 0.93),
    1870px 458px rgba(254, 243, 199, 0.93),
    1031px 2090px rgba(255, 255, 255, 0.62),
    1012px 1046px rgba(224, 242, 254, 0.92),
    1427px 318px rgba(254, 243, 199, 0.92),
    1002px 943px rgba(254, 243, 199, 0.86),
    509px 1736px rgba(224, 242, 254, 0.82),
    94px 622px rgba(255, 255, 255, 0.67),
    618px 2373px rgba(224, 242, 254, 0.94),
    1784px 1537px rgba(254, 243, 199, 0.87),
    1873px 571px rgba(224, 242, 254, 0.75),
    1478px 782px rgba(254, 243, 199, 0.73),
    1636px 2049px rgba(254, 243, 199, 0.94);
}

.stars-lg { box-shadow:
    1163px 1765px 0 1px rgba(255, 255, 255, 0.91),
    671px 383px 0 1px rgba(255, 255, 255, 0.77),
    1574px 1528px 0 1px rgba(255, 255, 255, 0.92),
    72px 1402px 0 1px rgba(255, 255, 255, 0.98),
    1963px 1003px 0 1px rgba(255, 255, 255, 0.80),
    1050px 1332px 0 1px rgba(255, 255, 255, 0.97),
    731px 988px 0 1px rgba(255, 255, 255, 0.86),
    2006px 973px 0 1px rgba(255, 255, 255, 0.82),
    1075px 2285px 0 1px rgba(255, 255, 255, 0.95),
    1340px 1125px 0 1px rgba(255, 255, 255, 0.86),
    1398px 893px 0 1px rgba(255, 255, 255, 0.90),
    2251px 189px 0 1px rgba(255, 255, 255, 0.93),
    99px 12px 0 1px rgba(255, 255, 255, 0.79),
    740px 1363px 0 1px rgba(255, 255, 255, 0.85),
    377px 442px 0 1px rgba(255, 255, 255, 0.96),
    8px 649px 0 1px rgba(255, 255, 255, 0.97),
    633px 583px 0 1px rgba(255, 255, 255, 0.99),
    852px 1245px 0 1px rgba(255, 255, 255, 0.86),
    1666px 1235px 0 1px rgba(255, 255, 255, 0.95),
    1675px 1553px 0 1px rgba(255, 255, 255, 0.87),
    1878px 799px 0 1px rgba(255, 255, 255, 0.95),
    875px 2372px 0 1px rgba(255, 255, 255, 0.81),
    2067px 73px 0 1px rgba(255, 255, 255, 0.80),
    1654px 2102px 0 1px rgba(255, 255, 255, 0.78),
    634px 2259px 0 1px rgba(255, 255, 255, 0.85);
}

/* -----------------------------------------------------------------------
   2. RESET & BASE TYPOGRAPHY
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font-sans);
  font-size: 18px;
  background: var(--color-void);
  color: var(--color-text-primary);
  line-height: 1.85;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 2rem);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  background-color: var(--color-void);
  color: var(--color-text-primary);
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] body,
body:not([data-theme]) {
  background-image:
    radial-gradient(ellipse at 15% 10%, rgba(var(--theme-accent-rgb), 0.04), transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(var(--theme-accent-sec-rgb), 0.03), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.015), transparent 60%);
  background-attachment: fixed;
}

[data-theme="light"] body {
  background-color: #ffffff;
  background-image:
    radial-gradient(ellipse at 12% 8%, rgba(var(--theme-accent-rgb), 0.035), transparent 45%),
    radial-gradient(ellipse at 88% 92%, rgba(var(--theme-accent-sec-rgb), 0.025), transparent 45%);
  background-attachment: fixed;
}

a { color: var(--accent-teal); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-gold); }

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 { font-size: 2.4rem; font-weight: 800; margin-bottom: 0.6em; }
h2 { font-size: 1.65rem; font-weight: 700; margin-bottom: 0.5em; margin-top: 0.4em; }
h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.4em; margin-top: 1.5em; color: var(--accent-gold); }

p { margin-bottom: 1.15em; }

blockquote {
  border-left: 3px solid var(--theme-accent-primary);
  padding: 0.8em 1.2em;
  margin: 1.5em 0;
  background: rgba(var(--theme-accent-rgb), 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text-primary);
  font-style: italic;
}

strong { color: var(--color-text-primary); font-weight: 700; }
em { color: var(--theme-accent-primary); font-style: italic; }
mark { background: rgba(var(--theme-accent-rgb), 0.2); color: var(--theme-accent-primary); padding: 0.1em 0.3em; border-radius: 3px; }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: rgba(129, 140, 248, 0.1);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: var(--accent-indigo);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.92rem;
}
th, td {
  padding: 0.7em 1em;
  border: 1px solid var(--color-card-border);
  text-align: left;
}
th {
  background: var(--color-surface-card);
  color: var(--accent-gold);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
td { background: var(--color-surface); }

hr {
  border: none;
  border-top: 1px solid var(--color-card-border);
  margin: 3em 0;
}

/* -----------------------------------------------------------------------
   3. READING PROGRESS BAR
   ----------------------------------------------------------------------- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--grad-cosmos);
  z-index: 1000;
  transition: width 0.1s linear;
}

/* -----------------------------------------------------------------------
   4. HEADER & BRAND
   ----------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 3px;
  left: 0;
  right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  z-index: 900;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-card-border);
  transition: background var(--t-normal);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
}

.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px var(--theme-accent-glow, rgba(163, 230, 53, 0.45)));
  transition: transform var(--t-normal), filter var(--t-normal);
}
.brand-link:hover .brand-logo {
  transform: rotate(12deg) scale(1.08);
  filter: drop-shadow(0 0 18px var(--theme-accent-primary, #a3e635));
}

.brand-glyph {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad-cosmos);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.brand-glyph::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-void);
  position: absolute;
}

.brand-text { display: flex; flex-direction: column; }
.brand-title {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-subtitle {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--accent-gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.8;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.header-nav a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  transition: all var(--t-fast);
}
.header-nav a:hover {
  color: var(--theme-accent-primary);
  border-color: var(--theme-accent-primary);
  background: rgba(var(--theme-accent-rgb), 0.08);
}

/* Sidebar Toggle Button & Hamburger (Mobile / Tablet) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4.5px;
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-text-primary);
  transition: all var(--t-fast);
  position: relative;
  flex-shrink: 0;
}
.hamburger:hover {
  border-color: var(--theme-accent-primary);
  color: var(--theme-accent-primary);
  background: var(--color-surface-hover);
  box-shadow: 0 0 14px var(--theme-accent-glow);
}
.hamburger:active {
  transform: scale(0.94);
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, width 0.2s ease;
  transform-origin: center;
}
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* -----------------------------------------------------------------------
   5. LAYOUT GRID: SIDEBAR + CONTENT
   ----------------------------------------------------------------------- */
.page-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
  padding-top: calc(var(--header-height) + 3px);
}

/* -----------------------------------------------------------------------
   6. SIDEBAR TABLE OF CONTENTS
   ----------------------------------------------------------------------- */
.sidebar-toc {
  position: fixed;
  top: calc(var(--header-height) + 3px);
  left: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height) - 3px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 100;
  pointer-events: auto;
  padding: 1.5rem 1rem 1.5rem 1.25rem;
  border-right: 1px solid var(--color-card-border);
  background: var(--sidebar-bg);
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-hover) transparent;
}

/* Mobile Sidebar Header & Close Button */
.sidebar-mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 0 1rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-card-border);
}
.sidebar-mobile-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}
.sidebar-mini-logo {
  border-radius: 50%;
  filter: drop-shadow(0 0 6px var(--theme-accent-glow));
}
.sidebar-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--t-fast);
  padding: 0;
}
.sidebar-close-btn:hover {
  color: var(--theme-accent-primary);
  border-color: var(--theme-accent-primary);
  background: var(--color-surface-hover);
  box-shadow: 0 0 10px var(--theme-accent-glow);
}
.sidebar-close-btn:active {
  transform: scale(0.92);
}

.toc-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
  display: block;
}

.toc-nav { display: flex; flex-direction: column; gap: 2px; }

.toc-link {
  display: block;
  padding: 0.35em 0.7em;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--t-fast);
  border-left: 2px solid transparent;
  line-height: 1.35;
}
.toc-link:hover {
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-left-color: var(--color-text-muted);
}
.toc-link.active {
  color: var(--theme-accent-primary);
  background: rgba(var(--theme-accent-rgb), 0.1);
  border-left-color: var(--theme-accent-primary);
  font-weight: 600;
}

/* Mobile overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 800;
}

/* -----------------------------------------------------------------------
   7. CONTENT COLUMN
   ----------------------------------------------------------------------- */
.content-column {
  grid-column: 2;
  padding: 3rem 2.5rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.content-inner {
  max-width: var(--content-max);
  width: 100%;
}

/* Hero Section */
.hero-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4.5rem 1.5rem 3.5rem;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
  overflow: hidden;
}
.hero-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, rgba(245, 158, 11, 0.05) 45%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: blur(40px);
  z-index: 0;
  will-change: transform, opacity;
}
.hero-section h1 {
  position: relative;
  z-index: 1;
  font-size: 3.2rem;
  background: var(--grad-cosmos);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.4em;
  letter-spacing: -0.02em;
}
.hero-byline {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--accent-gold);
  letter-spacing: 0.08em;
  margin-bottom: 1.2em;
}
.hero-manuscript-note {
  position: relative;
  z-index: 1;
  font-family: var(--font-handwriting);
  font-size: 1.45rem;
  color: var(--accent-handwriting);
  max-width: 620px;
  margin: 0 auto 1.8rem;
  line-height: 1.4;
}
.hero-scroll-cue {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-subtle);
  background: rgba(14, 22, 38, 0.6);
}
.hero-scroll-cue .cue-arrow {
  color: var(--accent-amber);
  animation: float-up 2s ease-in-out infinite;
}

/* Disclaimer Banner */
.disclaimer-banner {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-left: 3px solid var(--accent-gold);
  border-radius: var(--radius-md);
  padding: 1.2em 1.5em;
  margin: 1.5em 0 3em;
  font-size: 0.92rem;
}
.disclaimer-banner .disclaimer-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 0.5em;
}
.disclaimer-banner p {
  color: var(--color-text-secondary);
  font-style: italic;
  margin-bottom: 0.5em;
}
.disclaimer-banner .disclaimer-author {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* Part Articles */
.part-article {
  margin-bottom: 4rem;
  scroll-margin-top: calc(var(--header-height) + 2rem);
}

.part-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-teal);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 0.6em;
}

.lead-quote {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  padding: 0.8em 0;
  margin: 1em 0;
}

/* -----------------------------------------------------------------------
   8. SVG DIAGRAM CONTAINERS & ANIMATIONS
   ----------------------------------------------------------------------- */
.diagram-figure {
  margin: 2em 0;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.diagram-header {
  padding: 0.8em 1.2em;
  border-bottom: 1px solid var(--color-card-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
}
.diagram-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.diagram-caption {
  font-size: 0.85rem;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.4;
}
.diagram-figure svg,
.diagram-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.diagram-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: #040608;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.diagram-figure:hover .diagram-img {
  transform: scale(1.008);
}

/* SVG Animation Keyframes */
@keyframes wave-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.18); }
}
@keyframes particle-pop {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(0.3); }
}
@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes draw-line {
  from { stroke-dashoffset: 600; }
  to { stroke-dashoffset: 0; }
}
@keyframes float-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes flow-right {
  0% { stroke-dashoffset: 40; }
  100% { stroke-dashoffset: 0; }
}
@keyframes fade-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@keyframes snap-flash {
  0% { opacity: 0; transform: scale(0.2); }
  35% { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(2.2); }
}

.svg-animate-wave {
  animation: wave-drift 4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.svg-animate-pulse {
  animation: pulse-glow 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.svg-animate-pop {
  animation: particle-pop 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.svg-animate-ring {
  animation: ring-rotate 35s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.svg-animate-draw {
  animation: draw-line 2s var(--ease-out) forwards;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.svg-animate-float {
  animation: float-up 3.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.svg-animate-orbit {
  animation: orbit 20s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.svg-animate-flow {
  animation: flow-right 1.6s linear infinite;
}
.svg-animate-fade {
  animation: fade-pulse 3s ease-in-out infinite;
}

/* -----------------------------------------------------------------------
   9. EVIDENCE CARDS (Expandable)
   ----------------------------------------------------------------------- */
.evidence-card {
  margin: 1.5em 0;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.evidence-card:hover { border-color: rgba(var(--theme-accent-rgb), 0.35); }

.evidence-card summary {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 1em 1.3em;
  cursor: pointer;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  transition: background var(--t-fast);
}
.evidence-card summary::-webkit-details-marker { display: none; }
.evidence-card summary::before {
  content: '▸';
  color: var(--accent-gold);
  font-size: 0.8em;
  transition: transform var(--t-fast);
}
.evidence-card[open] summary::before { transform: rotate(90deg); }
.evidence-card summary:hover { background: var(--color-surface-hover); }

.evidence-icon { font-size: 1.1rem; }
.evidence-title { flex: 1; }
.evidence-status {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.evidence-status.verified {
  background: rgba(52, 211, 153, 0.12);
  color: var(--accent-sage);
  border: 1px solid rgba(52, 211, 153, 0.25);
}
.evidence-status.theoretical {
  background: rgba(129, 140, 248, 0.12);
  color: var(--accent-indigo);
  border: 1px solid rgba(129, 140, 248, 0.25);
}

.evidence-body {
  padding: 0 1.3em 1.2em;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  border-top: 1px solid var(--color-card-border);
}
.evidence-body p { margin-top: 0.8em; }
.evidence-body a {
  color: var(--accent-gold);
  font-weight: 600;
}

/* -----------------------------------------------------------------------
   10. GLOSSARY TOOLTIPS
   ----------------------------------------------------------------------- */
dfn {
  cursor: help;
  border-bottom: 1px dashed var(--accent-gold);
  font-style: normal;
  position: relative;
  color: var(--color-text-primary);
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-gold);
  max-width: 320px;
  min-width: 200px;
  font-size: 0.82rem;
  line-height: 1.5;
  z-index: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  white-space: normal;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--accent-gold);
}

dfn:hover .tooltip,
dfn.tooltip-active .tooltip {
  opacity: 1;
}

/* -----------------------------------------------------------------------
   11. CHAIN FLOWCHART (Part 11)
   ----------------------------------------------------------------------- */
.chain-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 2em 0;
}
.chain-step {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.7em 1em;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  margin-bottom: -1px;
  transition: background var(--t-fast);
}
.chain-step:hover { background: var(--color-surface-hover); }
.chain-step:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.chain-step:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }

.step-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--theme-accent-primary);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--theme-accent-rgb), 0.12);
  border-radius: 50%;
  flex-shrink: 0;
}
.step-title {
  font-size: 0.9rem;
  color: var(--color-text-primary);
}
.chain-arrow {
  text-align: center;
  color: var(--accent-gold);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.2em;
}

/* -----------------------------------------------------------------------
   COSMIC FLOWCHART (.cosmic-flowchart)
   ----------------------------------------------------------------------- */
.cosmic-flowchart {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 2.5rem 0 3.5rem 0;
  position: relative;
}

.flowchart-step-node {
  position: relative;
  z-index: 1;
}

.flowchart-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  transition: transform var(--t-normal), border-color var(--t-normal), box-shadow var(--t-normal);
  position: relative;
  overflow: hidden;
}

.flowchart-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--theme-accent-primary), var(--theme-accent-secondary));
  opacity: 0.8;
}

.flowchart-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--theme-accent-rgb), 0.45);
  box-shadow: 0 8px 32px rgba(var(--theme-accent-rgb), 0.14);
}

.flowchart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.flowchart-meta-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.flowchart-step-badge {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--theme-accent-primary);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--theme-accent-rgb), 0.12);
  border: 1.5px solid var(--theme-accent-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

.flowchart-cat-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  background: rgba(var(--theme-accent-rgb), 0.08);
  color: var(--theme-accent-primary);
  border: 1px solid rgba(var(--theme-accent-rgb), 0.25);
}

.flowchart-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 0.85rem 0;
  line-height: 1.35;
}

.flowchart-formula {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.25rem;
  margin: 0.85rem 0 1rem 0;
  overflow-x: auto;
  text-align: center;
}

.flowchart-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-primary);
  margin: 0 0 1rem 0;
}

.flowchart-marginalia {
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--accent-gold);
  line-height: 1.45;
  padding: 0.6rem 0.9rem;
  border-left: 2px solid var(--accent-gold);
  background: rgba(212, 168, 83, 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.flowchart-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.85rem 0;
  color: var(--theme-accent-primary);
}

.flowchart-arrow svg {
  transition: transform var(--t-fast);
  filter: drop-shadow(0 2px 8px rgba(var(--theme-accent-rgb), 0.4));
}

.flowchart-step-node:hover + .flowchart-arrow svg {
  transform: translateY(3px);
}

.flowchart-loop-vector {
  margin-top: 1.5rem;
  border: 2px dashed rgba(var(--theme-accent-rgb), 0.5);
  border-radius: var(--radius-md);
  padding: 2.2rem;
  background: radial-gradient(circle at top center, rgba(var(--theme-accent-rgb), 0.12), transparent 70%), var(--color-surface-card);
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.loop-vector-icon {
  margin-bottom: 0.75rem;
  color: var(--theme-accent-primary);
  display: inline-flex;
  animation: spinSlow 20s linear infinite;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loop-vector-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--theme-accent-primary);
  margin: 0 0 0.5rem 0;
}

.loop-vector-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-primary);
  max-width: 640px;
  margin: 0 auto 1.25rem auto;
}

.loop-vector-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  background: rgba(var(--theme-accent-rgb), 0.15);
  border: 1.5px solid var(--theme-accent-primary);
  border-radius: 100px;
  color: var(--theme-accent-primary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--t-fast);
}

.loop-vector-btn:hover {
  background: var(--theme-accent-primary);
  color: var(--color-void);
  box-shadow: 0 0 20px rgba(var(--theme-accent-rgb), 0.4);
  transform: translateY(-2px);
}

.flowchart-summary-card {
  margin-top: 2.5rem;
  padding: 1.8rem 2rem;
  background: var(--color-surface-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* -----------------------------------------------------------------------
   12. AUTHOR CARD
   ----------------------------------------------------------------------- */
.author-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--color-card-border);
}
.author-card,
.author-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 1.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  margin-top: 1.5rem;
}
.author-header {
  display: flex;
  align-items: center;
  gap: 1.2em;
  margin-bottom: 1.5em;
}
.author-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--theme-accent-primary);
  box-shadow: 0 0 20px rgba(var(--theme-accent-rgb), 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  margin-bottom: 1.2rem;
  background: var(--color-surface-hover);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.author-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 0 28px rgba(var(--theme-accent-rgb), 0.6);
}

.author-avatar-img,
.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 50%;
  display: block;
}
.author-titles h2 {
  font-size: 1.3rem;
  margin-bottom: 0;
}
.author-titles p {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0;
}
.author-bio p {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}
.author-principles {
  list-style: none;
  padding: 0;
  margin: 1em 0;
}
.author-principles li {
  padding: 0.3em 0;
  color: var(--color-text-primary);
  font-weight: 600;
}
.author-principles li::before {
  content: '✦ ';
  color: var(--accent-gold);
}

.social-grid {
  display: flex;
  gap: 0.8em;
  flex-wrap: wrap;
  margin-top: 1.5em;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  background: var(--color-surface-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  transition: all var(--t-fast);
}
.social-btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* -----------------------------------------------------------------------
   13. FOOTER
   ----------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-card-border);
  padding: 3rem 2rem;
  text-align: center;
  background: var(--color-surface);
}
@media (min-width: 1024px) {
  .site-footer {
    margin-left: var(--sidebar-width);
  }
}
.footer-disclaimer {
  max-width: 640px;
  margin: 0 auto 1.5em;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.footer-quote {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 1.5em;
  font-style: italic;
}
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4em 1.5em;
  margin-bottom: 1.5em;
}
.footer-links a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.footer-links a:hover { color: var(--accent-gold); }

.footer-copy {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------
   14. SCROLL FADE-IN ANIMATIONS
   ----------------------------------------------------------------------- */
.part-article {
  opacity: 1 !important;
  transform: none !important;
}
.fade-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

/* -----------------------------------------------------------------------
   15. MOBILE RESPONSIVE (< 1024px, < 768px, < 480px)
   ----------------------------------------------------------------------- */
@media (max-width: 1023px) {
  html { font-size: 16px; }

  .hamburger { display: flex; }
  .header-nav a.desktop-only { display: none; }

  .page-layout {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .sidebar-toc {
    position: fixed;
    top: 0;
    left: -320px;
    width: min(300px, 85vw);
    height: 100vh;
    height: 100dvh;
    z-index: 850;
    background: var(--color-void);
    border-right: 1px solid var(--color-card-border);
    transition: left var(--t-normal);
    padding-top: calc(var(--header-height) + 1.25rem);
    padding-bottom: 4rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-toc.open {
    left: 0;
  }
  .sidebar-overlay.open {
    display: block;
  }

  .content-column {
    grid-column: 1;
    padding: 2.5rem 1.5rem 4rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .content-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero-section {
    min-height: auto;
    padding: 3.5rem 1.25rem 2.5rem;
    margin-bottom: 2.5rem;
  }
  .hero-section h1 {
    font-size: clamp(2rem, 6vw, 2.8rem);
    line-height: 1.16;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  h2 { font-size: 1.35rem; }

  .diagram-figure {
    margin: 1.8em 0;
    border-radius: var(--radius-md);
  }
  .diagram-figure svg,
  .diagram-figure img {
    width: 100%;
    height: auto;
    display: block;
  }

  .author-header { flex-direction: column; text-align: center; }
  .social-grid { justify-content: center; }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.82rem;
  }
  th, td { padding: 0.5em 0.6em; }
}

@media (max-width: 768px) {
  .site-header {
    padding: 0 1rem;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .brand-link {
    gap: 10px;
    min-width: 0;
    flex-shrink: 1;
  }
  .brand-logo {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }
  .brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .brand-title {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand-subtitle {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .accent-switcher {
    display: none;
  }
  .header-nav {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
  }

  .content-column {
    padding: 1.8rem 1rem 3.5rem;
  }

  /* Full-viewport, structured entrance splash screen for mobile users */
  .hero-section {
    min-height: calc(100dvh - var(--header-height) - 10px);
    min-height: calc(100vh - var(--header-height) - 10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2.2rem 1rem 1.8rem;
    margin-bottom: 2rem;
    box-sizing: border-box;
    position: relative;
  }
  .hero-section h1 {
    font-size: clamp(1.85rem, 7.2vw, 2.45rem);
    line-height: 1.15;
    margin-bottom: 0.5rem;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .hero-byline {
    font-size: 0.9rem;
    margin-bottom: 0.9rem;
  }
  .hero-manuscript-note {
    font-size: 1.2rem;
    line-height: 1.45;
    max-width: 380px;
    margin: 0 auto 1.2rem;
    padding: 0 0.5rem;
  }
  .hero-halo {
    width: 280px;
    height: 280px;
  }

  /* Remove entrance buttons on mobile as requested */
  .hero-journey-selector {
    display: none !important;
  }

  .hero-scroll-cue {
    margin-top: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-card-border);
    color: var(--color-text-secondary);
  }

  .chapter-gateway {
    min-height: auto;
    padding: 1.6rem 1.15rem 1.35rem;
    margin: 1.6rem 0;
    border-radius: var(--radius-md);
  }
  .gateway-title {
    font-size: clamp(1.4rem, 5.2vw, 1.85rem);
    line-height: 1.2;
  }
  .gateway-topic {
    font-size: 1.05rem;
  }
  .gateway-marginalia {
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .diagram-header {
    padding: 0.75rem 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .diagram-tag {
    font-size: 0.72rem;
  }
  .diagram-caption {
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .author-card,
  .author-card-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.8rem 1.2rem;
  }
  .author-bio {
    text-align: center;
  }
  .social-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  html { font-size: 15px; }
  .site-header {
    padding: 0 0.75rem;
    height: 58px;
  }
  .content-column { padding: 1rem 0.65rem 3rem; }

  .brand-logo { width: 32px; height: 32px; }
  .brand-title {
    font-size: 0.78rem;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand-subtitle { display: none; }

  /* Full-viewport structured mobile entrance splash screen */
  .hero-section {
    min-height: calc(100dvh - 58px - 8px);
    min-height: calc(100vh - 58px - 8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.8rem 0.5rem 1.6rem;
    margin-bottom: 1.6rem;
    box-sizing: border-box;
    position: relative;
  }
  .hero-section h1 {
    font-size: clamp(1.68rem, 8.2vw, 2.2rem);
    line-height: 1.14;
    margin-bottom: 0.45rem;
  }
  .hero-byline {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
  }
  .hero-manuscript-note {
    font-size: 1.15rem;
    line-height: 1.4;
    padding: 0 0.35rem;
    max-width: 320px;
    margin: 0 auto 1.1rem;
  }
  .hero-halo {
    width: 220px;
    height: 220px;
  }

  /* Remove entrance buttons on mobile phones as requested */
  .hero-journey-selector {
    display: none !important;
  }

  .hero-scroll-cue {
    margin-top: 1.25rem;
    font-size: 0.74rem;
    padding: 0.5rem 1rem;
  }

  .chapter-gateway {
    padding: 1.25rem 0.85rem 1.1rem;
    margin: 1.3rem 0;
  }
  .gateway-badge {
    padding: 0.25rem 0.65rem;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
  }
  .gateway-part { font-size: 0.68rem; }
  .gateway-topic { font-size: 0.95rem; }
  .gateway-title { font-size: 1.35rem; }
  .gateway-marginalia { font-size: 0.95rem; line-height: 1.4; }

  .evidence-card summary { font-size: 0.85rem; padding: 0.75em 0.85em; gap: 0.45em; }
  .evidence-status { display: none; }
  .evidence-body { padding: 0 0.85em 0.95em; font-size: 0.85rem; }

  .flowchart-card { padding: 1.15rem 0.85rem; }
  .flowchart-title { font-size: 1.05rem; }
  .flowchart-step-badge { width: 30px; height: 30px; font-size: 0.75rem; }
  .flowchart-cat-badge { font-size: 0.65rem; padding: 0.2rem 0.5rem; }
  .flowchart-formula { padding: 0.5rem 0.6rem; font-size: 0.8rem; }
  .flowchart-marginalia { font-size: 0.95rem; padding: 0.45rem 0.65rem; }
  .flowchart-desc { font-size: 0.88rem; }
  .flowchart-loop-vector { padding: 1.2rem 0.8rem; }

  .equation-box {
    padding: 0.85em 0.75em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .equation-math { font-size: 0.85rem; }

  .diagram-header { padding: 0.6rem 0.85rem; }
  .diagram-tag { font-size: 0.68rem; }
  .diagram-caption { font-size: 0.78rem; }

  .author-card,
  .author-card-inner {
    padding: 1.4rem 0.85rem;
    gap: 1rem;
  }
  .author-avatar { width: 64px; height: 64px; margin-bottom: 0.8rem; }
  .author-bio p { font-size: 0.88rem; }
  .author-disclaimer-banner { padding: 0.95rem 0.85rem !important; }
  .reader-invite-card { padding: 0.95rem 0.85rem !important; }
  .social-chip { font-size: 0.78rem !important; padding: 0.35rem 0.65rem !important; }

  .site-footer { padding: 2rem 0.85rem; }
  .footer-links { gap: 0.5rem 1rem; font-size: 0.82rem; }

  .tooltip {
    max-width: calc(100vw - 28px);
    min-width: 0;
    left: 14px !important;
    right: 14px !important;
    transform: none !important;
  }
}

/* -----------------------------------------------------------------------
   16. PRINT STYLES
   ----------------------------------------------------------------------- */
@media print {
  .site-header, .sidebar-toc, .reading-progress, .hamburger,
  .sidebar-overlay, .evidence-card summary::before { display: none !important; }

  body { background: white; color: #111; }
  .page-layout { grid-template-columns: 1fr; }
  .content-column { padding: 0; }

  h1, h2, h3 { color: #111; }
  a { color: #111; text-decoration: underline; }
  blockquote { border-left-color: #666; }

  .diagram-figure { break-inside: avoid; border: 1px solid #ccc; }
  .evidence-card { border: 1px solid #ccc; }
  .evidence-card[open] .evidence-body { display: block; }

  .site-footer { border-top: 1px solid #ccc; }
}

/* -----------------------------------------------------------------------
   17. PROOFS PAGE OVERRIDES
   ----------------------------------------------------------------------- */
.proofs-page .proof-card {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  padding: 2em;
  margin-bottom: 3em;
  scroll-margin-top: calc(var(--header-height) + 2rem);
}
.proofs-page .proof-card-header {
  margin-bottom: 1.5em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--color-card-border);
}
.proofs-page .proof-id-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent-teal);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.5em;
}
.proofs-page .proof-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 2em;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin-top: 0.6em;
}
.proofs-page .proof-body h3 {
  color: var(--accent-gold);
  margin-top: 1.8em;
}
.proofs-page .proof-body p {
  color: var(--color-text-secondary);
  font-size: 0.92rem;
}
.proofs-page .proof-hero-header {
  text-align: center;
  padding: 2rem 0 3rem;
  margin-bottom: 2rem;
}
.proofs-page .proof-hero-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5em;
}
.proofs-page .proof-lead {
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0 auto;
  font-size: 0.95rem;
}

/* Equation boxes */
.equation-box {
  background: var(--color-surface-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  padding: 1.2em 1.5em;
  margin: 1.5em 0;
  text-align: center;
}
.equation-box.highlight {
  border-color: rgba(var(--theme-accent-rgb), 0.4);
  background: rgba(var(--theme-accent-rgb), 0.05);
}
.equation-math {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--theme-accent-primary);
  font-weight: 600;
  margin-bottom: 0.4em;
  letter-spacing: 0.02em;
}
.equation-caption {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* KaTeX Theme and Typography integration */
.katex {
  font-size: 1.15em;
  text-rendering: auto;
  letter-spacing: normal !important;
  font-weight: normal;
}
.equation-math .katex {
  color: var(--theme-accent-primary);
}
[data-theme="light"] .equation-math .katex {
  color: var(--theme-accent-primary);
}
.katex-display {
  margin: 0.5em 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25em 0;
}

/* Citation card */
.citation-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  padding: 1.2em 1.5em;
  margin: 1.8em 0;
  font-size: 0.85rem;
}
.citation-card strong {
  display: block;
  font-family: var(--font-mono);
  color: var(--accent-teal);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6em;
}
.citation-card ul {
  padding-left: 1.2em;
  color: var(--color-text-secondary);
}
.citation-card li {
  margin-bottom: 0.5em;
}

/* Proof card footer & return link */
.proof-card-footer {
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: 1px solid var(--color-card-border);
}
.proof-return-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-teal);
}
.proof-return-link:hover {
  color: var(--accent-gold);
}

/* Budget grid */
.budget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1em;
  margin: 1.5em 0;
}
.budget-item {
  padding: 1.2em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-card-border);
  background: var(--color-surface-card);
}
.budget-item.violet { border-color: rgba(129, 140, 248, 0.3); background: rgba(129, 140, 248, 0.06); }
.budget-item.cyan { border-color: rgba(45, 212, 191, 0.3); background: rgba(45, 212, 191, 0.06); }
.budget-item.amber { border-color: rgba(var(--theme-accent-rgb), 0.3); background: rgba(var(--theme-accent-rgb), 0.06); }

.budget-pct {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.budget-item.violet .budget-pct { color: var(--accent-indigo); }
.budget-item.cyan .budget-pct { color: var(--theme-accent-secondary); }
.budget-item.amber .budget-pct { color: var(--theme-accent-primary); }

.budget-name {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0.4em 0 0.5em;
  color: var(--color-text-primary);
}
.budget-desc {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}


/* -----------------------------------------------------------------------
   18. AUTHOR INVITE & THOUGHT-SHARING BOX
   ----------------------------------------------------------------------- */
.author-invite-box {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.1) 0%, rgba(var(--theme-accent-sec-rgb), 0.08) 100%);
  border: 1px solid rgba(var(--theme-accent-rgb), 0.35);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 1.8rem 0 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.author-invite-box .invite-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 0.2rem;
  filter: drop-shadow(0 0 12px rgba(var(--theme-accent-rgb), 0.6));
}
.author-invite-box .invite-text {
  flex: 1;
}
.author-invite-box .invite-heading {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--theme-accent-primary);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}
.author-invite-box p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-primary);
}
.author-invite-box strong {
  color: var(--theme-accent-secondary);
}
.footer-invite {
  margin: 1rem auto 1.5rem;
  text-align: center;
  max-width: 600px;
  font-size: 0.88rem;
  color: var(--theme-accent-primary);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  background: rgba(var(--theme-accent-rgb), 0.06);
  border: 1px dashed rgba(var(--theme-accent-rgb), 0.25);
}

/* -----------------------------------------------------------------------
   19. MANUSCRIPT HANDWRITING & CHAPTER GATEWAYS
   ----------------------------------------------------------------------- */
.font-caveat, .handwriting {
  font-family: var(--font-handwriting);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.brand-hand {
  font-family: var(--font-handwriting);
  font-size: 1.15rem;
  color: var(--accent-handwriting);
  font-weight: 700;
  margin-left: 0.25rem;
  letter-spacing: 0.03em;
}

.marginalia {
  font-family: var(--font-handwriting);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--accent-handwriting);
  margin: 1.2rem 0;
  padding: 0.75rem 1.25rem;
  border-left: 3px dashed rgba(var(--theme-accent-rgb), 0.45);
  background: rgba(var(--theme-accent-rgb), 0.04);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: normal;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 20px rgba(var(--theme-accent-rgb), 0.02);
}

.journal-timestamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-right: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Sleek & Immersive Chapter Gateway Banners */
.chapter-gateway {
  position: relative;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 2.6rem 2.8rem 2.2rem;
  margin: 3rem 0 2rem;
  background: radial-gradient(ellipse at 50% 15%, rgba(var(--theme-accent-rgb), 0.12) 0%, rgba(14, 20, 32, 0.85) 60%, transparent 100%),
              linear-gradient(180deg, #0e1420 0%, #040608 100%);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(245, 238, 220, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.gateway-aura {
  position: absolute;
  top: -40%;
  left: -20%;
  width: 140%;
  height: 180%;
  background: radial-gradient(circle at 30% 30%, rgba(245, 158, 11, 0.1), transparent 50%),
              radial-gradient(circle at 70% 60%, rgba(56, 189, 248, 0.1), transparent 50%);
  pointer-events: none;
  z-index: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.gateway-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.gateway-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  margin-bottom: 1.2rem;
}

.gateway-part {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-amber);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gateway-sep {
  color: var(--accent-gold);
  font-size: 0.65rem;
}

.gateway-topic {
  font-family: var(--font-handwriting);
  font-size: 1.15rem;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.35);
}

.gateway-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.18;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
  text-shadow: 0 0 25px rgba(255, 255, 255, 0.4), 0 4px 20px rgba(0, 0, 0, 0.7);
}

.gateway-marginalia {
  font-family: var(--font-handwriting);
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--accent-handwriting);
  margin-top: 0.85rem;
  letter-spacing: 0.015em;
  opacity: 0.95;
}

.gateway-scroll-indicator {
  display: none !important;
}

.gateway-horizon-wipe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--theme-accent-primary) 30%, var(--theme-accent-secondary) 70%, transparent 100%);
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}

/* Cosmic Section Dividers Between Chapters */
.cosmic-section-divider {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 4.5rem 0 3.5rem;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 238, 220, 0.12) 30%, rgba(212, 163, 89, 0.4) 50%, rgba(56, 189, 248, 0.4) 70%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cosmic-section-divider::before {
  content: '✦';
  position: absolute;
  color: var(--accent-gold);
  font-size: 0.85rem;
  background: var(--color-void);
  padding: 0 0.8rem;
}

/* Hero Journey Dual Selector */
.hero-journey-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.8rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.journey-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.journey-btn.story-mode {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
}

.journey-btn.story-mode:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.12));
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25);
}

.journey-btn.deep-mode {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.journey-btn.deep-mode:hover {
  background: rgba(56, 189, 248, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.3);
}

/* Reading Sanctuary Styling for The Story (Part 10) */
.story-sanctuary {
  position: relative;
  background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.05) 0%, rgba(14, 20, 32, 0.6) 60%, transparent 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-lg);
  padding: 3rem 2.8rem;
  margin: 3rem 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.story-sanctuary .gateway-title {
  color: #ffffff !important;
  text-shadow: 0 0 35px rgba(255, 255, 255, 0.65), 0 2px 14px rgba(0, 0, 0, 0.8) !important;
}

.story-sanctuary .gateway-topic {
  color: #ffffff !important;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.45) !important;
}

.story-intro-callout {
  padding: 1.2rem 1.6rem;
  background: rgba(255, 255, 255, 0.06);
  border-left: 4px solid #ffffff;
  border-radius: var(--radius-sm);
  margin-bottom: 2.2rem;
  font-size: 1.05rem;
  color: #ffffff;
}

.toc-story-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  margin-right: 0.35rem;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* Stable SVG Loop Animation (Dashoffset, zero transform distortion) */
@keyframes loop-dash {
  to {
    stroke-dashoffset: -1200;
  }
}
.svg-animate-loop {
  animation: loop-dash 24s linear infinite;
}

@media (max-width: 768px) {
  .chapter-gateway {
    min-height: auto;
    padding: 2rem 1.3rem 1.8rem;
    margin: 1.8rem 0;
  }
  .gateway-title {
    font-size: 1.7rem;
  }
  .gateway-marginalia {
    font-size: 1.15rem;
  }
}

/* Reduced Motion Respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .svg-animate-wave, .svg-animate-pulse, .svg-animate-pop,
  .svg-animate-ring, .svg-animate-draw, .svg-animate-float,
  .svg-animate-orbit, .svg-animate-flow, .svg-animate-fade,
  .svg-animate-loop {
    animation: none !important;
  }
}


/* -----------------------------------------------------------------------
   HEADER CONTROLS & THEME SWITCHER
   ----------------------------------------------------------------------- */
.header-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Accent Switcher Pill - Hidden from topbar on desktop and mobile */
.accent-switcher {
  display: none !important;
}

.accent-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  background: transparent;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  outline-offset: 2px;
  flex-shrink: 0;
}
.accent-dot:hover {
  transform: scale(1.15);
}
.accent-dot.active {
  transform: scale(1.22);
  border-color: var(--color-text-primary);
  box-shadow: 0 0 8px var(--theme-accent-glow);
}
.accent-dot .swatch-half {
  width: 50%;
  height: 100%;
  display: block;
}

/* Theme Toggle Button (Sun / Moon) */
.theme-toggle-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all var(--t-fast);
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  border-color: var(--theme-accent-primary);
  color: var(--theme-accent-primary);
  background: var(--color-surface-hover);
  box-shadow: 0 0 14px var(--theme-accent-glow);
}
.theme-toggle-btn:active {
  transform: scale(0.94);
}
.theme-toggle-btn svg {
  width: 19px;
  height: 19px;
  transition: transform 0.4s var(--ease-out), opacity 0.2s ease;
}

[data-theme="dark"] .theme-toggle-btn .icon-moon,
:root:not([data-theme="light"]) .theme-toggle-btn .icon-moon {
  display: none;
}
[data-theme="dark"] .theme-toggle-btn .icon-sun,
:root:not([data-theme="light"]) .theme-toggle-btn .icon-sun {
  display: block;
}

[data-theme="light"] .theme-toggle-btn .icon-sun {
  display: none;
}
[data-theme="light"] .theme-toggle-btn .icon-moon {
  display: block;
}

[data-theme="light"] .theme-toggle-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .theme-toggle-btn:hover {
  background: #f1f5f9;
  border-color: var(--theme-accent-primary);
  color: var(--theme-accent-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .theme-toggle-btn svg {
  color: #0f172a;
  stroke: #0f172a;
}
[data-theme="light"] .theme-toggle-btn:hover svg {
  color: var(--theme-accent-primary);
  stroke: var(--theme-accent-primary);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sidebar Appearance Section (Mobile Drawer) */
.sidebar-appearance {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-card-border);
}
@media (min-width: 1024px) {
  .sidebar-appearance {
    display: none !important;
  }
}
.mobile-appearance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}
.mobile-appearance-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mobile-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-card);
  border: 1px solid var(--color-card-border);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--t-fast);
}
.mobile-theme-btn:hover {
  border-color: var(--theme-accent-primary);
  color: var(--theme-accent-primary);
}
[data-theme="light"] .mobile-theme-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
[data-theme="light"] .mobile-theme-btn:hover {
  background: #f1f5f9;
  border-color: var(--theme-accent-primary);
  color: var(--theme-accent-primary);
}
.mobile-palettes {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.mobile-palette-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: left;
  transition: all var(--t-fast);
}
.mobile-palette-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}
.mobile-palette-btn.active {
  background: rgba(var(--theme-accent-rgb), 0.1);
  border-color: var(--theme-accent-primary);
  color: var(--theme-accent-primary);
  font-weight: 600;
}

/* -----------------------------------------------------------------------
   COMPREHENSIVE LIGHT THEME RULES & ELEVATIONS (ZERO LAYOUT SHIFT)
   ----------------------------------------------------------------------- */
[data-theme="light"] .site-header {
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .chapter-gateway {
  background: radial-gradient(ellipse at 50% 15%, rgba(var(--theme-accent-rgb), 0.08) 0%, rgba(248, 250, 252, 0.95) 60%, transparent 100%),
              linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: var(--color-card-border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .chapter-gateway .gateway-title,
[data-theme="light"] .gateway-title,
[data-theme="light"] .story-sanctuary .gateway-title {
  color: #040608 !important;
  text-shadow: none !important;
}
[data-theme="light"] .chapter-gateway .gateway-topic,
[data-theme="light"] .gateway-topic,
[data-theme="light"] .story-sanctuary .gateway-topic {
  color: #040608 !important;
  text-shadow: none !important;
}
[data-theme="light"] .chapter-gateway .gateway-aura {
  opacity: 0.2;
}
[data-theme="light"] .gateway-badge {
  background: rgba(4, 6, 8, 0.05);
  border-color: rgba(4, 6, 8, 0.18);
}
[data-theme="light"] .gateway-part,
[data-theme="light"] .gateway-sep {
  color: #040608;
}
[data-theme="light"] .gateway-marginalia {
  color: #334155;
}
[data-theme="light"] .story-sanctuary {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .story-intro-callout {
  background: #f8fafc;
  border-left: 4px solid #040608;
  color: #040608;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .journey-btn.story-mode {
  background: #ffffff;
  border: 1.5px solid #040608;
  color: #040608;
  text-shadow: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .journey-btn.story-mode:hover {
  background: #040608;
  border-color: #040608;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .toc-story-badge {
  background: rgba(4, 6, 8, 0.06);
  border: 1px solid #040608;
  color: #040608;
  text-shadow: none;
}

[data-theme="light"] .hero-halo {
  background: radial-gradient(circle, rgba(var(--theme-accent-rgb), 0.12) 0%, rgba(var(--theme-accent-sec-rgb), 0.05) 50%, transparent 70%);
  opacity: 0.7;
}

[data-theme="light"] .hero-scroll-cue {
  background: #f8fafc;
  border-color: var(--color-card-border);
  color: var(--color-text-secondary);
}

[data-theme="light"] .disclaimer-banner {
  background: #ffffff;
  border-color: var(--color-card-border);
  border-left-color: var(--theme-accent-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .diagram-figure {
  background: #ffffff;
  border-color: var(--color-card-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .diagram-header {
  background: #ffffff;
  border-bottom: 1px solid var(--color-card-border);
}
[data-theme="light"] .diagram-caption {
  color: var(--color-text-primary);
}

[data-theme="light"] .evidence-card {
  background: #ffffff;
  border-color: var(--color-card-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .evidence-card summary:hover {
  background: #f8fafc;
}
[data-theme="light"] .evidence-body {
  border-top-color: var(--color-card-border);
}

[data-theme="light"] .tooltip {
  background: #ffffff;
  color: #090d16;
  border-color: var(--theme-accent-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .tooltip::after {
  border-top-color: var(--theme-accent-primary);
}

[data-theme="light"] .chain-step {
  background: #ffffff;
  border-color: var(--color-card-border);
}
[data-theme="light"] .chain-step:hover {
  background: #f8fafc;
}

[data-theme="light"] .flowchart-card {
  background: #ffffff;
  border-color: var(--color-card-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .flowchart-card:hover {
  border-color: rgba(var(--theme-accent-rgb), 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .flowchart-formula {
  background: #f8fafc;
  border-color: var(--color-card-border);
}
[data-theme="light"] .flowchart-marginalia {
  background: rgba(212, 168, 83, 0.12);
  color: #854d0e;
  border-left-color: #d4a853;
}
[data-theme="light"] .flowchart-loop-vector {
  background: radial-gradient(circle at top center, rgba(var(--theme-accent-rgb), 0.08), transparent 70%), #ffffff;
  border-color: rgba(var(--theme-accent-rgb), 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .flowchart-summary-card {
  background: #ffffff;
  border-color: var(--color-card-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .author-avatar {
  border-color: var(--theme-accent-primary);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .author-card,
[data-theme="light"] .author-card-inner {
  background: #ffffff;
  border-color: var(--color-card-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .social-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: var(--color-text-secondary);
}
[data-theme="light"] .social-btn:hover {
  background: #f8fafc;
  border-color: var(--theme-accent-primary);
  color: var(--theme-accent-primary);
}

[data-theme="light"] .author-invite-box {
  background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.08) 0%, rgba(var(--theme-accent-sec-rgb), 0.05) 100%);
  border-color: rgba(var(--theme-accent-rgb), 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .marginalia {
  border-left-color: rgba(var(--theme-accent-rgb), 0.6);
  background: rgba(var(--theme-accent-rgb), 0.06);
}

[data-theme="light"] .proofs-page .proof-card {
  background: #ffffff;
  border-color: var(--color-card-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .equation-box {
  background: #f8fafc;
  border-color: var(--color-card-border);
}
[data-theme="light"] .equation-box.highlight {
  border-color: rgba(var(--theme-accent-rgb), 0.35);
  background: rgba(var(--theme-accent-rgb), 0.06);
}

[data-theme="light"] .citation-card {
  background: #f8fafc;
  border-color: var(--color-card-border);
}

[data-theme="light"] .budget-item {
  background: #f8fafc;
  border-color: var(--color-card-border);
}

[data-theme="light"] .site-footer {
  background: #f8fafc;
  border-top-color: var(--color-card-border);
}

[data-theme="light"] code,
[data-theme="light"] .mono {
  background: #f1f5f9;
  border: 1px solid var(--color-card-border);
  color: var(--theme-accent-primary);
}

[data-theme="light"] th {
  background: #f1f5f9;
  color: var(--color-text-primary);
  border-color: var(--color-card-border);
}
[data-theme="light"] td {
  background: #ffffff;
  border-color: var(--color-card-border);
}

[data-theme="light"] .cosmic-section-divider {
  background: linear-gradient(90deg, transparent 0%, var(--color-border-subtle) 30%, rgba(var(--theme-accent-rgb), 0.5) 50%, rgba(var(--theme-accent-sec-rgb), 0.5) 70%, transparent 100%);
}

[data-theme="light"] a {
  color: var(--theme-accent-primary);
}
[data-theme="light"] a:hover {
  color: var(--theme-accent-secondary);
}
[data-theme="light"] .brand-link {
  color: inherit;
}
[data-theme="light"] .header-nav a {
  color: var(--color-text-secondary);
  border-color: var(--color-card-border);
}
[data-theme="light"] .header-nav a:hover {
  color: var(--theme-accent-primary);
  border-color: var(--theme-accent-primary);
  background: rgba(var(--theme-accent-rgb), 0.08);
}
[data-theme="light"] .toc-link {
  color: var(--color-text-secondary);
}
[data-theme="light"] .toc-link:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
}
[data-theme="light"] .toc-link.active {
  color: var(--theme-accent-primary);
  background: rgba(var(--theme-accent-rgb), 0.08);
  border-left-color: var(--theme-accent-primary);
}