:root {
  --bg: #07111c;
  --bg-deep: #030811;
  --panel: rgba(8, 17, 30, 0.86);
  --panel-alt: rgba(12, 24, 39, 0.76);
  --paper: #f5efe0;
  --ink: #08131d;
  --ink-soft: #203042;
  --text: #edf3f7;
  --muted: #9fb1c3;
  --line: rgba(139, 176, 209, 0.18);
  --line-strong: rgba(255, 255, 255, 0.12);
  /* TIER-1: semantic relation hues (the only meaningful color axis) */
  --rel-equivalence: #9be58e;   /* proves both ways */
  --rel-consequence: #63cfff;   /* one-way implies */
  --rel-scope: #ffbd66;         /* scope / condition */
  --rel-warning: #ed9be6;       /* trap / weaker / false friend */
  --rel-neutral: rgba(159, 177, 195, 0.46);
  --rel-open: rgba(159, 177, 195, 0.7);  /* dashed; for conjectured/open relations (used by a future complexity zoo) */
  --point-set: #ffbd66;
  --algebraic: #6ad7ff;
  --graphics: #9be58e;
  --core: #ff8f65;
  --bridge: #63cfff;
  --theory: #f0cd71;
  --emerging: #8de8bc;
  --niche: #ed9be6;
  /* TIER-2: compactness section identity tints of #6ad7ff */
  --compact-cover-color: #aae8ff;
  --compact-closed-color: #6ad7ff;
  --compact-convergence-color: #8fdfff;
  --compact-metric-color: #56b9e6;
  --compact-product-color: #c4f0ff;
  --compact-euclidean-color: #79c5e8;
  --compact-variant-color: #9ee2ff;
  --compact-left-color: #8fdfff;
  --compact-right-color: #56b9e6;
  /* TIER-2: mst section identity tints of #9be58e */
  --mst-definition-color: #9be58e;
  --mst-cut-color: #b6edab;
  --mst-cycle-color: #7fce72;
  --mst-exchange-color: #cdf2c5;
  --mst-algorithm-color: #8bd97f;
  --mst-matroid-color: #a8e89c;
  --mst-path-color: #6fc063;
  --mst-threshold-color: #c0efb6;
  --mst-lexicographic-color: #92e084;
  --mst-variant-color: #b0eba5;
  --mst-stronger-color: #7fce72;
  --mst-warning-color: var(--rel-warning);
  --mst-consequence-color: var(--rel-consequence);
  /* TIER-2: operators section identity tints of #c9b7ff */
  --operator-spatial-color: #c9b7ff;
  --operator-frequency-color: #ddd0ff;
  --operator-derivative-color: #b29bf2;
  --operator-pde-color: #ece4ff;
  --operator-filter-color: #bca8f7;
  --operator-discrete-color: #d4c6ff;
  --operator-warning-color: var(--rel-warning);
  /* TIER-2: fractals section identity tints of #7ae7c7 */
  --fractal-classical-color: #7ae7c7;
  --fractal-measure-color: #9eeed8;
  --fractal-covering-color: #5ed1b0;
  --fractal-local-color: #b9f3e5;
  --fractal-selfsimilar-color: #8aebcf;
  --fractal-spectral-color: #6cdcbd;
  --fractal-multifractal-color: #aef0df;
  --fractal-example-color: #5cc9aa;
  --fractal-stochastic-color: #92ecd4;
  --fractal-warning-color: var(--rel-warning);
  /* TIER-2: noise section identity tints of #ed9be6 */
  --noise-source-color: #ed9be6;
  --noise-process-color: #f3b8ee;
  --noise-increment-color: #df84d6;
  --noise-parameter-color: #f6cbf2;
  --noise-spectrum-color: #e88fdf;
  --noise-geometry-color: #f0a9ea;
  --noise-memory-color: #d976cf;
  --noise-graphics-color: #f4c0f0;
  --noise-recipe-color: #e597dd;
  --noise-warning-color: var(--rel-warning);
  /* TIER-2: integrals section identity tints of #74a7ff */
  --integral-classical-color: #74a7ff;
  --integral-limit-color: #5b8ce6;
  --integral-measure-color: #9bc0ff;
  --integral-gauge-color: #8ab3ff;
  --integral-weighted-color: #b3d0ff;
  --integral-weak-color: #6a9cf2;
  --integral-criterion-color: #a6c7ff;
  /* TIER-2: field-integrals section identity tints of #8de8bc */
  --field-static-color: #8de8bc;
  --field-moving-color: #6fce9f;
  --field-transport-color: #aef0d0;
  --field-warning-color: var(--rel-warning);
  /* TIER-2: trig-complex section identity tints of #ffbd66 */
  --trig-complex-color: #ffbd66;
  --trig-circular-color: #ffd494;
  --trig-identity-color: #f0a747;
  --trig-hyperbolic-color: #ffcb80;
  --trig-continuation-color: #e6993a;
  --trig-warning-color: var(--rel-warning);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.22);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

/* Entry guidance: let a proof web lead; keep the full topic directory available. */
.proof-index { min-width: 0; margin-left: auto; max-width: 100%; }
.proof-index > summary { color: var(--paper); cursor: pointer; padding: 10px 13px; border: 1px solid var(--line); border-radius: 14px; font-size: .9rem; }
.proof-index[open] { flex-basis: 100%; }
.proof-index .topbar-links { margin-top: 16px; }
.proof-starts { display: grid; gap: 8px; margin-top: 22px; }
.proof-starts a { display: block; padding: 12px 15px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; background: rgba(106,215,255,.035); }
.proof-starts a:hover { border-color: var(--rel-consequence); background: rgba(106,215,255,.075); }
.proof-starts strong, .proof-starts span { display: block; }
.proof-starts strong { color: var(--paper); font-size: .94rem; }
.proof-starts span { color: var(--muted); font-size: .82rem; margin-top: 3px; }
.proof-starts a:focus-visible, .proof-index summary:focus-visible, .proof-origin summary:focus-visible { outline: 2px solid var(--rel-consequence); outline-offset: 4px; }
.proof-route-sketch { display: block; width: 100%; height: auto; max-height: 220px; overflow: visible; color: var(--rel-consequence); }
.route-via { stroke: var(--rel-consequence); stroke-width: 2; opacity: .6; }
.route-direct { stroke: var(--rel-consequence); stroke-width: 4; }
.route-statements circle { fill: #102b3a; stroke: var(--rel-consequence); stroke-width: 1.5; }
.route-letters { fill: var(--paper); font: 600 18px "Space Grotesk",sans-serif; text-anchor: middle; }
.route-caption { fill: var(--muted); font: 11px "Space Grotesk",sans-serif; text-anchor: middle; }
.proof-origin { border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); font-size: .85rem; }
.proof-origin summary { cursor: pointer; }
.proof-origin .chapter-cloud { margin: 14px 0; }

/* TIER-2: one identity hue per section */
#compactness { --section-accent: #6ad7ff; }
#mst { --section-accent: #9be58e; }
#operators { --section-accent: #c9b7ff; }
#trig-complex { --section-accent: #ffbd66; }
#fractals { --section-accent: #7ae7c7; }
#noise { --section-accent: #ed9be6; }
#integrals { --section-accent: #74a7ff; }
#field-integrals { --section-accent: #8de8bc; }
#axioms { --section-accent: #f0cd71; }

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Dark root canvas so fast scrolling can never flash the default white
     backdrop through gaps before the body gradient repaints. */
  background: #040911;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text);
  background-color: #07111c;
  background-image:
    radial-gradient(circle at 14% 18%, rgba(255, 189, 102, 0.16), transparent 28%),
    linear-gradient(180deg, #08111b 0%, #040911 100%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 48px
    ),
    radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.045), transparent 24%);
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

.page-shell {
  position: relative;
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto;
  padding: 20px 0 72px;
}

.hero,
.section {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.hero {
  min-height: 580px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.9fr);
  gap: 28px;
  padding: 24px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(6, 13, 23, 0.95), rgba(13, 25, 40, 0.78)),
    radial-gradient(circle at top right, rgba(106, 215, 255, 0.14), transparent 28%);
}

.hero-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}

.topbar,
.hero-copy,
.hero-panel {
  position: relative;
  z-index: 1;
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  font-family: 'Fraunces', serif;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.topbar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.topbar-links a {
  color: var(--muted);
  text-decoration: none;
}

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

.hero-copy {
  align-self: end;
  padding: 12px 4px 10px;
}

.eyebrow,
.panel-kicker,
.section-heading .eyebrow {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.73rem;
  color: #f3c87a;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  line-height: 1.04;
}

.hero h1 {
  max-width: 11ch;
  font-size: clamp(3rem, 6.6vw, 5.8rem);
}

.lede,
.section-heading p,
.tiny-note,
.muted,
.fact-label,
.metric-label,
.source-note,
.detail-card p,
.axiom-detail p,
.space-copy p,
.graphics-detail p {
  color: var(--muted);
}

.lede {
  max-width: 64ch;
  margin: 18px 0 0;
  font-size: 1.06rem;
  line-height: 1.65;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.stat {
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid var(--line-strong);
  background: rgba(245, 239, 224, 0.06);
  backdrop-filter: blur(12px);
}

.stat-value {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--paper);
}

.stat-label {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.hero-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.09), rgba(245, 239, 224, 0.03));
}

.hero-panel h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.chapter-cloud,
.filter-group,
.badge-row,
.detail-badges,
.tag-row,
.source-strip,
.related-list,
.roadmap-tags,
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chapter-pill,
.filter-chip,
.badge,
.tag,
.source-strip a,
.roadmap-tag,
.pill {
  border-radius: 999px;
  padding: 7px 12px;
  border: 1px solid transparent;
}

.chapter-pill {
  background: rgba(245, 239, 224, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--paper);
  font-size: 0.82rem;
}

.tiny-note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

.section {
  margin-top: 28px;
  padding: 28px;
  border-radius: 30px;
  background: linear-gradient(180deg, var(--panel), var(--panel-alt));
}

.section-heading {
  max-width: 72ch;
  margin-bottom: 22px;
}

.section-heading h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
}

.section-heading p:last-child {
  margin: 14px 0 0;
  line-height: 1.65;
}

.control-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
  gap: 16px;
  margin-bottom: 22px;
}

.search-box,
.filter-block {
  display: block;
  padding: 16px;
  border-radius: 22px;
  background: rgba(245, 239, 224, 0.06);
  border: 1px solid var(--line-strong);
}

.search-box span,
.filter-block span {
  display: block;
  margin-bottom: 10px;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.search-box input {
  width: 100%;
  border: 0;
  outline: none;
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--text);
  background: rgba(4, 10, 18, 0.82);
}

.filter-chip {
  cursor: pointer;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.filter-chip.is-active,
.filter-chip:hover {
  background: rgba(255, 189, 102, 0.16);
  border-color: rgba(255, 189, 102, 0.34);
}

.atlas-layout {
  display: grid;
  grid-template-columns: minmax(320px, 410px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.card-stack,
.space-list,
.counterexample-list,
.graphics-list {
  display: grid;
  gap: 12px;
}

.card-stack {
  max-height: 920px;
  overflow: auto;
  padding-right: 6px;
}

.concept-card,
.space-card,
.counterexample-card,
.graphics-card,
.axiom-node {
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 22px;
  background: rgba(245, 239, 224, 0.05);
  color: var(--text);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.concept-card,
.space-card,
.counterexample-card,
.graphics-card {
  padding: 18px;
}

.concept-card:hover,
.space-card:hover,
.counterexample-card:hover,
.graphics-card:hover,
.axiom-node:hover {
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}

.concept-card.is-active,
.space-card.is-active,
.counterexample-card.is-active,
.graphics-card.is-active,
.axiom-node.is-active {
  border-color: rgba(255, 189, 102, 0.42);
  background: rgba(255, 189, 102, 0.11);
  transform: translateX(4px);
}

.concept-card h3,
.space-card h3,
.counterexample-card h3,
.graphics-card h3 {
  font-size: 1.18rem;
  margin-bottom: 8px;
}

.card-copy,
.graphics-card p,
.counterexample-card p,
.space-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.detail-card,
.axiom-detail,
.counterexample-detail,
.space-detail,
.graphics-detail {
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.detail-card {
  position: sticky;
  top: 24px;
  padding: 28px;
  min-height: 420px;
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(231, 238, 242, 0.94));
  color: var(--ink);
}

.detail-card .eyebrow,
.space-detail .eyebrow {
  color: #7d5b1c;
}

.detail-title {
  margin-top: 8px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--ink);
}

.detail-summary {
  margin: 14px 0 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

.detail-grid,
.metric-grid,
.graphics-grid {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-grid,
.graphics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fact,
.metric,
.graphics-metric {
  padding: 14px 15px;
  border-radius: 18px;
  background: rgba(8, 19, 29, 0.06);
}

.fact-label,
.metric-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fact-value,
.metric-value,
.graphics-value {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.4;
}

.detail-block + .detail-block,
.graphics-block + .graphics-block {
  margin-top: 18px;
}

.detail-block h3,
.graphics-block h3,
.space-copy h3,
.axiom-detail h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--ink);
}

.detail-block p,
.graphics-block p,
.space-copy p {
  margin: 0;
  line-height: 1.7;
  color: var(--ink-soft);
}

.badge {
  font-size: 0.78rem;
  line-height: 1;
}

.badge.point-set {
  background: rgba(255, 189, 102, 0.18);
  color: rgb(255, 189, 102);
}

.badge.algebraic {
  background: rgba(106, 215, 255, 0.18);
  color: rgb(106, 215, 255);
}

.badge.graphics {
  background: rgba(155, 229, 142, 0.24);
  color: rgb(155, 229, 142);
}

.badge.core {
  background: rgba(255, 143, 101, 0.18);
  color: rgb(255, 143, 101);
}

.badge.bridge {
  background: rgba(99, 207, 255, 0.18);
  color: rgb(99, 207, 255);
}

.badge.theory {
  background: rgba(240, 205, 113, 0.22);
  color: rgb(240, 205, 113);
}

.badge.emerging {
  background: rgba(141, 232, 188, 0.24);
  color: rgb(141, 232, 188);
}

.badge.niche {
  background: rgba(237, 155, 230, 0.22);
  color: rgb(237, 155, 230);
}

.tag,
.related-chip,
.roadmap-tag,
.pill {
  border: 0;
  background: rgba(8, 19, 29, 0.08);
  color: var(--ink);
}

.tag {
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
}

.related-chip {
  cursor: pointer;
}

.related-chip:hover {
  background: rgba(8, 19, 29, 0.14);
}

.compactness-workspace {
  display: grid;
  gap: 18px;
}

.compact-cover {
  --compact-accent: var(--compact-cover-color);
}

.compact-closed-family {
  --compact-accent: var(--compact-closed-color);
}

.compact-convergence {
  --compact-accent: var(--compact-convergence-color);
}

.compact-metric {
  --compact-accent: var(--compact-metric-color);
}

.compact-product {
  --compact-accent: var(--compact-product-color);
}

.compact-euclidean {
  --compact-accent: var(--compact-euclidean-color);
}

.compact-variant {
  --compact-accent: var(--compact-variant-color);
}

.compactness-controls {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: 16px;
}

.compactness-note {
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid var(--line-strong);
  background: rgba(245, 239, 224, 0.06);
}

.compactness-note > p,
.compactness-note > span {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.compactness-note > span {
  display: block;
  margin-top: 8px;
  color: var(--paper);
}

.compact-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.compact-legend-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.compact-legend-item i {
  grid-row: span 2;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--compact-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--compact-accent) 18%, transparent);
}

.compact-legend-item strong {
  color: var(--paper);
  font-size: 0.82rem;
  line-height: 1.1;
}

.compact-legend-item em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.72rem;
  line-height: 1.25;
}

.compact-relation-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.compact-relation-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 14px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.76rem;
  line-height: 1.3;
}

.relation-key {
  position: relative;
  flex: 0 0 48px;
  height: 14px;
  background:
    linear-gradient(90deg, rgba(84, 186, 82, 0.95), rgba(84, 186, 82, 0.95)),
    linear-gradient(90deg, rgba(255, 143, 101, 0.95), rgba(255, 143, 101, 0.95));
  background-position: center 5px, center 9px;
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 1px;
}

.relation-key::before,
.relation-key::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 1.5px;
  border-radius: 999px;
}

.relation-key::before {
  background: rgba(84, 186, 82, 0.95);
  left: 45%;
  top: 5px;
  transform: translate(-100%, -50%) rotate(48deg);
  transform-origin: right center;
}

.relation-key::after {
  background: rgba(255, 143, 101, 0.95);
  left: 55%;
  top: 9px;
  transform: translate(0, -50%) rotate(48deg);
  transform-origin: left center;
}

.relation-key.one-way {
  background:
    linear-gradient(90deg, rgba(84, 186, 82, 0.95), rgba(84, 186, 82, 0.95));
  background-position: center 7px;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.relation-key.one-way::before {
  top: 7px;
}

.relation-key.one-way::after {
  display: none;
}

.relation-key.dashed {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 189, 102, 0.95) 0 7px,
      transparent 7px 12px
    );
  background-position: center 7px;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.relation-key.dashed::before {
  background: rgba(255, 189, 102, 0.95);
  top: 7px;
}

.relation-key.dashed::after {
  display: none;
}

.compactness-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  gap: 22px;
  align-items: start;
}

.compact-graph-panel {
  display: grid;
  gap: 14px;
}

.compact-graph {
  min-height: 640px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid var(--line-strong);
  overflow: auto;
  background:
    linear-gradient(180deg, rgba(245, 239, 224, 0.06), rgba(245, 239, 224, 0.02)),
    rgba(8, 17, 30, 0.58);
}

.compact-orbit {
  position: relative;
  width: min(100%, 680px);
  min-width: 560px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.compact-complete-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.compact-edge-hitbox {
  fill: none;
  stroke: transparent;
  stroke-width: 6;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

.compact-edge {
  --compact-relation-color: var(--rel-neutral);
  --compact-relation-active: var(--rel-scope);
  fill: none;
  stroke: var(--compact-relation-color);
  stroke-width: 0.45;
  stroke-linecap: round;
  opacity: 0.32;
  cursor: pointer;
  transition: stroke 150ms ease, stroke-width 150ms ease, opacity 150ms ease;
}

.compact-edge-forward {
  --compact-relation-color: var(--rel-equivalence);
  --compact-relation-active: var(--rel-equivalence);
  opacity: 0.5;
}

.compact-edge-backward {
  --compact-relation-color: var(--rel-scope);
  --compact-relation-active: var(--rel-scope);
  opacity: 0.5;
}

.compact-edge.compact-scope {
  opacity: 0.4;
}

.compact-edge.compact-warning {
  opacity: 0.4;
}

.compact-edge.compact-trivial-proof {
  stroke-dasharray: 1.6 1.5;
}

.compact-edge-half-arrow {
  fill: var(--compact-relation-color);
  stroke: none;
  stroke-dasharray: none;
}

.compact-edge:hover,
.compact-edge.is-active {
  stroke: var(--compact-relation-active);
  stroke-width: 0.4;
  opacity: 0.9;
}

.compact-edge.is-hovered:not(.is-active) {
  stroke: var(--compact-relation-active);
  stroke-width: 0.36;
  opacity: 0.62;
}

.compact-edge.is-active {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--compact-relation-active) 70%, transparent));
}

.compact-edge-half-arrow:hover,
.compact-edge-half-arrow.is-active {
  fill: var(--compact-relation-active);
  stroke: none;
  opacity: 0.92;
}

.compact-edge-half-arrow.is-hovered:not(.is-active) {
  fill: var(--compact-relation-active);
  opacity: 0.7;
}

.compact-node {
  position: absolute;
  --compact-accent: var(--compact-cover-color);
  width: 124px;
  min-height: 104px;
  transform: translate(-50%, -50%);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 45%, transparent);
  border-radius: 18px;
  cursor: pointer;
  color: var(--text);
  background: color-mix(in srgb, var(--section-accent) 16%, rgba(7, 17, 28, 0.92));
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.compact-node:hover {
  transform: translate(-50%, -50%) scale(1.04);
  border-color: var(--compact-accent);
  background: rgba(35, 35, 24, 0.94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3), 0 0 0 4px color-mix(in srgb, var(--compact-accent) 16%, transparent);
}

.compact-node.is-active {
  transform: translate(-50%, -50%) scale(1.045);
  background: rgba(35, 35, 24, 0.96);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--section-accent);
}

.compact-node .compact-symbol {
  display: grid;
  place-items: center;
  min-width: 29px;
  height: 28px;
  padding: 0 6px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--compact-accent);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1;
}

.compact-node strong {
  font-size: 0.78rem;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.compact-node small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.compact-node em {
  font-size: 0.68rem;
  font-style: normal;
  color: var(--graphics);
}

.compact-edge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
  max-height: none;
  overflow: visible;
  padding: 2px 0;
  transition: max-height 180ms ease;
}

.compact-edge-chip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  color: var(--text);
  background: rgba(245, 239, 224, 0.05);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.compact-edge-chip.compact-equivalent {
  border-left: 3px solid var(--rel-equivalence);
}

.compact-edge-chip.compact-implies {
  border-left: 3px solid var(--rel-consequence);
}

.compact-edge-chip.compact-scope {
  border-left: 3px solid var(--rel-scope);
}

.compact-edge-chip.compact-warning {
  border-left: 3px solid var(--rel-warning);
}

.compact-edge-chip.compact-trivial-proof {
  background-image: linear-gradient(
    90deg,
    rgba(255, 189, 102, 0.14) 0 8px,
    transparent 8px 14px
  );
}

.compact-edge-chip:hover,
.compact-edge-chip.is-hovered:not(.is-active) {
  border-color: rgba(255, 189, 102, 0.36);
  background: rgba(255, 189, 102, 0.1);
}

.compact-edge-chip.is-active {
  border-color: rgba(255, 189, 102, 0.68);
  background: rgba(255, 189, 102, 0.14);
  box-shadow: 0 0 0 1px rgba(255, 189, 102, 0.16), 0 12px 24px rgba(255, 189, 102, 0.08);
  transform: translateY(-1px);
}

.compact-edge-chip span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.78rem;
}

.compact-mini-symbol {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--compact-accent);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.compact-edge-chip strong {
  font-size: 0.74rem;
  color: var(--paper);
}

.compact-detail {
  position: sticky;
  top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(231, 238, 242, 0.94));
  color: var(--ink);
  box-shadow: var(--shadow);
}

.compact-detail > * {
  animation: compact-content-in 260ms ease both;
}

.compact-detail .eyebrow {
  color: #7d5b1c;
}

.compact-detail .detail-title {
  font-size: clamp(1.7rem, 3vw, 2.55rem);
}

.compact-detail .detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-title-with-symbol,
.compact-relation-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  line-height: 1.18;
}

.compact-detail .compact-relation-title {
  font-size: clamp(1.15rem, 2vw, 1.7rem);
}

.compact-title-with-symbol span,
.compact-relation-title span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--compact-accent);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
}

.compact-relation-title span.proof-left {
  background: var(--compact-left-color);
}

.compact-relation-title span.proof-right {
  background: var(--compact-right-color);
}

.compact-relation-title em {
  color: #6c4f18;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 800;
}

.compact-demo-card {
  margin: 22px 0;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  background: rgba(8, 19, 29, 0.05);
  transition: transform 180ms ease, background 180ms ease;
}

.compact-demo-card:hover {
  transform: translateY(-2px);
  background: rgba(8, 19, 29, 0.065);
}

.compact-demo-title {
  margin-bottom: 10px;
  color: var(--ink);
  font-weight: 700;
}

.compact-demo-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.25)),
    repeating-linear-gradient(
      90deg,
      rgba(8, 19, 29, 0.04) 0 1px,
      transparent 1px 24px
    );
}

