/* ---------- TraceLayer — Deep Trace ---------- */

/* ---------- Fonts: self-hosted, font-display: swap ---------- */
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


:root {

  --bg:            #08090B;
  --surface:       #101318;
  --surface-2:     #171B21;
  --surface-3:     #1E242B;

  --hairline:      #252A31;
  --border-strong: #5C646E;

  --text:          #EDEFF2;
  --text-muted:    #8B939E;
  --text-faint:    #5C646E;
  --text-inverse:  #08090B;

  --syntax-str:    #9FB8D0;

  --accent:        #C6F24E;
  --accent-hover:  #D4F86E;
  --accent-active: #B2E23A;
  --accent-quiet:  rgba(198, 242, 78, 0.12);

  --data-norm:     #6B7280;
  --data-warm:     #F0A93B;
  --data-hot:      #FF5D3B;
  --data-warm-quiet: rgba(240, 169, 59, 0.14);
  --data-hot-quiet:  rgba(255, 93, 59, 0.14);

  --success:       #C6F24E;
  --warning:       #F0A93B;
  --error:         #FF5D3B;
  --error-quiet:   rgba(255, 93, 59, 0.14);

  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --fs-display:     clamp(2.5rem, 1.15rem + 5.6vw, 5.5rem);
  --fs-h1:          clamp(2rem, 1.3rem + 3vw, 3.5rem);
  --fs-h2:          clamp(1.75rem, 1.45rem + 1.5vw, 2.25rem);
  --fs-h3:          clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-body-lg:     clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body:        clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small:       0.875rem;
  --fs-mono-metric: 0.8125rem;
  --fs-mono-label:  0.75rem;

  --lh-display: 1.0;
  --lh-h1:      1.05;
  --lh-h2:      1.1;
  --lh-h3:      1.2;
  --lh-body:    1.6;
  --lh-body-lg: 1.5;
  --lh-mono:    1.45;
  --lh-code:    1.6;

  --tr-display: -0.03em;
  --tr-h1:      -0.02em;
  --tr-h2:      -0.015em;
  --tr-h3:      -0.01em;
  --tr-body:    0;
  --tr-mono-label: 0.08em;

  --fw-reg:  400;
  --fw-med:  500;
  --fw-semi: 600;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;
  --section-gap: clamp(5rem, 3rem + 8vw, 8rem);

  /* ---------- Layout ---------- */
  --shell-max:   1440px;
  --content-max: 1200px;
  --trace-zone-max: 1276px;
  --rail-w:      48px;
  --rail-w-md:   32px;
  --rail-w-sm:   0px;
  --pad-x:       clamp(1.25rem, 0.5rem + 3.5vw, 6rem);
  --gutter:      24px;
  --header-h:    64px;
  --fade-w:      var(--space-5);

  --rail-frame-max: var(--shell-max);
  --rail-frame-pad: var(--pad-x);

  --radius-sm: 3px;
  --radius:    6px;
  --radius-pill: 999px;

  --line:        inset 0 0 0 1px var(--hairline);
  --line-strong: inset 0 0 0 1px var(--border-strong);
  --line-accent: inset 0 0 0 1px var(--accent);

  /* ---------- Z-index ---------- */
  --z-base:    0;
  --z-rail:    10;
  --z-sticky:  20;
  --z-header:  100;
  --z-focus:   150;
  --z-toast:   200;

  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 320ms;
  --ease:     cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Motion (05) ---------- */
  --dur-micro:   140ms;
  --dur-short:   220ms;
  --dur-medium:  360ms;
  --dur-long:    2400ms;
  --dur-trace-replay:    3200ms;
  --dur-replay-node-min:  240ms;
  --delay-depth-enhance:  400ms;
  --dur-depth-crossfade:  360ms;
  --dur-depth-camera:     480ms;
  --dur-reduced-fade:      80ms;
  --depth-trigger-visible: 0.1;
  --breath-opacity-min:    0.85;
  --breath-scale-max:      1.03;
  --stagger-step-node:    70ms;
  --stagger-step-card:    60ms;
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-signal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-depth-crossfade: cubic-bezier(0.45, 0, 0.25, 1);
  --ease-depth-camera:    cubic-bezier(0.2, 0.6, 0.3, 1);

  /* ---------- Norms (04): depth field and its echo ---------- */
  --norm-depth-plane-y-far:  0.14;
  --norm-depth-plane-y-mid:  0.34;
  --norm-depth-plane-y-near: 0.80;
  --norm-depth-scale-mid:    0.78;
  --norm-depth-scale-far:    0.60;
  --norm-depth-fog:          0.63;
  --norm-depth-fog-far:      0.40;
  --norm-depth-dot-floor:    0.55;
  --norm-depth-node-d:       12px;
  --norm-depth-halo-k:       3;
  --norm-depth-halo-alpha:   0.35;
  --norm-depth-parallax-min: 0.025;
  --norm-depth-parallax-max: 0.05;
  --norm-depth-field-h-floor: 0.75;
  --norm-depth-field-h-ratio: 0.8;
  --norm-depth-field-h-cap:   0.6;
  --norm-depth-plate-t:      28px;
  --norm-depth-plate-light-base: 0.55;
  --norm-depth-plate-light-gain: 0.9;
  --norm-depth-plate-light-cap:  0.5;
  --norm-depth-plate-light-edge: 0.6;
  --norm-replay-floor:       0.35;
  --norm-echo-dim:           0.85;
  --norm-echo-h-ratio:       0.25;
  --norm-echo-h-min:         160px;
  --norm-echo-h-max:         300px;

  /* ---------- Norms (04): signature, motifs, pages ---------- */
  --norm-trace-plate-t:      6px;
  --norm-trace-indent-sm:    var(--gutter);
  --norm-motif-max:          400px;
  --norm-motif-min:          240px;
  --norm-lime-share:         0.05;
  --norm-code-mobile-cols:   30;

  --df-halo-r:    calc(var(--norm-depth-halo-k) * var(--norm-depth-node-d) / 2);
  --ref-desktop-h: 900px;
}
@media (max-width: 1023px) {
  :root {
    --norm-depth-plate-t: 14px;
    --norm-depth-plane-y-far:  0.05;
    --norm-depth-plane-y-mid:  0.18;
    --norm-depth-plane-y-near: 0.62;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
input { font: inherit; color: inherit; }
::selection { background: var(--accent-quiet); color: var(--text); }

.mono, .font-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; }

/* ---------- Focus-visible ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  z-index: var(--z-toast);
  background: var(--accent);
  color: var(--text-inverse);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-metric);
  font-weight: var(--fw-semi);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  transition: transform var(--dur-micro) var(--ease-out);
  transform: translateY(-1px);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Layout: shell / column ---------- */
.shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.shell.content { max-width: var(--rail-frame-max); }
body.rail-content-frame .site-header .shell { max-width: var(--rail-frame-max); }
.content > * { max-width: var(--content-max); }
body.rail-content-frame {
  --rail-frame-max: calc(var(--content-max) + 2 * var(--pad-x) + var(--rail-w));
  --rail-frame-pad: var(--pad-x);
}
@media (min-width: 640px) and (max-width: 1023px) {
  .shell { padding-left: calc(var(--pad-x) + var(--rail-w-md)); }
}
@media (min-width: 1024px) {
  .shell { padding-left: calc(var(--pad-x) + var(--rail-w)); }
}

main { display: block; padding-bottom: var(--section-gap); }
.page--short main { padding-bottom: var(--space-9); }
.page--404 { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page--404 .page { flex: 1 0 auto; }
.page { position: relative; }

/* ---------- Layer-rail: sticky inside the page, ends at the footer line ---------- */
.rail { display: none; }
@media (min-width: 640px) {
  .rail {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: var(--z-rail);
    pointer-events: none;
  }
  .rail__stick {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    max-height: 100%;
    padding-block: var(--space-6);
  }
  .rail__stick::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--hairline);
  }
  .rail__list {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .rail { left: var(--pad-x); width: var(--rail-w-md); }
  .rail__stick::before { left: calc(var(--rail-w-md) / 2 - 0.5px); }
  .rail__list { width: 100%; }
  .rail__index { font-size: 0; position: relative; }
  .rail__index::before {
    content: "";
    position: absolute;
    left: calc(var(--rail-w-md) / 2 - 3px);
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--hairline);
    transform: translateY(-50%);
  }
  .rail__index.is-active::before {
    left: calc(var(--rail-w-md) / 2 - 5px);
    width: 10px;
    height: 2px;
    background: var(--accent);
  }
}
@media (min-width: 1024px) {
  .rail {
    left: max(0px, calc((100% - var(--rail-frame-max)) / 2));
    width: var(--rail-w);
  }
  .rail__stick::before { left: calc(var(--rail-frame-pad) - 1px); }
  .rail__list { left: calc(var(--rail-frame-pad) - 20px); }
  .rail__index {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-label);
    letter-spacing: var(--tr-mono-label);
    color: var(--text-muted);
    position: relative;
    padding-left: var(--space-3);
  }
  .rail__index::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--hairline);
    transform: translateY(-50%);
  }
  .rail__index.is-active::before {
    width: 10px;
    height: 2px;
    background: var(--accent);
  }
}
@media (min-width: 1440px) {
  body:not(.rail-content-frame) {
    --rail-frame-pad: calc((var(--shell-max) - var(--rail-w) - var(--trace-zone-max)) / 2);
  }
}
.rail-mobile-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tr-mono-label);
  color: var(--text-muted);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: var(--space-3);
}
@media (min-width: 640px) { .rail-mobile-label { display: none; } }
.hero .rail-mobile-label { margin-bottom: var(--space-2); }
@media (max-width: 639px) { .cta-center .rail-mobile-label { display: block; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: var(--bg);
  box-shadow: inset 0 -1px 0 0 var(--hairline);
}
.site-header .shell {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.logo {
  font-family: var(--font-mono);
  font-weight: var(--fw-semi);
  font-size: var(--fs-body);
  text-decoration: none;
  letter-spacing: var(--tr-h3);
  flex-shrink: 0;
}
.primary-nav { display: none; flex: 1; }
.primary-nav ul { display: flex; gap: var(--space-6); }
.primary-nav a {
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}
.primary-nav a:hover { color: var(--text); }
.primary-nav a[aria-current="page"] { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: var(--space-4); }
@media (max-width: 639px) {
  .site-header .cta {
    font-size: var(--fs-small);
    padding: var(--space-2) var(--space-4);
  }
}
@media (max-width: 399px) {
  .site-header .shell { gap: var(--space-2); }
  .header-actions { gap: var(--space-1); }
  .header-actions .cta { padding-inline: var(--space-3); }
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-muted);
  padding: var(--space-2);
}
.nav-toggle:hover { color: var(--text); }
@media (max-width: 399px) { .nav-toggle { padding-inline: var(--space-1); } }
.mobile-nav {
  display: none;
  background: var(--bg);
  box-shadow: inset 0 -1px 0 0 var(--hairline);
}
.mobile-nav.is-open { display: block; }
@media (min-width: 760px) {
  .primary-nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}
.mobile-nav ul {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--pad-x);
  gap: var(--space-4);
}
.mobile-nav a { font-size: var(--fs-body); color: var(--text-muted); text-decoration: none; }
.mobile-nav a[aria-current="page"] { color: var(--accent); }

