.hd {
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
    }

    .eyebrow {
      font-family: var(--f-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-3);
    }

    h1 {
      font-family: var(--f-mono);
      font-size: var(--fs-display);
      font-weight: 600;
      letter-spacing: -0.02em;
      margin: 0;
      line-height: 1.12;
    }

    .lede {
      font-size: var(--fs-lead);
      color: var(--ink-2);
      margin: 0;
      max-width: 62ch;
    }

    .bar {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-3);
      align-items: center;
      padding-bottom: var(--sp-3);
      border-bottom: 1px solid var(--rule);
    }

    .count {
      font-family: var(--f-mono);
      font-size: var(--fs-sm);
      color: var(--ink-2);
      font-variant-numeric: tabular-nums;
    }

    button.reset {
      font: inherit;
      font-size: var(--fs-sm);
      color: var(--accent);
      background: none;
      border: 1px solid var(--rule-2);
      padding: 8px 12px;
      cursor: pointer;
      min-height: 44px;
    }

    button.reset:hover {
      border-color: var(--accent);
    }

    button.reset:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .tsec {
      margin-top: var(--sp-4);
    }

    .tsec h2 {
      font-family: var(--f-mono);
      font-size: var(--fs-h2);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-2);
      margin: 0 0 var(--sp-1);
      display: flex;
      align-items: center;
      gap: var(--sp-3);
    }

    .tsec h2::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--rule);
    }

    .tmeta {
      font-size: var(--fs-xs);
      color: var(--ink-3);
      margin: 0 0 var(--sp-3);
    }

    ul.cases {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 1px;
      background: var(--rule);
      border: 1px solid var(--rule-2);
    }

    li.case {
      background: var(--sheet);
      padding: 13px 15px;
      display: grid;
      gap: 3px var(--sp-4);
      grid-template-columns: 1fr auto;
    }

    .cnum {
      font-family: var(--f-mono);
      font-size: var(--fs-xs);
      color: var(--ink-3);
      letter-spacing: 0.06em;
    }

    .cname {
      font-weight: 600;
    }

    .badge {
      font-family: var(--f-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 3px 8px;
      border: 1px solid var(--rule-2);
      color: var(--ink-2);
      white-space: nowrap;
      align-self: start;
    }

    .badge.review {
      color: var(--flag-ink);
      background: var(--flag-bg);
      border-color: var(--flag-bd);
    }

    .facts {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-2) var(--sp-4);
      font-size: var(--fs-xs);
      color: var(--ink-2);
      margin-top: 2px;
    }

    .facts b {
      font-family: var(--f-mono);
      font-weight: 600;
      color: var(--ink);
    }

    .desc {
      grid-column: 1 / -1;
      font-size: var(--fs-sm);
      color: var(--ink-2);
      margin-top: 3px;
      max-width: 78ch;
    }

    .update {
      grid-column: 1 / -1;
      font-size: var(--fs-sm);
      color: var(--ink-2);
      margin-top: 3px;
      max-width: 78ch;
    }

    .update .k {
      font-family: var(--f-mono);
      font-size: var(--fs-micro);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-right: var(--sp-2);
    }

    .docs {
      grid-column: 1 / -1;
      font-size: var(--fs-xs);
      margin-top: 4px;
    }

    .docs a {
      color: var(--accent);
    }

    .none {
      padding: var(--sp-5);
      border: 1px dashed var(--rule-2);
      color: var(--ink-3);
      font-size: var(--fs-sm);
    }

    .gapbox {
      font-size: var(--fs-sm);
      color: var(--flag-ink);
      background: var(--flag-bg);
      border: 1px solid var(--flag-bd);
      padding: 12px 14px;
    }

    details.fb {
      margin-top: var(--sp-3);
      border: 1px solid var(--rule-2);
      background: var(--sheet);
    }

    details.fb > summary {
      font-family: var(--f-mono);
      font-size: var(--fs-sm);
      color: var(--ink-2);
      padding: 12px 15px;
      min-height: 44px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    details.fb > summary:hover {
      color: var(--ink);
    }

    details.fb > summary:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
    }

    .fbnote {
      font-size: var(--fs-sm);
      color: var(--ink-2);
      margin: 0;
      padding: 0 15px 12px;
      max-width: 78ch;
    }

    .fbnote b {
      font-weight: 600;
      color: var(--ink);
    }

    .fbnote a {
      color: var(--accent);
    }

    details.fb ul.cases {
      border-width: 1px 0 0 0;
    }

    .gapbox b {
      font-weight: 600;
    }

    @media (max-width: 700px) {
      li.case {
        grid-template-columns: 1fr;
      }

      .badge {
        justify-self: start;
        margin-top: 2px;
      }
    }