.compact-bridge-box {
  stroke-width: 3.2;
}

.compact-bridge-box.left {
  fill: rgba(99, 207, 255, 0.16);
  stroke: rgba(44, 122, 179, 0.82);
}

.compact-bridge-box.right {
  fill: rgba(255, 143, 101, 0.17);
  stroke: rgba(201, 83, 42, 0.84);
}

.compact-bridge-arrow {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compact-bridge-arrowhead {
  filter: drop-shadow(0 1px 1px rgba(15, 42, 58, 0.16));
}

.compact-bridge-arrow.forward {
  stroke: #2c7ab3;
}

.compact-bridge-arrow.backward {
  stroke: #c9532a;
}

.compact-bridge-arrow.trivial {
  stroke-dasharray: 6 5;
}

.compact-bridge-arrow.muted {
  stroke: rgba(15, 42, 58, 0.24);
  stroke-dasharray: 7 7;
}

.compact-bridge-side,
.compact-bridge-title,
.compact-bridge-proof,
.compact-bridge-dot-label {
  font-family: 'Space Grotesk', sans-serif;
}

.compact-bridge-side {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.compact-bridge-side.left,
.compact-bridge-title.left {
  fill: #0f5877;
}

.compact-bridge-side.right,
.compact-bridge-title.right {
  fill: #7d2504;
}

.compact-bridge-title {
  font-size: 13px;
  font-weight: 800;
  dominant-baseline: hanging;
}

.compact-bridge-proof {
  fill: #0f2a3a;
  font-size: 13px;
  font-weight: 800;
}

.compact-bridge-proof.forward {
  fill: #0f5877;
}

.compact-bridge-proof.backward {
  fill: #7d2504;
}

.compact-bridge-dot {
  fill: #f5efe0;
  stroke: #0f2a3a;
  stroke-width: 3;
}

.compact-bridge-dot-label {
  fill: #0f2a3a;
  font-size: 11px;
  font-weight: 900;
}

.badge.compact-world {
  background: rgba(106, 215, 255, 0.18);
  color: rgb(106, 215, 255);
}

.badge.compact-cover {
  background: rgba(255, 189, 102, 0.2);
  color: rgb(255, 189, 102);
}

.badge.compact-closed-family {
  background: rgba(255, 143, 101, 0.2);
  color: rgb(255, 143, 101);
}

.badge.compact-convergence {
  background: rgba(106, 215, 255, 0.2);
  color: rgb(106, 215, 255);
}

.badge.compact-metric {
  background: rgba(155, 229, 142, 0.26);
  color: rgb(155, 229, 142);
}

.badge.compact-product {
  background: rgba(237, 155, 230, 0.22);
  color: rgb(237, 155, 230);
}

.badge.compact-euclidean {
  background: rgba(240, 205, 113, 0.26);
  color: rgb(240, 205, 113);
}

.badge.compact-variant {
  background: rgba(141, 232, 188, 0.24);
  color: rgb(141, 232, 188);
}

.badge.compact-caveat,
.badge.compact-scope {
  background: rgba(255, 143, 101, 0.18);
  color: rgb(255, 143, 101);
}

.badge.compact-implies {
  background: rgba(99, 207, 255, 0.18);
  color: rgb(99, 207, 255);
}

.badge.compact-warning {
  background: rgba(237, 155, 230, 0.22);
  color: rgb(237, 155, 230);
}

.badge.compact-equivalent {
  background: rgba(155, 229, 142, 0.24);
  color: rgb(155, 229, 142);
}

.compact-route-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 16px 0 14px;
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.07);
  border: 1px solid rgba(8, 19, 29, 0.08);
}

.compact-route-strip span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #0d5674;
  background: rgba(99, 207, 255, 0.18);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.compact-route-strip p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}

.compact-proof-directions {
  display: grid;
  gap: 12px;
  margin: 14px 0 20px;
}

.compact-proof-direction {
  --proof-accent: var(--compact-product-color);
  padding: 14px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  border-left: 5px solid var(--proof-accent);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
}

.compact-proof-direction.proof-trivial {
  --proof-accent: var(--compact-metric-color);
}

.compact-proof-direction.proof-construction {
  --proof-accent: var(--compact-cover-color);
}

.compact-proof-direction.proof-lemma {
  --proof-accent: var(--compact-product-color);
}

.compact-proof-direction.proof-corollary {
  --proof-accent: var(--compact-variant-color);
}

.compact-proof-direction.proof-duality {
  --proof-accent: var(--compact-closed-color);
}

.compact-proof-direction.proof-warning {
  --proof-accent: var(--compact-closed-color);
}

.compact-proof-direction-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.compact-proof-main-symbol {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--proof-accent);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

.compact-proof-direction-head strong {
  display: block;
  color: var(--ink);
  line-height: 1.25;
}

.compact-proof-direction-head small {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.35;
}

.compact-proof-direction-head b {
  color: #5a4423;
}

.compact-proof-direction-head em {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--proof-accent) 32%, white);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.proof-side {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 800;
  line-height: 1;
}

.proof-left {
  background: rgba(99, 207, 255, 0.32);
}

.proof-right {
  background: rgba(255, 143, 101, 0.32);
}

.compact-proof-direction > p {
  margin: 12px 0 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

.compact-proof-lines {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.compact-proof-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.045);
}

.compact-proof-line span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink);
  background: color-mix(in srgb, var(--proof-accent) 46%, white);
  font-weight: 900;
  line-height: 1;
}

.compact-proof-line p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.compact-term-list {
  display: grid;
  gap: 9px;
  margin: 14px 0 18px;
}

.compact-term {
  padding: 12px 13px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(155, 229, 142, 0.18), rgba(99, 207, 255, 0.1)),
    rgba(8, 19, 29, 0.045);
  border: 1px solid rgba(8, 19, 29, 0.07);
}

.compact-term strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
}

.compact-term p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.compact-proof-steps {
  display: grid;
  gap: 10px;
  margin: 18px 0 20px;
}

.compact-proof-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(8, 19, 29, 0.055);
  border: 1px solid rgba(8, 19, 29, 0.07);
}

.compact-proof-step span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0f2a3a;
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 800;
}

.compact-proof-step p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.compact-definition-block,
.compact-watch-block {
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(8, 19, 29, 0.045);
}

.compact-watch-block {
  border-left: 4px solid rgba(255, 143, 101, 0.7);
}

@keyframes compact-content-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .compact-detail > *,
  .compact-node.is-active .compact-symbol,
  .mst-detail > *,
  .mst-node.is-active .mst-symbol,
  .operator-detail > *,
  .trig-detail > *,
  .fractal-detail > *,
  .fractal-node.is-active .fractal-symbol {
    animation: none;
  }
}

.mst-workspace {
  display: grid;
  gap: 18px;
}

.mst-definition {
  --mst-accent: var(--mst-definition-color);
}

.mst-cut {
  --mst-accent: var(--mst-cut-color);
}

.mst-cycle {
  --mst-accent: var(--mst-cycle-color);
}

.mst-exchange {
  --mst-accent: var(--mst-exchange-color);
}

.mst-algorithm {
  --mst-accent: var(--mst-algorithm-color);
}

.mst-matroid {
  --mst-accent: var(--mst-matroid-color);
}

.mst-path {
  --mst-accent: var(--mst-path-color);
}

.mst-threshold {
  --mst-accent: var(--mst-threshold-color);
}

.mst-lexicographic {
  --mst-accent: var(--mst-lexicographic-color);
}

.mst-variant {
  --mst-accent: var(--mst-variant-color);
}

.mst-stronger {
  --mst-accent: var(--mst-stronger-color);
}

.mst-warning {
  --mst-accent: var(--mst-warning-color);
}

.mst-consequence {
  --mst-accent: var(--mst-consequence-color);
}

.mst-controls {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: 16px;
}

.mst-note {
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg, rgba(99, 207, 255, 0.06), rgba(155, 229, 142, 0.04)),
    rgba(245, 239, 224, 0.05);
}

.mst-note > p,
.mst-note > span {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.mst-note > span {
  display: block;
  margin-top: 8px;
  color: var(--paper);
}

.mst-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.mst-legend-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.mst-legend-item i {
  grid-row: span 2;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--mst-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mst-accent) 18%, transparent);
}

.mst-legend-item strong {
  color: var(--paper);
  font-size: 0.82rem;
  line-height: 1.1;
}

.mst-legend-item em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.72rem;
  line-height: 1.25;
}

.mst-relation-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.mst-relation-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 14px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.76rem;
  line-height: 1.3;
}

.mst-relation-key {
  position: relative;
  flex: 0 0 48px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(155, 229, 142, 0.95), rgba(99, 207, 255, 0.95));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}

.mst-relation-key::before {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(99, 207, 255, 0.95);
  border-right: 2px solid rgba(99, 207, 255, 0.95);
  transform: translateY(-50%) rotate(45deg);
}

.mst-relation-key.equivalent::after,
.mst-relation-key.clique::after,
.mst-relation-key.route::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-left: 2px solid rgba(155, 229, 142, 0.95);
  border-bottom: 2px solid rgba(155, 229, 142, 0.95);
  transform: translateY(-50%) rotate(45deg);
}

.mst-relation-key.warning {
  background: repeating-linear-gradient(
    90deg,
    var(--rel-warning) 0 7px,
    transparent 7px 12px
  );
}

.mst-relation-key.warning::before {
  right: 20px;
  width: 10px;
  height: 10px;
  border: 0;
  background:
    linear-gradient(45deg, transparent 44%, var(--rel-warning) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--rel-warning) 44% 56%, transparent 56%);
  transform: translateY(-50%);
}

.mst-relation-key.explicit {
  background: linear-gradient(90deg, rgba(240, 205, 113, 0.95), rgba(255, 143, 101, 0.95));
  background-size: 72% 2px;
  background-position: center;
  background-repeat: no-repeat;
}

.mst-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
  gap: 22px;
  align-items: start;
}

.mst-graph-panel {
  display: grid;
  gap: 14px;
}

.mst-graph {
  min-height: 580px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid var(--line-strong);
  overflow: auto;
  background:
    radial-gradient(circle at 52% 48%, rgba(99, 207, 255, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(245, 239, 224, 0.055), rgba(245, 239, 224, 0.018)),
    rgba(8, 17, 30, 0.58);
}

.mst-orbit {
  position: relative;
  width: min(100%, 650px);
  min-width: 540px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.mst-complete-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mst-edge-hitbox {
  fill: none;
  stroke: transparent;
  stroke-width: 7;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

.mst-edge {
  --mst-edge-color: var(--rel-neutral);
  --mst-edge-active: var(--rel-scope);
  fill: none;
  stroke: var(--mst-edge-color);
  stroke-width: 0.45;
  stroke-linecap: round;
  opacity: 0.32;
  cursor: pointer;
  transition: stroke 180ms ease, stroke-width 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.mst-edge.mst-equivalent {
  --mst-edge-color: var(--rel-equivalence);
  --mst-edge-active: var(--rel-equivalence);
  opacity: 0.5;
}

.mst-edge.mst-proof-route {
  --mst-edge-color: var(--rel-consequence);
  --mst-edge-active: var(--rel-consequence);
  opacity: 0.5;
}

.mst-edge.mst-implies,
.mst-edge.mst-consequence-link {
  --mst-edge-color: var(--rel-consequence);
  --mst-edge-active: var(--rel-consequence);
  opacity: 0.5;
}

.mst-edge.mst-stronger-link {
  --mst-edge-color: var(--rel-scope);
  --mst-edge-active: var(--rel-scope);
  opacity: 0.5;
}

.mst-edge.mst-warning-link {
  --mst-edge-color: var(--rel-warning);
  --mst-edge-active: var(--rel-warning);
  opacity: 0.5;
  stroke-dasharray: 1.4 1.5;
}

.mst-edge:hover,
.mst-edge.is-hovered:not(.is-active) {
  stroke: var(--mst-edge-active);
  stroke-width: 0.58;
  opacity: 0.56;
}

.mst-edge.is-active {
  stroke: var(--mst-edge-active);
  stroke-width: 0.72;
  opacity: 0.9;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mst-edge-active) 70%, transparent));
}

.mst-edge-signal {
  cursor: pointer;
  opacity: 0.96;
  transition: transform 180ms ease, opacity 180ms ease;
}

.mst-edge-signal circle {
  fill: rgba(8, 17, 30, 0.88);
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 0.24;
}

.mst-edge-signal text {
  fill: var(--paper);
  font-size: 2.95px;
  font-weight: 900;
  dominant-baseline: middle;
  alignment-baseline: middle;
}

.mst-edge-signal.mst-equivalent circle {
  stroke: var(--rel-equivalence);
}

.mst-edge-signal.mst-warning-link circle {
  stroke: var(--rel-warning);
}

.mst-node {
  position: absolute;
  --mst-accent: var(--mst-definition-color);
  width: 118px;
  min-height: 98px;
  transform: translate(-50%, -50%);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 45%, transparent);
  border-radius: 18px;
  cursor: pointer;
  color: var(--text);
  background: color-mix(in srgb, var(--section-accent) 16%, rgba(7, 17, 28, 0.92));
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.mst-node:hover {
  transform: translate(-50%, -50%) scale(1.04);
  border-color: var(--mst-accent);
  background: rgba(25, 32, 31, 0.94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3), 0 0 0 4px color-mix(in srgb, var(--mst-accent) 16%, transparent);
}

.mst-node.is-active {
  transform: translate(-50%, -50%) scale(1.045);
  background: rgba(25, 32, 31, 0.96);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--section-accent);
}

.mst-symbol {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--mst-accent);
  font-weight: 800;
  font-size: 0.66rem;
  line-height: 1;
}

.mst-node strong {
  font-size: 0.76rem;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.mst-node small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.mst-edge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
  max-height: none;
  overflow: visible;
  padding: 2px 0;
  transition: max-height 180ms ease;
}

.mst-edge-chip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  color: var(--text);
  background: rgba(245, 239, 224, 0.05);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mst-edge-chip.mst-equivalent {
  border-left: 3px solid var(--rel-equivalence);
}

.mst-edge-chip.mst-proof-route {
  border-left: 3px solid var(--rel-consequence);
}

.mst-edge-chip.mst-implies,
.mst-edge-chip.mst-consequence-link {
  border-left: 3px solid var(--rel-consequence);
}

.mst-edge-chip.mst-stronger-link {
  border-left: 3px solid var(--rel-scope);
}

.mst-edge-chip.mst-warning-link {
  border-left: 3px solid var(--rel-warning);
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--rel-warning) 22%, transparent) 0 8px,
    transparent 8px 14px
  );
}

.mst-edge-chip:hover,
.mst-edge-chip.is-hovered:not(.is-active) {
  border-color: rgba(255, 189, 102, 0.36);
  background: rgba(255, 189, 102, 0.1);
}

.mst-edge-chip.is-active {
  border-color: rgba(255, 189, 102, 0.68);
  background: rgba(255, 189, 102, 0.14);
  box-shadow: 0 0 0 1px rgba(255, 189, 102, 0.16), 0 12px 24px rgba(255, 189, 102, 0.08);
  transform: translateY(-1px);
}

.mst-edge-chip span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.78rem;
}

.mst-edge-chip strong {
  font-size: 0.74rem;
  color: var(--paper);
  white-space: nowrap;
}

.mst-mini-symbol {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--mst-accent);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.mst-detail {
  position: sticky;
  top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(229, 240, 237, 0.94));
  color: var(--ink);
  box-shadow: var(--shadow);
}

.mst-detail > * {
  animation: compact-content-in 260ms ease both;
}

.mst-detail .eyebrow {
  color: #245c1b;
}

.mst-detail .detail-title {
  font-size: clamp(1.65rem, 3vw, 2.45rem);
}

.mst-detail .detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mst-title-with-symbol,
.mst-relation-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  line-height: 1.18;
}

.mst-relation-title {
  font-size: clamp(1.12rem, 2vw, 1.65rem);
}

.mst-title-with-symbol span,
.mst-relation-title span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--mst-accent);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.mst-relation-title span.proof-left {
  box-shadow: inset 0 0 0 2px rgba(99, 207, 255, 0.32);
}

.mst-relation-title span.proof-right {
  box-shadow: inset 0 0 0 2px rgba(255, 143, 101, 0.32);
}

.mst-relation-title em {
  color: #245c1b;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 900;
}

.mst-demo-card {
  margin: 22px 0;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  background: rgba(8, 19, 29, 0.05);
  transition: transform 180ms ease, background 180ms ease;
}

.mst-demo-card:hover {
  transform: translateY(-2px);
  background: rgba(8, 19, 29, 0.065);
}

.mst-demo-title {
  margin-bottom: 10px;
  color: var(--ink);
  font-weight: 800;
}

.mst-demo-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.25)),
    repeating-linear-gradient(
      90deg,
      rgba(8, 19, 29, 0.04) 0 1px,
      transparent 1px 24px
    );
}

.mst-edge-line {
  fill: none;
  stroke: #315166;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mst-edge-line.chosen {
  stroke: #2f8f69;
}

.mst-edge-line.faint {
  stroke: rgba(49, 81, 102, 0.22);
  stroke-width: 4;
}

.mst-edge-line.rejected {
  stroke: #c9532a;
  stroke-width: 5;
  stroke-dasharray: 8 6;
}

.mst-edge-line.frontier {
  stroke: #2c7ab3;
  stroke-width: 5;
}

.mst-edge-line.bottleneck {
  stroke: #c9532a;
  stroke-width: 7;
}

.mst-dot,
.mst-root {
  fill: #f5efe0;
  stroke: #0f2a3a;
  stroke-width: 3;
}

.mst-dot.alt {
  fill: #ffbd66;
}

.mst-root {
  fill: #63cfff;
}

.mst-region,
.mst-cluster,
.mst-cut-side,
.mst-matroid-shell {
  fill: rgba(99, 207, 255, 0.14);
  stroke: rgba(15, 42, 58, 0.38);
  stroke-width: 2;
}

.mst-cut-side.right,
.mst-cluster.b {
  fill: rgba(255, 143, 101, 0.14);
}

.mst-cut-line {
  fill: none;
  stroke: rgba(15, 42, 58, 0.38);
  stroke-width: 3;
  stroke-dasharray: 8 7;
}

.mst-arrow {
  fill: none;
  stroke: #2c7ab3;
  stroke-width: 4;
  stroke-linecap: round;
}

.mst-step-card {
  fill: rgba(255, 255, 255, 0.42);
  stroke: rgba(15, 42, 58, 0.34);
  stroke-width: 2;
}

.mst-step-card.chosen {
  fill: rgba(155, 229, 142, 0.32);
  stroke: rgba(47, 143, 105, 0.72);
}

.mst-step-card.faint {
  fill: rgba(255, 143, 101, 0.15);
  stroke: rgba(201, 83, 42, 0.42);
}

.mst-weight,
.mst-step-text,
.mst-demo-label {
  font-family: 'Space Grotesk', sans-serif;
}

.mst-weight {
  fill: #0f2a3a;
  font-size: 13px;
  font-weight: 900;
}

.mst-weight.muted {
  fill: rgba(15, 42, 58, 0.44);
}

.mst-weight.warn {
  fill: #7d2504;
}

.mst-step-text {
  fill: #0f2a3a;
  font-size: 13px;
  font-weight: 900;
  text-anchor: middle;
}

.mst-step-text.muted {
  fill: #7d2504;
  font-size: 11px;
}

.mst-demo-label {
  fill: #0f2a3a;
  font-size: 13px;
  font-weight: 800;
}

.mst-route-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 16px 0 14px;
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.07);
  border: 1px solid rgba(8, 19, 29, 0.08);
}

.mst-route-strip span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #245c1b;
  background: rgba(155, 229, 142, 0.26);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.mst-route-strip p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}

.mst-proof-directions {
  display: grid;
  gap: 12px;
  margin: 14px 0 20px;
}

.mst-proof-direction {
  --proof-accent: var(--mst-exchange-color);
  padding: 14px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  border-left: 5px solid var(--proof-accent);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
}

.mst-proof-direction.proof-equivalence {
  --proof-accent: var(--mst-exchange-color);
}

.mst-proof-direction.proof-lemma {
  --proof-accent: var(--mst-cut-color);
}

.mst-proof-direction.proof-corollary {
  --proof-accent: var(--mst-stronger-color);
}

.mst-proof-direction.proof-algorithm {
  --proof-accent: var(--mst-algorithm-color);
}

.mst-proof-direction.proof-exchange {
  --proof-accent: var(--mst-exchange-color);
}

.mst-proof-direction.proof-clique {
  --proof-accent: var(--mst-matroid-color);
}

.mst-proof-direction.proof-warning {
  --proof-accent: var(--mst-warning-color);
}

.mst-proof-direction-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.mst-proof-main-symbol {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--proof-accent);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}

.mst-proof-direction-head strong {
  display: block;
  color: var(--ink);
  line-height: 1.25;
}

.mst-proof-direction-head small {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.35;
}

.mst-proof-direction-head b {
  color: #245c1b;
}

.mst-proof-direction-head em {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--proof-accent) 32%, white);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.mst-proof-direction > p {
  margin: 12px 0 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

.mst-proof-lines {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.mst-proof-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.045);
}

.mst-proof-line span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink);
  background: color-mix(in srgb, var(--proof-accent) 46%, white);
  font-weight: 900;
  line-height: 1;
}

.mst-proof-line p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.mst-term-list {
  display: grid;
  gap: 9px;
  margin: 14px 0 18px;
}

.mst-term {
  padding: 12px 13px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(99, 207, 255, 0.14), rgba(155, 229, 142, 0.1)),
    rgba(8, 19, 29, 0.045);
  border: 1px solid rgba(8, 19, 29, 0.07);
}

.mst-term strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
}

.mst-term p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.mst-definition-block,
.mst-clique-note {
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(8, 19, 29, 0.045);
}

.mst-clique-note {
  border-left: 4px solid rgba(99, 207, 255, 0.7);
}

.mst-bridge-box {
  stroke-width: 3.2;
}

.mst-bridge-box.left {
  fill: rgba(99, 207, 255, 0.16);
  stroke: rgba(44, 122, 179, 0.82);
}

.mst-bridge-box.right {
  fill: rgba(155, 229, 142, 0.16);
  stroke: rgba(47, 143, 105, 0.82);
}

