@import url("./_tokens.css?v=20260614k");

/* ============================================================
   Whitepaper — academic-style web paper
   Two themes: dark (default, "matrix") for screen reading, and a light
   "paper" theme for a print-feel reading mode.

   TODO(theme-toggle): The light [data-theme="paper"] palette + override rules
   below are currently DORMANT — nothing sets data-theme="paper" at runtime, so
   the light theme is only reachable by manually setting the attribute. To ship
   it, add a CSP-safe toggle (an external script flipping
   document.documentElement.dataset.theme + persisting to localStorage; no inline
   handlers). Do NOT delete the [data-theme="paper"] rules to "clean up": the
   :root:not([data-theme="paper"]) guards throughout this file are load-bearing
   for the active matrix theme and for @media print, and removing the positive
   overrides would break the toggle the moment it is wired up.
   ============================================================ */

:root {
  --paper-bg: #04060c;
  --paper-surface: rgba(14, 19, 28, 0.62);
  --paper-surface-soft: rgba(20, 26, 36, 0.5);
  --paper-text: #eef2f7;
  --paper-text-soft: rgba(232, 236, 243, 0.78);
  --paper-text-mute: rgba(232, 236, 243, 0.5);
  --paper-accent: #b6f07e;
  --paper-accent-strong: #dff7bf;
  --paper-link: #b6f07e;
  --paper-border: rgba(255, 255, 255, 0.09);
  --paper-border-strong: rgba(170, 240, 120, 0.4);
  --paper-rule: rgba(255, 255, 255, 0.14);
  --paper-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --paper-eq-bg: rgba(170, 240, 120, 0.06);
  --paper-code-bg: rgba(8, 12, 20, 0.8);
  --paper-mark-bg: rgba(170, 240, 120, 0.18);
}

[data-theme="paper"] {
  --paper-bg: #f5f0e2;
  --paper-surface: #ffffff;
  --paper-surface-soft: rgba(0, 0, 0, 0.04);
  --paper-text: #15171f;
  --paper-text-soft: rgba(21, 23, 31, 0.78);
  --paper-text-mute: rgba(21, 23, 31, 0.55);
  --paper-accent: #a06b00;
  --paper-accent-strong: #7a4f00;
  --paper-link: #7a4f00;
  --paper-border: rgba(21, 23, 31, 0.12);
  --paper-border-strong: rgba(122, 79, 0, 0.42);
  --paper-rule: rgba(21, 23, 31, 0.2);
  --paper-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --paper-eq-bg: rgba(122, 79, 0, 0.06);
  --paper-code-bg: rgba(21, 23, 31, 0.06);
  --paper-mark-bg: rgba(247, 181, 0, 0.32);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper-bg);
  color: var(--paper-text);
  font-family: "Crimson Pro", "Source Serif Pro", Georgia, serif;
  font-size: 17.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  transition: background var(--motion-default), color var(--motion-default);
}

body.paper {
  background:
    radial-gradient(circle at 12% 6%, rgba(247, 181, 0, 0.06), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(50, 230, 213, 0.04), transparent 26%),
    var(--paper-bg);
  min-height: 100vh;
}

a { color: var(--paper-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover, a:focus-visible { text-decoration-thickness: 2px; outline: none; }

::selection {
  background: var(--paper-mark-bg);
  color: var(--paper-text);
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 12px;
  background: var(--paper-accent-strong);
  /* Dark on-accent foreground: --paper-accent-strong is a pale mint/lime in
     both the matrix and bare-default palettes, so white text would be
     near-invisible (~1.1:1). Mirror .paper-btn-primary's dark-on-accent. */
  color: var(--paper-bg);
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  z-index: var(--layer-toast);
  transition: top var(--motion-default);
}
.skip-link:focus { top: 12px; }

/* ============================================================
   Reading progress
   ============================================================ */
.reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(0,0,0,0.15);
  z-index: 1000;
}
.reading-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--paper-accent), var(--paper-accent-strong));
  transition: width 80ms linear;
}

/* ============================================================
   Nav
   ============================================================ */
.paper-nav {
  position: sticky;
  top: 3px;
  z-index: 100;
  background: rgba(8, 10, 18, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--paper-border);
}

[data-theme="paper"] .paper-nav {
  background: rgba(255, 255, 255, 0.86);
}

.paper-nav-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  max-width: 1400px;
  margin-inline: auto;
}

.paper-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--paper-text);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.paper-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--paper-accent), var(--paper-accent-strong));
  color: #04050a;
  font-weight: 800;
  font-family: var(--font-display);
}

.paper-nav-links {
  display: flex;
  gap: 18px;
  margin-left: 16px;
  font-family: var(--font-body);
  font-size: 13px;
}

.paper-nav-links a {
  color: var(--paper-text-soft);
  text-decoration: none;
  transition: color var(--motion-quick);
}

.paper-nav-links a:hover { color: var(--paper-text); }

.paper-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Account link surfaced in the always-visible actions cluster only on mobile,
   where .paper-nav-links is collapsed. Hidden on desktop to avoid duplicating
   the link that already lives in .paper-nav-links. */
.paper-nav-account-mobile {
  display: none;
  color: var(--paper-text-soft);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 13px;
  transition: color var(--motion-quick);
}
.paper-nav-account-mobile:hover,
.paper-nav-account-mobile:focus-visible { color: var(--paper-text); }

.paper-cta {
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--paper-accent), var(--paper-accent-strong));
  color: #04050a;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform var(--motion-quick), box-shadow var(--motion-quick);
}
.paper-cta:hover, .paper-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(247, 181, 0, 0.36);
  outline: none;
  text-decoration: none;
}

/* ============================================================
   Layout — TOC sidebar + article
   ============================================================ */
.paper-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px 80px 24px;
}

/* ============================================================
   TOC sidebar
   ============================================================ */
.paper-toc {
  position: relative;
  min-width: 0;
}

.paper-toc-inner {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  border-radius: 14px;
  background: var(--paper-surface);
  border: 1px solid var(--paper-border);
  box-shadow: var(--paper-shadow);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--paper-border-strong) transparent;
}

.paper-toc-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--paper-border);
}

.paper-toc-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--paper-text);
  margin-bottom: 8px;
}

.paper-toc-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--paper-text-mute);
}
.paper-toc-meta b {
  color: var(--paper-text-soft);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.paper-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
}

.paper-toc-link {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--paper-text-soft);
  text-decoration: none;
  font-size: 13px;
  border-left: 2px solid transparent;
  transition: background var(--motion-quick), color var(--motion-quick), border-color var(--motion-quick);
}

.paper-toc-link:hover {
  background: var(--paper-mark-bg);
  color: var(--paper-text);
  text-decoration: none;
}

.paper-toc-link.is-active {
  background: var(--paper-mark-bg);
  color: var(--paper-accent-strong);
  border-left-color: var(--paper-accent-strong);
  font-weight: 600;
}

.paper-live {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--paper-surface-soft);
  border: 1px solid var(--paper-border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-text-soft);
  margin-top: auto;
}

.paper-live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 8px rgba(20, 241, 149, 0.7);
  animation: paper-live-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes paper-live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

.paper-live-text {
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* ============================================================
   Article body
   ============================================================ */
.paper-article {
  max-width: 760px;
  /* Grid items default to min-width:auto, which refuses to shrink below the
     min-content width of the widest child (a code block / table). That blows
     out the column on narrow viewports and causes horizontal page scroll.
     min-width:0 lets the column collapse to the viewport so wide blocks scroll
     internally (they already have overflow-x:auto) instead of the whole page. */
  min-width: 0;
}

/* Wide media inside the article must never force the page wider than the
   viewport — shrink images/SVGs and let code/pre scroll within their own box. */
.paper-article img,
.paper-article svg,
.paper-article canvas {
  max-width: 100%;
  height: auto;
}
.paper-article pre {
  max-width: 100%;
  overflow-x: auto;
}

.paper-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-accent);
  margin-bottom: 14px;
}

