/* MINDWARD landing page — "void" design system.
   Constellation-on-black-velvet: pure #000 canvas, one violet, amber sparks.
   Hierarchy comes from scale and whitespace, never weight, borders or cards.
   Type: Inter (self-hosted variable, SIL OFL — licence in /fonts/).
   Previous editorial design: versions/editorial/. */

@font-face {
  font-family: "InterVariable";
  src: url("/fonts/InterVariable.woff2?v=693b77d4") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* palette — mapped onto the existing token names so the motion layer
     and the wards diagram carry over unchanged */
  --paper:      #000000;                      /* the void */
  --paper-alt:  #000000;
  --card:       #000000;
  --ink:        #ffffff;                      /* bone white */
  --ink-soft:   #bdbdbd;                      /* silver mist */
  --muted:      #9a9a9a;                      /* ash gray */
  --rule:       rgba(255, 255, 255, 0.16);    /* diagram hairlines only */
  --rule-soft:  rgba(255, 255, 255, 0.07);
  --accent:     #8052ff;                      /* electric iris */
  --accent-ink: #ffffff;
  --amber:      #ffb829;                      /* saffron spark */
  --verdant:    #15846e;                      /* deep verdant */
  --mark:       rgba(128, 82, 255, 0.14);     /* the one soft wash */
  --halo:       #000000;                      /* knockout stroke behind SVG text */
  --bar:        #000000;                      /* topbar ground */

  --sans: "InterVariable", Inter, ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans);                       /* one typeface across all contexts */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* type scale */
  --text-display:    clamp(3rem, 8.8vw, 7.0625rem);   /* 113px */
  --text-heading-lg: clamp(2.5rem, 6.1vw, 4.875rem);  /* 78px  */
  --text-heading:    clamp(2rem, 3.75vw, 3rem);       /* 48px  */
  --text-heading-sm: clamp(1.75rem, 3.3vw, 2.625rem); /* 42px  */
  --text-subheading: clamp(1.5rem, 2.8vw, 2.25rem);   /* 36px  */
  --text-heading-xs: 1.6875rem;                       /* 27px  */
  --text-heading-2xs: 1.5rem;                         /* 24px  */
  --text-body: 1.125rem;                              /* 18px  */
  --text-nav: 0.875rem;                               /* 14px  */
  --text-caption: 0.75rem;                            /* 12px  */

  --w-light: 200;      /* body — the signature ultra-light */
  --w-reg: 400;        /* every headline, whatever the size */
  --w-semi: 600;       /* 14px uppercase labels only */

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── day mode: same system, inverted ground. The toggle (topbar) sets
   data-theme; /theme.js applies the stored choice before first paint.
   Accents darken so amber and iris keep AA contrast on paper. ── */
html[data-theme="light"] {
  --paper:      #faf9f7;
  --paper-alt:  #faf9f7;
  --card:       #faf9f7;
  --ink:        #16181c;
  --ink-soft:   #3d434b;
  --muted:      #6b7280;
  --rule:       rgba(0, 0, 0, 0.18);
  --rule-soft:  rgba(0, 0, 0, 0.08);
  --accent:     #6a3fe0;
  --accent-ink: #ffffff;
  --amber:      #96660a;
  --mark:       rgba(106, 63, 224, 0.10);
  --halo:       #faf9f7;
  --bar:        #faf9f7;
  color-scheme: light;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: var(--w-light);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(80rem, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.narrow > * { max-width: 46rem; }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: 0.6rem 1rem; z-index: 10; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }
.skip:hover { color: var(--accent-ink); }

section[id], figure[id], tr[id] { scroll-margin-top: 5.5rem; }

a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--amber); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

strong { font-weight: var(--w-reg); color: var(--ink); }
em { font-style: normal; color: var(--amber); }

/* ── Top bar: transparent on the void, no border, no blur ───── */

.topbar { position: sticky; top: 0; z-index: 5; background: var(--bar); }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.25rem; flex-wrap: wrap;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: var(--w-semi); letter-spacing: 0.14em;
  font-size: var(--text-nav); color: var(--ink); text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
.logo-glyph { width: 1.05rem; height: 1.05rem; display: inline-block; }
.topbar nav { display: flex; gap: clamp(0.75rem, 2.5vw, 1.9rem); flex-wrap: wrap; align-items: center; }
.topbar nav a {
  font-size: var(--text-nav); font-weight: var(--w-semi);
  letter-spacing: 0.025em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.topbar nav a:hover { color: var(--ink); }
.topbar nav a[aria-current="page"] { color: var(--ink); }
.theme-toggle {
  background: none; border: 0; padding: 0.3rem; cursor: pointer;
  color: var(--muted); display: inline-flex; border-radius: 24px;
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; }
.theme-toggle .tt-sun  { display: block; }
.theme-toggle .tt-moon { display: none; }
html[data-theme="light"] .theme-toggle .tt-sun  { display: none; }
html[data-theme="light"] .theme-toggle .tt-moon { display: block; }
@media (max-width: 52rem) {
  /* the bar scrolls away on phones — two wrapped rows cost no viewport */
  .topbar { position: static; }
  .topbar-inner { position: relative; }
  .theme-toggle { position: absolute; top: 0.7rem; right: 0; }
  .topbar nav { gap: 0.7rem 0.9rem; }
  .topbar nav a { font-size: 0.8125rem; }
  section[id], figure[id], tr[id] { scroll-margin-top: 1rem; }
}
@media (pointer: coarse) {
  .theme-toggle { padding: 0.85rem; margin: -0.55rem; }
}

/* ── Type ───────────────────────────────────────────────────── */

h1, h2, h3 { font-weight: var(--w-reg); margin: 0; }
h1 {
  font-size: var(--text-heading-lg); line-height: 1.06;
  letter-spacing: -0.04em; max-width: none;
  margin-bottom: 2rem;
}
h2 {
  font-size: var(--text-heading-lg); line-height: 1.1;
  letter-spacing: -0.04em; max-width: 16ch;
  margin-bottom: 1.5rem;
}
h3 {
  font-size: var(--text-heading-xs); line-height: 1.2;
  letter-spacing: -0.01em; margin-bottom: 0.75rem;
}

p { margin: 0 0 1.15rem; max-width: var(--measure); }
.big { font-size: var(--text-body); line-height: 1.6; color: var(--ink-soft); }
.pull {
  font-size: var(--text-heading-2xs); font-weight: var(--w-reg);
  letter-spacing: -0.02em; line-height: 1.3; color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem; margin-top: 2.5rem; max-width: 38rem;
}
.section-lede { color: var(--muted); max-width: 33rem; margin-bottom: 3rem; }

/* amber uppercase label above each section */
.klabel {
  display: block; font-size: var(--text-nav); font-weight: var(--w-semi);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 1.5rem; max-width: none;
}

/* ── Sections: generous void, no bands, no panels ───────────── */

.band { padding-block: clamp(4rem, 9vw, 7.5rem); }
.band-alt { background: transparent; }

/* ── Hero: two-column split, constellation right ────────────── */

.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem); }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 64rem) { .hero-grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); } }

