:root {
      --bg:     #0a0a0c;
      --panel:  #070605;
      --ink:    #f3efe8;
      --prose:  #c6c0b5;
      --mute:   #8a857c;
      --rust:   #e08a4f;
      --rust-2: #f0a268;
      --code:   #e7d9c6;
      --caveat: #d8a986;
      --line:   rgba(243, 239, 232, 0.09);
      --font-display: "Manrope", system-ui, sans-serif;
      --font-sans: "IBM Plex Sans", system-ui, sans-serif;
      --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;
    }
    @font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap;
      src: url("/fonts/manrope-var-subset.woff2") format("woff2"); }
    @font-face { font-family: "IBM Plex Sans"; font-weight: 100 700; font-display: swap;
      src: url("/fonts/plex-sans-var-subset.woff2") format("woff2"); }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { background: var(--bg); }
    body {
      background: var(--bg); color: var(--prose);
      font-family: var(--font-sans); font-size: 16px; line-height: 1.62;
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    }
    ::selection { background: rgba(224, 138, 79, 0.22); }
    a { color: inherit; }

    .wrap {
      max-width: 62rem; margin: 0 auto;
      padding: clamp(30px, 5vw, 64px);
      padding-top: max(clamp(30px, 5vw, 64px), env(safe-area-inset-top));
      padding-bottom: max(clamp(30px, 5vw, 64px), env(safe-area-inset-bottom));
      display: grid; grid-template-columns: 10.5rem minmax(0, 1fr);
      gap: clamp(2rem, 5vw, 4.5rem);
    }

    /* left index: a real table of contents, quiet, sticky */
    .index { position: sticky; top: clamp(30px, 5vw, 64px); align-self: start; }
    .index ol { list-style: none; }
    .index a { display: flex; gap: 0.75ch; font: 12.5px/2.15 var(--font-mono); color: var(--mute);
      text-decoration: none; transition: color 140ms ease; }
    .index a .n { color: var(--rust); opacity: 0.9; }
    .index a:hover { color: var(--ink); }
    .index .idx-foot { margin-top: 20px; font: 11px/1.7 var(--font-mono); color: var(--mute); opacity: 0.6; }

    /* masthead */
    .top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
      margin-bottom: clamp(38px, 7vh, 72px); }
    .lockup { display: inline-flex; align-items: center; text-decoration: none; }
    .lockup svg { display: block; height: 24px; width: auto; }
    .lockup .lk { font-family: var(--font-display); font-weight: 700; font-size: 17px;
      color: var(--rust-2); letter-spacing: -0.02em; line-height: 1; margin-left: 1.5px; margin-top: 1px; }
    .status { font: 12px/1 var(--font-mono); color: var(--mute); letter-spacing: 0.02em; white-space: nowrap; }
    .status .dot { color: var(--rust-2); }

    .def { font-family: var(--font-display); font-weight: 600;
      font-size: clamp(25px, 3.6vw, 37px); line-height: 1.14; letter-spacing: -0.022em;
      color: var(--ink); max-width: 26ch; text-wrap: balance; }
    .def-sub { margin-top: 22px; max-width: 54ch; font-size: 16.5px; }

    .lead-actions { margin-top: 32px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
    .act { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px;
      font: 600 15px/1 var(--font-sans); border-radius: 8px; text-decoration: none;
      background: var(--rust); color: #1a1006;
      transition: background 150ms ease, transform 150ms cubic-bezier(0.22,0.61,0.36,1); }
    .act:hover { background: var(--rust-2); }
    .act:active { transform: scale(0.985); }
    .act .arw { transition: transform 200ms cubic-bezier(0.22,0.61,0.36,1); }
    .act:hover .arw { transform: translateX(3px); }
    .act-note { font: 12.5px/1.5 var(--font-mono); color: var(--mute); }
    .act:focus-visible, .index a:focus-visible, .lockup:focus-visible, .foot a:focus-visible {
      outline: 2px solid var(--rust-2); outline-offset: 3px; border-radius: 3px; }

    /* sections */
    section { border-top: 1px solid var(--line); padding-top: 26px; margin-top: clamp(46px, 8vh, 84px);
      scroll-margin-top: 24px; }
    .shead { display: flex; align-items: baseline; gap: 1.1ch; margin-bottom: 24px; }
    .shead .snum { font: 13px/1 var(--font-mono); color: var(--rust); padding-top: 2px; }
    .shead h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.5vw, 25px);
      letter-spacing: -0.014em; color: var(--ink); }
    .body { max-width: 60ch; }
    .body p + p { margin-top: 1.05em; }
    .body .lead-in { color: var(--ink); }

    code, .m { font-family: var(--font-mono); font-size: 0.9em; color: var(--code); }

    /* 02 comparisons */
    .diffs { max-width: 60ch; }
    .diff { padding: 18px 0; border-bottom: 1px solid var(--line); }
    .diff:first-child { border-top: 1px solid var(--line); }
    .diff .vs { font-family: var(--font-mono); font-size: 13px; color: var(--rust-2); letter-spacing: 0.01em; }
    .diff p { margin-top: 7px; }

    /* 03 protocol steps */
    .steps { max-width: 62ch; }
    .step { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 1.4ch; padding: 16px 0; }
    .step + .step { border-top: 1px solid var(--line); }
    .step .sn { font: 13px/1.7 var(--font-mono); color: var(--rust); }
    .step h3 { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--ink);
      letter-spacing: -0.01em; line-height: 1.7; }
    .step .sd { margin-top: 5px; font-size: 15px; grid-column: 2; }

    /* 04 proof trace */
    .proof-lead { max-width: 58ch; margin-bottom: 22px; }
    .trace { max-width: 40rem; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
      padding: 18px 20px; font: 12.5px/2 var(--font-mono); overflow-x: auto; }
    .trace .cx { color: var(--mute); }
    .trace .cx b { color: var(--prose); font-weight: 400; }
    .trace .rule { height: 1px; background: var(--line); margin: 12px 0; }
    .trace .r { display: grid; grid-template-columns: 8ch 1fr; column-gap: 1.5ch; white-space: nowrap; }
    .trace .r .k { color: var(--rust-2); }
    .trace .r .v { color: var(--code); }
    .trace .r.win .v { color: var(--ink); }
    .trace-note { margin-top: 12px; font: 11.5px/1.6 var(--font-mono); color: var(--mute); opacity: 0.75; }

    /* 05 status table */
    .stat { max-width: 60ch; border-top: 1px solid var(--line); }
    .stat .row { display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem; align-items: baseline;
      padding: 15px 0; border-bottom: 1px solid var(--line); }
    .stat .c { color: var(--ink); font-size: 15.5px; }
    .stat .s { font: 13px/1.5 var(--font-mono); text-align: right; white-space: nowrap; }
    .stat .s.live { color: var(--ink); }
    .stat .s.live::before { content: "\25CF"; color: var(--rust-2); font-size: 9px; vertical-align: 2px; margin-right: 7px; }
    .stat .s.hold { color: var(--caveat); }
    .stat .s.hold::before { content: "\25CB"; color: var(--caveat); font-size: 9px; vertical-align: 2px; margin-right: 7px; }

    /* 06 composition */
    .parts { max-width: 46rem; margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    .part { background: var(--bg); padding: 16px 18px; }
    .part .pk { font: 12px/1.5 var(--font-mono); color: var(--rust-2); }
    .part .pv { margin-top: 4px; font-size: 14.5px; color: var(--prose); }
    @media (max-width: 560px) { .parts { grid-template-columns: 1fr; } }

    /* footer / entry */
    .foot { border-top: 1px solid var(--line); margin-top: clamp(52px, 9vh, 96px); padding-top: 30px;
      display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
    .foot .fid { font: 12.5px/1.7 var(--font-mono); color: var(--mute); }
    .foot .fid b { color: var(--prose); font-weight: 400; }
    .foot a.flink { font: 600 14px/1 var(--font-sans); color: var(--rust-2); text-decoration: none;
      display: inline-flex; align-items: center; gap: 8px; }
    .foot a.flink:hover { color: var(--rust); }

    @media (max-width: 820px) {
      /* minmax(0, 1fr), NOT 1fr: a bare 1fr track keeps its content's intrinsic
         min-width, so a single wide child (the trace, a long token) blows the
         whole column past the viewport. minmax(0,...) lets it shrink; min-width:0
         is the belt-and-braces for the grid item itself. */
      .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
      .doc { min-width: 0; }
      .index { display: none; }
      .trace { font-size: 11px; padding: 16px; }
    }

.truth-intro { margin-bottom: 22px; }