.paper-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 8px 0;
  color: var(--paper-text);
}

.paper-subtitle {
  font-family: "Crimson Pro", serif;
  font-style: italic;
  font-size: 20px;
  color: var(--paper-text-soft);
  margin: 0 0 32px 0;
  font-weight: 400;
  letter-spacing: 0;
}

.paper-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 28px;
}

.paper-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.paper-author-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--paper-text);
}

.paper-author-affil {
  font-family: "Crimson Pro", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--paper-text-mute);
}

.paper-meta {
  margin: 0;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 6px 16px;
  padding-top: 20px;
  border-top: 1px dashed var(--paper-rule);
  font-family: var(--font-body);
  font-size: 13px;
}

.paper-meta > div {
  display: contents;
}

.paper-meta dt {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-text-mute);
  align-self: baseline;
  padding-top: 2px;
}

.paper-meta dd {
  margin: 0;
  color: var(--paper-text-soft);
  align-self: baseline;
}

/* ============================================================
   Section headings
   ============================================================ */
.paper-section {
  margin-bottom: 56px;
  scroll-margin-top: 80px;
}

.paper-section-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 18px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--paper-rule);
  color: var(--paper-text);
  position: relative;
}

.paper-num {
  display: inline-block;
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--paper-accent);
  font-weight: 600;
}

.paper-subtitle-h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 32px 0 12px 0;
  color: var(--paper-text);
  scroll-margin-top: 80px;
}

.paper-section p {
  margin: 0 0 18px 0;
}

.paper-section p:last-child {
  margin-bottom: 0;
}

.paper-section em {
  font-style: italic;
}

.paper-section code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--paper-code-bg);
  color: var(--paper-accent);
}

.paper-mark {
  background: var(--paper-mark-bg);
  padding: 0 4px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ============================================================
   Abstract
   ============================================================ */
.paper-abstract {
  padding: 32px;
  background: var(--paper-surface-soft);
  border-left: 4px solid var(--paper-accent-strong);
  border-radius: 0 14px 14px 0;
}

.paper-abstract .paper-section-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-bottom: none;
  margin-bottom: 16px;
  padding-bottom: 0;
}

.paper-abstract p {
  font-size: 16.5px;
  line-height: 1.7;
}

.paper-tldr {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--paper-mark-bg);
  border: 1px solid var(--paper-border-strong);
}

.paper-tldr-head {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-accent-strong);
  margin-bottom: 8px;
  font-weight: 700;
}

.paper-tldr ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.55;
  font-family: var(--font-body);
}

.paper-tldr li {
  margin-bottom: 4px;
}

.paper-tldr code {
  font-size: 0.92em;
  background: rgba(0,0,0,0.18);
}
[data-theme="paper"] .paper-tldr code { background: rgba(255,255,255,0.5); }

/* ============================================================
   Lists
   ============================================================ */
.paper-list {
  padding-left: 28px;
  margin: 0 0 18px 0;
}

.paper-list li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.paper-list li::marker {
  color: var(--paper-accent);
  font-weight: 700;
  font-family: var(--font-mono);
}

/* ============================================================
   Notation block
   ============================================================ */
.paper-notation {
  display: grid;
  gap: 6px;
  margin: 12px 0 24px 16px;
  padding: 14px 18px;
  background: var(--paper-surface-soft);
  border-left: 3px solid var(--paper-border-strong);
  font-size: 14.5px;
  font-family: "Crimson Pro", serif;
}

.paper-sym {
  font-family: "Crimson Pro", serif;
  font-style: italic;
  display: inline-block;
  min-width: 200px;
  color: var(--paper-accent-strong);
  font-weight: 600;
}

/* ============================================================
   Definitions / Theorems
   ============================================================ */
.paper-definition,
.paper-theorem,
.paper-callout {
  margin: 24px 0;
  padding: 16px 20px;
  border-radius: 8px;
  background: var(--paper-surface-soft);
  border-left: 4px solid var(--paper-accent-strong);
  font-family: "Crimson Pro", serif;
}

.paper-theorem {
  border-left-color: var(--color-accent-emerald);
  background: rgba(20, 241, 149, 0.06);
}

[data-theme="paper"] .paper-theorem {
  background: rgba(20, 168, 109, 0.08);
}

.paper-def-head,
.paper-thm-head,
.paper-callout-head {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-accent-strong);
  margin-bottom: 8px;
}

.paper-thm-head {
  color: var(--color-accent-emerald);
}
[data-theme="paper"] .paper-thm-head { color: #0d7a4a; }

.paper-callout {
  border-left-color: var(--color-accent-blue);
}

.paper-callout-head {
  color: var(--color-accent-blue);
}
[data-theme="paper"] .paper-callout-head { color: #1d4f9d; }

.paper-definition p,
.paper-theorem p,
.paper-callout p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.paper-callout pre {
  margin: 0;
  padding: 12px 14px;
  background: var(--paper-code-bg);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  overflow-x: auto;
  color: var(--paper-text-soft);
}

/* ============================================================
   Equations
   ============================================================ */
.paper-equation {
  margin: 18px 0;
  padding: 14px 24px;
  background: var(--paper-eq-bg);
  border-radius: 6px;
  text-align: center;
  font-family: "Crimson Pro", "Latin Modern Math", "STIX Two Math", serif;
  font-size: 18px;
  line-height: 1.6;
  position: relative;
  overflow-x: auto;
  font-style: italic;
}

.paper-eq-num {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--paper-text-mute);
  float: right;
  margin-left: 12px;
}

.paper-eq-inline {
  font-family: "Crimson Pro", "Latin Modern Math", serif;
  font-style: italic;
  font-size: 1.04em;
  background: var(--paper-eq-bg);
  padding: 0 4px;
  border-radius: 3px;
  white-space: nowrap;
}

/* ============================================================
   Tables
   ============================================================ */
.paper-table-wrap {
  margin: 20px 0;
  overflow-x: auto;
  /* As a grid/flex item, min-width:auto would refuse to shrink below the table's
     min-content width and force horizontal page scroll. min-width:0 lets the box
     collapse to the viewport while the table scrolls inside overflow-x:auto. */
  min-width: 0;
  border: 1px solid var(--paper-border);
  border-radius: 10px;
  background: var(--paper-surface-soft);
}

.paper-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13.5px;
}

.paper-table th,
.paper-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--paper-border);
}

.paper-table th {
  background: var(--paper-mark-bg);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-accent-strong);
  font-weight: 700;
  border-bottom: 2px solid var(--paper-border-strong);
}

.paper-table tbody tr:last-child td { border-bottom: none; }

.paper-table tbody tr:hover {
  background: var(--paper-surface-soft);
}

.paper-table code {
  font-size: 0.88em;
}

.paper-table-rooms td:first-child {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--paper-accent-strong);
}

/* ============================================================
   Figures
   ============================================================ */
.paper-figure {
  margin: 28px 0;
  padding: 20px;
  background: var(--paper-surface-soft);
  border-radius: 12px;
  border: 1px solid var(--paper-border);
}

.paper-figure svg,
.paper-figure canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
  margin: 0 auto;
  color: var(--paper-text-soft);
}

.paper-figure figcaption {
  margin-top: 14px;
  font-family: "Crimson Pro", serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper-text-soft);
  text-align: center;
  font-style: italic;
}

.paper-figure figcaption strong {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--paper-accent-strong);
}

