:root { --vs-scale: 1; --vs-leading: 1.55; --vs-font-sans: 'Inter Tight', system-ui, sans-serif; --vs-font-mono: 'JetBrains Mono', monospace; --vs-display: var(--vs-font-sans); --vs-density: 1; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--vs-font-sans); -webkit-font-smoothing: antialiased; }
.vs-theme { color: var(--fg); background: var(--bg); min-height: 100%; font-family: var(--vs-font-sans); font-size: calc(15px * var(--vs-scale)); line-height: var(--vs-leading); }
.vs-root { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100%; min-height: 100vh; }
.vs-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; border-right: 1px solid var(--border); background: var(--bg-sidebar, var(--bg)); padding: calc(32px * var(--vs-density)) 20px; overflow-y: auto; }
.vs-main { height: 100vh; overflow-y: auto; scroll-behavior: smooth; padding: 0 calc(56px * var(--vs-density)) calc(80px * var(--vs-density)); max-width: 100%; }
.vs-toc__label { font-family: var(--vs-font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--fg-mute); margin-bottom: 14px; }
.vs-toc ol { list-style: none; padding: 0; margin: 0 0 24px; }
.vs-toc__link { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: baseline; padding: 7px 8px; margin: 0 -8px; text-decoration: none; color: var(--fg-mute); border-radius: 4px; border-left: 2px solid transparent; font-size: 13px; line-height: 1.3; transition: color 0.15s, background 0.15s, border-color 0.15s; }
.vs-toc__link:hover { color: var(--fg); background: var(--bg-hover); }
.vs-toc__link.is-active { color: var(--fg); border-left-color: var(--accent); background: var(--bg-hover); }
.vs-toc__num { font-family: var(--vs-font-mono); font-size: 10px; color: var(--fg-dim); letter-spacing: 0.05em; }
.vs-toc__link.is-active .vs-toc__num { color: var(--accent); }
.vs-toc__footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-family: var(--vs-font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--fg-dim); }
.vs-toc__brand { color: var(--accent); font-weight: 600; letter-spacing: 0.22em; margin-bottom: 6px; }
.vs-toc__meta { margin-bottom: 2px; }
.vs-masthead { padding-top: calc(36px * var(--vs-density)); padding-bottom: calc(40px * var(--vs-density)); border-bottom: 1px solid var(--border); margin-bottom: calc(44px * var(--vs-density)); }
.vs-masthead__row { display: flex; justify-content: space-between; align-items: center; font-family: var(--vs-font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--fg-mute); margin-bottom: 40px; }
.vs-masthead__brand { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.vs-masthead__meta { display: flex; align-items: center; gap: 10px; }
.vs-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; display: inline-block; }
.vs-logo__verum { color: var(--fg); font-weight: 700; }
.vs-logo__signal { color: #c77bff; font-style: italic; font-weight: 500; }
.vs-display { font-family: var(--vs-display); font-size: clamp(40px, 5.5vw, 76px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 18px; color: var(--fg); text-wrap: balance; }
.vs-lede { font-size: clamp(18px, 1.4vw, 22px); color: var(--fg-mute); margin: 0 0 22px; max-width: 60ch; line-height: 1.45; }
.vs-principle { font-family: var(--vs-display); font-style: italic; color: var(--accent); margin: 0; font-size: 16px; }
.vs-pipeline { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr; gap: 0; align-items: stretch; margin: 0 0 calc(56px * var(--vs-density)); border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); overflow: hidden; }
.vs-pipeline__node { padding: 18px 20px; position: relative; transition: background 0.25s; cursor: default; }
.vs-pipeline__node.is-active { background: var(--bg-hover); }
.vs-pipeline__num { font-family: var(--vs-font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 8px; }
.vs-pipeline__title { font-weight: 600; font-size: 15px; color: var(--fg); margin-bottom: 3px; }
.vs-pipeline__note { font-family: var(--vs-font-mono); font-size: 11px; color: var(--fg-mute); }
.vs-pipeline__pulse { position: absolute; top: 16px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity 0.3s; box-shadow: 0 0 0 0 var(--accent); }
.vs-pipeline__node.is-active .vs-pipeline__pulse { opacity: 1; animation: vs-pulse 1.2s ease-out infinite; }
@keyframes vs-pulse { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.vs-pipeline__edge { position: relative; border-left: 1px dashed var(--border); overflow: hidden; }
.vs-pipeline__edge.is-past { border-left-color: var(--accent); border-left-style: solid; opacity: 0.4; }
.vs-pipeline__edge.is-live { border-left-color: var(--accent); border-left-style: solid; }
.vs-pipeline__spark { position: absolute; top: -10px; left: -4px; width: 8px; height: 18px; background: var(--accent); border-radius: 4px; opacity: 0; transition: opacity 0.2s; }
.vs-pipeline__edge.is-live .vs-pipeline__spark { opacity: 1; animation: vs-spark 1.4s ease-in-out infinite; }
@keyframes vs-spark { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(80px); opacity: 0; } }
.vs-section { padding: calc(48px * var(--vs-density)) 0; border-top: 1px solid var(--border); }
.vs-section:first-of-type { border-top: none; }
.vs-section__head { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: baseline; margin-bottom: 22px; }
.vs-section__num { font-family: var(--vs-font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--accent); padding-top: 6px; }
.vs-section__title { font-family: var(--vs-display); font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.012em; font-weight: 600; line-height: 1.1; margin: 0; color: var(--fg); }
.vs-section__body { max-width: 72ch; padding-left: 72px; }
.vs-p { margin: 0 0 14px; color: var(--fg-mute-strong, var(--fg)); }
.vs-checks { list-style: none; padding: 0; margin: 12px 0 18px; border-top: 1px solid var(--border); }
.vs-checks li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--border); position: relative; color: var(--fg-mute-strong, var(--fg)); font-size: 14px; }
.vs-checks li::before { content: "\203A"; position: absolute; left: 0; top: 10px; color: var(--accent); font-family: var(--vs-font-mono); font-weight: 600; }
.vs-checks li b { color: var(--fg); font-weight: 600; }
.vs-sub { margin: 20px 0; }
.vs-sub__title { font-family: var(--vs-font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--fg); text-transform: uppercase; margin: 0 0 10px; padding-top: 4px; }
.vs-callout { margin: 18px 0; padding: 14px 18px; background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 4px; }
.vs-callout__label { font-family: var(--vs-font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 4px; }
.vs-callout__text { color: var(--fg-mute-strong, var(--fg)); font-size: 14px; }
.vs-legend { margin: 16px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-elev); }
.vs-legend__header { display: grid; grid-template-columns: 140px 60px 1fr; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-family: var(--vs-font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--fg-dim); background: var(--bg); }
.vs-legend__row { display: grid; grid-template-columns: 140px 60px 1fr; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); align-items: center; }
.vs-legend__row:last-child { border-bottom: none; }
.vs-legend__weight { font-family: var(--vs-font-mono); font-size: 12px; color: var(--fg-mute); }
.vs-legend__blurb { font-size: 13px; color: var(--fg-mute-strong, var(--fg)); }
.vs-verdict { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 3px; font-family: var(--vs-font-mono); font-size: 11px; letter-spacing: 0.08em; font-weight: 600; border: 1px solid transparent; white-space: nowrap; line-height: 1; }
.vs-verdict.is-pos { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.vs-verdict.is-neg { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-border); }
.vs-verdict.is-neutral { background: var(--bg-hover); color: var(--fg-mute); border-color: var(--border); }
.vs-formula-line { display: flex; gap: 12px; font-family: monospace; font-size: 13px; line-height: 2; color: var(--fg); }
.vs-formula-line--highlight { color: var(--accent); font-weight: 600; }
.vs-formula-label { color: var(--fg-dim); min-width: 140px; }
.vs-formula-note { font-size: 12px; color: var(--fg-dim); margin-top: 12px; }
@media (max-width: 768px) { .vs-root { grid-template-columns: 1fr; } .vs-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); } .vs-main { height: auto; } }