/* ---------- Meta-rail (breadcrumb + section label) ---------- */
.meta-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tr-mono-label);
  color: var(--text-muted);
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tr-mono-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.eyebrow--accent { color: var(--accent); }
.h-display {
  font-family: var(--font-mono);
  font-weight: var(--fw-semi);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.h1 {
  text-wrap: balance;
  font-family: var(--font-mono);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
}
.h2 {
  text-wrap: balance;
  font-family: var(--font-mono);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
}
.h3 {
  font-family: var(--font-mono);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
}
.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-muted);
  max-width: 52ch;
}
.lead--text { color: var(--text); }
.prose { font-size: var(--fs-body); color: var(--text-muted); max-width: 60ch; }
.prose a { color: var(--text); text-decoration-color: var(--hairline); }
.mono-metric {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-metric);
  font-feature-settings: "tnum" 1, "zero" 1;
  color: var(--text);
}
.mono-metric.muted { color: var(--text-muted); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.nb { white-space: nowrap; }

/* ---------- Sections and vertical rhythm: --section-gap is the visible distance ---------- */
.section { padding-block: 0; }
.section-head { margin-bottom: var(--space-7); }
@media (max-width: 639px) { .section-head { margin-bottom: var(--space-6); } }
main > * + * { margin-top: var(--section-gap); }

/* ---------- Buttons / CTA ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-body);
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}
.cta--fill { background: var(--accent); color: var(--text-inverse); }
.cta--fill:hover { background: var(--accent-hover); }
.cta--fill:active { background: var(--accent-active); transform: scale(0.98); }
.cta--fill:disabled,
.cta--fill[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--text-faint);
  cursor: not-allowed;
}
.cta--ghost {
  background: transparent;
  color: var(--text);
  box-shadow: var(--line-strong);
}
.cta--ghost:hover { background: var(--surface-2); }
.cta--ghost:active { background: var(--surface-3); }
.cta--current { background: transparent; color: var(--accent); }
.cta--full { width: auto; }
@media (min-width: 640px) { .cta--full { width: 100%; } }
.cta--loading { position: relative; }
.cta__spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--text-inverse);
  border-top-color: transparent;
  animation: spin 700ms linear infinite;
}
.cta__spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-small);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.text-link:hover { border-color: var(--accent); }
.text-link .arrow { color: var(--text-muted); transition: transform var(--dur-micro) var(--ease-out); }
.text-link:hover .arrow { transform: translateX(3px); }

/* ---------- Panels ---------- */
.panel {
  background: var(--surface);
  box-shadow: var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: var(--space-5);
  box-shadow: inset 0 -1px 0 0 var(--hairline);
  position: sticky;
  top: var(--header-h);
  background: var(--bg);
  z-index: var(--z-sticky);
}
.tab {
  padding: var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-micro) var(--ease-out);
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  color: var(--text);
  font-weight: var(--fw-semi);
  border-bottom-color: var(--accent);
}
.tabpanel { padding-top: var(--space-5); }
.tabpanel[hidden] { display: none; }
.tabpanel__lang {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--text);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  box-shadow: inset 0 -1px 0 0 var(--hairline);
}