/* State machine SVG styling */
.sm-node rect {
  fill: var(--paper-surface);
  stroke: var(--paper-border-strong);
  stroke-width: 1.5;
}
.sm-node text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  fill: var(--paper-text);
}
.sm-node .sm-sub {
  font-size: 10px;
  font-weight: 500;
  fill: var(--paper-text-mute);
  font-family: var(--font-body);
}
.sm-node-warn rect { stroke: var(--paper-accent-strong); fill: var(--paper-mark-bg); }
.sm-node-danger rect { stroke: var(--color-danger); fill: rgba(255, 90, 90, 0.1); }
.sm-node-good rect { stroke: var(--color-success); fill: rgba(20, 241, 149, 0.1); }

/* Auth diagram styling */
.auth-actor text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  fill: var(--paper-text);
}
.auth-actor line {
  stroke: var(--paper-border-strong);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.auth-msg text {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--paper-text-soft);
}
.auth-msg-verify rect {
  fill: var(--paper-mark-bg);
  stroke: var(--paper-accent-strong);
  stroke-width: 1.5;
}
.auth-msg-verify text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  fill: var(--paper-accent-strong);
}
.auth-msg-ok path {
  stroke: var(--color-success);
  stroke-width: 2;
}

/* ============================================================
   2-col card grid (anti-cheat layers)
   ============================================================ */
.paper-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 24px 0;
}

.paper-card {
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--paper-surface-soft);
  border: 1px solid var(--paper-border);
  font-family: var(--font-body);
}

.paper-card-head {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--paper-accent-strong);
  margin-bottom: 6px;
}

.paper-card p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  color: var(--paper-text-soft);
}

/* ============================================================
   Code block (in appendices)
   ============================================================ */
.paper-codeblock {
  display: block;
  padding: 16px 18px;
  background: var(--paper-code-bg);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  color: var(--paper-text-soft);
  white-space: pre;
  border: 1px solid var(--paper-border);
}

/* ============================================================
   Footnotes / references
   ============================================================ */
.paper-footnote-ref {
  font-family: var(--font-mono);
  font-size: 0.72em;
  vertical-align: super;
  color: var(--paper-accent-strong);
  cursor: help;
  font-weight: 700;
  padding: 0 1px;
}

.paper-footnote-ref:hover { text-decoration: underline; }
.paper-footnote-ref:focus-visible {
  outline: 2px solid var(--paper-accent);
  outline-offset: 2px;
  border-radius: 2px;
  text-decoration: underline;
}

.paper-cite-link {
  text-decoration: none;
  color: var(--paper-link);
  border-bottom: 1px dashed currentColor;
}

.paper-references {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  padding-left: 28px;
}

.paper-references li {
  margin-bottom: 12px;
  color: var(--paper-text-soft);
}

.paper-references li::marker {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-accent);
}

.paper-references b {
  color: var(--paper-text);
  font-weight: 600;
}

.paper-references em {
  font-style: italic;
}

.paper-footnotes {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  padding-left: 24px;
  color: var(--paper-text-soft);
}

.paper-footnotes li {
  margin-bottom: 10px;
}

.paper-footnotes sup {
  color: var(--paper-accent-strong);
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Footnote popover */
.footnote-popover {
  position: absolute;
  max-width: 320px;
  padding: 12px 14px;
  background: var(--paper-surface);
  color: var(--paper-text);
  border: 1px solid var(--paper-border-strong);
  border-radius: 8px;
  font-family: "Crimson Pro", serif;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: var(--paper-shadow);
  z-index: 200;
  /* Interactive so a pinned popover can be hovered/clicked into without passing
     the click through to content behind it (the dismiss guard checks
     #footnote-popover) and so its text is selectable/copyable. Hover-unpinned
     popovers still auto-hide via the ref's mouseleave. */
}

.footnote-popover[hidden] { display: none; }

/* ============================================================
   Bottom meta
   ============================================================ */
.paper-meta-bottom {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--paper-rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-text-mute);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .paper-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 880px) {
  .paper-layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 18px 60px 18px;
  }
  .paper-toc {
    position: static;
    margin-bottom: 8px;
  }
  .paper-toc-inner {
    position: static;
    max-height: none;
  }
  .paper-toc-nav { max-height: 200px; overflow-y: auto; }
  .paper-nav-links { display: none; }
  .paper-nav-account-mobile { display: inline-flex; align-items: center; }
  .paper-grid-2 { grid-template-columns: 1fr; }
  .paper-meta { grid-template-columns: 1fr; gap: 14px; }
  .paper-meta dt { padding-top: 0; }
  body { font-size: 16px; }
}

@media (max-width: 600px) {
  .paper-byline { flex-direction: column; gap: 12px; }
  .paper-section-title { font-size: 22px; }
  .paper-subtitle-h3 { font-size: 16px; }
  .paper-abstract { padding: 22px 20px; }
  /* Left-align on narrow viewports: centered text inside overflow-x:auto clips
     its leftmost characters unreachably when the equation is wider than the box. */
  .paper-equation { font-size: 15px; padding: 12px 16px; text-align: left; }
  .paper-figure { padding: 14px; }
  .paper-eq-num { display: block; float: none; margin: 4px 0 0 0; text-align: right; }
  /* Long nowrap inline equations would otherwise push page scrollWidth and
     introduce horizontal scroll on ~320px viewports — let them wrap instead. */
  .paper-eq-inline { white-space: normal; overflow-wrap: anywhere; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  :root {
    --paper-bg: #ffffff;
    --paper-surface: #ffffff;
    --paper-surface-soft: #f7f4ea;
    --paper-text: #15171f;
    --paper-text-soft: rgba(21, 23, 31, 0.85);
    --paper-text-mute: rgba(21, 23, 31, 0.62);
    --paper-accent: #7a4f00;
    --paper-accent-strong: #5a3a00;
    --paper-link: #5a3a00;
    --paper-border: rgba(21, 23, 31, 0.18);
    --paper-border-strong: rgba(122, 79, 0, 0.6);
    --paper-eq-bg: rgba(122, 79, 0, 0.08);
    --paper-code-bg: rgba(21, 23, 31, 0.08);
    --paper-mark-bg: rgba(247, 181, 0, 0.32);
    --paper-shadow: none;
  }
  body {
    background: #fff;
    color: #15171f;
    font-size: 11pt;
    line-height: 1.55;
  }
  .paper-nav,
  .reading-progress,
  .paper-toc,
  .paper-live,
  .paper-cta,
  #copy-bibtex {
    display: none !important;
  }
  .paper-layout {
    display: block;
    padding: 0;
    max-width: 100%;
  }
  .paper-article {
    max-width: 100%;
  }
  .paper-section {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 24pt;
  }
  .paper-figure {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  a { color: #5a3a00; }
}

/* ===== MATRIX / TRON backdrop (dark theme only) ===== */
/* Bright green data-grid + horizon glow + CRT scanlines, all in the body
   background-image so it stays safely BEHIND the text (no floor pseudo on this
   text-heavy page). The [data-theme="paper"] override nulls it for light mode. */
body.paper {
  background-color: #03070a;
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,14,7,0.5) 2px 4px),
    linear-gradient(rgba(80, 255, 160, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 255, 160, 0.075) 1px, transparent 1px),
    radial-gradient(75% 55% at 50% 106%, rgba(64, 255, 150, 0.22), transparent 60%),
    radial-gradient(90% 60% at 50% -12%, rgba(28, 140, 76, 0.16), transparent 55%);
  background-size: auto, 42px 42px, 42px 42px, auto, auto;
  background-attachment: fixed;
}
[data-theme="paper"] body.paper,
body.paper[data-theme="paper"] {
  background-color: var(--paper-bg);
  background-image: none;
}
.paper-section-title, .paper-eyebrow, .paper-toc-head, .paper-tldr-head {
  font-family: "Sora", "Trebuchet MS", sans-serif;
  letter-spacing: 0.04em;
}

