/* ===========================================================================
   ATOMYS_OS — PAGE LAYOUTS (modernized)
   Mobile-first. Single shell, breakpoint-toggled chrome.
   Layers declared in tokens.css: reset, tokens, base, layout, components, pages, utilities.

   Breakpoints (lifted from responsive.html spec):
     base       <  640px   mobile
     sm         ≥  640px   tablet portrait
     md         ≥ 1024px   laptop — full desktop chrome appears here
     lg         ≥ 1440px   wide desktop
   =========================================================================== */

/* ─── @layer layout — the d3-frame OS shell ───────────────────────────── */
@layer layout {
  /* The OS shell. Same element at all sizes; chrome children toggled via @media.
     overflow:hidden is on .ambient (not here) so position:sticky chrome works.
     overflow-x: clip caps the frame at 100% so any rogue descendant (a wide
     code block, an absolute popover, etc.) can't extend the page wider than
     the viewport. `clip` (not `hidden`) preserves position:sticky on children. */
  .d3-frame {
    position: relative;
    min-block-size: 100dvh;
    max-inline-size: 100%;
    overflow-x: clip;
    background: radial-gradient(ellipse at center, #0c0a18 0%, #040308 90%);
    isolation: isolate;
  }

  /* Ambient FX layer (auras + vignette). Pointer-transparent. Clips its own glows. */
  .ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    & .glow-tr {
      position: absolute;
      inset-block-start: -220px;
      inset-inline-end: -220px;
      inline-size: clamp(420px, 60vw, 820px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgb(105 62 254 / 0.38),
        transparent 62%
      );
    }
    & .glow-bl {
      position: absolute;
      inset-block-end: -180px;
      inset-inline-start: -220px;
      inline-size: clamp(320px, 45vw, 620px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgb(211 254 62 / 0.22),
        transparent 62%
      );
    }
    & .vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(
        ellipse at center,
        transparent 40%,
        rgb(0 0 0 / 0.6) 100%
      );
    }
  }

  /* Vertical side rails — desktop only (≥1024px) */
  .d3-rail {
    display: none;
    background: rgb(7 6 13 / 0.6);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    z-index: 4;
    /* Latin runs are rotated 180° so they read top→bottom when tilting head left.
       Japanese characters need NO rotation — vertical-rl already orients them
       correctly. .jp counter-rotates back to upright. */
    & .vtext {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }
    & .vtext .jp {
      display: inline-block;
      transform: rotate(180deg);
    }
    & a.vtext {
      color: inherit;
      text-decoration: none;
      transition:
        color 0.15s,
        text-shadow 0.15s;
    }
    & a.vtext:hover {
      color: var(--lime-hi, var(--lime));
      text-shadow: 0 0 8px color-mix(in oklab, var(--lime) 40%, transparent);
    }
    & .spacer {
      flex: 1;
    }
    & .accent-violet {
      color: var(--violet-hi);
    }
    & .accent-lime {
      color: var(--lime);
    }
  }
  .d3-rail-left {
    color: var(--lime);
    letter-spacing: 0.3em;
  }
  .d3-rail-right {
    color: var(--violet-hi);
    letter-spacing: 0.25em;
  }

  /* Sticky chrome wrapper — keeps topbar + marquee pinned to viewport top.
     Mobile: full-bleed (no inline margin) so the chrome reaches edge-to-edge.
     Desktop: shifted in to clear the side rails (set in the md @media below). */
  .d3-chrome {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    margin-inline: 0;
  }

  /* Top status bar */
  .d3-topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.125rem;
    border-block-end: 1px solid
      color-mix(in oklab, var(--lime) 20%, transparent);
    background: rgb(7 6 13 / 0.85);
    backdrop-filter: blur(6px);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--lime);
    letter-spacing: 0.15em;
    flex-wrap: wrap;
    & .brand {
      color: inherit;
      text-decoration: none;
      transition:
        color 0.15s,
        text-shadow 0.15s;
    }
    & .brand:hover,
    & .brand:focus-visible {
      color: var(--lime-hi, var(--lime));
      text-shadow: 0 0 8px color-mix(in oklab, var(--lime) 40%, transparent);
    }
    & .sep {
      color: var(--ink-3);
    }
    & .title {
      color: var(--ink-1);
    }
    & .spacer {
      flex: 1;
    }
    & .status {
      color: var(--violet-hi);
    }
    /* CPU/MEM/NET — desktop only; too noisy on small screens */
    & .meta {
      display: none;
      color: var(--ink-3);
    }
    /* Language switcher — wrapper holds the flag link + trailing "//" so
       both disappear together when JS leaves it hidden. */
    & .lang-switcher {
      display: inline-flex;
      align-items: center;
      height: 1rem;
      gap: 0.5rem;
    }
    & .lang-switch {
      display: inline-flex;
      align-items: center;
      line-height: 0;
      opacity: 0.6;
      transition:
        opacity 0.15s,
        background-color 0.15s,
        filter 0.15s;
    }
    & .lang-switch:hover,
    & .lang-switch:focus-visible {
      opacity: 1;
      filter: drop-shadow(
        0 0 4px color-mix(in oklab, var(--lime) 35%, transparent)
      );
    }
    & .lang-switch .flag {
      display: none;
      inline-size: 1.75rem;
      block-size: auto;
      vertical-align: middle;
    }
    /* Show only the *target* flag — the one you'd switch to. */
    & .lang-switch[data-target="en"] .flag-en,
    & .lang-switch[data-target="fr"] .flag-fr {
      display: block;
    }
  }

  /* Marquee banner */
  .d3-marquee {
    padding-block: 0.375rem;
    overflow: hidden;
    border-block-end: 1px solid
      color-mix(in oklab, var(--lime) 20%, transparent);
    background: color-mix(in oklab, var(--lime) 4%, rgb(7 6 13 / 0.85));
    backdrop-filter: blur(6px);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--lime);
    letter-spacing: 0.15em;
  }

  /* Main content surface — no top padding so sticky bars (.read-bar,
     .draft-banner) sit flush against the chrome above. Section-level top
     padding (.hero-home, .list-hero, .art-hero, .acc-head, etc.) provides
     the breathing room when there's no sticky bar. */
  .d3-content,
  .d3-colophon {
    position: relative;
    margin-inline: var(--gutter);
    z-index: 3;
  }

  .d3-colophon {
    padding-block-end: calc(var(--gutter-y) + 80px);
  }

  .d3-content {
    min-height: 100vh;
  }

  /* Bottom F-key bar — desktop only (≥1024px) */
  .d3-bottom {
    display: none;
    position: relative;
    z-index: 5;
    margin-inline: var(--gutter);
    padding: 0.5rem 1.125rem;
    border-block-start: 1px solid
      color-mix(in oklab, var(--lime) 20%, transparent);
    background: rgb(7 6 13 / 0.8);
    backdrop-filter: blur(6px);
    align-items: center;
    gap: 0.875rem;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-2);
    letter-spacing: 0.15em;
    flex-wrap: wrap;
    & .spacer {
      flex: 1;
    }
    & .live {
      color: var(--lime);
    }
    & kbd {
      font-family: inherit;
      color: var(--lime);
      padding: 1px 4px;
      border: 1px solid color-mix(in oklab, var(--lime) 35%, transparent);
      border-radius: 3px;
      margin-inline-end: 0.375rem;
    }
  }

  /* Mobile-only bottom tab nav (5 tabs) — visible <1024px, hidden ≥1024px */
  .m-nav {
    position: sticky;
    inset-block-end: 0;
    z-index: 10;
    margin-block-start: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: rgb(7 6 13 / 0.92);
    backdrop-filter: blur(10px);
    border-block-start: 1px solid
      color-mix(in oklab, var(--lime) 22%, transparent);
    padding-block: 0.375rem 0.5rem;
    padding-inline: 0.25rem;
    padding-block-end: max(0.5rem, env(safe-area-inset-bottom));
    & a {
      display: grid;
      grid-template-rows: auto auto;
      justify-items: center;
      gap: 2px;
      padding: 0.5rem 0.25rem;
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-2);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      min-block-size: 44px;
      border-radius: var(--radius-s);
    }
    & a .ic {
      font-size: 1rem;
      line-height: 1;
      color: var(--ink-1);
    }
    & a[aria-current="page"] {
      color: var(--lime);
    }
    & a[aria-current="page"] .ic {
      color: var(--lime);
      text-shadow: 0 0 8px var(--lime);
    }
    & a:hover {
      color: var(--lime-hi);
    }
  }

  /* Show desktop chrome at md+ */
  @media (min-width: 1024px) {
    .d3-rail {
      position: absolute;
      inset-block: 0;
      inline-size: var(--rail-w);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-block: 14px;
      z-index: 11; /* sit above sticky chrome */
    }
    .d3-rail-left {
      inset-inline-start: 0;
      border-inline-end: 1px solid
        color-mix(in oklab, var(--lime) 15%, transparent);
    }
    .d3-rail-right {
      inset-inline-end: 0;
      border-inline-start: 1px solid
        color-mix(in oklab, var(--violet) 18%, transparent);
    }
    /* Chrome and footer hug the rails edge-to-edge; only the content body
       gets breathing room so it never touches the rails. */
    .d3-chrome,
    .d3-bottom {
      margin-inline: var(--rail-w);
    }
    .d3-content,
    .d3-colophon {
      margin-inline: calc(var(--rail-w) + clamp(0.75rem, 1.5vw, 1.5rem));
    }
    .d3-topbar {
      gap: 0.5rem;
    }
    .d3-topbar .meta {
      display: inline;
    }
    .d3-bottom {
      display: flex;
    }
    .m-nav {
      display: none;
    }
  }
}

/* ─── @layer components — shared building blocks ───────────────────────── */
@layer components {
  /* Window / panel — every "card" on the home page is one of these */
  .win {
    container-type: inline-size;
    border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
    border-radius: var(--radius-l);
    background: rgb(12 10 22 / 0.7);
    overflow: hidden;
  }
  .win.lime {
    border-color: color-mix(in oklab, var(--lime) 35%, transparent);
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--lime) 8%, transparent),
      rgb(12 10 22 / 0.65)
    );
  }
  .win.rabbit {
    border: 1px dashed color-mix(in oklab, var(--danger) 40%, transparent);
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--danger) 4%, transparent),
      rgb(12 10 22 / 0.7)
    );
  }
  .win.dispatch {
    border-color: color-mix(in oklab, var(--lime) 40%, transparent);
    background: linear-gradient(
      135deg,
      color-mix(in oklab, var(--lime) 8%, transparent),
      color-mix(in oklab, var(--violet) 8%, transparent)
    );
  }
  /* Featured card — extra ambient lime glow distinguishes it from .win.lime */
  .win.featured {
    border-color: color-mix(in oklab, var(--lime) 45%, transparent);
    box-shadow: 0 0 48px color-mix(in oklab, var(--lime) 6%, transparent);
  }

  /* Terminal title-bar (the "macOS dot" chrome inside each win) */
  .tbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-2);
    border-block-end: 1px solid rgb(255 255 255 / 0.06);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    flex-wrap: wrap;
    & .dot {
      inline-size: 10px;
      block-size: 10px;
      border-radius: 50%;
    }
    & .dot.r {
      background: var(--danger);
    }
    & .dot.y {
      background: #ffb84f;
    }
    & .dot.g {
      background: var(--lime);
    }
    & .path {
      margin-inline-start: 0.5rem;
      min-inline-size: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    & .right {
      margin-inline-start: auto;
      color: var(--lime);
    }
    & .right.violet {
      color: var(--violet-hi);
    }
    & .right.rabbit {
      color: var(--danger-hi);
    }
  }

  /* Section header (cmd line + rule + title) */
  .section-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-block: 2rem 1rem;
    flex-wrap: wrap;
    & .cmd {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.22em;
      white-space: nowrap;
    }
    & .rule {
      flex: 1;
      block-size: 1px;
      min-inline-size: 2rem;
      background: linear-gradient(
        90deg,
        color-mix(in oklab, var(--lime) 30%, transparent),
        transparent
      );
    }
    & .t {
      font-family: var(--font-sans);
      font-size: var(--fs-h3);
      font-weight: 700;
      color: var(--ink-0);
      letter-spacing: -0.02em;
    }
    & .n {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.2em;
    }
  }

  /* Post-list row — uses container queries to reflow inside narrow win cards */
  .prow {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    grid-template-areas:
      "i  t  r"
      ".  tg r";
    column-gap: 0.75rem;
    row-gap: 2px;
    align-items: center;
    padding: 0.75rem 1.125rem;
    & + .prow {
      border-block-start: 1px solid rgb(255 255 255 / 0.05);
    }
    & .i {
      grid-area: i;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
    }
    & .t {
      grid-area: t;
      font-family: var(--font-sans);
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--ink-0);
    }
    & .tg {
      grid-area: tg;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--violet-hi);
    }
    & .r {
      grid-area: r;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      text-align: end;
    }
  }
  /* Wider container = single-row layout */
  @container (min-width: 30rem) {
    .prow {
      grid-template-columns: 3.5rem 1fr 7rem 4rem;
      grid-template-areas: "i t tg r";
    }
  }

  /* Comment row */
  .crow {
    padding-block: 0.875rem;
    & + .crow {
      border-block-start: 1px solid rgb(255 255 255 / 0.05);
    }
    & .h {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      margin-block-end: 0.375rem;
      flex-wrap: wrap;
    }
    & .h .who {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-0);
      font-weight: 600;
    }
    & .h .w {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
    }
    & .h .on {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--violet-hi);
      margin-inline-start: auto;
    }
    & .b {
      font-family: var(--font-sans);
      font-size: var(--fs-ui);
      line-height: 1.55;
      color: var(--ink-1);
      padding-inline-start: 1.875rem;
    }
  }

  /* Tier card (membership preview on home) */
  .tier {
    position: relative;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-s);
    border: 1px solid rgb(255 255 255 / 0.08);
    background: rgb(7 6 13 / 0.5);
    & .lbl {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.2em;
    }
    & .price {
      font-family: var(--font-sans);
      font-size: 1.375rem;
      font-weight: 700;
      color: var(--ink-0);
      margin-block-start: 4px;
      letter-spacing: -0.02em;
    }
    & .price small {
      font-size: var(--fs-meta);
      color: var(--ink-3);
      font-weight: 400;
      margin-inline-start: 3px;
    }
    & .d {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-2);
      margin-block-start: 4px;
    }
    & .pop {
      position: absolute;
      inset-block-start: -8px;
      inset-inline-end: 10px;
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--bg-0);
      background: var(--lime);
      padding: 2px 6px;
      border-radius: 3px;
      letter-spacing: 0.15em;
    }
  }
  .tier.hot {
    border-color: color-mix(in oklab, var(--violet) 50%, transparent);
    background: color-mix(in oklab, var(--violet) 8%, transparent);
  }

  /* Tip button */
  .tip-btn {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    background: rgb(7 6 13 / 0.6);
    border: 1px solid color-mix(in oklab, var(--lime) 25%, transparent);
    color: var(--ink-1);
    min-block-size: 36px;
    transition:
      background var(--t-fast),
      color var(--t-fast),
      border-color var(--t-fast);
  }
  .tip-btn:hover {
    color: var(--lime);
    border-color: var(--lime);
  }
  .tip-btn[aria-pressed="true"] {
    background: color-mix(in oklab, var(--lime) 15%, transparent);
    border-color: var(--lime);
    color: var(--lime);
  }

  /* Waveform */
  .wfm {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    block-size: 28px;
    & i {
      display: block;
      inline-size: 3px;
      border-radius: 1px;
    }
    & i.on {
      background: var(--lime);
      box-shadow: 0 0 6px var(--lime);
    }
    & i.off {
      background: var(--ink-3);
    }
  }

  /* "Hole" card (rabbit-hole grid) */
  .hole {
    container-type: inline-size;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-m);
    background: rgb(7 6 13 / 0.6);
    border: 1px solid color-mix(in oklab, var(--danger) 18%, transparent);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    transition:
      border-color var(--t-fast),
      transform var(--t-fast);
    & .meta {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
    }
    & .meta .id {
      color: var(--danger-hi);
      letter-spacing: 0.15em;
    }
    & .meta .spacer {
      flex: 1;
    }
    & .status-pill {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      letter-spacing: 0.15em;
      border-radius: 3px;
      padding: 1px 6px;
      border: 1px solid currentColor;
    }
    & .title {
      font-family: var(--font-sans);
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--ink-0);
      line-height: 1.25;
    }
    & .stats {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      flex-wrap: wrap;
    }
    & .stats .tag {
      color: var(--violet-hi);
    }
    & .stats .pct {
      margin-inline-start: auto;
    }
    & .bar {
      block-size: 3px;
      border-radius: 2px;
      background: rgb(255 255 255 / 0.06);
      overflow: hidden;
    }
    & .bar > span {
      display: block;
      block-size: 100%;
      transition: inline-size var(--t-base) var(--ease);
    }
  }
  .hole:hover {
    border-color: var(--danger-hi);
    transform: translateY(-1px);
  }
  .hole.is-active {
    --hole-c: var(--lime);
  }
  .hole.is-paused {
    --hole-c: var(--ink-2);
  }
  .hole.is-done {
    --hole-c: var(--violet-hi);
  }
  .hole.is-recurring {
    --hole-c: var(--danger-hi);
  }
  .hole .status-pill,
  .hole .pct,
  .hole .bar > span {
    color: var(--hole-c);
  }
  .hole .bar > span {
    background: var(--hole-c);
    box-shadow: 0 0 8px var(--hole-c);
  }

  /* Status pill (shared with proc table later) */
  .status-pill {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.15em;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
  }
  .status-pill.is-live {
    color: var(--lime);
    border: 1px solid var(--lime);
  }
  .status-pill.is-wip {
    color: var(--violet-hi);
    border: 1px solid var(--violet-hi);
  }
  .status-pill.is-idle {
    color: var(--ink-2);
    border: 1px solid var(--ink-2);
  }
  .status-pill.is-archived {
    color: var(--danger);
    border: 1px solid var(--danger);
  }

  /* Inline subscribe-form chrome */
  .sub-input {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    border: 1px solid color-mix(in oklab, var(--lime) 35%, transparent);
    border-radius: var(--radius-m);
    padding: 0.375rem;
    background: rgb(7 6 13 / 0.6);
    & input {
      flex: 1;
      min-inline-size: min(12rem, 100%);
      background: transparent;
      border: 0;
      outline: none;
      padding: 0.5rem 0.75rem;
      font-family: var(--font-mono);
      font-size: var(--fs-ui);
      color: var(--ink-0);
    }
    & input::placeholder {
      color: var(--ink-2);
    }
    &:focus-within {
      border-color: var(--lime);
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--lime) 25%, transparent);
    }
    & .btn-lime {
      margin: 0;
    }
  }

  /* Members-form state messaging — invisible at rest; revealed by Ghost's
     auto-applied .loading / .success / .error class on the form element. */
  .form-feedback {
    display: none;
    margin: 0.625rem 0 0;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.04em;
  }
  form.loading .form-feedback.loading,
  form.success .form-feedback.success,
  form.error .form-feedback.error {
    display: block;
  }
  .form-feedback.loading {
    color: var(--ink-2);
  }
  .form-feedback.success {
    color: var(--lime);
  }
  .form-feedback.error {
    color: var(--danger);
  }

  /* Newsletter checkbox list — used by /subscribe/. Sits inside .email-card. */
  .nl-picks {
    display: grid;
    gap: 0.375rem;
    margin: 0.75rem 0 0;
  }
  .nl-picks > legend {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.12em;
    color: var(--ink-2);
    margin-block-end: 0.375rem;
    text-transform: uppercase;
  }
  .nl-pick {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--fs-ui);
    color: var(--ink-1);
    cursor: pointer;
  }
  .nl-pick > input[type="checkbox"] {
    accent-color: var(--lime);
    inline-size: 0.95rem;
    block-size: 0.95rem;
  }
}