.eyebrow {
  font-size: var(--text-nav); font-weight: var(--w-semi);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 2rem; max-width: none;
  border: 0; padding: 0;
}
.lede { font-size: var(--text-body); color: var(--ink-soft); max-width: 30rem; }

.cta-row { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; margin: 2.5rem 0 2.5rem; max-width: none; }

/* the one violet pill */
.btn {
  display: inline-block; padding: 0.9rem 1.6rem;
  border-radius: 24px; text-decoration: none;
  font-size: var(--text-nav); font-weight: var(--w-semi);
  letter-spacing: 0.025em; text-transform: uppercase;
  border: 0;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000000); color: var(--accent-ink); }
/* ghost text link — no container at all */
.btn-secondary {
  background: transparent; color: var(--muted); padding: 0.9rem 0.25rem;
  text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px;
}
.btn-secondary:hover { color: var(--ink); }

.hero-proof { font-size: 0.9375rem; color: var(--muted); max-width: 27rem; padding: 0; border: 0; }
.hero-proof a { color: var(--amber); }

.hero-stage { position: relative; min-height: 340px; }
canvas.field { display: block; width: 100%; height: auto; }
@media (max-width: 64rem) {
  /* mobile: the animation leads, the text follows */
  .hero-stage { max-width: 19rem; margin-inline: auto; order: -1; min-height: 0; }
  .hero-grid { gap: 1.5rem; }
  .hero { padding-top: 1.5rem; }
}

/* two-column section split — the zigzag rhythm; visual left on desktop */
.split { display: grid; gap: 3rem; align-items: center; max-width: none; }
@media (min-width: 64rem) {
  .split { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
  .split-stage { order: -1; }
}
.split-stage { max-width: 30rem; }
@media (max-width: 64rem) {
  .split-stage { max-width: 21rem; margin-inline: auto; order: -1; }
}

/* ── The 2×2 matrix: whitespace grid, no boxes ──────────────── */

.matrix {
  display: grid; grid-template-columns: minmax(6rem, auto) 1fr 1fr;
  gap: 1.5rem 2.5rem; max-width: 40rem; margin-bottom: 4rem;
  font-size: 0.9375rem;
}
.matrix > div { display: contents; }
.matrix span { background: none; padding: 0; }
.matrix-head span, .matrix [role="rowheader"] {
  font-size: var(--text-caption); font-weight: var(--w-semi);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  background: none;
}
.matrix .filled { font-weight: var(--w-reg); font-size: var(--text-heading-2xs); letter-spacing: -0.02em; color: var(--ink); }
@media (max-width: 40rem) {
  .matrix { gap: 1.25rem 1.25rem; }
  .matrix .filled, .matrix .empty { font-size: 1.0625rem; }
}
.matrix .empty { color: color-mix(in srgb, var(--ink) 55%, transparent); background: none; font-size: var(--text-heading-2xs); }

/* ── The rungs table: typography floating on void ───────────── */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.rungs { border-collapse: collapse; width: 100%; min-width: 46rem; background: none; border: 0; }
table.rungs th, table.rungs td {
  text-align: left; vertical-align: top;
  padding: 1.75rem 2.25rem 1.75rem 0; border: 0;
}
table.rungs thead th {
  font-size: var(--text-caption); font-weight: var(--w-semi);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); background: none;
  padding-block: 0 0.5rem;
}
table.rungs tbody th { width: 15rem; font-weight: var(--w-light); }
table.rungs tbody td { color: var(--ink-soft); font-size: 0.9375rem; font-weight: var(--w-light); }
table.rungs tbody td:nth-of-type(1), table.rungs tbody td:nth-of-type(2) {
  width: 9.5rem; color: var(--ink); font-size: var(--text-body); font-weight: var(--w-reg);
}
.rung-name { display: block; font-size: var(--text-heading-2xs); font-weight: var(--w-reg); letter-spacing: -0.02em; color: var(--ink); }
.rung-note { display: block; margin-top: 0.4rem; font-size: 0.875rem; color: var(--muted); }
.row-self { background: none; }
table.rungs .row-self th { border-left: 3px solid var(--accent); padding-left: 1.25rem; }
.row-self td strong:first-child, .row-self .rung-name { color: var(--amber); }

.after-table { margin-top: 2.5rem; color: var(--ink-soft); max-width: 52ch; }

/* ── Proof blocks: zigzag whitespace, violet numerals ───────── */