/* ---------- Code blocks ---------- */
.code-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tr-mono-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.code-block {
  position: relative;
  background: var(--surface);
  box-shadow: var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
  overflow-x: auto;
  margin-bottom: var(--space-5);
}
.code-block pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: var(--lh-code);
  color: var(--text);
  white-space: pre;
}
.code-block code .tok-kw   { color: var(--accent); }
.code-block code .tok-str  { color: var(--syntax-str); }
.code-block code .tok-com  { color: var(--text-muted); }

/* A block with two variants shows one: the canonical text when its longest line
   fits the panel, the split text otherwise. The choice is by panel width. */
.scroll-fade { container-type: inline-size; }
.code-v--canon { display: none; }
.code-v--split { display: block; }
@container (min-width: 552px) { .cq-552 .code-v--canon { display: block; } .cq-552 .code-v--split { display: none; } }
@container (min-width: 594px) { .cq-594 .code-v--canon { display: block; } .cq-594 .code-v--split { display: none; } }
@container (min-width: 342px) { .cq-342 .code-v--canon { display: block; } .cq-342 .code-v--split { display: none; } }
@container (min-width: 729px) { .cq-729 .code-v--canon { display: block; } .cq-729 .code-v--split { display: none; } }
@container (min-width: 779px) { .cq-779 .code-v--canon { display: block; } .cq-779 .code-v--split { display: none; } }

/* ---------- Code-panel scroll affordance: right-edge fade + visible scrollbar ---------- */
.scroll-fade { position: relative; }
.scroll-fade::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--fade-w);
  background: linear-gradient(to left, transparent, var(--surface) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.scroll-fade.has-fade::after { opacity: 1; }
.docs-preview pre,
.key-value-scroll { padding-right: var(--fade-w); }

.code-block,
.docs-preview pre,
.key-value-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--surface);
}
.code-block::-webkit-scrollbar,
.docs-preview pre::-webkit-scrollbar,
.key-value-scroll::-webkit-scrollbar { height: 8px; }
.code-block::-webkit-scrollbar-track,
.docs-preview pre::-webkit-scrollbar-track,
.key-value-scroll::-webkit-scrollbar-track { background: var(--surface); }
.code-block::-webkit-scrollbar-thumb,
.docs-preview pre::-webkit-scrollbar-thumb,
.key-value-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-sm);
}

.copy-btn {
  position: absolute;
  z-index: 1;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.copy-btn:hover { color: var(--text); background: var(--surface-3); }
.copy-btn:active { background: var(--surface-3); }
.copy-btn.is-copied { color: var(--accent); }
.copy-btn--inline { position: static; margin-top: var(--space-3); }

/* ---------- Heat dot / legend ---------- */
.heat-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.heat-dot[data-heat="norm"] { background: var(--data-norm); }
.heat-dot[data-heat="warm"] { background: var(--data-warm); }
.heat-dot[data-heat="hot"]  { background: var(--data-hot); }

.heat-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono-label);
}
.heat-legend > span:not(.heat-legend__bar) { white-space: nowrap; }
.heat-legend__bar {
  flex: 0 1 160px;
  min-width: 32px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--data-norm), var(--data-warm), var(--data-hot));
}

/* ---------- Accordion ---------- */
.accordion-item { box-shadow: inset 0 -1px 0 0 var(--hairline); }
.accordion-item:first-child { box-shadow: inset 0 1px 0 0 var(--hairline), inset 0 -1px 0 0 var(--hairline); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  text-align: left;
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  color: var(--text);
}
.accordion-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--dur-micro) var(--ease-out);
}
.accordion-item[open] .accordion-chevron { transform: rotate(180deg); }
.accordion-panel { padding-bottom: var(--space-5); color: var(--text-muted); max-width: 68ch; }
details.accordion-item summary.accordion-trigger { cursor: pointer; list-style: none; }
details.accordion-item summary::-webkit-details-marker { display: none; }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--space-5); }
.field__label {
  display: block;
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.field__input {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline-offset: 2px;
  width: 100%;
  height: 48px;
  padding-inline: var(--space-4);
  background: var(--surface-2);
  box-shadow: var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
}
.field__input::placeholder { color: var(--text-muted); }
.field__input:focus-visible { box-shadow: var(--line-accent); }
.field__input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--error); }
.field__input:disabled { opacity: 0.5; cursor: not-allowed; }
.field__hint { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--space-2); }
.field__error {
  font-size: var(--fs-small);
  color: var(--error);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.field__error[hidden] { display: none; }
.field__note {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-metric);
  color: var(--text-muted);
  margin-top: var(--space-4);
}
.form-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--error);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  color: var(--text);
}
.form-banner[hidden] { display: none; }
.form-banner button { text-decoration: underline; color: var(--error); font-size: var(--fs-small); }

/* ---------- Footer ---------- */
.site-footer {
  box-shadow: inset 0 1px 0 0 var(--hairline);
  padding-block: var(--space-8);
}
.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
}
.footer-brand { font-family: var(--font-mono); font-weight: var(--fw-semi); }
.footer-copyright {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  color: var(--text-muted);
  white-space: nowrap;
}
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: var(--fs-small); }
.footer-links a:hover { color: var(--text); }
.footer-escalation { font-size: var(--fs-small); color: var(--text-muted); }
.footer-escalation a { color: var(--accent); text-decoration: underline; white-space: nowrap; }
.footer-base {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  box-shadow: inset 0 1px 0 0 var(--hairline);
}
@media (min-width: 1024px) {
  .footer-base {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: var(--space-6);
  }
}
.footer-disclaimer {
  font-family: var(--font-mono);
  font-weight: var(--fw-reg);
  font-size: var(--fs-mono-metric);
  color: var(--text-muted);
  line-height: var(--lh-mono);
  overflow-wrap: normal;
  hyphens: none;
}

/* ---------- Reveal ---------- */
.reveal { opacity: 1; transform: none; }
.reveal.js-armed {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-medium) var(--ease-signal), transform var(--dur-medium) var(--ease-signal);
}
.reveal.js-armed.is-visible { opacity: 1; transform: none; }