/* ============================================================
   UPGRADE LAYER — wireframe / hierarchy / rhythm polish
   Space-matrix: near-black + faint grid + lime accent only
   ============================================================ */

/* ---- Rhythm scale (page-local, layered on token system) ---- */
:root {
  --pp-section-gap: 96px;
  --pp-intro-gap: 40px;
  --pp-grid-gap: 24px;
  --pp-tile-pad: 22px;
  --pp-glow: 0 0 28px rgba(170, 240, 120, 0.18);
  --pp-glass: rgba(14, 19, 28, 0.6);
  --pp-line: rgba(255, 255, 255, 0.09);
  --pp-line-strong: rgba(170, 240, 120, 0.42);
}

/* ---- Signature eyebrow chip with glowing dot ---- */
.paper-eyebrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--paper-border);
  background: var(--paper-surface-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-text-soft);
  width: fit-content;
}
.paper-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper-accent);
  box-shadow: 0 0 8px rgba(170, 240, 120, 0.85);
  flex-shrink: 0;
}
[data-theme="paper"] .paper-eyebrow-dot { box-shadow: none; }

/* Override legacy plain eyebrow when it is the chip */
.paper-eyebrow.paper-eyebrow-chip {
  margin-bottom: 0;
  color: var(--paper-accent);
}

/* ---- Stat tile (shared) ---- */
.paper-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--paper-surface-soft);
  border: 1px solid var(--paper-border);
  position: relative;
  overflow: hidden;
}
.paper-stat-tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--paper-accent), transparent);
  opacity: 0.55;
}
.paper-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-text-mute);
}
.paper-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--paper-text);
  letter-spacing: -0.01em;
}
.paper-stat-value-sm {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--paper-text-soft);
}

/* ============================================================
   HEADER hero band
   ============================================================ */
.paper-header {
  position: relative;
  /* The decorative .paper-orbit sits at right:-30px and intentionally bleeds
     past the header; clip it here so it never adds horizontal page scroll.
     overflow-x:clip (not hidden) does not create a scroll container, so the
     sticky TOC keeps working. */
  overflow-x: clip;
  margin-bottom: var(--pp-section-gap);
  padding-bottom: 36px;
  border-bottom: 1px solid var(--paper-rule);
}

.paper-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}

.paper-header-lede { min-width: 0; }

.paper-title {
  font-size: clamp(36px, 5vw, 58px);
  line-height: 0.98;
  margin-top: 18px;
}

/* Decorative orbital ring / constellation top-right */
.paper-orbit {
  position: absolute;
  top: -40px;
  right: -30px;
  width: 260px;
  height: 260px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
[data-theme="paper"] .paper-orbit { display: none; }
.paper-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(170, 240, 120, 0.16);
}
.paper-orbit-ring-1 { inset: 0; }
.paper-orbit-ring-2 {
  inset: 46px;
  border-style: dashed;
  border-color: rgba(170, 240, 120, 0.12);
}
.paper-orbit-star {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--paper-accent);
  box-shadow: 0 0 8px rgba(170, 240, 120, 0.8);
}
.paper-orbit-star-1 { top: 8px; left: 50%; }
.paper-orbit-star-2 { top: 50%; right: 4px; width: 3px; height: 3px; }
.paper-orbit-star-3 { bottom: 30px; left: 30px; width: 2px; height: 2px; opacity: 0.7; }

.paper-header-lede,
.paper-spec-card { position: relative; z-index: 1; }

/* ---- Glass spec card (stat tiles) ---- */
.paper-spec-card {
  padding: 16px;
  border-radius: var(--radius-md, 16px);
  background: var(--pp-glass);
  border: 1px solid var(--paper-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--paper-shadow);
  position: relative;
  overflow: hidden;
}
.paper-spec-card::after {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(170, 240, 120, 0.16), transparent 70%);
  pointer-events: none;
}
[data-theme="paper"] .paper-spec-card { background: var(--paper-surface); }
[data-theme="paper"] .paper-spec-card::after { display: none; }

.paper-spec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--paper-border);
}
.paper-spec-head-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-text-mute);
}
.paper-spec-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-accent);
}
.paper-spec-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 8px rgba(20, 241, 149, 0.7);
  animation: paper-live-pulse 1.6s ease-in-out infinite;
}
[data-theme="paper"] .paper-spec-live-dot { box-shadow: none; }

.paper-spec-grid {
  display: grid;
  gap: 10px;
}
.paper-spec-grid .paper-stat-tile { padding: 12px 14px; }
.paper-spec-grid .paper-stat-value { font-size: 20px; }

/* ---- Header meta (tightened, 2-up) ---- */
.paper-meta {
  margin-top: 32px;
  grid-template-columns: 150px 1fr;
}

/* ============================================================
   Section rhythm + running-header dividers + lime tick
   ============================================================ */
.paper-section {
  margin-bottom: var(--pp-section-gap);
}

/* Running-header divider above each numbered section */
.paper-section + .paper-section { position: relative; }

.paper-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(26px, 3.5vw, 38px);
  margin-bottom: 22px;
  padding-bottom: 12px;
}
.paper-section-title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--paper-accent);
  box-shadow: 0 0 10px rgba(170, 240, 120, 0.7);
  flex-shrink: 0;
}
[data-theme="paper"] .paper-section-title::before { box-shadow: none; }
.paper-abstract .paper-section-title::before { display: none; }

/* ============================================================
   Abstract — fact chips
   ============================================================ */
.paper-abstract {
  padding: 36px;
  border-radius: 0 16px 16px 0;
  border-left-width: 3px;
}
.paper-fact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.paper-fact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--paper-border-strong);
  background: var(--paper-mark-bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--paper-text-soft);
}
.paper-fact-chip b {
  font-family: var(--font-display);
  color: var(--paper-accent-strong);
  font-size: 12px;
}

/* ============================================================
   TOC sidebar — bands, number rail, position ring
   ============================================================ */
.paper-toc-inner { gap: 16px; }

.paper-toc-band { display: flex; flex-direction: column; gap: 2px; }
.paper-toc-band + .paper-toc-band { margin-top: 12px; }

.paper-toc-band-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-text-mute);
  padding: 0 4px 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--paper-border);
}

.paper-toc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
}
.paper-toc-rail {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--paper-text-mute);
  min-width: 18px;
  text-align: right;
  flex-shrink: 0;
  transition: color var(--motion-quick);
}
.paper-toc-name {
  font-size: 13px;
  line-height: 1.25;
}
.paper-toc-link.is-active .paper-toc-rail { color: var(--paper-accent-strong); }

/* Reading position ring */
.paper-toc-position {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--paper-surface-soft);
  border: 1px solid var(--paper-border);
  margin-top: 4px;
}
.paper-toc-ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.paper-toc-ring svg {
  width: 44px;
  height: 44px;
  transform: rotate(-90deg);
}
.paper-ring-track {
  fill: none;
  stroke: var(--paper-border);
  stroke-width: 3;
}
.paper-ring-fill {
  fill: none;
  stroke: var(--paper-accent);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--motion-default);
  filter: drop-shadow(0 0 4px rgba(170, 240, 120, 0.5));
}
[data-theme="paper"] .paper-ring-fill { filter: none; }
.paper-toc-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--paper-text);
}
.paper-toc-position-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.paper-toc-position-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-text-mute);
}
.paper-toc-position-val {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--paper-text-soft);
}
.paper-toc-position-val b {
  font-family: var(--font-mono);
  color: var(--paper-accent-strong);
}

/* ============================================================
   Nav CTA arrow
   ============================================================ */
.paper-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.paper-cta-arrow {
  transition: transform var(--motion-quick);
}
.paper-cta:hover .paper-cta-arrow,
.paper-cta:focus-visible .paper-cta-arrow { transform: translateX(3px); }