/* ─── @layer pages — page-specific layouts ─────────────────────────────── */
@layer pages {
  /* === HOME =========================================================== */
  .home-page {
    display: grid;
    gap: var(--gutter-y);
  }

  .hero-home {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Slope tuned to hit max at 1024px (4.7vw * 10.24px = ~48px). */
    padding-block: clamp(1.5rem, 4.7vw, 3rem) clamp(1rem, 2.4vw, 1.5rem);
  }
  .hero-home .kpi-bar {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--lime);
    letter-spacing: 0.25em;
    flex-wrap: wrap;
  }
  .hero-home .kpi-bar .div {
    flex: 1;
    block-size: 1px;
    min-inline-size: 2rem;
    background: linear-gradient(
      90deg,
      color-mix(in oklab, var(--lime) 35%, transparent),
      transparent
    );
  }
  .hero-home .kpi-bar .dim {
    color: var(--ink-3);
  }
  .hero-home .kpi-bar .v {
    color: var(--violet-hi);
  }
  .hero-home .kpi-bar .r {
    color: var(--danger-hi);
  }
  .hero-home .kpi-bar .uptime {
    color: var(--ink-2);
  }

  .hero-h1 {
    font-family: var(--font-sans);
    font-size: var(--fs-hero-xl);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.92;
    text-wrap: balance;
    & .row {
      display: block;
    }
    & .emj {
      font-size: 0.7em;
      margin-inline-end: 0.15em;
    }
    & .ink {
      color: var(--ink-0);
    }
    & .lime {
      color: var(--lime);
    }
    & .violet {
      color: var(--violet-hi);
    }
  }

  .hero-sub {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: end;
    & p {
      font-family: var(--font-sans);
      font-size: var(--fs-lede);
      line-height: 1.5;
      color: var(--ink-1);
      max-inline-size: 42rem;
      text-wrap: pretty;
    }
    & .actions {
      display: flex;
      flex-direction: column;
      gap: 0.875rem;
      align-items: flex-start;
    }
    & .actions .btns {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    & .actions .hint {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.2em;
    }
    & .actions .hint kbd {
      color: var(--lime);
      font-family: inherit;
    }
  }
  @media (min-width: 1024px) {
    .hero-sub {
      grid-template-columns: 1.4fr 1fr;
      gap: 3rem;
      & .actions {
        align-items: flex-end;
      }
      & .actions .btns {
        justify-content: flex-end;
      }
      & .actions .hint {
        text-align: end;
      }
    }
  }

  /* Featured transmission — image hero + text body */
  .featured-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  .featured-banner {
    position: relative;
    min-block-size: 220px;
    aspect-ratio: 16 / 9;
    background: linear-gradient(
      135deg,
      #1a0f4e 0%,
      var(--violet-lo) 40%,
      var(--violet) 70%,
      var(--lime) 100%
    );
    overflow: hidden;
  }
  .featured-banner::before,
  .featured-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .featured-banner::before {
    background: repeating-linear-gradient(
      0deg,
      rgb(0 0 0 / 0.3) 0 2px,
      transparent 2px 5px
    );
  }
  .featured-banner::after {
    background: repeating-linear-gradient(
      90deg,
      rgb(255 255 255 / 0.08) 0 1px,
      transparent 1px 40px
    );
  }
  .featured-banner .pixel-grid {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(6, clamp(14px, 2.5vw, 22px));
    gap: 4px;
  }
  .featured-banner .pixel-grid i {
    display: block;
    aspect-ratio: 1;
    border-radius: 3px;
    background: rgb(255 255 255 / 0.1);
  }
  .featured-banner .pixel-grid i.on {
    background: var(--bg-0);
    box-shadow: inset 0 0 6px color-mix(in oklab, var(--lime) 40%, transparent);
  }
  .featured-banner .badge {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--bg-0);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: var(--lime);
    padding: 4px 8px;
    border-radius: 4px;
  }
  .featured-banner .stamp {
    position: absolute;
    inset-block-end: 14px;
    inset-inline-end: 14px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: rgb(7 6 13 / 0.85);
    letter-spacing: 0.2em;
  }
  .featured-body {
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.875rem;
    & .tags {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    /* :where() — works whether the title is h2 or h3 (semantic level depends on
       outer section heading) without bumping selector specificity. */
    & :where(h2, h3) {
      font-family: var(--font-sans);
      font-size: var(--fs-h2);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.05;
      color: var(--ink-0);
      text-wrap: balance;
    }
    & :where(h2, h3) .lime {
      color: var(--lime);
    }
    & p {
      font-size: var(--fs-body);
      line-height: 1.6;
      color: var(--ink-1);
    }
    & p .lime {
      color: var(--lime);
    }
    & .byline {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      flex-wrap: wrap;
      & .who {
        color: var(--ink-0);
      }
      & .dot {
        color: var(--ink-3);
      }
      & .read {
        color: var(--lime);
        margin-inline-start: auto;
      }
    }
  }
  @media (min-width: 1024px) {
    .featured-grid {
      grid-template-columns: 1.1fr 1fr;
    }
    .featured-banner {
      aspect-ratio: auto;
      min-block-size: 340px;
    }
  }

  /* Latest + obsessed + randomizer trio */
  .latest-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }
  .win-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  @media (min-width: 1024px) {
    .latest-grid {
      grid-template-columns: 2fr 1fr;
    }
  }

  .obs-body {
    padding: 1.125rem 1.25rem;
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.15em;
    }
    & .head {
      font-family: var(--font-sans);
      font-size: 1.375rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-block-start: 0.5rem;
    }
    & .bars {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-1);
      margin-block-start: 0.875rem;
      line-height: 1.85;
    }
    & .bars .muted {
      color: var(--ink-3);
    }
  }

  .rand-body {
    padding: 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--violet-hi);
      letter-spacing: 0.15em;
    }
    & .head {
      font-family: var(--font-sans);
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink-0);
    }
    & .desc {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      line-height: 1.55;
    }
  }

  .all-link {
    padding: 0.75rem 1.125rem;
    border-block-start: 1px dashed
      color-mix(in oklab, var(--violet) 25%, transparent);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--lime);
    display: flex;
    gap: 0.625rem;
  }

  /* Tag cloud */
  .tag-cloud {
    padding: 1.5rem 1.625rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1rem;
    align-items: baseline;
    & .tag-item {
      font-family: var(--font-sans);
      font-weight: 600;
      cursor: pointer;
      letter-spacing: -0.02em;
    }
    & .tag-item .n {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      margin-inline-start: 3px;
      font-weight: 400;
      letter-spacing: 0.1em;
    }
    & .tag-item.v {
      color: var(--violet-hi);
    }
    & .tag-item.l {
      color: var(--lime-hi);
    }
    & .tag-item.r {
      color: var(--danger-hi);
    }
  }

  /* Members area trio */
  .members-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 1024px) {
    .members-grid {
      grid-template-columns: 1.3fr 1fr;
    }
  }

  .members-body {
    padding: 1.5rem 1.625rem;
    & .head {
      font-family: var(--font-sans);
      font-size: 1.375rem;
      font-weight: 700;
      color: var(--ink-0);
      letter-spacing: -0.02em;
      margin-block-end: 0.875rem;
    }
    & p {
      font-size: var(--fs-ui);
      line-height: 1.6;
      color: var(--ink-2);
      margin: 0 0 1.125rem;
      max-inline-size: 30rem;
    }
    & p .lime {
      color: var(--lime);
    }
    & .avatar-wall {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-block-end: 1.25rem;
    }
    & .avatar-wall i {
      inline-size: 28px;
      block-size: 28px;
      border-radius: 6px;
      image-rendering: pixelated;
      display: block;
    }
    & .avatar-wall .more {
      inline-size: 28px;
      block-size: 28px;
      border-radius: 6px;
      display: grid;
      place-items: center;
      border: 1px dashed color-mix(in oklab, var(--lime) 40%, transparent);
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
    }
    & .tiers {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.625rem;
    }
    & .cta {
      margin-block-start: 1rem;
      display: flex;
      gap: 0.625rem;
      align-items: center;
      flex-wrap: wrap;
    }
    & .cta .note {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.15em;
    }
  }

  .tips-body {
    padding: 1.125rem 1.25rem;
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.2em;
      margin-block-end: 0.5rem;
    }
    & .head {
      font-family: var(--font-sans);
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--ink-0);
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-block-end: 0.75rem;
    }
    & .row {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-block-end: 0.625rem;
    }
    & .note {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      line-height: 1.6;
    }
  }

  .now-playing {
    padding: 1.125rem 1.25rem;
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--violet-hi);
      letter-spacing: 0.2em;
      margin-block-end: 0.625rem;
    }
    & .row {
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: 0.625rem;
      align-items: center;
    }
    & .row .cover {
      inline-size: 40px;
      block-size: 40px;
      border-radius: 6px;
      background: linear-gradient(135deg, var(--violet), var(--lime));
      display: grid;
      place-items: center;
      font-family: var(--font-mono);
      font-size: 1rem;
      color: var(--bg-0);
      font-weight: 700;
    }
    & .row .meta {
      min-inline-size: 0;
    }
    & .row .meta .t {
      font-family: var(--font-sans);
      font-size: var(--fs-ui);
      font-weight: 600;
      color: var(--ink-0);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    & .row .meta .a {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-2);
    }
    & .progress {
      margin-block-start: 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.625rem;
    }
    & .progress .time {
      margin-inline-start: auto;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
    }
  }

  /* Holes grid */
  .holes-grid {
    container-type: inline-size;
    padding: 1.125rem 1.25rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  @container (min-width: 30rem) {
    .holes-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  @container (min-width: 56rem) {
    .holes-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Dispatches grid */
  .dispatch-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 1024px) {
    .dispatch-grid {
      grid-template-columns: 1.1fr 1fr;
    }
  }

  .dispatch-body {
    padding: 1.5rem 1.75rem;
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.2em;
      margin-block-end: 0.75rem;
    }
    & h3 {
      font-family: var(--font-sans);
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.05;
      color: var(--ink-0);
      margin-block-end: 0.75rem;
      text-wrap: balance;
    }
    & p {
      font-size: var(--fs-sm);
      line-height: 1.55;
      color: var(--ink-1);
      max-inline-size: 28rem;
      margin-block-end: 1.375rem;
    }
    & .form {
      max-inline-size: 32rem;
    }
    & .privacy {
      margin-block-start: 1rem;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.15em;
    }
    & .privacy .v {
      color: var(--violet-hi);
    }
  }

  /* Guestbook */
  .guestbook-body {
    padding: 1rem 1.25rem;
    & .leave {
      margin-block-start: 0.625rem;
      padding-block-start: 0.75rem;
      border-block-start: 1px dashed
        color-mix(in oklab, var(--violet) 25%, transparent);
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
  }
  .guestbook-body .crow .h .px-av {
    inline-size: 20px;
    block-size: 20px;
    border-radius: 4px;
  }

  /* Colophon */
  .colo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
  }
  .colo-grid h4 {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--lime);
    letter-spacing: 0.22em;
    margin-block-end: 0.75rem;
  }
  .colo-grid a {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-1);
    cursor: pointer;
    letter-spacing: 0.04em;
    display: block;
    margin-block-end: 0.5rem;
  }
  .colo-grid a:hover {
    color: var(--lime);
  }
  .colo-brand {
    & .row {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      margin-block-end: 0.75rem;
    }
    & .logo {
      inline-size: 28px;
      block-size: 28px;
      border-radius: 7px;
      background: linear-gradient(135deg, var(--violet), var(--lime));
      display: grid;
      place-items: center;
      font-family: var(--font-mono);
      font-weight: 700;
      color: var(--bg-0);
      font-size: var(--fs-sm);
    }
    & .name {
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: var(--fs-sm);
      letter-spacing: 0.08em;
      color: var(--ink-0);
    }
    & .name .os {
      color: var(--violet-hi);
    }
    & .tag {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      line-height: 1.7;
    }
    & .tag .since {
      color: var(--ink-3);
    }
  }
  .colo-footer {
    padding: 0.875rem 1.75rem;
    border-block-start: 1px dashed
      color-mix(in oklab, var(--violet) 25%, transparent);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-3);
    letter-spacing: 0.18em;
    flex-wrap: wrap;
    & .gen {
      margin-inline-start: auto;
      color: var(--lime);
    }
  }
  @media (min-width: 640px) {
    .colo-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (min-width: 1024px) {
    .colo-grid {
      grid-template-columns: 1.2fr 1fr 1fr 1fr;
    }
  }

  /* ─── 404 / KERNEL PANIC ============================================== */
  .err-hero {
    padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
    & .sig {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--danger);
      letter-spacing: 0.3em;
      margin-block-end: 2rem;
    }
    & .big {
      font-family: var(--font-sans);
      font-size: var(--fs-display);
      font-weight: 800;
      line-height: 0.85;
      letter-spacing: -0.06em;
      margin: 0;
      background: linear-gradient(180deg, var(--danger) 0%, var(--violet) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    & h1 {
      font-family: var(--font-sans);
      font-size: var(--fs-h1);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1;
      margin-block: 1.5rem 1rem;
      color: var(--ink-0);
      text-wrap: balance;
    }
    & h1 .lime {
      color: var(--lime);
    }
    /* Only the descriptive paragraph gets the narrow max-width;
       .big (404) and .sig (status line) span the full hero width and
       center via the parent's text-align. */
    & p:not(.big):not(.sig) {
      font-size: var(--fs-lede);
      color: var(--ink-1);
      max-inline-size: 35rem;
      margin-inline: auto;
      margin-block-end: 2.5rem;
      line-height: 1.55;
      text-wrap: pretty;
    }
  }

  .stack-wrap {
    padding-block-end: 2.5rem;
  }
  .stack-box {
    border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent);
    border-radius: var(--radius-l);
    background: rgb(12 10 22 / 0.7);
    overflow: hidden;
    max-inline-size: 48rem;
    margin-inline: auto;
  }
  .stack-box .tbar .right.fatal {
    color: var(--danger-hi);
  }
  .stack-body {
    padding: 1.125rem 1.375rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.9;
    color: var(--ink-1);
    & .fatal {
      color: var(--danger-hi);
    }
    & .info {
      color: var(--violet-hi);
      margin-block-start: 0.75rem;
    }
    & .step {
      color: var(--ink-2);
    }
    & .ok {
      color: var(--lime);
      margin-block-start: 0.75rem;
    }
  }

  .recover-wrap {
    padding-block-end: 3.75rem;
    max-inline-size: 48rem;
    margin-inline: auto;
  }
  .recover-label {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--lime);
    letter-spacing: 0.25em;
    margin-block-end: 1.25rem;
  }
  .recover-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }
  @media (min-width: 640px) {
    .recover-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .recover-card {
    padding: 1.125rem 1.25rem;
    border-radius: var(--radius-l);
    background: rgb(12 10 22 / 0.7);
    border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
    cursor: pointer;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition:
      border-color var(--t-fast),
      transform var(--t-fast);
    & .cmd {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.1em;
    }
    & .label {
      font-family: var(--font-sans);
      font-size: 1.0625rem;
      font-weight: 600;
      margin: 0.375rem 0 0.25rem;
      color: var(--ink-0);
    }
    & .desc {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-3);
      line-height: 1.5;
    }
  }
  .recover-card:hover {
    border-color: var(--violet-hi);
    transform: translateY(-1px);
  }

  .easter-egg {
    margin-block-start: 1.75rem;
    padding: 1rem 1.25rem;
    border: 1px dashed color-mix(in oklab, var(--lime) 30%, transparent);
    border-radius: var(--radius-m);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-2);
    line-height: 1.7;
    background: color-mix(in oklab, var(--lime) 3%, transparent);
    & .hi {
      color: var(--lime);
    }
  }

  /* ─── SUBSCRIBE / FEED ================================================ */
  .sub-hero {
    padding-block: clamp(2rem, 5.5vw, 3.5rem) clamp(1rem, 2vw, 2rem);
    & .prompt {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.25em;
      margin-block-end: 1rem;
    }
    & h1 {
      font-family: var(--font-sans);
      font-size: var(--fs-hero-lg);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 0.95;
      margin: 0;
      text-wrap: balance;
    }
    & h1 .lime {
      color: var(--lime);
    }
    & p {
      font-size: var(--fs-lede);
      color: var(--ink-1);
      max-inline-size: 38rem;
      margin: 1.25rem 0 0;
      line-height: 1.5;
      text-wrap: pretty;
    }
  }

  .sub-grid {
    padding-block: 2rem 2.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  @media (min-width: 768px) {
    .sub-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .feed-card {
    border-radius: var(--radius-l);
    overflow: hidden;
    container-type: inline-size;
  }
  .feed-card.is-rss {
    border: 1px solid color-mix(in oklab, var(--lime) 35%, transparent);
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--lime) 8%, transparent),
      rgb(12 10 22 / 0.6)
    );
  }
  .feed-card.is-json {
    border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent);
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--violet) 8%, transparent),
      rgb(12 10 22 / 0.6)
    );
  }
  .feed-body {
    padding: 1.5rem 1.625rem;
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      letter-spacing: 0.2em;
      margin-block-end: 0.75rem;
    }
    & h3 {
      font-family: var(--font-sans);
      font-size: var(--fs-h3);
      font-weight: 700;
      color: var(--ink-0);
      letter-spacing: -0.02em;
      margin: 0 0 1rem;
    }
    & p {
      font-size: var(--fs-body);
      line-height: 1.6;
      color: var(--ink-1);
      margin: 0 0 1.5rem;
    }
  }
  .feed-card.is-rss .feed-body .label {
    color: var(--lime);
  }
  .feed-card.is-json .feed-body .label {
    color: var(--violet-hi);
  }

  .feed-url {
    font-family: var(--font-mono);
    font-size: var(--fs-ui);
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-s);
    background: var(--bg-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    & .copy {
      color: var(--ink-3);
      font-size: var(--fs-micro);
    }
  }
  .feed-card.is-rss .feed-url {
    border: 1px solid color-mix(in oklab, var(--lime) 25%, transparent);
    color: var(--lime);
  }
  .feed-card.is-json .feed-url {
    border: 1px solid color-mix(in oklab, var(--violet) 25%, transparent);
    color: var(--violet-hi);
  }

  .feed-compat {
    margin-block-start: 0.875rem;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-3);
    line-height: 1.7;
  }

  .email-card {
    border: 1px dashed rgb(255 255 255 / 0.15);
    border-radius: var(--radius-l);
    background: rgb(12 10 22 / 0.6);
    padding: 1.5rem 1.625rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-3);
      letter-spacing: 0.2em;
      margin-block-end: 0.5rem;
    }
    & h3 {
      font-family: var(--font-sans);
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--ink-0);
      margin: 0 0 0.5rem;
    }
    & p {
      font-size: var(--fs-sm);
      line-height: 1.6;
      color: var(--ink-2);
      margin: 0;
    }
  }
  @media (min-width: 768px) {
    .email-card {
      grid-column: span 2;
      grid-template-columns: 1fr auto;
      gap: 2rem;
    }
  }

  .channels-wrap {
    padding-block-end: 3.75rem;
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.25em;
      margin-block-end: 1rem;
    }
  }
  .channels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  @media (min-width: 640px) {
    .channels-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .channels-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .channel {
    padding: 1rem 1.125rem;
    border-radius: var(--radius-l);
    background: rgb(12 10 22 / 0.6);
    border: 1px solid rgb(255 255 255 / 0.06);
    display: block;
    color: inherit;
    transition: border-color var(--t-fast);
    & .dot {
      inline-size: 10px;
      block-size: 10px;
      border-radius: 2px;
      margin-block-end: 0.625rem;
    }
    & .name {
      font-family: var(--font-sans);
      font-size: 15px;
      font-weight: 600;
      color: var(--ink-0);
      margin-block-end: 4px;
    }
    & .handle {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-3);
    }
  }
  .channel:hover {
    border-color: var(--violet-hi);
  }

  /* ─── PORTAL (signin / signup modal) ================================== */
  .portal-stage {
    position: relative;
    z-index: 3;
    min-block-size: 60vh;
    display: grid;
    place-items: center;
    padding-block: clamp(1.5rem, 4vw, 3rem);
    isolation: isolate;
  }
  .portal-stage .peek {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.35;
    background:
      radial-gradient(
        ellipse 60% 40% at 20% 30%,
        color-mix(in oklab, var(--lime) 20%, transparent),
        transparent 60%
      ),
      radial-gradient(
        ellipse 50% 40% at 80% 70%,
        color-mix(in oklab, var(--violet) 35%, transparent),
        transparent 55%
      ),
      repeating-linear-gradient(
        0deg,
        rgb(255 255 255 / 0.02) 0 24px,
        transparent 24px 48px
      );
    filter: blur(2px);
    pointer-events: none;
  }

  .portal-card {
    position: relative;
    z-index: 2;
    inline-size: min(560px, 100%);
    padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2.5rem) 2rem;
    background: linear-gradient(180deg, #0b0918 0%, #05040b 100%);
    border: 1px solid var(--lime);
    border-radius: var(--radius-xl);
    box-shadow:
      0 40px 100px rgb(0 0 0 / 0.7),
      0 0 0 1px color-mix(in oklab, var(--violet) 30%, transparent),
      0 0 80px color-mix(in oklab, var(--lime) 18%, transparent);
  }
  .portal-card.narrow {
    inline-size: min(460px, 100%);
  }
  .portal-card .corner {
    position: absolute;
    inline-size: 12px;
    block-size: 12px;
  }
  .portal-card .corner.tl {
    inset-block-start: 10px;
    inset-inline-start: 10px;
    border-block-start: 1px solid var(--lime);
    border-inline-start: 1px solid var(--lime);
  }
  .portal-card .corner.tr {
    inset-block-start: 10px;
    inset-inline-end: 10px;
    border-block-start: 1px solid var(--lime);
    border-inline-end: 1px solid var(--lime);
  }
  .portal-card .corner.bl {
    inset-block-end: 10px;
    inset-inline-start: 10px;
    border-block-end: 1px solid var(--lime);
    border-inline-start: 1px solid var(--lime);
  }
  .portal-card .corner.br {
    inset-block-end: 10px;
    inset-inline-end: 10px;
    border-block-end: 1px solid var(--lime);
    border-inline-end: 1px solid var(--lime);
  }
  .portal-card .closeX {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 14px;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 6px;
    border: 1px solid rgb(255 255 255 / 0.1);
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    background: transparent;
  }
  .portal-card .closeX:hover {
    color: var(--ink-0);
    border-color: var(--lime);
  }

  .portal-card .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--lime);
    letter-spacing: 0.3em;
    text-align: center;
    margin-block-end: 1.25rem;
  }

  .portal-brand {
    text-align: center;
    margin-block-end: 1.625rem;
    & .logo {
      display: grid;
      place-items: center;
      inline-size: 60px;
      block-size: 60px;
      border-radius: var(--radius-l);
      background: linear-gradient(135deg, var(--violet), var(--lime));
      margin: 0 auto 0.75rem;
      font-family: var(--font-sans);
      font-size: 30px;
      font-weight: 900;
      color: var(--bg-0);
      box-shadow: 0 0 24px color-mix(in oklab, var(--lime) 25%, transparent);
    }
    & .title {
      font-family: var(--font-sans);
      font-size: 2rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--ink-0);
    }
    & .tagline {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      margin-block-start: 0.375rem;
      letter-spacing: 0.1em;
    }
    & .glyph {
      font-family: var(--font-mono);
      font-size: 1.75rem;
      color: var(--lime);
      margin-block-end: 0.625rem;
    }
    & h2 {
      font-family: var(--font-sans);
      font-size: 1.75rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--ink-0);
      margin: 0 0 0.5rem;
    }
    & p {
      font-size: var(--fs-sm);
      color: var(--ink-2);
      line-height: 1.55;
      margin: 0;
    }
  }

  .tier-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-block-end: 1.375rem;
  }
  .tier-pick .opt {
    padding: 1rem;
    border-radius: var(--radius-m);
    cursor: pointer;
    position: relative;
    background: rgb(255 255 255 / 0.02);
    border: 1px solid rgb(255 255 255 / 0.1);
    color: inherit;
    text-align: start;
    /* Stack each span on its own line, left-aligned. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    & .sel {
      position: absolute;
      inset-block-start: -8px;
      inset-inline-end: 10px;
      padding: 1px 8px;
      background: var(--lime);
      color: var(--bg-0);
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.2em;
      border-radius: 3px;
    }
    & .kicker {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.25em;
      margin-block-end: 0.375rem;
    }
    & .kicker.free {
      color: var(--ink-3);
    }
    & .kicker.paid {
      color: var(--lime);
    }
    & .price {
      font-family: var(--font-sans);
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--ink-0);
    }
    & .price .unit {
      font-size: 0.75rem;
      color: var(--ink-3);
      font-weight: 400;
    }
    & .desc {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      margin-block-start: 0.375rem;
    }
  }
  .tier-pick .opt[aria-pressed="true"],
  .tier-pick .opt.active {
    background: color-mix(in oklab, var(--lime) 6%, transparent);
    border: 1px solid var(--lime);
    box-shadow: 0 0 24px color-mix(in oklab, var(--lime) 12%, transparent);
  }

  .portal-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    & label {
      display: block;
    }
    & .lbl {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.2em;
      margin-block-end: 0.375rem;
    }
    /* Group fieldset (e.g. card row) — dashed border + inset legend so the
       three card inputs read as one logical unit. */
    & fieldset {
      margin: 0;
      padding: 0.625rem 0.75rem 0.75rem;
      border: 1px dashed color-mix(in oklab, var(--violet) 30%, transparent);
      border-radius: var(--radius-s);
      min-inline-size: 0; /* unblock flex children */
      background: color-mix(in oklab, var(--violet) 3%, transparent);
    }
    & fieldset > .lbl {
      padding-inline: 0.25rem;
      margin-block-end: 0.5rem;
    }
    & input {
      inline-size: 100%;
      padding: 0.6875rem 0.875rem;
      background: var(--bg-1);
      border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent);
      border-radius: var(--radius-s);
      font-family: var(--font-mono);
      font-size: var(--fs-ui);
      color: var(--ink-0);
      outline: none;
      min-block-size: 44px;
    }
    & input::placeholder {
      color: var(--ink-3);
    }
    & input:focus {
      border-color: var(--lime);
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--lime) 25%, transparent);
    }
    & .card-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.5rem;
    }
  }
  @media (min-width: 480px) {
    .portal-form .card-row {
      grid-template-columns: 1fr 100px 100px;
    }
  }

  .portal-submit {
    inline-size: 100%;
    margin-block-start: 1.375rem;
    padding-block: 0.875rem;
    font-size: 0.875rem;
    justify-content: center;
  }
  .portal-submit.signin {
    margin-block-start: 1.125rem;
  }

  .portal-fineprint {
    margin-block-start: 0.875rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-3);
    letter-spacing: 0.1em;
  }
  .portal-alt {
    margin-block-start: 1.125rem;
    padding-block-start: 1rem;
    border-block-start: 1px dashed rgb(255 255 255 / 0.1);
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    & a {
      color: var(--lime);
      text-decoration: underline;
      text-decoration-color: color-mix(in oklab, var(--lime) 40%, transparent);
    }
  }
  .portal-tip {
    margin-block-start: 1.125rem;
    padding: 0.625rem 0.875rem;
    background: color-mix(in oklab, var(--violet) 6%, transparent);
    border: 1px dashed color-mix(in oklab, var(--violet) 30%, transparent);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-2);
    line-height: 1.6;
    letter-spacing: 0.05em;
    & b {
      color: var(--violet-hi);
      font-weight: 400;
    }
  }

  /* ─── ACCOUNT DASHBOARD =============================================== */
  .acc-head {
    padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
    & .prompt {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.25em;
      margin-block-end: 0.875rem;
    }
    & .row {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      flex-wrap: wrap;
    }
    & .avatar {
      inline-size: 64px;
      block-size: 64px;
      border-radius: var(--radius-l);
      background: linear-gradient(135deg, var(--violet), var(--lime));
      display: grid;
      place-items: center;
      font-family: var(--font-sans);
      font-weight: 900;
      font-size: 30px;
      color: var(--bg-0);
      box-shadow: 0 0 24px color-mix(in oklab, var(--lime) 25%, transparent);
    }
    & .who {
      flex: 1;
      min-inline-size: 0;
    }
    & h1 {
      font-family: var(--font-sans);
      font-size: var(--fs-h1);
      font-weight: 800;
      letter-spacing: -0.035em;
      margin: 0 0 0.375rem;
      color: var(--ink-0);
    }
    & .meta {
      font-family: var(--font-mono);
      font-size: var(--fs-ui);
      color: var(--ink-2);
      letter-spacing: 0.1em;
      flex-wrap: wrap;
    }
    & .meta .active {
      color: var(--lime);
    }
  }

  .acc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.375rem;
    align-items: start;
    padding-block-end: 2.5rem;
  }
  @media (min-width: 1024px) {
    .acc-grid {
      grid-template-columns: 1fr 320px;
    }
  }

  .acc-main {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
  }
  .acc-rail {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  .acc-card {
    padding: 1.25rem 1.375rem;
    border-radius: var(--radius-l);
    & .ctitle {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.3em;
      margin-block-end: 0.875rem;
      text-transform: uppercase;
    }
  }
  .acc-card.lime {
    border: 1px solid var(--lime);
    background: color-mix(in oklab, var(--lime) 4%, transparent);
    & .ctitle {
      color: var(--lime);
    }
  }
  .acc-card.violet {
    border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent);
    background: color-mix(in oklab, var(--violet) 3%, transparent);
    & .ctitle {
      color: var(--violet-hi);
    }
  }
  .acc-card.pink {
    border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent);
    background: color-mix(in oklab, var(--danger) 3%, transparent);
    & .ctitle {
      color: var(--danger-hi);
    }
  }

  .plan-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: center;
    & .name {
      font-family: var(--font-sans);
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--ink-0);
      margin-block-end: 0.375rem;
    }
    & .name .star {
      color: var(--lime);
    }
    & .details {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-2);
      line-height: 1.7;
    }
    & .details b {
      color: var(--ink-0);
      font-weight: 400;
    }
    & .actions {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    & .actions .btn-outline {
      font-size: var(--fs-meta);
    }
  }
  @media (min-width: 640px) {
    .plan-row {
      grid-template-columns: 1fr auto;
    }
  }

  /* Real <input type="checkbox"> styled as a toggle switch (no fake divs!) */
  .pref-row,
  .danger-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.875rem;
    align-items: center;
    padding-block: 0.625rem;
    border-block-end: 1px dashed rgb(255 255 255 / 0.06);
    & .name {
      font-family: var(--font-sans);
      font-size: var(--fs-sm);
      color: var(--ink-0);
    }
    & .sub {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      margin-block-start: 2px;
      letter-spacing: 0.1em;
    }
    &:last-child {
      border-block-end: none;
    }
  }
  .danger-row {
    border-block-end-color: color-mix(in oklab, var(--danger) 15%, transparent);
  }
  .danger-row .name.hard {
    color: var(--danger-hi);
  }

  .toggle-switch {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 46px;
    block-size: 24px;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    background: rgb(255 255 255 / 0.08);
    border: 1px solid rgb(255 255 255 / 0.15);
    transition:
      background var(--t-fast),
      border-color var(--t-fast);
  }
  .toggle-switch::before {
    content: "";
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    background: var(--ink-3);
    transition: inset-inline-start var(--t-fast);
  }
  .toggle-switch:checked {
    background: color-mix(in oklab, var(--lime) 25%, transparent);
    border-color: var(--lime);
    box-shadow: 0 0 10px color-mix(in oklab, var(--lime) 30%, transparent);
  }
  .toggle-switch:checked::before {
    inset-inline-start: 23px;
    background: var(--lime);
  }
  .toggle-switch:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
  }

  .stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
    margin-block-end: 0.875rem;
    /* Each stat cell — number above, label below, centered. */
    & > div {
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-start;
      gap: 0.125rem;
    }
    & .n {
      font-family: var(--font-sans);
      font-size: 1.625rem;
      font-weight: 800;
      color: var(--lime);
      letter-spacing: -0.02em;
    }
    & .l {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
  }
  @media (min-width: 640px) {
    .stats-row {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .recent-head {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-3);
    letter-spacing: 0.2em;
    margin-block-end: 0.5rem;
  }
  .recent-row {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding-block: 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-1);
    flex-wrap: wrap;
    & + .recent-row {
      border-block-start: 1px dashed rgb(255 255 255 / 0.05);
    }
    & .verb {
      color: var(--ink-3);
    }
    & .what {
      color: var(--ink-0);
    }
    & .when {
      color: var(--ink-3);
      font-size: var(--fs-micro);
      margin-inline-start: auto;
    }
  }

  /* Right-rail widgets */
  .widget {
    padding: 1rem 1.125rem;
    border-radius: var(--radius-m);
    & .h {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.25em;
      margin-block-end: 0.5rem;
    }
  }
  .widget.next-inv {
    background: color-mix(in oklab, var(--lime) 4%, transparent);
    border: 1px dashed color-mix(in oklab, var(--lime) 30%, transparent);
    & .h {
      color: var(--lime);
    }
    & .n {
      font-family: var(--font-sans);
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--ink-0);
    }
    & .d {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      margin-block-start: 0.25rem;
    }
  }
  .widget.invoices {
    background: rgb(5 4 11 / 0.5);
    border: 1px solid rgb(255 255 255 / 0.08);
    & .h {
      color: var(--ink-3);
      text-transform: uppercase;
      margin-block-end: 0.625rem;
    }
    & .inv {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 0.5rem;
      padding-block: 0.4375rem;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      align-items: baseline;
      & + .inv {
        border-block-start: 1px dashed rgb(255 255 255 / 0.05);
      }
      & .d {
        color: var(--ink-2);
      }
      & .a {
        color: var(--ink-0);
      }
      & .s {
        color: var(--lime);
        font-size: var(--fs-nano);
        letter-spacing: 0.2em;
      }
    }
    & .dl {
      display: block;
      margin-block-start: 0.625rem;
      text-align: center;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--violet-hi);
      letter-spacing: 0.15em;
    }
  }
  .widget.referral {
    background: color-mix(in oklab, var(--violet) 5%, transparent);
    border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
    & .h {
      color: var(--violet-hi);
    }
    & .p {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-1);
      line-height: 1.55;
      margin-block-end: 0.625rem;
    }
    & .code {
      padding: 0.5rem 0.625rem;
      border-radius: var(--radius-s);
      background: var(--bg-1);
      border: 1px solid color-mix(in oklab, var(--lime) 25%, transparent);
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      display: flex;
      gap: 0.5rem;
      align-items: center;
      & .url {
        flex: 1;
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      & .cp {
        color: var(--ink-3);
        cursor: pointer;
      }
    }
  }

  /* ─── /THANKS — gratitude wall ======================================== */
  .tks-hero {
    padding-block: clamp(2rem, 5.5vw, 3.5rem) clamp(1rem, 2vw, 1.75rem);
    text-align: center;
    max-inline-size: 70rem;
    margin-inline: auto;
    & .prompt {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.3em;
      margin-block-end: 1.125rem;
    }
    & h1 {
      font-family: var(--font-sans);
      font-size: var(--fs-hero-xl);
      font-weight: 800;
      letter-spacing: -0.05em;
      line-height: 0.9;
      margin: 0 auto 1.125rem;
      text-wrap: balance;
      max-inline-size: 56rem;
    }
    & h1 .sub {
      display: block;
      color: var(--lime);
      font-size: clamp(1.25rem, 5vw, 3.5rem);
      font-weight: 600;
      margin-block-start: 0.25rem;
    }
    & .lede {
      font-size: var(--fs-lede);
      line-height: 1.55;
      color: var(--ink-1);
      max-inline-size: 42rem;
      margin: 0 auto;
      text-wrap: pretty;
    }
  }

  .tks-stats {
    padding: 1.375rem 1.625rem;
    border: 1px dashed color-mix(in oklab, var(--lime) 30%, transparent);
    border-radius: var(--radius-l);
    background: rgb(5 4 11 / 0.4);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-inline-size: 70rem;
    margin: 0 auto 1.5rem;
    & .v {
      font-family: var(--font-sans);
      font-size: clamp(1.5rem, 3.5vw, 2.25rem);
      font-weight: 800;
      color: var(--lime);
      letter-spacing: -0.03em;
      line-height: 1;
    }
    & .l {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.2em;
      margin-block-start: 0.5rem;
      text-transform: uppercase;
    }
  }
  /* Each stat — value above, label below, centered. */
  .tks-stat {
    display: flex;
    flex-direction: column-reverse; /* value first visually, label below */
    align-items: center;
    text-align: center;
    gap: 0.25rem;
  }
  @media (min-width: 768px) {
    .tks-stats {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .tks-sponsors-wrap {
    max-inline-size: 70rem;
    margin: 0 auto 1.5rem;
    & .lab {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--violet-hi);
      letter-spacing: 0.3em;
      margin-block-end: 0.875rem;
    }
  }
  .tks-sponsors {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }
  @media (min-width: 480px) {
    .tks-sponsors {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 768px) {
    .tks-sponsors {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .tks-sponsors {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  .tks-sponsor {
    padding: 0.875rem 0.625rem;
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--violet) 10%, transparent),
      color-mix(in oklab, var(--violet) 2%, transparent)
    );
    border: 1px solid color-mix(in oklab, var(--violet) 40%, transparent);
    border-radius: var(--radius-m);
    /* Stack glyph above handle, both centered. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
    & .glyph {
      font-size: 1.125rem;
      color: var(--violet-hi);
    }
    & .handle {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-0);
    }
  }

  /* Reset default browser dd margin so the .tks-stat / acc-grid stats lay out correctly */
  .tks-stats dd,
  .stats-row dd {
    margin: 0;
  }

  .tks-tips-wrap {
    max-inline-size: 70rem;
    margin: 0 auto;
    padding-block-end: 2.5rem;
    & .lab {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.3em;
      margin-block-end: 0.875rem;
    }
  }
  .tks-tips {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  @media (min-width: 768px) {
    .tks-tips {
      grid-template-columns: 1fr 1fr;
    }
  }

  .tks-tip {
    padding: 0.875rem 1rem;
    background: rgb(5 4 11 / 0.5);
    border: 1px solid color-mix(in oklab, var(--lime) 15%, transparent);
    border-radius: var(--radius-m);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.625rem;
    & .head {
      display: flex;
      gap: 0.5rem;
      align-items: baseline;
      flex-wrap: wrap;
    }
    & .user {
      font-family: var(--font-sans);
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--ink-0);
    }
    & .date {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.1em;
    }
    & .msg {
      font-family: Georgia, serif;
      font-size: 0.8125rem;
      color: var(--ink-1);
      line-height: 1.55;
      font-style: italic;
      margin-block-start: 0.375rem;
    }
    & .amt {
      align-self: center;
      font-family: var(--font-sans);
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--lime);
      letter-spacing: -0.02em;
    }
  }

  .tks-cta {
    margin-block-start: 1.75rem;
    padding: 1.375rem 1.625rem;
    background: color-mix(in oklab, var(--lime) 5%, transparent);
    border: 1px dashed var(--lime);
    border-radius: var(--radius-l);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: center;
    & .head {
      font-family: var(--font-sans);
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--ink-0);
      margin-block-end: 0.25rem;
      letter-spacing: -0.02em;
    }
    & .body {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-2);
      line-height: 1.6;
    }
  }
  @media (min-width: 640px) {
    .tks-cta {
      grid-template-columns: 1fr auto;
      gap: 1.25rem;
    }
  }

  /* ─── Shared list-page hero (archives, projects, subscribe etc) ────── */
  .list-hero {
    padding-block: clamp(2rem, 5.5vw, 3.5rem) clamp(1rem, 2vw, 1.5rem);
    & .prompt {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.25em;
      margin-block-end: 0.75rem;
    }
    & h1 {
      font-family: var(--font-sans);
      font-size: var(--fs-hero-lg);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 0.95;
      margin: 0;
      text-wrap: balance;
    }
    & h1 .lime {
      color: var(--lime);
    }
    & p {
      font-size: var(--fs-body);
      color: var(--ink-1);
      max-inline-size: 38rem;
      margin: 1rem 0 0;
      line-height: 1.6;
      text-wrap: pretty;
    }
  }

  /* ─── ARCHIVES ======================================================== */
  .archives-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
    padding-block-end: 2.5rem;
  }
  @media (min-width: 1024px) {
    .archives-grid {
      grid-template-columns: 240px 1fr;
    }
  }

  .archives-panel {
    border: 1px solid color-mix(in oklab, var(--violet) 25%, transparent);
    border-radius: var(--radius-l);
    background: rgb(12 10 22 / 0.6);
    overflow: hidden;
  }
  .archives-panel.sticky {
    position: sticky;
    inset-block-start: calc(80px + var(--gutter, 1rem));
    block-size: fit-content;
  }

  .tag-rail {
    padding: 0.875rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.9;
    & .label {
      color: var(--ink-3);
      margin-block-end: 0.5rem;
      font-size: var(--fs-micro);
      letter-spacing: 0.15em;
    }
    & .tag {
      display: flex;
      justify-content: space-between;
      padding: 0.25rem 0.5rem;
      border-radius: 5px;
      margin-block-end: 3px;
      cursor: pointer;
      background: color-mix(in oklab, var(--violet) 4%, transparent);
      color: var(--violet-hi);
    }
    & .tag.is-rabbit {
      background: color-mix(in oklab, var(--danger) 6%, transparent);
      color: var(--danger-hi);
    }
    & .tag.is-lime {
      background: color-mix(in oklab, var(--lime) 4%, transparent);
      color: var(--lime-hi);
    }
    & .tag .count {
      color: var(--ink-3);
    }
  }

  .archives-years {
    padding-block: 0.25rem;
  }
  .year-block + .year-block {
    border-block-start: 1px dashed
      color-mix(in oklab, var(--violet) 20%, transparent);
  }
  .year-block .year-head {
    padding: 1rem 1.375rem 0.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    margin-block-start: 0.25rem;
    & .y {
      font-family: var(--font-sans);
      font-size: 2.5rem;
      font-weight: 800;
      color: var(--ink-0);
      letter-spacing: -0.03em;
    }
    & .c {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
    }
  }

  .archive-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "date title"
      ".    tags";
    column-gap: 1.125rem;
    row-gap: 4px;
    align-items: center;
    padding: 0.625rem 1.375rem;
    color: inherit;
    border-block-start: 1px solid rgb(255 255 255 / 0.02);
    & .date {
      grid-area: date;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
    }
    & .title {
      grid-area: title;
      font-family: var(--font-sans);
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--ink-0);
    }
    & .tags {
      grid-area: tags;
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--violet-hi);
    }
  }
  @container (min-width: 36rem) {
    .archive-row {
      grid-template-columns: 60px 1fr auto;
      grid-template-areas: "date title tags";
    }
  }

  /* ─── TAGS INDEX ===================================================== */
  .tags-cloud-wrap {
    padding-block: 1.25rem;
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.3em;
      margin-block-end: 0.875rem;
    }
  }
  .tags-cloud {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    align-items: baseline;
    & a {
      padding: 0.5rem 0.875rem;
      font-family: var(--font-sans);
      font-weight: 700;
      letter-spacing: -0.02em;
      background: rgb(5 4 11 / 0.5);
      border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
      border-radius: var(--radius-pill);
      display: inline-flex;
      gap: 0.5rem;
      align-items: baseline;
      color: var(--ink-0);
      transition:
        border-color var(--t-fast),
        color var(--t-fast);
    }
    & a:hover {
      border-color: var(--lime);
      color: var(--lime);
    }
    & a.top {
      color: var(--lime);
      background: color-mix(in oklab, var(--lime) 8%, transparent);
      border-color: var(--lime);
    }
    & a .n {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-3);
      font-weight: 400;
      letter-spacing: 0.1em;
    }
  }

  .tags-az-wrap {
    padding-block: 1.875rem 2.5rem;
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--violet-hi);
      letter-spacing: 0.3em;
      margin-block-end: 0.875rem;
    }
  }
  .tags-az {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  @media (min-width: 640px) {
    .tags-az {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (min-width: 1024px) {
    .tags-az {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .tags-group {
    padding: 0.875rem 1rem 0.75rem;
    background: rgb(5 4 11 / 0.5);
    border: 1px dashed rgb(255 255 255 / 0.08);
    border-radius: var(--radius-m);
    & .letter {
      font-family: var(--font-sans);
      font-size: 2.375rem;
      font-weight: 800;
      color: var(--lime);
      letter-spacing: -0.04em;
      line-height: 0.9;
      margin-block-end: 0.625rem;
    }
    & .rows {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    & a {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 0.625rem;
      padding-block: 4px;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-1);
      border-block-end: 1px dashed rgb(255 255 255 / 0.05);
    }
    & a:hover {
      color: var(--lime);
    }
    & a .n {
      color: var(--ink-3);
      font-size: var(--fs-micro);
      letter-spacing: 0.1em;
    }
  }

  .tags-legend {
    margin-block-start: 1.375rem;
    padding: 0.75rem 1rem;
    background: color-mix(in oklab, var(--lime) 3%, transparent);
    border: 1px dashed color-mix(in oklab, var(--lime) 25%, transparent);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    letter-spacing: 0.05em;
    line-height: 1.6;
    & .k {
      color: var(--lime);
    }
  }

  /* ─── TAG (single) =================================================== */
  .tag-crumbs {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    letter-spacing: 0.15em;
    margin-block-end: 1rem;
    & a {
      color: var(--lime);
    }
    & .sep {
      margin-inline: 0.625rem;
      color: var(--ink-3);
    }
    & .current {
      color: var(--ink-0);
    }
  }

  .tag-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: end;
    & .eyebrow {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.3em;
      margin-block-end: 0.75rem;
    }
    & h1 {
      font-family: var(--font-sans);
      font-size: var(--fs-hero-xl);
      font-weight: 800;
      letter-spacing: -0.05em;
      line-height: 0.88;
      margin: 0 0 1rem;
    }
    & .desc {
      font-size: var(--fs-body);
      line-height: 1.55;
      color: var(--ink-1);
      max-inline-size: 40rem;
      margin: 0;
      text-wrap: pretty;
    }
  }
  @media (min-width: 768px) {
    .tag-head {
      grid-template-columns: 1fr auto;
      gap: 1.875rem;
    }
  }

  .tag-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 1rem 1.125rem;
    border: 1px dashed color-mix(in oklab, var(--lime) 30%, transparent);
    border-radius: var(--radius-l);
    min-inline-size: 14rem;
    /* Each stat — value above, label below, both anchored to the start. */
    & .stat {
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-start;
      gap: 4px;
    }
    & .stat dd {
      margin: 0;
    } /* reset default browser dd margin */
    & .stat .v {
      font-family: var(--font-sans);
      font-size: 1.625rem;
      font-weight: 800;
      color: var(--lime);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    & .stat .k {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
  }

  .tag-related {
    margin-block-start: 1.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.25em;
      margin-inline-end: 4px;
    }
    & a {
      padding: 5px 11px;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-1);
      border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
      border-radius: 3px;
      letter-spacing: 0.05em;
    }
    & a:hover {
      color: var(--lime);
      border-color: var(--lime);
    }
    & a .n {
      color: var(--ink-3);
      margin-inline-start: 4px;
    }
  }

  .tag-filter-wrap {
    padding-block-start: 0.625rem;
  }
  .tag-filter {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.625rem 0.875rem;
    background: rgb(5 4 11 / 0.5);
    border: 1px solid color-mix(in oklab, var(--lime) 20%, transparent);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    letter-spacing: 0.1em;
    flex-wrap: wrap;
    & .prompt {
      color: var(--lime);
    }
    & .pipe {
      color: var(--ink-3);
    }
    & .val {
      color: var(--ink-0);
    }
    & .spacer {
      flex: 1;
    }
    & .chip-btn {
      padding: 3px 8px;
      border-radius: 3px;
      cursor: pointer;
      border: 1px solid rgb(255 255 255 / 0.1);
      color: var(--ink-2);
      background: transparent;
      font: inherit;
      letter-spacing: inherit;
    }
    & .chip-btn[aria-pressed="true"] {
      border-color: color-mix(in oklab, var(--lime) 30%, transparent);
      color: var(--lime);
    }
  }

  .tag-posts {
    padding-block: 1.5rem 1.25rem;
  }
  .tag-post-row,
  .author-post {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
    padding: 1.125rem 0.875rem;
    border-block-end: 1px dashed rgb(255 255 255 / 0.08);
    color: inherit;
    & .n {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--lime);
    }
    & .cover {
      position: relative;
      display: block;
      margin: 0;
      aspect-ratio: 21 / 9;
      overflow: hidden;
      background: var(--bg-1);
      border: 1px solid color-mix(in oklab, var(--violet) 28%, transparent);
      border-radius: var(--radius-s);
      transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
      --bk: color-mix(in oklab, var(--lime) 55%, transparent);
      & .cover-img {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        display: block;
        filter: saturate(0.92) contrast(1.04);
        transition:
          transform 0.5s ease,
          filter 0.3s ease;
      }
      & .cover-grain {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: repeating-linear-gradient(
          0deg,
          rgb(0 0 0 / 0.18) 0 1px,
          transparent 1px 3px
        );
        mix-blend-mode: multiply;
        opacity: 0.7;
      }
      & .cover-vignette {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
          180deg,
          rgb(7 6 13 / 0.35) 0%,
          transparent 30%,
          transparent 65%,
          rgb(7 6 13 / 0.7) 100%
        );
      }
      & .cover-scan {
        position: absolute;
        inset-inline: 0;
        inset-block-start: 32%;
        block-size: 1px;
        pointer-events: none;
        opacity: 0.55;
        background: linear-gradient(
          90deg,
          transparent,
          color-mix(in oklab, var(--lime) 55%, transparent),
          transparent
        );
        box-shadow: 0 0 6px color-mix(in oklab, var(--lime) 35%, transparent);
      }
      & .bracket {
        position: absolute;
        inline-size: 7px;
        block-size: 7px;
        pointer-events: none;
      }
      & .bracket.tl {
        inset-block-start: 4px;
        inset-inline-start: 4px;
        border-block-start: 1px solid var(--bk);
        border-inline-start: 1px solid var(--bk);
      }
      & .bracket.tr {
        inset-block-start: 4px;
        inset-inline-end: 4px;
        border-block-start: 1px solid var(--bk);
        border-inline-end: 1px solid var(--bk);
      }
      & .bracket.bl {
        inset-block-end: 4px;
        inset-inline-start: 4px;
        border-block-end: 1px solid var(--bk);
        border-inline-start: 1px solid var(--bk);
      }
      & .bracket.br {
        inset-block-end: 4px;
        inset-inline-end: 4px;
        border-block-end: 1px solid var(--bk);
        border-inline-end: 1px solid var(--bk);
      }
    }
    & .cover-empty {
      background:
        radial-gradient(
          ellipse 70% 60% at 50% 50%,
          color-mix(in oklab, var(--violet) 18%, transparent) 0%,
          transparent 70%
        ),
        var(--bg-1);
      & .cover-vignette {
        background: linear-gradient(
          180deg,
          rgb(7 6 13 / 0.5) 0%,
          transparent 35%,
          transparent 60%,
          rgb(7 6 13 / 0.85) 100%
        );
      }
    }
    & .row-body {
      min-inline-size: 0;
    }
    & .t {
      font-family: var(--font-sans);
      font-size: 1.1875rem;
      font-weight: 700;
      color: var(--ink-0);
      margin-block: 0 4px;
      letter-spacing: -0.02em;
    }
    & .t .paid {
      margin-inline-start: 8px;
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--lime);
      padding: 2px 6px;
      border: 1px solid var(--lime);
      border-radius: 3px;
      vertical-align: middle;
    }
    & .s {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      margin-block: 0 6px;
      line-height: 1.55;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    & .m {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-block: 0;
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      letter-spacing: 0.15em;
      & .tag-match {
        font-weight: bolder;
        text-decoration: underline;
        text-decoration-style: dotted;
      }
    }
  }
  .tag-post-row:hover .cover,
  .author-post:hover .cover {
    border-color: color-mix(in oklab, var(--lime) 55%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--lime) 18%, transparent),
      0 0 18px -6px color-mix(in oklab, var(--lime) 60%, transparent);
    --bk: color-mix(in oklab, var(--lime) 85%, transparent);
  }
  .tag-post-row:hover .cover .cover-img,
  .author-post:hover .cover .cover-img {
    transform: scale(1.05);
    filter: saturate(1.05) contrast(1.06);
  }
  /* Trigger the title's glitch effect when hovering anywhere on the row link
     (not just over the title text). Mirrors the .glitch:hover rules. */
  .tag-post-row:hover .glitch::before,
  .author-post:hover .glitch::before {
    opacity: calc(0.85 * var(--fx-glitch-hover));
    color: var(--lime);
    transform: translate(-2px, 0);
    clip-path: polygon(0 0, 100% 0, 100% 42%, 0 42%);
    animation: glitch-a 0.6s steps(2, end) infinite;
  }
  .tag-post-row:hover .glitch::after,
  .author-post:hover .glitch::after {
    opacity: calc(0.85 * var(--fx-glitch-hover));
    color: var(--violet-hi);
    transform: translate(2px, 0);
    clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%);
    animation: glitch-b 0.55s steps(2, end) infinite;
  }
  @media (min-width: 640px) {
    .tag-post-row,
    .author-post {
      grid-template-columns: 30px 132px 1fr;
      gap: 1.125rem;
      align-items: center;
      & .cover {
        aspect-ratio: 4 / 3;
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .tag-post-row .cover,
    .tag-post-row .cover .cover-img,
    .author-post .cover,
    .author-post .cover .cover-img {
      transition: none;
    }
    .tag-post-row:hover .cover .cover-img,
    .author-post:hover .cover .cover-img {
      transform: none;
    }
  }

  /* Pagination — shared with author page later */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-block: 1.75rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    flex-wrap: wrap;
    & .pg-btn {
      padding: 7px 11px;
      min-inline-size: 34px;
      text-align: center;
      border-radius: 5px;
      letter-spacing: 0.15em;
      border: 1px solid rgb(255 255 255 / 0.08);
      color: var(--ink-1);
      background: rgb(5 4 11 / 0.5);
    }
    & .pg-btn:hover {
      border-color: var(--lime);
      color: var(--lime);
    }
    & .pg-btn[aria-current="page"] {
      border-color: var(--lime);
      color: var(--bg-0);
      background: var(--lime);
      font-weight: 700;
      box-shadow: 0 0 12px color-mix(in oklab, var(--lime) 40%, transparent);
    }
    & .pg-btn[aria-disabled="true"] {
      color: var(--ink-3);
      opacity: 0.4;
      pointer-events: none;
    }
    & .pg-hr {
      inline-size: 12px;
      block-size: 1px;
      background: color-mix(in oklab, var(--lime) 20%, transparent);
      margin-inline: 4px;
    }
    & .pg-label {
      margin-inline-start: 0.875rem;
      color: var(--ink-3);
      font-size: var(--fs-micro);
      letter-spacing: 0.2em;
    }
  }

  /* ─── PROJECTS ======================================================= */
  .proc-table {
    border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
    border-radius: var(--radius-l);
    background: rgb(12 10 22 / 0.6);
    overflow: hidden;
    container-type: inline-size;
  }
  .proc-head,
  .proc-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.375rem;
    padding: 0.875rem 1.125rem;
  }
  .proc-head {
    display: none; /* mobile = card view, no header row */
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-3);
    letter-spacing: 0.15em;
    border-block-end: 1px solid rgb(255 255 255 / 0.06);
    & .r {
      text-align: end;
    }
  }
  .proc-row {
    border-block-start: 1px solid rgb(255 255 255 / 0.03);
    color: inherit;
    & .pid {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-3);
    }
    & .name-title {
      font-family: var(--font-sans);
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--ink-0);
    }
    & .desc {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      margin-block-start: 2px;
    }
    & .stack {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--violet-hi);
    }
    & .year {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
    }
    & .stars {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
    }
  }
  @container (min-width: 50rem) {
    .proc-head,
    .proc-row {
      grid-template-columns: 60px 2fr 1fr 1fr 1fr 80px;
      align-items: center;
    }
    .proc-head {
      display: grid;
    }
    .proc-row .stars {
      text-align: end;
    }
  }

  /* /now block */
  .now-card {
    margin-block-start: var(--gutter-y);
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius-l);
    border: 1px solid color-mix(in oklab, var(--lime) 30%, transparent);
    background: linear-gradient(
      135deg,
      color-mix(in oklab, var(--lime) 10%, transparent),
      rgb(7 6 13 / 0.6)
    );
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.2em;
      margin-block-end: 0.625rem;
    }
    & .text {
      font-family: var(--font-sans);
      font-size: var(--fs-lede);
      color: var(--ink-0);
      line-height: 1.55;
      max-inline-size: 51rem;
      font-weight: 500;
    }
  }

  /* ─── ABOUT ========================================================== */
  .about-intro {
    padding-block: clamp(2rem, 5vw, 3.5rem) 2.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  @media (min-width: 1024px) {
    .about-intro {
      grid-template-columns: 380px 1fr;
      gap: 3rem;
    }
  }
  .about-intro > .tag-crumbs {
    grid-column: 1 / -1;
  }

  .about-intro .prompt {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--lime);
    letter-spacing: 0.2em;
  }
  .about-intro h1 {
    font-family: var(--font-sans);
    font-size: var(--fs-hero-md);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.98;
    margin: 1rem 0 1.5rem;
    text-wrap: balance;
  }
  .about-intro p {
    font-size: var(--fs-lede);
    line-height: 1.65;
    color: var(--ink-1);
    max-inline-size: 35rem;
    & + p {
      margin-block-start: 0.875rem;
    }
  }
  .about-intro .skills {
    display: flex;
    gap: 0.625rem;
    margin-block-start: 1.75rem;
    flex-wrap: wrap;
    & span {
      --accent: var(--lime);
      --accent-text: var(--lime);
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-0);
      cursor: pointer;
      padding: 6px 12px;
      border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
      border-radius: var(--radius-s);
      background: color-mix(in oklab, var(--accent) 10%, transparent);
      transition:
        color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
    }
    & span.violet {
      --accent: var(--violet-hi);
      --accent-text: var(--violet-hi);
    }
    & span.danger {
      --accent: var(--danger);
      --accent-text: var(--danger-hi);
    }
    & span:hover {
      color: var(--accent-text);
      border-color: var(--accent);
      background: color-mix(in oklab, var(--accent) 12%, transparent);
      transform: translateY(-1px);
      box-shadow:
        0 4px 12px color-mix(in oklab, var(--accent) 18%, transparent),
        0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
    }
  }

  /* Trading card */
  .trading-card {
    border-radius: var(--radius-xl);
    padding: 1.125rem;
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--violet) 10%, var(--bg-1)),
      var(--bg-1)
    );
    position: relative;
    & .card-art {
      block-size: 18.75rem;
      border-radius: var(--radius-l);
      background: linear-gradient(
        135deg,
        color-mix(in oklab, var(--violet) 40%, transparent),
        color-mix(in oklab, var(--lime) 15%, transparent)
      );
      border: 1px solid color-mix(in oklab, var(--lime) 30%, transparent);
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
    }
    & .card-art .pixel-avatar {
      position: relative;
      z-index: 1; /* above the card-art gradient */
      inline-size: 200px;
      block-size: 200px;
    }
    & .card-art .art-scanlines {
      position: absolute;
      inset: 0;
      z-index: 2; /* above the avatar — CRT overlay sits on top of artwork */
      background: repeating-linear-gradient(
        0deg,
        rgb(0 0 0 / 0.2) 0 2px,
        transparent 2px 4px
      );
      pointer-events: none;
    }
    & .card-art .hp,
    & .card-art .lv {
      position: absolute;
      inset-block-start: 10px;
      z-index: 3; /* above the scanlines overlay */
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.2em;
    }
    & .card-art .hp {
      inset-inline-start: 10px;
      color: var(--lime);
    }
    & .card-art .lv {
      inset-inline-end: 10px;
      color: var(--violet-hi);
    }
    & .card-body {
      padding: 1rem 0.375rem 0.375rem;
    }
    & .class-type {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-3);
      letter-spacing: 0.1em;
    }
    & .card-name {
      font-family: var(--font-sans);
      font-size: 1.625rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-block-start: 0.375rem;
    }
    & .stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-block-start: 0.875rem;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
    }
    & .stats .stat {
      display: flex;
      justify-content: space-between;
      padding: 4px 8px;
      background: rgb(255 255 255 / 0.03);
      border-radius: 6px;
    }
    & .stats .stat .k {
      color: var(--ink-3);
    }
    & .stats .stat .v {
      color: var(--lime);
    }
  }

  /* Quest log */
  .quest-log {
    padding-block: 2.5rem 5rem;
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.2em;
      margin-block-end: 1.125rem;
    }
  }
  .timeline {
    position: relative;
    padding-inline-start: 1.75rem;
    border-inline-start: 2px dashed
      color-mix(in oklab, var(--lime) 25%, transparent);
  }
  .timeline .entry {
    margin-block-end: 1.75rem;
    position: relative;
    & .node {
      position: absolute;
      inset-inline-start: -37px;
      inset-block-start: 2px;
      inline-size: 14px;
      block-size: 14px;
      border-radius: 4px;
      background: var(--lime);
      box-shadow: 0 0 14px color-mix(in oklab, var(--lime) 60%, transparent);
    }
    & .head {
      display: flex;
      align-items: baseline;
      gap: 0.875rem;
      flex-wrap: wrap;
    }
    & .year {
      font-family: var(--font-mono);
      font-size: 1.25rem;
      color: var(--violet-hi);
      font-weight: 700;
    }
    & .badge {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.15em;
    }
    & .text {
      font-family: var(--font-sans);
      font-size: var(--fs-lede);
      color: var(--ink-1);
      margin-block-start: 0.375rem;
      max-inline-size: 42rem;
    }
  }

  /* ─── ARTICLE: standalone breadcrumb (sits between read-bar and hero) */
  .art-crumbs {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    padding-block: 1rem 0;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    letter-spacing: 0.1em;
    & .home {
      color: var(--lime);
    }
    & .link {
      color: var(--ink-1);
    }
    & .link:hover {
      color: var(--lime);
    }
    & .sep {
      color: var(--ink-3);
    }
    & .slug {
      color: var(--ink-0);
    }
  }

  /* ─── ARTICLE: reading bar ============================================
     Sticks immediately below the .d3-chrome (which is sticky at top:0).
     The chrome height varies across viewports (topbar wraps on narrow
     screens), so we use --chrome-h — set at runtime by article.js via
     ResizeObserver. The fallback handles the no-JS case. */
  .read-bar {
    position: sticky;
    inset-block-start: var(--chrome-h, 60px);
    z-index: 8;
    margin-inline: calc(var(--gutter) * -1);
    background: rgb(7 6 13 / 0.85);
    border-block-end: 1px solid
      color-mix(in oklab, var(--lime) 15%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    & .progress-track {
      block-size: 2px;
      background: rgb(255 255 255 / 0.05);
      position: relative;
    }
    & .progress-fill {
      position: absolute;
      inset: 0;
      inline-size: 0;
      background: linear-gradient(90deg, var(--violet), var(--lime));
      box-shadow: 0 0 14px var(--lime);
      transition: inline-size 80ms linear;
    }
    & .read-meta {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 0.5rem var(--gutter);
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      letter-spacing: 0.1em;
      flex-wrap: wrap;
      /* % READ on the left, time-left on the right at every viewport size.
         The `·` separator is meaningless when items are at opposite ends, so hide it. */
      justify-content: space-between;
    }
    & .read-meta .sep {
      display: none;
    }
    & .read-meta .pct {
      color: var(--lime);
    }
  }
  @media (min-width: 768px) {
    .read-bar {
      margin-inline: calc(var(--gutter) * -1);
    }
  }
  @media (min-width: 1024px) {
    .read-bar {
      margin-inline: calc(clamp(0.75rem, 1.5vw, 1.5rem) * -1);
    }
  }

  /* ─── ARTICLE: hero (plain variant) =================================== */
  .art-hero {
    padding-block: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
    max-inline-size: 67.5rem;
    margin-inline: auto;
  }
  .art-chip {
    display: inline-flex;
    gap: 0.625rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--lime);
    letter-spacing: 0.2em;
    padding: 6px 12px;
    border: 1px solid var(--lime);
    border-radius: var(--radius-s);
    margin-block-end: 1.75rem;
  }
  .art-hero h1,
  .draft-hero h1 {
    font-family: var(--font-sans);
    font-size: var(--fs-hero-lg);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.95;
    margin: 0 0 1.5rem;
    text-wrap: balance;
  }
  .art-hero h1 .sub,
  .draft-hero h1 .sub {
    display: block;
    color: var(--lime);
    font-size: clamp(1.125rem, 3.5vw, 2.5rem);
    margin-block-start: 0.75rem;
    font-weight: 600;
  }
  .art-hero .lede {
    font-size: var(--fs-lede);
    line-height: 1.55;
    color: var(--ink-1);
    max-inline-size: 49rem;
    margin: 0 0 2rem;
    text-wrap: pretty;
  }
  .art-hero code.inline-mono,
  .article code.inline-mono,
  .draft-hero code.inline-mono {
    font-family: var(--font-mono);
    color: var(--lime);
    font-size: 0.85em;
    padding: 2px 6px;
    background: color-mix(in oklab, var(--lime) 8%, transparent);
    border-radius: 4px;
  }

  /* Meta bar under hero */
  /* Meta-bar — three structural groups stacked vertically on mobile,
     inlined on tablet+. Each group handles its own internal layout:
       .who-group  — flex row: avatar + handle/time
       .meta-stats — auto-fit grid: 2 cols at narrow → 3 → 4 as space allows
       .meta-tags  — flex wrap: chips flow to next line as needed */
  .meta-bar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-block: 1.125rem;
    border-block: 1px dashed color-mix(in oklab, var(--lime) 25%, transparent);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
  }

  /* Avatar + handle/time — flex row */
  .meta-bar .who-group {
    display: flex;
    align-items: center;
    gap: 0.875rem;
  }
  .meta-bar .avatar {
    flex: 0 0 auto;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius-m);
    background: linear-gradient(
      135deg,
      var(--violet-lo),
      var(--violet),
      var(--lime)
    );
    border: 1px solid color-mix(in oklab, var(--lime) 35%, transparent);
    image-rendering: pixelated;
    position: relative;
    overflow: hidden;
  }
  .meta-bar .avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      rgb(0 0 0 / 0.2) 0 2px,
      transparent 2px 4px
    );
  }
  .meta-bar .who {
    min-inline-size: 0;
  }
  .meta-bar .who .handle {
    color: var(--ink-0);
    font-size: 0.8125rem;
  }
  .meta-bar .who .handle a {
    color: inherit;
    text-decoration: none;
  }
  .meta-bar .who .handle a:hover,
  .meta-bar .who .handle a:focus-visible {
    color: var(--lime);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .meta-bar .who .time {
    color: var(--ink-3);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    margin-block-start: 2px;
  }

  /* Stats — auto-fit grid. Each cell at least ~4.5rem, max 1fr.
     2 cols at very narrow widths, naturally promotes to 3 / 4 cols
     as the container has room. */
  .meta-bar .meta-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
    gap: 0.75rem 1rem;
  }
  .meta-bar .stat {
    display: flex;
    flex-direction: column-reverse; /* dd (val) above dt (label) */
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    min-inline-size: 0;
  }
  .meta-bar .stat dd {
    margin: 0;
  } /* reset default browser dd margin */
  .meta-bar .stat .label {
    font-size: var(--fs-nano);
    color: var(--ink-3);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .meta-bar .stat .val {
    font-size: 0.75rem;
    color: var(--ink-0);
  }

  /* Tags — chips that wrap onto multiple lines as needed */
  .meta-bar .meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }

  /* Tablet+ : groups inline on one row, stats lock to 4 columns */
  @media (min-width: 640px) {
    .meta-bar {
      flex-direction: row;
      align-items: center;
      gap: 1.25rem;
      flex-wrap: wrap;
    }
    .meta-bar .who-group {
      flex: 0 0 auto;
    }
    .meta-bar .meta-stats {
      flex: 1 1 16rem;
      grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    }
    .meta-bar .meta-tags {
      flex: 0 0 auto;
    }
  }

  /* Action bar — like/share/save/flag buttons + keyboard hint.
     Mobile: stacked column (buttons grid above, hint below).
     Tablet+: inline row (buttons left, hint right). */
  .art-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block-start: 1rem;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-3);
    letter-spacing: 0.1em;
    & .icon-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border: 1px solid rgb(255 255 255 / 0.08);
      border-radius: var(--radius-s);
      color: var(--ink-1);
      font: inherit;
      background: transparent;
      transition:
        border-color var(--t-fast),
        color var(--t-fast);
    }
    & .icon-btn:hover {
      color: var(--lime);
      border-color: var(--lime);
    }
    & .icon-btn .glyph {
      font-size: 1rem;
    }
    & .spacer {
      flex: 1;
    }
  }
  /* Buttons group — auto-fit grid (2 → 3 → 4 cols based on space) */
  .art-actions .action-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: 0.5rem;
  }
  .art-actions .action-buttons .icon-btn {
    justify-content: center;
    inline-size: 100%; /* fill grid cell */
  }
  .art-actions .action-hint {
    margin: 0;
    color: var(--ink-3);
  }
  /* Tablet+ : buttons + hint inline on one row */
  @media (min-width: 640px) {
    .art-actions {
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
    }
    .art-actions .action-buttons {
      flex: 1 1 auto;
      grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    }
    .art-actions .action-hint {
      flex: 0 0 auto;
      margin-inline-start: auto;
    }
  }

  /* ─── ARTICLE: picture hero variant =================================== */
  .art-hero-pic {
    padding-block: clamp(1.5rem, 3vw, 2rem);
    max-inline-size: 67.5rem;
    margin-inline: auto;
    & .pic-meta-row {
      /* Camera/file metadata above the cover image — desktop only.
         Hidden below 768px to keep the mobile hero focused on the photo. */
      display: none;
      align-items: center;
      gap: 0.75rem;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.15em;
      margin-block-end: 0.875rem;
      flex-wrap: wrap;
      & .spacer {
        flex: 1;
      }
    }
  }
  @media (min-width: 768px) {
    .art-hero-pic .pic-meta-row {
      display: flex;
    }
  }
  /* Cover frame — image placeholder + camera-style overlays.
     Children stack by source order (no z-index needed). The viewfinder
     brackets sit INSIDE the frame, marking the photo composition area. */
  .cover-frame {
    position: relative;
    inline-size: 100%;
    --spacing: 1.25rem;
    /* Fluid height — matches original 520px at desktop, scales down on mobile */
    block-size: clamp(20rem, 50vw, 32.5rem);
    border-radius: var(--radius-l);
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--lime) 30%, transparent);
    box-shadow:
      0 30px 80px rgb(0 0 0 / 0.6),
      0 0 0 1px color-mix(in oklab, var(--violet) 15%, transparent),
      0 0 60px color-mix(in oklab, var(--violet) 25%, transparent);

    /* Image substrate — multi-radial gradient simulating the cover photo */
    & .cover-img {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(
          ellipse 80% 60% at 30% 30%,
          color-mix(in oklab, var(--lime) 45%, transparent) 0%,
          transparent 55%
        ),
        radial-gradient(
          ellipse 70% 50% at 75% 70%,
          color-mix(in oklab, var(--danger) 35%, transparent) 0%,
          transparent 60%
        ),
        linear-gradient(
          160deg,
          #0a0720 0%,
          var(--violet-lo) 35%,
          var(--violet) 55%,
          var(--lime) 100%
        );
    }
    & .cover-grain {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(
        0deg,
        rgb(0 0 0 / 0.22) 0 2px,
        transparent 2px 5px
      );
      mix-blend-mode: multiply;
    }
    & .cover-vignette {
      position: absolute;
      inset: 0;
      pointer-events: none;
      /* Vertical gradient — darker top + bottom edges to focus the eye */
      background: linear-gradient(
        180deg,
        rgb(7 6 13 / 0.55) 0%,
        transparent 30%,
        rgb(7 6 13 / 0.35) 60%,
        rgb(7 6 13 / 0.95) 100%
      );
    }

    /* Camera chrome — top-left REC label, top-right frame counter.
       No background — just text with shadow against the photo. */
    & .cover-tl,
    & .cover-tr {
      position: absolute;
      inset-block-start: calc(var(--spacing) * 2);
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.25em;
      text-shadow: 0 1px 4px rgb(0 0 0 / 0.8);
      & .line1 {
        margin-block-end: 4px;
      }
      & .line2 {
        opacity: 0.7;
        font-size: var(--fs-nano);
      }
    }
    & .cover-tl {
      inset-inline-start: calc(var(--spacing) * 2);
      color: color-mix(in oklab, var(--lime) 90%, transparent);
    }
    & .cover-tr {
      inset-inline-end: calc(var(--spacing) * 2);
      color: rgb(255 255 255 / 0.85);
      text-align: end;
    }

    /* Viewfinder corner brackets — inset into the frame to mark the photo
       composition area, not at the absolute corners. */
    & .bracket {
      position: absolute;
      inline-size: clamp(12px, 1.5vw, 16px);
      block-size: clamp(12px, 1.5vw, 16px);
      pointer-events: none;
      --bk: color-mix(in oklab, var(--lime) 70%, transparent);
      border: 0;
    }
    & .bracket.tl {
      inset-block-start: var(--spacing);
      inset-inline-start: var(--spacing);
      border-block-start: 1px solid var(--bk);
      border-inline-start: 1px solid var(--bk);
    }
    & .bracket.tr {
      inset-block-start: var(--spacing);
      inset-inline-end: var(--spacing);
      border-block-start: 1px solid var(--bk);
      border-inline-end: 1px solid var(--bk);
    }
    & .bracket.bl {
      inset-block-end: var(--spacing);
      inset-inline-start: var(--spacing);
      border-block-end: 1px solid var(--bk);
      border-inline-start: 1px solid var(--bk);
    }
    & .bracket.br {
      inset-block-end: var(--spacing);
      inset-inline-end: var(--spacing);
      border-block-end: 1px solid var(--bk);
      border-inline-end: 1px solid var(--bk);
    }

    /* Scan line — thin horizontal lime sweep across the photo at ~1/3 down. */
    & .cover-scan {
      position: absolute;
      inset-inline: 0;
      inset-block-start: 32%;
      block-size: 1px;
      pointer-events: none;
      background: linear-gradient(
        90deg,
        transparent,
        color-mix(in oklab, var(--lime) 50%, transparent),
        transparent
      );
      box-shadow: 0 0 10px color-mix(in oklab, var(--lime) 40%, transparent);
    }

    /* Title block at bottom of frame */
    & .cover-title {
      position: absolute;
      inset-block-end: calc(var(--spacing) * 2);
      inset-inline-start: calc(var(--spacing) * 2);
      inset-inline-end: calc(var(--spacing) * 2);
      text-align: start;
      & h1 {
        font-size: var(--fs-hero-lg);
        text-wrap: balance;
        line-height: var(--fs-hero-lg);
        color: var(--ink-0);
        text-shadow: 0 2px 20px rgb(0 0 0 / 0.8);
      }
      & .sub {
        display: block;
        color: var(--lime);
        font-size: clamp(1rem, 2.2vw, 1.625rem);
        font-weight: 500;
        letter-spacing: -0.01em;
        text-shadow: 0 2px 12px rgb(0 0 0 / 0.9);
        max-inline-size: 50rem;
        text-wrap: balance;
      }
    }

    /* Hide REC label on very small screens — too cramped */
    @media (max-width: 480px) {
      & .cover-tl {
        display: none;
      }
    }
  }

  /* Shared caption style — used for both .cover-caption (under the cover
     photo) and .art-figure figcaption (under embedded figures). They're
     conceptually the same: a small mono-font line under an image.

     The "description" span (the long text — no class, not aria-hidden)
     gets `flex: 1; min-inline-size: 0` so it fills the remaining inline
     space and wraps INSIDE its own box, keeping the leading tag (FIG.01,
     COVER →) on the same line as the start of the description. */
  .cover-caption,
  .art-figure figcaption {
    display: flex;
    margin-block-start: 0.875rem;
    gap: 0.625rem;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    flex-wrap: wrap;
    & > span:not([class]):not([aria-hidden]) {
      flex: 1;
      min-inline-size: 0;
    }
    & .c-lime,
    & .fig-tag {
      color: var(--lime);
      letter-spacing: 0.15em;
      flex: 0 0 auto;
    }
    & .c-dim {
      color: var(--ink-3);
    }
    & .spacer {
      flex: 1;
    }
  }
  .cover-dek {
    margin-block-start: 1.75rem;
    & .lede {
      font-size: var(--fs-lede);
      line-height: 1.55;
      color: var(--ink-1);
      max-inline-size: 49rem;
      margin-block-end: 1.75rem;
    }
  }

  /* ─── ARTICLE: 3-col body grid ========================================
     `minmax(0, 1fr)` is critical — without the 0 floor, grid items default
     to their min-content width and any unbreakable child (code lines,
     long URLs, fixed-width tables) can push the column past 100%. */
  .art-body {
    max-inline-size: 80rem;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-block-end: 4rem;
    /* Sweeping reset — every descendant in the article subtree opts into
       shrinking. Without this, ANY nested grid/flex with a `1fr` column
       and unbreakable content (long word, long URL, code line) re-blows
       out the article column. min-content is the default; 0 lets things
       actually shrink. */
    & * {
      min-inline-size: 0;
    }
  }
  @media (min-width: 1280px) {
    .art-body {
      grid-template-columns: 220px minmax(0, 1fr) 260px;
      gap: 2.5rem;
    }
  }
  .article {
    min-inline-size: 0;
    /* Long text content (URLs, sentences without spaces) breaks at any
       character if it would otherwise overflow. */
    & p,
    & .lede,
    & h2,
    & .reasons li {
      overflow-wrap: anywhere;
    }
  }
  .article :is(.code-block, .data-table, .art-figure, .pullquote, .art-aside) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  /* ToC nav */
  .toc-nav {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-2);
    & .toc-label {
      color: var(--ink-3);
      letter-spacing: 0.2em;
      margin-block-end: 0.75rem;
    }
    & .toc-list,
    & .toc-foot-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    & .toc-list a {
      display: grid;
      grid-template-columns: 24px 1fr;
      gap: 0.5rem;
      padding-block: 4px;
      color: var(--ink-1);
      border-block-end: 1px dashed transparent;
      transition:
        color var(--t-fast),
        border-color var(--t-fast);
    }
    & .toc-list a:hover,
    & .toc-list a.is-active {
      color: var(--lime);
      border-block-end-color: color-mix(in oklab, var(--lime) 30%, transparent);
    }
    & .toc-list a .num {
      color: var(--lime);
    }
    & .toc-foot-list {
      gap: 4px;
    }
    & .toc-foot-list li {
      display: flex;
      gap: 6px;
    }
    & .fn-num {
      color: var(--violet-hi);
    }
  }
  @media (min-width: 1280px) {
    .toc-nav {
      position: sticky;
      inset-block-start: 80px;
      block-size: fit-content;
      max-block-size: calc(100dvh - 6rem);
      overflow-y: auto;
    }
  }
  .btn-top {
    margin-block-start: 1rem;
    padding: 6px 12px;
    border: 1px solid color-mix(in oklab, var(--lime) 30%, transparent);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--lime);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: 0.15em;
  }
  .btn-top:hover {
    background: color-mix(in oklab, var(--lime) 8%, transparent);
  }

  /* ── article body content ──────────────────────────────────────────── */
  .article {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--ink-1);
    & p {
      margin: 0 0 1.25rem;
      text-wrap: pretty;
    }
    & p .lime,
    & p .lime-hi {
      color: var(--lime);
    }
    & .lede {
      font-size: var(--fs-lede);
      line-height: 1.6;
      color: var(--ink-0);
      margin-block-end: 1.5rem;
    }
    & .dropcap {
      float: inline-start;
      font-size: 5.5rem;
      font-weight: 800;
      line-height: 1;
      color: var(--lime);
      margin-inline-end: 0.5rem;
      margin-block-start: 0.25rem;
      text-shadow: 0 0 18px color-mix(in oklab, var(--violet) 40%, transparent);
    }
    & h2 {
      font-family: var(--font-sans);
      font-size: 2.375rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin: 4.5rem 0 1.25rem;
      color: var(--ink-0);
      scroll-margin-block-start: 120px;
      text-wrap: balance;
    }
    & h2 .sec-num {
      display: block;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.25em;
      font-weight: 400;
      margin-block-end: 0.5rem;
    }
    & mark.mk {
      background: color-mix(in oklab, var(--lime) 18%, transparent);
      color: var(--ink-0);
      padding: 0 2px;
    }
  }

  /* Footnote inline marker + popover */
  .fn {
    position: relative;
    display: inline;
  }
  .fn-mark {
    color: var(--lime);
    font-family: var(--font-mono);
    font-size: 0.75em;
    text-decoration: none;
    padding: 0 2px;
    vertical-align: super;
    line-height: 1;
  }
  .fn-mark:hover {
    text-decoration: underline;
  }
  .fn-peek {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 5;
    inline-size: clamp(16rem, 80vw, 22rem);
    margin-block-start: 0.375rem;
    padding: 0.75rem 0.875rem;
    background: var(--bg-1);
    border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--ink-1);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.5);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition:
      opacity var(--t-fast),
      transform var(--t-fast);
  }
  .fn:hover .fn-peek,
  .fn:focus-within .fn-peek {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .fn-peek .pk-label {
    display: block;
    color: var(--violet-hi);
    letter-spacing: 0.15em;
    margin-block-end: 0.375rem;
  }

  /* Figure */
  .art-figure {
    margin-block: 2rem;
    & .frame {
      position: relative;
      aspect-ratio: 16 / 9;
      border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
      border-radius: var(--radius-m);
      background: linear-gradient(
        135deg,
        color-mix(in oklab, var(--violet) 25%, transparent),
        var(--bg-1)
      );
      overflow: hidden;
    }
    & .fig-id {
      position: absolute;
      inset-block-start: 10px;
      inset-inline-start: 10px;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.15em;
      background: rgb(7 6 13 / 0.65);
      padding: 3px 8px;
      border-radius: 3px;
    }
    & .fig-placeholder {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      letter-spacing: 0.15em;
    }
    /* figcaption styling lives in the shared .cover-caption rule above */
  }

  /* Pull quote — gradient panel with the label notched into the top border.
     Bleeds outside the article column at desktop only (negative inline margin
     would cause horizontal overflow on mobile). */
  .pullquote {
    position: relative;
    margin-block: 3rem;
    padding: 1.75rem 2rem;
    border: 1px solid color-mix(in oklab, var(--lime) 30%, transparent);
    border-inline-start: 3px solid var(--lime);
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--lime) 6%, transparent),
      color-mix(in oklab, var(--lime) 1%, transparent)
    );
    border-radius: var(--radius-s);
    & .pq-label {
      position: absolute;
      inset-block-start: -10px;
      inset-inline-start: 20px;
      padding: 2px 10px;
      background: var(--bg-0);
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.2em;
      margin: 0;
    }
    & p {
      font-family: var(--font-sans);
      font-size: clamp(1.25rem, 2.5vw, 1.875rem);
      font-weight: 500;
      color: var(--ink-0);
      line-height: 1.3;
      letter-spacing: -0.02em;
      margin: 0;
      text-wrap: balance;
    }
    & footer {
      margin-block-start: 1rem;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      letter-spacing: 0.1em;
    }
  }
  @media (min-width: 1280px) {
    /* Bleed pullquote out of the article column for visual emphasis */
    .pullquote {
      margin-inline: -1.75rem;
    }
  }

  /* Aside (tip / warn) */
  .art-aside {
    margin-block: 2rem;
    padding: 1.125rem 1.25rem;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 0.875rem;
    border-radius: var(--radius-m);
    & .glyph {
      font-size: 1.125rem;
      line-height: 1.4;
    }
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.2em;
      margin-block-end: 0.375rem;
    }
    & .text {
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      color: var(--ink-1);
      line-height: 1.55;
    }
  }
  .art-aside.is-tip {
    border: 1px solid color-mix(in oklab, var(--lime) 35%, transparent);
    background: color-mix(in oklab, var(--lime) 4%, transparent);
    & .glyph {
      color: var(--lime);
    }
    & .label {
      color: var(--lime);
    }
  }
  .art-aside.is-warn {
    border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent);
    background: color-mix(in oklab, var(--danger) 4%, transparent);
    & .glyph {
      color: var(--danger-hi);
    }
    & .label {
      color: var(--danger-hi);
    }
  }

  /* Data table — dark slab + violet-tinted header + zebra rows.
     Horizontally scrollable on mobile so the 4-column structure stays intact. */
  .data-table {
    margin-block: 1.75rem;
    border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
    border-radius: var(--radius-m);
    overflow: hidden;
    background: #05040b;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    & .dt-head,
    & .dt-row {
      display: grid;
      grid-template-columns: minmax(7rem, 1.5fr) repeat(3, minmax(4rem, 1fr));
      gap: 1.25rem;
      padding: 0.75rem 1.25rem;
      align-items: center;
    }
    & .dt-head {
      background: color-mix(in oklab, var(--violet) 10%, transparent);
      color: var(--ink-3);
      letter-spacing: 0.2em;
      font-size: var(--fs-micro);
      text-transform: uppercase;
    }
    & .dt-head > span:nth-child(n + 2) {
      text-align: end;
    }
    & .dt-row {
      border-block-start: 1px solid rgb(255 255 255 / 0.04);
      color: var(--ink-1);
      padding-block: 0.6875rem;
    }
    & .dt-row:nth-child(even) {
      background: rgb(255 255 255 / 0.015);
    } /* zebra striping */
    & .dt-row .m {
      color: var(--ink-0);
    }
    & .dt-row .y1 {
      color: var(--ink-3);
      text-align: end;
    }
    & .dt-row .pk {
      color: var(--lime-hi);
      text-align: end;
    }
    & .dt-row .fn {
      color: var(--violet-hi);
      text-align: end;
    }
  }
  /* Allow horizontal scroll if the table can't fit at narrow widths */
  @media (max-width: 480px) {
    .data-table {
      overflow-x: auto;
    }
    .data-table .dt-head,
    .data-table .dt-row {
      min-inline-size: 22rem;
    }
  }

  /* Reasons (numbered list) */
  .article ol.reasons {
    counter-reset: r;
    list-style: none;
    padding: 0;
    margin-block: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .article ol.reasons li {
    counter-increment: r;
    padding: 1rem 1.125rem;
    border: 1px solid rgb(255 255 255 / 0.06);
    border-radius: var(--radius-m);
    background: rgb(5 4 11 / 0.4);
    position: relative;
    padding-inline-start: 3rem;
  }
  .article ol.reasons li::before {
    content: counter(r);
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: 1rem;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    display: grid;
    place-items: center;
    background: var(--lime);
    color: var(--bg-0);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: var(--radius-s);
  }

  /* Code block — dark slab + violet-tinted header + line-number column with
     right separator, matching the original visual style. */
  .code-block {
    margin-block: 1.75rem;
    border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
    border-radius: var(--radius-m);
    overflow: hidden;
    background: #04030a;
    box-shadow: inset 0 0 40px
      color-mix(in oklab, var(--violet) 8%, transparent);
    & .cb-head {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      padding: 8px 14px;
      border-block-end: 1px solid
        color-mix(in oklab, var(--violet) 20%, transparent);
      background: color-mix(in oklab, var(--violet) 6%, transparent);
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.15em;
      flex-wrap: wrap;
    }
    & .cb-dot {
      inline-size: 8px;
      block-size: 8px;
      border-radius: 50%;
    }
    & .cb-dot.r {
      background: var(--danger);
    }
    & .cb-dot.y {
      background: #ffb000;
    }
    & .cb-dot.g {
      background: var(--lime);
    }
    & .cb-title {
      margin-inline-start: 0.625rem;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.15em;
    }
    & .spacer {
      flex: 1;
    }
    & .cb-lang {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--violet-hi);
      letter-spacing: 0.2em;
      padding: 2px 7px;
      border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent);
      border-radius: 3px;
    }
    & .cb-copy {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      letter-spacing: 0.15em;
      cursor: pointer;
      background: transparent;
      border: 0;
    }
    & .cb-copy:hover {
      color: var(--lime);
    }
    & pre {
      margin: 0;
      padding: 1.125rem 0;
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      line-height: 1.8;
      color: var(--ink-1);
      overflow-x: auto;
    }
    & .ln-row {
      display: flex;
      padding-inline-start: 6px;
    }
    & .ln {
      flex: 0 0 40px;
      text-align: end;
      padding-inline-end: 18px;
      color: var(--ink-3);
      user-select: none;
      border-inline-end: 1px solid
        color-mix(in oklab, var(--violet) 18%, transparent);
      margin-inline-end: 16px;
    }
    & .com {
      color: var(--ink-3);
    }
    & .kw {
      color: var(--violet-hi);
    }
    & .str {
      color: var(--lime);
    }
    /* `.fn` inside <pre> is a code function name, not the article footnote.
       Override the .fn position:relative + popover styles. */
    & pre .fn {
      color: var(--lime);
      position: static;
      display: inline;
    }
    & pre .fn::before,
    & pre .fn::after {
      content: none;
    }
  }

  /* End of transmission */
  .transmission-end {
    margin-block: 3rem 1.5rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--lime);
    letter-spacing: 0.15em;
  }

  /* Footnotes section */
  .footnotes {
    margin-block-start: 2.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px dashed
      color-mix(in oklab, var(--violet) 25%, transparent);
    & .fn-head {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--violet-hi);
      letter-spacing: 0.25em;
      margin-block-end: 1rem;
    }
    & ol {
      list-style: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      counter-reset: f;
    }
    & li {
      display: grid;
      grid-template-columns: 2.25rem 1fr;
      gap: 0.5rem;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-2);
      line-height: 1.7;
      padding: 0.375rem 0.5rem;
      border-radius: var(--radius-s);
    }
    & li:target {
      background: color-mix(in oklab, var(--lime) 8%, transparent);
      border-inline-start: 2px solid var(--lime);
      padding-inline-start: 0.75rem;
    }
    & .n {
      color: var(--violet-hi);
    }
    & .body {
      color: var(--ink-1);
    }
    & .back {
      color: var(--lime);
      margin-inline-start: 0.375rem;
      text-decoration: underline;
      text-decoration-style: dotted;
    }
  }

  /* Author bio (inside article) */
  .author-bio {
    margin-block-start: 2.5rem;
    padding: 1.5rem 1.625rem;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.25rem;
    align-items: start;
    border: 1px solid color-mix(in oklab, var(--lime) 25%, transparent);
    border-radius: var(--radius-l);
    background: color-mix(in oklab, var(--lime) 3%, transparent);
    & .big-avatar {
      inline-size: 80px;
      block-size: 80px;
      border-radius: var(--radius-l);
      background: linear-gradient(
        135deg,
        var(--violet-lo),
        var(--violet),
        var(--lime)
      );
      image-rendering: pixelated;
      position: relative;
      overflow: hidden;
    }
    & .big-avatar::after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        rgb(0 0 0 / 0.15) 0 2px,
        transparent 2px 4px
      );
    }
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.2em;
      margin-block-end: 0.25rem;
    }
    & .name {
      font-family: var(--font-sans);
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--ink-0);
      margin-block-end: 0.375rem;
    }
    & .desc {
      font-family: var(--font-sans);
      font-size: var(--fs-sm);
      color: var(--ink-1);
      line-height: 1.6;
      margin-block-end: 0.75rem;
    }
    & .chips {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
  }

  /* Reactions */
  .reactions {
    margin-block-start: 2rem;
    & .rx-label {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.2em;
      margin-block-end: 0.75rem;
    }
    & .rx-list {
      display: flex;
      gap: 0.625rem;
      flex-wrap: wrap;
    }
    & .rx {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      padding: 0.5rem 0.875rem;
      border: 1px solid rgb(255 255 255 / 0.08);
      border-radius: var(--radius-s);
      background: rgb(5 4 11 / 0.4);
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      letter-spacing: 0.1em;
    }
    & .rx:hover {
      border-color: var(--lime);
      color: var(--lime);
    }
    & .rx .g {
      font-size: 1.125rem;
      line-height: 1;
    }
    & .rx .n {
      color: var(--ink-0);
      font-weight: 700;
    }
    & .rx .l {
      color: var(--ink-3);
      margin-inline-start: 4px;
    }
  }

  /* Prev / next */
  .prev-next {
    margin-block-start: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    & a {
      padding: 1rem 1.125rem;
      border: 1px solid color-mix(in oklab, var(--violet) 25%, transparent);
      border-radius: var(--radius-m);
      background: rgb(5 4 11 / 0.4);
      color: inherit;
    }
    & a:hover {
      border-color: var(--lime);
    }
    & .next {
      text-align: end;
    }
    & .pn-label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.2em;
      margin-block-end: 0.375rem;
    }
    & .pn-title {
      font-family: var(--font-sans);
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--ink-0);
      margin-block-end: 0.25rem;
    }
    & .pn-meta {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.15em;
    }
  }
  @media (min-width: 640px) {
    .prev-next {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Related */
  .related {
    margin-block-start: 2rem;
    & .related-label {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.2em;
      margin-block-end: 0.75rem;
    }
    & .related-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
    & .related-grid a {
      padding: 0.875rem 1rem;
      border: 1px solid rgb(255 255 255 / 0.06);
      border-radius: var(--radius-m);
      background: rgb(5 4 11 / 0.4);
      color: inherit;
    }
    & .related-grid a:hover {
      border-color: var(--violet-hi);
    }
    & .r-entry {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.2em;
    }
    & .r-title {
      font-family: var(--font-sans);
      font-size: 1rem;
      font-weight: 700;
      color: var(--ink-0);
      margin-block: 0.25rem;
    }
    & .r-meta {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.1em;
    }
  }
  @media (min-width: 640px) {
    .related .related-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Right rail (article) */
  .right-rail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
  }
  @media (min-width: 1280px) {
    .right-rail {
      position: sticky;
      inset-block-start: 80px;
      block-size: fit-content;
    }
  }
  .reader-card,
  .margin-card,
  .share-card,
  .print-card {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-m);
    background: rgb(5 4 11 / 0.4);
    border: 1px solid rgb(255 255 255 / 0.06);
  }
  .reader-card .rc-label,
  .margin-card .mc-label,
  .share-card .sc-label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-3);
    letter-spacing: 0.2em;
    margin-block-end: 0.625rem;
  }
  .margin-card.lime {
    border-color: color-mix(in oklab, var(--lime) 30%, transparent);
    background: color-mix(in oklab, var(--lime) 4%, transparent);
    & .mc-label {
      color: var(--lime);
    }
  }
  .margin-card.violet {
    border-color: color-mix(in oklab, var(--violet) 30%, transparent);
    background: color-mix(in oklab, var(--violet) 4%, transparent);
    & .mc-label {
      color: var(--violet-hi);
    }
  }
  .margin-card .mc-text {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--ink-1);
    line-height: 1.55;
  }
  .reader-setting {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    padding-block: 0.375rem;
    align-items: center;
    border-block-end: 1px dashed rgb(255 255 255 / 0.05);
    & .lb {
      color: var(--ink-3);
    }
    & .vl {
      color: var(--ink-0);
    }
    & .stepper {
      display: inline-flex;
      gap: 4px;
    }
    & .stepper span {
      display: inline-grid;
      place-items: center;
      inline-size: 18px;
      block-size: 18px;
      border: 1px solid rgb(255 255 255 / 0.1);
      border-radius: 3px;
      color: var(--ink-1);
    }
    & .family {
      display: inline-flex;
      gap: 0.5rem;
    }
    & .family span {
      color: var(--ink-3);
      cursor: pointer;
    }
    & .family span.on {
      color: var(--lime);
    }
  }
  .reader-setting:last-child {
    border-block-end: none;
  }
  .share-card .sc-item {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding-block: 4px;
    color: var(--ink-1);
  }
  .share-card .sc-item .g {
    color: var(--violet-hi);
  }
  .print-card {
    display: block;
    inline-size: 100%;
    text-align: center;
    color: var(--ink-2);
    letter-spacing: 0.15em;
    font: inherit;
    cursor: pointer;
    transition:
      color 0.15s,
      border-color 0.15s;
  }
  .print-card:hover,
  .print-card:focus-visible {
    color: var(--lime);
    border-color: color-mix(in oklab, var(--lime) 30%, transparent);
  }

  /* Floating back-to-top */
  .fab-top {
    position: fixed;
    inset-block-end: clamp(80px, 8vw, 100px);
    inset-inline-end: 1rem;
    z-index: 20;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--bg-0);
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow:
      0 6px 20px rgb(0 0 0 / 0.5),
      0 0 30px color-mix(in oklab, var(--lime) 35%, transparent);
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity var(--t-base),
      transform var(--t-base);
    pointer-events: none;
  }
  .fab-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* ─── DRAFT page ====================================================== */
  .draft-banner {
    position: sticky;
    inset-block-start: 0;
    z-index: 15;
    padding: 0.625rem var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    background: linear-gradient(
      90deg,
      color-mix(in oklab, var(--danger) 15%, transparent),
      color-mix(in oklab, var(--violet) 15%, transparent)
    );
    border-block-end: 1px solid var(--danger);
    display: flex;
    gap: 1rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--danger-hi);
    letter-spacing: 0.15em;
    backdrop-filter: blur(12px);
    flex-wrap: wrap;
    & .pulse {
      animation: blink 1s steps(2) infinite;
    }
    & .label {
      color: var(--ink-0);
      font-weight: 700;
    }
    & .dot {
      color: var(--ink-3);
    }
    & .spacer {
      flex: 1;
    }
    & .act {
      padding: 3px 8px;
      border: 1px solid rgb(255 255 255 / 0.15);
      border-radius: 3px;
      color: var(--ink-1);
      cursor: pointer;
      background: transparent;
      font: inherit;
      letter-spacing: inherit;
    }
    & .act.share {
      border-color: color-mix(in oklab, var(--lime) 30%, transparent);
      color: var(--lime);
    }
    & .act.pub {
      background: var(--lime);
      color: var(--bg-0);
      border-color: var(--lime);
      font-weight: 700;
    }
  }
  .draft-hero {
    padding-block: 2.5rem 1.25rem;
    position: relative;
    z-index: 3;
    max-inline-size: 49rem;
    margin-inline: auto;
    & .watermark {
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image: repeating-linear-gradient(
        -30deg,
        transparent 0 150px,
        color-mix(in oklab, var(--danger) 5%, transparent) 150px 300px
      );
    }
    & .eyebrow {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.25em;
      text-transform: uppercase;
      margin-block-end: 0.875rem;
    }
    & .dek {
      font-size: var(--fs-lede);
      line-height: 1.55;
      color: var(--ink-1);
      max-inline-size: 45rem;
      margin: 0 0 1.25rem;
      text-wrap: pretty;
    }
  }
  .draft-body {
    font-family: Georgia, serif;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--ink-1);
    margin-block-start: 1.5rem;
    & p {
      margin: 0 0 1.125rem;
      text-wrap: pretty;
    }
    & p.outline {
      color: var(--ink-3);
    }
  }
  .draft-tools {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.625rem;
    padding-block: 1rem 2.5rem;
    max-inline-size: 75rem;
    margin-inline: auto;
  }
  @media (min-width: 1024px) {
    .draft-tools {
      grid-template-columns: 1fr 320px;
    }
  }
  .writing-stats {
    padding: 1.375rem 1.625rem;
    background: rgb(5 4 11 / 0.5);
    border: 1px dashed color-mix(in oklab, var(--violet) 35%, transparent);
    border-radius: var(--radius-l);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--ink-2);
    line-height: 1.7;
    & .label {
      color: var(--violet-hi);
      letter-spacing: 0.3em;
      margin-block-end: 0.75rem;
      font-size: var(--fs-micro);
    }
    & .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.875rem;
      margin-block-end: 1rem;
    }
    & .grid .n {
      font-family: var(--font-sans);
      font-size: 1.625rem;
      font-weight: 800;
      color: var(--lime);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    & .grid .k {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      letter-spacing: 0.2em;
      margin-block-start: 4px;
      text-transform: uppercase;
    }
    & .autosave {
      padding: 0.625rem 0.75rem;
      background: color-mix(in oklab, var(--lime) 4%, transparent);
      border: 1px dashed color-mix(in oklab, var(--lime) 25%, transparent);
      border-radius: var(--radius-s);
      color: var(--ink-1);
      font-size: var(--fs-meta);
      line-height: 1.6;
    }
    & .autosave .on {
      color: var(--lime);
    }
  }
  @media (min-width: 480px) {
    .writing-stats .grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .draft-aside {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .publish-panel {
    padding: 1.125rem 1.25rem;
    background: color-mix(in oklab, var(--lime) 4%, transparent);
    border: 1px solid var(--lime);
    border-radius: var(--radius-l);
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.3em;
      margin-block-end: 0.75rem;
    }
    & .rows {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
    }
    & .row {
      display: grid;
      grid-template-columns: 30px 1fr;
      gap: 0.625rem;
      padding-block: 6px;
      border-block-start: 1px dashed rgb(255 255 255 / 0.05);
    }
    & .row:first-child {
      border-block-start: none;
    }
    & .row .k {
      color: var(--ink-3);
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
    & .row .v {
      color: var(--ink-0);
    }
    & .cta {
      inline-size: 100%;
      margin-block-start: 0.875rem;
      padding-block: 0.6875rem;
      font-size: var(--fs-meta);
      justify-content: center;
    }
    & .alt {
      margin-block-start: 0.5rem;
      text-align: center;
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      letter-spacing: 0.2em;
    }
  }
  .reviewer-mode {
    padding: 1rem 1.125rem;
    background: rgb(5 4 11 / 0.5);
    border: 1px dashed color-mix(in oklab, var(--violet) 35%, transparent);
    border-radius: var(--radius-l);
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--violet-hi);
      letter-spacing: 0.3em;
      margin-block-end: 0.625rem;
    }
    & .note {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      line-height: 1.6;
      margin-block-end: 0.625rem;
    }
    & .url {
      padding: 8px 10px;
      border-radius: var(--radius-s);
      background: var(--bg-1);
      border: 1px solid color-mix(in oklab, var(--lime) 20%, transparent);
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      display: flex;
      gap: 6px;
      align-items: center;
    }
    & .url .u {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    & .url .copy {
      color: var(--ink-3);
      cursor: pointer;
      background: transparent;
    }
    & .foot {
      margin-block-start: 0.5rem;
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      letter-spacing: 0.15em;
    }
  }
  .checklist {
    padding: 1rem 1.125rem;
    background: color-mix(in oklab, var(--danger) 3%, transparent);
    border: 1px dashed color-mix(in oklab, var(--danger) 30%, transparent);
    border-radius: var(--radius-l);
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--danger-hi);
      letter-spacing: 0.3em;
      margin-block-end: 0.625rem;
    }
    & .items {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
    }
    & .ok {
      color: var(--lime);
    }
    & .err {
      color: var(--danger-hi);
    }
  }

  /* ─── AUTHOR PAGE ===================================================== */
  .author-meta {
    margin-top: 1rem;
  }

  .author-card {
    position: relative;
    padding: 1.5rem 1.5rem 1.625rem;
    background: linear-gradient(
      135deg,
      color-mix(in oklab, var(--lime) 6%, transparent),
      color-mix(in oklab, var(--violet) 8%, transparent)
    );
    border: 1px solid var(--lime);
    border-radius: var(--radius-xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: center;
    box-shadow: 0 0 48px color-mix(in oklab, var(--lime) 12%, transparent);
  }
  @media (min-width: 768px) {
    .author-card {
      grid-template-columns: auto 1fr auto;
      gap: 1.75rem;
    }
  }
  .author-avatar-wrap {
    inline-size: 140px;
    block-size: 140px;
    border-radius: var(--radius-l);
    background: linear-gradient(135deg, var(--violet), var(--lime));
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
  }
  .author-avatar-wrap .pixel-avatar {
    inline-size: 120px;
    block-size: 120px;
  }
  .author-avatar-wrap .scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      0deg,
      rgb(0 0 0 / 0.3) 0 1px,
      transparent 1px 3px
    );
  }
  .author-card .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--lime);
    letter-spacing: 0.3em;
    margin-block-end: 0.5rem;
  }
  .author-card h1 {
    font-family: var(--font-sans);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.95;
    margin: 0 0 0.625rem;
  }
  .author-card .bio {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--ink-1);
    line-height: 1.7;
    max-inline-size: 32rem;
  }
  .author-card .bio .hi {
    color: var(--ink-0);
  }
  .author-card .id-col {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    align-items: flex-start;
  }
  @media (min-width: 768px) {
    .author-card .id-col {
      align-items: flex-end;
    }
  }
  .author-card .id-col .lab {
    font-family: var(--font-mono);
    font-size: var(--fs-nano);
    color: var(--ink-3);
    letter-spacing: 0.25em;
  }
  .author-card .id-col .id {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--lime);
    padding: 4px 10px;
    border: 1px solid color-mix(in oklab, var(--lime) 30%, transparent);
    border-radius: var(--radius-s);
  }
  .author-card .id-col .joined {
    font-family: var(--font-mono);
    font-size: var(--fs-nano);
    color: var(--ink-3);
    letter-spacing: 0.2em;
    margin-block-start: 4px;
  }
  .author-card .id-col .online {
    font-family: var(--font-mono);
    font-size: var(--fs-nano);
    color: var(--lime);
    letter-spacing: 0.2em;
  }

  /* Author stats — flex with wrap. 2 cols at narrow viewports, naturally
     promotes to 3 → 4 → 5 cols as space allows. Same auto-flow pattern
     as .meta-stats but with a wider min-width so each stat fits the
     bigger value (e.g. "286k", "2021"). */
  .author-stats {
    margin-block-start: 1.375rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .author-stats .stat {
    /* Mobile: basis ~50% forces 2 stats per row */
    flex: 1 1 calc((100% - 0.75rem) / 2);
    min-inline-size: 7rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-m);
    background: rgb(5 4 11 / 0.6);
    border: 1px dashed color-mix(in oklab, var(--violet) 30%, transparent);
  }
  /* Tablet+: shrink basis so all 5 stats can fit on one line when there's room */
  @media (min-width: 640px) {
    .author-stats .stat {
      flex: 1 1 7rem;
    }
  }
  .author-stats .stat .v {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--lime);
  }
  .author-stats .stat .l {
    font-family: var(--font-mono);
    font-size: var(--fs-nano);
    color: var(--ink-3);
    letter-spacing: 0.2em;
    margin-block-start: 6px;
    text-transform: uppercase;
  }

  .author-body {
    padding-block: 1.25rem 2.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.625rem;
  }
  @media (min-width: 1024px) {
    .author-body {
      grid-template-columns: 1fr 340px;
    }
  }
  .author-body .col-label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--lime);
    letter-spacing: 0.25em;
    margin-block-end: 0.875rem;
  }

  /* Author post-list rows share styling with .tag-post-row — see that block. */

  .rail-col {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .rail-card {
    padding: 1rem 1.125rem;
    border-radius: var(--radius-m);
    background: rgb(5 4 11 / 0.6);
    border: 1px solid color-mix(in oklab, var(--lime) 25%, transparent);
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.25em;
      margin-block-end: 0.625rem;
    }
  }
  .rail-card.is-violet {
    background: color-mix(in oklab, var(--violet) 5%, transparent);
    border-color: color-mix(in oklab, var(--violet) 30%, transparent);
    & .label {
      color: var(--violet-hi);
    }
  }
  .rail-card.is-now {
    background: color-mix(in oklab, var(--lime) 4%, transparent);
    border: 1px dashed color-mix(in oklab, var(--lime) 30%, transparent);
  }

  .elsewhere-row {
    display: grid;
    grid-template-columns: 0.5fr 1fr auto;
    gap: 8px;
    padding-block: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    border-block-start: 1px dashed rgb(255 255 255 / 0.05);
    & .k {
      color: var(--ink-3);
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
    & .v {
      color: var(--ink-1);
      overflow: hidden;
      text-overflow: ellipsis;
    }
    & .ico {
      color: var(--lime);
    }
  }
  .elsewhere-row:first-of-type {
    border-block-start: none;
  }

  .topic-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .topic-row {
    display: grid;
    grid-template-columns: 70px 1fr 30px;
    gap: 10px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    & .t {
      color: var(--ink-1);
    }
    & .track {
      block-size: 6px;
      background: rgb(255 255 255 / 0.05);
      border-radius: 3px;
      overflow: hidden;
    }
    & .track .fill {
      block-size: 100%;
      background: linear-gradient(90deg, var(--violet), var(--lime));
    }
    & .c {
      color: var(--ink-3);
      text-align: end;
    }
  }

  .now-text {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-1);
    line-height: 1.7;
    & .hi {
      color: var(--ink-0);
    }
    & .lime {
      color: var(--lime);
    }
    & .violet {
      color: var(--violet-hi);
    }
    & .pink {
      color: var(--danger-hi);
    }
    & .updated {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      letter-spacing: 0.2em;
      margin-block-start: 0.625rem;
      display: block;
    }
  }

  /* ─── EMBEDS catalog ================================================== */
  .emb-list {
    padding-block: 1.25rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
  }
  .emb-case .head {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    margin-block-end: 0.75rem;
    flex-wrap: wrap;
  }
  .emb-case .slug {
    padding: 3px 10px;
    background: color-mix(in oklab, var(--lime) 8%, transparent);
    border: 1px dashed color-mix(in oklab, var(--lime) 30%, transparent);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--lime);
    letter-spacing: 0.2em;
  }
  .emb-case .desc {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-3);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .emb-bookmark {
    display: grid;
    grid-template-columns: 1fr 80px;
    background: rgb(5 4 11 / 0.5);
    border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
    border-radius: var(--radius-m);
    overflow: hidden;
    color: inherit;
    & .l {
      padding: 1.125rem 1.375rem;
    }
    & .l .t {
      font-family: var(--font-sans);
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--ink-0);
      margin-block-end: 6px;
      letter-spacing: -0.02em;
    }
    & .l .e {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      line-height: 1.55;
      margin-block-end: 0.625rem;
    }
    & .l .m {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.1em;
    }
    & .l .m .on {
      color: var(--lime);
    }
    & .r {
      background: linear-gradient(
        135deg,
        color-mix(in oklab, var(--violet) 30%, transparent),
        color-mix(in oklab, var(--lime) 15%, transparent)
      );
      display: grid;
      place-items: center;
      font-family: var(--font-mono);
      font-size: 2rem;
      color: var(--ink-0);
    }
  }
  @media (min-width: 480px) {
    .emb-bookmark {
      grid-template-columns: 1fr 120px;
    }
  }

  .emb-callouts {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .callout {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-m);
    display: grid;
    grid-template-columns: 24px 56px 1fr;
    gap: 0.75rem;
    align-items: center;
    & .icn {
      font-size: 1.25rem;
    }
    & .tone {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      letter-spacing: 0.3em;
    }
    & .t {
      font-family: Georgia, serif;
      font-size: 0.9375rem;
      color: var(--ink-1);
      line-height: 1.6;
    }
  }
  .callout.info {
    background: color-mix(in oklab, var(--violet) 6%, transparent);
    border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent);
    & .tone {
      color: var(--violet-hi);
    }
  }
  .callout.warn {
    background: color-mix(in oklab, var(--danger) 5%, transparent);
    border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent);
    & .tone {
      color: var(--danger-hi);
    }
  }
  .callout.ok {
    background: color-mix(in oklab, var(--lime) 5%, transparent);
    border: 1px solid color-mix(in oklab, var(--lime) 30%, transparent);
    & .tone {
      color: var(--lime);
    }
  }
  .callout.fun {
    background: rgb(255 255 255 / 0.03);
    border: 1px solid rgb(255 255 255 / 0.1);
    & .tone {
      color: var(--ink-0);
    }
  }

  .emb-toggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .emb-toggles details {
    padding: 0.875rem 1.125rem;
    background: rgb(5 4 11 / 0.5);
    border-radius: var(--radius-m);
    border: 1px solid rgb(255 255 255 / 0.08);
    & summary {
      display: flex;
      gap: 0.75rem;
      align-items: center;
      cursor: pointer;
      list-style: none;
    }
    & summary::-webkit-details-marker {
      display: none;
    }
    & summary .chev {
      color: var(--ink-3);
      transition: transform var(--t-fast);
    }
    & summary .lbl {
      font-family: var(--font-sans);
      font-size: 1rem;
      font-weight: 700;
      color: var(--ink-1);
    }
    &[open] {
      border-color: color-mix(in oklab, var(--lime) 25%, transparent);
    }
    &[open] summary .chev {
      transform: rotate(90deg);
      color: var(--lime);
    }
    &[open] summary .lbl {
      color: var(--ink-0);
    }
    & .body {
      margin-block-start: 0.75rem;
      padding-block-start: 0.75rem;
      border-block-start: 1px dashed rgb(255 255 255 / 0.08);
      padding-inline-start: 1.875rem;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-2);
      line-height: 1.7;
    }
    & .body .pr {
      color: var(--ink-3);
    }
  }

  .emb-btns {
    display: flex;
    gap: 0.875rem;
    justify-content: center;
    padding-block: 0.625rem;
    flex-wrap: wrap;
  }
  .emb-file {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.875rem 1.125rem;
    background: rgb(5 4 11 / 0.5);
    border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
    border-radius: var(--radius-m);
    color: inherit;
    & .ic {
      inline-size: 46px;
      block-size: 46px;
      border-radius: var(--radius-s);
      background: color-mix(in oklab, var(--violet) 15%, transparent);
      display: grid;
      place-items: center;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--violet-hi);
      letter-spacing: 0.1em;
      font-weight: 700;
    }
    & .t {
      font-family: var(--font-sans);
      font-size: 0.9375rem;
      font-weight: 700;
      color: var(--ink-0);
      margin-block-end: 3px;
    }
    & .m {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.1em;
    }
    & .dl {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.2em;
    }
  }

  .emb-product {
    display: grid;
    grid-template-columns: 1fr;
    background: rgb(5 4 11 / 0.55);
    border: 1px solid color-mix(in oklab, var(--lime) 25%, transparent);
    border-radius: var(--radius-l);
    overflow: hidden;
    & .ph {
      padding: 2.5rem 1rem;
      background: linear-gradient(180deg, var(--violet), var(--bg-0));
      display: grid;
      place-items: center;
      font-family: var(--font-sans);
      font-size: 2rem;
      font-weight: 900;
      color: var(--ink-0);
    }
    & .body {
      padding: 1rem 1.25rem;
    }
    & .t {
      font-family: var(--font-sans);
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--ink-0);
      margin-block-end: 4px;
    }
    & .stars {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.15em;
      margin-block-end: 0.625rem;
    }
    & .r {
      font-family: Georgia, serif;
      font-size: var(--fs-sm);
      color: var(--ink-1);
      line-height: 1.6;
      margin-block-end: 0.75rem;
      text-wrap: pretty;
    }
  }
  @media (min-width: 480px) {
    .emb-product {
      grid-template-columns: 140px 1fr;
    }
  }

  .emb-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(
      135deg,
      color-mix(in oklab, var(--violet) 30%, transparent),
      color-mix(in oklab, var(--lime) 15%, transparent)
    );
    border: 1px solid color-mix(in oklab, var(--lime) 25%, transparent);
    border-radius: var(--radius-m);
    overflow: hidden;
    & .sc {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        rgb(0 0 0 / 0.2) 0 2px,
        transparent 2px 4px
      );
    }
    & .play {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      gap: 0.625rem;
    }
    & .play .btn {
      inline-size: 70px;
      block-size: 70px;
      border-radius: 50%;
      background: var(--lime);
      display: grid;
      place-items: center;
      font-size: 1.75rem;
      color: var(--bg-0);
      box-shadow: 0 0 40px color-mix(in oklab, var(--lime) 50%, transparent);
    }
    & .play .t {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-0);
      letter-spacing: 0.2em;
      text-align: center;
      margin-block-start: 0.625rem;
    }
  }

  .emb-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  @media (min-width: 480px) {
    .emb-gallery {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .emb-gallery .cell {
    aspect-ratio: 4/3;
    border-radius: var(--radius-s);
    border: 1px solid rgb(255 255 255 / 0.08);
    display: flex;
    align-items: flex-end;
    padding: 0.625rem;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-0);
    letter-spacing: 0.15em;
  }

  .emb-header {
    padding: 2.5rem 1.875rem;
    background: radial-gradient(
      ellipse at center,
      color-mix(in oklab, var(--violet) 30%, transparent),
      var(--bg-0)
    );
    border: 1px solid var(--lime);
    border-radius: var(--radius-m);
    text-align: center;
    position: relative;
    overflow: hidden;
    & .sc {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        rgb(0 0 0 / 0.2) 0 1px,
        transparent 1px 3px
      );
      pointer-events: none;
    }
    & .in {
      position: relative;
      z-index: 2;
    }
    & .e {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.3em;
      margin-block-end: 0.5rem;
    }
    & h2 {
      font-family: var(--font-sans);
      font-size: 2.5rem;
      font-weight: 800;
      color: var(--ink-0);
      letter-spacing: -0.03em;
      margin: 0 0 0.5rem;
      text-wrap: balance;
    }
    & p {
      font-family: Georgia, serif;
      font-size: 0.9375rem;
      color: var(--ink-1);
      margin: 0;
    }
  }

  .emb-audio {
    padding: 0.875rem 1.125rem;
    background: rgb(5 4 11 / 0.55);
    border: 1px solid color-mix(in oklab, var(--lime) 20%, transparent);
    border-radius: var(--radius-m);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    & .btn {
      inline-size: 40px;
      block-size: 40px;
      border-radius: 50%;
      background: var(--lime);
      color: var(--bg-0);
      display: grid;
      place-items: center;
      font-size: 1rem;
    }
    & .lb {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.2em;
      margin-block-end: 4px;
    }
    & .bar {
      block-size: 4px;
      border-radius: 2px;
      background: rgb(255 255 255 / 0.1);
      overflow: hidden;
    }
    & .bar .fill {
      block-size: 100%;
      inline-size: 34%;
      background: linear-gradient(90deg, var(--violet), var(--lime));
    }
    & .time {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
    }
  }

  .emb-email-cta,
  .emb-signup,
  .emb-html,
  .emb-md,
  .emb-code {
    /* containers in their @media as needed */
  }
  .emb-email-cta {
    padding: 1.375rem 1.5rem;
    background: color-mix(in oklab, var(--lime) 5%, transparent);
    border: 1px dashed var(--lime);
    border-radius: var(--radius-m);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: center;
    & .e {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.3em;
      margin-block-end: 0.5rem;
    }
    & .t {
      font-family: var(--font-sans);
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--ink-0);
      margin-block-end: 4px;
    }
    & .s {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
    }
  }
  @media (min-width: 640px) {
    .emb-email-cta {
      grid-template-columns: 1fr auto;
    }
  }

  .emb-signup {
    padding: 1.625rem 1.75rem;
    background: color-mix(in oklab, var(--violet) 6%, transparent);
    border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent);
    border-radius: var(--radius-m);
    text-align: center;
    & .t {
      font-family: var(--font-sans);
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--ink-0);
      margin-block-end: 6px;
      letter-spacing: -0.02em;
    }
    & .s {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      margin-block-end: 1rem;
      letter-spacing: 0.1em;
    }
    & .form {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      max-inline-size: 28rem;
      margin-inline: auto;
    }
    & .form input {
      padding: 0.6875rem 0.875rem;
      background: var(--bg-1);
      border: 1px solid color-mix(in oklab, var(--lime) 30%, transparent);
      border-radius: var(--radius-s);
      font-family: var(--font-mono);
      font-size: var(--fs-ui);
      color: var(--ink-0);
    }
  }
  @media (min-width: 480px) {
    .emb-signup .form {
      grid-template-columns: 1fr auto;
    }
  }

  .emb-html {
    background: var(--bg-1);
    border: 1px dashed color-mix(in oklab, var(--violet) 30%, transparent);
    border-radius: var(--radius-m);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-2);
    line-height: 1.7;
    padding: 0.875rem 1.125rem;
    /* Container clips so the inner pre can't push the card wider; the
       label stays static while only the code line scrolls horizontally. */
    overflow: hidden;
    min-inline-size: 0;
    & .lbl {
      color: var(--ink-3);
      letter-spacing: 0.2em;
      font-size: var(--fs-nano);
      margin-block-end: 0.625rem;
    }
    & pre {
      margin: 0;
      overflow-x: auto; /* horizontal scroll inside the pre */
      min-inline-size: 0;
    }
    & .tag {
      color: var(--danger-hi);
    }
    & .attr {
      color: var(--violet-hi);
    }
    & .str {
      color: var(--lime);
    }
  }

  .emb-code {
    border-radius: var(--radius-m);
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--lime) 25%, transparent);
    & .top {
      display: flex;
      gap: 0.625rem;
      align-items: center;
      padding: 9px 14px;
      background: color-mix(in oklab, var(--lime) 5%, transparent);
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-2);
      letter-spacing: 0.2em;
      flex-wrap: wrap;
    }
    & .top .on {
      color: var(--lime);
    }
    & .top .sp {
      flex: 1;
    }
    & .top .dim {
      color: var(--ink-3);
    }
    & .top .copy {
      color: var(--lime);
      cursor: pointer;
    }
    & .body {
      background: var(--bg-1);
      padding: 0.875rem 1.125rem;
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      color: var(--ink-2);
      line-height: 1.7;
      overflow-x: auto;
    }
    & .body .cm {
      color: var(--ink-3);
    }
    & .body .kw {
      color: var(--danger-hi);
    }
    & .body .fn {
      color: var(--violet-hi);
    }
    & .body .st {
      color: var(--lime);
    }
  }

  .emb-md {
    padding: 1rem 1.25rem;
    background: rgb(5 4 11 / 0.5);
    border: 1px dashed rgb(255 255 255 / 0.1);
    border-radius: var(--radius-m);
    font-family: Georgia, serif;
    font-size: 0.9375rem;
    color: var(--ink-1);
    line-height: 1.7;
    & strong {
      color: var(--ink-0);
    }
  }

  .emb-dividers {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    padding-block: 0.875rem;
  }
  .emb-dividers .d1 {
    block-size: 1px;
    background: rgb(255 255 255 / 0.1);
  }
  .emb-dividers .d2 {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--lime);
    letter-spacing: 0.5em;
  }
  .emb-dividers .d3 {
    block-size: 1px;
    background: repeating-linear-gradient(
      90deg,
      var(--lime) 0 8px,
      transparent 8px 16px
    );
  }

  /* ─── COMMENTS ======================================================== */
  .cmt-page {
    max-inline-size: 49rem;
    margin-inline: auto;
  }

  .cmt-head {
    padding-block: clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
    & .back {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-3);
      letter-spacing: 0.15em;
      margin-block-end: 0.625rem;
    }
    & .back a {
      color: var(--lime);
    }
    & h2 {
      font-family: var(--font-sans);
      font-size: var(--fs-h1);
      font-weight: 800;
      letter-spacing: -0.035em;
      line-height: 0.98;
      margin-block-end: 0.625rem;
    }
    & .meta {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-2);
      letter-spacing: 0.08em;
    }
  }

  .cmt-composer {
    padding: 1rem 1.125rem;
    background: rgb(5 4 11 / 0.55);
    border: 1px solid var(--lime);
    border-radius: var(--radius-l);
    box-shadow: 0 0 32px color-mix(in oklab, var(--lime) 10%, transparent);
    margin-block-end: 1.25rem;
    & .head {
      display: flex;
      gap: 0.75rem;
      align-items: center;
      margin-block-end: 0.75rem;
      flex-wrap: wrap;
    }
    & .head .pixel-avatar {
      inline-size: 36px;
      block-size: 36px;
      flex: 0 0 auto;
    }
    & .head .name {
      font-family: var(--font-sans);
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--ink-0);
    }
    & .head .tier {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.15em;
    }
    & .head .spacer {
      flex: 1;
    }
    & .head .hint {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.15em;
    }
    & .field {
      min-block-size: 90px;
      padding: 0.6875rem 0.875rem;
      background: var(--bg-1);
      border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent);
      border-radius: var(--radius-s);
      font-family: var(--font-mono);
      font-size: var(--fs-ui);
      color: var(--ink-2);
      line-height: 1.6;
      inline-size: 100%;
      resize: vertical;
    }
    & .tools {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      margin-block-start: 0.75rem;
      flex-wrap: wrap;
    }
    & .tools button.glyph {
      padding: 5px 9px;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      border: 1px solid rgb(255 255 255 / 0.08);
      border-radius: 4px;
      background: transparent;
    }
    & .tools button.glyph:hover {
      color: var(--lime);
      border-color: var(--lime);
    }
    & .tools .spacer {
      flex: 1;
    }
    & .tools .count {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.1em;
    }
  }

  .cmt-sort {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    letter-spacing: 0.1em;
    flex-wrap: wrap;
    margin-block-end: 1.25rem;
    & .lab {
      color: var(--ink-3);
    }
    & .pill {
      padding: 4px 9px;
      color: var(--ink-2);
      border: 1px solid rgb(255 255 255 / 0.08);
      border-radius: 3px;
      background: transparent;
      font: inherit;
      letter-spacing: inherit;
    }
    & .pill[aria-pressed="true"] {
      background: color-mix(in oklab, var(--lime) 10%, transparent);
      color: var(--lime);
      border-color: var(--lime);
    }
    & .spacer {
      flex: 1;
    }
    & .sub {
      color: var(--ink-3);
    }
    & .unsub {
      padding: 4px 8px;
      border: 1px solid color-mix(in oklab, var(--lime) 25%, transparent);
      color: var(--lime);
      border-radius: 3px;
      background: transparent;
      font: inherit;
      letter-spacing: inherit;
    }
  }

  .cmt {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0.875rem;
    padding: 1.25rem 1.125rem;
    border-block-end: 1px dashed rgb(255 255 255 / 0.08);
    border-inline-start: 2px solid transparent;
    & .pixel-avatar {
      inline-size: 36px;
      block-size: 36px;
    }
    & .meta {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      margin-block-end: 0.375rem;
      flex-wrap: wrap;
    }
    & .meta .name {
      font-family: var(--font-sans);
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--ink-0);
    }
    & .meta .age {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.1em;
    }
    & .meta .pinned {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--lime);
      letter-spacing: 0.2em;
    }
    & .badge {
      padding: 2px 7px;
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 700;
      color: var(--bg-0);
      border-radius: 3px;
      letter-spacing: 0.2em;
    }
    & .badge.author {
      background: var(--lime);
    }
    & .badge.paid {
      background: var(--violet-hi);
    }
    & .badge.hidden {
      background: transparent;
      color: var(--ink-3);
      border: 1px solid rgb(255 255 255 / 0.15);
    }
    & .text {
      font-family: Georgia, serif;
      font-size: 0.9375rem;
      color: var(--ink-1);
      line-height: 1.7;
      text-wrap: pretty;
    }
    & .text code {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      background: color-mix(in oklab, var(--lime) 8%, transparent);
      padding: 1px 5px;
      border-radius: 3px;
      color: var(--lime);
    }
    & .actions {
      display: flex;
      gap: 0.875rem;
      align-items: center;
      margin-block-start: 0.75rem;
      flex-wrap: wrap;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-3);
      letter-spacing: 0.1em;
    }
    & .actions button,
    & .actions a {
      color: var(--ink-2);
      background: transparent;
      font: inherit;
      letter-spacing: inherit;
    }
    & .actions .up.hot {
      color: var(--lime);
    }
    & .actions .edit {
      color: var(--lime);
    }
    & .replies {
      margin-block-start: 1rem;
      padding-inline-start: 1.25rem;
      border-inline-start: 1px dashed
        color-mix(in oklab, var(--violet) 30%, transparent);
    }
  }
  .cmt.is-highlighted {
    background: linear-gradient(
      90deg,
      color-mix(in oklab, var(--lime) 4%, transparent),
      transparent 60%
    );
    border-inline-start-color: var(--lime);
  }
  .cmt.is-hidden {
    opacity: 0.4;
    & .text {
      font-style: italic;
    }
  }

  .cmt-loadmore {
    margin-block-start: 1.75rem;
    text-align: center;
    & button {
      padding: 10px 20px;
      border: 1px dashed color-mix(in oklab, var(--lime) 30%, transparent);
      border-radius: var(--radius-s);
      color: var(--lime);
      background: transparent;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      letter-spacing: 0.15em;
    }
  }

  .cmt-gate {
    margin-block-start: 1.875rem;
    border: 1px solid color-mix(in oklab, var(--violet) 32%, transparent);
    border-radius: var(--radius-l);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--violet) 10%, transparent),
        rgb(7 6 13 / 0.55)
      ),
      repeating-linear-gradient(
        135deg,
        transparent 0 11px,
        color-mix(in oklab, var(--violet) 7%, transparent) 11px 12px
      );
    overflow: hidden;
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.04),
      0 24px 60px -32px color-mix(in oklab, var(--violet) 60%, transparent);
    & > .tbar {
      background: linear-gradient(
        180deg,
        color-mix(in oklab, var(--violet) 16%, transparent),
        var(--bg-2)
      );
      & .right.rabbit {
        color: var(--danger-hi);
        letter-spacing: 0.25em;
        font-size: var(--fs-micro);
      }
    }
    & > .gate-body {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
      padding: 1.5rem clamp(1rem, 3vw, 1.75rem) 1.625rem;
    }
    & .seal {
      display: grid;
      place-items: center;
      gap: 0.5rem;
      padding: 1.125rem 1rem;
      background: color-mix(in oklab, var(--violet) 18%, transparent);
      border: 1px dashed color-mix(in oklab, var(--violet) 50%, transparent);
      clip-path: polygon(
        0 6px,
        6px 6px,
        6px 0,
        calc(100% - 6px) 0,
        calc(100% - 6px) 6px,
        100% 6px,
        100% calc(100% - 6px),
        calc(100% - 6px) calc(100% - 6px),
        calc(100% - 6px) 100%,
        6px 100%,
        6px calc(100% - 6px),
        0 calc(100% - 6px)
      );
    }
    & .seal-glyph {
      font-family: var(--font-sans);
      font-size: clamp(2.75rem, 7vw, 4.25rem);
      line-height: 1;
      font-weight: 800;
    }
    & .seal-tag {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--violet-hi);
      letter-spacing: 0.3em;
    }
    & .copy {
      min-inline-size: 0;
    }
    & .eyebrow {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--danger-hi);
      letter-spacing: 0.25em;
      margin: 0 0 0.75rem;
    }
    & .title {
      font-family: var(--font-sans);
      font-size: clamp(1.375rem, 3vw, 1.75rem);
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.1;
      color: var(--ink-0);
      margin: 0 0 0.625rem;
    }
    & .desc {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      line-height: 1.65;
      margin: 0 0 1.125rem;
      max-inline-size: 44ch;
    }
    & .scan {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
      padding: 0.5625rem 0.875rem;
      margin-block-end: 1.125rem;
      background: rgb(5 4 11 / 0.55);
      border: 1px solid color-mix(in oklab, var(--lime) 22%, transparent);
      border-radius: var(--radius-s);
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.15em;
      color: var(--ink-2);
    }
    & .scan-label {
      color: var(--lime);
    }
    & .scan-track {
      position: relative;
      flex: 1 1 8rem;
      min-inline-size: 7rem;
      block-size: 4px;
      background: color-mix(in oklab, var(--lime) 12%, transparent);
      border-radius: 2px;
      overflow: hidden;
    }
    & .scan-bar {
      position: absolute;
      inset-block: 0;
      inline-size: 30%;
      background: linear-gradient(90deg, transparent, var(--lime), transparent);
      animation: cmt-gate-scan 2.4s linear infinite;
    }
    & .scan-state {
      color: var(--danger-hi);
    }
    & .actions {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
      align-items: center;
    }
    & .actions .btn-outline {
      font-size: var(--fs-meta);
      letter-spacing: 0.15em;
    }
  }
  @keyframes cmt-gate-scan {
    0% {
      left: -30%;
    }
    100% {
      left: 100%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cmt-gate .scan-bar {
      animation: none;
      left: 35%;
    }
  }
  @media (min-width: 640px) {
    .cmt-gate > .gate-body {
      grid-template-columns: minmax(7rem, 9rem) 1fr;
      gap: 1.625rem;
      padding-block: 1.75rem;
    }
  }

  /* ─── PAYWALL ========================================================= */
  .pay-page {
    max-inline-size: 49rem;
    margin-inline: auto;
  }
  .pay-hero {
    padding-block: clamp(2rem, 5vw, 3rem) 1.5rem;
    & .pay-entry {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.25em;
      margin-block-end: 1rem;
    }
    & h1 {
      font-family: var(--font-sans);
      font-size: clamp(2.5rem, 6vw, 4rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 0.98;
      margin-block-end: 1rem;
      text-wrap: balance;
    }
    & .lede {
      font-size: var(--fs-lede);
      line-height: 1.55;
      color: var(--ink-1);
      max-inline-size: 44rem;
      margin-block-end: 1.5rem;
      text-wrap: pretty;
    }
  }
  .pay-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-block: 0.875rem;
    flex-wrap: wrap;
    border-block: 1px dashed color-mix(in oklab, var(--lime) 25%, transparent);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    letter-spacing: 0.1em;
    & .pixel-avatar {
      inline-size: 32px;
      block-size: 32px;
      flex: 0 0 auto;
    }
    & .handle {
      color: var(--ink-0);
    }
    & .spacer {
      flex: 1;
    }
    & .paid {
      padding: 3px 9px;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      background: color-mix(in oklab, var(--lime) 10%, transparent);
      color: var(--lime);
      border: 1px solid var(--lime);
      border-radius: 3px;
      letter-spacing: 0.2em;
    }
  }
  .pay-preview {
    min-height: 8rem;
    padding-block: 0.5rem 0;
    font-family: Georgia, serif;
    font-size: 1.1875rem;
    line-height: 1.75;
    color: var(--ink-1);
    position: relative;
    & p {
      margin-block: 1.5rem;
      text-wrap: pretty;
    }
    & code {
      font-family: var(--font-mono);
      font-size: 1rem;
      background: color-mix(in oklab, var(--lime) 8%, transparent);
      padding: 2px 6px;
      border-radius: 4px;
      color: var(--lime);
    }
    & h2 {
      font-family: var(--font-sans);
      font-size: 2rem;
      font-weight: 800;
      color: var(--ink-0);
      margin: 2.25rem 0 0.75rem;
      letter-spacing: -0.03em;
    }
  }
  .pay-fade {
    position: relative;
    margin-block-start: -10rem;
    block-size: 8.75rem;
    background: linear-gradient(180deg, transparent 0%, var(--bg-0) 90%);
    pointer-events: none;
  }
  .pay-gate {
    position: relative;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem) 2.25rem;
    background: linear-gradient(
      180deg,
      rgb(11 9 24 / 0.95) 0%,
      rgb(5 4 11 / 0.98) 100%
    );
    border: 1px solid var(--lime);
    border-radius: var(--radius-xl);
    box-shadow:
      0 30px 80px rgb(0 0 0 / 0.6),
      0 0 80px color-mix(in oklab, var(--lime) 15%, transparent);
    text-align: center;
    & .corner {
      position: absolute;
      inline-size: 14px;
      block-size: 14px;
    }
    & .corner.tl {
      inset-block-start: 10px;
      inset-inline-start: 10px;
      border-block-start: 1px solid var(--lime);
      border-inline-start: 1px solid var(--lime);
    }
    & .corner.tr {
      inset-block-start: 10px;
      inset-inline-end: 10px;
      border-block-start: 1px solid var(--lime);
      border-inline-end: 1px solid var(--lime);
    }
    & .corner.bl {
      inset-block-end: 10px;
      inset-inline-start: 10px;
      border-block-end: 1px solid var(--lime);
      border-inline-start: 1px solid var(--lime);
    }
    & .corner.br {
      inset-block-end: 10px;
      inset-inline-end: 10px;
      border-block-end: 1px solid var(--lime);
      border-inline-end: 1px solid var(--lime);
    }
    & .glyph {
      font-family: var(--font-mono);
      font-size: 1.75rem;
      color: var(--lime);
      margin-block-end: 0.5rem;
    }
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.3em;
      margin-block-end: 1rem;
    }
    & h2 {
      font-family: var(--font-sans);
      font-size: clamp(1.75rem, 4vw, 2.25rem);
      font-weight: 800;
      letter-spacing: -0.035em;
      line-height: 1.08;
      margin-block-end: 0.875rem;
      color: var(--ink-0);
      text-wrap: balance;
    }
    & .desc {
      font-size: 0.9375rem;
      line-height: 1.65;
      color: var(--ink-2);
      max-inline-size: 30rem;
      margin-inline: auto;
      margin-block-end: 1.5rem;
      text-wrap: pretty;
    }
  }
  .pay-cta {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-inline-size: 24rem;
    margin-inline: auto;
    & .btn-primary,
    & .btn-outline {
      justify-content: center;
    }
  }
  .pay-benefits {
    margin-block-start: 1.625rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px dashed
      color-mix(in oklab, var(--lime) 25%, transparent);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
    text-align: start;
    max-inline-size: 30rem;
    margin-inline: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-1);
    & .ok {
      color: var(--lime);
      margin-inline-end: 4px;
    }
  }
  @media (min-width: 480px) {
    .pay-benefits {
      grid-template-columns: 1fr 1fr;
    }
  }
  .pay-exit {
    margin-block-start: 1.375rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-3);
    letter-spacing: 0.1em;
    & a {
      color: var(--lime);
    }
  }

  /* ─── PRICING / MEMBERSHIP =========================================== */
  .pricing-hero {
    padding-block: clamp(2rem, 5.5vw, 3.5rem) 1.75rem;
    text-align: center;
    max-inline-size: 70rem;
    margin-inline: auto;
    & .prompt {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.25em;
      margin-block-end: 1.125rem;
    }
    & h1 {
      font-family: var(--font-sans);
      font-size: var(--fs-hero-xl);
      font-weight: 800;
      letter-spacing: -0.045em;
      line-height: 0.95;
      margin: 0 auto 1.25rem;
      text-wrap: balance;
      max-inline-size: 53rem;
    }
    & h1 .sub {
      color: var(--lime);
      font-size: clamp(1.5rem, 4vw, 3rem);
      font-weight: 600;
    }
    & p {
      font-size: var(--fs-lede);
      line-height: 1.55;
      color: var(--ink-1);
      max-inline-size: 45rem;
      margin: 0 auto 1rem;
      text-wrap: pretty;
    }
  }
  .cycle-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: rgb(5 4 11 / 0.6);
    border: 1px solid color-mix(in oklab, var(--lime) 25%, transparent);
    border-radius: var(--radius-s);
    margin-block-start: 0.375rem;
    & button {
      padding: 6px 14px;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      border-radius: 4px;
      background: transparent;
      color: var(--ink-3);
      font: inherit;
      letter-spacing: inherit;
    }
    & button[aria-pressed="true"] {
      color: var(--lime);
      background: color-mix(in oklab, var(--lime) 12%, transparent);
    }
    & button .save {
      color: var(--violet-hi);
    }
  }
  .pricing-tiers {
    padding-block: 1rem 2.5rem;
    max-inline-size: 70rem;
    margin-inline: auto;
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  @media (min-width: 768px) {
    .pricing-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .pricing-tier {
    position: relative;
    padding: 1.75rem 1.5rem 1.5rem;
    border-radius: var(--radius-xl);
    & .badge {
      position: absolute;
      inset-block-start: -10px;
      inset-inline-start: 50%;
      transform: translateX(-50%);
      padding: 3px 12px;
      color: var(--bg-0);
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      font-weight: 700;
      letter-spacing: 0.25em;
      border-radius: 4px;
    }
    & .kicker {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.3em;
      margin-block-end: 0.625rem;
    }
    & .price-row {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-block-end: 1.125rem;
      flex-wrap: wrap;
    }
    & .price-row .n {
      font-family: var(--font-sans);
      font-size: 3.5rem;
      font-weight: 800;
      color: var(--ink-0);
      letter-spacing: -0.04em;
      line-height: 1;
    }
    & .price-row .c {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-3);
      letter-spacing: 0.1em;
    }
    & ul {
      margin-block-end: 1.375rem;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }
    & ul li {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 10px;
      align-items: baseline;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-1);
    }
    & ul li.off {
      color: var(--ink-3);
      text-decoration: line-through;
    }
    & ul li .ic {
      font-weight: 700;
    }
    & .cta {
      inline-size: 100%;
      padding: 12px 18px;
      font-size: 0.75rem;
      justify-content: center;
    }
  }
  .pricing-tier.free {
    background: rgb(5 4 11 / 0.4);
    border: 1px solid rgb(255 255 255 / 0.1);
    & .kicker {
      color: rgb(255 255 255 / 0.55);
    }
    & ul li .ic {
      color: rgb(255 255 255 / 0.6);
    }
    & ul li.off .ic {
      color: var(--ink-3);
    }
  }
  .pricing-tier.sup {
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--lime) 8%, transparent),
      color-mix(in oklab, var(--lime) 2%, transparent)
    );
    border: 1px solid var(--lime);
    box-shadow: 0 0 40px color-mix(in oklab, var(--lime) 18%, transparent);
    & .badge {
      background: var(--lime);
    }
    & .kicker {
      color: var(--lime);
    }
    & ul li .ic {
      color: var(--lime);
    }
  }
  .pricing-tier.spon {
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--violet) 12%, transparent),
      color-mix(in oklab, var(--violet) 3%, transparent)
    );
    border: 1px solid var(--violet-hi);
    box-shadow: 0 0 30px color-mix(in oklab, var(--violet) 18%, transparent);
    & .kicker {
      color: var(--violet-hi);
    }
    & ul li .ic {
      color: var(--violet-hi);
    }
  }

  .pricing-faq {
    margin-block-start: 2.5rem;
    padding: 1.5rem 1.75rem;
    border: 1px dashed color-mix(in oklab, var(--lime) 25%, transparent);
    border-radius: var(--radius-l);
    background: rgb(5 4 11 / 0.4);
    & .h {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.25em;
      margin-block-end: 1rem;
    }
    & .grid2 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    & .q {
      font-family: var(--font-sans);
      font-size: 0.9375rem;
      font-weight: 700;
      color: var(--ink-0);
      margin-block-end: 0.375rem;
    }
    & .a {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-2);
      line-height: 1.65;
    }
  }
  @media (min-width: 768px) {
    .pricing-faq .grid2 {
      grid-template-columns: 1fr 1fr;
    }
  }

  .pricing-foot {
    margin-block-start: 1.75rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-3);
    letter-spacing: 0.15em;
  }

  /* ─── OFFER ========================================================== */
  .offer-hero {
    padding-block: clamp(2rem, 6vw, 3.75rem) 1.5rem;
    max-inline-size: 60rem;
    margin-inline: auto;
    text-align: center;
    & .offer-ribbon {
      display: inline-flex;
      gap: 0.625rem;
      align-items: center;
      padding: 6px 14px;
      background: color-mix(in oklab, var(--danger) 8%, transparent);
      border: 1px solid var(--danger);
      border-radius: 20px;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--danger-hi);
      letter-spacing: 0.3em;
      margin-block-end: 1.5rem;
    }
    & .offer-ribbon .blink {
      animation: blink 1s steps(2) infinite;
    }
    & h1 {
      font-family: var(--font-sans);
      font-size: var(--fs-hero-xl);
      font-weight: 800;
      letter-spacing: -0.05em;
      line-height: 0.9;
      margin: 0 auto 1.125rem;
      text-wrap: balance;
      max-inline-size: 51rem;
    }
    & h1 .sub {
      color: var(--lime);
      font-size: clamp(1.5rem, 4vw, 3rem);
      font-weight: 600;
    }
    & .lede {
      font-size: var(--fs-lede);
      line-height: 1.55;
      color: var(--ink-1);
      max-inline-size: 42rem;
      margin-inline: auto;
      text-wrap: pretty;
    }
    & code {
      font-family: var(--font-mono);
      font-size: 1rem;
      background: color-mix(in oklab, var(--lime) 10%, transparent);
      padding: 3px 8px;
      border-radius: 4px;
      color: var(--lime);
      border: 1px dashed var(--lime);
    }
  }
  .offer-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-inline-size: 60rem;
    margin-inline: auto;
    padding-block: 1.25rem;
  }
  @media (min-width: 768px) {
    .offer-panels {
      grid-template-columns: 1fr 1fr;
    }
  }
  .offer-panel {
    padding: 1.375rem 1.625rem;
    border-radius: var(--radius-l);
    background: rgb(5 4 11 / 0.5);
    & .lab {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.3em;
      margin-block-end: 0.875rem;
    }
  }
  .offer-panel.countdown {
    border: 1px dashed var(--danger);
    & .lab {
      color: var(--danger-hi);
    }
  }
  .offer-panel.price {
    border: 1px dashed var(--lime);
    background: color-mix(in oklab, var(--lime) 4%, transparent);
    & .lab {
      color: var(--lime);
    }
  }
  .countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .countdown-grid .c {
    padding: 0.75rem 0;
    text-align: center;
    background: color-mix(in oklab, var(--danger) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent);
    border-radius: var(--radius-s);
    & .n {
      font-family: var(--font-sans);
      font-size: clamp(1.5rem, 4vw, 2.25rem);
      font-weight: 800;
      color: var(--ink-0);
      letter-spacing: -0.03em;
      line-height: 1;
    }
    & .l {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--danger-hi);
      letter-spacing: 0.3em;
      margin-block-start: 6px;
    }
  }
  .price-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--ink-2);
    & .strike {
      text-decoration: line-through;
      color: var(--ink-3);
    }
    & .save {
      color: var(--lime);
    }
    & .pay-lbl {
      font-weight: 700;
      color: var(--ink-0);
      font-size: 1rem;
    }
    & .pay-val {
      font-weight: 700;
      color: var(--lime);
      font-size: 1.375rem;
    }
    & .yr2-lbl,
    & .yr2-val {
      color: var(--ink-3);
      font-size: var(--fs-micro);
    }
  }

  .offer-cta {
    margin-inline: auto;
    max-inline-size: 40rem;
    padding: 1.75rem 1.875rem 1.5rem;
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--lime) 8%, transparent),
      color-mix(in oklab, var(--lime) 2%, transparent)
    );
    border: 1px solid var(--lime);
    border-radius: var(--radius-l);
    box-shadow: 0 0 48px color-mix(in oklab, var(--lime) 18%, transparent);
    & .eyebrow {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.3em;
      margin-block-end: 0.625rem;
    }
    & .btn-lime {
      inline-size: 100%;
      margin-block-start: 1rem;
      padding-block: 0.9375rem;
      justify-content: center;
    }
    & .offer-fine {
      margin-block-start: 0.875rem;
      text-align: center;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.1em;
    }
  }
  .offer-code {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0.625rem 0.875rem;
    margin-block-end: 1.125rem;
    background: var(--bg-1);
    border: 1px dashed var(--lime);
    border-radius: var(--radius-s);
    & .c {
      font-family: var(--font-mono);
      font-size: 0.875rem;
      color: var(--lime);
      letter-spacing: 0.1em;
      flex: 1;
    }
    & .v {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.2em;
    }
  }
  .offer-form {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    & label {
      display: block;
    }
    & .lab {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.2em;
      margin-block-end: 6px;
    }
    & input {
      inline-size: 100%;
      padding: 0.6875rem 0.875rem;
      background: var(--bg-1);
      border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent);
      border-radius: var(--radius-s);
      font-family: var(--font-mono);
      font-size: var(--fs-ui);
      color: var(--ink-0);
      outline: none;
    }
    & input::placeholder {
      color: var(--ink-3);
    }
    & input:focus {
      border-color: var(--lime);
    }
    & .card-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
  }
  @media (min-width: 480px) {
    .offer-form .card-row {
      grid-template-columns: 1fr 90px 80px;
    }
  }

  /* ─── TIPS ========================================================== */
  .tips-stage {
    position: relative;
    min-block-size: 60vh;
    display: grid;
    place-items: center;
    padding: 2.5rem 1rem;
    isolation: isolate;
  }
  .tips-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.35;
    filter: blur(3px);
    background:
      radial-gradient(
        ellipse 60% 40% at 30% 40%,
        color-mix(in oklab, var(--lime) 25%, transparent),
        transparent 60%
      ),
      radial-gradient(
        ellipse 50% 40% at 70% 60%,
        color-mix(in oklab, var(--violet) 35%, transparent),
        transparent 55%
      );
    pointer-events: none;
  }
  .tips-card {
    position: relative;
    z-index: 2;
    inline-size: min(36.25rem, 100%);
    padding: 2.25rem 2.5rem 1.875rem;
    background: linear-gradient(180deg, #0b0918 0%, #05040b 100%);
    border: 1px solid var(--lime);
    border-radius: var(--radius-xl);
    box-shadow:
      0 40px 100px rgb(0 0 0 / 0.7),
      0 0 0 1px color-mix(in oklab, var(--violet) 30%, transparent),
      0 0 100px color-mix(in oklab, var(--lime) 18%, transparent);
    & .corner {
      position: absolute;
      inline-size: 14px;
      block-size: 14px;
    }
    & .corner.tl {
      inset-block-start: 10px;
      inset-inline-start: 10px;
      border-block-start: 1px solid var(--lime);
      border-inline-start: 1px solid var(--lime);
    }
    & .corner.tr {
      inset-block-start: 10px;
      inset-inline-end: 10px;
      border-block-start: 1px solid var(--lime);
      border-inline-end: 1px solid var(--lime);
    }
    & .corner.bl {
      inset-block-end: 10px;
      inset-inline-start: 10px;
      border-block-end: 1px solid var(--lime);
      border-inline-start: 1px solid var(--lime);
    }
    & .corner.br {
      inset-block-end: 10px;
      inset-inline-end: 10px;
      border-block-end: 1px solid var(--lime);
      border-inline-end: 1px solid var(--lime);
    }
    & .btn-lime {
      inline-size: 100%;
      padding-block: 0.875rem;
      font-size: 0.8125rem;
      justify-content: center;
    }
  }
  .tips-head {
    text-align: center;
    & .glyph {
      font-family: var(--font-mono);
      font-size: 2rem;
      color: var(--lime);
      margin-block-end: 0.625rem;
    }
    & .label {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.3em;
      margin-block-end: 0.875rem;
    }
    & h2 {
      font-family: var(--font-sans);
      font-size: 2.5rem;
      font-weight: 800;
      letter-spacing: -0.035em;
      line-height: 1.05;
      margin-block-end: 0.75rem;
      color: var(--ink-0);
    }
    & p {
      font-size: var(--fs-sm);
      line-height: 1.6;
      color: var(--ink-2);
      max-inline-size: 26rem;
      margin: 0 auto 1.5rem;
      text-wrap: pretty;
    }
  }
  .tips-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-block-end: 1.125rem;
  }
  .tips-amt {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.875rem 0.625rem;
    background: rgb(255 255 255 / 0.02);
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--radius-s);
    cursor: pointer;
    text-align: center;
    font: inherit;
    & .hero-tag {
      position: absolute;
      inset-block-start: -7px;
      inset-inline-end: 8px;
      padding: 1px 6px;
      font-family: var(--font-mono);
      font-size: 7px;
      font-weight: 700;
      background: var(--violet-hi);
      color: var(--bg-0);
      border-radius: 3px;
      letter-spacing: 0.2em;
    }
    & .v {
      font-family: var(--font-sans);
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--ink-1);
      letter-spacing: -0.02em;
    }
    & .l {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      margin-block-start: 4px;
      letter-spacing: 0.1em;
    }
  }
  .tips-amt[aria-pressed="true"],
  .tips-amt.hot {
    background: color-mix(in oklab, var(--violet) 8%, transparent);
    border-color: var(--violet);
    box-shadow: 0 0 18px color-mix(in oklab, var(--violet) 18%, transparent);
    & .v {
      color: var(--ink-0);
    }
  }
  .tips-msg {
    margin-block-end: 0.875rem;
    & .lab {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.2em;
      margin-block-end: 6px;
    }
    & textarea {
      padding: 0.625rem 0.875rem;
      min-block-size: 44px;
      background: var(--bg-1);
      border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent);
      border-radius: var(--radius-s);
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-1);
      line-height: 1.5;
      inline-size: 100%;
      resize: vertical;
    }
  }
  .tips-stripe {
    padding: 0.625rem 0.875rem;
    background: color-mix(in oklab, var(--violet) 4%, transparent);
    border: 1px dashed color-mix(in oklab, var(--violet) 30%, transparent);
    border-radius: var(--radius-s);
    margin-block-end: 1rem;
    display: inline-flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-2);
    letter-spacing: 0.1em;
    & .lock {
      color: var(--violet-hi);
    }
  }
  .tips-alt {
    text-align: center;
    margin-block-start: 0.875rem;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-3);
    letter-spacing: 0.1em;
    & a {
      color: var(--lime);
    }
  }
  .tips-recent {
    margin-block-start: 1.375rem;
    padding-block-start: 1.125rem;
    border-block-start: 1px dashed rgb(255 255 255 / 0.08);
    & .lab {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      letter-spacing: 0.25em;
      margin-block-end: 0.625rem;
    }
    & .list {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }
    & .pill {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      padding: 4px 9px;
      background: color-mix(in oklab, var(--lime) 6%, transparent);
      border: 1px solid color-mix(in oklab, var(--lime) 20%, transparent);
      border-radius: var(--radius-pill);
      color: var(--ink-1);
      & .amt {
        color: var(--lime);
        margin-inline-start: 3px;
      }
    }
    & .more {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
    }
  }

  /* ─── EMAIL-ONLY ===================================================== */
  .eo-page {
    max-inline-size: 49rem;
    margin-inline: auto;
  }
  .eo-hero {
    padding-block: clamp(2rem, 5vw, 3rem) 1.25rem;
    & .eo-badge {
      display: inline-flex;
      gap: 0.625rem;
      align-items: center;
      padding: 6px 14px;
      background: color-mix(in oklab, var(--violet) 8%, transparent);
      border: 1px dashed var(--violet-hi);
      border-radius: 20px;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--violet-hi);
      letter-spacing: 0.3em;
      margin-block-end: 1.5rem;
      flex-wrap: wrap;
    }
    & .eo-entry {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.25em;
      margin-block-end: 0.875rem;
    }
    & h1 {
      font-family: var(--font-sans);
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 0.95;
      margin-block-end: 1.25rem;
      text-wrap: balance;
    }
    & h1 .sub {
      display: block;
      color: var(--lime);
      font-size: clamp(1.25rem, 3vw, 1.75rem);
      margin-block-start: 0.625rem;
      font-weight: 600;
    }
    & .lede {
      font-size: var(--fs-lede);
      line-height: 1.55;
      color: var(--ink-1);
      max-inline-size: 45rem;
      margin-block-end: 1.75rem;
      text-wrap: pretty;
      & strong {
        color: var(--ink-0);
      }
      & .date {
        color: var(--lime);
      }
    }
  }
  .eo-letter {
    padding: 1.5rem 1.75rem;
    background: rgb(5 4 11 / 0.5);
    border: 1px dashed color-mix(in oklab, var(--lime) 25%, transparent);
    border-radius: var(--radius-l);
    font-family: Georgia, serif;
    font-size: 1.0625rem;
    color: var(--ink-1);
    line-height: 1.75;
    margin-block-end: 1.5rem;
    & p {
      margin-block-end: 1.125rem;
    }
    & .lime {
      color: var(--lime);
    }
    & .collapsed {
      color: var(--ink-3);
      font-style: italic;
      margin: 0;
    }
  }
  .eo-meta {
    padding: 1.375rem 1.625rem;
    background: color-mix(in oklab, var(--violet) 4%, transparent);
    border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
    border-radius: var(--radius-l);
    margin-block-end: 1.5rem;
    & .lab {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--violet-hi);
      letter-spacing: 0.3em;
      margin-block-end: 0.75rem;
    }
    & .story {
      font-family: var(--font-sans);
      font-size: 1rem;
      color: var(--ink-0);
      line-height: 1.65;
      margin-block-end: 0.875rem;
      font-weight: 500;
      text-wrap: pretty;
    }
    & .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.875rem;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      line-height: 1.7;
    }
    & .grid .k {
      color: var(--violet-hi);
      letter-spacing: 0.2em;
      margin-block-end: 4px;
    }
    & .grid .v {
      color: var(--ink-0);
    }
    & .grid .v.lime {
      color: var(--lime);
    }
    & .grid .v.mute {
      color: var(--ink-3);
    }
  }
  @media (min-width: 480px) {
    .eo-meta .grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  .eo-sub {
    padding: 1.375rem 1.625rem;
    background: color-mix(in oklab, var(--lime) 4%, transparent);
    border: 1px dashed var(--lime);
    border-radius: var(--radius-l);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: center;
    margin-block-end: 2.5rem;
    & .eyebrow {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.3em;
      margin-block-end: 0.5rem;
    }
    & .head {
      font-family: var(--font-sans);
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--ink-0);
      margin-block-end: 0.375rem;
      letter-spacing: -0.02em;
    }
    & .body {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-2);
      line-height: 1.55;
    }
  }
  @media (min-width: 640px) {
    .eo-sub {
      grid-template-columns: 1fr auto;
    }
  }

  /* ─── EMAIL-PREVIEW ================================================== */
  .email-page {
    max-inline-size: 60rem;
    margin-inline: auto;
    padding-block: 2rem 1.5rem;
    & .email-prompt {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.25em;
      margin-block-end: 0.75rem;
    }
  }
  .mail-client {
    border-radius: var(--radius-l);
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.1);
    background: rgb(5 4 11 / 0.7);
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.5);
  }
  .mail-head {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem 1.375rem;
    border-block-end: 1px solid rgb(255 255 255 / 0.08);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    & .k {
      color: var(--ink-3);
      letter-spacing: 0.2em;
    }
    & .time {
      color: var(--ink-3);
      font-size: var(--fs-micro);
    }
    & .delivered {
      color: var(--lime);
      font-size: var(--fs-nano);
      letter-spacing: 0.2em;
    }
    & .subject {
      color: var(--ink-0);
      font-size: var(--fs-sm);
    }
  }
  .mail-head.row-mid {
    padding-block: 0.625rem;
  }
  .mail-head.row-sub {
    padding-block: 0.625rem;
    grid-template-columns: 90px 1fr;
  }
  .mail-body {
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem) 2.25rem;
    background: linear-gradient(180deg, #0a0914 0%, var(--bg-0) 100%);
    font-family: Georgia, serif;
    color: var(--ink-1);
    line-height: 1.7;
    & h1 {
      font-family: var(--font-sans);
      font-size: clamp(1.75rem, 4vw, 2.625rem);
      font-weight: 800;
      letter-spacing: -0.035em;
      line-height: 1.05;
      margin-block-end: 1.125rem;
      color: var(--ink-0);
      text-wrap: balance;
    }
    & h1 .sub {
      color: var(--lime);
      font-size: clamp(1.125rem, 2.5vw, 1.375rem);
      font-weight: 600;
    }
    & .byline {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-3);
      margin-block-end: 1.375rem;
      letter-spacing: 0.1em;
    }
    & p {
      font-size: 1.0625rem;
      margin-block-end: 1.125rem;
      text-wrap: pretty;
    }
    & code {
      font-family: var(--font-mono);
      font-size: 0.875rem;
      background: color-mix(in oklab, var(--lime) 10%, transparent);
      padding: 2px 6px;
      border-radius: 3px;
      color: var(--lime);
    }
    & blockquote {
      margin-block: 1.75rem;
      padding: 1.125rem 1.5rem;
      border-inline-start: 3px solid var(--lime);
      background: color-mix(in oklab, var(--lime) 5%, transparent);
      font-family: Georgia, serif;
      font-size: 1.125rem;
      font-style: italic;
      color: var(--ink-0);
    }
  }
  .brand-strip {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    margin-block-end: 1.75rem;
    padding-block-end: 0.875rem;
    border-block-end: 2px solid var(--lime);
    flex-wrap: wrap;
    & .brand-mark {
      inline-size: 38px;
      block-size: 38px;
      border-radius: var(--radius-s);
      background: linear-gradient(135deg, var(--violet), var(--lime));
      display: grid;
      place-items: center;
      font-family: var(--font-sans);
      font-size: 1.25rem;
      font-weight: 900;
      color: var(--bg-0);
    }
    & .brand-name {
      font-family: var(--font-sans);
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--ink-0);
    }
    & .brand-meta {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      letter-spacing: 0.2em;
    }
    & .spacer {
      flex: 1;
    }
    & .read-time {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
    }
  }
  .mail-cta {
    padding: 1.25rem 1.375rem;
    border-radius: var(--radius-m);
    margin-block: 1.25rem 1.75rem;
    background: color-mix(in oklab, var(--lime) 6%, transparent);
    border: 1px dashed var(--lime);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: center;
    & .head {
      font-family: var(--font-sans);
      font-size: 1rem;
      font-weight: 700;
      color: var(--ink-0);
      margin-block-end: 4px;
    }
    & .meta {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-2);
      letter-spacing: 0.1em;
    }
    & a.go {
      padding: 11px 20px;
      background: var(--lime);
      color: var(--bg-0);
      font-family: var(--font-mono);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      border-radius: var(--radius-s);
      text-align: center;
    }
  }
  @media (min-width: 640px) {
    .mail-cta {
      grid-template-columns: 1fr auto;
    }
  }
  .mail-footer {
    padding-block-start: 1.25rem;
    border-block-start: 1px dashed rgb(255 255 255 / 0.15);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-3);
    line-height: 1.7;
    letter-spacing: 0.05em;
    & a {
      color: var(--lime);
    }
  }
  .news-notes {
    margin-block-start: 1.375rem;
    padding: 1rem 1.25rem;
    background: rgb(5 4 11 / 0.5);
    border: 1px dashed color-mix(in oklab, var(--violet) 30%, transparent);
    border-radius: var(--radius-m);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    line-height: 1.7;
    & .head {
      color: var(--violet-hi);
      letter-spacing: 0.25em;
      margin-block-end: 0.5rem;
    }
    & .lime {
      color: var(--lime);
    }
  }

  /* ─── REFERENCE PAGES (uikit, states, responsive) ===================== */
  /* Shared showcase wrappers — used by the design-system docs */
  .ref-hero {
    padding-block: clamp(2rem, 5vw, 3rem) 1rem;
    & .eyebrow {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.25em;
      margin-block-end: 0.875rem;
    }
    & h1 {
      font-family: var(--font-sans);
      font-size: var(--fs-hero-md);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 0.95;
      margin: 0;
    }
    & .sub {
      font-family: var(--font-mono);
      font-size: var(--fs-sm);
      color: var(--ink-2);
      margin-block-start: 1rem;
      max-inline-size: 40rem;
      line-height: 1.6;
    }
    & .badges {
      display: flex;
      gap: 0.75rem;
      margin-block-start: 1.375rem;
      flex-wrap: wrap;
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.15em;
    }
    & .badges span {
      padding: 5px 10px;
      border-radius: 4px;
    }
    & .badges .b1 {
      background: color-mix(in oklab, var(--lime) 8%, transparent);
      border: 1px solid color-mix(in oklab, var(--lime) 30%, transparent);
      color: var(--lime);
    }
    & .badges .b2 {
      background: color-mix(in oklab, var(--violet) 8%, transparent);
      border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
      color: var(--violet-hi);
    }
    & .badges .b3 {
      background: color-mix(in oklab, var(--danger) 8%, transparent);
      border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent);
      color: var(--danger-hi);
    }
  }

  .ref-section {
    padding-block: 2.25rem;
    border-block-start: 1px dashed
      color-mix(in oklab, var(--lime) 15%, transparent);
    & > .head {
      display: flex;
      align-items: baseline;
      gap: 1rem;
      margin-block-end: 0.375rem;
      flex-wrap: wrap;
    }
    & .num {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.25em;
    }
    & h2 {
      font-family: var(--font-sans);
      font-size: 1.875rem;
      font-weight: 800;
      letter-spacing: -0.025em;
      margin: 0;
      color: var(--ink-0);
    }
    & .desc {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--ink-3);
      margin-block-end: 1.375rem;
      max-inline-size: 45rem;
    }
  }

  .ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 0.75rem;
  }
  .ref-grid.c2 {
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 1.25rem;
  }
  .ref-grid.c3 {
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  }
  .ref-grid.c6 {
    grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  }

  .ref-cell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    & .lbl {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      letter-spacing: 0.2em;
    }
    & .body {
      padding: 1.125rem 1rem;
      min-block-size: 4.375rem;
      border-radius: var(--radius-s);
      background: rgb(12 10 22 / 0.55);
      border: 1px dashed rgb(255 255 255 / 0.07);
      display: grid;
      place-items: center;
    }
  }
  .ref-cell.transparent .body {
    background: transparent;
    padding: 0.5rem;
  }

  /* Color chip used by uikit */
  .color-chip {
    padding: 0.875rem;
    border-radius: var(--radius-m);
    background: rgb(12 10 22 / 0.7);
    border: 1px solid rgb(255 255 255 / 0.06);
    & .swatch {
      block-size: 4.5rem;
      border-radius: 7px;
      margin-block-end: 0.75rem;
      border: 1px solid rgb(255 255 255 / 0.08);
    }
    & .name {
      font-family: var(--font-sans);
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--ink-0);
    }
    & .token {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      margin-block-start: 2px;
      letter-spacing: 0.05em;
    }
    & .val {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-3);
      margin-block-start: 2px;
    }
    & .notes {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--ink-2);
      margin-block-start: 6px;
    }
  }

  /* Responsive doc — breakpoint pills */
  .bp-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-block: 1.25rem 1.75rem;
  }
  @media (min-width: 640px) {
    .bp-strip {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (min-width: 1024px) {
    .bp-strip {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .bp-card {
    padding: 1.125rem 1.25rem;
    border-radius: var(--radius-m);
    background: rgb(5 4 11 / 0.5);
    border: 1px dashed color-mix(in oklab, var(--lime) 25%, transparent);
    & .key {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      color: var(--lime);
      letter-spacing: 0.25em;
      margin-block-end: 0.375rem;
    }
    & .px {
      font-family: var(--font-sans);
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--ink-0);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    & .lbl {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-2);
      margin-block-start: 0.375rem;
    }
  }

  .bp-table {
    border: 1px solid color-mix(in oklab, var(--violet) 25%, transparent);
    border-radius: var(--radius-m);
    overflow: hidden;
    background: #05040b;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    & .row {
      display: grid;
      grid-template-columns: 7rem 1fr;
      gap: 1rem;
      padding: 0.75rem 1.125rem;
      border-block-start: 1px solid rgb(255 255 255 / 0.04);
    }
    & .row:first-child {
      border-block-start: 0;
      background: color-mix(in oklab, var(--violet) 10%, transparent);
    }
    & .row .k {
      color: var(--lime);
      letter-spacing: 0.15em;
    }
    & .row .v {
      color: var(--ink-1);
    }
    & .row.head {
      color: var(--ink-3);
      letter-spacing: 0.15em;
      font-size: var(--fs-micro);
    }
  }
  @media (min-width: 640px) {
    .bp-table .row {
      grid-template-columns: 9rem 1fr 1fr 1fr;
    }
  }

  .keeps-drops {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-block-start: 1.25rem;
  }
  @media (min-width: 640px) {
    .keeps-drops {
      grid-template-columns: 1fr 1fr;
    }
  }
  .keeps-drops > section {
    padding: 1.125rem 1.25rem;
    border-radius: var(--radius-m);
    & h3 {
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      letter-spacing: 0.25em;
      margin-block-end: 0.75rem;
    }
    & ul {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-1);
      line-height: 1.6;
    }
    & ul li {
      display: grid;
      grid-template-columns: 16px 1fr;
      gap: 8px;
    }
  }
  .keeps-drops .keeps {
    background: color-mix(in oklab, var(--lime) 4%, transparent);
    border: 1px dashed color-mix(in oklab, var(--lime) 30%, transparent);
    & h3 {
      color: var(--lime);
    }
    & .ic {
      color: var(--lime);
    }
  }
  .keeps-drops .drops {
    background: color-mix(in oklab, var(--danger) 3%, transparent);
    border: 1px dashed color-mix(in oklab, var(--danger) 30%, transparent);
    & h3 {
      color: var(--danger-hi);
    }
    & .ic {
      color: var(--danger-hi);
    }
  }

  /* ─── ⌘K palette + PGP modal ─────────────────────────────────────────
     Global overlays rendered once in default.hbs. Fixed-position root so the
     blurred backdrop and floating dialog overlay the viewport instead of
     flowing at the bottom of the document. */

  [data-cmdk-root],
  [data-pgp-root] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  [data-cmdk-root][hidden],
  [data-pgp-root][hidden] {
    display: none;
  }

  .cmdk-ghost {
    position: relative;
    z-index: 1;
    padding: clamp(2rem, 6vw, 3.5rem) 0 0;
    opacity: 0.25;
    filter: blur(2px);
    pointer-events: none;
    & .prompt {
      margin: 0 0 1rem;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--lime);
      letter-spacing: 0.25em;
    }
    & h2 {
      margin: 0;
      font-family: var(--font-sans);
      font-size: var(--fs-h1);
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--ink-0);
      line-height: 1.05;
    }
  }

  .cmdk-backdrop {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgb(7 6 13 / 0.95), rgb(7 6 13 / 0.6));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* Catch outside-clicks for [data-*-dismiss]. The wrapping
       .cmdk-section sits visually above this layer but is
       pointer-events:none, so empty space around the dialog still
       lands on the backdrop and dismisses. */
    cursor: pointer;
  }

  .cmdk-section {
    position: relative;
    z-index: 3;
    padding-block: clamp(2rem, 8vw, 5rem);
    padding-inline: clamp(0.75rem, 3vw, 1.5rem);
    display: grid;
    justify-items: center;
    max-block-size: 100dvh;
    /* Let outside-clicks fall through to the backdrop; the dialog
       inside opts back in with pointer-events:auto. */
    pointer-events: none;
  }

  .cmdk {
    /* Re-enable interaction for the dialog itself (parent .cmdk-section
       is pointer-events:none so backdrop clicks dismiss). */
    pointer-events: auto;
    cursor: auto;
    inline-size: 100%;
    max-inline-size: 45rem;
    max-block-size: calc(100dvh - 4rem);
    display: flex;
    flex-direction: column;
    border: 1px solid color-mix(in oklab, var(--lime) 40%, transparent);
    border-radius: 1rem;
    background: rgb(12 10 22 / 0.96);
    box-shadow:
      0 2rem 3.75rem rgb(0 0 0 / 0.6),
      0 0 5rem color-mix(in oklab, var(--lime) 8%, transparent);
    overflow: hidden;
  }

  .cmdk-input {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: clamp(0.875rem, 2.5vw, 1.25rem) clamp(1rem, 3vw, 1.5rem);
    border-block-end: 1px solid
      color-mix(in oklab, var(--lime) 20%, transparent);
    font-family: var(--font-mono);
    & .prompt {
      color: var(--lime);
      font-size: 1rem;
      letter-spacing: 0.1em;
    }
    & input {
      flex: 1;
      min-inline-size: 0;
      background: transparent;
      border: 0;
      outline: 0;
      font-family: var(--font-mono);
      font-size: clamp(0.9375rem, 2.5vw, 1.125rem);
      color: var(--ink-0);
      letter-spacing: 0.02em;
      &::-webkit-search-cancel-button {
        display: none;
      }
    }
    & .caret {
      color: var(--lime);
      font-size: 1.125rem;
    }
    & .esc {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      letter-spacing: 0.15em;
      padding: 0.25rem 0.5rem;
      border: 1px solid rgb(255 255 255 / 0.1);
      border-radius: 0.3125rem;
      background: transparent;
      cursor: pointer;
      & kbd {
        font-family: inherit;
        color: inherit;
      }
      &:hover,
      &:focus-visible {
        color: var(--ink-0);
        border-color: color-mix(in oklab, var(--lime) 40%, transparent);
        outline: 0;
      }
    }
  }

  .cmdk-results {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    & .hint {
      padding: 0.5rem clamp(1rem, 3vw, 1.5rem);
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      letter-spacing: 0.18em;
    }
  }

  .cmdk-row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem clamp(1rem, 3vw, 1.5rem);
    background: transparent;
    border-inline-start: 2px solid transparent;
    cursor: pointer;
    transition:
      background 120ms ease,
      border-color 120ms ease;
    &.is-active,
    &:hover,
    &:focus-visible {
      background: color-mix(in oklab, var(--violet) 12%, transparent);
      border-inline-start-color: var(--lime);
      outline: 0;
    }
    & .icon {
      inline-size: 1.75rem;
      block-size: 1.75rem;
      border-radius: 0.4375rem;
      display: grid;
      place-items: center;
      background: rgb(255 255 255 / 0.04);
      font-family: var(--font-mono);
      font-size: 0.875rem;
      &.is-post {
        color: var(--lime);
      }
      &.is-tag {
        color: var(--violet-hi);
      }
      &.is-page {
        color: var(--ink-1);
      }
      &.is-action {
        color: var(--danger-hi);
      }
    }
    & .title {
      margin: 0;
      font-family: var(--font-sans);
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--ink-0);
      overflow-wrap: anywhere;
    }
    & .meta {
      margin: 0.125rem 0 0;
      font-family: var(--font-mono);
      font-size: var(--fs-meta);
      color: var(--ink-3);
    }
    & .kind {
      font-family: var(--font-mono);
      font-size: var(--fs-nano);
      color: var(--ink-3);
      letter-spacing: 0.15em;
    }
  }

  .cmdk-foot {
    margin: 0;
    padding: 0.75rem clamp(1rem, 3vw, 1.5rem);
    border-block-start: 1px solid rgb(255 255 255 / 0.05);
    background: rgb(7 6 13 / 0.5);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.125rem;
    font-family: var(--font-mono);
    font-size: var(--fs-nano);
    color: var(--ink-3);
    letter-spacing: 0.15em;
    & .spacer {
      flex: 1;
    }
    & kbd {
      color: var(--lime);
      font-family: inherit;
      margin-inline-end: 0.25rem;
    }
  }

  .cmdk-tip {
    inline-size: 100%;
    max-inline-size: 45rem;
    margin: 1.25rem auto 0;
    padding: 0.875rem 1.125rem;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1.7;
    & .hi {
      color: var(--lime);
    }
    & .tok {
      color: var(--violet-hi);
    }
  }

  /* ─── PGP modal — reuses .cmdk shell + .tbar chrome ───────────────── */

  /* Bottom-bar trigger chip. Styled to sit naturally next to the F-key
     hints and the ◉ LIVE indicator. */
  .pgp-chip {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    letter-spacing: inherit;
    color: var(--lime);
    background: color-mix(in oklab, var(--lime) 6%, transparent);
    border: 1px solid color-mix(in oklab, var(--lime) 32%, transparent);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    transition:
      background 120ms ease,
      border-color 120ms ease,
      color 120ms ease,
      box-shadow 120ms ease;
    &:hover,
    &:focus-visible {
      background: color-mix(in oklab, var(--lime) 14%, transparent);
      border-color: color-mix(in oklab, var(--lime) 55%, transparent);
      color: var(--lime-hi);
      box-shadow: 0 0 12px color-mix(in oklab, var(--lime) 25%, transparent);
      outline: 0;
    }
  }

  /* Modal shell — narrower than cmdk, content-focused, uses .tbar header. */
  .pgp-modal {
    max-inline-size: 52rem;
    border-color: color-mix(in oklab, var(--lime) 35%, transparent);
    box-shadow:
      0 2rem 3.75rem rgb(0 0 0 / 0.6),
      0 0 5rem color-mix(in oklab, var(--lime) 10%, transparent);

    /* The shared .tbar lives inside .win — when reused inside .cmdk we
       want the same dot/path/right layout but the dialog gets focus
       outline suppression. */
    & > .tbar {
      gap: 0.625rem;
      padding-inline: 0.875rem;
      & .path {
        color: var(--ink-2);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        flex: 1;
        min-inline-size: 0;
      }
      & .right {
        color: var(--ink-2);
        font-size: var(--fs-nano);
        letter-spacing: 0.18em;
      }
    }

    &:focus-visible {
      outline: 0;
    }
  }

  .pgp-esc {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-mono);
    font-size: var(--fs-nano);
    color: var(--ink-3);
    letter-spacing: 0.15em;
    padding: 0.125rem 0.5rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 0.3125rem;
    background: transparent;
    cursor: pointer;
    & kbd {
      font-family: inherit;
      color: inherit;
    }
    &:hover,
    &:focus-visible {
      color: var(--ink-0);
      border-color: color-mix(in oklab, var(--lime) 40%, transparent);
      outline: 0;
    }
  }

  .pgp-body {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(1rem, 3vw, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  .pgp-help {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-2);
    letter-spacing: 0.04em;
    line-height: 1.6;
    & .hi {
      color: var(--lime);
    }
    & .tok {
      color: var(--violet-hi);
    }
  }

  .pgp-key {
    margin: 0;
    padding: 1rem 1.125rem;
    background: var(--bg-1);
    border: 1px solid color-mix(in oklab, var(--violet) 25%, transparent);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-1);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-all;
    user-select: all;
    max-block-size: 22rem;
    overflow: auto;
    overscroll-behavior: contain;
    &:focus-visible {
      outline: 1px solid color-mix(in oklab, var(--violet) 55%, transparent);
      outline-offset: 2px;
    }
  }

  .pgp-foot {
    align-items: center;
    & kbd {
      color: var(--ink-3);
      margin-inline-end: 0.4em;
    }
  }

  .pgp-copy {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    font-family: var(--font-mono);
    font-size: var(--fs-nano);
    letter-spacing: 0.15em;
    color: var(--lime);
    background: color-mix(in oklab, var(--lime) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--lime) 35%, transparent);
    border-radius: 0.3125rem;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    transition:
      background 120ms ease,
      border-color 120ms ease,
      color 120ms ease,
      box-shadow 120ms ease;
    &:hover,
    &:focus-visible {
      background: color-mix(in oklab, var(--lime) 18%, transparent);
      border-color: color-mix(in oklab, var(--lime) 55%, transparent);
      color: var(--lime-hi);
      box-shadow: 0 0 14px color-mix(in oklab, var(--lime) 25%, transparent);
      outline: 0;
    }
  }
}

/* ─── @layer utilities ─────────────────────────────────────────────────── */
@layer utilities {
  /* Inline button that looks like a <kbd> chip — used to make ⌘K hints
     interactive without giving them browser button chrome. */
  .kbd-trigger {
    display: inline;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
  }
  .kbd-trigger:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
    border-radius: 0.25rem;
  }
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, 1rem);
  }
  .row {
    display: flex;
    gap: var(--row-gap, 0.75rem);
    flex-wrap: wrap;
    align-items: center;
  }
  .grow {
    flex: 1;
  }
  .text-end {
    text-align: end;
  }
  .text-center {
    text-align: center;
  }
  .accent-violet {
    color: var(--violet-hi);
  }
  .accent-lime {
    color: var(--lime);
  }
  .accent-rabbit {
    color: var(--danger-hi);
  }
  .muted {
    color: var(--ink-3);
  }
  .dim {
    color: var(--ink-2);
  }
  [hidden] {
    display: none !important;
  }
}