/* ---------- Live trace (signature) ---------- */
.trace-section {
  background: var(--surface);
  box-shadow: inset 0 1px 0 0 var(--hairline), inset 0 -1px 0 0 var(--hairline);
  margin-top: calc(var(--section-gap) / 2);
  padding-block: calc(var(--section-gap) / 2);
}
.trace-section + * { margin-top: calc(var(--section-gap) / 2); }
.trace-hint { margin-top: var(--space-6); margin-bottom: var(--space-7); }
.trace-wrap { width: 100%; }
.trace-nodes {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  padding-inline: var(--pad-x);
  width: 100%;
}
@media (min-width: 640px) and (max-width: 1023px) {
  .trace-nodes {
    padding-left: calc(var(--pad-x) + var(--rail-w-md));
    padding-right: var(--pad-x);
  }
}
@media (min-width: 1024px) {
  .trace-nodes {
    --trace-node-floor: 180px;
    display: grid;
    grid-template-columns:
      minmax(var(--trace-node-floor), 1fr) var(--space-7)
      minmax(var(--trace-node-floor), 1fr) var(--space-7)
      minmax(var(--trace-node-floor), 1fr) var(--space-7)
      minmax(var(--trace-node-floor), 1fr);
    grid-template-rows: auto var(--space-8) auto var(--space-8) auto;
    gap: 0;
    padding-left: calc(var(--pad-x) + var(--rail-w));
    padding-right: var(--pad-x);
  }
}
@media (min-width: 1280px) { .trace-nodes { --trace-node-floor: 240px; } }
@media (min-width: 1440px) {
  .trace-nodes {
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-right: calc((var(--shell-max) - var(--rail-w) - var(--trace-zone-max)) / 2);
    padding-left: calc((var(--shell-max) - var(--rail-w) - var(--trace-zone-max)) / 2 + var(--rail-w));
  }
}
.trace-slot { position: relative; min-width: 0; }
@media (min-width: 1024px) {
  .trace-slot--root      { grid-column: 1 / -1; grid-row: 1; }
  .trace-edges--root     { grid-column: 1 / -1; grid-row: 2; }
  .trace-slot--prompt    { grid-column: 1; grid-row: 3; }
  .trace-slot--retriever { grid-column: 3; grid-row: 3; }
  .trace-slot--modelcall { grid-column: 5; grid-row: 3; }
  .trace-slot--answer    { grid-column: 7; grid-row: 3; }
  .trace-edges--tool     { grid-column: 5 / 7; grid-row: 4; }
  .trace-slot--tool      { grid-column: 5 / 7; grid-row: 5; }
  .trace-slot--tool > .trace-node { margin-left: var(--space-7); }
}

/* Edges are projections by time: from the parent's track at the child's start to the child's top-left corner. */
.trace-edges { display: none; position: relative; }
@media (min-width: 1024px) {
  .trace-edges { display: block; }
  .trace-edges--root { --pad: var(--space-6); }
  .trace-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    left: min(var(--x1), var(--x2));
    right: calc(100% - max(var(--x1), var(--x2)));
    min-width: 1px;
  }
  .trace-edges--root .trace-edge {
    --x1: calc(var(--space-6) + var(--s) * (100% - 2 * var(--space-6)));
    --x2: calc(var(--i) * (25% + var(--space-7) / 4));
  }
  .trace-edges--tool .trace-edge {
    --x1: calc(var(--space-6) + var(--s) * (100% - var(--space-7) - 2 * var(--space-6)));
    --x2: var(--space-7);
  }
  .trace-edge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .trace-edge path { fill: none; stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .trace-edge--hot path { stroke: var(--data-hot); }
}

/* Card: ring 0 root, ring 1 calls, ring 2 tool; depth by surface lightness */
.trace-node { position: relative; }
.trace-node__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  text-align: left;
  background: var(--surface-2);
  box-shadow: var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: background-color var(--dur-micro) var(--ease-out);
}
@media (min-width: 1024px) {
  .trace-node__trigger { padding: var(--space-6); row-gap: var(--space-3); }
}
details.trace-node > .trace-node__trigger:hover { background: var(--surface-3); }
details.trace-node[open] > .trace-node__trigger {
  box-shadow: var(--line-accent);
  background: var(--accent-quiet);
}
.trace-node--t2 > .trace-node__trigger { background: var(--surface); }
.trace-node--root > .trace-node__trigger { background: var(--surface-3); cursor: default; grid-template-columns: 1fr; }
.trace-node--root .trace-node__meta { grid-column: 1; }
.trace-node--root .trace-node__metric { grid-column: 1; grid-row: 2; }
@media (min-width: 640px) {
  .trace-node--root > .trace-node__trigger { grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: start; }
  .trace-node--root .trace-node__metric { grid-column: 2; grid-row: 1; justify-content: flex-end; }
}

.heat-dot { grid-column: 1; grid-row: 1; margin-top: 5px; }
.trace-section .heat-dot { width: 10px; height: 10px; }
.trace-node__meta {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.trace-node__type {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  color: var(--text-muted);
}
.trace-node__name { font-size: var(--fs-small); color: var(--text); }
@media (min-width: 1024px) and (max-width: 1071px) {
  .trace-node__name { min-height: calc(2 * 1lh); }
}
.trace-node__metric {
  grid-column: 2; grid-row: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-metric);
  font-feature-settings: "tnum" 1, "zero" 1;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-1);
  row-gap: 0;
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .trace-node--t1 .trace-node__metric { min-height: calc(2 * 1lh); }
}
.trace-node__metric-seg { white-space: nowrap; }
.trace-node__sep { color: var(--text-muted); }
.trace-node__lat[data-heat="hot"] { color: var(--data-hot); }
.trace-node__lat[data-heat="warm"] { color: var(--data-warm); }
.trace-node--t2 .trace-node__name,
.trace-node--t2 .trace-node__metric,
.trace-node--t2 .trace-node__lat { color: var(--text-muted); }

/* time plate: the track is the whole request axis; the plate is the span */
.trace-node__track {
  grid-column: 1 / -1;
  grid-row: 3;
  position: relative;
  height: var(--norm-trace-plate-t);
  margin-top: var(--space-2);
}
.trace-node--root .trace-node__track { grid-row: 3; }
@media (min-width: 640px) { .trace-node--root .trace-node__track { grid-row: 2; } }
.trace-node__track::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(50% - 0.5px);
  height: 1px;
  background: var(--hairline);
}
.trace-node__plate {
  position: absolute;
  top: 0;
  height: 100%;
  width: max(2px, calc(var(--share) * 100%));
  left: min(calc(var(--start) * 100%), calc(100% - max(2px, calc(var(--share) * 100%))));
  border-radius: var(--radius-sm);
  background: var(--data-norm);
}
.trace-node[data-heat="warm"] .trace-node__plate { background: var(--data-warm); }
.trace-node[data-heat="hot"] .trace-node__plate { background: var(--data-hot); }