/* ============================================================
   Tiered surfaces — definition / theorem accent rails
   ============================================================ */
.paper-definition,
.paper-theorem {
  border-radius: 12px;
  border-left-width: 3px;
  background: var(--paper-surface);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--paper-shadow);
}
.paper-definition { border-left-color: var(--paper-accent); }

/* ============================================================
   Figures — darker inset + FIG. 0X corner rail
   ============================================================ */
.paper-figure {
  position: relative;
  padding: 28px 22px 22px;
  border-radius: 16px;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(170, 240, 120, 0.06), transparent 60%),
    rgba(6, 9, 15, 0.7);
  border: 1px solid var(--paper-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
[data-theme="paper"] .paper-figure {
  background: var(--paper-surface-soft);
}
.paper-fig-tag {
  position: absolute;
  top: 0; left: 22px;
  transform: translateY(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper-bg);
  border: 1px solid var(--paper-border-strong);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-accent);
}
[data-theme="paper"] .paper-fig-tag { background: var(--paper-surface); }

/* ============================================================
   §7 — side-by-side param panels + chips + room column
   ============================================================ */
.paper-param-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pp-grid-gap);
  margin: 24px 0;
  align-items: start;
}
.paper-table-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.paper-table-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  width: fit-content;
  border: 1px solid var(--paper-border);
  background: var(--paper-surface-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-accent);
}
.paper-table-panel .paper-table-wrap { margin: 0; }

.paper-table-rooms td:first-child {
  position: relative;
  padding-left: 18px;
}
.paper-table-rooms td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--paper-accent);
  opacity: 0.7;
}
.paper-mod-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--paper-eq-bg);
  border: 1px solid var(--paper-border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-text-soft);
}

/* ============================================================
   §9 — milestone timeline
   ============================================================ */
.paper-timeline {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 28px;
  position: relative;
}
.paper-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--paper-accent), rgba(170, 240, 120, 0.15));
}
.paper-milestone {
  position: relative;
  margin-bottom: 20px;
  scroll-margin-top: 80px;
}
.paper-milestone:last-child { margin-bottom: 0; }
.paper-milestone-node {
  position: absolute;
  left: -28px;
  top: 22px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper-bg);
  border: 2px solid var(--paper-accent);
  box-shadow: 0 0 10px rgba(170, 240, 120, 0.6);
  transform: translateX(-1px);
}
[data-theme="paper"] .paper-milestone-node { box-shadow: none; }
.paper-milestone-card {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--paper-surface);
  border: 1px solid var(--paper-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--paper-shadow);
}
.paper-milestone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.paper-milestone-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--paper-text);
}
.paper-milestone-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper-text-soft);
}
.paper-status-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--paper-border);
  color: var(--paper-text-mute);
}
.paper-status-progress {
  border-color: var(--paper-border-strong);
  background: var(--paper-mark-bg);
  color: var(--paper-accent-strong);
}

/* ============================================================
   End-of-paper CTA band
   ============================================================ */
.paper-end-cta {
  position: relative;
  overflow: hidden;
  margin-top: 48px;
  padding: 40px 36px;
  border-radius: 18px;
  text-align: center;
  background: var(--pp-glass);
  border: 1px solid var(--paper-border-strong);
  box-shadow: var(--pp-glow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.paper-end-cta-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 90% at 50% 120%, rgba(170, 240, 120, 0.18), transparent 70%);
  pointer-events: none;
}
[data-theme="paper"] .paper-end-cta-glow { display: none; }
.paper-end-cta-eyebrow {
  margin: 0 auto 16px;
}
.paper-end-cta-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.5vw, 34px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--paper-text);
  position: relative;
}
.paper-end-cta-sub {
  max-width: 460px;
  margin: 0 auto 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper-text-soft);
  position: relative;
}
.paper-end-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  position: relative;
}
.paper-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--paper-accent), var(--paper-accent-strong));
  color: #04050a;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(170, 240, 120, 0.28);
  transition: transform var(--motion-quick), box-shadow var(--motion-quick);
}
.paper-btn-primary:hover,
.paper-btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(170, 240, 120, 0.4);
  text-decoration: none;
  outline: none;
}
.paper-btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--paper-border);
  color: var(--paper-text-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color var(--motion-quick), color var(--motion-quick), background var(--motion-quick);
}
.paper-btn-ghost:hover,
.paper-btn-ghost:focus-visible {
  border-color: var(--paper-border-strong);
  color: var(--paper-accent);
  background: var(--paper-surface-soft);
  outline: none;
}

/* ============================================================
   Responsive — upgrade layer
   ============================================================ */
@media (max-width: 980px) {
  .paper-header-grid { grid-template-columns: 1fr; gap: 28px; }
  .paper-spec-grid { grid-template-columns: 1fr 1fr; }
  .paper-spec-grid .paper-stat-tile-live { grid-column: 1 / -1; }
  .paper-param-grid { grid-template-columns: minmax(0, 1fr); }
  .paper-orbit { display: none; }
}

