#global-pane {
    color-scheme: light;

    /* SURFACES — warm neutrals, editorial light */
    --ink-deep:        #fdfcfa;
    --ink:             #faf8f4;
    --surface:         #f5f2ec;
    --surface-raised:  #ffffff;
    --surface-hi:      #ffffff;
    --rule:            #dcd6cb;
    --rule-soft:       #ece7dc;

    /* TEXT */
    --paper:           #1f2328;
    --paper-soft:      #424952;
    --paper-mute:      #6e7781;
    --paper-faint:     #9ba1a8;

    /* ACCENT — amber-700 (text/borders) + Goodfire cream/beige (highlights/wash) */
    --amber:           oklch(55.5% .163 48.998);
    --amber-bright:    oklch(78% .055 78);          /* warm tan, was saturated gold */
    --amber-mute:      oklch(55.5% .163 48.998 / 0.55);
    --amber-glow:      oklch(94% .028 82 / 0.55);   /* soft beige wash (Goodfire bg tone) */

    /* CHOSEN — green-700 (deep refined grass), REJECTED — red-900 (deep oxblood) */
    --chosen:          oklch(52.7% .154 150.069);
    --chosen-soft:     oklch(62.7% .194 149.214 / 0.10);
    --rejected:        oklch(39.6% .141 25.723);
    --rejected-soft:   oklch(50.5% .213 27.518 / 0.10);

    /* AZURE — blue-700, deep saturated navy-blue for balanced / accents */
    --azure:           oklch(48.8% .243 264.376);
    --azure-soft:      oklch(48.8% .243 264.376 / 0.10);
    /* MAROON — red-900, reserved for special emphasis */
    --maroon:          oklch(39.6% .141 25.723);

    /* TYPE STACKS — system sans, Georgia (system) serif, true mono. No external font fetch. */
    --sans:   ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --mono:   ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --serif:  Georgia, "Iowan Old Style", "Charter", "Times New Roman", serif;
  }

  #global-pane *::before, #global-pane *::after { box-sizing: border-box; }
  #global-pane, #global-pane { margin: 0; padding: 0; height: 100%; overflow: hidden; }
  #global-pane {
    font-family: var(--sans);
    font-size: 13px; line-height: 1.5;
    background: var(--ink-deep);
    color: var(--paper);
    font-feature-settings: 'tnum' 1, 'ss01' 1, 'cv11' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  /* Atmospheric overlay disabled for light theme */
  #global-pane body::before { display: none; }

  /* ───────── LAYOUT ───────── */
  #global-pane #global-app {
    display: grid;
    grid-template-rows: 64px 1fr;
    height: 100vh; width: 100vw;
  }

  #global-pane #global-header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 32px;
    padding: 0 36px 0 32px;
    border-bottom: 1px solid var(--rule);
    background: var(--ink-deep);
    position: relative;
  }
  #global-pane #global-header .mark {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.005em;
    line-height: 1;
    color: var(--paper);
    font-variation-settings: 'opsz' 22;
  }
  #global-pane #global-header .mark .glyph {
    color: var(--amber);
    font-weight: 400;
    font-style: italic;
    margin: 0 6px;
  }
  #global-pane #global-header .mark sub {
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--paper-mute);
    margin-left: 16px;
    vertical-align: middle;
    font-weight: 500;
  }
  #global-pane #global-header .stats {
    display: flex; gap: 28px; align-items: baseline;
    justify-self: end;
  }
  #global-pane #global-header .stat-cell {
    display: flex; flex-direction: column; gap: 2px;
  }
  #global-pane #global-header .stat-cell .v {
    font-size: 16px;
    font-weight: 600;
    color: var(--paper);
    letter-spacing: -0.015em;
    line-height: 1;
    font-feature-settings: 'tnum' 1;
  }
  #global-pane #global-header .stat-cell .l {
    font-size: 10px;
    letter-spacing: 0;
    color: var(--paper-mute);
    font-weight: 400;
  }
  #global-pane #global-header .meta {
    font-size: 11px;
    color: var(--paper-mute);
    text-align: right;
    line-height: 1.5;
  }
  #global-pane #global-header .meta .accent { color: var(--amber); }

  #global-pane #global-main {
    display: grid;
    grid-template-columns: minmax(440px, 1fr) minmax(700px, 1.25fr);
    height: 100%;
    min-height: 0;
  }
  #global-pane #global-left {
    display: grid; grid-template-rows: 1fr 1fr;
    border-right: 1px solid var(--rule);
    min-height: 0; min-width: 0;
  }

  /* ───────── SCATTERS ───────── */
  #global-pane .scatter {
    position: relative;
    background: var(--surface);
    min-height: 0; min-width: 0;
    overflow: hidden;
  }
  #global-pane #global-response-scatter { border-bottom: 1px solid var(--rule); }
  #global-pane .scatter canvas { display: block; }

  /* (dotted grid + crosshair tick removed for a cleaner, less-tech feel) */

  /* ───────── FLOATING UI ───────── */
  #global-pane .status {
    position: absolute; top: 14px; left: 14px;
    padding: 7px 12px;
    background: rgba(253, 252, 250, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--rule-soft);
    border-radius: 999px;
    color: var(--paper-soft);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    max-width: 60%;
  }

  #global-pane .toggle {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    padding: 5px 7px;
    background: rgba(253, 252, 250, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--rule-soft);
    border-radius: 999px;
    display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
    max-width: 70%;
  }
  #global-pane .toggle .lbl {
    font-size: 10px;
    color: var(--paper-faint);
    margin-right: 2px;
  }
  #global-pane .toggle button {
    background: transparent;
    color: var(--paper-soft);
    border: 0;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
  }
  #global-pane .toggle button:hover {
    color: var(--paper);
    background: var(--amber-glow);
  }
  #global-pane .toggle button.active {
    color: var(--ink-deep);
    background: var(--amber);
  }

  #global-pane .scatter-label {
    position: absolute; bottom: 14px; right: 14px;
    padding: 5px 12px;
    background: rgba(253, 252, 250, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--rule-soft);
    border-radius: 999px;
    color: var(--paper-mute);
    font-family: var(--serif);
    font-style: italic;
    font-size: 12px;
    pointer-events: none;
  }

  #global-pane #global-feature-search {
    position: absolute; bottom: 14px; left: 14px; z-index: 6;
    width: 340px;
    padding: 10px 12px;
    background: rgba(253, 252, 250, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--rule-soft);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20, 16, 8, 0.04), 0 6px 24px rgba(20, 16, 8, 0.06);
  }
  #global-pane #global-feature-search input, #global-pane #global-cluster-select {
    width: 100%; box-sizing: border-box;
    background: var(--ink-deep);
    color: var(--paper);
    border: 1px solid var(--rule);
    padding: 8px 11px;
    font-family: var(--sans);
    font-size: 12px;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
    border-radius: 8px;
  }
  #global-pane #global-feature-search input:focus, #global-pane #global-cluster-select:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-glow);
  }
  #global-pane #global-feature-search input::placeholder {
    color: var(--paper-faint);
    font-style: italic;
    font-family: var(--serif);
  }
  #global-pane #global-cluster-select {
    margin-top: 6px;
    appearance: none;
    -webkit-appearance: none;
    background-image:
      linear-gradient(45deg,  transparent 50%, var(--paper-mute) 50%),
      linear-gradient(135deg, var(--paper-mute) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 26px;
  }
  #global-pane #global-feature-search-results {
    max-height: 240px; overflow-y: auto;
    margin-top: 6px;
    border-top: 1px solid var(--rule-soft);
  }
  #global-pane #global-feature-search-results.empty { display: none; }
  #global-pane #global-feature-search-results .row {
    padding: 7px 9px;
    cursor: pointer;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 11.5px;
    color: var(--paper);
    transition: background 80ms ease;
  }
  #global-pane #global-feature-search-results .row:hover, #global-pane #global-feature-search-results .row.active { background: var(--amber-glow); }
  #global-pane #global-feature-search-results .row .meta {
    font-family: var(--mono);
    font-size: 9.5px; color: var(--paper-mute);
    margin-top: 3px; letter-spacing: 0.05em;
  }

  /* Mirror feature-search styles for the response-cluster (pc#) search. */
  #global-pane #global-data-cluster-search {
    position: absolute; bottom: 14px; left: 14px; z-index: 6;
    width: 340px;
    padding: 10px 12px;
    background: rgba(253, 252, 250, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--rule-soft);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20, 16, 8, 0.04), 0 6px 24px rgba(20, 16, 8, 0.06);
  }
  #global-pane #global-data-cluster-search input, #global-pane #global-data-cluster-select {
    width: 100%; box-sizing: border-box;
    background: var(--ink-deep);
    color: var(--paper);
    border: 1px solid var(--rule);
    padding: 8px 11px;
    font-family: var(--sans);
    font-size: 12px;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
    border-radius: 8px;
  }
  #global-pane #global-data-cluster-search input:focus, #global-pane #global-data-cluster-select:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-glow);
  }
  #global-pane #global-data-cluster-search input::placeholder {
    color: var(--paper-faint);
    font-style: italic;
    font-family: var(--serif);
  }
  #global-pane #global-data-cluster-select {
    margin-top: 6px;
    appearance: none;
    -webkit-appearance: none;
    background-image:
      linear-gradient(45deg,  transparent 50%, var(--paper-mute) 50%),
      linear-gradient(135deg, var(--paper-mute) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 26px;
  }
  #global-pane #global-data-cluster-search-results {
    max-height: 240px; overflow-y: auto;
    margin-top: 6px;
    border-top: 1px solid var(--rule-soft);
  }
  #global-pane #global-data-cluster-search-results.empty { display: none; }
  #global-pane #global-data-cluster-search-results .row {
    padding: 7px 9px;
    cursor: pointer;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 11.5px;
    color: var(--paper);
    transition: background 80ms ease;
  }
  #global-pane #global-data-cluster-search-results .row:hover, #global-pane #global-data-cluster-search-results .row.active { background: var(--amber-glow); }
  #global-pane #global-data-cluster-search-results .row .meta {
    font-family: var(--mono);
    font-size: 9.5px; color: var(--paper-mute);
    margin-top: 3px; letter-spacing: 0.05em;
  }

  /* ───────── RIGHT PANEL ───────── */
  #global-pane #global-panel {
    overflow-y: auto;
    /* Top padding leaves room for the absolutely-positioned #back-btn
       (~28px tall at top:18px, so first content lands at ~60px). */
    padding: 60px 36px 64px;
    background: var(--ink-deep);
    min-width: 0;
    position: relative;
  }
  /* (panel hairline removed — cleaner without the editorial tick) */

  #global-pane #global-back-btn, #global-pane #global-help-btn, #global-pane #global-pairs-btn {
    position: absolute;
    top: 20px;
    z-index: 5;
    padding: 7px 14px;
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--paper-soft);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
    -webkit-font-smoothing: inherit;
  }
  #global-pane #global-back-btn { left: 20px; }
  #global-pane #global-help-btn { right: 20px; }
  #global-pane #global-pairs-btn { right: 100px; }
  #global-pane #global-back-btn:hover:not(:disabled), #global-pane #global-help-btn:hover, #global-pane #global-pairs-btn:hover {
    color: var(--paper);
    border-color: var(--amber-mute);
    background: var(--ink-deep);
  }
  #global-pane #global-back-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  /* Top-pairs modal overlay (mirrors data→feature reference). */
  #global-pane #global-pairs-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding: 5vh 20px;
    overflow-y: auto;
  }
  #global-pane #global-pairs-overlay.open { display: flex; }
  #global-pane #global-pairs-modal {
    background: var(--surface-raised);
    max-width: 1240px;
    width: 100%;
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 32px 40px 40px;
    position: relative;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--paper);
    box-shadow: 0 1px 2px rgba(20, 16, 8, 0.04), 0 18px 60px rgba(20, 16, 8, 0.18);
    margin-bottom: 5vh;
  }
  #global-pane #global-pairs-close {
    position: absolute; top: 18px; right: 18px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 5px 12px;
    font: inherit; font-size: 11px; font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--paper-soft);
    cursor: pointer;
    transition: all 140ms ease;
  }
  #global-pane #global-pairs-close:hover {
    color: var(--paper);
    border-color: var(--amber-mute);
    background: var(--ink-deep);
  }
  #global-pane #global-pairs-modal h2 {
    font-family: var(--serif);
    font-size: 28px; font-weight: 500;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
  #global-pane #global-pairs-modal .lede {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    color: var(--paper-soft);
    margin: 0 0 18px;
    font-size: 13.5px; line-height: 1.5;
    max-width: 100ch;
  }
  #global-pane #global-pairs-howto {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: var(--ink-deep);
    border: 1px solid var(--rule);
    border-radius: 8px;
    font-size: 12px; line-height: 1.5;
    color: var(--paper-soft);
  }
  #global-pane #global-pairs-howto strong { color: var(--paper); font-weight: 600; }
  #global-pane #global-pairs-howto ul { margin: 6px 0 0 0; padding-left: 18px; list-style: disc; }
  #global-pane #global-pairs-howto li { margin: 2px 0; }
  #global-pane #global-pairs-howto .hint-key {
    display: inline-block;
    background: var(--surface-raised); color: var(--paper);
    border-radius: 4px; padding: 1px 6px;
    font-family: var(--mono); font-size: 10.5px; font-weight: 600;
    margin-right: 4px;
  }
  #global-pane #global-pairs-howto .swatch-chosen { color: var(--chosen); font-weight: 600; }
  #global-pane #global-pairs-howto .swatch-rejected { color: var(--rejected); font-weight: 600; }
  #global-pane #global-pairs-howto code {
    font-family: var(--mono); font-size: 11px;
    background: var(--surface-raised); padding: 1px 4px; border-radius: 3px;
  }
  #global-pane #global-pairs-howto .hint-note {
    margin: 8px 0 0 0;
    padding: 8px 10px;
    background: var(--surface-raised);
    border-left: 3px solid var(--amber-mute);
    border-radius: 4px;
    font-size: 11.5px; line-height: 1.5;
  }
  #global-pane #global-pairs-controls {
    display: flex; gap: 16px; align-items: center;
    margin: 0 0 14px; padding: 10px 14px;
    background: var(--ink-deep);
    border: 1px solid var(--rule);
    border-radius: 8px;
    font-size: 11.5px;
  }
  #global-pane #global-pairs-controls .ctrl { display: flex; align-items: center; gap: 6px; cursor: help; }
  #global-pane #global-pairs-controls .ctrl-check input[type="checkbox"] {
    margin: 0 4px 0 0; cursor: pointer;
    accent-color: var(--amber);
  }
  #global-pane #global-pairs-controls .ctrl-check .ctrl-lbl {
    color: var(--paper);
    font-family: var(--sans); font-size: 11.5px; font-weight: 500;
    border-bottom: 1px dotted var(--rule);
  }
  #global-pane #global-pairs-controls .ctrl-lbl {
    color: var(--paper-mute);
    font-family: var(--mono); font-size: 10.5px;
    border-bottom: 1px dotted var(--rule);
  }
  #global-pane #global-pairs-controls input[type="number"] {
    width: 60px;
    background: var(--surface-raised); color: var(--paper);
    border: 1px solid var(--rule); border-radius: 4px;
    padding: 4px 6px;
    font-family: var(--mono); font-size: 11.5px;
    outline: none;
  }
  #global-pane #global-pairs-controls input[type="number"]:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 2px var(--amber-glow);
  }
  #global-pane #global-pairs-controls select {
    background: var(--surface-raised); color: var(--paper);
    border: 1px solid var(--rule); border-radius: 4px;
    padding: 4px 8px;
    font-family: var(--sans); font-size: 11.5px;
    outline: none;
  }
  #global-pane #global-pairs-controls .counts {
    margin-left: auto;
    color: var(--paper-soft);
    font-family: var(--mono); font-size: 11px;
  }
  #global-pane #global-pairs-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
  }
  #global-pane #global-pairs-content .col {
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 4px;
    position: relative;
  }
  #global-pane #global-pairs-content .col h3 {
    margin: 0 0 10px;
    padding: 6px 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--paper-mute);
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--rule);
  }
  #global-pane #global-pairs-content .col h3.chosen { color: var(--chosen); }
  #global-pane #global-pairs-content .col h3.rejected { color: var(--rejected); }
  #global-pane #global-pairs-content .row {
    display: grid;
    grid-template-columns: 70px 64px 56px 1fr;
    gap: 8px; row-gap: 4px;
    align-items: baseline;
    padding: 9px 10px;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
    font-size: 11.5px;
  }
  #global-pane #global-pairs-content .row:hover { background: var(--ink-deep); }
  #global-pane #global-pairs-content .row .lbl {
    font-family: var(--mono); font-size: 9.5px;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--paper-faint); align-self: center;
  }
  #global-pane #global-pairs-content .row .id {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--paper-soft); text-align: left;
  }
  #global-pane #global-pairs-content .row .id b { color: var(--paper); font-weight: 600; }
  #global-pane #global-pairs-content .row .delta {
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    text-align: right;
  }
  #global-pane #global-pairs-content .row .delta.pos { color: var(--chosen); }
  #global-pane #global-pairs-content .row .delta.neg { color: var(--rejected); }
  #global-pane #global-pairs-content .row .z {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--paper-soft); text-align: right;
  }
  #global-pane #global-pairs-content .row .topic-sample {
    color: var(--paper-soft);
    font-style: italic; font-size: 11px; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  #global-pane #global-pairs-content .row .feat-label {
    color: var(--paper); line-height: 1.35;
    font-style: italic;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* Split-half secondary line: Δ_A / Δ_B + ✓/✗ glyph; spans the two middle
     stat columns (delta + z) so it sits right under those primary stats. */
  #global-pane #global-pairs-content .row .sh-row {
    grid-column: 2 / span 2;
    display: flex; align-items: center; gap: 5px;
    font-family: var(--mono); font-size: 9.5px;
    color: var(--paper-soft);
    white-space: nowrap;
  }
  #global-pane #global-pairs-content .row .sh-row .sh-key { color: var(--paper-mute); font-size: 9px; }
  #global-pane #global-pairs-content .row .sh-row .sh-ok { color: var(--chosen); font-weight: 700; font-size: 10.5px; }
  #global-pane #global-pairs-content .row .sh-row .sh-bad { color: var(--rejected); font-weight: 700; font-size: 10.5px; }
  #global-pane #global-pairs-content .row .sh-row .delta { font-size: 9.5px; padding: 0; }
  #global-pane #global-pairs-content .empty {
    color: var(--paper-soft); font-style: italic;
    padding: 20px; text-align: center;
  }

  /* Instructions modal */
  #global-pane #global-instructions-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding: 5vh 20px;
    overflow-y: auto;
  }
  #global-pane #global-instructions-overlay.open { display: flex; }
  #global-pane #global-instructions-modal {
    background: var(--surface-raised);
    max-width: 760px;
    width: 100%;
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 40px 48px 48px;
    position: relative;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--paper);
    box-shadow: 0 1px 2px rgba(20, 16, 8, 0.04), 0 18px 60px rgba(20, 16, 8, 0.18);
    margin-bottom: 5vh;
  }
  #global-pane #global-instructions-close {
    position: absolute;
    top: 18px; right: 18px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 5px 12px;
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--paper-soft);
    cursor: pointer;
    transition: all 140ms ease;
  }
  #global-pane #global-instructions-close:hover {
    color: var(--paper);
    border-color: var(--amber-mute);
    background: var(--ink-deep);
  }
  #global-pane #global-instructions-modal h2 {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 500;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    font-variation-settings: 'opsz' 32;
  }
  #global-pane #global-instructions-modal .lede {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    color: var(--paper-soft);
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.55;
    font-variation-settings: 'opsz' 16;
  }
  #global-pane #global-instructions-modal h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--paper-mute);
    margin: 26px 0 8px;
    padding-left: 0;
  }
  #global-pane #global-instructions-modal h3::before { display: none; }
  #global-pane #global-instructions-modal p { margin: 0 0 10px; }
  #global-pane #global-instructions-modal ul {
    padding-left: 22px;
    margin: 0 0 12px;
    list-style: disc;
  }
  #global-pane #global-instructions-modal ul li {
    margin: 0 0 5px;
    border-left: none;
    padding: 0;
  }
  #global-pane #global-instructions-modal code {
    font-family: var(--mono);
    background: var(--surface);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11.5px;
  }
  #global-pane #global-instructions-modal kbd {
    display: inline-block;
    padding: 2px 7px;
    font-family: var(--mono);
    font-size: 10.5px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-bottom-width: 2px;
    border-radius: 3px;
  }
  #global-pane #global-instructions-modal .swatch {
    display: inline-block;
    width: 10px; height: 10px;
    vertical-align: middle;
    border-radius: 2px;
    margin: -2px 4px 0 0;
  }
  #global-pane #global-instructions-modal strong { color: var(--paper); font-weight: 600; }
  #global-pane #global-instructions-modal em { font-style: italic; color: var(--paper-soft); }

  #global-pane #global-panel > h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 14px 0 10px;
    color: var(--paper);
    font-variation-settings: 'opsz' 30;
  }
  #global-pane #global-panel > .legend {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.55;
    color: var(--paper-soft);
    margin: 0 0 32px;
    max-width: 62ch;
    font-variation-settings: 'opsz' 16;
  }
  #global-pane #global-panel > #global-detail > p.empty {
    font-size: 14px;
    color: var(--paper-mute);
    margin: 30vh 0 0; text-align: center;
  }

  #global-pane h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -0.005em;
    margin: 0 0 8px;
    color: var(--paper);
    line-height: 1.2;
    font-variation-settings: 'opsz' 26;
  }

  #global-pane h3 {
    margin: 28px 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--paper-mute);
    text-transform: uppercase;
  }
  /* Side-colored, more prominent variants used for the cluster-level
     chosen/rejected example sections in feature detail. */
  #global-pane h3.h-chosen, #global-pane h3.h-rejected {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 32px;
  }
  #global-pane h3.h-chosen { color: var(--chosen);   }
  #global-pane h3.h-rejected { color: var(--rejected); }

  /* Two-column layout for chosen vs rejected lists in pair / pair-cluster /
     feature-cluster detail panels. Mirrors the data→feature viewer. */
  #global-pane .dc-cols {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 28px;
    margin-top: 18px;
  }
  #global-pane .dc-cols .dc-divider {
    background: var(--rule-soft);
    align-self: stretch;
    margin: 28px 0 0;
  }
  #global-pane .dc-cols .dc-col { min-width: 0; }
  #global-pane .dc-cols .dc-col h3 { margin-top: 0; }
  #global-pane .dc-cols .dc-row { font-size: 11px; }
  #global-pane .dc-cols .dc-row .ct { font-size: 11px; }

  #global-pane .empty { color: var(--paper-faint); font-style: italic; }
  #global-pane .meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--paper-mute);
    margin-bottom: 8px;
    letter-spacing: 0.04em;
  }
  #global-pane .legend {
    font-size: 12px; color: var(--paper-mute);
    line-height: 1.5;
    padding: 4px 0;
  }

  /* ───────── TRIPLET ───────── */
  #global-pane .triplet {
    margin-top: 16px;
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
  }
  #global-pane .triplet .box {
    background: var(--surface-raised);
    border: 1px solid var(--rule-soft);
    border-top: 3px solid var(--rule);
    border-radius: 8px;
    padding: 12px 14px;
    min-width: 0;
    display: flex; flex-direction: column;
  }
  #global-pane .triplet .box.prompt { border-top-color: var(--amber); }
  #global-pane .triplet .box.chosen { border-top-color: var(--chosen); }
  #global-pane .triplet .box.rejected { border-top-color: var(--rejected); }
  #global-pane .triplet .box .role {
    font-family: var(--mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--paper-mute);
    margin-bottom: 6px;
  }

  #global-pane .text-triplet .box {
    background: var(--surface-raised);
    border: 1px solid var(--rule-soft);
    border-top: 3px solid var(--rule);
    border-radius: 8px;
    padding: 14px 18px 16px;
    transition: border-color 160ms ease;
  }
  #global-pane .text-triplet .box.prompt { border-top-color: var(--amber); }
  #global-pane .text-triplet .box.chosen { border-top-color: var(--chosen); }
  #global-pane .text-triplet .box.rejected { border-top-color: var(--rejected); }

  #global-pane .text-triplet .box .role {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 10px;
  }
  #global-pane .text-triplet .box.prompt   .role { color: var(--amber); }
  #global-pane .text-triplet .box.chosen   .role { color: var(--chosen); }
  #global-pane .text-triplet .box.rejected .role { color: var(--rejected); }
  #global-pane .text-triplet .box .role .clicked-tag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--amber);
    background: var(--amber-glow);
    padding: 2px 7px;
    margin-left: 10px;
    vertical-align: middle;
    border-radius: 3px;
  }

  #global-pane .text-triplet .box .span-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--paper);
    white-space: pre-wrap; word-break: break-word;
    max-height: 220px; overflow-y: auto;
    padding-right: 4px;
  }

  /* ───────── CLUSTER PIECES ───────── */
  #global-pane .cluster-id {
    font-family: var(--mono);
    color: var(--amber);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  #global-pane .cluster-title {
    font-family: var(--serif);
    color: var(--paper);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.35;
    font-variation-settings: 'opsz' 14;
  }
  #global-pane .cluster-stats {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--paper-mute);
    margin-top: 4px;
    letter-spacing: 0.04em;
  }

  /* ───────── FEATURE LISTS ───────── */
  #global-pane .feats {
    list-style: none;
    margin: 8px 0 0; padding: 0 0 0 0;
    max-height: 260px; overflow-y: auto;
    font-size: 12px; line-height: 1.5;
    color: var(--paper-soft);
  }
  #global-pane .feats li {
    padding: 4px 12px;
    position: relative;
    border-left: 1px solid var(--rule-soft);
  }
  #global-pane .feats li:hover { border-left-color: var(--amber-mute); }
  #global-pane .feats .fid {
    color: var(--paper-faint);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
  }
  #global-pane .feats .lab { color: var(--paper-soft); }
  #global-pane .feats li.selected-feature {
    background: var(--amber-glow);
    border-left: 2px solid var(--amber);
    padding: 5px 12px;
    margin: 1px 0;
  }
  #global-pane .feats li.selected-feature .fid { color: var(--amber); }
  #global-pane .feats li.selected-feature .lab { color: var(--paper); font-weight: 500; }

  #global-pane .sibling-list {
    max-height: 240px; overflow-y: auto;
    margin: 6px 0 0; padding: 0;
    border-top: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
  }

  /* ───────── BADGES, BARS, STATS ───────── */
  #global-pane .stat {
    cursor: help;
    border-bottom: 1px dotted var(--paper-faint);
    transition: color 100ms ease, border-color 100ms ease;
  }
  #global-pane .stat:hover { color: var(--amber); border-bottom-color: var(--amber); }

  #global-pane .contradiction-bar {
    display: inline-block; vertical-align: middle;
    width: 80px; height: 4px;
    background: var(--rule);
    overflow: hidden;
    margin: 0 8px;
  }
  #global-pane .contradiction-bar .fill { height: 100%; }

  #global-pane .badge {
    display: inline-block;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    vertical-align: middle;
    margin-left: 8px;
    border-radius: 3px;
    cursor: help;
  }
  #global-pane .badge.b-mixed { color: var(--amber);     background: var(--amber-glow); }
  #global-pane .badge.b-chosen { color: var(--chosen);    background: var(--chosen-soft); }
  #global-pane .badge.b-rejected { color: var(--rejected);  background: var(--rejected-soft); }
  #global-pane .badge.b-balanced { color: var(--azure);     background: var(--azure-soft); }
  #global-pane .badge.b-inconclusive { color: var(--paper-mute); background: var(--rule-soft); }

  /* ───────── ROW: cluster summary entries ───────── */
  #global-pane .dc-row {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 11.5px;
    align-items: center;
    transition: background 80ms ease;
  }
  #global-pane .dc-row:hover { background: var(--amber-glow); }
  #global-pane .dc-row.clickable { cursor: pointer; padding-left: 8px; padding-right: 8px;
                      margin-left: -8px; margin-right: -8px; }
  #global-pane .dc-row.clickable:hover { background: var(--amber-glow); }
  #global-pane .dc-row.clickable:hover .dc-id { color: var(--amber-bright); }
  #global-pane .dc-row .dc-id {
    font-family: var(--mono);
    color: var(--amber);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
  }
  #global-pane .dc-row .dc-id:hover { color: var(--amber-bright); }
  #global-pane .dc-row .bar-row { display: flex; align-items: center; gap: 6px; }
  #global-pane .dc-row .bar { height: 8px; }
  #global-pane .dc-row .bar.c { background: var(--chosen); }
  #global-pane .dc-row .bar.r { background: var(--rejected); }
  #global-pane .dc-row .ct {
    font-family: var(--mono);
    color: var(--paper-mute);
    font-size: 10.5px;
    letter-spacing: 0.04em;
  }

  /* ───────── EXAMPLE CARDS (in response-cluster detail) ───────── */
  #global-pane .ex-card {
    border: 1px solid var(--rule-soft);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 10px;
    background: var(--surface-raised);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
  }
  #global-pane .ex-card:hover {
    background: var(--ink-deep);
    border-color: var(--amber-mute);
  }
  #global-pane .ex-card.side-c { border-left: 3px solid var(--chosen); }
  #global-pane .ex-card.side-r { border-left: 3px solid var(--rejected); }
  #global-pane .ex-card .head {
    display: flex; gap: 8px; align-items: center;
    font-size: 11px; color: var(--paper-mute);
    margin-bottom: 8px;
  }
  #global-pane .ex-card .pill {
    display: inline-block;
    padding: 2px 7px;
    font-size: 9px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: 3px;
    color: #ffffff;
  }
  #global-pane .ex-card .pill.c { background: var(--chosen); }
  #global-pane .ex-card .pill.r { background: var(--rejected); }
  #global-pane .ex-card .ex-line {
    font-size: 12px; line-height: 1.5;
    max-height: 4.5em; overflow: hidden;
    position: relative;
    white-space: pre-wrap; word-break: break-word;
  }
  #global-pane .ex-card .ex-line.fade::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1.5em;
    background: linear-gradient(transparent, var(--surface-raised));
    pointer-events: none;
  }
  #global-pane .ex-card:hover .ex-line.fade::after {
    background: linear-gradient(transparent, var(--surface));
  }
  #global-pane .ex-card .ex-label {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    margin: 8px 0 4px;
  }
  #global-pane .ex-card .ex-label.prompt { color: var(--amber); }
  #global-pane .ex-card .ex-label.chosen { color: var(--chosen); }
  #global-pane .ex-card .ex-label.rejected { color: var(--rejected); }

  /* ───────── COLLAPSIBLE OTHER-SAMPLES (response detail) ───────── */
  #global-pane details.ex-details {
    margin: 0 0 8px;
    border: 1px solid var(--rule-soft);
    border-radius: 10px;
    background: var(--surface-raised);
    overflow: hidden;
    transition: border-color 140ms ease, background 140ms ease;
  }
  #global-pane details.ex-details:hover { border-color: var(--amber-mute); }
  #global-pane details.ex-details[open] { background: var(--surface); }
  #global-pane details.ex-details summary {
    cursor: pointer;
    padding: 9px 12px;
    font-size: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    list-style: none;
    color: var(--paper-soft);
    user-select: none;
  }
  #global-pane details.ex-details summary::-webkit-details-marker { display: none; }
  #global-pane details.ex-details summary::before {
    content: "›";
    font-size: 16px;
    color: var(--paper-faint);
    line-height: 1;
    transition: transform 150ms ease;
    display: inline-block;
    width: 10px;
  }
  #global-pane details.ex-details[open] summary::before { transform: rotate(90deg); color: var(--amber); }
  #global-pane details.ex-details summary:hover { background: var(--amber-glow); }
  #global-pane details.ex-details summary .pill {
    display: inline-block;
    padding: 2px 7px;
    font-size: 9px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: 3px;
    color: #ffffff;
  }
  #global-pane details.ex-details summary .pill.c { background: var(--chosen); }
  #global-pane details.ex-details summary .pill.r { background: var(--rejected); }
  #global-pane details.ex-details summary .summary-prompt {
    color: var(--paper-mute);
    font-size: 11px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  #global-pane details.ex-details .body {
    padding: 4px 14px 12px;
    border-top: 1px solid var(--rule-soft);
  }
  #global-pane details.ex-details .body .ex-label {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    margin: 8px 0 4px;
  }
  #global-pane details.ex-details .body .ex-label.prompt { color: var(--amber); }
  #global-pane details.ex-details .body .ex-label.chosen { color: var(--chosen); }
  #global-pane details.ex-details .body .ex-label.rejected { color: var(--rejected); }
  #global-pane details.ex-details .body .ex-line {
    font-size: 12px; line-height: 1.5;
    max-height: 4.5em; overflow: hidden;
    position: relative;
    white-space: pre-wrap; word-break: break-word;
  }
  #global-pane details.ex-details .body .ex-line.fade::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1.5em;
    background: linear-gradient(transparent, var(--surface));
    pointer-events: none;
  }
  #global-pane details.ex-details .body .drill {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px; font-weight: 500;
    color: var(--amber);
    cursor: pointer;
  }
  #global-pane details.ex-details .body .drill:hover { color: var(--amber-bright); text-decoration: underline; }

  /* Horizontal pair rows: prompt / chosen / rejected stacked vertically. */
  #global-pane .pair-row-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 4px;
  }
  #global-pane .pair-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    overflow: hidden;
    transition: border-color 140ms ease, box-shadow 140ms ease;
  }
  #global-pane .pair-row:hover {
    border-color: var(--rule);
    box-shadow: 0 1px 2px rgba(20, 16, 8, 0.04), 0 4px 12px rgba(20, 16, 8, 0.05);
  }
  #global-pane .pair-row .col {
    padding: 11px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    background: var(--surface-raised);
    border-top: 3px solid var(--rule);
  }
  #global-pane .pair-row .col + .col {
    border-left: 1px solid var(--rule-soft);
  }
  #global-pane .pair-row .col.prompt { border-top-color: var(--amber); }
  #global-pane .pair-row .col.chosen { border-top-color: var(--chosen); }
  #global-pane .pair-row .col.rejected { border-top-color: var(--rejected); }
  #global-pane .pair-row .col .label {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
  }
  #global-pane .pair-row .col.prompt   .label { color: var(--amber); }
  #global-pane .pair-row .col.chosen   .label { color: var(--chosen); }
  #global-pane .pair-row .col.rejected .label { color: var(--rejected); }
  #global-pane .pair-row .col .text {
    font-size: 11px;
    line-height: 1.4;
    color: var(--paper);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
  #global-pane .pair-row .col .text .empty {
    color: var(--paper-faint);
    font-style: italic;
  }

  /* Leaning emphasis: cluster-detail "Top chosen-leaning prompts" use a
     thicker top bar + bolder label on the surfaced side, instead of the
     old background-tint highlight. Driven by data-leaning on .pair-row. */
  #global-pane .pair-row[data-leaning="chosen"]   .col.chosen, #global-pane .pair-row[data-leaning="rejected"] .col.rejected {
    border-top-width: 5px;
  }
  #global-pane .pair-row[data-leaning="chosen"]   .col.chosen   .label, #global-pane .pair-row[data-leaning="rejected"] .col.rejected .label {
    font-weight: 700;
  }

  /* Wrapper around a cluster-example pair-row: holds the Δ meta line
     above the pair-row. Used in feature-detail's chosen/rejected lists. */
  #global-pane .example-pair {
    margin: 0 0 14px;
  }
  #global-pane .example-pair .ex-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--paper-mute);
    letter-spacing: 0.06em;
    margin: 0 0 6px;
    padding: 0 2px;
  }

  /* ───────── EXAMPLE BLOCKS (in feature detail) ───────── */
  #global-pane .example-row {
    border-top: 1px solid var(--rule-soft);
    padding: 14px 0;
    font-size: 12px;
  }
  #global-pane .example-row:first-of-type { border-top: 0; padding-top: 4px; }
  #global-pane .example-row.clickable {
    cursor: pointer;
    margin: 0 -10px; padding-left: 10px; padding-right: 10px;
    border-radius: 6px;
    transition: background 80ms ease;
  }
  #global-pane .example-row.clickable:hover { background: var(--amber-glow); }
  #global-pane .example-row.clickable .ex-meta::after {
    content: " — click to open";
    color: var(--amber);
    font-weight: 500;
    opacity: 0;
    transition: opacity 100ms ease;
  }
  #global-pane .example-row.clickable:hover .ex-meta::after { opacity: 1; }
  #global-pane .example-row .ex-meta {
    font-family: var(--mono);
    font-size: 10px; color: var(--paper-mute);
    letter-spacing: 0.06em;
    margin-bottom: 8px;
  }
  #global-pane .example-row .role-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 8px 0 4px;
    padding: 1px 0;
  }
  #global-pane .example-row .role-tag.prompt { color: var(--amber); }
  #global-pane .example-row .role-tag.chosen { color: var(--chosen); }
  #global-pane .example-row .role-tag.rejected { color: var(--rejected); }
  #global-pane .example-row .ex-text {
    font-family: var(--serif);
    font-size: 12.5px; line-height: 1.55;
    max-height: 110px; overflow-y: auto;
    padding: 4px 0 6px 14px;
    border-left: 1px solid var(--rule);
    color: var(--paper-soft);
    white-space: pre-wrap; word-break: break-word;
    font-variation-settings: 'opsz' 12;
  }
  /* Highlight the side that's being surfaced in the chosen/rejected
     leaning lists — bolder text + side-tinted background + thicker
     accent border so the relevant response visually pops. */
  #global-pane .example-row .ex-text.highlight-c, #global-pane .example-row .ex-text.highlight-r {
    font-weight: 500;
    color: var(--paper);
    padding: 8px 10px 8px 14px;
    border-radius: 0 4px 4px 0;
  }
  #global-pane .example-row .ex-text.highlight-c {
    background: var(--chosen-soft);
    border-left: 3px solid var(--chosen);
  }
  #global-pane .example-row .ex-text.highlight-r {
    background: var(--rejected-soft);
    border-left: 3px solid var(--rejected);
  }
  #global-pane .example-row .role-tag.highlight-c, #global-pane .example-row .role-tag.highlight-r {
    font-size: 10.5px;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 3px;
  }
  #global-pane .example-row .role-tag.highlight-c { background: var(--chosen);   }
  #global-pane .example-row .role-tag.highlight-r { background: var(--rejected); }

  /* ───────── SCROLLBARS ───────── */
  #global-pane ::-webkit-scrollbar { width: 8px; height: 8px; }
  #global-pane ::-webkit-scrollbar-track { background: transparent; }
  #global-pane ::-webkit-scrollbar-thumb { background: var(--rule); }
  #global-pane ::-webkit-scrollbar-thumb:hover { background: var(--paper-faint); }
  

  /* ───────── MISC ───────── */
  #global-pane .pos { color: var(--chosen); }
  #global-pane .neg { color: var(--rejected); }
  #global-pane .val { font-family: var(--mono); }
  #global-pane .val.pos { color: var(--chosen); }
  #global-pane .val.neg { color: var(--rejected); }

  /* ───────── DATASET-WIDE LANDING (curated cluster findings) ─────────
     Ported from the "Viewer Orientation" design (Global view). Scoped under
     #data-landing / #cluster-detail so generic class names don't collide.
     Tokens are the shared :root vars. */
  #global-pane #global-data-landing .dl-eyebrow {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--amber); font-weight: 600; margin: 0 0 14px;
  }
  #global-pane #global-data-landing .hero-h {
    font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.12;
    letter-spacing: -0.018em; color: var(--paper); margin: 0 0 18px;
  }
  #global-pane #global-data-landing .lede {
    font-size: 14.5px; line-height: 1.62; color: var(--paper-soft); margin: 0 0 10px;
  }
  #global-pane #global-data-landing .lede b { color: var(--paper); font-weight: 600; }
  #global-pane #global-data-landing .lede em { color: var(--amber); font-style: italic; }
  #global-pane #global-data-landing .lede .chosen-w { color: var(--chosen); font-weight: 600; }
  #global-pane #global-data-landing .lede .rejected-w { color: var(--rejected); font-weight: 600; }
  #global-pane #global-data-landing .lede a, #global-pane #global-data-landing .inline-x { color: var(--amber); font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--amber-mute); }
  #global-pane #global-data-landing .lede a:hover, #global-pane #global-data-landing .inline-x:hover { filter: brightness(1.1); }
  #global-pane #global-data-landing .section-rule {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    margin: 32px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--rule);
  }
  #global-pane #global-data-landing .section-rule h3 {
    margin: 0; font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-mute);
  }
  #global-pane #global-data-landing .section-rule .note { font-size: 11.5px; color: var(--paper-faint); font-style: italic; font-family: var(--serif); }
  #global-pane #global-data-landing .findings { display: grid; grid-template-columns: 1fr; gap: 12px; }
  #global-pane #global-data-landing .finding {
    position: relative; background: var(--surface-raised);
    border: 1px solid var(--rule-soft); border-left: 3px solid var(--rule);
    border-radius: 10px; padding: 16px 18px 15px; cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    display: flex; flex-direction: column; gap: 12px; min-width: 0;
  }
  #global-pane #global-data-landing .finding:hover {
    border-color: var(--amber-mute); border-left-color: var(--amber); background: var(--ink-deep);
    box-shadow: 0 1px 2px rgba(20,16,8,0.04), 0 8px 22px rgba(20,16,8,0.06); transform: translateY(-1px);
  }
  #global-pane #global-data-landing .finding .fhead {
    margin: 0; font-family: var(--sans); font-weight: 600; font-size: 16.5px;
    line-height: 1.3; letter-spacing: -0.008em; color: var(--paper); padding-right: 24px;
  }
  #global-pane #global-data-landing .finding .insight {
    font-size: 14px; line-height: 1.55; color: var(--paper-soft); margin: -2px 0 0; text-wrap: pretty;
  }
  #global-pane #global-data-landing .finding .insight b { font-weight: 600; }
  #global-pane #global-data-landing .finding .foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
  #global-pane #global-data-landing .gbadge {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
    font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--paper-soft); background: rgba(110,119,129,0.10); border: 1px solid var(--rule-soft); white-space: nowrap;
  }
  #global-pane #global-data-landing .gbadge .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--paper-faint); }
  #global-pane #global-data-landing .gbadge.mixed .dot { background: var(--amber-mute); }
  #global-pane #global-data-landing .robust { font-family: var(--mono); font-size: 10.5px; color: var(--paper-mute); font-weight: 700; }
  #global-pane #global-data-landing .pathline {
    font-family: var(--mono); font-size: 10.5px; color: var(--paper-mute); letter-spacing: 0.01em; line-height: 1.5; min-width: 0;
  }
  #global-pane #global-data-landing .pathline .k { color: var(--amber); font-weight: 600; }
  #global-pane #global-data-landing .finding .go {
    position: absolute; top: 15px; right: 16px; color: var(--paper-faint);
    font-size: 15px; opacity: 0; transform: translateX(-3px); transition: all 150ms ease;
  }
  #global-pane #global-data-landing .finding:hover .go { opacity: 1; transform: translateX(0); color: var(--amber); }
  #global-pane #global-data-landing .callout {
    font-family: var(--serif); font-style: italic; font-size: 12.5px; line-height: 1.55;
    color: var(--paper-mute); border-left: 2px solid var(--rule); padding: 3px 0 3px 14px; margin: 18px 0 0;
  }
  #global-pane #global-data-landing .callout b { font-style: normal; font-family: var(--sans); font-weight: 600; color: var(--paper-soft); }
  #global-pane #global-data-landing .xlink {
    margin-top: 22px; padding: 14px 16px; border: 1px solid var(--rule-soft); border-radius: 10px;
    background: var(--surface); font-size: 13px; line-height: 1.5; color: var(--paper-soft);
  }
  #global-pane #global-data-landing .xlink a { color: var(--amber); font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--amber-mute); }
  #global-pane #global-data-landing .xlink a:hover { filter: brightness(1.1); }
  #global-pane #global-data-landing .panel-foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule);
    display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
  #global-pane #global-data-landing .foot-link {
    font-family: var(--sans); font-size: 12.5px; color: var(--paper-soft); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid transparent;
    transition: color 120ms, border-color 120ms;
  }
  #global-pane #global-data-landing .foot-link:hover { color: var(--amber); border-bottom-color: var(--amber-mute); }
  #global-pane #global-data-landing .foot-link .ic { color: var(--paper-faint); }
  #global-pane #global-data-landing .foot-link:hover .ic { color: var(--amber); }
  #global-pane #global-data-landing .foot-sep { color: var(--rule); }

  /* cluster detail sub-view */
  #global-pane #global-cluster-detail .fd-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--amber); font-weight: 600; margin: 0 0 14px; }
  #global-pane #global-cluster-detail .fd-insight { font-family: var(--serif); font-size: 24px; line-height: 1.32; color: var(--paper);
    margin: 8px 0 16px; letter-spacing: -0.01em; }
  #global-pane #global-cluster-detail .fd-body { font-size: 14px; line-height: 1.6; color: var(--paper-soft); margin: 0 0 22px; }
  #global-pane #global-cluster-detail .fd-body b { color: var(--paper); font-weight: 600; }
  #global-pane #global-cluster-detail .fd-metrics { display: flex; gap: 26px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
  #global-pane #global-cluster-detail .fd-metric .v { font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
  #global-pane #global-cluster-detail .fd-metric .l { font-size: 10px; color: var(--paper-mute); margin-top: 3px; }
  #global-pane #global-cluster-detail .fd-pair { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 22px; }
  #global-pane #global-cluster-detail .fd-node { background: var(--surface-raised); border: 1px solid var(--rule-soft);
    border-top: 3px solid var(--azure); border-radius: 10px; padding: 14px 16px; min-width: 0; }
  #global-pane #global-cluster-detail .fd-node .role { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--paper-mute); margin-bottom: 7px; }
  #global-pane #global-cluster-detail .fd-node .id { font-family: var(--mono); font-size: 11px; color: var(--azure); font-weight: 600; }
  #global-pane #global-cluster-detail .fd-node .desc { font-size: 13px; color: var(--paper-soft); line-height: 1.45; margin-top: 7px; font-style: italic; font-family: var(--serif); }
  #global-pane #global-cluster-detail .fd-cta {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
    padding: 11px 18px; background: var(--amber); color: #fff; border: 0; border-radius: 999px;
    font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; transition: filter 120ms; }
  #global-pane #global-cluster-detail .fd-cta:hover:not(:disabled) { filter: brightness(1.08); }
  #global-pane #global-cluster-detail .fd-cta:disabled { opacity: 0.4; cursor: progress; }
  #global-pane #global-cluster-detail .fd-note { font-size: 12px; color: var(--paper-mute); font-style: italic; line-height: 1.5;
    margin: 16px 0 0; font-family: var(--serif); }

  /* per_prompt load progress bar — pinned at the top of the right panel */
  #global-pane #global-loadbar { position: absolute; top: 0; left: 0; right: 0; z-index: 7; pointer-events: none; }
  #global-pane #global-loadbar[hidden] { display: none; }
  #global-pane #global-loadbar .lb-track { height: 4px; background: var(--rule-soft); overflow: hidden; }
  #global-pane #global-loadbar .lb-fill { height: 100%; width: 0%; background: var(--amber); transition: width 150ms linear; box-shadow: 0 0 8px var(--amber-mute); }
  #global-pane #global-loadbar .lb-fill.indeterminate { width: 35%; transition: none; animation: lb-indet 1.1s ease-in-out infinite; }
  @keyframes lb-indet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
  #global-pane #global-loadbar .lb-label {
    position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    background: var(--surface-raised); border: 1px solid var(--rule); border-radius: 999px;
    padding: 3px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
    color: var(--paper-soft); white-space: nowrap; box-shadow: 0 1px 2px rgba(20,16,8,0.05);
  }

  /* ── Custom dropdown — replaces the native <select> for cluster jumps. ── */
  #global-pane .cdd-native { display: none !important; }
  #global-pane .cdd { position: relative; margin-top: 6px; }
  #global-pane .cdd-trigger {
    width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
    background: var(--ink-deep); color: var(--paper); border: 1px solid var(--rule);
    border-radius: 8px; padding: 8px 11px; font-family: var(--sans); font-size: 12px;
    text-align: left; cursor: pointer; transition: border-color 140ms ease, box-shadow 140ms ease;
  }
  #global-pane .cdd-trigger:hover { border-color: var(--amber-mute); }
  #global-pane .cdd-trigger.cdd-open { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
  #global-pane .cdd-trigger .cdd-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #global-pane .cdd-trigger.cdd-placeholder .cdd-label { color: var(--paper-faint); font-style: italic; font-family: var(--serif); }
  #global-pane .cdd-trigger .cdd-caret { flex: none; color: var(--paper-mute); font-size: 10px; transition: transform 140ms ease; }
  #global-pane .cdd-trigger.cdd-open .cdd-caret { transform: rotate(180deg); color: var(--amber); }
  #global-pane .cdd-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1000;
    max-height: 300px; overflow-y: auto; padding: 4px;
    background: var(--surface-raised); border: 1px solid var(--rule); border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20,16,8,0.04), 0 10px 30px rgba(20,16,8,0.12);
  }
  #global-pane .cdd-panel[hidden] { display: none; }
  #global-pane .cdd-opt {
    display: flex; gap: 9px; align-items: baseline;
    padding: 7px 10px; border-radius: 6px; cursor: pointer; line-height: 1.35;
    transition: background 80ms ease;
  }
  #global-pane .cdd-opt:hover { background: var(--amber-glow); }
  #global-pane .cdd-opt.active { background: var(--amber-glow); }
  #global-pane .cdd-opt .cdd-id { flex: none; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--amber); font-variant-numeric: tabular-nums; }
  #global-pane .cdd-opt .cdd-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--paper); }
  #global-pane .cdd-opt.active .cdd-lbl { font-weight: 600; }
  #global-pane .cdd-panel::-webkit-scrollbar { width: 8px; }
  #global-pane .cdd-panel::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }