.comparison-document {
    --ink: #0b0f13;
    --ink-2: #12181f;
    --ink-3: #1a222b;
    --line: #263039;
    --text: #e8edf1;
    --text-dim: #9fb0bd;
    --accent: #35d0c0;
    --accent-dim: #1d5f59;
    --paper: #f6f4ee;
    --paper-2: #ffffff;
    --paper-3: #ece8de;
    --pline: #dcd6c6;
    --ptext: #1c211f;
    --ptext-dim: #5b6560;
    --paccent: #0e7d70;
    --paccent-dim: #cfe9e4;

    --bg: var(--paper);
    --panel: var(--paper-2);
    --panel-2: var(--paper-3);
    --border: var(--pline);
    --fg: var(--ptext);
    --fg-dim: var(--ptext-dim);
    --ac: var(--paccent);
    --ac-soft: var(--paccent-dim);

    --l-trident: #0e7d70;
    --l-python: #2f6fb0;
    --l-js: #b8860b;
    --l-java: #b3451e;
    --l-csharp: #7343b8;
    --l-go: #1c8fa0;
    --l-rust: #a4441f;
    --l-c: #556270;
    --l-cpp: #a0397a;
    --l-cutlass: #3d6e8f;
    --l-lua: #3a5aa0;
    --l-typescript: #3178c6;
    --l-kotlin: #9740ad;
    --l-swift: #d9691d;
    --l-objc: #3f6b8a;
    --l-ruby: #c23a5e;
    --l-zig: #e08e1a;
    --l-php: #5b6bab;
    --l-dart: #1478b5;
    --l-haskell: #5847a3;
    --l-elixir: #8a3f7a;
    --l-nim: #a67c0a;
    --l-scala: #9c3040;
    --l-perl: #8a5a2b;
    --l-julia: #4a9c2e;
    --l-jai: #8a5a2b;
    --l-verse: #5b4bb8;
    --l-luau: #1a7a8c;

    --l-status-missing: #c0392b;
    --l-status-extlib: #a67c00;
    --v-good-fg: #1f6f8b;
    --v-warn-fg: #9a6410;
    --v-bad-fg: #b03328;
    --v-pres-fg: #3a5fa8;

    /* The grade a card carries, read against Trident's own card. The card's
       left rule and its file-extension pill are the only things this colors,
       so a color on this page is a verdict and never a language's identity. */
    --g-ref: var(--ac);
    --g-has: var(--v-good-fg);
    --g-partial: var(--v-warn-fg);
    --g-lib: #7a5aa8;
    --g-none: var(--l-status-missing);

    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  @media (prefers-color-scheme: dark) {
    .comparison-document:not([data-theme="light"]) {
      --bg: var(--ink);
      --panel: var(--ink-2);
      --panel-2: var(--ink-3);
      --border: var(--line);
      --fg: var(--text);
      --fg-dim: var(--text-dim);
      --ac: var(--accent);
      --ac-soft: var(--accent-dim);

      --l-trident: #35d0c0;
      --l-python: #6fa8dc;
      --l-js: #e0b64a;
      --l-java: #e08a5c;
      --l-csharp: #b48ce0;
      --l-go: #5ecbdc;
      --l-rust: #e08a5c;
      --l-c: #9db0c0;
      --l-cpp: #e08ac2;
      --l-cutlass: #7fb3d9;
      --l-lua: #8fa8e0;
      --l-typescript: #6fa9e8;
      --l-kotlin: #c77ed6;
      --l-swift: #f0954f;
      --l-objc: #7ba7c9;
      --l-ruby: #e2738f;
      --l-zig: #f5b452;
      --l-php: #94a0d9;
      --l-dart: #5fb0e0;
      --l-haskell: #9587d6;
      --l-elixir: #c07bb0;
      --l-nim: #e0b64a;
      --l-scala: #d67582;
      --l-perl: #c99a5e;
      --l-julia: #7fce5e;
      --l-jai: #d69a5c;
      --l-verse: #9d90ea;
      --l-luau: #5cc4d6;

      --l-status-missing: #e2574a;
      --l-status-extlib: #e0b03c;
      --v-good-fg: #63c2d8;
      --v-warn-fg: #e0a63c;
      --v-bad-fg: #e8685a;
      --v-pres-fg: #8aa8e8;
      --g-lib: #a992e0;
    }
  }
  .comparison-document[data-theme="dark"] {
    --bg: var(--ink);
    --panel: var(--ink-2);
    --panel-2: var(--ink-3);
    --border: var(--line);
    --fg: var(--text);
    --fg-dim: var(--text-dim);
    --ac: var(--accent);
    --ac-soft: var(--accent-dim);

    --l-trident: #35d0c0;
    --l-python: #6fa8dc;
    --l-js: #e0b64a;
    --l-java: #e08a5c;
    --l-csharp: #b48ce0;
    --l-go: #5ecbdc;
    --l-rust: #e08a5c;
    --l-c: #9db0c0;
    --l-cpp: #e08ac2;
    --l-cutlass: #7fb3d9;
    --l-lua: #8fa8e0;
    --l-typescript: #6fa9e8;
    --l-kotlin: #c77ed6;
    --l-swift: #f0954f;
    --l-objc: #7ba7c9;
    --l-ruby: #e2738f;
    --l-zig: #f5b452;
    --l-php: #94a0d9;
    --l-dart: #5fb0e0;
    --l-haskell: #9587d6;
    --l-elixir: #c07bb0;
    --l-nim: #e0b64a;
    --l-scala: #d67582;
    --l-perl: #c99a5e;
    --l-julia: #7fce5e;
    --l-jai: #d69a5c;
    --l-verse: #9d90ea;
    --l-luau: #5cc4d6;

    --l-status-missing: #e2574a;
    --l-status-extlib: #e0b03c;
    --v-good-fg: #63c2d8;
    --v-warn-fg: #e0a63c;
    --v-bad-fg: #e8685a;
    --v-pres-fg: #8aa8e8;
    --g-lib: #a992e0;
  }

  /* JetBrains Mono draws `!=`, `<=`, `->`, `::` and most other operator
     pairs as one ligature glyph, so `!=` read as a slashed equals. This page
     compares source text, so every sample shows the characters its author
     typed. The rule sits on `*` rather than `body` because inheritance does
     not reach every element: the user-agent sheet sets the `font` shorthand
     on buttons, which resets the font variant there. A later rule that spells
     the shorthand resets it too. */
  .comparison-document * { box-sizing: border-box; font-variant-ligatures: none; }
  .comparison-document,
.comparison-document { margin: 0; padding: 0; background: var(--bg); }
  .comparison-document {
    margin: 0;
    color: var(--fg);
    font-family: "Public Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  .comparison-document .mono {
    font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  }
  .comparison-document h1,
.comparison-document h2,
.comparison-document h3 {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0;
  }
  .comparison-document a { color: var(--ac); }

  .comparison-document {
    display: grid;
    position: relative;
    /* --side-w is the drag handle's one output; 260px is the untouched
       default and the width a double-click on the handle restores. */
    grid-template-columns: var(--side-w, 260px) minmax(0, 1fr);
    width: 100%;
    margin: 0;
  }
  @media (max-width: 900px) {
    /* The side nav is display:none here, so the stored width must not
       leak into the one-column layout. */
    .comparison-document { grid-template-columns: 1fr; }
  }

  /* --- top bar --- */
  .comparison-document .topbar {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 20;
    display: none;
  }
  @media (max-width: 900px) {
    .comparison-document .topbar { display: block; }
  }
  .comparison-document .topbar-inner {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .comparison-document .topbar .brand { font-size: 13px; font-weight: 700; color: var(--fg); white-space: nowrap; }
  .comparison-document .topbar .brand .dot { color: var(--ac); }

  /* --- side nav --- */
  .comparison-document .side {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    padding: 28px 18px 28px 24px;
  }
  @media (max-width: 900px) {
    .comparison-document .side { display: none; }
  }

  /* --- side nav resize handle ---
     The strip is absolutely positioned against .shell at exactly --side-w,
     not floated inside .side: .side has padding and its own border, so a
     handle placed within it lands short of the edge it claims to drag. It
     spans the shell's whole height, so it is grabbable at any scroll
     position without needing to be sticky. */
  .comparison-document .side-resize {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-w, 260px);
    width: 0;
    z-index: 5;
  }
  .comparison-document .side-resize button {
    position: absolute;
    top: 0;
    left: -4px;
    width: 9px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
  }
  /* The hairline sits over .side's own right border, so a hover tints the
     existing rule rather than drawing a second one beside it. */
  .comparison-document .side-resize button::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 1px;
    background: transparent;
  }
  .comparison-document .side-resize button:hover::before,
.comparison-document .side-resize button:focus-visible::before,
.comparison-document[data-resizing] .side-resize button::before { background: var(--ac); }
  .comparison-document .side-resize button:focus-visible { outline: none; }
  /* A drag that leaves the handle must not select the page text it crosses. */
  .comparison-document[data-resizing] { user-select: none; }
  .comparison-document[data-resizing] * { cursor: col-resize !important; }
  @media (max-width: 900px) {
    .comparison-document .side-resize { display: none; }
  }
  .comparison-document .brand-block { margin-bottom: 22px; }
  .comparison-document .brand-block .brand {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .comparison-document .brand-block .brand .dot { color: var(--ac); }
  .comparison-document .brand-block .sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--fg-dim);
    line-height: 1.5;
  }
  .comparison-document nav.toc { display: flex; flex-direction: column; gap: 2px; }
  .comparison-document nav.toc .grp-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-dim);
    margin: 16px 0 6px;
  }
  .comparison-document nav.toc .grp-label:first-child { margin-top: 0; }
  .comparison-document nav.toc a {
    font-size: 12.5px;
    color: var(--fg-dim);
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 6px;
    border-left: 2px solid transparent;
  }
  .comparison-document nav.toc a:hover { color: var(--fg); background: var(--panel); }
  .comparison-document nav.toc a.active { color: var(--ac); border-left-color: var(--ac); background: var(--panel); font-weight: 600; }

  /* --- main --- */
  .comparison-document { min-width: 0; padding: 0 0 80px; }

  .comparison-document .hero {
    padding: 56px 40px 34px;
    border-bottom: 1px solid var(--border);
  }
  @media (max-width: 900px) { .comparison-document .hero { padding: 34px 18px 26px; } }
  .comparison-document .hero .eyebrow {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ac);
    font-weight: 700;
    margin-bottom: 12px;
  }
  .comparison-document .hero h1 { font-size: clamp(28px, 4vw, 42px); max-width: 16ch; }
  .comparison-document .hero p.lede {
    margin-top: 14px;
    max-width: 62ch;
    color: var(--fg-dim);
    font-size: 15.5px;
  }
  .comparison-document .hero .src {
    margin-top: 18px;
    font-size: 12px;
    color: var(--fg-dim);
  }

  .comparison-document section.feature {
    padding: 40px 40px 8px;
    border-bottom: 1px solid var(--border);
    scroll-margin-top: 90px;
  }
  @media (max-width: 900px) { .comparison-document section.feature { padding: 30px 18px 4px; } }
  .comparison-document section.feature .fhead {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }
  .comparison-document section.feature .fhead .num {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--ac);
    font-weight: 700;
  }
  .comparison-document section.feature h2 { font-size: 19px; }
  .comparison-document section.feature .fnote {
    color: var(--fg-dim);
    font-size: 13.5px;
    max-width: 74ch;
    margin: 8px 0 22px;
  }
  .comparison-document section.feature .fnote code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }

  .comparison-document .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
  }
  .comparison-document .grid > :only-child { grid-column: 1 / -1; }
  @media (max-width: 1150px) {
    .comparison-document .grid { grid-template-columns: minmax(0, 1fr); }
  }

  .comparison-document .card {
    min-width: 0;
    align-self: start;
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--lc, var(--border));
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .comparison-document .card.lead {
    border-left-width: 3px;
    box-shadow: 0 0 0 1px var(--ac-soft) inset;
  }
  .comparison-document .card.g-ref { --lc: var(--g-ref); }
  .comparison-document .card.g-has { --lc: var(--g-has); }
  .comparison-document .card.g-partial { --lc: var(--g-partial); }
  .comparison-document .card.g-lib { --lc: var(--g-lib); }
  .comparison-document .card.g-none { --lc: var(--g-none); }
  .comparison-document .card .lbl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--fg);
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
  }
  .comparison-document .card .lbl .tag {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--bg);
    background: var(--lc, var(--fg-dim));
    padding: 1px 6px;
    border-radius: 999px;
    letter-spacing: 0.02em;
  }
  /* The family sits on the pre, not only on its code, because every line box
     starts from the pre's own strut. A strut in the user agent's monospace
     sits on a different baseline from JetBrains Mono, and the union of the
     two added about 5px to every card. */
  .comparison-document .card pre {
    margin: 0;
    padding: 12px;
    overflow-x: auto;
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font-size: 12.3px;
    line-height: 1.55;
    flex: none;
  }
  .comparison-document .card pre code {
    font-family: inherit;
    white-space: pre;
    color: var(--fg);
  }
  .comparison-document .card .none {
    padding: 14px 12px;
    font-size: 12.5px;
    color: var(--fg-dim);
    font-style: italic;
  }

  /* A matrix row reads at the font's own line height. The body's 1.55 is
     prose leading, and it made every cell about 5px taller. */
  .comparison-document table.matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: normal;
    margin: 6px 0 30px;
  }
  .comparison-document table.matrix th,
.comparison-document table.matrix td {
    border: 1px solid var(--border);
    padding: 8px 10px;
    text-align: center;
  }
  .comparison-document table.matrix th { background: var(--panel-2); font-family: "JetBrains Mono", monospace; font-size: 11px; }
  .comparison-document table.matrix td:first-child,
.comparison-document table.matrix th:first-child {
    text-align: left;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
  }
  .comparison-document table.matrix .v-best { color: var(--ac); font-weight: 700;
    background: color-mix(in srgb, var(--ac) 14%, transparent); }
  .comparison-document table.matrix .v-good { color: var(--v-good-fg); font-weight: 600;
    background: color-mix(in srgb, var(--v-good-fg) 12%, transparent); }
  .comparison-document table.matrix .v-warn { color: var(--v-warn-fg);
    background: color-mix(in srgb, var(--v-warn-fg) 12%, transparent); }
  .comparison-document table.matrix .v-bad { color: var(--v-bad-fg); font-weight: 600;
    background: color-mix(in srgb, var(--v-bad-fg) 13%, transparent); }
  .comparison-document table.matrix .v-na { color: var(--fg-dim); }
  .comparison-document table.matrix .v-has { color: var(--fg); }
  .comparison-document table.matrix .v-partial { color: var(--v-warn-fg);
    background: color-mix(in srgb, var(--v-warn-fg) 9%, transparent); }
  .comparison-document table.matrix .p-yes { color: var(--v-pres-fg);
    background: color-mix(in srgb, var(--v-pres-fg) 13%, transparent); }
  .comparison-document table.matrix .p-partial { color: var(--v-warn-fg);
    background: color-mix(in srgb, var(--v-warn-fg) 11%, transparent); }
  .comparison-document table.matrix .p-no { color: var(--fg-dim);
    background: color-mix(in srgb, var(--fg-dim) 9%, transparent); }

  .comparison-document section.feature .quote { margin: 0 0 18px; }
  .comparison-document section.feature .quote .quote-src { font-size: 12px; color: var(--fg-dim); margin: 0 0 6px; }
  .comparison-document section.feature .quote pre {
    margin: 0; padding: 12px 14px; overflow-x: auto;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    font-family: "JetBrains Mono", monospace; font-size: 12.5px; line-height: 1.55;
  }
  .comparison-document .blocklabel {
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 26px 0 8px;
  }

  .comparison-document .legend {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--fg-dim);
  }
  .comparison-document .legend.gradekey {
    margin: 16px 0 0;
    padding: 0 40px;
    max-width: 88ch;
  }
  @media (max-width: 900px) { .comparison-document .legend.gradekey { padding: 0 18px; } }
  .comparison-document .legend .key {
    display: inline-block;
    width: 22px; height: 11px;
    margin: 0 1px -1px 2px;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  }
  .comparison-document .legend .v-best { background: color-mix(in srgb, var(--ac) 45%, transparent); }
  .comparison-document .legend .v-good { background: color-mix(in srgb, var(--v-good-fg) 45%, transparent); }
  .comparison-document .legend .v-warn { background: color-mix(in srgb, var(--v-warn-fg) 45%, transparent); }
  .comparison-document .legend .v-bad { background: color-mix(in srgb, var(--v-bad-fg) 45%, transparent); }
  .comparison-document .legend .v-has { background: color-mix(in srgb, var(--fg) 28%, transparent); }
  .comparison-document .legend .v-partial { background: color-mix(in srgb, var(--v-warn-fg) 32%, transparent); }
  .comparison-document .legend .v-na { background: color-mix(in srgb, var(--fg-dim) 18%, transparent); }
  .comparison-document .legend .p-yes { background: color-mix(in srgb, var(--v-pres-fg) 45%, transparent); }
  .comparison-document .legend .p-partial { background: color-mix(in srgb, var(--v-warn-fg) 40%, transparent); }
  .comparison-document .legend .p-no { background: color-mix(in srgb, var(--fg-dim) 22%, transparent); }
  .comparison-document .legend .g-ref { background: var(--g-ref); }
  .comparison-document .legend .g-has { background: var(--g-has); }
  .comparison-document .legend .g-partial { background: var(--g-partial); }
  .comparison-document .legend .g-lib { background: var(--g-lib); }
  .comparison-document .legend .g-none { background: var(--g-none); }

  .comparison-document .matrix-wrap { overflow-x: auto; }
  /* A Trident-only table. It is not a .matrix, so the language filter,
     which hides columns by position, never reaches it. */
  .comparison-document table.status { width: 100%; border-collapse: collapse; font-size: 13px; line-height: normal; margin: 6px 0 30px; }
  .comparison-document table.status th,
.comparison-document table.status td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
  .comparison-document table.status th { background: var(--panel-2); font-family: "JetBrains Mono", monospace; font-size: 11px; }
  .comparison-document table.status code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }

  .comparison-document .filterbar {
    position: sticky;
    top: 0;
    z-index: 15;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .comparison-document .filterbar-inner {
    padding: 10px 40px;
  }
  .comparison-document .filterbar-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
  .comparison-document .filterbar-heading .filterbar-count { margin-left: auto; }
  .comparison-document .filterbar-options { margin-top: 10px; }
  .comparison-document .filterbar-options[hidden] { display: none; }
  .comparison-document .filterbar-presets { margin-top: 10px; }
  .comparison-document .filterbar-btn:focus-visible,
.comparison-document .pill:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
  .comparison-document .concept-diagram { margin: 18px 0 28px; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
  .comparison-document .concept-diagram h3 { font-size: 14px; margin-bottom: 14px; }
  .comparison-document .concept-diagram figcaption { color: var(--fg-dim); font-size: 12px; margin-top: 14px; }
  .comparison-document .flow-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; }
  .comparison-document .flow-steps li { position: relative; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); font-size: 13px; overflow-wrap: anywhere; }
  .comparison-document .flow-steps li:not(:last-child)::after { content: "\2192"; position: absolute; right: -17px; top: 12px; color: var(--ac); }
  .comparison-document .diagram-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
  .comparison-document .diagram-grid > div { padding: 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; }
  .comparison-document .diagram-grid p { margin: 8px 0 0; font-size: 13px; }
  .comparison-document .diagram-result { color: var(--ac); }
  @media (max-width: 500px) {
    .comparison-document .filterbar-heading { gap: 8px; }
    .comparison-document .filterbar-heading .filterbar-count { margin-left: 0; }
    .comparison-document .filterbar-btn,
.comparison-document .pill { min-height: 36px; }
    .comparison-document .flow-steps { grid-template-columns: 1fr; }
    .comparison-document .flow-steps li:not(:last-child)::after { content: "\2193"; right: 12px; top: auto; bottom: -19px; }
  }
  @media (max-width: 900px) {
    .comparison-document .filterbar { position: static; }
    .comparison-document .filterbar-inner { padding: 10px 18px; }
  }
  .comparison-document .filterbar-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-dim);
    white-space: nowrap;
  }
  .comparison-document .filterbar-pills { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  .comparison-document .pill {
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--fg-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
  }
  .comparison-document .pill[aria-pressed="true"] {
    color: var(--fg);
    border-color: var(--lc, var(--border));
    background: var(--panel-2);
    box-shadow: 0 0 0 1px var(--lc, transparent) inset;
  }
  .comparison-document .pill.locked { cursor: default; opacity: 0.85; }
  .comparison-document .pill:not(.locked)[aria-pressed="false"] { opacity: 0.55; }
  .comparison-document .pill:not(.locked):hover { color: var(--fg); }
  .comparison-document .filterbar-actions { display: flex; gap: 4px; flex: none; }
  .comparison-document .filterbar-presets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .comparison-document .filterbar-presets .filterbar-label { margin-right: 4px; }
  .comparison-document .filterbar-btn.preset[aria-pressed="true"] {
    color: var(--fg);
    border-color: var(--ac);
    background: var(--panel-2);
  }
  .comparison-document .filterbar-btn {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--fg-dim);
    cursor: pointer;
    white-space: nowrap;
  }
  .comparison-document .filterbar-btn:hover { color: var(--fg); border-color: var(--fg-dim); }
  .comparison-document .filterbar-count { font-size: 11px; color: var(--fg-dim); white-space: nowrap; }

  .comparison-document[data-off~="c"] .grid:not(.grid-fixed) > :nth-child(2),
.comparison-document[data-off~="c"] table.matrix:not(.matrix-labeled) tr > *:nth-child(2),
.comparison-document[data-off~="c"] table.matrix.matrix-labeled tr > *:nth-child(3) { display: none; }

  .comparison-document[data-off~="csharp"] .grid:not(.grid-fixed) > :nth-child(3),
.comparison-document[data-off~="csharp"] table.matrix:not(.matrix-labeled) tr > *:nth-child(3),
.comparison-document[data-off~="csharp"] table.matrix.matrix-labeled tr > *:nth-child(4) { display: none; }

  .comparison-document[data-off~="cpp"] .grid:not(.grid-fixed) > :nth-child(4),
.comparison-document[data-off~="cpp"] table.matrix:not(.matrix-labeled) tr > *:nth-child(4),
.comparison-document[data-off~="cpp"] table.matrix.matrix-labeled tr > *:nth-child(5) { display: none; }

  .comparison-document[data-off~="cutlass"] .grid:not(.grid-fixed) > :nth-child(5),
.comparison-document[data-off~="cutlass"] table.matrix:not(.matrix-labeled) tr > *:nth-child(5),
.comparison-document[data-off~="cutlass"] table.matrix.matrix-labeled tr > *:nth-child(6) { display: none; }

  .comparison-document[data-off~="dart"] .grid:not(.grid-fixed) > :nth-child(6),
.comparison-document[data-off~="dart"] table.matrix:not(.matrix-labeled) tr > *:nth-child(6),
.comparison-document[data-off~="dart"] table.matrix.matrix-labeled tr > *:nth-child(7) { display: none; }

  .comparison-document[data-off~="elixir"] .grid:not(.grid-fixed) > :nth-child(7),
.comparison-document[data-off~="elixir"] table.matrix:not(.matrix-labeled) tr > *:nth-child(7),
.comparison-document[data-off~="elixir"] table.matrix.matrix-labeled tr > *:nth-child(8) { display: none; }

  .comparison-document[data-off~="go"] .grid:not(.grid-fixed) > :nth-child(8),
.comparison-document[data-off~="go"] table.matrix:not(.matrix-labeled) tr > *:nth-child(8),
.comparison-document[data-off~="go"] table.matrix.matrix-labeled tr > *:nth-child(9) { display: none; }

  .comparison-document[data-off~="haskell"] .grid:not(.grid-fixed) > :nth-child(9),
.comparison-document[data-off~="haskell"] table.matrix:not(.matrix-labeled) tr > *:nth-child(9),
.comparison-document[data-off~="haskell"] table.matrix.matrix-labeled tr > *:nth-child(10) { display: none; }

  .comparison-document[data-off~="jai"] .grid:not(.grid-fixed) > :nth-child(10),
.comparison-document[data-off~="jai"] table.matrix:not(.matrix-labeled) tr > *:nth-child(10),
.comparison-document[data-off~="jai"] table.matrix.matrix-labeled tr > *:nth-child(11) { display: none; }

  .comparison-document[data-off~="java"] .grid:not(.grid-fixed) > :nth-child(11),
.comparison-document[data-off~="java"] table.matrix:not(.matrix-labeled) tr > *:nth-child(11),
.comparison-document[data-off~="java"] table.matrix.matrix-labeled tr > *:nth-child(12) { display: none; }

  .comparison-document[data-off~="js"] .grid:not(.grid-fixed) > :nth-child(12),
.comparison-document[data-off~="js"] table.matrix:not(.matrix-labeled) tr > *:nth-child(12),
.comparison-document[data-off~="js"] table.matrix.matrix-labeled tr > *:nth-child(13) { display: none; }

  .comparison-document[data-off~="julia"] .grid:not(.grid-fixed) > :nth-child(13),
.comparison-document[data-off~="julia"] table.matrix:not(.matrix-labeled) tr > *:nth-child(13),
.comparison-document[data-off~="julia"] table.matrix.matrix-labeled tr > *:nth-child(14) { display: none; }

  .comparison-document[data-off~="kotlin"] .grid:not(.grid-fixed) > :nth-child(14),
.comparison-document[data-off~="kotlin"] table.matrix:not(.matrix-labeled) tr > *:nth-child(14),
.comparison-document[data-off~="kotlin"] table.matrix.matrix-labeled tr > *:nth-child(15) { display: none; }

  .comparison-document[data-off~="lua"] .grid:not(.grid-fixed) > :nth-child(15),
.comparison-document[data-off~="lua"] table.matrix:not(.matrix-labeled) tr > *:nth-child(15),
.comparison-document[data-off~="lua"] table.matrix.matrix-labeled tr > *:nth-child(16) { display: none; }

  .comparison-document[data-off~="luau"] .grid:not(.grid-fixed) > :nth-child(16),
.comparison-document[data-off~="luau"] table.matrix:not(.matrix-labeled) tr > *:nth-child(16),
.comparison-document[data-off~="luau"] table.matrix.matrix-labeled tr > *:nth-child(17) { display: none; }

  .comparison-document[data-off~="nim"] .grid:not(.grid-fixed) > :nth-child(17),
.comparison-document[data-off~="nim"] table.matrix:not(.matrix-labeled) tr > *:nth-child(17),
.comparison-document[data-off~="nim"] table.matrix.matrix-labeled tr > *:nth-child(18) { display: none; }

  .comparison-document[data-off~="objc"] .grid:not(.grid-fixed) > :nth-child(18),
.comparison-document[data-off~="objc"] table.matrix:not(.matrix-labeled) tr > *:nth-child(18),
.comparison-document[data-off~="objc"] table.matrix.matrix-labeled tr > *:nth-child(19) { display: none; }

  .comparison-document[data-off~="perl"] .grid:not(.grid-fixed) > :nth-child(19),
.comparison-document[data-off~="perl"] table.matrix:not(.matrix-labeled) tr > *:nth-child(19),
.comparison-document[data-off~="perl"] table.matrix.matrix-labeled tr > *:nth-child(20) { display: none; }

  .comparison-document[data-off~="php"] .grid:not(.grid-fixed) > :nth-child(20),
.comparison-document[data-off~="php"] table.matrix:not(.matrix-labeled) tr > *:nth-child(20),
.comparison-document[data-off~="php"] table.matrix.matrix-labeled tr > *:nth-child(21) { display: none; }

  .comparison-document[data-off~="python"] .grid:not(.grid-fixed) > :nth-child(21),
.comparison-document[data-off~="python"] table.matrix:not(.matrix-labeled) tr > *:nth-child(21),
.comparison-document[data-off~="python"] table.matrix.matrix-labeled tr > *:nth-child(22) { display: none; }

  .comparison-document[data-off~="ruby"] .grid:not(.grid-fixed) > :nth-child(22),
.comparison-document[data-off~="ruby"] table.matrix:not(.matrix-labeled) tr > *:nth-child(22),
.comparison-document[data-off~="ruby"] table.matrix.matrix-labeled tr > *:nth-child(23) { display: none; }

  .comparison-document[data-off~="rust"] .grid:not(.grid-fixed) > :nth-child(23),
.comparison-document[data-off~="rust"] table.matrix:not(.matrix-labeled) tr > *:nth-child(23),
.comparison-document[data-off~="rust"] table.matrix.matrix-labeled tr > *:nth-child(24) { display: none; }

  .comparison-document[data-off~="scala"] .grid:not(.grid-fixed) > :nth-child(24),
.comparison-document[data-off~="scala"] table.matrix:not(.matrix-labeled) tr > *:nth-child(24),
.comparison-document[data-off~="scala"] table.matrix.matrix-labeled tr > *:nth-child(25) { display: none; }

  .comparison-document[data-off~="swift"] .grid:not(.grid-fixed) > :nth-child(25),
.comparison-document[data-off~="swift"] table.matrix:not(.matrix-labeled) tr > *:nth-child(25),
.comparison-document[data-off~="swift"] table.matrix.matrix-labeled tr > *:nth-child(26) { display: none; }

  .comparison-document[data-off~="typescript"] .grid:not(.grid-fixed) > :nth-child(26),
.comparison-document[data-off~="typescript"] table.matrix:not(.matrix-labeled) tr > *:nth-child(26),
.comparison-document[data-off~="typescript"] table.matrix.matrix-labeled tr > *:nth-child(27) { display: none; }

  .comparison-document[data-off~="verse"] .grid:not(.grid-fixed) > :nth-child(27),
.comparison-document[data-off~="verse"] table.matrix:not(.matrix-labeled) tr > *:nth-child(27),
.comparison-document[data-off~="verse"] table.matrix.matrix-labeled tr > *:nth-child(28) { display: none; }

  .comparison-document[data-off~="zig"] .grid:not(.grid-fixed) > :nth-child(28),
.comparison-document[data-off~="zig"] table.matrix:not(.matrix-labeled) tr > *:nth-child(28),
.comparison-document[data-off~="zig"] table.matrix.matrix-labeled tr > *:nth-child(29) { display: none; }

  .comparison-document footer {
    padding: 30px 40px 10px;
    font-size: 12px;
    color: var(--fg-dim);
  }
  @media (max-width: 900px) { .comparison-document footer { padding: 24px 18px; } }
  /* Reclaim controls are independent of the language-column filter. */
  .comparison-document .reclaim-demo { margin: 0 0 24px; padding: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
  .comparison-document .reclaim-demo h3 { margin: 0; font-size: 16px; }
  .comparison-document .reclaim-demo p { font-size: 13px; }
  .comparison-document .reclaim-config { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
  .comparison-document .reclaim-config label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--fg-dim); }
  .comparison-document .reclaim-config output { color: var(--fg); font-variant-numeric: tabular-nums; }
  .comparison-document .reclaim-config input,
.comparison-document .reclaim-config select { width: 100%; accent-color: var(--ac); }
  .comparison-document .reclaim-config select { padding: 8px; background: var(--panel-2); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; font: inherit; }
  .comparison-document .reclaim-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
  .comparison-document .reclaim-demo button { padding: 9px 13px; background: var(--panel-2); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; font: inherit; font-size: 12px; cursor: pointer; }
  .comparison-document .reclaim-demo button:disabled { opacity: .5; cursor: default; }
  .comparison-document .reclaim-demo button:focus-visible,
.comparison-document .reclaim-demo input:focus-visible,
.comparison-document .reclaim-demo select:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
  .comparison-document .reclaim-demo .reclaim-play { background: var(--ac); color: var(--panel); border-color: var(--ac); }
  .comparison-document .reclaim-step-count { margin-left: auto; font-size: 12px; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
  .comparison-document .reclaim-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .comparison-document .reclaim-table { grid-column: 1 / -1; }
  .comparison-document .reclaim-demo h4 { font-size: 12px; font-weight: 600; margin: 14px 0 8px; }
  .comparison-document .reclaim-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .comparison-document .reclaim-slot { padding: 10px 6px; background: var(--panel-2); border-radius: 4px; text-align: center; font-size: 12px; }
  .comparison-document .reclaim-slot[data-live="true"] { background: var(--ac-soft); }
  .comparison-document .reclaim-slot small { display: block; margin-top: 4px; font-size: 11px; color: var(--fg-dim); }
  .comparison-document .reclaim-region { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; margin: 12px 0; }
  .comparison-document .reclaim-region code { color: var(--fg); overflow-wrap: anywhere; }
  .comparison-document .reclaim-meter-label { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
  .comparison-document .reclaim-meter { display: flex; height: 14px; margin: 8px 0 12px; background: var(--panel-2); overflow: hidden; border-radius: 3px; }
  .comparison-document .reclaim-meter span { transition: width .55s ease; }
  .comparison-document .reclaim-meter .reclaim-payload { background: var(--ac); }
  .comparison-document .reclaim-meter .reclaim-metadata { background: var(--v-pres-fg); }
  .comparison-document .reclaim-block-space { min-height: 86px; }
  .comparison-document .reclaim-block { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px; background: var(--ac-soft); border-radius: 4px; font-size: 12px; }
  .comparison-document .reclaim-block small { flex-basis: 100%; color: var(--fg-dim); font-size: 12px; }
  .comparison-document .reclaim-empty { padding: 12px 0; font-size: 12px; color: var(--fg-dim); }
  .comparison-document .reclaim-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--fg-dim); margin: 14px 0; }
  .comparison-document .reclaim-legend i { display: inline-block; width: 10px; height: 10px; background: var(--ac); margin-right: 5px; }
  .comparison-document .reclaim-legend .reclaim-descriptor-key { background: var(--v-pres-fg); }
  .comparison-document .reclaim-status { border-top: 1px solid var(--border); padding-top: 14px; min-height: 80px; }
  .comparison-document .reclaim-status strong { display: block; font-size: 14px; }
  .comparison-document .reclaim-status p { margin: 6px 0 0; color: var(--fg-dim); }
  .comparison-document .reclaim-status[data-refused="true"] strong { color: var(--v-bad-fg); }
  .comparison-document .reclaim-demo .reclaim-note { color: var(--fg-dim); font-size: 12px; margin: 12px 0 0; max-width: 85ch; }
  @media (max-width: 650px) {
    .comparison-document .reclaim-demo { padding: 14px; }
    .comparison-document .reclaim-config { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .comparison-document .reclaim-config label:nth-last-child(-n+2) { grid-column: 1 / -1; }
    .comparison-document .reclaim-stage { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .comparison-document .reclaim-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .comparison-document .reclaim-step-count { margin-left: 0; }
    .comparison-document .reclaim-config select { font-size: 16px; }
  }
  @media (prefers-reduced-motion: reduce) { .comparison-document .reclaim-meter span { transition: none; } }
  @media (pointer: coarse) { .comparison-document .reclaim-demo button,
.comparison-document .reclaim-config select { min-height: 44px; } }

  /* Glossary terms: a dotted underline marks a word the glossary explains, and
     one shared tooltip shows its entry on hover or tap. */
  .comparison-document .gl-term {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--fg-dim);
    text-underline-offset: 3px;
    cursor: help;
  }
  .comparison-document pre .gl-term { text-underline-offset: 2px; }
  .comparison-document .gl-term[aria-describedby] { text-decoration-color: var(--ac); text-decoration-style: solid; }
  .comparison-document #gl-tip {
    position: absolute;
    z-index: 60;
    box-sizing: border-box;
    width: max-content;
    max-width: min(460px, calc(100vw - 32px));
    padding: 12px 14px;
    background: var(--panel);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
  }
  .comparison-document #gl-tip[hidden] { display: none; }
  .comparison-document #gl-tip .gl-head {
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font-weight: 700;
    font-size: 13px;
    color: var(--ac);
    margin: 0 0 6px;
  }
  .comparison-document #gl-tip p,
.comparison-document .glossary dd p { margin: 0 0 8px; }
  .comparison-document #gl-tip pre,
.comparison-document .glossary dd pre {
    margin: 0 0 8px;
    padding: 8px 10px;
    background: var(--panel-2);
    border-radius: 6px;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.45;
  }
  /* A hover popup cannot be scrolled sideways comfortably, so a long example
     line wraps rather than hiding behind a scrollbar. */
  .comparison-document #gl-tip pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .comparison-document #gl-tip pre code,
.comparison-document .glossary dd pre code { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }
  .comparison-document #gl-tip p code,
.comparison-document .glossary dd p code { background: var(--panel-2); padding: 1px 4px; border-radius: 4px; }
  .comparison-document #gl-tip .gl-bug,
.comparison-document .glossary .gl-bug { color: var(--fg-dim); }
  .comparison-document #gl-tip .gl-more { display: inline-block; font-size: 12.5px; color: var(--ac); }
  .comparison-document .glossary details.gl-all > summary { cursor: pointer; font-weight: 600; margin: 0 0 14px; }
  .comparison-document .glossary dl.gl { margin: 0 0 30px; max-width: 80ch; }
  .comparison-document .glossary .gl-entry { padding: 12px 0; border-top: 1px solid var(--border); scroll-margin-top: 90px; }
  .comparison-document .glossary .gl-entry:target { background: var(--ac-soft); }
  .comparison-document .glossary dt { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-weight: 700; color: var(--ac); }
  .comparison-document .glossary dd { margin: 6px 0 0; font-size: 14px; }
  @media print { .comparison-document #gl-tip { display: none; } }

  .comparison-document .support-row { display: flex; align-items: center; gap: .65rem; margin: .6rem 0 1rem; }
  .comparison-document .support-detail { position: relative; }
  .comparison-document .observation-flow { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; list-style-position: inside; }
  .comparison-document .observation-flow li { flex: 1 1 150px; padding: .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: .85rem; }
  .comparison-document .metric-class-table .support-tip { position: static; width: auto; min-width: 220px; margin-top: .65rem; box-shadow: none; }
  .comparison-document .support-pill { cursor: pointer; padding: .35rem .65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font: 600 .78rem "Public Sans", sans-serif; color: var(--fg); }
  .comparison-document .support-pill:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
  .comparison-document .support-hint { font-size: .75rem; color: var(--fg-dim); }
  .comparison-document .support-tip { position: absolute; z-index: 30; top: calc(100% + .4rem); left: 0; width: min(340px, 75vw); padding: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--fg); box-shadow: 0 8px 24px #0002; font-size: .85rem; line-height: 1.55; }
  .comparison-document .support-tip p { margin: 0 0 .65rem; }
  .comparison-document .support-summary { margin: 2rem 0; }
  @media print { .comparison-document .support-detail { position: static; } .comparison-document .support-tip { position: static; width: auto; box-shadow: none; } .comparison-document .support-hint { display: none; } }

  .comparison-document .metric-names { margin: 32px 0; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
  .comparison-document .metric-names h3 { margin-top: 0; font-size: 1.35rem; }
  .comparison-document .metric-intro { max-width: 86ch; line-height: 1.65; }
  .comparison-document .metric-controls { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 12px; }
  .comparison-document .metric-controls button { color:var(--fg); background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:10px 16px; font:inherit; cursor:pointer; }
  .comparison-document .metric-controls button[aria-pressed="true"] { color:var(--panel); background:var(--ac); border-color:var(--ac); }
  .comparison-document .metric-controls button:focus-visible { outline:3px solid var(--ac); outline-offset:3px; }
  .comparison-document .metric-scenario-summary { min-height:3.3em; line-height:1.6; }
  .comparison-document .metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; align-items:start; }
  .comparison-document .metric-card { border:1px solid var(--border); border-top:4px solid var(--ac); border-radius:10px; padding:18px; min-width:0; background:var(--bg); }
  .comparison-document .metric-card h4 { font-size:1.3rem; margin:0 0 8px; }
  .comparison-document .metric-card p { line-height:1.6; }
  .comparison-document .metric-state { font-size:.8rem; display:inline-block; border:1px solid var(--border); border-radius:5px; padding:4px 7px; color:var(--fg-dim); }
  .comparison-document .metric-card figure { margin:14px 0; }
  .comparison-document .metric-chart svg { width:100%; height:auto; display:block; }
  .comparison-document .metric-axis { fill:none; stroke:var(--border); }
  .comparison-document .metric-line { fill:none; stroke:var(--ac); stroke-width:3; }
  .comparison-document .metric-point,
.comparison-document .metric-bar { fill:var(--ac); }
  .comparison-document .metric-break { stroke:var(--fg-dim); stroke-dasharray:4 4; }
  .comparison-document .metric-value { fill:var(--fg); font-size:12px; font-family:monospace; }
  .comparison-document .metric-axis-label { fill:var(--fg-dim); font-size:9px; font-family:monospace; }
  .comparison-document .metric-missing { fill:var(--fg-dim); font-size:23px; }
  .comparison-document .metric-card figcaption { font-size:.85rem; line-height:1.6; min-height:4.8em; }
  .comparison-document .metric-card dl { margin:16px 0; font-size:.88rem; }
  .comparison-document .metric-card dt { font-weight:700; margin-top:12px; }
  .comparison-document .metric-card dd { margin:4px 0 0; line-height:1.6; overflow-wrap:anywhere; }
  .comparison-document .metric-card details { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
  .comparison-document .metric-card summary { cursor:pointer; font-weight:600; line-height:1.5; }
  .comparison-document .metric-card pre { overflow:auto; padding:12px; border:1px solid var(--border); border-radius:6px; background:var(--panel); font-size:.78rem; line-height:1.6; }
  .comparison-document .metric-card .metric-source-note { font-size:.83rem; }
  @media(max-width:600px){ .comparison-document .metric-names { padding:16px; } }

  .comparison-document .constraint-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; }
  .comparison-document .constraint-tools[hidden],
.comparison-document .constraint-family[hidden],
.comparison-document #constraint-empty[hidden],
.comparison-document #constraint-catalog tr[hidden] { display: none; }
  .comparison-document .constraint-tools label { font-weight: 600; }
  .comparison-document .constraint-tools input { flex: 1 1 240px; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--fg); background: var(--panel); font: inherit; }
  .comparison-document .constraint-tools button { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--fg); background: var(--panel); font: inherit; cursor: pointer; }
  .comparison-document .constraint-tools input:focus-visible,
.comparison-document .constraint-tools button:focus-visible,
.comparison-document .constraint-family > summary:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
  .comparison-document #constraint-count { flex-basis: 100%; color: var(--fg-dim); font-size: 13px; }
  .comparison-document .constraint-family { margin: 10px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
  .comparison-document .constraint-family > summary { padding: 14px 16px; cursor: pointer; font-weight: 600; }
  .comparison-document .constraint-family[open] > summary { border-bottom: 1px solid var(--border); }
  .comparison-document .constraint-family > p,
.comparison-document .constraint-family > pre,
.comparison-document .constraint-family > .matrix-wrap { margin: 16px; }
  .comparison-document .constraint-family table.status { margin-bottom: 0; min-width: 600px; line-height: 1.6; }
  .comparison-document .constraint-family caption { text-align: left; color: var(--fg-dim); margin-bottom: 8px; }
  .comparison-document .constraint-family td code { white-space: normal; overflow-wrap: anywhere; }
  .comparison-document .constraint-family pre { overflow-x: auto; padding: 12px; background: var(--panel-2); border-radius: 6px; }

  .comparison-document .collection-panels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; }
  .comparison-document .collection-panels figure { margin:0; padding:16px; border:1px solid var(--border); border-radius:9px; background:var(--panel); }
  .comparison-document .collection-panels svg { display:block; width:100%; height:auto; color:var(--ac); }
  .comparison-document .collection-panels text { fill:var(--fg); font:14px 'JetBrains Mono',monospace; }
  .comparison-document .collection-panels figcaption { color:var(--fg-dim); line-height:1.6; margin-top:10px; }
  .comparison-document .type-depths { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; padding:0; list-style:none; counter-reset:depth; }
  .comparison-document .type-depths li { flex:1 1 180px; border:1px solid var(--border); border-top:3px solid var(--ac); border-radius:6px; padding:12px; background:var(--panel); }
  .comparison-document .type-depths strong { display:block; margin-bottom:7px; }
  .comparison-document .contract-table { table-layout:fixed; width:100%; }
  .comparison-document .contract-table th:first-child { width:140px; }
  .comparison-document .contract-table td { vertical-align:top; }
  .comparison-document .contract-table details { border:1px solid var(--border); border-radius:6px; background:var(--panel); }
  .comparison-document .contract-table summary { cursor:pointer; padding:12px; font-weight:600; }
  .comparison-document .contract-table pre { height:36rem; overflow:auto; margin:0; padding:16px; background:var(--panel-2); font-size:12px; line-height:1.55; tab-size:2; }
  .comparison-document .contract-table .contract-note { margin:12px; font-size:13px; line-height:1.65; }
  .comparison-document .contract-language-row[hidden] { display:none; }
  .comparison-document .contract-lab { border:1px solid var(--border); border-radius:8px; padding:18px; background:var(--panel); margin:20px 0; }
  .comparison-document .contract-lab-controls { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
  .comparison-document .contract-lab button { background:var(--panel-2); color:var(--fg); border:1px solid var(--border); border-radius:5px; padding:9px 12px; cursor:pointer; font:inherit; }
  .comparison-document .contract-lab button[aria-pressed=true] { color:var(--ac); border-color:var(--ac); font-weight:600; }
  .comparison-document .contract-lab button:focus-visible,
.comparison-document .contract-table summary:focus-visible { outline:2px solid var(--ac); outline-offset:3px; }
  .comparison-document #contract-lab-output { white-space:pre-wrap; overflow-wrap:anywhere; min-height:5em; padding:14px; border-left:3px solid var(--ac); background:var(--panel-2); }
  @media(max-width:850px) { .comparison-document .collection-panels { grid-template-columns:1fr; } .comparison-document .contract-table th:first-child { width:90px; } }

  /* Each code pane keeps its scrollbars when resized from its bottom-right
     corner. Width stays within its column; height can grow past the default. */
  .comparison-document .card pre,
.comparison-document .metric-card pre,
.comparison-document .constraint-family pre,
.comparison-document .contract-table pre,
.comparison-document section.feature .quote pre {
    resize: both;
    overflow: auto;
    min-width: min(12rem, 100%);
    max-width: 100%;
    min-height: 3rem;
  }
  .comparison-document .constraint-family > pre { max-width: calc(100% - 32px); }
  @media print {
    .comparison-document .card pre,
.comparison-document .metric-card pre,
.comparison-document .constraint-family pre,
.comparison-document .contract-table pre,
.comparison-document section.feature .quote pre {
      resize: none;
      width: auto !important;
      height: auto !important;
      overflow: visible;
    }
  }