.trace-node__panel {
  padding: var(--space-5);
  background: var(--surface);
  box-shadow: var(--line);
  border-radius: var(--radius);
  margin-top: var(--space-2);
}
.trace-node__field { margin-bottom: var(--space-4); }
.trace-node__field:last-child { margin-bottom: 0; }
.trace-node__field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono-label);
  margin-bottom: var(--space-1);
}
.trace-node__field-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-metric);
  color: var(--text);
}
.trace-node__line { display: block; }
.trace-node__field-value code { font: inherit; }
.trace-node__link { display: inline-block; margin-top: var(--space-2); color: var(--accent); text-decoration: underline; }
.trace-node__field .copy-btn--inline { margin-top: var(--space-2); margin-left: calc(-1 * var(--space-3)); display: flex; }

/* tablet and mobile: one column, nesting by indent and vertical connectors */
@media (max-width: 1023px) {
  .trace-slot { margin-left: calc(var(--level, 0) * var(--norm-trace-indent-sm)); }
  .trace-slot:not(.trace-slot--root)::before {
    content: "";
    position: absolute;
    left: calc(var(--norm-trace-indent-sm) / -2);
    top: calc(-1 * var(--gutter));
    width: calc(var(--norm-trace-indent-sm) / 2);
    height: calc(var(--gutter) + 28px);
    border-left: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    pointer-events: none;
  }
  .trace-slot.trace-slot--retriever::before { border-color: var(--data-hot); }
  .trace-slot--prompt::after,
  .trace-slot--retriever::after,
  .trace-slot--modelcall::after {
    content: "";
    position: absolute;
    left: calc(var(--norm-trace-indent-sm) / -2);
    top: 28px;
    bottom: 0;
    width: 1px;
    background: var(--hairline);
    pointer-events: none;
  }
  .trace-slot--tool::after {
    content: "";
    position: absolute;
    left: calc(var(--norm-trace-indent-sm) * -1.5);
    top: calc(-1 * var(--gutter));
    bottom: 0;
    width: 1px;
    background: var(--hairline);
    pointer-events: none;
  }
}

/* ---------- Hero ---------- */
.hero { padding-top: var(--space-8); }
.hero .shell { position: relative; }
.hero-grid { display: grid; align-items: start; position: relative; max-width: var(--content-max); }
.hero-copy { max-width: 640px; position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .hero { padding-top: 0; }
  .hero-grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    align-items: stretch;
  }
  .hero-copy { grid-column: 1 / 7; padding-block: var(--space-9) var(--space-8); }
  .hero-field { grid-column: 7 / 13; }
}
.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 560px) { .hero-ctas { flex-direction: row; align-items: center; } }
.hero-subcopy {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-metric);
  color: var(--text-muted);
}