.mst-bridge-arrow {
  fill: none;
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mst-bridge-arrow.forward {
  stroke: #2c7ab3;
}

.mst-bridge-arrow.backward {
  stroke: #2f8f69;
}

.mst-bridge-arrow.muted {
  stroke: rgba(15, 42, 58, 0.22);
  stroke-dasharray: 7 7;
}

.mst-bridge-arrowhead {
  filter: drop-shadow(0 1px 1px rgba(15, 42, 58, 0.16));
}

.mst-bridge-arrowhead.forward {
  fill: #2c7ab3;
}

.mst-bridge-arrowhead.backward {
  fill: #2f8f69;
}

.mst-bridge-side,
.mst-bridge-title,
.mst-bridge-proof,
.mst-bridge-dot-label {
  font-family: 'Space Grotesk', sans-serif;
}

.mst-bridge-side {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.mst-bridge-side.left,
.mst-bridge-title.left {
  fill: #0f5877;
}

.mst-bridge-side.right,
.mst-bridge-title.right {
  fill: #245c1b;
}

.mst-bridge-title {
  font-size: 13px;
  font-weight: 900;
  dominant-baseline: hanging;
}

.mst-bridge-proof {
  fill: #0f2a3a;
  font-size: 13px;
  font-weight: 900;
}

.mst-bridge-proof.forward {
  fill: #0f5877;
}

.mst-bridge-proof.backward {
  fill: #245c1b;
}

.mst-bridge-dot {
  fill: #f5efe0;
  stroke: #0f2a3a;
  stroke-width: 3;
}

.mst-bridge-dot-label {
  fill: #0f2a3a;
  font-size: 11px;
  font-weight: 900;
}

.badge.mst-world {
  background: rgba(99, 207, 255, 0.18);
  color: rgb(99, 207, 255);
}

.badge.mst-definition {
  background: rgba(255, 189, 102, 0.2);
  color: rgb(255, 189, 102);
}

.badge.mst-cut,
.badge.mst-proof-route {
  background: rgba(99, 207, 255, 0.18);
  color: rgb(99, 207, 255);
}

.badge.mst-cycle,
.badge.mst-warning,
.badge.mst-warning-link {
  background: rgba(255, 127, 127, 0.18);
  color: rgb(255, 127, 127);
}

.badge.mst-exchange,
.badge.mst-equivalent {
  background: rgba(155, 229, 142, 0.26);
  color: rgb(155, 229, 142);
}

.badge.mst-algorithm,
.badge.mst-implies,
.badge.mst-consequence-link {
  background: rgba(240, 205, 113, 0.24);
  color: rgb(240, 205, 113);
}

.badge.mst-matroid {
  background: rgba(237, 155, 230, 0.22);
  color: rgb(237, 155, 230);
}

.badge.mst-path {
  background: rgba(106, 215, 255, 0.2);
  color: rgb(106, 215, 255);
}

.badge.mst-threshold {
  background: rgba(122, 231, 199, 0.24);
  color: rgb(122, 231, 199);
}

.badge.mst-lexicographic {
  background: rgba(201, 183, 255, 0.24);
  color: rgb(201, 183, 255);
}

.badge.mst-variant {
  background: rgba(141, 232, 188, 0.24);
  color: rgb(141, 232, 188);
}

.badge.mst-stronger,
.badge.mst-stronger-link {
  background: rgba(201, 183, 255, 0.24);
  color: rgb(201, 183, 255);
}

.badge.mst-consequence {
  background: rgba(122, 231, 199, 0.24);
  color: rgb(122, 231, 199);
}

.operator-workspace {
  display: grid;
  gap: 18px;
}

.operator-spatial {
  --operator-accent: var(--operator-spatial-color);
}

.operator-frequency {
  --operator-accent: var(--operator-frequency-color);
}

.operator-derivative {
  --operator-accent: var(--operator-derivative-color);
}

.operator-pde {
  --operator-accent: var(--operator-pde-color);
}

.operator-filter {
  --operator-accent: var(--operator-filter-color);
}

.operator-discrete {
  --operator-accent: var(--operator-discrete-color);
}

.operator-warning {
  --operator-accent: var(--operator-warning-color);
}

.operator-controls {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: 16px;
}

.operator-note {
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg, rgba(99, 207, 255, 0.07), rgba(201, 183, 255, 0.06)),
    rgba(245, 239, 224, 0.05);
}

.operator-note > p,
.operator-note > span {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.operator-note > span {
  display: block;
  margin-top: 8px;
  color: var(--paper);
}

.operator-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.operator-legend-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.operator-legend-item i {
  grid-row: span 2;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--operator-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--operator-accent) 18%, transparent);
}

.operator-legend-item strong {
  color: var(--paper);
  font-size: 0.82rem;
  line-height: 1.1;
}

.operator-legend-item em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.72rem;
  line-height: 1.25;
}

.operator-relation-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.operator-relation-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 14px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.76rem;
  line-height: 1.3;
}

.operator-relation-key {
  position: relative;
  flex: 0 0 48px;
  height: 14px;
  background: linear-gradient(90deg, rgba(99, 207, 255, 0.95), rgba(201, 183, 255, 0.95));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}

.operator-relation-key::before {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(201, 183, 255, 0.95);
  border-right: 2px solid rgba(201, 183, 255, 0.95);
  transform: translateY(-50%) rotate(45deg);
}

.operator-relation-key.equivalent::after,
.operator-relation-key.dictionary::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-left: 2px solid rgba(99, 207, 255, 0.95);
  border-bottom: 2px solid rgba(99, 207, 255, 0.95);
  transform: translateY(-50%) rotate(45deg);
}

.operator-relation-key.warning {
  background: repeating-linear-gradient(
    90deg,
    var(--rel-warning) 0 7px,
    transparent 7px 12px
  );
}

.operator-relation-key.warning::before {
  right: 20px;
  width: 10px;
  height: 10px;
  border: 0;
  background:
    linear-gradient(45deg, transparent 44%, var(--rel-warning) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--rel-warning) 44% 56%, transparent 56%);
  transform: translateY(-50%);
}

.operator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
  gap: 22px;
  align-items: start;
}

.operator-graph-panel {
  display: grid;
  gap: 14px;
}

.operator-graph {
  min-height: 600px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid var(--line-strong);
  overflow: auto;
  background:
    radial-gradient(circle at 45% 48%, rgba(201, 183, 255, 0.1), transparent 34%),
    radial-gradient(circle at 64% 42%, rgba(99, 207, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(245, 239, 224, 0.055), rgba(245, 239, 224, 0.018)),
    rgba(8, 17, 30, 0.58);
}

.operator-orbit {
  position: relative;
  width: min(100%, 680px);
  min-width: 600px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.operator-complete-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.operator-edge-hitbox {
  fill: none;
  stroke: transparent;
  stroke-width: 7;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

.operator-edge {
  --operator-edge-color: var(--rel-neutral);
  --operator-edge-active: var(--rel-consequence);
  fill: none;
  stroke: var(--operator-edge-color);
  stroke-width: 0.45;
  stroke-linecap: round;
  opacity: 0.32;
  cursor: pointer;
  transition: stroke 180ms ease, stroke-width 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.operator-edge.operator-equivalent {
  --operator-edge-color: var(--rel-equivalence);
  --operator-edge-active: var(--rel-equivalence);
  opacity: 0.5;
}

.operator-edge.operator-implies,
.operator-edge.operator-route {
  --operator-edge-color: var(--rel-consequence);
  --operator-edge-active: var(--rel-consequence);
  opacity: 0.5;
}

.operator-edge.operator-warning-link {
  --operator-edge-color: var(--rel-warning);
  --operator-edge-active: var(--rel-warning);
  opacity: 0.5;
  stroke-dasharray: 1.4 1.5;
}

.operator-edge:hover,
.operator-edge.is-hovered:not(.is-active) {
  stroke: var(--operator-edge-active);
  stroke-width: 0.64;
  opacity: 0.72;
}

.operator-edge.is-active {
  stroke: var(--operator-edge-active);
  stroke-width: 0.78;
  opacity: 0.92;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--operator-edge-active) 70%, transparent));
}

.operator-edge-signal {
  cursor: pointer;
  opacity: 0.4;
  transition: transform 180ms ease, opacity 180ms ease;
}

.operator-edge-signal circle {
  fill: rgba(8, 17, 30, 0.78);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 0.28;
}

.operator-edge-signal text {
  fill: var(--paper);
  font-size: 2.8px;
  font-weight: 900;
  dominant-baseline: middle;
}

.operator-edge-signal.is-hovered:not(.is-active) {
  opacity: 0.78;
}

.operator-edge-signal.is-active {
  opacity: 0.98;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--operator-edge-active, var(--operator-spatial-color)) 64%, transparent));
}

.operator-edge-signal.operator-equivalent circle {
  stroke: var(--rel-equivalence);
}

.operator-edge-signal.operator-warning-link circle {
  stroke: var(--rel-warning);
}

.operator-node {
  position: absolute;
  --operator-accent: var(--operator-spatial-color);
  width: 96px;
  min-height: 80px;
  transform: translate(-50%, -50%);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 45%, transparent);
  border-radius: 18px;
  cursor: pointer;
  color: var(--text);
  background: color-mix(in srgb, var(--section-accent) 16%, rgba(7, 17, 28, 0.92));
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.operator-node:hover {
  transform: translate(-50%, -50%) scale(1.04);
  border-color: var(--operator-accent);
  background: rgba(23, 27, 38, 0.95);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3), 0 0 0 4px color-mix(in srgb, var(--operator-accent) 16%, transparent);
}

.operator-node.is-active {
  transform: translate(-50%, -50%) scale(1.045);
  background: rgba(23, 27, 38, 0.97);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--section-accent);
}

.operator-symbol {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--operator-accent);
  font-weight: 900;
  font-size: 0.56rem;
  line-height: 1;
}

.operator-node strong {
  font-size: 0.64rem;
  line-height: 1.12;
  text-align: center;
  overflow-wrap: anywhere;
}

.operator-node small {
  color: var(--muted);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.operator-edge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
  max-height: none;
  overflow: visible;
  padding: 2px 0;
  transition: max-height 180ms ease;
}

.operator-edge-chip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  color: var(--text);
  background: rgba(245, 239, 224, 0.05);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.operator-edge-chip.operator-equivalent {
  border-left: 3px solid var(--rel-equivalence);
}

.operator-edge-chip.operator-implies,
.operator-edge-chip.operator-route {
  border-left: 3px solid var(--rel-consequence);
}

.operator-edge-chip.operator-warning-link {
  border-left: 3px solid var(--rel-warning);
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--rel-warning) 22%, transparent) 0 8px,
    transparent 8px 14px
  );
}

.operator-edge-chip:hover,
.operator-edge-chip.is-hovered:not(.is-active) {
  border-color: rgba(99, 207, 255, 0.38);
  background: rgba(99, 207, 255, 0.1);
}

.operator-edge-chip.is-active {
  border-color: rgba(99, 207, 255, 0.7);
  background: rgba(99, 207, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(99, 207, 255, 0.16), 0 12px 24px rgba(99, 207, 255, 0.08);
  transform: translateY(-1px);
}

.operator-edge-chip span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.78rem;
}

.operator-edge-chip strong {
  font-size: 0.74rem;
  color: var(--paper);
  white-space: nowrap;
}

.operator-mini-symbol {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--operator-accent);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.operator-detail {
  position: sticky;
  top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(232, 235, 244, 0.94));
  color: var(--ink);
  box-shadow: var(--shadow);
}

.operator-detail > * {
  animation: compact-content-in 260ms ease both;
}

.operator-detail .eyebrow {
  color: #0f5877;
}

.operator-detail .detail-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.operator-detail .detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operator-title-with-symbol,
.operator-relation-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  line-height: 1.18;
}

.operator-relation-title {
  font-size: clamp(1.1rem, 2vw, 1.62rem);
}

.operator-title-with-symbol span,
.operator-relation-title span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--operator-accent);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.operator-relation-title span.proof-left,
.operator-relation-title span.proof-right {
  box-shadow: inset 0 0 0 2px rgba(8, 19, 29, 0.14);
}

.operator-relation-title em {
  color: #0f5877;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 900;
}

.operator-demo-card {
  margin: 22px 0;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  background: rgba(8, 19, 29, 0.05);
  transition: transform 180ms ease, background 180ms ease;
}

.operator-demo-card:hover {
  transform: translateY(-2px);
  background: rgba(8, 19, 29, 0.065);
}

.operator-demo-title {
  margin-bottom: 10px;
  color: var(--ink);
  font-weight: 800;
}

.operator-demo-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.25)),
    repeating-linear-gradient(
      90deg,
      rgba(8, 19, 29, 0.04) 0 1px,
      transparent 1px 24px
    );
}

.operator-wave,
.operator-kernel,
.operator-ramp,
.operator-parabola,
.operator-spectrum-hump,
.operator-arrow {
  fill: none;
  stroke: #2c7ab3;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.operator-wave.muted {
  stroke: rgba(49, 81, 102, 0.38);
  stroke-width: 4;
}

.operator-wave.sharp {
  stroke: #c9532a;
  stroke-width: 4;
}

.operator-wave.warn,
.operator-ramp.warn {
  stroke: #c9532a;
}

.operator-kernel {
  stroke: #2f8f69;
}

.operator-kernel.broad {
  stroke: #2f8f69;
  stroke-width: 6;
}

.operator-axis {
  stroke: rgba(15, 42, 58, 0.35);
  stroke-width: 3;
  stroke-linecap: round;
}

.operator-bar,
.operator-tile,
.operator-grid,
.operator-window {
  stroke: rgba(15, 42, 58, 0.34);
  stroke-width: 2;
}

.operator-bar.blue,
.operator-tile.blue,
.operator-spectrum-hump.blue {
  fill: rgba(99, 207, 255, 0.26);
  stroke: #2c7ab3;
}

.operator-bar.gold,
.operator-tile.gold,
.operator-spectrum-hump.gold {
  fill: rgba(255, 189, 102, 0.28);
  stroke: #8b5a07;
}

.operator-bar.green,
.operator-tile.green {
  fill: rgba(155, 229, 142, 0.3);
  stroke: #2f8f69;
}

.operator-bar.pink,
.operator-spectrum-hump.pink {
  fill: rgba(237, 155, 230, 0.24);
  stroke: #6e1d67;
}

.operator-spectrum-hump {
  fill: rgba(99, 207, 255, 0.2);
}

.operator-grid {
  fill: rgba(99, 207, 255, 0.12);
}

.operator-window {
  fill: rgba(255, 189, 102, 0.13);
  stroke-dasharray: 8 6;
}

.operator-dot,
.operator-impulse {
  fill: #f5efe0;
  stroke: #0f2a3a;
  stroke-width: 3;
}

.operator-dot.alt,
.operator-impulse.alt {
  fill: #ffbd66;
}

.operator-symbol-text,
.operator-demo-label {
  font-family: 'Space Grotesk', sans-serif;
}

.operator-symbol-text {
  fill: #0f2a3a;
  font-size: 21px;
  font-weight: 900;
  text-anchor: middle;
}

.operator-demo-label {
  fill: #0f2a3a;
  font-size: 13px;
  font-weight: 800;
}

.operator-route-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 16px 0 14px;
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.07);
  border: 1px solid rgba(8, 19, 29, 0.08);
}

.operator-route-strip span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #0f5877;
  background: rgba(99, 207, 255, 0.2);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.operator-route-strip p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}

.operator-proof-lines,
.operator-term-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 18px;
}

.operator-proof-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.045);
}

.operator-proof-line span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(99, 207, 255, 0.28);
  font-weight: 900;
  line-height: 1;
}

.operator-proof-line p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.operator-term {
  padding: 12px 13px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(99, 207, 255, 0.13), rgba(201, 183, 255, 0.1)),
    rgba(8, 19, 29, 0.045);
  border: 1px solid rgba(8, 19, 29, 0.07);
}

.operator-term strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
}

.operator-term p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.operator-definition-block,
.operator-clique-note {
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(8, 19, 29, 0.045);
}

.operator-clique-note {
  border-left: 4px solid rgba(99, 207, 255, 0.7);
}

.operator-bridge-box {
  stroke-width: 3.2;
}

.operator-bridge-box.left {
  fill: rgba(99, 207, 255, 0.16);
  stroke: rgba(44, 122, 179, 0.82);
}

.operator-bridge-box.right {
  fill: rgba(201, 183, 255, 0.16);
  stroke: rgba(100, 81, 160, 0.74);
}

.operator-bridge-arrow {
  fill: none;
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.operator-bridge-arrow.forward {
  stroke: #2c7ab3;
}

.operator-bridge-arrow.backward {
  stroke: #6d58b8;
}

.operator-bridge-arrow.warn {
  stroke: #c9532a;
}

.operator-bridge-arrow.muted {
  stroke: rgba(15, 42, 58, 0.22);
  stroke-dasharray: 7 7;
}

.operator-bridge-arrowhead.forward {
  fill: #2c7ab3;
}

.operator-bridge-arrowhead.backward {
  fill: #6d58b8;
}

.operator-bridge-side,
.operator-bridge-title,
.operator-bridge-proof,
.operator-bridge-dot-label {
  font-family: 'Space Grotesk', sans-serif;
}

.operator-bridge-side {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.operator-bridge-side.left,
.operator-bridge-title.left {
  fill: #0f5877;
}

.operator-bridge-side.right,
.operator-bridge-title.right {
  fill: #4d3987;
}

.operator-bridge-title {
  font-size: 13px;
  font-weight: 900;
  dominant-baseline: hanging;
}

.operator-bridge-proof {
  fill: #0f2a3a;
  font-size: 13px;
  font-weight: 900;
}

.operator-bridge-proof.forward {
  fill: #0f5877;
}

.operator-bridge-proof.backward {
  fill: #4d3987;
}

.operator-bridge-dot {
  fill: #f5efe0;
  stroke: #0f2a3a;
  stroke-width: 3;
}

.operator-bridge-dot-label {
  fill: #0f2a3a;
  font-size: 11px;
  font-weight: 900;
}

.badge.operator-world {
  background: rgba(99, 207, 255, 0.18);
  color: rgb(99, 207, 255);
}

.badge.operator-spatial,
.badge.operator-equivalent {
  background: rgba(99, 207, 255, 0.2);
  color: rgb(99, 207, 255);
}

.badge.operator-frequency,
.badge.operator-implies,
.badge.operator-route {
  background: rgba(201, 183, 255, 0.24);
  color: rgb(201, 183, 255);
}

.badge.operator-derivative {
  background: rgba(255, 189, 102, 0.2);
  color: rgb(255, 189, 102);
}

.badge.operator-pde {
  background: rgba(155, 229, 142, 0.26);
  color: rgb(155, 229, 142);
}

.badge.operator-filter {
  background: rgba(240, 205, 113, 0.24);
  color: rgb(240, 205, 113);
}

.badge.operator-discrete {
  background: rgba(141, 232, 188, 0.24);
  color: rgb(141, 232, 188);
}

.badge.operator-warning,
.badge.operator-warning-link {
  background: rgba(255, 127, 127, 0.18);
  color: rgb(255, 127, 127);
}

.trig-section {
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 189, 102, 0.14), transparent 28%),
    radial-gradient(circle at 72% 20%, rgba(99, 207, 255, 0.12), transparent 30%),
    radial-gradient(circle at 82% 74%, rgba(122, 231, 199, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(8, 17, 30, 0.94), rgba(4, 10, 18, 0.97));
}

.trig-workspace {
  display: grid;
  gap: 18px;
}

.trig-complex-family {
  --trig-accent: var(--trig-complex-color);
}

.trig-circular-family {
  --trig-accent: var(--trig-circular-color);
}

.trig-identity-family {
  --trig-accent: var(--trig-identity-color);
}

.trig-hyperbolic-family {
  --trig-accent: var(--trig-hyperbolic-color);
}

.trig-continuation-family {
  --trig-accent: var(--trig-continuation-color);
}

.trig-warning-family {
  --trig-accent: var(--trig-warning-color);
}

.trig-note {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg, rgba(255, 189, 102, 0.075), rgba(99, 207, 255, 0.06)),
    rgba(245, 239, 224, 0.05);
}

.trig-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.trig-note strong {
  color: var(--paper);
}

.trig-legend,
.trig-relation-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trig-legend span,
.trig-relation-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.76rem;
}

.trig-legend i,
.trig-relation-legend i {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--trig-accent, var(--trig-complex-color));
  box-shadow: 0 0 13px var(--trig-accent, var(--trig-complex-color));
}

.trig-relation-legend i {
  width: 38px;
  height: 10px;
  border-radius: 999px;
  box-shadow: none;
  background: var(--rel-equivalence);
}

.trig-relation-legend .proof {
  background: var(--rel-consequence);
}

.trig-relation-legend .continuation {
  background: var(--rel-scope);
}

.trig-relation-legend .warning {
  background: repeating-linear-gradient(90deg, var(--rel-warning) 0 7px, transparent 7px 12px);
}

.trig-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
  gap: 22px;
  align-items: start;
}

.trig-graph-panel {
  display: grid;
  gap: 14px;
}

.trig-map {
  min-height: 590px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid var(--line-strong);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 48%, rgba(245, 239, 224, 0.12), transparent 34%),
    radial-gradient(circle at 44% 50%, rgba(255, 189, 102, 0.09), transparent 30%),
    radial-gradient(circle at 64% 38%, rgba(99, 207, 255, 0.08), transparent 28%),
    rgba(8, 17, 30, 0.6);
}

.trig-orbit {
  position: relative;
  width: min(100%, 680px);
  min-width: 600px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.trig-complete-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.trig-edge-hitbox {
  fill: none;
  stroke: transparent;
  stroke-width: 7.8;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

.trig-edge {
  fill: none;
  stroke: var(--rel-neutral);
  stroke-width: 0.45;
  stroke-linecap: round;
  opacity: 0.32;
  cursor: pointer;
  transition: stroke 180ms ease, stroke-width 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.trig-edge.trig-equivalence {
  stroke: var(--rel-equivalence);
  opacity: 0.5;
}

.trig-edge.trig-proof {
  stroke: var(--rel-consequence);
  opacity: 0.5;
}

.trig-edge.trig-continuation {
  stroke: var(--rel-scope);
  opacity: 0.5;
}

.trig-edge.trig-warning {
  stroke: var(--rel-warning);
  opacity: 0.5;
  stroke-dasharray: 1.4 1.5;
}

.trig-edge:hover,
.trig-edge.is-hovered:not(.is-active) {
  opacity: 0.78;
  stroke-width: 0.68;
}

.trig-edge.is-active {
  opacity: 0.96;
  stroke-width: 0.82;
  filter: drop-shadow(0 0 6px rgba(245, 239, 224, 0.3));
}

.trig-edge-signal {
  cursor: pointer;
  opacity: 0.12;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.trig-edge-signal circle {
  fill: rgba(8, 17, 30, 0.84);
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 0.28;
}

.trig-edge-signal text {
  fill: rgba(245, 239, 224, 0.86);
  font-size: 2.1px;
  font-weight: 900;
  dominant-baseline: middle;
}

.trig-edge-signal.is-node-active {
  opacity: 0.76;
}

.trig-edge-signal.is-active,
.trig-edge-signal.is-hovered {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(245, 239, 224, 0.34));
}

.trig-center-signal {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 76px;
  height: 50px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--paper);
  background: rgba(3, 9, 17, 0.78);
  box-shadow: 0 0 26px rgba(245, 239, 224, 0.1);
  font-family: 'Cambria Math', 'Times New Roman', serif;
  font-size: 0.96rem;
  font-weight: 900;
  transform: translate(-50%, -50%);
}

.trig-center-signal.trig-warning {
  border-color: color-mix(in srgb, var(--rel-warning) 50%, transparent);
  color: var(--trig-warning-color);
}

.trig-node {
  position: absolute;
  --trig-accent: var(--trig-complex-color);
  z-index: 4;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  width: 104px;
  min-height: 82px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 45%, transparent);
  color: var(--text);
  background: color-mix(in srgb, var(--section-accent) 16%, rgba(5, 13, 23, 0.92));
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.trig-node:hover,
.trig-node.is-active,
.trig-node.is-endpoint {
  background: rgba(12, 22, 32, 0.96);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--section-accent);
  transform: translate(-50%, -50%) scale(1.045);
}

.trig-node span {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--trig-accent);
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
}

.trig-node strong {
  color: var(--text);
  font-size: 0.64rem;
  line-height: 1.1;
  text-align: center;
}

.trig-node small {
  color: var(--muted);
  font-size: 0.49rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.trig-bridge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 9px;
  max-height: none;
  overflow: visible;
  padding: 2px 0;
}

.trig-edge-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 2px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  color: var(--text);
  background: rgba(245, 239, 224, 0.048);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.trig-edge-chip span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--rel-equivalence);
  font-size: 0.66rem;
  font-weight: 900;
}

.trig-edge-chip.trig-proof span {
  background: var(--rel-consequence);
}

.trig-edge-chip.trig-continuation span {
  background: var(--rel-scope);
}

.trig-edge-chip.trig-warning span {
  background: var(--rel-warning);
}

.trig-edge-chip strong {
  color: var(--paper);
  font-size: 0.77rem;
  line-height: 1.12;
}

.trig-edge-chip em {
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1;
}