@media (max-width: 880px) {
  .paper-layout {
    padding: 0 18px 64px 18px;
    gap: 28px;
  }
  .paper-header { margin-bottom: 64px; }
  .paper-section { margin-bottom: 64px; }
  .paper-spec-grid { grid-template-columns: 1fr; }
  .paper-spec-grid .paper-stat-tile-live { grid-column: auto; }
  .paper-milestone-top { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 600px) {
  .paper-abstract { padding: 24px 20px; }
  .paper-end-cta { padding: 28px 20px; }
  .paper-end-cta-actions { flex-direction: column; }
  .paper-btn-primary, .paper-btn-ghost { justify-content: center; }
}

/* ---- Print: hide upgrade-only decorative chrome ---- */
@media print {
  .paper-orbit,
  .paper-end-cta,
  .paper-fig-tag { display: none !important; }
  .paper-header-grid { display: block; }
  .paper-param-grid { display: block; }
}

/* ===== MATRIX TERMINAL UI ===== */
/* Bold green CRT/Tron terminal restyle of every component (DARK theme only).
   All rules are scoped to :root:not([data-theme="paper"]) so the light "paper"
   toggle keeps its clean, readable paper look. The already-applied Tron grid
   background (body.paper) is left untouched. */

:root:not([data-theme="paper"]) {
  /* ---- Matrix palette retargeting of the page tokens ---- */
  --paper-bg: #03070a;
  --paper-surface: rgba(6, 18, 12, 0.66);
  --paper-surface-soft: rgba(6, 18, 12, 0.5);
  --paper-text: #d7f7e3;
  --paper-text-soft: #b7ffd4;
  --paper-text-mute: #88b39c;
  --paper-accent: #4dff8c;
  --paper-accent-strong: #b7ffd4;
  --paper-link: #4dff8c;
  --paper-border: rgba(90, 255, 150, 0.32);
  --paper-border-strong: rgba(90, 255, 150, 0.6);
  --paper-rule: rgba(90, 255, 150, 0.2);
  --paper-shadow: 0 0 18px rgba(40, 255, 130, 0.10), inset 0 0 26px rgba(0, 40, 20, 0.22);
  --paper-eq-bg: rgba(40, 255, 130, 0.08);
  --paper-code-bg: rgba(2, 10, 6, 0.85);
  --paper-mark-bg: rgba(40, 255, 130, 0.16);

  /* page-local upgrade tokens -> matrix */
  --pp-glow: 0 0 28px rgba(40, 255, 130, 0.16);
  --pp-glass: rgba(6, 18, 12, 0.66);
  --pp-line: rgba(90, 255, 150, 0.32);
  --pp-line-strong: rgba(90, 255, 150, 0.6);

  /* matrix helpers */
  --mx-green: #4dff8c;
  --mx-soft: #b7ffd4;
  --mx-dim: #5f8f74;
  --mx-line: rgba(90, 255, 150, 0.32);
  --mx-line-strong: rgba(90, 255, 150, 0.6);
  --mx-glow: rgba(40, 255, 130, 0.16);
  --mx-panel: rgba(6, 18, 12, 0.66);
  --mx-ink: #04140b;
  --mx-radius: 3px;
  --mx-text-shadow: 0 0 18px rgba(77, 255, 140, 0.45);
}

/* ---- 1. CORNERS: sharp / technical (override big rounded look) ---- */
:root:not([data-theme="paper"]) .paper-toc-inner,
:root:not([data-theme="paper"]) .paper-spec-card,
:root:not([data-theme="paper"]) .paper-stat-tile,
:root:not([data-theme="paper"]) .paper-card,
:root:not([data-theme="paper"]) .paper-table-wrap,
:root:not([data-theme="paper"]) .paper-figure,
:root:not([data-theme="paper"]) .paper-definition,
:root:not([data-theme="paper"]) .paper-theorem,
:root:not([data-theme="paper"]) .paper-callout,
:root:not([data-theme="paper"]) .paper-milestone-card,
:root:not([data-theme="paper"]) .paper-codeblock,
:root:not([data-theme="paper"]) .paper-end-cta,
:root:not([data-theme="paper"]) .paper-toc-position,
:root:not([data-theme="paper"]) .paper-live {
  border-radius: var(--mx-radius);
}
:root:not([data-theme="paper"]) .paper-cta,
:root:not([data-theme="paper"]) .paper-btn-primary,
:root:not([data-theme="paper"]) .paper-btn-ghost,
:root:not([data-theme="paper"]) .paper-eyebrow-chip,
:root:not([data-theme="paper"]) .paper-fact-chip,
:root:not([data-theme="paper"]) .paper-table-chip,
:root:not([data-theme="paper"]) .paper-status-pill,
:root:not([data-theme="paper"]) .paper-mod-badge,
:root:not([data-theme="paper"]) .paper-brand-mark,
:root:not([data-theme="paper"]) .paper-toc-link,
:root:not([data-theme="paper"]) .paper-fig-tag,
:root:not([data-theme="paper"]) .paper-mark,
:root:not([data-theme="paper"]) .paper-section code {
  border-radius: var(--mx-radius);
}

/* ---- 2. PANELS / CARDS: dark fill + green hairline + top accent + glow ---- */
:root:not([data-theme="paper"]) .paper-toc-inner,
:root:not([data-theme="paper"]) .paper-spec-card,
:root:not([data-theme="paper"]) .paper-stat-tile,
:root:not([data-theme="paper"]) .paper-card,
:root:not([data-theme="paper"]) .paper-table-wrap,
:root:not([data-theme="paper"]) .paper-figure,
:root:not([data-theme="paper"]) .paper-definition,
:root:not([data-theme="paper"]) .paper-theorem,
:root:not([data-theme="paper"]) .paper-callout,
:root:not([data-theme="paper"]) .paper-milestone-card,
:root:not([data-theme="paper"]) .paper-toc-position {
  background: var(--mx-panel);
  border: 1px solid var(--mx-line);
  border-top: 2px solid var(--mx-line-strong);
  box-shadow: 0 0 18px var(--mx-glow), inset 0 0 26px rgba(0, 40, 20, 0.22);
}
/* left-rail callouts keep a strong left accent but gain the terminal top edge */
:root:not([data-theme="paper"]) .paper-definition,
:root:not([data-theme="paper"]) .paper-theorem,
:root:not([data-theme="paper"]) .paper-callout {
  border-left: 3px solid var(--mx-green);
}
:root:not([data-theme="paper"]) .paper-theorem {
  border-left-color: var(--mx-green);
  background: rgba(40, 255, 130, 0.07);
}
:root:not([data-theme="paper"]) .paper-callout {
  border-left-color: var(--mx-green);
}

/* hover/active/selected -> brighter border + stronger glow */
:root:not([data-theme="paper"]) .paper-card:hover,
:root:not([data-theme="paper"]) .paper-stat-tile:hover,
:root:not([data-theme="paper"]) .paper-spec-card:hover,
:root:not([data-theme="paper"]) .paper-figure:hover,
:root:not([data-theme="paper"]) .paper-milestone-card:hover,
:root:not([data-theme="paper"]) .paper-table-wrap:hover {
  border-color: var(--mx-line-strong);
  box-shadow: 0 0 26px rgba(40, 255, 130, 0.22), inset 0 0 26px rgba(0, 40, 20, 0.26);
}

/* abstract callout = terminal panel with left accent + top edge */
:root:not([data-theme="paper"]) .paper-abstract {
  background: var(--mx-panel);
  border-left: 3px solid var(--mx-green);
  border-top: 2px solid var(--mx-line-strong);
  border-right: 1px solid var(--mx-line);
  border-bottom: 1px solid var(--mx-line);
  border-radius: 0 var(--mx-radius) var(--mx-radius) 0;
  box-shadow: 0 0 18px var(--mx-glow), inset 0 0 26px rgba(0, 40, 20, 0.22);
}
/* tldr inset block */
:root:not([data-theme="paper"]) .paper-tldr {
  background: var(--mx-mark, rgba(40, 255, 130, 0.10));
  border: 1px solid var(--mx-line-strong);
  border-radius: var(--mx-radius);
}

/* notation block -> terminal inset */
:root:not([data-theme="paper"]) .paper-notation {
  background: var(--mx-panel);
  border-left: 3px solid var(--mx-line-strong);
}

/* ---- 3. PRIMARY BUTTON (Enter arena / CTA) ---- */
:root:not([data-theme="paper"]) .paper-cta,
:root:not([data-theme="paper"]) .paper-btn-primary {
  background: var(--mx-green);
  color: var(--mx-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--mx-green);
  border-radius: var(--mx-radius);
  box-shadow: 0 0 18px rgba(77, 255, 140, 0.5);
}
:root:not([data-theme="paper"]) .paper-cta::before,
:root:not([data-theme="paper"]) .paper-btn-primary::before {
  content: "> ";
  font-family: var(--font-mono);
  font-weight: 700;
}
:root:not([data-theme="paper"]) .paper-cta:hover,
:root:not([data-theme="paper"]) .paper-cta:focus-visible,
:root:not([data-theme="paper"]) .paper-btn-primary:hover,
:root:not([data-theme="paper"]) .paper-btn-primary:focus-visible {
  background: #6dffa3;
  color: var(--mx-ink);
  box-shadow: 0 0 28px rgba(77, 255, 140, 0.75);
  transform: translateY(-1px);
}

/* ---- 4. SECONDARY / GHOST BUTTON (Copy BibTeX, etc.) ---- */
:root:not([data-theme="paper"]) .paper-btn-ghost {
  background: transparent;
  border: 1px solid var(--mx-line-strong);
  color: var(--mx-green);
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--mx-radius);
}
:root:not([data-theme="paper"]) .paper-btn-ghost:hover,
:root:not([data-theme="paper"]) .paper-btn-ghost:focus-visible {
  background: rgba(77, 255, 140, 0.12);
  border-color: var(--mx-green);
  color: var(--mx-soft);
  box-shadow: 0 0 16px var(--mx-glow);
}