/* ---------- Depth field ---------- */
.depth-field { position: relative; overflow: hidden; container-type: size; }
.hero-field {
  width: 100%;
  aspect-ratio: calc(1 / var(--norm-depth-field-h-ratio));
  max-height: calc(var(--norm-depth-field-h-cap) * (1024px - var(--header-h)));
  margin-top: var(--space-5);
}
@media (max-width: 639px) { .hero-field { margin-top: var(--space-4); } }
@media (min-width: 1024px) {
  .hero-field {
    aspect-ratio: auto;
    max-height: none;
    margin-top: 0;
    min-height: calc(var(--norm-depth-field-h-floor) * (var(--ref-desktop-h) - var(--header-h)));
  }
}
.depth-field__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.depth-field__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-depth-crossfade) var(--ease-depth-crossfade);
}
.depth-field__canvas.is-on { opacity: 1; }
.df-plane--far  { transform: translateY(calc(var(--norm-depth-plane-y-far)  * 100%)); }
.df-plane--mid  { transform: translateY(calc(var(--norm-depth-plane-y-mid)  * 100%)); }
.df-plane--near { transform: translateY(calc(var(--norm-depth-plane-y-near) * 100%)); }
.df-edges--root {
  transform: translateY(calc(var(--norm-depth-plane-y-mid) * 100%))
             scaleY(calc(var(--norm-depth-plane-y-near) - var(--norm-depth-plane-y-mid)));
}
.df-edges--tool {
  transform: translateY(calc(var(--norm-depth-plane-y-far) * 100%))
             scaleY(calc(var(--norm-depth-plane-y-mid) - var(--norm-depth-plane-y-far)));
}
.df-edges line,
.df-axis {
  stroke: var(--hairline);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.df-edges .df-edge--active { stroke: var(--accent); }
.df-plane--near { --df-plate-h: var(--norm-depth-plate-t); }
.df-plane--mid  { --df-plate-h: calc(var(--norm-depth-plate-t) * var(--norm-depth-scale-mid)); }
.df-plane--far  { --df-plate-h: calc(var(--norm-depth-plate-t) * var(--norm-depth-scale-far)); }
.df-plate {
  height: var(--df-plate-h);
  y: calc(var(--df-plate-h) / -2);
  rx: var(--radius-sm);
  fill-opacity: calc(var(--norm-depth-plate-light-base) + var(--norm-depth-plate-light-gain) * min(var(--share), var(--norm-depth-plate-light-cap)));
}
.df-plate--root { fill-opacity: var(--norm-depth-plate-light-base); }
.df-pg-edge { stop-opacity: var(--norm-depth-plate-light-edge); }
.df-pg-mid { stop-opacity: 1; }
.df-tick {
  stroke: var(--border-strong);
  stroke-width: 1;
  transform: translateY(calc(var(--norm-depth-plate-t) / 2 + 2px));
}
.df-marks circle { stroke: var(--bg); stroke-width: 1.5; }
/* the leader starts at the lower edge of the label's exclusion zone (label bottom + --space-1) */
.df-leader {
  y: calc(-1 * (var(--df-halo-r) + var(--space-5) - var(--space-1)));
  height: calc(var(--space-5) - var(--space-1));
  transform: translateX(-0.5px);
}
@media (max-width: 1023px) { .df-leader { display: none; } }
[data-plane="mid"] { opacity: var(--norm-depth-fog); }
[data-plane="far"] { opacity: var(--norm-depth-fog-far); }
.df-plane--mid .df-marks { opacity: max(var(--norm-depth-dot-floor), var(--norm-depth-fog)); }
.df-plane--far .df-marks { opacity: max(var(--norm-depth-dot-floor), var(--norm-depth-fog-far)); }
.df-halo-stop--in  { stop-color: var(--accent); stop-opacity: var(--norm-depth-halo-alpha); }
.df-halo-stop--out { stop-color: var(--accent); stop-opacity: 0; }

.df-label {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  line-height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}
/* exclusion zone of a field label: its rect + --space-1 on all sides, scene lines do not run under the text */
.hero-field .df-label { background: var(--bg); box-shadow: 0 0 0 var(--space-1) var(--bg); }
.depth-field.is-enhanced .df-label,
.depth-field.is-enhanced .df-leader { visibility: hidden; }
.df-label--active {
  font-size: var(--fs-mono-metric);
  line-height: 15px;
  color: var(--text);
  left: var(--x);
  top: calc(var(--norm-depth-plane-y-mid) * 100%);
  transform: translateY(calc(-100% - var(--df-halo-r) - var(--space-5)));
}
@media (max-width: 1023px) {
  .df-label--active {
    left: calc(var(--x) + var(--df-halo-r) + var(--space-1));
    transform: translateY(calc(-100% - var(--norm-depth-plate-t) * var(--norm-depth-scale-mid) / 2 - var(--space-1)));
  }
}
.df-label--span { top: calc(var(--norm-depth-plane-y-mid) * 100% + var(--df-halo-r) + 2px); }
.df-label--ret { left: var(--x); }
.df-label--model { left: min(var(--x), calc(100% - 19ch)); }
/* norm.depth-span-label (a): on one line only while the gap between the two span labels is >= --space-4 */
@container (max-width: 358.52px) {
  .df-label--model { top: calc(var(--norm-depth-plane-y-mid) * 100% + var(--df-halo-r) + 2px + 14px + var(--space-2)); }
}
.df-label--scale {
  left: var(--x);
  top: calc(var(--norm-depth-plane-y-near) * 100% + var(--norm-depth-plate-t) / 2 + 10px);
  transform: translateX(-50%);
}
.df-label--total {
  right: 4%;
  top: calc(var(--norm-depth-plane-y-near) * 100% + var(--norm-depth-plate-t) / 2 + 32px);
  font-size: var(--fs-mono-metric);
  line-height: 15px;
}

/* ---------- Final CTA echo ---------- */
.depth-echo {
  position: relative;
  overflow: hidden;
  container-type: size;
  width: 100%;
  aspect-ratio: calc(1 / var(--norm-echo-h-ratio));
  min-height: var(--norm-echo-h-min);
  max-height: var(--norm-echo-h-max);
  margin-top: var(--space-7);
}
.depth-echo .depth-field__svg { opacity: var(--norm-echo-dim); }
.depth-echo .df-label--total { top: calc(var(--norm-depth-plane-y-near) * 100% + var(--norm-depth-plate-t) / 2 + 8px); }
.final-col { max-width: var(--content-max); text-align: center; }
.final-col .h1 { text-wrap: balance; }
.final-cta__ctas { justify-content: center; align-items: center; }

/* ---------- Quick Start / split ---------- */
.split-5-7,
.split-6-6,
.docs-teaser,
.infra-grid { display: grid; gap: var(--space-8); }
.split-5-7 > *, .split-6-6 > *, .docs-teaser > *, .infra-grid > * { min-width: 0; }
.docs-teaser { row-gap: var(--space-6); }
@media (min-width: 1024px) {
  .split-5-7 { grid-template-columns: 5fr 7fr; align-items: start; }
  .split-6-6 { grid-template-columns: 1fr 1fr; align-items: start; }
  /* /security section 3: the redaction schema sits under the prose, left column */
  .split-priv { grid-template-rows: auto 1fr; row-gap: 0; }
  .split-priv .priv-copy { grid-column: 1; grid-row: 1; }
  .split-priv .priv-code { grid-column: 2; grid-row: 1 / span 2; }
  .split-priv .priv-schema { grid-column: 1; grid-row: 2; align-self: start; margin-top: var(--space-7); }
  .docs-teaser { grid-template-columns: 1fr 1fr; grid-template-areas: "copy preview" "link ."; align-items: start; row-gap: var(--space-6); }
  .docs-teaser__copy { grid-area: copy; }
  .docs-teaser__preview { grid-area: preview; }
  .docs-teaser__link { grid-area: link; }
  .infra-grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

@media (max-width: 1023px) {
  .split-priv .priv-schema { margin-top: calc(var(--space-5) - var(--space-8)); }
}

/* ---------- How it works ---------- */
.steps { display: grid; gap: var(--space-7) var(--gutter); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { min-width: 0; }
@media (min-width: 1024px) {
  .step { box-shadow: inset 1px 0 0 0 var(--hairline); padding-left: var(--space-5); }
}
.step__art { margin-bottom: var(--space-5); max-width: 320px; }
.hiw__svg { overflow: visible; }
.hiw-edge { stroke: var(--hairline); stroke-width: 1; }
.hiw-axis { fill: var(--data-norm); }
.hiw-dot--norm { fill: var(--data-norm); }
.hiw-dot--warm { fill: var(--data-warm); }
.hiw-dot--hot { fill: var(--data-hot); }
.hiw-ring { fill: none; stroke: var(--accent); stroke-width: 1; }
.step__num {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-3);
}
.step__label { font-weight: var(--fw-semi); display: block; margin-bottom: var(--space-2); }
.step__desc { color: var(--text-muted); font-size: var(--fs-small); }

/* ---------- Pricing teaser: one mono table, one row per plan ---------- */
.plan-rows {
  background: var(--surface);
  box-shadow: var(--line);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}
.plan-row {
  display: grid;
  align-items: baseline;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  box-shadow: inset 0 -1px 0 0 var(--hairline);
  grid-template-columns: 1fr auto;
  grid-template-areas: "name price" "volume volume" "sub sub";
}
.plan-row:last-child { box-shadow: none; }
.plan-row__name { grid-area: name; font-size: var(--fs-h3); font-weight: var(--fw-semi); line-height: var(--lh-h3); }
.plan-row__volume { grid-area: volume; font-size: var(--fs-body); color: var(--text-muted); white-space: nowrap; }
.plan-row__price { grid-area: price; font-size: var(--fs-h2); font-weight: var(--fw-semi); text-align: right; line-height: var(--lh-h2); }
.plan-row__price span, .plan-card__price span { font-size: var(--fs-small); color: var(--text-muted); font-weight: var(--fw-reg); }
.plan-row__sub { grid-area: sub; font-family: var(--font-sans); font-size: var(--fs-small); color: var(--text-muted); }
@media (min-width: 640px) {
  .plan-row { padding-inline: var(--space-5); grid-template-areas: "name price" "volume sub"; grid-template-columns: 1fr auto; }
  .plan-row__sub { text-align: right; }
}
@media (min-width: 1024px) {
  .plan-row {
    grid-template-columns: 8rem minmax(0, 1fr) 7.5rem minmax(0, 13rem);
    grid-template-areas: "name volume price sub";
    align-items: baseline;
  }
  .plan-row__sub { text-align: left; }
}

/* ---------- Infra teaser ---------- */
.infra-reading__value {
  font-family: var(--font-mono);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  font-feature-settings: "tnum" 1, "zero" 1;
  color: var(--text);
}
.infra-reading__rest {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-metric);
  color: var(--text-muted);
}
.infra-redact {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  box-shadow: inset 0 1px 0 0 var(--hairline);
  display: grid;
  gap: var(--space-2) var(--space-8);
}
@media (min-width: 1024px) { .infra-redact { grid-template-columns: 1fr 1fr; } }
.infra-redact__title { font-family: var(--font-mono); font-weight: var(--fw-semi); font-size: var(--fs-body); }
.infra-redact__text { font-size: var(--fs-small); color: var(--text-muted); max-width: 60ch; }

/* ---------- Schemas (norm.schema-fit): panel = parent column, drawn in panel coordinates ---------- */
.schema {
  background: var(--surface);
  box-shadow: var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.schema__svg { overflow: visible; }
.sc-text { font-family: var(--font-mono); font-size: var(--fs-mono-label); fill: var(--text-muted); }
.sc-text--strong { fill: var(--text); }
.sc-text--accent { fill: var(--accent); }
.sc-path { stroke: var(--border-strong); stroke-width: 1.5; }
.sc-path--out { stroke: var(--hairline); stroke-width: 1; }
.sc-dot { fill: var(--text-muted); }
.sc-dot--app { fill: var(--text); }
.sc-dot--sent { fill: var(--accent); }
.sc-async { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.sc-box { fill: var(--surface-2); stroke: var(--hairline); stroke-width: 1; }
.sc-box--process { fill: none; }
.sc-strike { stroke: var(--text-muted); stroke-width: 1; }

/* ---------- Docs: endpoints, preview, reference ---------- */
.endpoint-list { display: flex; flex-direction: column; }
.endpoint-item { display: block; padding-block: var(--space-4); box-shadow: inset 0 -1px 0 0 var(--hairline); }
.endpoint-method { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--accent); }
.endpoint-path { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text); }
.endpoint-desc { display: block; color: var(--text-muted); font-size: var(--fs-small); margin-top: var(--space-1); }

.docs-preview { background: var(--surface); box-shadow: var(--line); border-radius: var(--radius); padding: var(--space-5); position: relative; }
.docs-preview__endpoint { font-family: var(--font-mono); font-size: var(--fs-small); margin-bottom: var(--space-3); }
.docs-preview__endpoint .endpoint-method { margin-right: var(--space-2); }
.docs-preview pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-metric);
  line-height: var(--lh-code);
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
}
.docs-preview pre .tok-str { color: var(--syntax-str); }
.docs-preview__status {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-metric);
  color: var(--text-muted);
}

div.endpoints-desktop.endpoint-list { display: none; }
.endpoints-mobile { display: block; }
@media (min-width: 900px) {
  div.endpoints-desktop.endpoint-list { display: flex; }
  .endpoints-mobile { display: none; }
}
.api-grid { display: grid; gap: var(--space-7); }
.api-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .api-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
  .api-list { grid-column: 1 / 5; }
  .api-example { grid-column: 5 / 13; }
}
.spec-note { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--space-3); }
.sdk-list { display: flex; flex-direction: column; max-width: 760px; }
.sdk-item {
  display: grid;
  grid-template-columns: minmax(9ch, 14ch) 1fr;
  column-gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-4);
  box-shadow: inset 0 -1px 0 0 var(--hairline);
}
.sdk-item:first-child { box-shadow: inset 0 1px 0 0 var(--hairline), inset 0 -1px 0 0 var(--hairline); }
.sdk-item .sdk-method {
  font-family: var(--font-mono);
  font-feature-settings: "calt" 0, "liga" 0;
  color: var(--accent);
  font-size: var(--fs-small);
}
.sdk-item p { color: var(--text-muted); font-size: var(--fs-small); }
@media (max-width: 639px) { .sdk-item { grid-template-columns: 1fr; row-gap: var(--space-1); } }
.cta-center { text-align: center; }

/* ---------- Subpage fold (norm.fold-grid) ---------- */
.fold-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-7); }
.fold-grid > * { min-width: 0; }
.fold-crumbs { padding-block: var(--space-4) 0; margin-bottom: calc(var(--space-7) * -1 + var(--space-5)); }
.fold-copy { max-width: 640px; }
.fold-aside { display: flex; flex-direction: column; gap: var(--space-5); }
/* norm.fold-grid (B): the motif closes the copy column (/docs, /pricing) */
.fold-copy .motif { margin-top: var(--space-7); }
@media (min-width: 1024px) {
  .fold-grid {
    grid-template-columns: 7fr 5fr;
    column-gap: var(--space-8);
    row-gap: var(--space-5);
    align-items: start;
    grid-template-areas: "crumbs crumbs" "copy aside";
  }
  .fold-crumbs { grid-area: crumbs; margin-bottom: 0; }
  .fold-copy { grid-area: copy; }
  .fold-aside { grid-area: aside; }
  .fold-copy .motif { margin-top: var(--space-5); width: calc(100% * 5 / 7); }
  .fold-grid--signup {
    grid-template-columns: 8fr 4fr;
    grid-template-areas: "crumbs crumbs" "intro aside" "form aside";
    row-gap: 0;
  }
  .fold-grid--signup .fold-crumbs { margin-bottom: var(--space-5); }
  .fold-grid--signup .signup-intro { grid-area: intro; }
  .fold-grid--signup .fold-form { grid-area: form; margin-top: var(--space-7); }
  .fold-grid--success { grid-template-areas: "crumbs crumbs" "copy aside"; }
  .fold-grid--success .fold-copy { grid-area: copy; }
}
@media (max-width: 1023px) {
  .fold-crumbs { margin-bottom: 0; }
  .fold-grid--signup:not(.fold-grid--success) { row-gap: 0; }
  .fold-grid--signup:not(.fold-grid--success) .fold-aside { display: contents; }
  .fold-grid--signup:not(.fold-grid--success) .fold-crumbs { order: 1; margin-bottom: var(--space-5); }
  .fold-grid--signup:not(.fold-grid--success) .signup-intro { order: 2; }
  .fold-grid--signup:not(.fold-grid--success) .motif { order: 3; margin-top: var(--space-7); }
  .fold-grid--signup:not(.fold-grid--success) .fold-form { order: 4; margin-top: var(--space-7); }
  .fold-grid--signup:not(.fold-grid--success) .key-preview { order: 5; margin-top: var(--space-6); }
}

/* ---------- Subpage motif (norm.motif): a cut-out sub-branch of the canonical trace ---------- */
.motif { width: 100%; max-width: var(--norm-motif-max); min-width: min(100%, var(--norm-motif-min)); }
.motif__svg { display: block; overflow: visible; }
.mt-edge { stroke: var(--hairline); stroke-width: 1; }
.mt-dot--norm { fill: var(--data-norm); }
.mt-dot--warm { fill: var(--data-warm); }
.mt-dot--hot { fill: var(--data-hot); }
.mt-plate--warm { fill: var(--data-warm); }
.mt-plate--hot { fill: var(--data-hot); }
.mt-ring { fill: none; stroke: var(--accent); stroke-width: 1; }
.mt-end { fill: none; stroke: var(--text-muted); stroke-width: 1; }
.mt-strike { stroke: var(--text-muted); stroke-width: 1; }
.mt-label, .mt-metric, .mt-sep, .mt-field { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; }
.mt-line { font-family: var(--font-mono); font-size: var(--fs-mono-label); }
.mt-label { font-size: var(--fs-mono-label); fill: var(--text-muted); }
.mt-metric { font-size: var(--fs-mono-metric); fill: var(--text); }
.mt-sep { font-size: var(--fs-mono-label); fill: var(--text-muted); }
.mt-field { font-size: var(--fs-mono-label); fill: var(--text); }