.trig-edge-chip:hover,
.trig-edge-chip.is-hovered:not(.is-active) {
  border-color: rgba(255, 189, 102, 0.38);
  background: rgba(255, 189, 102, 0.09);
}

.trig-edge-chip.is-active {
  border-color: rgba(255, 189, 102, 0.7);
  background: rgba(255, 189, 102, 0.13);
  box-shadow: 0 0 0 1px rgba(255, 189, 102, 0.18), 0 14px 26px rgba(255, 189, 102, 0.08);
  transform: translateY(-1px);
}

.trig-detail {
  position: sticky;
  top: 24px;
  padding: 28px;
  border-radius: 30px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(236, 241, 232, 0.94));
  box-shadow: var(--shadow);
}

.trig-detail > * {
  animation: compact-content-in 260ms ease both;
}

.trig-detail .detail-title {
  font-size: clamp(1.55rem, 3vw, 2.35rem);
}

.trig-title-with-symbol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  line-height: 1.16;
}

.trig-title-with-symbol span {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--trig-accent);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
}

.trig-visual,
.trig-bridge-visual {
  margin: 20px 0;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.28)),
    repeating-linear-gradient(90deg, rgba(8, 19, 29, 0.04) 0 1px, transparent 1px 24px);
}

.trig-visual svg,
.trig-bridge-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

.trig-visual text,
.trig-bridge-visual text {
  fill: #0f2a3a;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
}

.trig-visual-circle,
.trig-visual-gridbox {
  fill: rgba(99, 207, 255, 0.12);
  stroke: rgba(44, 122, 179, 0.72);
  stroke-width: 4;
}

.trig-visual-circle.warning {
  fill: rgba(255, 143, 101, 0.12);
  stroke: rgba(201, 83, 42, 0.75);
}

.trig-visual-axis,
.trig-visual-drop {
  fill: none;
  stroke: rgba(15, 42, 58, 0.34);
  stroke-width: 3;
  stroke-linecap: round;
}

.trig-visual-radius,
.trig-visual-arc,
.trig-visual-exp,
.trig-visual-sine,
.trig-visual-hyperbola,
.trig-visual-spiral,
.trig-visual-cut {
  fill: none;
  stroke: #2c7ab3;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trig-visual-radius.alt,
.trig-visual-arc.alt,
.trig-visual-exp.alt,
.trig-visual-hyperbola.alt {
  stroke: #8b5a07;
}

.trig-visual-arc {
  stroke: #2f8f69;
}

.trig-visual-sine {
  stroke: #6d58b8;
}

.trig-visual-hyperbola {
  stroke: #17624d;
}

.trig-visual-spiral,
.trig-visual-cut {
  stroke: #c9532a;
}

.trig-visual-dot {
  fill: var(--trig-circular-color);
  stroke: #0f2a3a;
  stroke-width: 3;
}

.trig-formula-strip,
.trig-route-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  background: rgba(8, 19, 29, 0.06);
}

.trig-formula-strip span,
.trig-route-card span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #7b5108;
  background: rgba(255, 189, 102, 0.24);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.trig-formula-strip code,
.trig-route-card strong,
.trig-two-column code {
  color: var(--ink);
  font-family: 'Cambria Math', 'Times New Roman', serif;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.trig-definition-grid,
.trig-two-column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 9px;
  margin: 16px 0;
}

.trig-definition-grid article,
.trig-two-column article,
.trig-payoff,
.trig-caveat,
.trig-proof-routes,
.trig-connected {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(8, 19, 29, 0.07);
  background: rgba(8, 19, 29, 0.045);
}

.trig-definition-grid span,
.trig-two-column span {
  display: inline-block;
  margin-bottom: 6px;
  color: #0f5877;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trig-definition-grid p,
.trig-payoff p,
.trig-caveat p,
.trig-two-column p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.trig-two-column strong,
.trig-payoff strong,
.trig-caveat strong,
.trig-proof-routes h3,
.trig-connected h3 {
  display: block;
  margin: 0 0 7px;
  color: var(--ink);
}

.trig-proof-routes {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.trig-proof-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.045);
}

.trig-proof-line span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 189, 102, 0.32);
  font-weight: 900;
  line-height: 1;
}

.trig-proof-line p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.trig-connected div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trig-connected button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
}

.trig-connected button span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(99, 207, 255, 0.45);
  font-size: 0.62rem;
}

.trig-caveat.trig-warning {
  border-left: 4px solid rgba(255, 143, 101, 0.8);
}

.trig-bridge-box {
  stroke-width: 4;
}

.trig-bridge-box.left {
  fill: rgba(99, 207, 255, 0.14);
  stroke: rgba(44, 122, 179, 0.78);
}

.trig-bridge-box.right {
  fill: rgba(255, 189, 102, 0.16);
  stroke: rgba(139, 90, 7, 0.72);
}

.trig-bridge-arc {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  marker-end: url(#trigBridgeArrow);
}

.trig-bridge-arc.top {
  stroke: #2c7ab3;
}

.trig-bridge-arc.bottom {
  stroke: #8b5a07;
}

.trig-bridge-visual.trig-continuation .trig-bridge-arc.top {
  stroke: #6d58b8;
}

.trig-bridge-visual.trig-warning .trig-bridge-arc {
  stroke: #c9532a;
  stroke-dasharray: 9 7;
}

.trig-bridge-visual marker path {
  fill: #17624d;
}

.trig-bridge-token {
  fill: #f5efe0;
  stroke: #0f2a3a;
  stroke-width: 4;
}

.trig-bridge-token-text,
.trig-bridge-title {
  fill: #0f2a3a;
  font-size: 19px;
  font-weight: 900;
  text-anchor: middle;
}

.trig-bridge-kicker,
.trig-bridge-route {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-anchor: middle;
  text-transform: uppercase;
}

.trig-bridge-kicker {
  fill: #0f5877;
}

.trig-bridge-route {
  fill: #7b5108;
}

.badge.trig-world,
.badge.trig-equivalence {
  background: rgba(99, 207, 255, 0.2);
  color: rgb(99, 207, 255);
}

.badge.trig-complex-family {
  background: rgba(99, 207, 255, 0.2);
  color: rgb(99, 207, 255);
}

.badge.trig-circular-family,
.badge.trig-proof {
  background: rgba(255, 189, 102, 0.22);
  color: rgb(255, 189, 102);
}

.badge.trig-identity-family {
  background: rgba(155, 229, 142, 0.26);
  color: rgb(155, 229, 142);
}

.badge.trig-hyperbolic-family {
  background: rgba(122, 231, 199, 0.24);
  color: rgb(122, 231, 199);
}

.badge.trig-continuation-family,
.badge.trig-continuation {
  background: rgba(201, 183, 255, 0.24);
  color: rgb(201, 183, 255);
}

.badge.trig-warning-family,
.badge.trig-warning {
  background: rgba(255, 143, 101, 0.18);
  color: rgb(255, 143, 101);
}

.fractal-workspace {
  display: grid;
  gap: 18px;
}

.fractal-classical {
  --fractal-accent: var(--fractal-classical-color);
}

.fractal-measure {
  --fractal-accent: var(--fractal-measure-color);
}

.fractal-covering {
  --fractal-accent: var(--fractal-covering-color);
}

.fractal-local {
  --fractal-accent: var(--fractal-local-color);
}

.fractal-selfsimilar {
  --fractal-accent: var(--fractal-selfsimilar-color);
}

.fractal-spectral {
  --fractal-accent: var(--fractal-spectral-color);
}

.fractal-multifractal {
  --fractal-accent: var(--fractal-multifractal-color);
}

.fractal-example {
  --fractal-accent: var(--fractal-example-color);
}

.fractal-stochastic {
  --fractal-accent: var(--fractal-stochastic-color);
}

.fractal-warning {
  --fractal-accent: var(--fractal-warning-color);
}

.fractal-controls {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: 16px;
}

.fractal-note {
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg, rgba(122, 231, 199, 0.075), rgba(255, 189, 102, 0.055)),
    rgba(245, 239, 224, 0.05);
}

.fractal-note > p,
.fractal-note > span {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.fractal-note > span {
  display: block;
  margin-top: 8px;
  color: var(--paper);
}

.fractal-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.fractal-legend-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.fractal-legend-item i {
  grid-row: span 2;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--fractal-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fractal-accent) 18%, transparent);
}

.fractal-legend-item strong {
  color: var(--paper);
  font-size: 0.82rem;
  line-height: 1.1;
}

.fractal-legend-item em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.72rem;
  line-height: 1.25;
}

.fractal-relation-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.fractal-relation-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 14px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.76rem;
  line-height: 1.3;
}

.fractal-relation-key {
  position: relative;
  flex: 0 0 48px;
  height: 14px;
  background: linear-gradient(90deg, rgba(122, 231, 199, 0.95), rgba(255, 189, 102, 0.95));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}

.fractal-relation-key::before {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(255, 189, 102, 0.95);
  border-right: 2px solid rgba(255, 189, 102, 0.95);
  transform: translateY(-50%) rotate(45deg);
}

.fractal-relation-key.equality::after,
.fractal-relation-key.scope::after,
.fractal-relation-key.examples::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-left: 2px solid rgba(122, 231, 199, 0.95);
  border-bottom: 2px solid rgba(122, 231, 199, 0.95);
  transform: translateY(-50%) rotate(45deg);
}

.fractal-relation-key.bound::after {
  content: '≤';
  position: absolute;
  left: 17px;
  top: 50%;
  color: rgba(255, 189, 102, 0.95);
  font-weight: 900;
  transform: translateY(-52%);
}

.fractal-relation-key.warning {
  background: repeating-linear-gradient(
    90deg,
    var(--rel-warning) 0 7px,
    transparent 7px 12px
  );
}

.fractal-relation-key.warning::before {
  right: 20px;
  width: 10px;
  height: 10px;
  border: 0;
  background:
    linear-gradient(45deg, transparent 44%, var(--rel-warning) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--rel-warning) 44% 56%, transparent 56%);
  transform: translateY(-50%);
}

.fractal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
  gap: 22px;
  align-items: start;
}

.fractal-graph-panel {
  display: grid;
  gap: 14px;
}

.fractal-graph {
  min-height: 600px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid var(--line-strong);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 50%, rgba(122, 231, 199, 0.11), transparent 33%),
    radial-gradient(circle at 57% 43%, rgba(255, 189, 102, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(245, 239, 224, 0.055), rgba(245, 239, 224, 0.018)),
    rgba(8, 17, 30, 0.58);
}

.fractal-orbit {
  position: relative;
  width: min(100%, 680px);
  min-width: 600px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.fractal-complete-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fractal-edge-hitbox {
  fill: none;
  stroke: transparent;
  stroke-width: 8;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

.fractal-edge {
  --fractal-edge-color: var(--rel-neutral);
  --fractal-edge-active: var(--rel-equivalence);
  fill: none;
  stroke: var(--fractal-edge-color);
  stroke-width: 0.45;
  stroke-linecap: round;
  opacity: 0.32;
  cursor: pointer;
  transition: stroke 180ms ease, stroke-width 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.fractal-edge.fractal-equivalent {
  --fractal-edge-color: var(--rel-equivalence);
  --fractal-edge-active: var(--rel-equivalence);
  opacity: 0.5;
}

.fractal-edge.fractal-implies {
  --fractal-edge-color: var(--rel-consequence);
  --fractal-edge-active: var(--rel-consequence);
  opacity: 0.5;
}

.fractal-edge.fractal-scope-link {
  --fractal-edge-color: var(--rel-scope);
  --fractal-edge-active: var(--rel-scope);
  opacity: 0.5;
}

.fractal-edge.fractal-warning-link {
  --fractal-edge-color: var(--rel-warning);
  --fractal-edge-active: var(--rel-warning);
  opacity: 0.5;
  stroke-dasharray: 1.4 1.5;
}

.fractal-edge:hover,
.fractal-edge.is-hovered:not(.is-active) {
  stroke: var(--fractal-edge-active);
  stroke-width: 0.68;
  opacity: 0.74;
}

.fractal-edge.is-active {
  stroke: var(--fractal-edge-active);
  stroke-width: 0.82;
  opacity: 0.94;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--fractal-edge-active) 70%, transparent));
}

.fractal-edge-signal {
  cursor: pointer;
  opacity: 0.075;
  transition: transform 180ms ease, opacity 180ms ease;
}

.fractal-edge-signal circle {
  fill: rgba(8, 17, 30, 0.42);
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 0.28;
}

.fractal-edge-signal text {
  fill: rgba(237, 243, 247, 0.84);
  font-size: 2.65px;
  font-weight: 900;
  dominant-baseline: middle;
}

.fractal-edge-signal.is-hovered:not(.is-active) {
  opacity: 0.72;
}

.fractal-edge-signal.is-node-active {
  opacity: 0.66;
}

.fractal-edge-signal.is-active {
  opacity: 0.98;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--fractal-edge-active, var(--fractal-measure-color)) 64%, transparent));
}

.fractal-edge-signal.is-active circle,
.fractal-edge-signal.is-node-active circle,
.fractal-edge-signal.is-hovered circle {
  fill: rgba(8, 17, 30, 0.82);
  stroke: rgba(255, 255, 255, 0.28);
}

.fractal-edge-signal.is-active text,
.fractal-edge-signal.is-node-active text,
.fractal-edge-signal.is-hovered text {
  fill: var(--paper);
}

.fractal-edge-signal.is-node-active circle {
  fill: rgba(8, 17, 30, 0.9);
  stroke-width: 0.3;
}

.fractal-edge-signal.is-node-active text {
  fill: rgba(237, 243, 247, 0.96);
}

.fractal-edge-signal.fractal-equivalent circle {
  stroke: var(--rel-equivalence);
}

.fractal-edge-signal.fractal-implies circle {
  stroke: var(--rel-consequence);
}

.fractal-edge-signal.fractal-warning-link circle {
  stroke: var(--rel-warning);
}

.fractal-node {
  position: absolute;
  --fractal-accent: var(--fractal-measure-color);
  width: 98px;
  min-height: 80px;
  transform: translate(-50%, -50%);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 45%, transparent);
  border-radius: 18px;
  cursor: pointer;
  color: var(--text);
  background: color-mix(in srgb, var(--section-accent) 16%, rgba(7, 17, 28, 0.92));
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.fractal-node:hover {
  transform: translate(-50%, -50%) scale(1.04);
  border-color: var(--fractal-accent);
  background: rgba(23, 27, 38, 0.95);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3), 0 0 0 4px color-mix(in srgb, var(--fractal-accent) 16%, transparent);
}

.fractal-node.is-active {
  transform: translate(-50%, -50%) scale(1.045);
  background: rgba(23, 27, 38, 0.97);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--section-accent);
}

.fractal-symbol {
  display: grid;
  place-items: center;
  min-width: 27px;
  height: 24px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--fractal-accent);
  font-weight: 900;
  font-size: 0.54rem;
  line-height: 1;
}

.fractal-node strong {
  font-size: 0.62rem;
  line-height: 1.12;
  text-align: center;
  overflow-wrap: anywhere;
}

.fractal-node small {
  color: var(--muted);
  font-size: 0.49rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.fractal-edge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
  max-height: none;
  overflow: visible;
  padding: 2px 0;
  transition: max-height 180ms ease;
}

.fractal-edge-chip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  color: var(--text);
  background: rgba(245, 239, 224, 0.05);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.fractal-edge-chip.fractal-equivalent {
  border-left: 3px solid var(--rel-equivalence);
}

.fractal-edge-chip.fractal-implies {
  border-left: 3px solid var(--rel-consequence);
}

.fractal-edge-chip.fractal-scope-link {
  border-left: 3px solid var(--rel-scope);
}

.fractal-edge-chip.fractal-warning-link {
  border-left: 3px solid var(--rel-warning);
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--rel-warning) 22%, transparent) 0 8px,
    transparent 8px 14px
  );
}

.fractal-edge-chip:hover,
.fractal-edge-chip.is-hovered:not(.is-active) {
  border-color: rgba(122, 231, 199, 0.38);
  background: rgba(122, 231, 199, 0.1);
}

.fractal-edge-chip.is-active {
  border-color: rgba(122, 231, 199, 0.7);
  background: rgba(122, 231, 199, 0.14);
  box-shadow: 0 0 0 1px rgba(122, 231, 199, 0.16), 0 12px 24px rgba(122, 231, 199, 0.08);
  transform: translateY(-1px);
}

.fractal-edge-chip span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.78rem;
}

.fractal-edge-chip strong {
  font-size: 0.74rem;
  color: var(--paper);
  white-space: nowrap;
}

.fractal-mini-symbol {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--fractal-accent);
  font-size: 0.54rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.fractal-detail {
  position: sticky;
  top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(234, 240, 231, 0.94));
  color: var(--ink);
  box-shadow: var(--shadow);
}

.fractal-detail > * {
  animation: compact-content-in 260ms ease both;
}

.fractal-detail .eyebrow {
  color: #17624d;
}

.fractal-detail .detail-title {
  font-size: clamp(1.55rem, 3vw, 2.35rem);
}

.fractal-detail .detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fractal-title-with-symbol,
.fractal-relation-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  line-height: 1.18;
}

.fractal-relation-title {
  font-size: clamp(1.05rem, 2vw, 1.56rem);
}

.fractal-title-with-symbol span,
.fractal-relation-title span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--fractal-accent);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.fractal-relation-title span.proof-left,
.fractal-relation-title span.proof-right {
  box-shadow: inset 0 0 0 2px rgba(8, 19, 29, 0.14);
}

.fractal-relation-title em {
  color: #17624d;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 900;
}

.fractal-demo-card {
  margin: 22px 0;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  background: rgba(8, 19, 29, 0.05);
  transition: transform 180ms ease, background 180ms ease;
}

.fractal-demo-card:hover {
  transform: translateY(-2px);
  background: rgba(8, 19, 29, 0.065);
}

.fractal-demo-title {
  margin-bottom: 10px;
  color: var(--ink);
  font-weight: 800;
}

.fractal-demo-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.25)),
    repeating-linear-gradient(
      90deg,
      rgba(8, 19, 29, 0.04) 0 1px,
      transparent 1px 24px
    );
}

.fractal-line,
.fractal-arc,
.fractal-heat,
.fractal-spectrum {
  fill: none;
  stroke: #2f8f69;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fractal-line.blue {
  stroke: #2c7ab3;
}

.fractal-line.green {
  stroke: #2f8f69;
}

.fractal-line.muted {
  stroke: rgba(49, 81, 102, 0.34);
  stroke-width: 4;
}

.fractal-line.jitter {
  stroke: #537bd6;
  stroke-width: 4;
}

.fractal-arc {
  stroke: #2c7ab3;
  stroke-width: 4;
}

.fractal-arc.gold {
  stroke: #8b5a07;
}

.fractal-heat {
  stroke: #c9532a;
  stroke-width: 4;
  stroke-dasharray: 8 7;
}

.fractal-spectrum {
  stroke: #7b5108;
  stroke-width: 5;
}

.fractal-soft-box,
.fractal-copy,
.fractal-grid-square,
.fractal-cantor,
.fractal-bar,
.fractal-triangle {
  stroke: rgba(15, 42, 58, 0.34);
  stroke-width: 2;
}

.fractal-soft-box {
  fill: rgba(122, 231, 199, 0.13);
}

.fractal-cover,
.fractal-pack,
.fractal-lens {
  fill: rgba(99, 207, 255, 0.13);
  stroke: rgba(44, 122, 179, 0.76);
  stroke-width: 3;
}

.fractal-cover.small {
  fill: rgba(255, 189, 102, 0.18);
  stroke: rgba(139, 90, 7, 0.66);
}

.fractal-cover.tiny {
  fill: rgba(155, 229, 142, 0.22);
  stroke: rgba(47, 143, 105, 0.68);
}

.fractal-pack {
  fill: rgba(122, 231, 199, 0.2);
  stroke: #2f8f69;
}

.fractal-pack.alt {
  fill: rgba(255, 189, 102, 0.18);
  stroke: #8b5a07;
}

.fractal-lens {
  fill: rgba(201, 183, 255, 0.1);
  stroke: rgba(100, 81, 160, 0.58);
}

.fractal-lens.inner {
  fill: rgba(255, 189, 102, 0.14);
  stroke: rgba(139, 90, 7, 0.62);
}

.fractal-grid-square {
  fill: rgba(99, 207, 255, 0.18);
  stroke: #2c7ab3;
}

.fractal-grid-square.alt {
  fill: rgba(122, 231, 199, 0.2);
  stroke: #2f8f69;
}

.fractal-copy.blue {
  fill: rgba(99, 207, 255, 0.18);
  stroke: #2c7ab3;
}

.fractal-copy.green {
  fill: rgba(122, 231, 199, 0.22);
  stroke: #2f8f69;
}

.fractal-copy.gold {
  fill: rgba(255, 189, 102, 0.2);
  stroke: #8b5a07;
}

.fractal-cantor {
  fill: rgba(122, 231, 199, 0.7);
  stroke: rgba(47, 143, 105, 0.76);
}

.fractal-bar.blue {
  fill: rgba(99, 207, 255, 0.28);
  stroke: #2c7ab3;
}

.fractal-bar.green {
  fill: rgba(122, 231, 199, 0.28);
  stroke: #2f8f69;
}

.fractal-bar.gold {
  fill: rgba(255, 189, 102, 0.3);
  stroke: #8b5a07;
}

.fractal-bar.pink {
  fill: rgba(237, 155, 230, 0.24);
  stroke: #6e1d67;
}

.fractal-triangle {
  fill: rgba(122, 231, 199, 0.24);
  stroke: #2f8f69;
}

.fractal-hole {
  fill: rgba(245, 239, 224, 0.86);
  stroke: rgba(15, 42, 58, 0.2);
  stroke-width: 2;
}

.fractal-dot {
  fill: #f5efe0;
  stroke: #0f2a3a;
  stroke-width: 3;
}

.fractal-dot.alt {
  fill: #ffbd66;
}

.fractal-dot.pink {
  fill: #ed9be6;
}

.fractal-symbol-text,
.fractal-demo-label {
  font-family: 'Space Grotesk', sans-serif;
}

.fractal-symbol-text {
  fill: #0f2a3a;
  font-size: 20px;
  font-weight: 900;
  text-anchor: middle;
}

.fractal-demo-label {
  fill: #0f2a3a;
  font-size: 13px;
  font-weight: 800;
}

.fractal-route-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 16px 0 14px;
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.07);
  border: 1px solid rgba(8, 19, 29, 0.08);
}

.fractal-route-strip span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #17624d;
  background: rgba(122, 231, 199, 0.2);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.fractal-route-strip p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}

.fractal-proof-lines,
.fractal-term-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 18px;
}

.fractal-proof-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.045);
}

.fractal-proof-line span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(122, 231, 199, 0.28);
  font-weight: 900;
  line-height: 1;
}

.fractal-proof-line p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.fractal-term {
  padding: 12px 13px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(122, 231, 199, 0.13), rgba(255, 189, 102, 0.1)),
    rgba(8, 19, 29, 0.045);
  border: 1px solid rgba(8, 19, 29, 0.07);
}

.fractal-term strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
}

.fractal-term p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.fractal-definition-block,
.fractal-clique-note {
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(8, 19, 29, 0.045);
}

.fractal-clique-note {
  border-left: 4px solid rgba(122, 231, 199, 0.7);
}

.fractal-bridge-box {
  stroke-width: 3.2;
}

.fractal-bridge-box.left {
  fill: rgba(122, 231, 199, 0.16);
  stroke: rgba(47, 143, 105, 0.82);
}

.fractal-bridge-box.right {
  fill: rgba(255, 189, 102, 0.16);
  stroke: rgba(139, 90, 7, 0.74);
}