/* ---- 5. NAV: terminal bar ---- */
:root:not([data-theme="paper"]) .paper-nav {
  background: rgba(3, 8, 6, 0.82);
  border-bottom: 1px solid var(--mx-line-strong);
  box-shadow: 0 1px 0 rgba(90, 255, 150, 0.12), 0 8px 24px rgba(0, 0, 0, 0.4);
}
:root:not([data-theme="paper"]) .paper-brand {
  font-family: var(--font-mono);
  color: var(--mx-soft);
  letter-spacing: 0.08em;
}
:root:not([data-theme="paper"]) .paper-brand-mark {
  background: transparent;
  border: 1px solid var(--mx-green);
  color: var(--mx-green);
  border-radius: var(--mx-radius);
  box-shadow: 0 0 12px var(--mx-glow), inset 0 0 8px rgba(40, 255, 130, 0.12);
  text-shadow: 0 0 8px rgba(77, 255, 140, 0.6);
}
:root:not([data-theme="paper"]) .paper-nav-links {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
:root:not([data-theme="paper"]) .paper-nav-links a { color: var(--mx-dim); }
:root:not([data-theme="paper"]) .paper-nav-links a:hover { color: var(--mx-green); }
:root:not([data-theme="paper"]) .paper-nav-account-mobile {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--mx-dim);
}
:root:not([data-theme="paper"]) .paper-nav-account-mobile:hover,
:root:not([data-theme="paper"]) .paper-nav-account-mobile:focus-visible { color: var(--mx-green); }

/* ---- 6. CHIPS / EYEBROWS / micro-labels / pills / badges ---- */
:root:not([data-theme="paper"]) .paper-eyebrow-chip,
:root:not([data-theme="paper"]) .paper-fact-chip,
:root:not([data-theme="paper"]) .paper-table-chip,
:root:not([data-theme="paper"]) .paper-status-pill,
:root:not([data-theme="paper"]) .paper-mod-badge {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mx-green);
  border: 1px solid var(--mx-line-strong);
  background: rgba(6, 18, 12, 0.6);
  border-radius: var(--mx-radius);
}
:root:not([data-theme="paper"]) .paper-fact-chip b,
:root:not([data-theme="paper"]) .paper-table-chip,
:root:not([data-theme="paper"]) .paper-status-pill {
  color: var(--mx-green);
}
:root:not([data-theme="paper"]) .paper-fact-chip b { color: var(--mx-soft); }

/* eyebrow tags (section/header) -> mono green, bracketed if no existing ::before */
:root:not([data-theme="paper"]) .paper-eyebrow,
:root:not([data-theme="paper"]) .paper-tldr-head,
:root:not([data-theme="paper"]) .paper-toc-band-label,
:root:not([data-theme="paper"]) .paper-spec-head-label,
:root:not([data-theme="paper"]) .paper-stat-label,
:root:not([data-theme="paper"]) .paper-toc-position-label {
  font-family: var(--font-mono);
  color: var(--mx-green);
  letter-spacing: 0.16em;
}
/* bracket only the plain .paper-eyebrow that is NOT the chip variant
   (chip has its own dot child / different layout) */
:root:not([data-theme="paper"]) .paper-eyebrow:not(.paper-eyebrow-chip)::before { content: "[ "; }
:root:not([data-theme="paper"]) .paper-eyebrow:not(.paper-eyebrow-chip)::after  { content: " ]"; }

/* eyebrow chip glow dot -> matrix green */
:root:not([data-theme="paper"]) .paper-eyebrow-dot {
  background: var(--mx-green);
  box-shadow: 0 0 8px rgba(77, 255, 140, 0.9);
}

/* status pills keep state meaning but read green-terminal */
:root:not([data-theme="paper"]) .paper-status-progress {
  border-color: var(--mx-line-strong);
  background: rgba(40, 255, 130, 0.14);
  color: var(--mx-soft);
}
:root:not([data-theme="paper"]) .paper-status-exploratory {
  border-color: var(--mx-line);
  background: rgba(6, 18, 12, 0.6);
  color: var(--mx-dim);
}

/* spec card live + toc live dots -> matrix green glow */
:root:not([data-theme="paper"]) .paper-spec-live { color: var(--mx-green); }
:root:not([data-theme="paper"]) .paper-spec-live-dot,
:root:not([data-theme="paper"]) .paper-live-pulse {
  background: var(--mx-green);
  box-shadow: 0 0 10px rgba(77, 255, 140, 0.8);
}

/* ---- 7. INPUTS (defensive: any text inputs added later) ---- */
:root:not([data-theme="paper"]) input[type="text"],
:root:not([data-theme="paper"]) input[type="search"],
:root:not([data-theme="paper"]) input[type="email"],
:root:not([data-theme="paper"]) textarea {
  background: rgba(6, 18, 12, 0.6);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius);
  color: var(--mx-soft);
  font-family: var(--font-mono);
  caret-color: var(--mx-green);
}
:root:not([data-theme="paper"]) input::placeholder,
:root:not([data-theme="paper"]) textarea::placeholder { color: var(--mx-dim); }
:root:not([data-theme="paper"]) input:focus,
:root:not([data-theme="paper"]) textarea:focus {
  outline: none;
  border-color: var(--mx-green);
  box-shadow: 0 0 14px var(--mx-glow);
}

/* ---- 8. HEADINGS: green accent words glow; mono section nums ---- */
:root:not([data-theme="paper"]) .paper-title {
  color: var(--mx-text, #d7f7e3);
}
:root:not([data-theme="paper"]) .paper-num,
:root:not([data-theme="paper"]) .paper-section-title .paper-num {
  font-family: var(--font-mono);
  color: var(--mx-green);
  text-shadow: var(--mx-text-shadow);
}
:root:not([data-theme="paper"]) .paper-mark {
  color: var(--mx-green);
  background: rgba(40, 255, 130, 0.14);
  border: 1px solid var(--mx-line);
}
/* the lime tick before section titles */
:root:not([data-theme="paper"]) .paper-section-title::before {
  background: var(--mx-green);
  box-shadow: 0 0 12px rgba(77, 255, 140, 0.8);
}

/* ---- 9. DIVIDERS / separators -> thin green line ---- */
:root:not([data-theme="paper"]) .paper-header,
:root:not([data-theme="paper"]) .paper-section-title,
:root:not([data-theme="paper"]) .paper-meta-bottom,
:root:not([data-theme="paper"]) .paper-toc-head,
:root:not([data-theme="paper"]) .paper-toc-band-label,
:root:not([data-theme="paper"]) .paper-spec-head {
  border-color: var(--mx-line);
}
:root:not([data-theme="paper"]) .paper-meta {
  border-top-color: var(--mx-line);
}

/* ---- 10. NUMERALS / stat values / leaderboard -> mono green tint ---- */
:root:not([data-theme="paper"]) .paper-stat-value,
:root:not([data-theme="paper"]) .paper-toc-ring-num,
:root:not([data-theme="paper"]) .paper-toc-rail,
:root:not([data-theme="paper"]) .paper-eq-num {
  font-family: var(--font-mono);
  color: var(--mx-soft);
}
:root:not([data-theme="paper"]) .paper-stat-tile::before {
  background: linear-gradient(180deg, var(--mx-green), transparent);
  opacity: 0.7;
}

/* ---- BibTeX / code blocks -> terminal window ---- */
:root:not([data-theme="paper"]) .paper-codeblock,
:root:not([data-theme="paper"]) .paper-callout pre {
  background: var(--mx-code, rgba(2, 10, 6, 0.85));
  border: 1px solid var(--mx-line);
  border-top: 2px solid var(--mx-line-strong);
  border-radius: var(--mx-radius);
  color: var(--mx-soft);
  box-shadow: inset 0 0 24px rgba(0, 40, 20, 0.3);
}
:root:not([data-theme="paper"]) .paper-section code,
:root:not([data-theme="paper"]) .paper-table code,
:root:not([data-theme="paper"]) .paper-tldr code {
  color: var(--mx-green);
  background: rgba(40, 255, 130, 0.12);
}

/* ---- TABLES -> terminal grid ---- */
:root:not([data-theme="paper"]) .paper-table th {
  background: rgba(40, 255, 130, 0.12);
  color: var(--mx-green);
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  border-bottom: 2px solid var(--mx-line-strong);
}
:root:not([data-theme="paper"]) .paper-table th,
:root:not([data-theme="paper"]) .paper-table td {
  border-bottom-color: var(--mx-line);
}
:root:not([data-theme="paper"]) .paper-table tbody tr:hover {
  background: rgba(40, 255, 130, 0.06);
}
:root:not([data-theme="paper"]) .paper-table-rooms td:first-child {
  font-family: var(--font-mono);
  color: var(--mx-green);
}
:root:not([data-theme="paper"]) .paper-table-rooms td:first-child::before {
  background: var(--mx-green);
  opacity: 0.85;
}

/* ---- TOC sidebar -> terminal list ---- */
:root:not([data-theme="paper"]) .paper-toc-title { color: var(--mx-soft); }
:root:not([data-theme="paper"]) .paper-toc-link { color: var(--mx-dim); }
:root:not([data-theme="paper"]) .paper-toc-link:hover {
  background: rgba(40, 255, 130, 0.08);
  color: var(--mx-soft);
}
:root:not([data-theme="paper"]) .paper-toc-link.is-active {
  background: rgba(40, 255, 130, 0.12);
  color: var(--mx-green);
  border-left-color: var(--mx-green);
}
:root:not([data-theme="paper"]) .paper-toc-link.is-active .paper-toc-rail { color: var(--mx-green); }
:root:not([data-theme="paper"]) .paper-toc-meta b { color: var(--mx-soft); font-family: var(--font-mono); }
:root:not([data-theme="paper"]) .paper-ring-fill {
  stroke: var(--mx-green);
  filter: drop-shadow(0 0 4px rgba(77, 255, 140, 0.6));
}
:root:not([data-theme="paper"]) .paper-toc-position-val b { color: var(--mx-green); font-family: var(--font-mono); }

/* ---- Figures / fig tag / milestone nodes -> matrix accents ---- */
:root:not([data-theme="paper"]) .paper-figure {
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(40, 255, 130, 0.08), transparent 60%),
    var(--mx-panel);
}
:root:not([data-theme="paper"]) .paper-fig-tag {
  background: var(--mx-ink);
  border-color: var(--mx-line-strong);
  color: var(--mx-green);
  font-family: var(--font-mono);
}
:root:not([data-theme="paper"]) .paper-milestone::before,
:root:not([data-theme="paper"]) .paper-timeline::before {
  background: linear-gradient(180deg, var(--mx-green), rgba(40, 255, 130, 0.15));
}
:root:not([data-theme="paper"]) .paper-milestone-node {
  background: var(--mx-ink);
  border-color: var(--mx-green);
  box-shadow: 0 0 10px rgba(77, 255, 140, 0.7);
}
:root:not([data-theme="paper"]) .paper-milestone-title { color: var(--mx-soft); }