.proof {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 4rem; padding-block: 3rem;
  border: 0;
}
.proof h3 { font-size: var(--text-subheading); letter-spacing: -0.02em; line-height: 1.15; max-width: 14ch; }
.proof h3 .n { color: var(--accent); font-weight: var(--w-reg); margin-right: 0.5rem; }
.proof-body p { color: var(--ink-soft); }
.proof-body p:last-child { margin-bottom: 0; }
@media (min-width: 52rem) {
  .proof { grid-template-columns: 19rem minmax(0, 1fr); }
  .proof h3 { grid-column: 1; }
  .proof-body, .proof .sample { grid-column: 2; }
}

/* the export sample — a document floating in the void */
.sample { margin: 1.5rem 0 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.sample figcaption {
  padding: 0 0 0.9rem; font-size: 0.8125rem; color: var(--muted);
  border: 0; background: none;
}
.sample figcaption code { font-family: var(--mono); color: var(--amber); }
.sample pre {
  margin: 0; padding: 0; overflow-x: auto;
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.7;
  color: var(--ink-soft); tab-size: 2;
}
.sample-foot { margin: 1.1rem 0 0; padding: 0; border: 0; font-size: 0.875rem; color: var(--muted); max-width: none; }
.sample-foot a { color: var(--amber); }
code { font-family: var(--mono); font-size: 0.9em; }

/* ── Who it's for: three text columns, nothing else ─────────── */

.who-grid { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.who-grid article { background: none; border: 0; border-radius: 0; padding: 0; }
.who-grid h3 { font-size: var(--text-heading-2xs); letter-spacing: -0.02em; }
.who-grid p { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }

/* ── Limits ─────────────────────────────────────────────────── */

.limits { margin: 0 0 2.5rem; }
.limits dt { font-size: var(--text-heading-2xs); font-weight: var(--w-reg); letter-spacing: -0.02em; margin-top: 2.5rem; color: var(--ink); max-width: 38rem; }
.limits dt:first-child { margin-top: 0; }
.limits dd { margin: 0.75rem 0 0; padding: 0; border: 0; color: var(--ink-soft); max-width: var(--measure); }
.note { font-size: 0.9375rem; color: var(--muted); border: 0; padding-top: 0; }

/* ── Founder ────────────────────────────────────────────────── */

.founder { margin: 0; padding: 0; }
.founder p {
  font-size: var(--text-heading-2xs); font-weight: var(--w-light);
  line-height: 1.5; letter-spacing: -0.01em; color: var(--ink);
  max-width: 42rem; margin: 0;
}

/* ── Start: one pill, one ghost ─────────────────────────────── */

.start-grid { display: grid; gap: 3.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); max-width: 56rem; }
.start-card { background: none; border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; }
.start-card h3 { font-size: var(--text-subheading); letter-spacing: -0.02em; }
.start-card p { color: var(--ink-soft); font-size: 0.9375rem; }
.start-card p:last-child { margin: auto 0 0; padding-top: 1.25rem; }

/* ── Footer ─────────────────────────────────────────────────── */

.footer { border-top: 0; padding-block: clamp(3rem, 7vw, 5rem); color: var(--muted); font-size: 0.875rem; }
.footer p { margin: 0 0 0.5rem; }
.footer .wordmark { display: inline-flex; margin-bottom: 0.75rem; }
.footer-meta { margin-top: 1.5rem; max-width: 46rem; }

/* ════════════════════════════════════════════════════════════
   THE WARDS — the rings diagram, restyled for the void.
   Same structure and choreography as before; strokes now bone
   white and iris on black, halos knock out in pure black.
   ════════════════════════════════════════════════════════════ */

.wards { margin: 0 0 4rem; display: grid; gap: 1rem 3rem; }
@media (min-width: 60rem) {
  .wards { grid-template-columns: minmax(0, 7fr) minmax(16rem, 4fr); align-items: center; }
  .wards-note { grid-column: 1 / -1; }
}
.wards-stage { max-width: 36rem; }
.wards-svg { width: 100%; height: auto; display: block; }

.w-drift  { stroke: var(--muted); stroke-width: 1; opacity: 0.3; }
.w-dot    { fill: var(--muted); opacity: 0.4; }
.w-dash   { stroke: var(--muted); stroke-width: 1.5; opacity: 0.4; }
.w-them   { font-family: var(--sans); font-weight: var(--w-light); font-style: normal; font-size: 19px; fill: var(--muted); }

.w-ring   { fill: none; stroke: var(--ink); stroke-width: calc(var(--sw) * 1px); opacity: var(--op); }
.w-ghost  { fill: none; stroke: var(--accent); stroke-width: 6; opacity: 0; }
.w-hit    { fill: none; stroke: transparent; stroke-width: 30; pointer-events: stroke; cursor: pointer; }
.w-tick   { fill: none; stroke: var(--amber); stroke-width: 3.5; opacity: 0; }

.w-label  {
  font-family: var(--sans); font-size: 14px; font-weight: var(--w-semi);
  letter-spacing: 0.09em; text-transform: uppercase; text-anchor: middle; fill: var(--muted);
  paint-order: stroke; stroke: var(--halo); stroke-width: 10; stroke-linejoin: round;
}

.w-rail    { stroke: var(--muted); stroke-width: 1; opacity: 0.45; }
.w-bracket { fill: none; stroke: var(--amber); stroke-width: 2.5; opacity: 0.5; }
.w-yours   { font-family: var(--sans); font-weight: var(--w-light); font-size: 17px; fill: var(--amber); }
.w-exlabel { font-family: var(--sans); font-weight: var(--w-reg); font-size: 18px; letter-spacing: -0.02em; fill: var(--ink);
             text-anchor: end; paint-order: stroke; stroke: var(--halo); stroke-width: 8; }
.w-exsub   { font-family: var(--mono); font-size: 11px; fill: var(--muted);
             text-anchor: end; paint-order: stroke; stroke: var(--halo); stroke-width: 8; }
.w-hit-chan { pointer-events: fill; fill: transparent; }

.w-probe, .w-fetch { fill: var(--accent); opacity: 0; }
.w-doc rect { fill: var(--paper); stroke: var(--amber); stroke-width: 1.75; }
.w-doc line { stroke: var(--muted); stroke-width: 1.5; }
.w-packet .w-doc { transform: translate(calc(var(--dx) * 0.83), calc(var(--dy) * 0.83)); }
.w-tick-r3 { opacity: 1; }
.w-packet-manual { display: none; }

.w-core-disc { fill: var(--mark); stroke: var(--accent); stroke-width: 1.5; }
.w-you { font-family: var(--sans); font-weight: var(--w-reg); font-size: 19px; letter-spacing: -0.01em; text-anchor: middle; fill: var(--ink); }

.wards-caption { position: relative; min-height: 2.4em; margin: 0.75rem 0 0; max-width: none; font-size: 0.9375rem; color: var(--muted); }
.wards-caption span { position: absolute; inset: 0; opacity: 0; transition: opacity 240ms var(--ease-settle); }
.wards-caption span[data-cap="default"] { opacity: 1; }
.wards[data-focus="core"]      .wards-caption span { opacity: 0; } .wards[data-focus="core"]      .wards-caption span[data-cap="core"]      { opacity: 1; }
.wards[data-focus="isolation"] .wards-caption span { opacity: 0; } .wards[data-focus="isolation"] .wards-caption span[data-cap="isolation"] { opacity: 1; }
.wards[data-focus="backups"]   .wards-caption span { opacity: 0; } .wards[data-focus="backups"]   .wards-caption span[data-cap="backups"]   { opacity: 1; }
.wards[data-focus="egress"]    .wards-caption span { opacity: 0; } .wards[data-focus="egress"]    .wards-caption span[data-cap="egress"]    { opacity: 1; }
.wards[data-focus="export"]    .wards-caption span { opacity: 0; } .wards[data-focus="export"]    .wards-caption span[data-cap="export"]    { opacity: 1; }

.wards-legend { list-style: none; margin: 0; padding: 0; }
.wards-legend li + li { margin-top: 0.5rem; }
.wards-legend button {
  display: flex; gap: 0.9rem; align-items: baseline; width: 100%;
  text-align: left; background: none; border: 0; border-left: 2px solid transparent;
  padding: 0.6rem 1rem; font: inherit; font-size: 0.9375rem; font-weight: var(--w-light);
  color: var(--ink-soft); cursor: pointer; border-radius: 0;
  transition: border-color 200ms var(--ease-settle), background-color 200ms var(--ease-settle);
}
.wards-legend button:hover,
.wards-legend button[aria-pressed="true"] { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.wards-legend .wl-mark { flex: 0 0 1.1rem; font-size: 0.8125rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.wards-legend strong { color: var(--ink); font-weight: var(--w-reg); }

.wards-note { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--muted); max-width: 46rem; }
.wards-note a { color: var(--amber); }

.wards[data-focus] .w-ring  { transition: opacity 240ms var(--ease-settle); opacity: 0.22; }
.wards[data-focus] .w-label { transition: fill 240ms var(--ease-settle); }
.wards[data-focus="isolation"] #w-r1 { opacity: 1; } .wards[data-focus="isolation"] .w-ghost-r1 { opacity: 0.32; } .wards[data-focus="isolation"] .w-label-r1 { fill: var(--ink); }
.wards[data-focus="backups"]   #w-r2 { opacity: 1; } .wards[data-focus="backups"]   .w-ghost-r2 { opacity: 0.32; } .wards[data-focus="backups"]   .w-label-r2 { fill: var(--ink); }
.wards[data-focus="egress"]    #w-r3 { opacity: 1; } .wards[data-focus="egress"]    .w-ghost-r3 { opacity: 0.32; } .wards[data-focus="egress"]    .w-label-r3 { fill: var(--ink); }
.wards[data-focus="core"]      .w-ghost-core { opacity: 0.32; }
.wards[data-focus="export"]    .w-rail { opacity: 0.9; }
.wards[data-focus="export"]    .w-bracket { opacity: 1; }
.wards[data-focus="export"]    .w-tick { opacity: 1; transition: opacity 240ms var(--ease-settle); }
html.js .wards[data-focus="export"] .w-tick,
html.js .wards.play-export .w-tick { opacity: 1; transition: opacity 240ms var(--ease-settle); }
.wards.live[data-focus="export"] .w-bracket,
.wards.live.play-export .w-bracket { animation: none; opacity: 1; }
.w-ghost { transition: opacity 240ms var(--ease-settle); }

@media (max-width: 40rem) {
  .w-label, .w-exsub { display: none; }
  .w-hit { stroke-width: 56; }
  .w-exlabel { font-size: 24px; }
  .w-them { font-size: 24px; }
  .w-yours { font-size: 22px; }
}

/* ── Stacked rungs table on small screens (whitespace cards) ── */

@media (max-width: 52rem) {
  .table-scroll { overflow-x: visible; }
  table.rungs, table.rungs tbody, table.rungs tr, table.rungs th, table.rungs td { display: block; width: auto; }
  table.rungs { min-width: 0; }
  table.rungs thead { display: none; }
  table.rungs tbody tr { padding: 1.5rem 0; margin-bottom: 1rem; }
  table.rungs tbody tr.row-self { background: none; border-left: 3px solid var(--accent); padding-left: 1.25rem; }
  table.rungs tbody tr.row-self th { border-left: 0; padding-left: 0; }
  table.rungs tbody th, table.rungs tbody td,
  table.rungs tbody td:nth-of-type(1), table.rungs tbody td:nth-of-type(2) {
    padding: 0; width: auto; font-size: 0.9375rem;
  }
  table.rungs tbody th { margin-bottom: 0.9rem; }
  table.rungs tbody td {
    display: flex; gap: 0.75rem; align-items: baseline;
    padding-top: 0.5rem; margin-top: 0.5rem; font-size: 0.9375rem;
  }
  table.rungs tbody td::before {
    content: attr(data-label); flex: 0 0 5.5rem;
    font-size: 0.6875rem; font-weight: var(--w-semi);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  }
  table.rungs tbody td[data-label="Who can read your text"] { display: block; }
  table.rungs tbody td[data-label="Who can read your text"]::before { display: block; margin-bottom: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .topbar, .cta-row, .skip, .hero-stage { display: none; }
  body { background: #fff; color: #000; }
}

/* ════════════════════════════════════════════════════════════
   MOTION — same authoring rule as before: every element's
   DEFAULT computed style is its finished state. Hidden entrance
   states exist only inside prefers-reduced-motion: no-preference,
   scroll-reveal hiding additionally under html.js.
   Grammar: everything settles inward or holds still; the one
   thing that ever travels outward is the export.
   ════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  @keyframes rise { from { opacity: 0; transform: translateY(12px); } }
  .hero .eyebrow     { animation: rise 650ms var(--ease-settle) 60ms backwards; }
  .hero h1           { animation: rise 650ms var(--ease-settle) 180ms backwards; }
  .hero .lede        { animation: rise 650ms var(--ease-settle) 320ms backwards; }
  .hero .cta-row     { animation: rise 650ms var(--ease-settle) 440ms backwards; }
  .hero .hero-proof  { animation: rise 650ms var(--ease-settle) 560ms backwards; }
  @keyframes appear { from { opacity: 0; } }
  .hero-stage { animation: appear 1600ms var(--ease-settle) 400ms backwards; }

  .parked, .parked * { animation-play-state: paused !important; }

  html.js .band .wrap > :not(.wards) {
    opacity: 0; transform: translateY(12px);
    transition: opacity 600ms var(--ease-settle), transform 600ms var(--ease-settle);
  }
  html.js .band .wrap > .on:not(.wards) { opacity: 1; transform: none; }

  html.js .band .wrap > .matrix span,
  html.js .band .wrap > .table-scroll tbody tr,
  html.js .band .wrap > .who-grid article,
  html.js .band .wrap > .start-grid .start-card,
  html.js .band .wrap > .limits > * {
    opacity: 0; transition: opacity 500ms var(--ease-settle);
  }
  html.js .band .wrap > .on.matrix span,
  html.js .band .wrap > .on.table-scroll tbody tr,
  html.js .band .wrap > .who-grid.on article,
  html.js .band .wrap > .start-grid.on .start-card,
  html.js .band .wrap > .limits.on > * { opacity: 1; }
  html.js .band .wrap > .matrix div:nth-of-type(2) span  { transition-delay: 80ms; }
  html.js .band .wrap > .matrix div:nth-of-type(3) span  { transition-delay: 160ms; }
  html.js .band .wrap > .table-scroll tbody tr:nth-child(2) { transition-delay: 120ms; }
  html.js .band .wrap > .table-scroll tbody tr:nth-child(3) { transition-delay: 240ms; }
  html.js .band .wrap > .who-grid article:nth-child(2),
  html.js .band .wrap > .limits > :nth-child(2) { transition-delay: 90ms; }
  html.js .band .wrap > .who-grid article:nth-child(3),
  html.js .band .wrap > .limits > :nth-child(3) { transition-delay: 180ms; }
  html.js .band .wrap > .limits > :nth-child(4) { transition-delay: 270ms; }
  html.js .band .wrap > .limits > :nth-child(5) { transition-delay: 360ms; }
  html.js .band .wrap > .limits > :nth-child(6) { transition-delay: 450ms; }
  html.js .band .wrap > .start-grid .start-card:nth-child(2) { transition-delay: 120ms; }

  html.js .band .wrap > .pull { border-left-color: transparent; position: relative; }
  html.js .band .wrap > .pull::before {
    content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px;
    background: var(--accent); transform: scaleY(0); transform-origin: top;
    transition: transform 700ms var(--ease-settle) 150ms;
  }
  html.js .band .wrap > .pull.on::before { transform: scaleY(1); }

  html.js .band .wrap > .proof .cl {
    opacity: 0; transition: opacity 350ms var(--ease-settle);
    transition-delay: calc(300ms + var(--i) * 55ms);
  }
  html.js .band .wrap > .proof.on .cl { opacity: 1; }

  html.js .wards .w-core-disc, html.js .wards .w-you,
  html.js .wards .w-ring, html.js .wards .w-label,
  html.js .wards .w-channel, html.js .wards .w-outside {
    opacity: 0;
    transition: opacity 800ms var(--ease-settle), transform 800ms var(--ease-settle);
  }
  html.js .wards .w-ring { transform: scale(1.045); transform-box: fill-box; transform-origin: center; }
  html.js .wards.in-view .w-core-disc, html.js .wards.in-view .w-you { opacity: 1; }
  html.js .wards.in-view .w-ring   { opacity: var(--op); transform: none; }
  html.js .wards.in-view .w-label  { opacity: 1; }
  html.js .wards.in-view .w-channel{ opacity: 1; }
  html.js .wards.in-view .w-outside{ opacity: 1; }
  html.js .wards.in-view #w-r1, html.js .wards.in-view .w-label-r1 { transition-delay: 250ms; }
  html.js .wards.in-view #w-r2, html.js .wards.in-view .w-label-r2 { transition-delay: 480ms; }
  html.js .wards.in-view #w-r3, html.js .wards.in-view .w-label-r3 { transition-delay: 710ms; }
  html.js .wards.in-view .w-label { transition-delay: 1150ms; }
  html.js .wards.in-view .w-channel { transition-delay: 1400ms; }
  html.js .wards.in-view .w-outside { transition-delay: 1800ms; }

  html.js .wards .w-packet .w-doc { opacity: 0; transform: none; }
  html.js .wards .w-tick { opacity: 0; }

  @keyframes w-drift-rot { to { transform: rotate(-360deg); } }
  .w-drift { transform-box: fill-box; transform-origin: center; animation: w-drift-rot 300s linear infinite; }

  @keyframes w-breathe { to { transform: scale(1.006); } }
  .wards.live .w-rings {
    transform-box: fill-box; transform-origin: center;
    animation: w-breathe 9s ease-in-out infinite alternate;
  }

  @keyframes w-cross {
    0%   { opacity: 0; transform: translate(0, 0); }
    1.5% { opacity: 1; }
    12%  { opacity: 1; transform: translate(var(--dx), var(--dy)); }
    14%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
  }
  .wards.live .w-packet .w-doc { animation: w-cross 24s linear 6s infinite; }
  @keyframes w-tick1 { 0%,2.5% { opacity: 0; } 4% { opacity: 1; } 8%,100% { opacity: 0; } }
  @keyframes w-tick2 { 0%,5%   { opacity: 0; } 6.8% { opacity: 1; } 10.5%,100% { opacity: 0; } }
  @keyframes w-tick3 { 0%,8%   { opacity: 0; } 10% { opacity: 1; } 14%,100% { opacity: 0; } }
  @keyframes w-dock-glow { 0%,9% { opacity: 0.5; } 12% { opacity: 1; } 16%,100% { opacity: 0.5; } }
  .wards.live .w-tick-r1 { animation: w-tick1 24s linear 6s infinite; }
  .wards.live .w-tick-r2 { animation: w-tick2 24s linear 6s infinite; }
  .wards.live .w-tick-r3 { animation: w-tick3 24s linear 6s infinite; }
  .wards.live .w-bracket { animation: w-dock-glow 24s linear 6s infinite; }

  .wards .w-packet-manual { display: block; }
  .wards .w-packet-manual .w-doc { opacity: 0; }
  @keyframes w-cross-once {
    0%  { opacity: 0; transform: translate(0, 0); }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100%{ opacity: 0; transform: translate(var(--dx), var(--dy)); }
  }
  .wards.play-export .w-packet-manual .w-doc { animation: w-cross-once 2800ms var(--ease-settle) both; }
  .wards.play-export .w-packet { visibility: hidden; }

  @keyframes w-probe-out {
    0%  { opacity: 0; transform: translate(0, 0); }
    10% { opacity: 1; }
    55% { transform: translate(var(--dx), var(--dy)); }
    68% { transform: translate(calc(var(--dx) * 0.94), calc(var(--dy) * 0.94)); opacity: 1; }
    100%{ opacity: 0; transform: translate(calc(var(--dx) * 0.94), calc(var(--dy) * 0.94)); }
  }
  @keyframes w-fetch-in {
    0%, 40% { opacity: 0; transform: translate(0, 0); }
    50% { opacity: 1; }
    92% { opacity: 1; }
    100%{ opacity: 0; transform: translate(var(--dx), var(--dy)); }
  }
  @keyframes w-r3-flash { 0%,35% { opacity: 0; } 55% { opacity: 0.35; } 80%,100% { opacity: 0; } }
  .wards.play-deflect .w-probe { animation: w-probe-out 1700ms ease-in-out both; }
  .wards.play-deflect .w-fetch { animation: w-fetch-in 3400ms ease-in-out both; }
  .wards.play-deflect .w-ghost-r3 { animation: w-r3-flash 1700ms ease-in-out both; }

  .btn-primary { transition: transform 140ms var(--ease-settle), background-color 140ms var(--ease-settle); }
  .btn-primary:hover { transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(1px); }

  @keyframes caret { 50% { opacity: 0; } }
  .sample:hover figcaption code::after {
    content: "\258B"; margin-left: 2px; color: var(--amber);
    animation: caret 1.2s steps(2) infinite;
  }

  html:focus-within { scroll-behavior: smooth; }
}

/* ════════════════════════════════════════════════════════════
   THE PRIVACY SIMULATOR — pure CSS state machine. Two native
   checkboxes drive everything through :has(); no script, so it
   works with JS off, keyboard-native, both themes. Sealed = the
   accent; open = amber, because open is the honest warning.
   ════════════════════════════════════════════════════════════ */

.sim { max-width: 62rem; }
.sim-controls { display: flex; gap: 2.5rem 3rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 2rem; }

.sw { display: inline-flex; align-items: center; gap: 0.8rem; cursor: pointer; }
.sw .ck { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-track {
  flex: 0 0 3.1rem; height: 1.7rem; border-radius: 24px; position: relative;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  border: 1px solid var(--rule);
  transition: background-color 200ms var(--ease-settle);
}
.sw-thumb {
  position: absolute; top: 0.2rem; left: 0.2rem; width: 1.3rem; height: 1.3rem;
  border-radius: 50%; background: var(--paper);
  transition: transform 200ms var(--ease-settle);
}
.sw .ck:checked ~ .sw-track { background: var(--accent); }
.sw .ck:checked ~ .sw-track .sw-thumb { transform: translateX(1.4rem); }
.sw .ck:focus-visible ~ .sw-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.sw-text { font-size: var(--text-nav); font-weight: var(--w-semi); letter-spacing: 0.025em; text-transform: uppercase; color: var(--ink-soft); }
.sw:hover .sw-text { color: var(--ink); }

.sim-tier { flex-basis: 100%; margin: 0; max-width: 44rem; min-height: 3em; color: var(--ink-soft); }
.sim-tier span { display: none; }
.sim-tier strong { color: var(--amber); }
.sim:not(:has(.ck-inf:checked)):not(:has(.ck-har:checked)) .t-hosted { display: inline; }
.sim:has(.ck-inf:checked):not(:has(.ck-har:checked))       .t-inf    { display: inline; }
.sim:has(.ck-har:checked):not(:has(.ck-inf:checked))       .t-har    { display: inline; }
.sim:has(.ck-inf:checked):has(.ck-har:checked)             .t-both   { display: inline; }
.sim:has(.ck-inf:checked):has(.ck-har:checked)             .sim-tier strong { color: var(--accent); }

.svg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; }
.svg-scroll .sim-svg, .svg-scroll .ex-wide { min-width: 40rem; margin-bottom: 0; }
.sim-svg { width: 100%; height: auto; display: block; margin-bottom: 1.5rem; }
.sim-svg .e { stroke: var(--rule); stroke-width: 1.5; }
.sim-svg .n rect, .sim-svg .n circle { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.sim-svg .n text {
  font-family: var(--sans); font-size: 15px; font-weight: var(--w-reg);
  text-anchor: middle; fill: var(--ink);
}
.sim-svg .n-store rect, .sim-svg .n-store text { stroke-dasharray: none; }
.sim-svg .stg {
  font-family: var(--sans); font-size: 11.5px; font-weight: var(--w-semi);
  letter-spacing: 0.08em; text-transform: uppercase; text-anchor: middle; fill: var(--muted);
}
.sim-svg .stg-side { text-anchor: end; }

/* harness / model ownership labels */
.sim-svg .lbl-yours { display: none; }
.sim:has(.ck-har:checked) .n-har .lbl-ours  { display: none; }
.sim:has(.ck-har:checked) .n-har .lbl-yours { display: block; }
.sim:has(.ck-inf:checked) .n-mod .lbl-ours  { display: none; }
.sim:has(.ck-inf:checked) .n-mod .lbl-yours { display: block; }
.sim:has(.ck-har:checked) .n-har rect { stroke: var(--accent); }
.sim:has(.ck-inf:checked) .n-mod rect { stroke: var(--accent); }

/* locks: sealed shows the accent closed padlock; open shows the amber one */
.sim-svg .lk rect { fill: none; stroke-width: 1.75; }
.sim-svg .lk path { fill: none; stroke-width: 1.75; }
.sim-svg .lk-closed rect, .sim-svg .lk-closed path { stroke: var(--accent); }
.sim-svg .lk-closed rect { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.sim-svg .lk-open rect, .sim-svg .lk-open path { stroke: var(--amber); }
/* default state (hosted): send/recv/web open, store sealed */
.lk-send .lk-closed, .lk-recv .lk-closed, .lk-web .lk-closed { display: none; }
.sim:has(.ck-har:checked) .lk-send .lk-closed, .sim:has(.ck-har:checked) .lk-web .lk-closed { display: block; }
.sim:has(.ck-har:checked) .lk-send .lk-open,   .sim:has(.ck-har:checked) .lk-web .lk-open   { display: none; }
.sim:has(.ck-inf:checked) .lk-recv .lk-closed { display: block; }
.sim:has(.ck-inf:checked) .lk-recv .lk-open   { display: none; }

/* travelling messages: sealed dot (accent) vs readable document (amber) */
.sim-svg .dot { opacity: 0; }
.sim-svg .d-seal { fill: var(--accent); }
.sim-svg .d-read rect { fill: var(--paper); stroke: var(--amber); stroke-width: 1.5; }
.sim-svg .d-read line { stroke: var(--amber); stroke-width: 1.25; }
.sim-svg .dot .d-seal { display: none; }
.sim:has(.ck-har:checked) .dot-send .d-seal, .sim:has(.ck-har:checked) .dot-sendback .d-seal,
.sim:has(.ck-har:checked) .dot-web .d-seal, .sim:has(.ck-har:checked) .dot-webback .d-seal { display: block; }
.sim:has(.ck-har:checked) .dot-send .d-read, .sim:has(.ck-har:checked) .dot-sendback .d-read,
.sim:has(.ck-har:checked) .dot-web .d-read, .sim:has(.ck-har:checked) .dot-webback .d-read { display: none; }
.sim:has(.ck-inf:checked):has(.ck-har:checked) .dot-recv .d-seal,
.sim:has(.ck-inf:checked):has(.ck-har:checked) .dot-recvback .d-seal { display: block; }
.sim:has(.ck-inf:checked):has(.ck-har:checked) .dot-recv .d-read,
.sim:has(.ck-inf:checked):has(.ck-har:checked) .dot-recvback .d-read { display: none; }
.sim-svg .dot-store .d-seal { display: block; }

/* legend — always-visible text carries the whole story */
.sim-legend { list-style: none; margin: 0 0 1.25rem; padding: 0; max-width: 46rem; }
.sim-legend li { display: flex; gap: 1.25rem; align-items: baseline; padding: 0.55rem 0; }
.sl-stage { flex: 0 0 10.5rem; font-size: var(--text-caption); font-weight: var(--w-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.sim-legend li > span + span { font-size: 0.9375rem; color: var(--ink-soft); }
.sl-sealed::first-letter, .sl-open::first-letter { text-transform: uppercase; }
.sl-open   { --dotc: var(--amber); }
.sl-sealed { --dotc: var(--accent); }
.sl-open::before, .sl-sealed::before {
  content: ""; display: inline-block; width: 0.5rem; height: 0.5rem;
  border-radius: 50%; background: var(--dotc); margin-right: 0.6rem;
  vertical-align: 0.05rem;
}
.sim-legend .sl-yours { display: none; }
/* sending + web follow the harness switch; receiving follows inference; storing shows its harness-side story */
.sim:has(.ck-har:checked) .sim-legend li:nth-child(1) .sl-ours,
.sim:has(.ck-har:checked) .sim-legend li:nth-child(3) .sl-ours,
.sim:has(.ck-har:checked) .sim-legend li:nth-child(4) .sl-ours { display: none; }
.sim:has(.ck-har:checked) .sim-legend li:nth-child(1) .sl-yours,
.sim:has(.ck-har:checked) .sim-legend li:nth-child(3) .sl-yours,
.sim:has(.ck-har:checked) .sim-legend li:nth-child(4) .sl-yours { display: inline; }
.sim-legend .sl-infonly { display: none; }
.sim:has(.ck-inf:checked) .sim-legend li:nth-child(2) .sl-ours { display: none; }
.sim:has(.ck-inf:checked):not(:has(.ck-har:checked)) .sim-legend li:nth-child(2) .sl-infonly { display: inline; }
.sim:has(.ck-inf:checked):has(.ck-har:checked) .sim-legend li:nth-child(2) .sl-yours { display: inline; }

.sim-note { font-size: 0.875rem; color: var(--muted); max-width: 44rem; }
.sim-note a { color: var(--amber); }

@media (max-width: 40rem) {
  .sl-stage { flex-basis: 7.5rem; }
  .sim-legend li { flex-wrap: wrap; gap: 0.35rem 1rem; }
}

/* ── the chain runs: one 9s round trip, forever, calmly ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sim-send-out  { 0%,2% { opacity: 0; transform: translate(0,0); } 5% { opacity: 1; }
    16% { opacity: 1; transform: translate(192px,0); } 19%,100% { opacity: 0; transform: translate(192px,0); } }
  @keyframes sim-web-out   { 0%,20% { opacity: 0; transform: translate(0,0); } 23% { opacity: 1; }
    28% { opacity: 1; transform: translate(0,-70px); } 31%,100% { opacity: 0; transform: translate(0,-70px); } }
  @keyframes sim-web-back  { 0%,31% { opacity: 0; transform: translate(0,-70px); } 34% { opacity: 1; }
    39% { opacity: 1; transform: translate(0,0); } 42%,100% { opacity: 0; transform: translate(0,0); } }
  @keyframes sim-recv-out  { 0%,22% { opacity: 0; transform: translate(0,0); } 25% { opacity: 1; }
    36% { opacity: 1; transform: translate(232px,0); } 39%,100% { opacity: 0; transform: translate(232px,0); } }
  @keyframes sim-mod-think { 0%,40% { opacity: 0.0; } 45% { opacity: 0.5; } 50% { opacity: 0.0; } 100% { opacity: 0; } }
  @keyframes sim-recv-back { 0%,52% { opacity: 0; transform: translate(232px,0); } 55% { opacity: 1; }
    64% { opacity: 1; transform: translate(0,0); } 67%,100% { opacity: 0; transform: translate(0,0); } }
  @keyframes sim-send-back { 0%,66% { opacity: 0; transform: translate(192px,0); } 69% { opacity: 1; }
    78% { opacity: 1; transform: translate(0,0); } 81%,100% { opacity: 0; transform: translate(0,0); } }
  @keyframes sim-store-in  { 0%,82% { opacity: 0; transform: translate(0,0); } 85% { opacity: 1; }
    92% { opacity: 1; transform: translate(0,52px); } 95%,100% { opacity: 0; transform: translate(0,52px); } }
  .sim-svg .dot-send     .dg { animation: sim-send-out  9s linear infinite; }
  .sim-svg .dot-web      .dg { animation: sim-web-out   9s linear infinite; }
  .sim-svg .dot-webback  .dg { animation: sim-web-back  9s linear infinite; }
  .sim-svg .dot-recv     .dg { animation: sim-recv-out  9s linear infinite; }
  .sim-svg .dot-recvback .dg { animation: sim-recv-back 9s linear infinite; }
  .sim-svg .dot-sendback .dg { animation: sim-send-back 9s linear infinite; }
  .sim-svg .dot-store    .dg { animation: sim-store-in  9s linear infinite; }
  .sim-svg .dot { opacity: 1; }
  .sim-svg .dot .dg { opacity: 0; }
}

/* ── E2EE explainer diagrams ─────────────────────────────── */
.ex-duo { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); max-width: 62rem; }
.ex-card { margin: 0; }
.ex-card figcaption {
  font-size: var(--text-caption); font-weight: var(--w-semi);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.75rem;
}
.ex-card p { font-size: 0.9375rem; color: var(--ink-soft); margin-top: 1rem; }
.ex-svg { width: 100%; height: auto; display: block; }
.ex-wide { max-width: 62rem; margin-bottom: 2rem; }
.ex-svg .e { stroke: var(--rule); stroke-width: 1.5; }
.ex-svg .ar { marker-end: none; }
.ex-svg .n rect, .ex-svg .n circle { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.ex-svg .n text { font-family: var(--sans); font-size: 15px; font-weight: var(--w-reg); text-anchor: middle; fill: var(--ink); }
.ex-svg text.sub { font-size: 12px; font-weight: var(--w-light); fill: var(--muted); text-anchor: middle; }
.ex-svg text.mono { font-family: var(--mono); font-size: 11px; fill: var(--amber); text-anchor: middle; }
.ex-svg .n-seal rect { stroke: var(--accent); }
.ex-svg .lkm rect { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 1.75; }
.ex-svg .lkm path { fill: none; stroke: var(--accent); stroke-width: 1.75; }
.ex-svg .docm rect { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.ex-svg .docm line { stroke: var(--muted); stroke-width: 1.25; }
.ex-svg .keyg circle { fill: none; stroke-width: 1.75; }
.ex-svg .keyg path { fill: none; stroke-width: 1.75; }
.ex-svg .key-them circle, .ex-svg .key-them path { stroke: var(--amber); }
.ex-svg .key-you circle, .ex-svg .key-you path { stroke: var(--accent); }
.ex-svg .deny text { font-family: var(--sans); font-size: 13px; font-weight: var(--w-light); fill: var(--muted); text-anchor: middle; }
.ex-svg .deny .x { stroke: var(--amber); stroke-width: 2; }
.ex-svg .allow text { font-family: var(--sans); font-size: 13px; fill: var(--accent); text-anchor: middle; }
.ex-svg .allow .e { stroke: var(--accent); }
.ex-list h3 { font-size: var(--text-heading-2xs); margin-bottom: 1rem; }
.ex-list .sim-legend li { display: block; padding: 0.45rem 0; }
.ex-list .sim-legend span { font-size: 0.9375rem; color: var(--ink-soft); }