.fractal-bridge-arc {
  fill: none;
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fractal-bridge-arc.upper {
  stroke: #2f8f69;
}

.fractal-bridge-arc.lower {
  stroke: #8b5a07;
}

.fractal-bridge-arc.warning {
  stroke: #c9532a;
  stroke-dasharray: 7 6;
}

.fractal-bridge-arc.bound.lower {
  stroke: rgba(15, 42, 58, 0.22);
  stroke-dasharray: 7 7;
}

.fractal-bridge-arrowhead.upper {
  fill: #2f8f69;
}

.fractal-bridge-arrowhead.lower {
  fill: #8b5a07;
}

.fractal-bridge-arrowhead.warning {
  fill: #c9532a;
}

.fractal-bridge-side,
.fractal-bridge-title,
.fractal-bridge-proof,
.fractal-bridge-dot-label {
  font-family: 'Space Grotesk', sans-serif;
}

.fractal-bridge-side {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.fractal-bridge-side.left,
.fractal-bridge-title.left {
  fill: #17624d;
}

.fractal-bridge-side.right,
.fractal-bridge-title.right {
  fill: #7b5108;
}

.fractal-bridge-title {
  font-size: 13px;
  font-weight: 900;
  dominant-baseline: hanging;
}

.fractal-bridge-proof {
  fill: #0f2a3a;
  font-size: 13px;
  font-weight: 900;
}

.fractal-bridge-proof.upper {
  fill: #17624d;
}

.fractal-bridge-proof.lower {
  fill: #7b5108;
}

.fractal-bridge-dot {
  fill: #f5efe0;
  stroke: #0f2a3a;
  stroke-width: 3;
}

.fractal-bridge-dot-label {
  fill: #0f2a3a;
  font-size: 11px;
  font-weight: 900;
}

.noise-workspace {
  display: grid;
  gap: 18px;
}

.noise-source {
  --noise-accent: var(--noise-source-color);
}

.noise-process {
  --noise-accent: var(--noise-process-color);
}

.noise-increment {
  --noise-accent: var(--noise-increment-color);
}

.noise-parameter-family {
  --noise-accent: var(--noise-parameter-color);
}

.noise-spectrum {
  --noise-accent: var(--noise-spectrum-color);
}

.noise-geometry {
  --noise-accent: var(--noise-geometry-color);
}

.noise-memory {
  --noise-accent: var(--noise-memory-color);
}

.noise-graphics {
  --noise-accent: var(--noise-graphics-color);
}

.noise-recipe {
  --noise-accent: var(--noise-recipe-color);
}

.noise-warning {
  --noise-accent: var(--noise-warning-color);
}

.noise-controls {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: 16px;
}

.noise-note {
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg, rgba(99, 207, 255, 0.075), rgba(237, 155, 230, 0.055)),
    rgba(245, 239, 224, 0.05);
}

.noise-note > p,
.noise-note > span {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.noise-note > span {
  display: block;
  margin-top: 8px;
  color: var(--paper);
}

.noise-legend,
.noise-relation-legend {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.noise-legend {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.noise-relation-legend {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.noise-legend-item,
.noise-relation-legend span {
  display: grid;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
}

.noise-legend-item {
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 2px;
}

.noise-relation-legend span {
  grid-template-columns: auto 1fr;
  gap: 9px;
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 800;
}

.noise-legend-item i {
  grid-row: 1 / span 2;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--noise-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--noise-accent) 18%, transparent);
}

.noise-legend-item strong {
  color: var(--paper);
  font-size: 0.78rem;
}

.noise-legend-item em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.15;
}

.noise-relation-key {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 18px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 189, 102, 0.9);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 900;
}

.noise-relation-key.construction::before {
  content: 'Σ';
}

.noise-relation-key.equivalence::before {
  content: '=';
}

.noise-relation-key.formula::before {
  content: 'α';
}

.noise-relation-key.scope::before {
  content: '↔';
}

.noise-relation-key.warning::before {
  content: '≠';
}

.noise-relation-key.memory::before {
  content: 'H>';
}

.noise-relation-key.equivalence {
  background: var(--rel-equivalence);
}

.noise-relation-key.formula {
  background: var(--rel-consequence);
}

.noise-relation-key.scope {
  background: var(--rel-scope);
}

.noise-relation-key.warning {
  background: var(--rel-warning);
}

.noise-relation-key.memory {
  background: rgba(237, 155, 230, 0.92);
}

.noise-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
  gap: 22px;
  align-items: start;
}

.noise-graph-panel {
  display: grid;
  gap: 14px;
}

.noise-graph {
  min-height: 610px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid var(--line-strong);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 50%, rgba(99, 207, 255, 0.12), transparent 32%),
    radial-gradient(circle at 45% 55%, rgba(237, 155, 230, 0.09), transparent 30%),
    linear-gradient(180deg, rgba(245, 239, 224, 0.055), rgba(245, 239, 224, 0.018)),
    rgba(8, 17, 30, 0.6);
}

.noise-orbit {
  position: relative;
  width: min(100%, 690px);
  min-width: 600px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.noise-complete-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.noise-edge-hitbox {
  fill: none;
  stroke: transparent;
  stroke-width: 8;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

.noise-edge {
  --noise-edge-color: var(--rel-neutral);
  --noise-edge-active: var(--rel-consequence);
  fill: none;
  stroke: var(--noise-edge-color);
  stroke-width: 0.45;
  stroke-linecap: round;
  opacity: 0.32;
  cursor: pointer;
  transition: stroke 180ms ease, stroke-width 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.noise-edge.noise-construction {
  --noise-edge-color: var(--rel-scope);
  --noise-edge-active: var(--rel-scope);
  opacity: 0.5;
}

.noise-edge.noise-equivalent {
  --noise-edge-color: var(--rel-equivalence);
  --noise-edge-active: var(--rel-equivalence);
  opacity: 0.5;
}

.noise-edge.noise-formula,
.noise-edge.noise-parameter {
  --noise-edge-color: var(--rel-consequence);
  --noise-edge-active: var(--rel-consequence);
  opacity: 0.5;
}

.noise-edge.noise-scope-link,
.noise-edge.noise-shaping {
  --noise-edge-color: var(--rel-scope);
  --noise-edge-active: var(--rel-scope);
  opacity: 0.5;
}

.noise-edge.noise-warning-link {
  --noise-edge-color: var(--rel-warning);
  --noise-edge-active: var(--rel-warning);
  opacity: 0.5;
  stroke-dasharray: 1.5 1.6;
}

.noise-edge:hover,
.noise-edge.is-hovered:not(.is-active) {
  stroke: var(--noise-edge-active);
  stroke-width: 0.7;
  opacity: 0.76;
}

.noise-edge.is-active {
  stroke: var(--noise-edge-active);
  stroke-width: 0.86;
  opacity: 0.96;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--noise-edge-active) 70%, transparent));
}

.noise-edge-signal {
  cursor: pointer;
  opacity: 0.085;
  transition: transform 180ms ease, opacity 180ms ease;
}

.noise-edge-signal circle {
  fill: rgba(8, 17, 30, 0.44);
  stroke: rgba(255, 255, 255, 0.11);
  stroke-width: 0.28;
}

.noise-edge-signal text {
  fill: rgba(237, 243, 247, 0.86);
  font-size: 2.32px;
  font-weight: 900;
  dominant-baseline: middle;
}

.noise-edge-signal.is-hovered:not(.is-active) {
  opacity: 0.76;
}

.noise-edge-signal.is-node-active {
  opacity: 0.68;
}

.noise-edge-signal.is-active {
  opacity: 0.98;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--noise-edge-active, var(--noise-process-color)) 64%, transparent));
}

.noise-edge-signal.is-active circle,
.noise-edge-signal.is-node-active circle,
.noise-edge-signal.is-hovered circle {
  fill: rgba(8, 17, 30, 0.86);
  stroke: rgba(255, 255, 255, 0.3);
}

.noise-edge-signal.is-active text,
.noise-edge-signal.is-node-active text,
.noise-edge-signal.is-hovered text {
  fill: var(--paper);
}

.noise-edge-signal.noise-warning-link circle {
  stroke: var(--rel-warning);
}

.noise-node {
  position: absolute;
  --noise-accent: var(--noise-process-color);
  --mst-accent: var(--noise-accent);
  width: 104px;
  min-height: 82px;
  transform: translate(-50%, -50%);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 45%, transparent);
  border-radius: 18px;
  cursor: pointer;
  color: var(--text);
  background: color-mix(in srgb, var(--section-accent) 16%, rgba(7, 17, 28, 0.92));
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.noise-node:hover,
.noise-node.is-active {
  transform: translate(-50%, -50%) scale(1.045);
  background: rgba(23, 27, 38, 0.97);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--section-accent);
}

.noise-symbol {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--noise-accent);
  font-weight: 900;
  font-size: 0.52rem;
  line-height: 1;
}

.noise-node strong {
  font-size: 0.61rem;
  line-height: 1.12;
  text-align: center;
  overflow-wrap: anywhere;
}

.noise-node small {
  color: var(--muted);
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.noise-edge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
  max-height: none;
  overflow: visible;
  padding: 2px 0;
  transition: max-height 180ms ease;
}

.compact-edge-list.is-scrollable,
.mst-edge-list.is-scrollable,
.operator-edge-list.is-scrollable,
.fractal-edge-list.is-scrollable,
.noise-edge-list.is-scrollable,
.integral-edge-list.is-scrollable {
  overflow: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

.noise-edge-chip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  color: var(--text);
  background: rgba(245, 239, 224, 0.05);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.noise-edge-chip.noise-construction {
  border-left: 3px solid var(--rel-scope);
}

.noise-edge-chip.noise-equivalent {
  border-left: 3px solid var(--rel-equivalence);
}

.noise-edge-chip.noise-formula,
.noise-edge-chip.noise-parameter {
  border-left: 3px solid var(--rel-consequence);
}

.noise-edge-chip.noise-scope-link,
.noise-edge-chip.noise-shaping {
  border-left: 3px solid var(--rel-scope);
}

.noise-edge-chip.noise-warning-link {
  border-left: 3px solid var(--rel-warning);
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--rel-warning) 22%, transparent) 0 8px,
    transparent 8px 14px
  );
}

.noise-edge-chip:hover,
.noise-edge-chip.is-hovered:not(.is-active) {
  border-color: rgba(99, 207, 255, 0.4);
  background: rgba(99, 207, 255, 0.1);
}

.noise-edge-chip.is-active {
  border-color: rgba(99, 207, 255, 0.7);
  background: rgba(99, 207, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(99, 207, 255, 0.16), 0 12px 24px rgba(99, 207, 255, 0.08);
  transform: translateY(-1px);
}

.noise-edge-chip span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.78rem;
}

.noise-edge-chip strong {
  color: var(--paper);
  font-size: 0.72rem;
  text-align: center;
  white-space: nowrap;
}

.noise-mini-symbol {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--noise-accent);
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.noise-detail {
  position: sticky;
  top: 24px;
  padding: 28px;
  border-radius: 30px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(234, 239, 243, 0.94));
  box-shadow: var(--shadow);
}

.noise-detail > * {
  animation: compact-content-in 260ms ease both;
}

.noise-detail .eyebrow {
  color: #0f5877;
}

.noise-detail .detail-title {
  font-size: clamp(1.55rem, 3vw, 2.35rem);
}

.noise-title-with-symbol,
.noise-relation-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  line-height: 1.18;
}

.noise-relation-title {
  font-size: clamp(1.05rem, 2vw, 1.52rem);
}

.noise-title-with-symbol span,
.noise-relation-title span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--noise-accent);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.noise-relation-title em {
  color: #0f5877;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 900;
}

.noise-demo-card {
  margin: 22px 0;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  background: rgba(8, 19, 29, 0.05);
  transition: transform 180ms ease, background 180ms ease;
}

.noise-demo-card:hover {
  transform: translateY(-2px);
  background: rgba(8, 19, 29, 0.065);
}

.noise-demo-title {
  margin-bottom: 10px;
  color: var(--ink);
  font-weight: 800;
}

.noise-demo-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.25)),
    repeating-linear-gradient(90deg, rgba(8, 19, 29, 0.04) 0 1px, transparent 1px 24px);
}

.noise-path,
.noise-axis,
.noise-spectrum-line,
.noise-correlation,
.noise-ridge,
.noise-grid-warp,
.noise-gradient-tick {
  fill: none;
  stroke: #2c7ab3;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.noise-path.green,
.noise-gradient-tick,
.noise-correlation {
  stroke: #2f8f69;
}

.noise-path.gold,
.noise-spectrum-line {
  stroke: #8b5a07;
}

.noise-path.red,
.noise-spectrum-line.red,
.noise-ridge,
.noise-warning-x {
  stroke: #c9532a;
}

.noise-spectrum-line.blue {
  stroke: #2c7ab3;
}

.noise-path.muted,
.noise-axis {
  stroke: rgba(49, 81, 102, 0.34);
  stroke-width: 4;
}

.noise-bar,
.noise-box,
.noise-window,
.noise-dot,
.noise-triangle {
  stroke: rgba(15, 42, 58, 0.34);
  stroke-width: 2;
}

.noise-bar.blue,
.noise-box {
  fill: rgba(99, 207, 255, 0.25);
  stroke: #2c7ab3;
}

.noise-bar.green,
.noise-box.alt,
.noise-window {
  fill: rgba(122, 231, 199, 0.24);
  stroke: #2f8f69;
}

.noise-bar.gold,
.noise-window.alt {
  fill: rgba(255, 189, 102, 0.25);
  stroke: #8b5a07;
}

.noise-bar.pink {
  fill: rgba(237, 155, 230, 0.24);
  stroke: #6e1d67;
}

.noise-dot {
  fill: #63cfff;
  stroke: #0f2a3a;
  stroke-width: 3;
}

.noise-dot.alt {
  fill: #ffbd66;
}

.noise-dot.blue-noise-dot {
  fill: #6ad7ff;
  stroke: #164766;
}

.noise-spectrum-hole {
  fill: rgba(255, 255, 255, 0.32);
  stroke: rgba(44, 122, 179, 0.7);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

.noise-triangle {
  fill: rgba(99, 207, 255, 0.16);
  stroke: #2c7ab3;
}

.noise-triangle.alt {
  fill: rgba(122, 231, 199, 0.18);
  stroke: #2f8f69;
}

.noise-warning-x {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.noise-demo-label,
.noise-bridge-side,
.noise-bridge-title,
.noise-bridge-proof,
.noise-bridge-dot-label {
  font-family: 'Space Grotesk', sans-serif;
}

.noise-demo-label {
  fill: #0f2a3a;
  font-size: 13px;
  font-weight: 800;
}

.noise-route-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 16px 0 14px;
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.07);
  border: 1px solid rgba(8, 19, 29, 0.08);
}

.noise-route-strip span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #0f5877;
  background: rgba(99, 207, 255, 0.2);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.noise-route-strip p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}

.noise-proof-lines,
.noise-term-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 18px;
}

.noise-proof-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.045);
}

.noise-proof-line span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(99, 207, 255, 0.28);
  font-weight: 900;
  line-height: 1;
}

.noise-proof-line p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.noise-term {
  padding: 12px 13px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(99, 207, 255, 0.13), rgba(255, 189, 102, 0.1)),
    rgba(8, 19, 29, 0.045);
  border: 1px solid rgba(8, 19, 29, 0.07);
}

.noise-term strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
}

.noise-term p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.noise-definition-block,
.noise-clique-note {
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(8, 19, 29, 0.045);
}

.noise-clique-note {
  border-left: 4px solid rgba(99, 207, 255, 0.7);
}

.noise-bridge-box {
  stroke-width: 3.2;
}

.noise-bridge-box.left {
  fill: rgba(99, 207, 255, 0.16);
  stroke: rgba(44, 122, 179, 0.82);
}

.noise-bridge-box.right {
  fill: rgba(255, 189, 102, 0.16);
  stroke: rgba(139, 90, 7, 0.74);
}

.noise-bridge-arc {
  fill: none;
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.noise-bridge-arc.upper {
  stroke: #2c7ab3;
}

.noise-bridge-arc.lower {
  stroke: #8b5a07;
}

.noise-bridge-arc.warning {
  stroke: #c9532a;
  stroke-dasharray: 7 6;
}

.noise-bridge-arc.formula {
  stroke: #2f8f69;
}

.noise-bridge-arrowhead.upper {
  fill: #2c7ab3;
}

.noise-bridge-arrowhead.lower {
  fill: #8b5a07;
}

.noise-bridge-arrowhead.warning {
  fill: #c9532a;
}

.noise-bridge-arrowhead.formula {
  fill: #2f8f69;
}

.noise-bridge-side {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.noise-bridge-side.left,
.noise-bridge-title.left {
  fill: #0f5877;
}

.noise-bridge-side.right,
.noise-bridge-title.right {
  fill: #7b5108;
}

.noise-bridge-title {
  font-size: 12px;
  font-weight: 900;
  dominant-baseline: hanging;
}

.noise-bridge-proof {
  fill: #0f2a3a;
  font-size: 13px;
  font-weight: 900;
}

.noise-bridge-proof.upper {
  fill: #0f5877;
}

.noise-bridge-proof.lower {
  fill: #7b5108;
}

.noise-bridge-dot {
  fill: #f5efe0;
  stroke: #0f2a3a;
  stroke-width: 3;
}

.noise-bridge-dot-label {
  fill: #0f2a3a;
  font-size: 10px;
  font-weight: 900;
}

.integral-section {
  background:
    radial-gradient(circle at 18% 24%, rgba(99, 207, 255, 0.1), transparent 28%),
    radial-gradient(circle at 78% 20%, rgba(155, 229, 142, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(9, 18, 29, 0.94), rgba(5, 12, 21, 0.96));
}

.integral-workspace {
  display: grid;
  gap: 18px;
}

.integral-note {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
}

.integral-note p {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

.integral-note strong {
  color: var(--integral-measure-color);
}

.integral-legend,
.integral-relation-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.integral-legend-item,
.integral-relation-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.76rem;
}

.integral-legend-item i,
.integral-relation-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--integral-classical-color);
  box-shadow: 0 0 14px currentColor;
}

.integral-legend-item strong,
.integral-legend-item em {
  color: inherit;
}

.integral-legend-item em {
  font-style: normal;
  color: var(--muted);
}

.integral-legend-item.integral-classical i {
  background: var(--integral-classical-color);
}

.integral-legend-item.integral-limit i,
.integral-relation-legend .warning {
  background: var(--integral-limit-color);
}

.integral-legend-item.integral-measure i,
.integral-relation-legend .extension {
  background: var(--integral-measure-color);
}

.integral-legend-item.integral-gauge i {
  background: var(--integral-gauge-color);
}

.integral-legend-item.integral-weighted i {
  background: var(--integral-weighted-color);
}

.integral-legend-item.integral-weak i {
  background: var(--integral-weak-color);
}

.integral-legend-item.integral-criterion-family i,
.integral-relation-legend .criterion {
  background: var(--integral-criterion-color);
}

.integral-relation-legend .equivalence {
  background: var(--integral-classical-color);
}

.integral-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
  gap: 22px;
  align-items: start;
}

.integral-graph-panel {
  display: grid;
  gap: 14px;
}

.integral-map {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 50% 52%, rgba(99, 207, 255, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 42%),
    rgba(3, 9, 17, 0.72);
}

.integral-orbit {
  position: relative;
  min-height: 560px;
}

.integral-complete-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.integral-edge-hitbox {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  cursor: pointer;
}

.integral-edge {
  fill: none;
  stroke: var(--rel-neutral);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.32;
  transition: opacity 180ms ease, stroke 180ms ease, stroke-width 180ms ease, filter 180ms ease;
}

.integral-edge.integral-equivalent {
  stroke: var(--rel-equivalence);
  opacity: 0.5;
}

.integral-edge.integral-extension {
  stroke: var(--rel-scope);
  opacity: 0.5;
}

.integral-edge.integral-scope-link {
  stroke: var(--rel-scope);
  opacity: 0.5;
}

.integral-edge.integral-criterion {
  stroke: var(--rel-consequence);
  opacity: 0.5;
}

.integral-edge.integral-weak-link {
  stroke: var(--rel-warning);
  opacity: 0.5;
}

.integral-edge.integral-warning-link {
  stroke: var(--rel-warning);
  opacity: 0.5;
  stroke-dasharray: 6 6;
}

.integral-edge.is-active,
.integral-edge.is-hovered {
  stroke-width: 4.8;
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(155, 229, 142, 0.26));
}

.integral-edge-signal {
  opacity: 0.15;
  pointer-events: bounding-box;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.integral-edge-signal circle {
  fill: rgba(3, 9, 17, 0.86);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 0.8;
}

.integral-edge-signal text {
  fill: rgba(245, 239, 224, 0.78);
  font-size: 2.1px;
  font-weight: 900;
  dominant-baseline: middle;
}

.integral-edge-signal.is-node-active {
  opacity: 0.74;
}

.integral-edge-signal.is-active,
.integral-edge-signal.is-hovered {
  opacity: 1;
  filter: drop-shadow(0 0 9px rgba(245, 239, 224, 0.34));
}

.integral-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 136px;
  min-height: 78px;
  padding: 9px 10px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 45%, transparent);
  color: var(--text);
  background: color-mix(in srgb, var(--section-accent) 16%, rgba(3, 11, 20, 0.92));
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.integral-node:hover,
.integral-node.is-active,
.integral-node.is-endpoint {
  background: rgba(13, 28, 27, 0.92);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--section-accent);
  transform: translate(-50%, -51.5%);
}

.integral-symbol {
  display: grid;
  place-items: center;
  min-width: 31px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--integral-classical-color);
  font-weight: 900;
  font-size: 0.62rem;
  line-height: 1;
}

.integral-node.integral-limit .integral-symbol {
  background: var(--integral-limit-color);
}

.integral-node.integral-measure .integral-symbol {
  background: var(--integral-measure-color);
}

.integral-node.integral-gauge .integral-symbol {
  background: var(--integral-gauge-color);
}

.integral-node.integral-weighted .integral-symbol {
  background: var(--integral-weighted-color);
}

.integral-node.integral-weak .integral-symbol {
  background: var(--integral-weak-color);
}

.integral-node.integral-criterion-family .integral-symbol {
  background: var(--integral-criterion-color);
}

.integral-node strong {
  margin-top: 6px;
  font-size: 0.7rem;
  line-height: 1.12;
  text-align: center;
  overflow-wrap: anywhere;
}

.integral-node small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.49rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.integral-edge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
  max-height: none;
  overflow: visible;
  padding: 2px 0;
  transition: max-height 180ms ease;
}

.integral-edge-chip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  color: var(--text);
  background: rgba(245, 239, 224, 0.05);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.integral-edge-chip.integral-equivalent {
  border-left: 3px solid var(--rel-equivalence);
}

.integral-edge-chip.integral-extension {
  border-left: 3px solid var(--rel-scope);
}

.integral-edge-chip.integral-scope-link {
  border-left: 3px solid var(--rel-scope);
}

.integral-edge-chip.integral-criterion {
  border-left: 3px solid var(--rel-consequence);
}

.integral-edge-chip.integral-weak-link {
  border-left: 3px solid var(--rel-warning);
}

.integral-edge-chip.integral-warning-link {
  border-left: 3px solid var(--rel-warning);
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--rel-warning) 22%, transparent) 0 8px,
    transparent 8px 14px
  );
}

.integral-edge-chip:hover,
.integral-edge-chip.is-hovered:not(.is-active) {
  border-color: rgba(155, 229, 142, 0.4);
  background: rgba(155, 229, 142, 0.1);
}

.integral-edge-chip.is-active {
  border-color: rgba(155, 229, 142, 0.7);
  background: rgba(155, 229, 142, 0.14);
  box-shadow: 0 0 0 1px rgba(155, 229, 142, 0.16), 0 12px 24px rgba(155, 229, 142, 0.08);
  transform: translateY(-1px);
}

.integral-edge-chip span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.76rem;
}