.vs-theme--a {
  --fg: #f0f0f5;
  --fg-mute: #8888aa;
  --fg-mute-strong: #c0c0d8;
  --fg-dim: #555570;
  --bg: #0a0a12;
  --bg-elev: #12121e;
  --bg-hover: #1a1a2a;
  --bg-sidebar: #0d0d18;
  --border: #1e1e30;
  --accent: #e879f9;
  --ok: #34d399;
  --ok-bg: rgba(52,211,153,0.12);
  --ok-border: rgba(52,211,153,0.3);
  --bad: #f87171;
  --bad-bg: rgba(248,113,113,0.12);
  --bad-border: rgba(248,113,113,0.3);
}

/* ---------- Hide internal masthead row when site nav is present ---------- */
/* The site-wide nav (added 2026-05-06) provides the logo + branding,
   so hide the React app's internal __row that duplicates it. The hero
   block (H1 + lede) below it remains. */
.vs-masthead { padding-top: 0 !important; }
.vs-masthead__row { display: none !important; }

/* ---------- Clear the fixed site nav ---------- */
/* The site nav is position:fixed and ~80px tall. The methodology page
   needs top padding so its content doesn't slam into it. */
.vs-main, .vs-root { padding-top: 100px; }

/* The site nav defaults to transparent and only becomes opaque on scroll.
   On the methodology page we always want it solid because the React app's
   content (TOC sidebar in particular) sits at top:0 and bleeds through. */
nav.nav { background: rgba(10,10,15,0.95) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 0.5px solid rgba(255,255,255,0.06); }