/* ---------- Fold objects ---------- */
.checklist { display: flex; flex-direction: column; gap: var(--space-3); }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-small); color: var(--text); }
.checklist .tick { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.checklist-panel__note {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-metric);
  color: var(--text-muted);
}
.facts-panel__big {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  font-feature-settings: "tnum" 1, "zero" 1;
  color: var(--text);
}
.facts-panel__second { margin-top: var(--space-4); padding-top: var(--space-4); box-shadow: inset 0 1px 0 0 var(--hairline); }
.facts-panel__title { font-family: var(--font-mono); font-size: var(--fs-body); font-weight: var(--fw-semi); }
.facts-panel__text { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); }
.key-preview { padding: var(--space-4) var(--space-5); }
.key-preview__label {
  text-transform: uppercase;
  letter-spacing: var(--tr-mono-label);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  color: var(--text-muted);
}
.key-preview__value {
  margin-top: var(--space-2);
  font-size: var(--fs-mono-metric);
  color: var(--text);
  white-space: nowrap;
}
.key-preview__value .mask { color: var(--text-muted); }
.key-preview__note { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--text-muted); }

/* ---------- Pricing table: shared rows, one fill CTA ---------- */
.plan-table { display: grid; gap: var(--gutter); }
.plan-card {
  background: var(--surface-2);
  box-shadow: var(--line);
  border-radius: var(--radius);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.plan-card__name { font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: var(--fw-semi); }
.plan-card__volume { font-family: var(--font-mono); font-size: var(--fs-mono-metric); color: var(--text-muted); font-feature-settings: "tnum" 1, "zero" 1; }
.plan-card__price { font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: var(--fw-semi); }
.plan-card__sub { font-size: var(--fs-small); color: var(--text-muted); }
.plan-card__sub:empty { display: none; }
@media (min-width: 1024px) {
  .plan-table {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, auto);
    gap: 0;
    background: var(--surface);
    box-shadow: var(--line);
    border-radius: var(--radius);
  }
  .plan-card {
    background: none;
    box-shadow: none;
    border-radius: 0;
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: var(--space-4);
    align-items: start;
  }
  .plan-card + .plan-card { box-shadow: inset 1px 0 0 0 var(--hairline); }
  .plan-card__sub:empty { display: block; }
  .plan-card .cta { width: 100%; align-self: end; }
}

/* FAQ: expanded list on desktop, accordion on mobile */
.faq-accordion { display: block; }
.faq-expanded { display: none; }
@media (min-width: 760px) {
  .faq-accordion { display: none; }
  .faq-expanded { display: block; }
}
.faq-item { padding-block: var(--space-5); box-shadow: inset 0 -1px 0 0 var(--hairline); }
.faq-item:first-child { box-shadow: inset 0 1px 0 0 var(--hairline), inset 0 -1px 0 0 var(--hairline); }
.faq-item__q { font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--text); margin-bottom: var(--space-2); }

/* ---------- Security datasheet ---------- */
.datasheet-grid { display: flex; flex-direction: column; }
.datasheet-prose { display: contents; }
.datasheet-prose > section:nth-child(1) { order: 1; }
.datasheet-col { order: 2; margin-top: var(--space-7); }
.datasheet-prose > section:nth-child(2) { order: 3; margin-top: var(--section-gap); }
.datasheet-prose > section:nth-child(3) { order: 4; margin-top: var(--section-gap); }
@media (min-width: 1024px) {
  .datasheet-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: stretch; }
  .datasheet-prose { display: block; grid-column: 1 / 8; }
  .datasheet-col { grid-column: 8 / 13; margin-top: 0; }
}
.datasheet { margin: 0; }
@media (min-width: 1024px) {
  .datasheet { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
.datasheet__caption { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--space-4); }
.datasheet__group {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: var(--fw-semi);
  color: var(--text);
  margin-top: var(--space-4);
}
.datasheet__group:first-of-type { margin-top: 0; }
.datasheet__row {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-4);
  padding-block: var(--space-3);
  box-shadow: inset 0 -1px 0 0 var(--hairline);
  font-family: var(--font-mono);
}
.datasheet__list:last-of-type .datasheet__row:last-child { box-shadow: none; }
.datasheet__row dt {
  font-size: var(--fs-mono-label);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono-label);
  color: var(--text-muted);
  white-space: nowrap;
}
.datasheet__row dd { font-size: var(--fs-mono-metric); color: var(--text); white-space: nowrap; }
.datasheet__row dd.tbc { color: var(--text-muted); }
.datasheet__pointer { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--text-muted); }

/* ---------- Signup / success ---------- */
.signup-form-wrap { max-width: 440px; }
#signup-success.signup-form-wrap { max-width: 500px; }
.key-block {
  background: var(--surface);
  box-shadow: var(--line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.key-value-scroll { overflow-x: auto; }
.key-block > .scroll-fade { flex: 1 1 auto; min-width: 0; }
.key-block .copy-btn--inline { margin-top: 0; }
.key-value {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  color: var(--text);
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.key-value .key-seg { white-space: nowrap; }
.key-value .mask { color: var(--text-muted); }
.success-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-pill);
  background: var(--accent-quiet);
  color: var(--accent);
  margin-right: var(--space-3);
}
.key-example {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tr-mono-label);
  color: var(--text-muted);
}
.accent-text { color: var(--accent); }
.tbc { color: var(--text-muted); }

/* ---------- Utility ---------- */
.stack { display: flex; flex-direction: column; }
.gap-5 { gap: var(--space-5); }
.mt-3 { margin-top: var(--space-3); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .depth-field__canvas {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity var(--dur-reduced-fade) linear !important;
  }

  .rail__tick,
  .trace-node,
  .reveal,
  .cta,
  .tab__indicator,
  .accordion__chevron,
  .skip-link,
  .form-banner {
    transform: none !important;
  }

  .reveal,
  .trace-node,
  .accordion__panel {
    opacity: 1 !important;
    transform: none !important;
  }

  .cta--loading .cta__indicator { animation: none !important; }

  .cta:active {
    transform: none !important;
    background-color: var(--accent-active);
  }

  .copy-btn--success::before { opacity: 0 !important; }

  .cta__spinner { animation: none !important; }
  .rail__index::before { transition: none !important; }
}