.integral-edge-chip strong {
  color: var(--paper);
  font-size: 0.7rem;
  text-align: center;
  white-space: nowrap;
}

.integral-mini-symbol {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--integral-classical-color);
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.integral-mini-symbol.integral-limit {
  background: var(--integral-limit-color);
}

.integral-mini-symbol.integral-measure {
  background: var(--integral-measure-color);
}

.integral-mini-symbol.integral-gauge {
  background: var(--integral-gauge-color);
}

.integral-mini-symbol.integral-weighted {
  background: var(--integral-weighted-color);
}

.integral-mini-symbol.integral-weak {
  background: var(--integral-weak-color);
}

.integral-mini-symbol.integral-criterion-family {
  background: var(--integral-criterion-color);
}

.integral-detail {
  position: sticky;
  top: 24px;
  padding: 28px;
  border-radius: 30px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(232, 241, 229, 0.94));
  box-shadow: var(--shadow);
}

.integral-detail > * {
  animation: compact-content-in 260ms ease both;
}

.integral-detail .eyebrow {
  color: #17624d;
}

.integral-detail .detail-title {
  font-size: clamp(1.55rem, 3vw, 2.35rem);
}

.integral-title-with-symbol,
.integral-relation-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  line-height: 1.18;
}

.integral-relation-title {
  font-size: clamp(1.05rem, 2vw, 1.52rem);
}

.integral-title-with-symbol span,
.integral-relation-title span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--integral-classical-color);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.integral-title-with-symbol .integral-limit,
.integral-relation-title .integral-limit {
  background: var(--integral-limit-color);
}

.integral-title-with-symbol .integral-measure,
.integral-relation-title .integral-measure {
  background: var(--integral-measure-color);
}

.integral-title-with-symbol .integral-gauge,
.integral-relation-title .integral-gauge {
  background: var(--integral-gauge-color);
}

.integral-title-with-symbol .integral-weighted,
.integral-relation-title .integral-weighted {
  background: var(--integral-weighted-color);
}

.integral-title-with-symbol .integral-weak,
.integral-relation-title .integral-weak {
  background: var(--integral-weak-color);
}

.integral-title-with-symbol .integral-criterion-family,
.integral-relation-title .integral-criterion-family {
  background: var(--integral-criterion-color);
}

.integral-relation-title em {
  color: #17624d;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 900;
}

.integral-demo-card {
  margin: 22px 0;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  background: rgba(8, 19, 29, 0.05);
  transition: transform 180ms ease, background 180ms ease;
}

.integral-demo-card:hover {
  transform: translateY(-2px);
  background: rgba(8, 19, 29, 0.065);
}

.integral-demo-title {
  margin-bottom: 10px;
  color: var(--ink);
  font-weight: 800;
}

.integral-demo-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.25)),
    repeating-linear-gradient(90deg, rgba(8, 19, 29, 0.04) 0 1px, transparent 1px 24px);
}

.integral-demo-axis,
.integral-demo-curve,
.integral-limit-line,
.integral-step,
.integral-density,
.integral-test-function,
.integral-bridge-arc {
  fill: none;
  stroke: #17624d;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.integral-demo-axis {
  stroke: rgba(49, 81, 102, 0.34);
  stroke-width: 4;
}

.integral-demo-curve.warning,
.integral-limit-line {
  stroke: #c9532a;
}

.integral-demo-curve.gauge {
  stroke: #4d3987;
}

.integral-demo-curve.absolute,
.integral-density {
  stroke: #2c7a36;
}

.integral-demo-curve.weak,
.integral-test-function {
  stroke: #6e1d67;
}

.integral-limit-line {
  stroke-dasharray: 6 6;
  opacity: 0.58;
}

.integral-rect,
.integral-level,
.integral-weight-bar,
.integral-gauge-ring,
.integral-atom {
  stroke: rgba(15, 42, 58, 0.34);
  stroke-width: 2;
}

.integral-rect.upper {
  fill: rgba(99, 207, 255, 0.2);
  stroke: #2c7ab3;
}

.integral-rect.lower,
.integral-rect.sample {
  fill: rgba(155, 229, 142, 0.2);
  stroke: #2c7a36;
}

.integral-level.level-a {
  fill: rgba(155, 229, 142, 0.22);
}

.integral-level.level-b {
  fill: rgba(99, 207, 255, 0.22);
}

.integral-level.level-c {
  fill: rgba(255, 189, 102, 0.25);
}

.integral-sample-dot {
  fill: #ffbd66;
  stroke: #0f2a3a;
  stroke-width: 2;
}

.integral-gauge-ring {
  fill: rgba(201, 183, 255, 0.1);
  stroke: #4d3987;
}

.integral-gauge-ring.small {
  fill: rgba(255, 143, 101, 0.12);
  stroke: #c9532a;
}

.integral-step {
  stroke: #8b5a07;
}

.integral-weight-bar {
  fill: rgba(255, 189, 102, 0.3);
  stroke: #8b5a07;
}

.integral-weight-bar.alt {
  fill: rgba(99, 207, 255, 0.24);
  stroke: #2c7ab3;
}

.integral-atom {
  fill: rgba(255, 189, 102, 0.42);
  stroke: #8b5a07;
}

.integral-atom.alt {
  fill: rgba(237, 155, 230, 0.34);
  stroke: #6e1d67;
}

.integral-demo-label,
.integral-bridge-side,
.integral-bridge-title,
.integral-bridge-proof,
.integral-bridge-dot-label {
  font-family: 'Space Grotesk', sans-serif;
}

.integral-demo-label {
  fill: #0f2a3a;
  font-size: 13px;
  font-weight: 800;
}

.integral-route-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 16px 0 14px;
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.07);
  border: 1px solid rgba(8, 19, 29, 0.08);
}

.integral-route-strip span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #17624d;
  background: rgba(155, 229, 142, 0.22);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.integral-route-strip p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}

.integral-proof-lines,
.integral-term-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 18px;
}

.integral-proof-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.045);
}

.integral-proof-line span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(155, 229, 142, 0.28);
  font-weight: 900;
  line-height: 1;
}

.integral-proof-line p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.integral-term {
  padding: 12px 13px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(155, 229, 142, 0.13), rgba(99, 207, 255, 0.1)),
    rgba(8, 19, 29, 0.045);
  border: 1px solid rgba(8, 19, 29, 0.07);
}

.integral-term strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
}

.integral-term p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.integral-definition-block {
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(8, 19, 29, 0.045);
}

.integral-bridge-box {
  stroke-width: 3.2;
}

.integral-bridge-box.left {
  fill: rgba(99, 207, 255, 0.16);
  stroke: rgba(44, 122, 179, 0.82);
}

.integral-bridge-box.right {
  fill: rgba(155, 229, 142, 0.16);
  stroke: rgba(47, 143, 105, 0.82);
}

.integral-bridge-arc {
  stroke-width: 3.1;
}

.integral-bridge-arc.upper {
  stroke: #2c7ab3;
}

.integral-bridge-arc.lower {
  stroke: #2f8f69;
}

.integral-bridge-arc.warning {
  stroke: #c9532a;
  stroke-dasharray: 7 6;
}

.integral-bridge-arc.criterion {
  stroke: #17624d;
}

.integral-bridge-arc.weak {
  stroke: #6e1d67;
}

.integral-bridge-arrowhead.upper {
  fill: #2c7ab3;
}

.integral-bridge-arrowhead.lower {
  fill: #2f8f69;
}

.integral-bridge-arrowhead.warning {
  fill: #c9532a;
}

.integral-bridge-arrowhead.criterion {
  fill: #17624d;
}

.integral-bridge-arrowhead.weak {
  fill: #6e1d67;
}

.integral-bridge-side {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.integral-bridge-side.left,
.integral-bridge-title.left {
  fill: #0f5877;
}

.integral-bridge-side.right,
.integral-bridge-title.right {
  fill: #17624d;
}

.integral-bridge-title {
  font-size: 12px;
  font-weight: 900;
  dominant-baseline: hanging;
}

.integral-bridge-proof {
  fill: #0f2a3a;
  font-size: 13px;
  font-weight: 900;
}

.integral-bridge-proof.upper {
  fill: #0f5877;
}

.integral-bridge-proof.lower {
  fill: #17624d;
}

.integral-bridge-dot {
  fill: #f5efe0;
  stroke: #0f2a3a;
  stroke-width: 3;
}

.integral-bridge-dot-label {
  fill: #0f2a3a;
  font-size: 10px;
  font-weight: 900;
}

.field-section {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 189, 102, 0.12), transparent 30%),
    radial-gradient(circle at 78% 72%, rgba(141, 232, 188, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(8, 18, 29, 0.94), rgba(4, 11, 20, 0.96));
}

.field-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(420px, 1.28fr);
  gap: 22px;
  align-items: start;
}

.field-card-grid {
  display: grid;
  gap: 14px;
}

.field-card {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 230px;
  padding: 20px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  background:
    radial-gradient(circle at 88% 18%, rgba(99, 207, 255, 0.16), transparent 22%),
    rgba(4, 12, 22, 0.86);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.field-card.moving {
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 189, 102, 0.17), transparent 22%),
    rgba(4, 12, 22, 0.86);
}

.field-card:hover,
.field-card.is-active {
  border-color: rgba(141, 232, 188, 0.58);
  background:
    radial-gradient(circle at 88% 18%, rgba(141, 232, 188, 0.2), transparent 24%),
    rgba(7, 18, 27, 0.94);
  box-shadow: 0 0 0 1px rgba(141, 232, 188, 0.15), 0 18px 42px rgba(141, 232, 188, 0.1);
  transform: translateY(-2px);
}

.field-symbol {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--field-static-color);
  font-weight: 900;
  line-height: 1;
}

.field-card.moving .field-symbol {
  background: var(--field-moving-color);
}

.field-kicker {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.field-card strong {
  color: var(--paper);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.12;
}

.field-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.field-card code {
  display: block;
  width: 100%;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  border-radius: 14px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.07);
  font-family: 'Cambria Math', 'Times New Roman', serif;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.45;
}

.field-detail {
  position: sticky;
  top: 24px;
  padding: 28px;
  border-radius: 30px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(236, 241, 232, 0.94));
  box-shadow: var(--shadow);
}

.field-detail > * {
  animation: compact-content-in 260ms ease both;
}

.field-detail .eyebrow {
  color: #17624d;
}

.field-title-with-symbol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  line-height: 1.18;
}

.field-title-with-symbol span {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--field-static-color);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
}

.field-title-with-symbol span.moving {
  background: var(--field-moving-color);
}

.field-demo-card {
  margin: 22px 0;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  background: rgba(8, 19, 29, 0.05);
  transition: transform 180ms ease, background 180ms ease;
}

.field-demo-card:hover {
  transform: translateY(-2px);
  background: rgba(8, 19, 29, 0.065);
}

.field-demo-title {
  margin-bottom: 10px;
  color: var(--ink);
  font-weight: 800;
}

.field-demo-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.25)),
    repeating-linear-gradient(90deg, rgba(8, 19, 29, 0.04) 0 1px, transparent 1px 24px);
}

.field-region {
  stroke-width: 4;
  stroke-linejoin: round;
}

.field-region.static {
  fill: rgba(99, 207, 255, 0.18);
  stroke: rgba(44, 122, 179, 0.8);
}

.field-region.ghost {
  fill: rgba(99, 207, 255, 0.08);
  stroke: rgba(44, 122, 179, 0.36);
  stroke-dasharray: 8 7;
}

.field-region.moving {
  fill: rgba(255, 189, 102, 0.2);
  stroke: rgba(139, 90, 7, 0.76);
}

.field-grid-line,
.field-flux-arrow,
.field-velocity-arrow,
.field-mini-vector {
  fill: none;
  stroke: #17624d;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  marker-end: url(#fieldArrow);
}

.field-grid-line {
  stroke: rgba(23, 98, 77, 0.36);
  stroke-width: 3;
  marker-end: none;
}

.field-flux-arrow {
  stroke: #0f5877;
}

.field-velocity-arrow {
  stroke: #8b5a07;
}

.field-mini-vector {
  stroke: #17624d;
  stroke-width: 2.5;
}

.field-demo-svg marker path {
  fill: currentColor;
}

.field-dot {
  fill: var(--field-static-color);
  stroke: #0f2a3a;
  stroke-width: 3;
}

.field-dot.alt {
  fill: var(--field-moving-color);
}

.field-demo-label,
.field-demo-small {
  fill: #0f2a3a;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
}

.field-demo-label {
  font-size: 17px;
}

.field-demo-label.alt {
  fill: #8b5a07;
}

.field-demo-small {
  font-size: 13px;
}

.field-formula-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(8, 19, 29, 0.07);
  border: 1px solid rgba(8, 19, 29, 0.08);
}

.field-formula-strip span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #17624d;
  background: rgba(141, 232, 188, 0.22);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.field-formula-strip code {
  color: var(--ink);
  font-family: 'Cambria Math', 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.field-definition-block {
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(8, 19, 29, 0.045);
}

.field-type-gallery {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  padding: 15px;
  border-radius: 22px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  background:
    linear-gradient(135deg, rgba(99, 207, 255, 0.08), rgba(255, 189, 102, 0.07)),
    rgba(8, 19, 29, 0.04);
}

.field-type-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: end;
}

.field-type-head h3,
.field-type-head p {
  margin: 0;
}

.field-type-head h3 {
  color: var(--ink);
  font-size: 1rem;
}

.field-type-head p {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.field-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 9px;
}

.field-type-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px;
  border-radius: 16px;
  border: 1px solid rgba(8, 19, 29, 0.07);
  background: rgba(255, 255, 255, 0.32);
}

.field-type-card > span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(99, 207, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.field-type-card:nth-child(2n) > span {
  background: rgba(255, 189, 102, 0.62);
}

.field-type-card strong {
  display: block;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.15;
}

.field-type-card code {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-family: 'Cambria Math', 'Times New Roman', serif;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.field-type-card p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.42;
}

.field-theorem-panel {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  background:
    linear-gradient(135deg, rgba(99, 207, 255, 0.08), rgba(141, 232, 188, 0.07)),
    rgba(8, 19, 29, 0.045);
}

.field-theorem-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.field-theorem-head h3,
.field-theorem-head p {
  margin: 0;
}

.field-theorem-head h3 {
  color: var(--ink);
}

.field-theorem-head p {
  margin-top: 5px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.field-theorem-head > span {
  flex: 0 0 auto;
  padding: 7px 9px;
  border-radius: 999px;
  color: #17624d;
  background: rgba(141, 232, 188, 0.2);
  font-size: 0.72rem;
  font-weight: 900;
}

.field-theorem-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
}

.field-theorem-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 50px;
  padding: 9px;
  border-radius: 14px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.36);
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.field-theorem-tab:hover,
.field-theorem-tab.is-active {
  border-color: rgba(23, 98, 77, 0.28);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 10px 24px rgba(8, 19, 29, 0.08);
  transform: translateY(-1px);
}

.field-theorem-tab span,
.field-theorem-title-row > span {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--field-static-color);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.field-theorem-tab.moving span,
.field-theorem-detail.moving .field-theorem-title-row > span {
  background: var(--field-moving-color);
}

.field-theorem-tab.complex span,
.field-theorem-detail.complex .field-theorem-title-row > span {
  background: var(--integral-weak-color);
}

.field-theorem-tab.forms span,
.field-theorem-detail.forms .field-theorem-title-row > span {
  background: var(--integral-gauge-color);
}

.field-theorem-tab.constraint span,
.field-theorem-detail.constraint .field-theorem-title-row > span {
  background: var(--field-transport-color);
}

.field-theorem-tab strong {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.12;
}

.field-theorem-detail {
  display: grid;
  gap: 12px;
  padding: 15px;
  border-radius: 20px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  background: rgba(255, 255, 255, 0.36);
}

.field-theorem-title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.field-theorem-title-row h4,
.field-theorem-title-row p {
  margin: 0;
}

.field-theorem-title-row h4 {
  color: var(--ink);
  font-size: 1.08rem;
}

.field-theorem-title-row p {
  margin-top: 5px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.field-formula-strip.theorem {
  margin: 0;
  background: rgba(8, 19, 29, 0.055);
}

.field-theorem-visual {
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(8, 19, 29, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.2)),
    repeating-linear-gradient(90deg, rgba(8, 19, 29, 0.035) 0 1px, transparent 1px 24px);
}

.field-theorem-visual svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 190px;
  border-radius: 14px;
}

.field-theorem-visual marker path {
  fill: #17624d;
}

.field-theorem-visual .field-region {
  stroke-width: 4;
}

.field-region.flat {
  fill: rgba(99, 207, 255, 0.18);
  stroke: rgba(15, 88, 119, 0.68);
}

.field-region.flat.complex {
  fill: rgba(237, 155, 230, 0.16);
  stroke: rgba(110, 29, 103, 0.68);
}

.field-region.volume {
  fill: rgba(141, 232, 188, 0.2);
  stroke: rgba(23, 98, 77, 0.7);
}

.field-boundary-loop,
.field-curl-loop,
.field-wave-line,
.field-axis-line,
.field-flow-line,
.field-level-set,
.field-constraint-curve,
.field-normal-arrow,
.field-tangent-arrow,
.field-mini-vector.theorem,
.field-surface-sheet {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field-boundary-loop {
  stroke: #0f5877;
  stroke-width: 5;
}

.field-boundary-loop.forms {
  stroke: #5d47a3;
}

.field-boundary-loop.complex {
  stroke: #8d3e86;
}

.field-curl-loop {
  stroke: #17624d;
  stroke-width: 4;
  marker-end: url(#fieldTheoremArrow);
}

.field-curl-loop.alt {
  stroke: #8b5a07;
}

.field-surface-sheet {
  fill: rgba(99, 207, 255, 0.16);
  stroke: rgba(15, 88, 119, 0.42);
  stroke-width: 4;
}

.field-surface-sheet.forms {
  fill: rgba(201, 183, 255, 0.18);
  stroke: rgba(93, 71, 163, 0.42);
}

.field-source-dot,
.field-particle {
  fill: var(--field-static-color);
  stroke: #0f2a3a;
  stroke-width: 3;
}

.field-source-dot.alt,
.field-particle.alt {
  fill: var(--field-moving-color);
}

.field-flux-arrow.theorem,
.field-normal-arrow,
.field-tangent-arrow,
.field-mini-vector.theorem,
.field-flow-line,
.field-theorem-visual .field-velocity-arrow {
  marker-end: url(#fieldTheoremArrow);
}

.field-flux-arrow.theorem,
.field-normal-arrow,
.field-tangent-arrow,
.field-mini-vector.theorem,
.field-flow-line,
.field-theorem-visual .field-velocity-arrow {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field-flux-arrow.theorem,
.field-normal-arrow {
  stroke: #0f5877;
}

.field-normal-arrow.forms {
  stroke: #5d47a3;
}

.field-tangent-arrow,
.field-mini-vector.theorem,
.field-flow-line {
  stroke: #17624d;
}

.field-flow-line.alt {
  stroke: #8b5a07;
}

.field-theorem-visual .field-velocity-arrow {
  stroke: #8b5a07;
}

.field-wave-line {
  stroke: #5d47a3;
  stroke-width: 4;
}

.field-axis-line {
  stroke: rgba(15, 42, 58, 0.34);
  stroke-width: 3;
}

.field-interval {
  stroke-width: 3;
}

.field-interval.old {
  fill: rgba(99, 207, 255, 0.18);
  stroke: rgba(15, 88, 119, 0.5);
}

.field-interval.new {
  fill: rgba(255, 189, 102, 0.18);
  stroke: rgba(139, 90, 7, 0.6);
}

.field-level-set {
  fill: rgba(141, 232, 188, 0.12);
  stroke: rgba(23, 98, 77, 0.38);
  stroke-width: 4;
}

.field-constraint-curve {
  stroke: #8b5a07;
  stroke-width: 5;
}

.field-form-token {
  fill: #2d3f72;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 900;
}

.field-form-token.alt {
  fill: #7a3b06;
}

.field-theorem-svg-label {
  fill: #0f2a3a;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 900;
}

.field-theorem-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 9px;
}

.field-theorem-facts > div,
.field-complex-note,
.field-trig-aside {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(8, 19, 29, 0.07);
  background: rgba(8, 19, 29, 0.045);
}

.field-theorem-facts strong,
.field-complex-note strong,
.field-trig-aside strong {
  display: block;
  color: var(--ink);
}

.field-theorem-facts p,
.field-complex-note p,
.field-trig-aside p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  line-height: 1.48;
}

.field-proof-stack {
  display: grid;
  gap: 8px;
}

.field-proof-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(8, 19, 29, 0.045);
}

.field-proof-line span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(99, 207, 255, 0.28);
  font-weight: 900;
  line-height: 1;
}

.field-proof-line p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.field-complex-note {
  border-left: 4px solid rgba(237, 155, 230, 0.62);
}

.field-trig-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.86fr);
  gap: 12px;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(237, 155, 230, 0.12), rgba(99, 207, 255, 0.09)),
    rgba(8, 19, 29, 0.035);
}

.field-trig-aside span {
  display: block;
  margin-bottom: 5px;
  color: #6e1d67;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field-trig-aside code {
  color: var(--ink);
  font-family: 'Cambria Math', 'Times New Roman', serif;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.6;
}

.field-topic-grid,
.field-term-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.field-topic,
.field-term {
  padding: 13px;
  border-radius: 16px;
  border: 1px solid rgba(8, 19, 29, 0.07);
  background: rgba(8, 19, 29, 0.045);
}

.field-topic strong,
.field-term strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
}

.field-topic p,
.field-term p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.field-topic:nth-child(2n),
.field-term:nth-child(2n) {
  background: linear-gradient(90deg, rgba(99, 207, 255, 0.09), rgba(141, 232, 188, 0.08));
}

.field-comparison {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  padding: 13px;
  border-radius: 18px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  background: rgba(8, 19, 29, 0.045);
}

.field-comparison-pill {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--field-static-color);
  font-weight: 900;
}

.field-comparison-pill.alt {
  background: var(--field-moving-color);
}

.field-comparison strong {
  display: block;
  color: var(--ink);
}

.field-comparison p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  line-height: 1.35;
}

.field-comparison-arrow {
  color: #17624d;
  font-size: 1.2rem;
  font-weight: 900;
}

.field-comparison button {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(8, 19, 29, 0.1);
  color: #17624d;
  background: rgba(141, 232, 188, 0.2);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
}

.field-comparison button:hover {
  background: rgba(141, 232, 188, 0.32);
}

.badge.fractal-world {
  background: rgba(122, 231, 199, 0.18);
  color: rgb(122, 231, 199);
}

.badge.fractal-classical,
.badge.fractal-equivalent {
  background: rgba(122, 231, 199, 0.22);
  color: rgb(122, 231, 199);
}

.badge.fractal-measure,
.badge.fractal-scope-link {
  background: rgba(99, 207, 255, 0.2);
  color: rgb(99, 207, 255);
}

.badge.fractal-covering,
.badge.fractal-implies {
  background: rgba(255, 189, 102, 0.22);
  color: rgb(255, 189, 102);
}

.badge.fractal-local {
  background: rgba(201, 183, 255, 0.24);
  color: rgb(201, 183, 255);
}

.badge.fractal-selfsimilar {
  background: rgba(155, 229, 142, 0.26);
  color: rgb(155, 229, 142);
}

.badge.fractal-spectral {
  background: rgba(237, 155, 230, 0.22);
  color: rgb(237, 155, 230);
}

.badge.fractal-multifractal {
  background: rgba(240, 205, 113, 0.24);
  color: rgb(240, 205, 113);
}

.badge.fractal-example {
  background: rgba(141, 232, 188, 0.24);
  color: rgb(141, 232, 188);
}

.badge.fractal-stochastic {
  background: rgba(116, 167, 255, 0.22);
  color: rgb(116, 167, 255);
}

