:root {
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    --ground:      #F1F3F5;
    --surface:     #FFFFFF;
    --surface-2:   #E7EAED;
    --ink:         #10161C;
    --ink-2:       #495663;
    --ink-3:       #77848F;
    --rule:        #D3D9DE;
    --rule-strong: #B4BDC5;

    --accent:      #B06A18;
    --accent-2:    #8A5210;
    --accent-wash: rgba(176,106,24,0.10);

    --f-int:    #B06A18;
    --f-len:    #35648F;
    --f-str:    #2C7268;
    --f-float:  #6B5CA5;
    --f-enum:   #A04A62;
    --f-bool:   #4A7A2E;

    --ok:       #2E7D4F;
    --wip:      #B07A12;
    --todo:     #A2545B;

    --measure: 66ch;
    --rail: 6.5rem;
    --page: 1120px;

    --s-1: .35rem; --s-2: .6rem;  --s-3: 1rem;   --s-4: 1.6rem;
    --s-5: 2.4rem; --s-6: 3.6rem; --s-7: 5.5rem; --s-8: 8rem;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ground:      #0C1116;
      --surface:     #121A21;
      --surface-2:   #18222B;
      --ink:         #DEE5EB;
      --ink-2:       #9BAAB7;
      --ink-3:       #6B7B89;
      --rule:        #23303A;
      --rule-strong: #33434F;

      --accent:      #F0A94C;
      --accent-2:    #FFC077;
      --accent-wash: rgba(240,169,76,0.12);

      --f-int:    #F0A94C;
      --f-len:    #6FA6D6;
      --f-str:    #4FB8A8;
      --f-float:  #A897E0;
      --f-enum:   #DE8098;
      --f-bool:   #8CC466;

      --ok:       #59B27C;
      --wip:      #D8A63C;
      --todo:     #D9808A;
    }
  }

  :root[data-theme="light"] {
    --ground:#F1F3F5; --surface:#FFFFFF; --surface-2:#E7EAED;
    --ink:#10161C; --ink-2:#495663; --ink-3:#77848F;
    --rule:#D3D9DE; --rule-strong:#B4BDC5;
    --accent:#B06A18; --accent-2:#8A5210; --accent-wash:rgba(176,106,24,0.10);
    --f-int:#B06A18; --f-len:#35648F; --f-str:#2C7268;
    --f-float:#6B5CA5; --f-enum:#A04A62; --f-bool:#4A7A2E;
    --ok:#2E7D4F; --wip:#B07A12; --todo:#A2545B;
  }
  :root[data-theme="dark"] {
    --ground:#0C1116; --surface:#121A21; --surface-2:#18222B;
    --ink:#DEE5EB; --ink-2:#9BAAB7; --ink-3:#6B7B89;
    --rule:#23303A; --rule-strong:#33434F;
    --accent:#F0A94C; --accent-2:#FFC077; --accent-wash:rgba(240,169,76,0.12);
    --f-int:#F0A94C; --f-len:#6FA6D6; --f-str:#4FB8A8;
    --f-float:#A897E0; --f-enum:#DE8098; --f-bool:#8CC466;
    --ok:#59B27C; --wip:#D8A63C; --todo:#D9808A;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: var(--font-mono); }
  p { margin: 0; }
  a { color: inherit; }
  ul, ol { margin: 0; padding: 0; list-style: none; }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

  /* ---------- shell ---------- */

  .topbar {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--ground) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
  }
  .topbar-in {
    max-width: var(--page); margin: 0 auto; padding: .7rem var(--s-4);
    display: flex; align-items: center; gap: var(--s-4);
  }
  .brand {
    font-family: var(--font-mono); font-size: .8125rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
    display: flex; align-items: center; gap: .55rem;
  }
  .brand::before {
    content: ""; width: .5rem; height: .5rem; background: var(--accent);
    display: inline-block;
  }
  .topnav { display: flex; gap: 1.35rem; margin-left: auto; }
  .topnav a {
    font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em;
    text-transform: uppercase; text-decoration: none; color: var(--ink-3);
    transition: color .15s;
  }
  .topnav a:hover { color: var(--ink); }
  @media (max-width: 1000px) { .topnav { display: none; } }

  .theme-btn {
    margin-left: auto; font-family: var(--font-mono); font-size: .6875rem;
    letter-spacing: .12em; text-transform: uppercase;
    background: transparent; color: var(--ink-3);
    border: 1px solid var(--rule); border-radius: 2px;
    padding: .3rem .6rem; cursor: pointer; transition: color .15s, border-color .15s;
  }
  .topnav + .theme-btn { margin-left: 1.35rem; }
  .theme-btn:hover { color: var(--ink); border-color: var(--rule-strong); }

  /* ---------- section scaffold ---------- */

  .band { border-bottom: 1px solid var(--rule); }
  .band-in {
    max-width: var(--page); margin: 0 auto; padding: var(--s-7) var(--s-4);
    display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--s-5);
  }
  @media (max-width: 820px) {
    .band-in { grid-template-columns: minmax(0,1fr); gap: var(--s-4); padding: var(--s-6) var(--s-4); }
  }

  .offset {
    font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-3);
    position: sticky; top: 5rem; align-self: start;
  }
  @media (max-width: 820px) {
    .offset { position: static; }
  }

  .col { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
  .stack { display: flex; flex-direction: column; gap: var(--s-3); }
  .stack-lg { display: flex; flex-direction: column; gap: var(--s-5); }

  .h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700;
    letter-spacing: -.02em; line-height: 1.15;
  }
  .h3 { font-size: .9375rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .h3 em { font-style: normal; color: var(--todo); }
  .lede { font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); max-width: var(--measure); }
  .body { max-width: var(--measure); color: var(--ink-2); }
  .body strong { color: var(--ink); font-weight: 600; }
  .body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
  .body a:hover { border-bottom-color: var(--accent); }

  code { font-family: var(--font-mono); font-size: .875em; }

  /* ---------- hero ---------- */

  .hero { border-bottom: 1px solid var(--rule); }
  .hero-in {
    max-width: var(--page); margin: 0 auto;
    padding: clamp(4rem, 11vw, 8.5rem) var(--s-4) clamp(4rem, 10vw, 7rem);
    display: flex; flex-direction: column; gap: var(--s-4);
  }
  .eyebrow {
    font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .22em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .h1 {
    font-size: clamp(2.4rem, 7vw, 4.5rem); font-weight: 700;
    letter-spacing: -.035em; line-height: 1.02;
  }
  .hero-line {
    font-family: var(--font-mono);
    font-size: clamp(1.125rem, 2.6vw, 1.6rem); line-height: 1.45;
    letter-spacing: -.01em; color: var(--ink);
  }
  .hero-line em { font-style: normal; color: var(--accent); }
  .hero-sub {
    font-size: clamp(1rem, 2vw, 1.1875rem); line-height: 1.55;
    color: var(--ink-2); max-width: 56ch;
  }

  .ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--s-2); }
  .btn {
    font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em;
    text-transform: uppercase; text-decoration: none; font-weight: 600;
    padding: .8rem 1.3rem; border: 1px solid var(--rule-strong);
    display: inline-flex; align-items: center; gap: .55rem;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--ground); }
  .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
  .btn-ghost { background: transparent; color: var(--ink); }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
  .btn .arrow { font-size: .9em; opacity: .8; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn:hover { transform: none; }
  }

  /* ---------- specification first ---------- */

  .statement {
    font-size: clamp(2rem, 6.5vw, 3.6rem); font-weight: 700;
    letter-spacing: -.04em; line-height: 1.02; color: var(--accent);
  }

  .flow-pair { display: grid; gap: var(--s-4); align-items: start; }
  @media (min-width: 880px) { .flow-pair { grid-template-columns: 1.35fr 1fr; } }

  .flow {
    border: 1px solid var(--rule); background: var(--surface);
    padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3);
  }
  .flow-right { border-color: var(--accent); background: var(--accent-wash); }
  .flow-cap {
    font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .flow-right .flow-cap { color: var(--accent); }
  .flow-note { font-size: .875rem; color: var(--ink-3); }

  .chain { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
  .chain li { display: flex; align-items: center; gap: .55rem; }
  .chain li + li::before {
    content: "→"; font-family: var(--font-mono); color: var(--ink-3); font-size: .875rem;
  }
  .node {
    font-family: var(--font-mono); font-size: .8125rem; font-weight: 600;
    letter-spacing: .04em; padding: .45rem .8rem;
    border: 1px solid var(--rule-strong); background: var(--surface);
  }
  .flow-right .node { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .flow-wrong .node { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--todo); }

  .chain-vert { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .chain-vert li { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .chain-vert li + li::before { content: "↓"; }
  .chain-vert .node { min-width: 9rem; text-align: center; }
  .node-accent { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }

  /* ---------- what is cyclone ---------- */

  .what-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  @media (min-width: 780px) { .what-grid { grid-template-columns: 1fr 1fr; } }
  .nots, .only {
    background: var(--surface); padding: var(--s-4);
    display: flex; flex-direction: column; gap: var(--s-3);
  }
  .not-list { display: flex; flex-direction: column; gap: .5rem; }
  .not-list li {
    font-family: var(--font-mono); font-size: .9375rem; color: var(--ink-2);
    display: flex; align-items: baseline; gap: .7rem;
  }
  .not-list .x { color: var(--todo); font-weight: 700; }

  /* ---------- documents ---------- */

  .docs { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  @media (min-width: 900px) { .docs { grid-template-columns: repeat(3, 1fr); } }
  .doc {
    background: var(--surface); padding: var(--s-4); text-decoration: none;
    display: flex; flex-direction: column; gap: .4rem; transition: background .12s;
  }
  .doc:hover { background: var(--surface-2); }
  .doc .id { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; color: var(--accent); }
  .doc .t { font-family: var(--font-mono); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
  .doc .d { font-size: .875rem; color: var(--ink-2); }
  .doc .go {
    margin-top: auto; padding-top: .6rem;
    font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent);
  }

  /* ---------- wire format ---------- */

  .wire { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  @media (min-width: 860px) { .wire { grid-template-columns: repeat(2, 1fr); } }
  .wf { background: var(--surface); padding: var(--s-4); display: flex; flex-direction: column; gap: .7rem; }
  .wf-h { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
  .wf-p { font-size: .9375rem; color: var(--ink-2); }
  .wf-p strong { color: var(--ink); font-weight: 600; }
  .wf-b {
    margin: 0; font-family: var(--font-mono); font-size: .75rem; line-height: 1.75;
    background: var(--surface-2); padding: .85rem; overflow-x: auto; color: var(--ink);
    border-left: 2px solid var(--rule-strong);
  }
  .wf-b .by { color: var(--f-len); }
  .wf-b .bad { color: var(--todo); }
  .wf-n { font-size: .8125rem; color: var(--ink-3); margin-top: auto; }

  .schema {
    margin: 0; font-family: var(--font-mono); font-size: .8125rem; line-height: 1.7;
    background: var(--surface); border: 1px solid var(--rule);
    padding: var(--s-4); overflow-x: auto; color: var(--ink);
  }

  /* ---------- byte map ---------- */

  .map { display: grid; gap: var(--s-4); }
  @media (min-width: 980px) { .map { grid-template-columns: minmax(0, 1fr) 23rem; align-items: start; } }

  .map-panel { border: 1px solid var(--rule); background: var(--surface); }
  .map-head {
    padding: .7rem var(--s-3); border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-3);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  }
  .map-head #mapStatus { color: var(--accent); }
  .map-body { padding: var(--s-3); overflow-x: auto; }
  .rows { min-width: max-content; display: flex; flex-direction: column; gap: .25rem; }
  .row { display: flex; gap: .6rem; align-items: center; }
  .row .addr {
    font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-3);
    width: 4.6rem; flex: none; font-variant-numeric: tabular-nums;
  }
  .row .cells { display: flex; gap: .25rem; }

  .cell {
    font-family: var(--font-mono); font-size: .8125rem; font-weight: 600;
    padding: .5rem .45rem; min-width: 2.4rem; text-align: center;
    border: 1px solid var(--rule); background: var(--surface-2);
    font-variant-numeric: tabular-nums; line-height: 1;
    transition: opacity .12s, outline-color .12s;
  }
  .cell[data-f="int"]   { color: var(--f-int);   border-color: color-mix(in srgb, var(--f-int) 45%, transparent);   background: color-mix(in srgb, var(--f-int) 11%, transparent); }
  .cell[data-f="len"]   { color: var(--f-len);   border-color: color-mix(in srgb, var(--f-len) 45%, transparent);   background: color-mix(in srgb, var(--f-len) 11%, transparent); }
  .cell[data-f="str"]   { color: var(--f-str);   border-color: color-mix(in srgb, var(--f-str) 45%, transparent);   background: color-mix(in srgb, var(--f-str) 11%, transparent); }
  .cell[data-f="float"] { color: var(--f-float); border-color: color-mix(in srgb, var(--f-float) 45%, transparent); background: color-mix(in srgb, var(--f-float) 11%, transparent); }
  .cell[data-f="enum"]  { color: var(--f-enum);  border-color: color-mix(in srgb, var(--f-enum) 45%, transparent);  background: color-mix(in srgb, var(--f-enum) 11%, transparent); }
  .cell[data-f="bool"]  { color: var(--f-bool);  border-color: color-mix(in srgb, var(--f-bool) 45%, transparent);  background: color-mix(in srgb, var(--f-bool) 11%, transparent); }
  .cell.dim { opacity: .25; }
  .cell.hot { outline: 2px solid var(--accent); outline-offset: 1px; }

  .fields { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  .field {
    background: var(--surface); border: 0; width: 100%; text-align: left;
    padding: .55rem .8rem; cursor: pointer; font: inherit; color: inherit;
    display: grid; grid-template-columns: 3.2rem minmax(0,1fr) auto; gap: .7rem; align-items: baseline;
    transition: background .12s;
  }
  .field:hover, .field.active { background: var(--surface-2); }
  .field .fa { font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .field .fn { font-family: var(--font-mono); font-size: .8125rem; font-weight: 600; }
  .field .ft { display: block; font-family: var(--font-sans); font-size: .75rem; font-weight: 400; color: var(--ink-3); }
  .field .fs { font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .field[data-f="int"]   .fn { color: var(--f-int); }
  .field[data-f="len"]   .fn { color: var(--f-len); }
  .field[data-f="str"]   .fn { color: var(--f-str); }
  .field[data-f="float"] .fn { color: var(--f-float); }
  .field[data-f="enum"]  .fn { color: var(--f-enum); }
  .field[data-f="bool"]  .fn { color: var(--f-bool); }

  .total {
    display: flex; justify-content: space-between; padding: .6rem .8rem;
    font-family: var(--font-mono); font-size: .75rem;
    border: 1px solid var(--rule); border-top: 0; background: var(--surface-2);
  }
  .total b { color: var(--accent); }

  /* ---------- test vectors ---------- */

  .tv-legend {
    display: flex; align-items: center; gap: .8rem;
    font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .tv-legend .arrow { color: var(--accent); }

  .tv-group { display: flex; flex-direction: column; gap: var(--s-3); }
  .tv-h {
    font-family: var(--font-mono); font-size: .8125rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
    border-left: 2px solid var(--accent); padding-left: .7rem;
  }
  .tv-note { font-size: .875rem; color: var(--ink-3); max-width: var(--measure); }
  .tv-note strong { color: var(--ink-2); }
  .tv-note code { color: var(--ink-2); }

  .table-scroll { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
  table { border-collapse: collapse; width: 100%; min-width: 640px; }
  thead th {
    text-align: left; font-family: var(--font-mono); font-size: .6875rem;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
    font-weight: 500; padding: .8rem var(--s-3); border-bottom: 1px solid var(--rule-strong);
    white-space: nowrap;
  }
  tbody td { padding: .7rem var(--s-3); border-bottom: 1px solid var(--rule); font-size: .9375rem; vertical-align: baseline; }
  tbody tr:last-child td { border-bottom: 0; }
  tbody tr { transition: background .12s; }
  tbody tr:hover { background: var(--surface-2); }

  .tv .vid {
    font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em;
    color: var(--ink-3); white-space: nowrap; width: 4.5rem;
  }
  .tv .vin { color: var(--ink-2); font-size: .875rem; }
  .tv .vin code { color: var(--ink); }
  .tv .vout {
    font-family: var(--font-mono); font-size: .8125rem; color: var(--f-len);
    font-variant-numeric: tabular-nums; letter-spacing: .04em;
  }
  .tv .vout .nil { color: var(--ink-3); font-style: italic; letter-spacing: 0; }
  .tv .rej {
    font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--todo); font-weight: 600;
  }
  .tv-reject .vout { color: var(--ink-2); }
  .tv-reject .vout code { color: var(--ink-3); }

  /* ---------- conformance ---------- */

  .conform {
    border: 1px solid var(--accent); background: var(--accent-wash);
    padding: var(--s-4); display: grid; gap: var(--s-4); align-items: center;
  }
  @media (min-width: 780px) { .conform { grid-template-columns: 1.2fr auto; } }
  .conform-def { font-size: 1.0625rem; color: var(--ink); max-width: 46ch; }
  .conform-def strong { color: var(--accent); font-weight: 700; }
  .reqs { display: flex; flex-direction: column; gap: .55rem; }
  .reqs li {
    font-family: var(--font-mono); font-size: .875rem; font-weight: 600;
    display: flex; align-items: baseline; gap: .7rem; white-space: nowrap;
  }
  .reqs .tick { color: var(--ok); font-weight: 700; }

  .verdict-line {
    font-family: var(--font-mono); font-size: .8125rem; line-height: 1.8; color: var(--ink-2);
    border: 1px solid var(--rule); background: var(--surface);
    padding: var(--s-3) var(--s-4); max-width: var(--measure);
  }
  .verdict-line strong { color: var(--ink); }

  /* ---------- official tools ---------- */

  .disclaimer {
    border-left: 2px solid var(--todo); padding: .4rem 0 .4rem var(--s-4);
    max-width: var(--measure);
    font-family: var(--font-mono); font-size: .875rem; line-height: 1.7; color: var(--ink-2);
  }
  .disclaimer strong { color: var(--ink); }

  .tools { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  @media (min-width: 860px) { .tools { grid-template-columns: repeat(3, 1fr); } }
  .tool { background: var(--surface); padding: var(--s-4); display: flex; flex-direction: column; gap: .5rem; }
  .tool-t { font-family: var(--font-mono); font-size: .9375rem; font-weight: 700; }
  .tool-d { font-size: .875rem; color: var(--ink-2); }
  .status {
    font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
    text-transform: uppercase; white-space: nowrap; margin-top: auto; padding-top: .4rem;
    display: inline-flex; align-items: center; gap: .5rem;
  }
  .status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
  .status.s-wip  { color: var(--wip); }

  /* ---------- the path ---------- */

  .band-close { border-bottom: 0; }
  .path { display: flex; flex-direction: column; gap: 0; }
  .path li { display: flex; flex-direction: column; }
  .path li + li::before {
    content: "↓"; font-family: var(--font-mono); font-size: .875rem; color: var(--accent);
    padding: .5rem 0 .5rem 1.15rem;
  }
  .step {
    text-decoration: none; border: 1px solid var(--rule); background: var(--surface);
    padding: var(--s-3) var(--s-4);
    display: grid; grid-template-columns: 2.6rem minmax(0,1fr); column-gap: var(--s-3);
    align-items: baseline; transition: background .12s, border-color .12s;
  }
  .step:hover { background: var(--surface-2); border-color: var(--rule-strong); }
  .step-n {
    font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
    color: var(--ink-3); font-variant-numeric: tabular-nums;
  }
  .step-t { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
  .step-d { grid-column: 2; font-size: .875rem; color: var(--ink-2); }
  .step-last { border-color: var(--accent); background: var(--accent-wash); }
  .step-last:hover { background: var(--accent-wash); border-color: var(--accent); }
  .step-last .step-t { color: var(--accent); }

  /* ---------- github ---------- */

  .repos { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  @media (min-width: 780px) { .repos { grid-template-columns: repeat(2, 1fr); } }
  .repo {
    background: var(--surface); padding: var(--s-3) var(--s-4); text-decoration: none;
    display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline;
    column-gap: var(--s-3); transition: background .12s;
  }
  .repo:hover { background: var(--surface-2); }
  .repo-t { font-family: var(--font-mono); font-size: .9375rem; font-weight: 700; }
  .repo-d { grid-column: 1; font-size: .8125rem; color: var(--ink-3); }
  .repo .arrow { grid-row: 1 / span 2; color: var(--accent); font-size: .875rem; }

  /* ---------- philosophy ---------- */

  .principles { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  @media (min-width: 780px) { .principles { grid-template-columns: repeat(2, 1fr); } }
  .principle {
    background: var(--surface); padding: var(--s-3) var(--s-4);
    display: grid; grid-template-columns: 2.2rem minmax(0,1fr); column-gap: var(--s-3);
    align-items: baseline;
  }
  .principle .n {
    font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
    color: var(--ink-3); font-variant-numeric: tabular-nums;
  }
  .principle .t {
    font-family: var(--font-mono); font-size: .9375rem; font-weight: 700; letter-spacing: -.01em;
    display: flex; flex-direction: column; gap: .3rem;
  }
  .principle .d {
    font-family: var(--font-sans); font-size: .875rem; font-weight: 400;
    letter-spacing: 0; color: var(--ink-2);
  }
  .principle.key { background: var(--accent-wash); }
  .principle.key .t { color: var(--accent); }

  .layer-note {
    border-left: 2px solid var(--accent); padding: .4rem 0 .4rem var(--s-4);
    max-width: var(--measure);
    font-family: var(--font-mono); font-size: .875rem; line-height: 1.7; color: var(--ink-2);
  }
  .layer-note strong { color: var(--ink); }

  /* ---------- trade-offs ---------- */

  .tradeoffs { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  @media (min-width: 860px) { .tradeoffs { grid-template-columns: repeat(2, 1fr); } }
  .tradeoff {
    background: var(--surface); padding: var(--s-4);
    display: grid; grid-template-columns: 1.3rem minmax(0,1fr); column-gap: var(--s-3);
  }
  .tradeoff .x { color: var(--todo); font-family: var(--font-mono); font-weight: 700; line-height: 1.5; }
  .tradeoff h4 { font-size: .9375rem; font-weight: 700; margin-bottom: .45rem; }
  .tradeoff p { font-size: .875rem; color: var(--ink-2); }
  .tradeoff strong { color: var(--ink); font-weight: 600; }
  .tradeoff code {
    font-family: var(--font-mono); font-size: .8125em;
    background: var(--surface-2); padding: .05em .35em; border-radius: 2px;
  }

  /* ---------- language switch ---------- */

  .lang-switch {
    display: flex; align-items: center; gap: .35rem; margin-left: 1.35rem;
    font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em;
  }
  .lang-switch a { color: var(--ink-3); text-decoration: none; transition: color .15s; }
  .lang-switch a:hover { color: var(--ink); }
  .lang-switch [aria-current] { color: var(--accent); font-weight: 700; }
  .lang-switch .sep { color: var(--rule-strong); }
  .lang-switch + .theme-btn { margin-left: 1.35rem; }
  @media (max-width: 1000px) { .lang-switch { margin-left: auto; } }

  /* ---------- footer ---------- */

  footer { padding: var(--s-6) var(--s-4) var(--s-7); }
  .foot-in {
    max-width: var(--page); margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between;
    font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-3);
  }
  .foot-in strong { color: var(--ink-2); font-weight: 600; }
  .foot-brand { color: var(--ink); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .foot-copy {
    max-width: var(--page); margin: var(--s-4) auto 0;
    padding-top: var(--s-3); border-top: 1px solid var(--rule);
    font-family: var(--font-mono); font-size: .6875rem;
    letter-spacing: .12em; color: var(--ink-3);
  }
  .foot-copy a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
  .foot-copy a:hover { color: var(--accent); border-bottom-color: var(--accent); }