/* heads inside callout/def/theorem/cards -> green */
:root:not([data-theme="paper"]) .paper-def-head,
:root:not([data-theme="paper"]) .paper-callout-head,
:root:not([data-theme="paper"]) .paper-card-head,
:root:not([data-theme="paper"]) .paper-spec-head-label {
  color: var(--mx-green);
}
:root:not([data-theme="paper"]) .paper-thm-head { color: var(--mx-green); }

/* equations -> green-tinted inset */
:root:not([data-theme="paper"]) .paper-equation,
:root:not([data-theme="paper"]) .paper-eq-inline {
  background: rgba(40, 255, 130, 0.07);
}

/* end CTA band -> matrix terminal frame */
:root:not([data-theme="paper"]) .paper-end-cta {
  background: var(--mx-panel);
  border: 1px solid var(--mx-line);
  border-top: 2px solid var(--mx-line-strong);
  box-shadow: 0 0 28px var(--mx-glow), inset 0 0 30px rgba(0, 40, 20, 0.25);
}
:root:not([data-theme="paper"]) .paper-end-cta-glow {
  background: radial-gradient(60% 90% at 50% 120%, rgba(40, 255, 130, 0.2), transparent 70%);
}
:root:not([data-theme="paper"]) .paper-end-cta-title {
  color: var(--mx-soft);
  text-shadow: var(--mx-text-shadow);
}

/* reading progress bar -> matrix green */
:root:not([data-theme="paper"]) .reading-progress-bar {
  background: linear-gradient(90deg, var(--mx-green), var(--mx-soft));
  box-shadow: 0 0 8px rgba(77, 255, 140, 0.6);
}

/* ---- PRINT: restore clean paper look (matrix vars must not bleed to print) ---- */
@media print {
  :root:not([data-theme="paper"]) {
    --paper-bg: #ffffff;
    --paper-surface: #ffffff;
    --paper-surface-soft: #f7f4ea;
    --paper-text: #15171f;
    --paper-text-soft: rgba(21, 23, 31, 0.85);
    --paper-text-mute: rgba(21, 23, 31, 0.62);
    --paper-accent: #7a4f00;
    --paper-accent-strong: #5a3a00;
    --paper-link: #5a3a00;
    --paper-border: rgba(21, 23, 31, 0.18);
    --paper-border-strong: rgba(122, 79, 0, 0.6);
    --paper-rule: rgba(21, 23, 31, 0.18);
    --paper-eq-bg: rgba(122, 79, 0, 0.08);
    --paper-code-bg: rgba(21, 23, 31, 0.08);
    --paper-mark-bg: rgba(247, 181, 0, 0.32);
    --paper-shadow: none;
    --mx-green: #7a4f00;
    --mx-soft: #15171f;
    --mx-dim: rgba(21, 23, 31, 0.62);
    --mx-line: rgba(21, 23, 31, 0.18);
    --mx-line-strong: rgba(122, 79, 0, 0.6);
    --mx-glow: transparent;
    --mx-panel: #ffffff;
    --mx-ink: #ffffff;
    --mx-text-shadow: none;
  }
  :root:not([data-theme="paper"]) .paper-nav,
  :root:not([data-theme="paper"]) .paper-toc,
  :root:not([data-theme="paper"]) .paper-cta,
  :root:not([data-theme="paper"]) #copy-bibtex {
    box-shadow: none;
  }
  :root:not([data-theme="paper"]) .paper-codeblock,
  :root:not([data-theme="paper"]) .paper-callout pre,
  :root:not([data-theme="paper"]) .paper-toc-inner,
  :root:not([data-theme="paper"]) .paper-spec-card,
  :root:not([data-theme="paper"]) .paper-card,
  :root:not([data-theme="paper"]) .paper-figure,
  :root:not([data-theme="paper"]) .paper-definition,
  :root:not([data-theme="paper"]) .paper-theorem,
  :root:not([data-theme="paper"]) .paper-callout,
  :root:not([data-theme="paper"]) .paper-milestone-card,
  :root:not([data-theme="paper"]) .paper-end-cta {
    box-shadow: none;
    background: #fff;
  }
  :root:not([data-theme="paper"]) .paper-title,
  :root:not([data-theme="paper"]) .paper-num,
  :root:not([data-theme="paper"]) .paper-end-cta-title {
    text-shadow: none;
  }
}

/* ===== matrix terminal typography (whole page) ===== */
:root {
  --font-display: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-body: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", Consolas, monospace;
}
body, body.paper, .paper-article, .paper-subtitle, .paper-theorem {
  font-family: var(--font-body);
}

/* Brand logo: green glyph (matches button color), no box */
.brand-glyph{display:block;width:100%;height:100%;background-color:currentColor;-webkit-mask:url("/icons/betta-fish.svg") center/contain no-repeat;mask:url("/icons/betta-fish.svg") center/contain no-repeat;-webkit-mask-mode:alpha;mask-mode:alpha;}
.paper-brand-mark{border:none!important;background:none!important;background-image:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;color:#4dff8c!important;text-shadow:none!important;}