.badge.fractal-warning,
.badge.fractal-warning-link {
  background: rgba(255, 127, 127, 0.18);
  color: rgb(255, 127, 127);
}

.badge.noise-world,
.badge.noise-equivalent {
  background: rgba(99, 207, 255, 0.2);
  color: rgb(99, 207, 255);
}

.badge.noise-source {
  background: rgba(240, 205, 113, 0.24);
  color: rgb(240, 205, 113);
}

.badge.noise-process,
.badge.noise-construction {
  background: rgba(99, 207, 255, 0.2);
  color: rgb(99, 207, 255);
}

.badge.noise-increment,
.badge.noise-scope-link {
  background: rgba(122, 231, 199, 0.22);
  color: rgb(122, 231, 199);
}

.badge.noise-parameter-family,
.badge.noise-parameter,
.badge.noise-formula {
  background: rgba(255, 189, 102, 0.22);
  color: rgb(255, 189, 102);
}

.badge.noise-spectrum {
  background: rgba(201, 183, 255, 0.24);
  color: rgb(201, 183, 255);
}

.badge.noise-geometry {
  background: rgba(155, 229, 142, 0.26);
  color: rgb(155, 229, 142);
}

.badge.noise-memory {
  background: rgba(237, 155, 230, 0.22);
  color: rgb(237, 155, 230);
}

.badge.noise-graphics,
.badge.noise-shaping {
  background: rgba(141, 232, 188, 0.24);
  color: rgb(141, 232, 188);
}

.badge.noise-recipe {
  background: rgba(116, 167, 255, 0.22);
  color: rgb(116, 167, 255);
}

.badge.noise-warning,
.badge.noise-warning-link {
  background: rgba(255, 127, 127, 0.18);
  color: rgb(255, 127, 127);
}

.badge.integral-world,
.badge.integral-extension {
  background: rgba(155, 229, 142, 0.22);
  color: rgb(155, 229, 142);
}

.badge.integral-classical,
.badge.integral-equivalent {
  background: rgba(99, 207, 255, 0.2);
  color: rgb(99, 207, 255);
}

.badge.integral-limit,
.badge.integral-warning-link {
  background: rgba(255, 143, 101, 0.2);
  color: rgb(255, 143, 101);
}

.badge.integral-measure,
.badge.integral-scope-link {
  background: rgba(155, 229, 142, 0.24);
  color: rgb(155, 229, 142);
}

.badge.integral-gauge {
  background: rgba(201, 183, 255, 0.24);
  color: rgb(201, 183, 255);
}

.badge.integral-weighted,
.badge.integral-criterion {
  background: rgba(255, 189, 102, 0.23);
  color: rgb(255, 189, 102);
}

.badge.integral-weak,
.badge.integral-weak-link {
  background: rgba(237, 155, 230, 0.22);
  color: rgb(237, 155, 230);
}

.badge.integral-criterion-family {
  background: rgba(122, 231, 199, 0.23);
  color: rgb(122, 231, 199);
}

.badge.field-world,
.badge.field-static {
  background: rgba(99, 207, 255, 0.2);
  color: rgb(99, 207, 255);
}

.badge.field-moving {
  background: rgba(255, 189, 102, 0.24);
  color: rgb(255, 189, 102);
}

.compact-frame {
  fill: rgba(255, 255, 255, 0.34);
  stroke: rgba(15, 42, 58, 0.55);
  stroke-width: 3;
}

.compact-frame.thin {
  fill: rgba(255, 255, 255, 0.16);
}

.compact-open {
  fill: rgba(99, 207, 255, 0.24);
  stroke: rgba(44, 122, 179, 0.78);
  stroke-width: 3;
  stroke-dasharray: 10 8;
}

.compact-open.gold {
  fill: rgba(255, 189, 102, 0.28);
  stroke: rgba(152, 99, 25, 0.78);
}

.compact-open.green {
  fill: rgba(155, 229, 142, 0.26);
  stroke: rgba(63, 126, 61, 0.78);
}

.compact-open.blue {
  fill: rgba(99, 207, 255, 0.22);
}

.compact-closed {
  fill: rgba(255, 129, 114, 0.2);
  stroke: rgba(164, 71, 43, 0.86);
  stroke-width: 3;
}

.compact-closed.alt {
  fill: rgba(99, 207, 255, 0.18);
  stroke: rgba(44, 122, 179, 0.78);
}

.compact-closed.third {
  fill: rgba(155, 229, 142, 0.18);
  stroke: rgba(63, 126, 61, 0.78);
}

.compact-tile {
  fill: rgba(255, 189, 102, 0.22);
  stroke: rgba(152, 99, 25, 0.76);
  stroke-width: 3;
}

.compact-tile.blue {
  fill: rgba(99, 207, 255, 0.18);
  stroke: rgba(44, 122, 179, 0.76);
}

.compact-tile.green {
  fill: rgba(155, 229, 142, 0.22);
  stroke: rgba(63, 126, 61, 0.76);
}

.compact-tile.gold {
  fill: rgba(255, 189, 102, 0.22);
}

.compact-dot {
  fill: #f2b553;
  stroke: #112534;
  stroke-width: 4;
}

.compact-dot.alt {
  fill: #63d0ff;
}

.compact-dot.tiny {
  stroke-width: 2;
}

.compact-path,
.compact-arrow {
  fill: none;
  stroke: #0f2a3a;
  stroke-width: 4;
  stroke-linecap: round;
}

.compact-arrow {
  marker-end: none;
}

.compact-arrow.reverse {
  stroke: rgba(15, 42, 58, 0.46);
  stroke-dasharray: 8 8;
}

.compact-label {
  font: 600 13px 'Space Grotesk', sans-serif;
  fill: #0f2a3a;
}

.roadmap-card .roadmap-tag {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
}

.roadmap-card .roadmap-tag:hover {
  background: rgba(255, 189, 102, 0.16);
}

.axiom-workspace {
  display: grid;
  gap: 18px;
}

.axiom-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 16px;
}

.axiom-legend {
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid var(--line-strong);
  background: rgba(245, 239, 224, 0.06);
}

.axiom-legend p {
  margin: 0;
  line-height: 1.65;
}

.axiom-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.96fr);
  gap: 22px;
  align-items: start;
}

.axiom-map {
  display: grid;
  gap: 16px;
}

.axiom-relation-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 26px;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 189, 102, 0.1), transparent 36%),
    rgba(245, 239, 224, 0.055);
}

.axiom-relation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.axiom-relation-head h3 {
  font-size: 1.2rem;
}

.axiom-relation-head p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.axiom-relation-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.axiom-relation-keys span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  font-weight: 800;
}

.axiom-relation-keys i {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: #ffbd66;
}

.axiom-relation-keys i.needs {
  background: repeating-linear-gradient(90deg, #ed9be6 0 5px, transparent 5px 8px);
}

.axiom-relation-keys i.compact {
  background: #63cfff;
}

.axiom-ladder-stack {
  display: grid;
  gap: 10px;
}

.axiom-ladder-row {
  display: grid;
  grid-template-columns: minmax(158px, 0.31fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.axiom-ladder-copy strong {
  color: var(--paper);
}

.axiom-ladder-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.axiom-ladder-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  overflow: visible;
  padding-bottom: 0;
}

.axiom-ladder-node {
  flex: 0 0 auto;
  display: grid;
  min-width: 74px;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  background: rgba(8, 17, 30, 0.56);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.axiom-ladder-node b {
  color: var(--paper);
  font-size: 0.86rem;
}

.axiom-ladder-node small {
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.15;
}

.axiom-ladder-node:hover,
.axiom-ladder-node.is-active {
  border-color: rgba(255, 189, 102, 0.48);
  background: rgba(255, 189, 102, 0.13);
  transform: translateY(-1px);
}

.axiom-ladder-arrow {
  flex: 0 0 auto;
  color: rgba(255, 189, 102, 0.9);
  font-weight: 900;
}

.axiom-edge-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 9px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.axiom-edge-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 88px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  background: rgba(8, 17, 30, 0.42);
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.axiom-edge-card span {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--ink);
  background: #ffbd66;
  font-size: 0.64rem;
  font-weight: 900;
}

.axiom-edge-card strong {
  color: var(--paper);
  font-size: 0.72rem;
  text-align: center;
}

.axiom-edge-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.35;
}

.axiom-edge-card.needs {
  border-style: dashed;
}

.axiom-edge-card.needs span {
  background: #ed9be6;
}

.axiom-edge-card.compact span {
  background: #63cfff;
}

.axiom-edge-card.local span {
  background: #8de8bc;
}

.axiom-edge-card.other span {
  background: #c9b7ff;
}

.axiom-edge-card:hover,
.axiom-edge-card.is-active {
  border-color: rgba(255, 189, 102, 0.42);
  background: rgba(255, 189, 102, 0.1);
  transform: translateY(-1px);
}

.axiom-neighborhood {
  display: grid;
  gap: 10px;
  margin: 18px 0 20px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(8, 19, 29, 0.055);
  border: 1px solid rgba(8, 19, 29, 0.08);
}

.axiom-family-context {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 26px;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(circle at 84% 0%, rgba(99, 207, 255, 0.08), transparent 34%),
    rgba(245, 239, 224, 0.045);
}

.axiom-family-context-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.axiom-family-context-head h3 {
  font-size: 1.06rem;
}

.axiom-family-context-head p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.axiom-family-token {
  flex: 0 0 auto;
  min-width: 70px;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--paper);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.axiom-family-context-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

.axiom-family-context-card.reading {
  grid-column: 1 / -1;
}

.axiom-family-context-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(8, 17, 30, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.075);
}

.axiom-family-context-card h4 {
  margin: 0;
  color: var(--paper);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.axiom-family-edge-list,
.axiom-family-witness-list,
.axiom-family-mini-list {
  display: grid;
  gap: 8px;
}

.axiom-family-edge-list,
.axiom-family-witness-list {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.axiom-family-edge {
  display: grid;
  grid-template-columns: auto minmax(54px, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 9px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.axiom-family-edge span {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  color: var(--ink);
  background: #ffbd66;
  font-size: 0.62rem;
  font-weight: 900;
}

.axiom-family-edge strong {
  color: var(--paper);
  font-size: 0.68rem;
  text-align: center;
}

.axiom-family-edge p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.axiom-family-edge.needs {
  border-style: dashed;
}

.axiom-family-edge.needs span {
  background: #ed9be6;
}

.axiom-family-edge.compact span {
  background: #63cfff;
}

.axiom-family-edge.local span {
  background: #8de8bc;
}

.axiom-family-edge.other span {
  background: #c9b7ff;
}

.axiom-family-edge:hover {
  border-color: rgba(255, 189, 102, 0.42);
  background: rgba(255, 189, 102, 0.1);
  transform: translateY(-1px);
}

.axiom-family-more {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 9px;
  border-radius: 14px;
  color: rgba(237, 243, 247, 0.74);
  background: rgba(255, 255, 255, 0.026);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}

.axiom-family-witness {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.axiom-family-witness strong {
  color: var(--paper);
  font-size: 0.78rem;
}

.axiom-family-witness span {
  color: #ffbd66;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.axiom-family-witness p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.axiom-family-witness:hover {
  border-color: rgba(99, 207, 255, 0.44);
  background: rgba(99, 207, 255, 0.08);
  transform: translateY(-1px);
}

.axiom-family-mini-list {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.axiom-family-mini {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.axiom-family-mini span {
  color: #ffbd66;
  font-weight: 900;
}

.axiom-family-mini strong {
  color: var(--paper);
  font-size: 0.7rem;
  line-height: 1.18;
}

.axiom-family-mini:hover,
.axiom-family-mini.is-active {
  border-color: rgba(255, 189, 102, 0.42);
  background: rgba(255, 189, 102, 0.1);
  transform: translateY(-1px);
}

.axiom-cluster {
  padding: 18px;
  border-radius: 26px;
  border: 1px solid var(--line-strong);
  background: rgba(245, 239, 224, 0.05);
}

.axiom-cluster-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.axiom-cluster-head h3 {
  font-size: 1.2rem;
}

.axiom-cluster-head p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.axiom-cluster-count {
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.06);
}

.axiom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 10px;
}

.axiom-node {
  position: relative;
  min-height: 146px;
  padding: 14px;
}

.axiom-node .axiom-symbol {
  display: block;
  font-size: 1.42rem;
  font-weight: 700;
  color: var(--paper);
}

.axiom-node .axiom-name {
  display: block;
  margin-top: 6px;
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  line-height: 1.12;
}

.axiom-node .axiom-snippet {
  display: block;
  margin-top: 7px;
  font-size: 0.82rem;
  line-height: 1.36;
  color: var(--muted);
}

.axiom-meta {
  display: block;
  margin-top: 9px;
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(237, 243, 247, 0.72);
}

.axiom-detail {
  position: sticky;
  top: 24px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(231, 238, 242, 0.94));
  color: var(--ink);
}

.axiom-detail .eyebrow {
  color: #7d5b1c;
}

.axiom-detail p {
  color: var(--ink-soft);
  line-height: 1.7;
}

.axiom-stage-card {
  margin: 22px 0;
  padding: 18px;
  border-radius: 26px;
  background: rgba(8, 19, 29, 0.05);
  border: 1px solid rgba(8, 19, 29, 0.08);
}

.axiom-stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.axiom-stage-head h3 {
  font-size: 1.06rem;
  color: var(--ink);
}

.axiom-stage-head p {
  margin: 6px 0 0;
}

.axiom-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.axiom-step {
  cursor: pointer;
  border: 1px solid rgba(8, 19, 29, 0.1);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
}

.axiom-step.is-active,
.axiom-step:hover {
  background: rgba(255, 189, 102, 0.2);
  border-color: rgba(255, 189, 102, 0.34);
}

.axiom-stage {
  display: grid;
  gap: 12px;
}

.axiom-stage-svg {
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(255, 189, 102, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.2));
}

.axiom-stage svg {
  display: block;
  width: 100%;
  height: auto;
}

.axiom-stage-caption {
  margin: 0;
  color: var(--ink-soft);
}

.axiom-stage-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.axiom-key {
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--ink);
  background: rgba(8, 19, 29, 0.08);
}

.axiom-detail .pill {
  background: rgba(8, 19, 29, 0.08);
  color: var(--ink);
}

.badge.axiom-main {
  background: rgba(255, 189, 102, 0.2);
  color: rgb(255, 189, 102);
}

.badge.axiom-other {
  background: rgba(106, 215, 255, 0.18);
  color: rgb(106, 215, 255);
}

.badge.axiom-table {
  background: rgba(237, 155, 230, 0.22);
  color: rgb(237, 155, 230);
}

.badge.axiom-point {
  background: rgba(255, 143, 101, 0.18);
  color: rgb(255, 143, 101);
}

.badge.axiom-point-closed {
  background: rgba(99, 207, 255, 0.18);
  color: rgb(99, 207, 255);
}

.badge.axiom-sets {
  background: rgba(141, 232, 188, 0.24);
  color: rgb(141, 232, 188);
}

.badge.axiom-other-family {
  background: rgba(240, 205, 113, 0.22);
  color: rgb(240, 205, 113);
}

.axiom-stage-svg .open-region {
  fill: rgba(89, 191, 255, 0.24);
  stroke: rgba(44, 122, 179, 0.92);
  stroke-width: 3;
  stroke-dasharray: 12 8;
}

.axiom-stage-svg .open-region.soft {
  fill: rgba(89, 191, 255, 0.14);
}

.axiom-stage-svg .closed-region {
  fill: rgba(255, 129, 114, 0.22);
  stroke: rgba(164, 71, 43, 0.94);
  stroke-width: 3;
}

.axiom-stage-svg .compact-region {
  fill: rgba(155, 229, 142, 0.22);
  stroke: rgba(63, 126, 61, 0.92);
  stroke-width: 3;
}

.axiom-stage-svg .halo {
  fill: none;
  stroke: rgba(44, 122, 179, 0.22);
  stroke-width: 18;
  stroke-linecap: round;
}

.axiom-stage-svg .halo-strong {
  fill: none;
  stroke: rgba(44, 122, 179, 0.36);
  stroke-width: 24;
  stroke-linecap: round;
}

.axiom-stage-svg .point {
  fill: #f2b553;
  stroke: #112534;
  stroke-width: 4;
}

.axiom-stage-svg .point.alt {
  fill: #63d0ff;
}

.axiom-stage-svg .line {
  fill: none;
  stroke: #0f2a3a;
  stroke-width: 4;
  stroke-linecap: round;
}

.axiom-stage-svg .line.soft {
  stroke: rgba(15, 42, 58, 0.45);
  stroke-dasharray: 8 10;
}

.axiom-stage-svg .axis,
.axiom-stage-svg .arrow {
  stroke: #0f2a3a;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}

.axiom-stage-svg .contour {
  fill: none;
  stroke: rgba(15, 42, 58, 0.4);
  stroke-width: 2;
  stroke-dasharray: 6 8;
}

.axiom-stage-svg .tile {
  fill: rgba(89, 191, 255, 0.16);
  stroke: rgba(44, 122, 179, 0.72);
  stroke-width: 2.5;
}

.axiom-stage-svg .label {
  font: 600 14px 'Space Grotesk', sans-serif;
  fill: #0f2a3a;
}

.axiom-stage-svg .label.soft {
  font-weight: 500;
  fill: rgba(15, 42, 58, 0.72);
}

.counterexample-layout {
  display: grid;
  grid-template-columns: minmax(290px, 380px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.counterexample-list {
  max-height: 860px;
  overflow: auto;
  padding-right: 6px;
}

.counterexample-card {
  min-height: 148px;
}

.counterexample-card span:not(.badge) {
  display: block;
  margin-top: 10px;
  color: rgba(237, 243, 247, 0.74);
  font-size: 0.82rem;
  line-height: 1.45;
}

.counterexample-detail {
  position: sticky;
  top: 24px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(239, 234, 225, 0.94));
  color: var(--ink);
}

.counterexample-detail .eyebrow {
  color: #7d2504;
}

.counterexample-detail p {
  color: var(--ink-soft);
  line-height: 1.7;
}

.counterexample-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.counterexample-split > div {
  padding: 13px;
  border-radius: 18px;
  background: rgba(8, 19, 29, 0.055);
  border: 1px solid rgba(8, 19, 29, 0.08);
}

.counterexample-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.counterexample-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(8, 19, 29, 0.08);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
}

button.counterexample-chip {
  cursor: pointer;
}

.counterexample-chip.has {
  background: rgba(122, 231, 199, 0.22);
  color: #17624d;
}

.counterexample-chip.lacks {
  background: rgba(255, 127, 127, 0.16);
  color: #7d2504;
}

.counterexample-break {
  border-left: 4px solid rgba(255, 127, 127, 0.7);
}

.badge.counterexample-theme {
  background: rgba(255, 189, 102, 0.2);
  color: rgb(255, 189, 102);
}

.badge.counterexample-source {
  background: rgba(99, 207, 255, 0.18);
  color: rgb(99, 207, 255);
}

.space-layout {
  display: grid;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.space-detail {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  gap: 26px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(231, 238, 242, 0.94));
  color: var(--ink);
}

.space-figure {
  display: grid;
  place-items: center;
  min-height: 320px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(99, 207, 255, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(8, 19, 29, 0.04), rgba(8, 19, 29, 0.09));
}

.space-figure svg {
  width: min(100%, 290px);
  height: auto;
}

.space-name {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ink);
}

.graphics-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 22px;
}

.graphics-detail {
  padding: 28px;
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(231, 238, 242, 0.94));
  color: var(--ink);
}

.adoption-bar {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(8, 19, 29, 0.08);
}

.adoption-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--graphics), var(--bridge));
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.roadmap-card {
  padding: 20px;
  border-radius: 24px;
  background: rgba(245, 239, 224, 0.06);
  border: 1px solid var(--line-strong);
}

.roadmap-card.general {
  background:
    linear-gradient(180deg, rgba(255, 189, 102, 0.08), rgba(255, 189, 102, 0.03)),
    rgba(245, 239, 224, 0.03);
}

.roadmap-card.algebraic {
  background:
    linear-gradient(180deg, rgba(106, 215, 255, 0.08), rgba(106, 215, 255, 0.03)),
    rgba(245, 239, 224, 0.03);
}

.roadmap-card.extension,
.roadmap-card.graphics {
  background:
    linear-gradient(180deg, rgba(155, 229, 142, 0.08), rgba(155, 229, 142, 0.03)),
    rgba(245, 239, 224, 0.03);
}

.roadmap-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.roadmap-card p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.55;
}

.future-zoo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.future-zoo-intro,
.future-zoo-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--line-strong);
  background: rgba(245, 239, 224, 0.045);
}

.future-zoo-intro {
  grid-column: 1 / -1;
  background:
    linear-gradient(135deg, rgba(99, 207, 255, 0.08), rgba(255, 189, 102, 0.055)),
    rgba(245, 239, 224, 0.04);
}

.future-zoo-intro h3 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.future-zoo-intro p,
.future-zoo-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.future-zoo-head {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
}

.future-zoo-head span {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.future-zoo-head strong {
  color: var(--paper);
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  line-height: 1.18;
}

.future-zoo-card.general {
  background:
    linear-gradient(180deg, rgba(255, 189, 102, 0.07), rgba(255, 189, 102, 0.025)),
    rgba(245, 239, 224, 0.035);
}

.future-zoo-card.algebraic {
  background:
    linear-gradient(180deg, rgba(106, 215, 255, 0.07), rgba(106, 215, 255, 0.025)),
    rgba(245, 239, 224, 0.035);
}

.future-zoo-card.graphics {
  background:
    linear-gradient(180deg, rgba(155, 229, 142, 0.07), rgba(155, 229, 142, 0.025)),
    rgba(245, 239, 224, 0.035);
}

.future-zoo-card .roadmap-tags {
  margin-top: 12px;
}

.source-strip {
  margin-top: 20px;
}

.source-strip a {
  text-decoration: none;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.source-strip a:hover {
  background: rgba(255, 189, 102, 0.12);
  border-color: rgba(255, 189, 102, 0.26);
}

.empty-state {
  padding: 28px;
  border-radius: 24px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  color: var(--muted);
  text-align: center;
}

.footer {
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
}

.card-stack::-webkit-scrollbar,
.compact-edge-list::-webkit-scrollbar,
.mst-edge-list::-webkit-scrollbar,
.operator-edge-list::-webkit-scrollbar,
.fractal-edge-list::-webkit-scrollbar,
.noise-edge-list::-webkit-scrollbar,
.integral-edge-list::-webkit-scrollbar,
.axiom-ribbon::-webkit-scrollbar,
.counterexample-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.card-stack::-webkit-scrollbar-thumb,
.compact-edge-list::-webkit-scrollbar-thumb,
.mst-edge-list::-webkit-scrollbar-thumb,
.operator-edge-list::-webkit-scrollbar-thumb,
.fractal-edge-list::-webkit-scrollbar-thumb,
.noise-edge-list::-webkit-scrollbar-thumb,
.integral-edge-list::-webkit-scrollbar-thumb,
.axiom-ribbon::-webkit-scrollbar-thumb,
.counterexample-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 1080px) {
  .hero,
  .atlas-layout,
  .compactness-layout,
  .mst-layout,
  .operator-layout,
  .trig-layout,
  .fractal-layout,
  .noise-layout,
  .integral-layout,
  .field-workspace,
  .axiom-layout,
  .counterexample-layout,
  .space-layout,
  .graphics-layout,
  .space-detail {
    grid-template-columns: 1fr;
  }

  .compactness-controls,
  .mst-controls,
  .operator-controls,
  .fractal-controls,
  .noise-controls,
  .axiom-toolbar {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    max-width: none;
  }

  .card-stack {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .detail-card {
    position: static;
  }

  .axiom-detail {
    position: static;
  }

  .compact-detail {
    position: static;
  }

  .mst-detail {
    position: static;
  }

  .operator-detail {
    position: static;
  }

  .trig-detail {
    position: static;
  }

  .fractal-detail {
    position: static;
  }

  .noise-detail {
    position: static;
  }

  .integral-detail {
    position: static;
  }

  .field-detail {
    position: static;
  }

  .counterexample-detail {
    position: static;
  }
}

@media (max-width: 760px) {
  .page-shell {
    width: min(100%, calc(100% - 18px));
  }

  .hero,
  .section {
    padding: 18px;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-stats,
  .detail-grid,
  .metric-grid,
  .graphics-grid,
  .counterexample-split,
  .control-bar,
  .compact-edge-chip,
  .mst-edge-chip,
  .operator-edge-chip,
  .trig-edge-chip,
  .fractal-edge-chip,
  .noise-edge-chip,
  .integral-edge-chip {
    grid-template-columns: 1fr;
  }

  .field-comparison {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .field-comparison-arrow {
    display: none;
  }

  .field-theorem-head,
  .field-trig-aside {
    grid-template-columns: 1fr;
  }

  .field-theorem-head {
    display: grid;
  }

  .compact-graph,
  .mst-graph,
  .operator-graph,
  .trig-map,
  .fractal-graph,
  .noise-graph,
  .integral-map {
    min-height: auto;
    padding: 12px;
  }

  .compact-node,
  .mst-node,
  .operator-node,
  .trig-node,
  .fractal-node,
  .noise-node,
  .integral-node {
    width: 96px;
    min-height: 82px;
    padding: 7px;
  }

  .operator-node,
  .trig-node,
  .fractal-node,
  .noise-node,
  .integral-node {
    width: 86px;
    min-height: 74px;
    padding: 7px;
  }

  .compact-node strong,
  .mst-node strong {
    font-size: 0.68rem;
  }

  .operator-node strong,
  .trig-node strong,
  .fractal-node strong,
  .noise-node strong,
  .integral-node strong {
    font-size: 0.58rem;
  }

  .compact-node .compact-symbol,
  .mst-node .mst-symbol,
  .operator-node .operator-symbol,
  .trig-node span,
  .fractal-node .fractal-symbol,
  .noise-node .noise-symbol,
  .integral-node .integral-symbol {
    min-width: 24px;
    height: 22px;
    padding: 0 5px;
    font-size: 0.6rem;
  }

  .operator-node .operator-symbol,
  .trig-node span,
  .fractal-node .fractal-symbol,
  .noise-node .noise-symbol,
  .integral-node .integral-symbol {
    min-width: 22px;
    height: 20px;
    font-size: 0.52rem;
  }

  .trig-orbit {
    min-width: 590px;
  }

  .trig-definition-grid,
  .trig-two-column {
    grid-template-columns: 1fr;
  }

  .axiom-cluster-head,
  .axiom-family-context-head,
  .axiom-stage-head,
  .axiom-relation-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .axiom-ladder-row {
    grid-template-columns: 1fr;
  }

  .axiom-family-context-grid {
    grid-template-columns: 1fr;
  }

  .axiom-family-context-card.reading {
    grid-column: auto;
  }

  .space-figure {
    min-height: 220px;
  }

  .axiom-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Generic concept-zoo engine (orbit graph) ===== */
#ac-equivalents { --section-accent: #c9b7ff; }
#induction { --section-accent: #8de8bc; }
#complexity { --section-accent: #f0a868; }
#convergence { --section-accent: #63cfff; }
#gauss-bonnet { --section-accent: #7ae7c7; }
#spectral { --section-accent: #b6c2ff; }
#galois { --section-accent: #ffa8c8; }
#duality { --section-accent: #8fd0ff; }
#completeness { --section-accent: #c2e08a; }
#category { --section-accent: #d9b8ff; }
#group-theory { --section-accent: #f0b85a; }
#measure-theory { --section-accent: #7fd1b9; }
#hilbert-operators { --section-accent: #a9b8ff; }
#number-theory { --section-accent: #d9c27a; }
#convexity { --section-accent: #8fc7d4; }

.zoo-workspace {
  display: grid;
  gap: 18px;
}

.zoo-note {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--section-accent) 9%, transparent), transparent),
    rgba(245, 239, 224, 0.05);
}

.zoo-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.zoo-note strong {
  color: var(--paper);
}

.zoo-relation-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.zoo-relation-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.74rem;
}

.zoo-relation-legend i {
  flex: 0 0 auto;
  width: 38px;
  height: 10px;
  border-radius: 999px;
  background: var(--rel-equivalence);
}

.zoo-relation-legend i.consequence { background: var(--rel-consequence); }
.zoo-relation-legend i.scope { background: var(--rel-scope); }
.zoo-relation-legend i.warning { background: repeating-linear-gradient(90deg, var(--rel-warning) 0 7px, transparent 7px 12px); }
.zoo-relation-legend i.open { background: repeating-linear-gradient(90deg, var(--rel-open) 0 4px, transparent 4px 10px); }

.zoo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
  gap: 22px;
  align-items: start;
}

.zoo-graph-panel {
  display: grid;
  gap: 14px;
}

.zoo-map {
  min-height: 590px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--section-accent) 10%, transparent), transparent 36%),
    rgba(8, 17, 30, 0.6);
}

.zoo-orbit {
  position: relative;
  width: min(100%, 680px);
  min-width: 600px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.zoo-complete-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.zoo-edge-hitbox {
  fill: none;
  stroke: transparent;
  stroke-width: 7.8;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

.zoo-edge {
  fill: none;
  stroke: var(--rel-neutral);
  stroke-width: 0.45;
  stroke-linecap: round;
  opacity: 0.32;
  cursor: pointer;
  transition: stroke 180ms ease, stroke-width 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.zoo-edge.zoo-equivalence { stroke: var(--rel-equivalence); opacity: 0.5; }
.zoo-edge.zoo-consequence { stroke: var(--rel-consequence); opacity: 0.5; }
.zoo-edge.zoo-scope { stroke: var(--rel-scope); opacity: 0.5; }
.zoo-edge.zoo-warning { stroke: var(--rel-warning); opacity: 0.5; stroke-dasharray: 1.4 1.5; }
.zoo-edge.zoo-open { stroke: var(--rel-open); opacity: 0.5; stroke-dasharray: 0.6 1.6; }

.zoo-edge:hover,
.zoo-edge.is-hovered:not(.is-active) {
  opacity: 0.78;
  stroke-width: 0.68;
}

.zoo-edge.is-active {
  opacity: 0.96;
  stroke-width: 0.82;
  filter: drop-shadow(0 0 6px rgba(245, 239, 224, 0.3));
}

.zoo-edge-signal {
  cursor: pointer;
  opacity: 0.14;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.zoo-edge-signal circle {
  fill: rgba(8, 17, 30, 0.84);
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 0.28;
}

.zoo-edge-signal text {
  fill: rgba(245, 239, 224, 0.86);
  font-size: 2.1px;
  font-weight: 900;
  dominant-baseline: middle;
}

.zoo-edge-signal.is-node-active { opacity: 0.76; }
.zoo-edge-signal.is-active { opacity: 1; filter: drop-shadow(0 0 6px rgba(245, 239, 224, 0.34)); }

.zoo-node {
  position: absolute;
  z-index: 4;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  width: 108px;
  min-height: 82px;
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--section-accent) 45%, transparent);
  color: var(--text);
  background: color-mix(in srgb, var(--section-accent) 16%, rgba(5, 13, 23, 0.92));
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.zoo-node:hover,
.zoo-node.is-active,
.zoo-node.is-endpoint {
  background: rgba(12, 22, 32, 0.96);
  border: 1.5px solid var(--section-accent);
  transform: translate(-50%, -50%) scale(1.045);
}

.zoo-node span {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--section-accent);
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
}

.zoo-node strong {
  color: var(--text);
  font-size: 0.63rem;
  line-height: 1.1;
  text-align: center;
}

.zoo-node small {
  color: var(--muted);
  font-size: 0.47rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.zoo-bridge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 9px;
  padding: 2px 0;
}

.zoo-edge-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 2px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--rel-equivalence);
  cursor: pointer;
  color: var(--text);
  background: rgba(245, 239, 224, 0.048);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.zoo-edge-chip.zoo-consequence { border-left-color: var(--rel-consequence); }
.zoo-edge-chip.zoo-scope { border-left-color: var(--rel-scope); }
.zoo-edge-chip.zoo-warning { border-left-color: var(--rel-warning); }
.zoo-edge-chip.zoo-open { border-left-color: var(--rel-open); }

.zoo-edge-chip span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.92rem;
  font-weight: 900;
}

.zoo-edge-chip strong {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.zoo-edge-chip em {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.zoo-edge-chip:hover { border-color: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }
.zoo-edge-chip.is-active { border-color: var(--section-accent); background: color-mix(in srgb, var(--section-accent) 12%, transparent); }

.zoo-detail {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 28px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: sticky;
  top: 18px;
  /* Light-paper panel, consistent with every other section's detail card, so
     the reused detail-/trig- classes (which use dark ink text) stay readable. */
  color: var(--ink);
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(236, 241, 232, 0.94));
}

.zoo-symbol {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  margin-right: 10px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--section-accent);
  font-size: 0.78rem;
  font-weight: 900;
}

.zoo-watch {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--rel-warning) 55%, transparent);
  background: rgba(237, 155, 230, 0.18);
}

.zoo-watch strong { color: #6e1d67; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; }
.zoo-watch p { margin: 0; color: var(--ink-soft); line-height: 1.6; }

.trig-caveat.zoo-warning { border-color: color-mix(in srgb, var(--rel-warning) 45%, transparent); }
.trig-caveat.zoo-open { border-color: color-mix(in srgb, var(--rel-open) 55%, transparent); }
.trig-caveat.zoo-consequence { border-color: color-mix(in srgb, var(--rel-consequence) 40%, transparent); }
.trig-caveat.zoo-scope { border-color: color-mix(in srgb, var(--rel-scope) 40%, transparent); }

.badge.zoo-tag { background: rgba(8, 19, 29, 0.08); color: var(--ink-soft); }
.badge.zoo-equivalence { background: color-mix(in srgb, var(--rel-equivalence) 18%, transparent); color: var(--rel-equivalence); }
.badge.zoo-consequence { background: color-mix(in srgb, var(--rel-consequence) 18%, transparent); color: var(--rel-consequence); }
.badge.zoo-scope { background: color-mix(in srgb, var(--rel-scope) 18%, transparent); color: var(--rel-scope); }
.badge.zoo-warning { background: color-mix(in srgb, var(--rel-warning) 18%, transparent); color: var(--rel-warning); }
.badge.zoo-open { background: color-mix(in srgb, var(--rel-open) 22%, transparent); color: var(--text); }

@media (max-width: 980px) {
  .zoo-layout { grid-template-columns: 1fr; }
  .zoo-orbit { min-width: 0; }
  .zoo-detail { position: static; }
}

/* ===== Bridges meta-panel, inline hints, grouped nav ===== */
.bridges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.bridge-card {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--panel-alt);
  transition: border-color 160ms ease, transform 160ms ease;
}

.bridge-card:hover { border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }

.bridge-card-zoos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bridge-card-zoos a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
}

.bridge-card-zoos a:hover { color: var(--paper); }
.bridge-link { color: var(--muted); }

.bridge-shared {
  font-family: 'Fraunces', serif;
  font-size: 1.02rem;
  color: var(--paper);
}

.bridge-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 0.85rem; }

.zoo-bridge-hints {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.zoo-bridge-hints > span {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.zoo-bridge-hints a {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.zoo-bridge-hints a:hover { border-color: var(--section-accent, rgba(255, 255, 255, 0.25)); }
.zoo-bridge-hints .bridge-hint-map { background: transparent; border-color: transparent; color: var(--muted); }

.nav-group {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 11px;
}

.nav-group-label {
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  opacity: 0.6;
}

.topbar-links { gap: 10px 16px; align-items: baseline; }

/* ===== Persistent section navigator (always-on labels + hover zoom) ===== */
.section-dock {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 13px;
  border-radius: var(--radius-md);
  background: rgba(6, 13, 23, 0.88);
  border: 1px solid var(--line);
  backdrop-filter: blur(9px);
  /* With many sections the dock can outgrow the viewport: cap it and let it
     scroll internally rather than clipping items off-screen. */
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.section-dock::-webkit-scrollbar { width: 0; height: 0; }

.section-dock-group { display: flex; flex-direction: column; gap: 3px; }
.section-dock-group + .section-dock-group { margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--line); }

.section-dock-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  text-decoration: none;
  opacity: 0.5;
  transform: scale(0.95);
  transform-origin: right center;
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1), opacity 150ms ease;
}

.section-dock-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot, var(--muted));
  transition: box-shadow 150ms ease;
}

.section-dock-label {
  white-space: nowrap;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  transition: color 150ms ease;
}

/* hover: zoom + brighten, with a gentle ripple to the immediate neighbours */
.section-dock-item:hover {
  opacity: 1;
  transform: scale(1.34);
}
.section-dock-item:hover .section-dock-label { color: var(--text); }
.section-dock-item:hover .section-dock-dot { background: var(--dot, var(--text)); }

.section-dock-item:hover + .section-dock-item,
.section-dock-item:has(+ .section-dock-item:hover) {
  opacity: 0.85;
  transform: scale(1.14);
}

/* current section (scroll-spy): brighter, slightly larger */
.section-dock-item.is-active { opacity: 1; transform: scale(1.05); }
.section-dock-item.is-active .section-dock-label { color: var(--text); font-weight: 500; }
.section-dock-item.is-active .section-dock-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--muted)) 22%, transparent); }

@media (max-width: 960px) {
  .section-dock { display: none; }
}

/* Reserve right-rail space for the dock only when the centred content would
   otherwise reach under it; above 1540px the natural gutter is enough. */
@media (min-width: 960px) and (max-width: 1540px) {
  body { padding-right: 150px; }
}

/* Badges sit inside light-paper detail panels, so they need dark text. The
   bright default badge text is only for the dark concept-card list. */
.detail-card .badge,
.compact-detail .badge,
.mst-detail .badge,
.operator-detail .badge,
.trig-detail .badge,
.fractal-detail .badge,
.noise-detail .badge,
.integral-detail .badge,
.field-detail .badge,
.axiom-detail .badge,
.counterexample-detail .badge,
.space-detail .badge,
.graphics-detail .badge,
.zoo-detail .badge {
  color: var(--ink-soft);
}

.bridge-card { border-left: 3px solid var(--rel-equivalence); }
.bridge-card.bridge-consequence { border-left-color: var(--rel-consequence); }
.bridge-card.bridge-scope { border-left-color: var(--rel-scope); }

.hero-guide { margin: 14px 0 0; }
.hero-guide a {
  color: var(--bridge);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--bridge) 40%, transparent);
}
.hero-guide a:hover { color: var(--paper); }

/* ===== Algorithms roadmap ===== */
#algorithms { --section-accent: #f0a85d; }

.algo-workspace { display: grid; gap: 18px; }

.algo-note {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: linear-gradient(135deg, color-mix(in srgb, var(--section-accent) 9%, transparent), transparent), rgba(245, 239, 224, 0.05);
}
.algo-note p { margin: 0; color: var(--muted); line-height: 1.65; }
.algo-note strong { color: var(--paper); }
.algo-tier-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.algo-tier-legend span {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
}

.algo-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: 22px;
  align-items: start;
}

.algo-list { display: grid; gap: 18px; align-content: start; }
.algo-tier-head {
  margin: 0 0 10px;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted);
}
.algo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }

.algo-card {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--section-accent) 28%, transparent);
  background: color-mix(in srgb, var(--section-accent) 10%, rgba(5, 13, 23, 0.6));
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
}
.algo-card:hover { transform: translateY(-1px); border-color: var(--section-accent); }
.algo-card.is-active { border-color: var(--section-accent); background: color-mix(in srgb, var(--section-accent) 20%, rgba(5, 13, 23, 0.6)); }
.algo-card-sym {
  justify-self: start;
  display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px;
  border-radius: 999px; color: var(--ink); background: var(--section-accent);
  font-size: 0.6rem; font-weight: 900;
}
.algo-card strong { font-size: 0.78rem; line-height: 1.15; }
.algo-card em { font-style: normal; font-size: 0.62rem; color: var(--muted); }

.algo-detail {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 28px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: sticky;
  top: 18px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(245, 239, 224, 0.98), rgba(241, 236, 230, 0.94));
}
.algo-detail .badge { color: var(--ink-soft); }
.algo-symbol {
  display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 9px; margin-right: 10px;
  border-radius: 999px; color: var(--ink); background: var(--section-accent);
  font-size: 0.7rem; font-weight: 900;
}

.algo-pattern {
  display: grid; gap: 6px;
  margin: 4px 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(8, 19, 29, 0.1);
  background: rgba(8, 19, 29, 0.05);
}
.algo-pattern span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: #7d5b1c; font-weight: 900; }
.algo-pattern pre {
  margin: 0; overflow-x: auto;
  font-family: 'Cambria Math', 'Consolas', monospace;
  font-size: 0.78rem; line-height: 1.5; color: var(--ink); white-space: pre;
}

.algo-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px; }
.algo-meta-grid article { padding: 11px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(8, 19, 29, 0.07); background: rgba(8, 19, 29, 0.04); }
.algo-meta-grid span { display: block; margin-bottom: 5px; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: #0f5877; font-weight: 900; }
.algo-meta-grid p { margin: 0; color: var(--ink-soft); line-height: 1.5; font-size: 0.86rem; }

.algo-problems h3, .algo-links h3 { font-size: 1.02rem; margin: 4px 0 8px; color: var(--ink); }
.algo-problems ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.algo-problems li {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 9px; align-items: baseline;
  padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(8, 19, 29, 0.04);
}
.algo-problems strong { font-size: 0.84rem; color: var(--ink); }
.algo-problems em { font-style: normal; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.4; }
.algo-diff { font-size: 0.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 7px; border-radius: 999px; }
.algo-easy { background: rgba(99, 153, 34, 0.22); color: #3b6d11; }
.algo-medium { background: rgba(186, 117, 23, 0.22); color: #854f0b; }
.algo-hard { background: rgba(226, 75, 74, 0.2); color: #a32d2d; }

.algo-links div { display: flex; flex-wrap: wrap; gap: 8px; }
.algo-chip {
  font-size: 0.74rem; padding: 5px 11px; border-radius: 999px; cursor: pointer; text-decoration: none;
  color: var(--ink); background: rgba(8, 19, 29, 0.07); border: 1px solid rgba(8, 19, 29, 0.1);
}
.algo-chip:hover { border-color: var(--section-accent); }
.algo-theory { background: color-mix(in srgb, var(--section-accent) 18%, white); }

.algo-variants h3 { font-size: 1.02rem; margin: 4px 0 10px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.algo-count {
  font-size: 0.66rem; font-weight: 900; padding: 2px 8px; border-radius: 999px;
  color: var(--ink); background: color-mix(in srgb, var(--section-accent) 40%, white);
}
.algo-variant-list { display: grid; gap: 9px; }
.algo-variant {
  padding: 12px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(8, 19, 29, 0.08);
  border-left: 3px solid color-mix(in srgb, var(--section-accent) 70%, transparent);
  background: rgba(8, 19, 29, 0.035);
}
.algo-variant h4 { margin: 0 0 4px; font-size: 0.9rem; color: var(--ink); }
.algo-variant p { margin: 0 0 9px; font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft); }
.algo-vprobs { display: flex; flex-wrap: wrap; gap: 6px; }
.algo-vprob {
  font-size: 0.72rem; padding: 3px 9px; border-radius: 999px;
  background: rgba(8, 19, 29, 0.06); color: var(--ink-soft); border: 1px solid transparent;
}
.algo-vprob.algo-easy { background: rgba(99, 153, 34, 0.16); color: #3b6d11; }
.algo-vprob.algo-medium { background: rgba(186, 117, 23, 0.16); color: #854f0b; }
.algo-vprob.algo-hard { background: rgba(226, 75, 74, 0.14); color: #a32d2d; }

/* Hypercomplex roadmap reuses the .algo-* roadmap UI with its own accent */
#hypercomplex { --section-accent: #a98bff; }
#groups-roadmap { --section-accent: #4fc4a1; }
#topology-roadmap { --section-accent: #e87aa6; }
#complex-analysis-roadmap { --section-accent: #5fa8e8; }
#geometry-roadmap { --section-accent: #d8a44a; }
#functional-analysis-roadmap { --section-accent: #9ec24a; }
#probability-roadmap { --section-accent: #c58cd6; }
#lie-groups-roadmap { --section-accent: #d65f5f; }
#pde-roadmap { --section-accent: #45b8c4; }
#fourier-roadmap { --section-accent: #7f9ede; }
#dynamics-roadmap { --section-accent: #cf8a3f; }
#category-roadmap { --section-accent: #9b7fd4; }
#number-theory-roadmap { --section-accent: #63bd85; }
#logic-roadmap { --section-accent: #8e5fa8; }
#optimization-roadmap { --section-accent: #b5603f; }
#algebraic-geometry-roadmap { --section-accent: #3f9ea8; }

@media (max-width: 980px) {
  .algo-layout { grid-template-columns: 1fr; }
  .algo-detail { position: static; }
}

/* ===== Section figures =====
   Inline SVG diagrams that sit under a section heading. Everything is drawn in
   the section's own accent plus the shared ink/muted tokens, so a figure picks
   up the colour of whatever section it lands in. */
.section-figure {
  margin: 0 0 22px;
  padding: 16px 18px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid color-mix(in srgb, var(--section-accent) 65%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--section-accent) 7%, rgba(5, 13, 23, 0.5));
}
.section-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.section-figure figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 78ch;
}

.section-figure .fig-axis { stroke: var(--muted); stroke-width: 1.4; opacity: 0.75; }
.section-figure .fig-bar {
  stroke: color-mix(in srgb, var(--section-accent) 45%, transparent);
  stroke-width: 3; stroke-linecap: round;
}
.section-figure .fig-bar.is-on { stroke: var(--section-accent); stroke-width: 5; }
.section-figure .fig-arrow { stroke: var(--section-accent); stroke-width: 2; fill: none; }
.section-figure .fig-label { fill: var(--muted); font-size: 12px; }
.section-figure .fig-tick { fill: var(--muted); font-size: 11px; }
.section-figure .fig-mid { text-anchor: middle; }

.section-figure .fig-cut {
  stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 6 6; opacity: 0.7;
}
.section-figure .fig-edge {
  stroke: color-mix(in srgb, var(--section-accent) 40%, transparent); stroke-width: 2;
}
.section-figure .fig-edge.is-on { stroke: var(--section-accent); stroke-width: 4; }
.section-figure .fig-node {
  fill: var(--section-accent); stroke: rgba(5, 13, 23, 0.85); stroke-width: 2;
}
.section-figure .fig-w { fill: var(--muted); font-size: 12px; text-anchor: middle; }
.section-figure .fig-w.is-on { fill: var(--section-accent); font-weight: 700; font-size: 13px; }

.section-figure .fig-sphere {
  fill: color-mix(in srgb, var(--section-accent) 10%, transparent);
  stroke: color-mix(in srgb, var(--section-accent) 50%, transparent); stroke-width: 1.5;
}
.section-figure .fig-sphere-lat {
  fill: none; stroke: var(--muted); stroke-width: 1; opacity: 0.5; stroke-dasharray: 4 5;
}
.section-figure .fig-geo { fill: none; stroke: var(--section-accent); stroke-width: 2.4; }
.section-figure .fig-eq { fill: var(--text); font-size: 15px; }

@media (max-width: 700px) {
  .section-figure { padding: 12px 12px 10px; }
  .section-figure figcaption { font-size: 0.78rem; }
}