#local-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;
  }

  #local-pane *::before, #local-pane *::after { box-sizing: border-box; }
  #local-pane, #local-pane { margin: 0; padding: 0; height: 100%; overflow: hidden; }
  #local-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 */
  #local-pane body::before { display: none; }

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

  #local-pane #local-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;
  }
  #local-pane #local-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;
  }
  #local-pane #local-header .mark .glyph {
    color: var(--amber);
    font-weight: 400;
    font-style: italic;
    margin: 0 6px;
  }
  #local-pane #local-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;
  }
  #local-pane #local-header .stats {
    display: flex; gap: 28px; align-items: baseline;
    justify-self: end;
  }
  #local-pane #local-header .stat-cell {
    display: flex; flex-direction: column; gap: 2px;
  }
  #local-pane #local-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;
  }
  #local-pane #local-header .stat-cell .l {
    font-size: 10px;
    letter-spacing: 0;
    color: var(--paper-mute);
    font-weight: 400;
  }
  #local-pane #local-header .meta {
    font-size: 11px;
    color: var(--paper-mute);
    text-align: right;
    line-height: 1.5;
  }
  #local-pane #local-header .meta .accent { color: var(--amber); }

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

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

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

  /* ───────── FLOATING UI ───────── */
  #local-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%;
  }

  #local-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%;
  }
  #local-pane .toggle .lbl {
    font-size: 10px;
    color: var(--paper-faint);
    margin-right: 2px;
  }
  #local-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;
  }
  #local-pane .toggle button:hover {
    color: var(--paper);
    background: var(--amber-glow);
  }
  #local-pane .toggle button.active {
    color: var(--ink-deep);
    background: var(--amber);
  }
  /* Response-cluster picker for the "Δ for response cluster" mode.
     Mirrors #feature-search panel styling on the feature scatter — same
     cream-paper backdrop and dark-input dropdown — for visual consistency
     between the two UMAPs. Lives in the response scatter at bottom-left. */
  #local-pane #local-response-picker {
    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);
  }
  #local-pane #local-response-picker input, #local-pane #local-response-picker 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;
  }
  #local-pane #local-response-picker 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;
  }
  #local-pane #local-response-picker input:focus, #local-pane #local-response-picker select:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-glow);
  }
  #local-pane #local-response-picker input::placeholder {
    color: var(--paper-faint);
    font-style: italic;
    font-family: var(--serif);
  }
  #local-pane #local-response-picker select option {
    background: var(--ink-deep);
    color: var(--paper);
    font-size: 12px;
    padding: 4px 8px;
  }
  #local-pane #local-response-search-results {
    max-height: 240px; overflow-y: auto;
    margin-top: 6px;
    border-top: 1px solid var(--rule-soft);
  }
  #local-pane #local-response-search-results.empty { display: none; }
  #local-pane #local-response-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;
  }
  #local-pane #local-response-search-results .row:hover, #local-pane #local-response-search-results .row.active { background: var(--amber-glow); }
  #local-pane #local-response-search-results .row .meta {
    font-family: var(--mono);
    font-size: 9.5px; color: var(--paper-mute);
    margin-top: 3px; letter-spacing: 0.05em;
  }

  #local-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;
  }

  #local-pane #local-feature-search, #local-pane #local-prompt-cluster-picker {
    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);
  }
  /* Feature search + cluster-jump dropdown are disabled while the viewer
     stays prompt-centric. Hide the whole panel rather than just the input;
     the surrounding card is no longer informative. */
  #local-pane #local-feature-search { display: none; }
  /* Stack the prompt-cluster picker directly above the response-picker on
     the same scatter (bottom-left); response-picker stays at bottom:14px,
     this one sits ~60px higher to clear it. */
  #local-pane #local-prompt-cluster-picker {
    bottom: auto;
    top: 55px;  /* just under .status pill */
  }
  #local-pane #local-feature-search input, #local-pane #local-prompt-cluster-picker input, #local-pane #local-cluster-select, #local-pane #local-prompt-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;
  }
  #local-pane #local-feature-search input:focus, #local-pane #local-prompt-cluster-picker input:focus, #local-pane #local-cluster-select:focus, #local-pane #local-prompt-cluster-select:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-glow);
  }
  #local-pane #local-feature-search input::placeholder, #local-pane #local-prompt-cluster-picker input::placeholder {
    color: var(--paper-faint);
    font-style: italic;
    font-family: var(--serif);
  }
  #local-pane #local-cluster-select, #local-pane #local-prompt-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;
  }
  #local-pane #local-feature-search-results, #local-pane #local-prompt-cluster-search-results {
    max-height: 240px; overflow-y: auto;
    margin-top: 6px;
    border-top: 1px solid var(--rule-soft);
  }
  #local-pane #local-feature-search-results.empty, #local-pane #local-prompt-cluster-search-results.empty { display: none; }
  #local-pane #local-feature-search-results .row, #local-pane #local-prompt-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;
  }
  #local-pane #local-feature-search-results .row:hover, #local-pane #local-feature-search-results .row.active, #local-pane #local-prompt-cluster-search-results .row:hover, #local-pane #local-prompt-cluster-search-results .row.active { background: var(--amber-glow); }
  #local-pane #local-feature-search-results .row .meta, #local-pane #local-prompt-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 ───────── */
  #local-pane #local-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) */

  #local-pane #local-back-btn, #local-pane #local-help-btn, #local-pane #local-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;
  }
  #local-pane #local-back-btn { left: 20px; }
  #local-pane #local-help-btn { right: 20px; }
  #local-pane #local-back-btn:hover:not(:disabled), #local-pane #local-help-btn:hover, #local-pane #local-pairs-btn:hover {
    color: var(--paper);
    border-color: var(--amber-mute);
    background: var(--ink-deep);
  }
  #local-pane #local-back-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  /* Instructions modal */
  #local-pane #local-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;
  }
  #local-pane #local-instructions-overlay.open { display: flex; }
  #local-pane #local-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;
  }
  #local-pane #local-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;
  }
  #local-pane #local-instructions-close:hover {
    color: var(--paper);
    border-color: var(--amber-mute);
    background: var(--ink-deep);
  }
  #local-pane #local-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;
  }
  #local-pane #local-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;
  }
  #local-pane #local-instructions-modal h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--paper-mute);
    margin: 26px 0 8px;
    padding-left: 0;
  }
  #local-pane #local-instructions-modal h3::before { display: none; }
  #local-pane #local-instructions-modal p { margin: 0 0 10px; }
  #local-pane #local-instructions-modal ul {
    padding-left: 22px;
    margin: 0 0 12px;
    list-style: disc;
  }
  #local-pane #local-instructions-modal ul li {
    margin: 0 0 5px;
    border-left: none;
    padding: 0;
  }
  #local-pane #local-instructions-modal code {
    font-family: var(--mono);
    background: var(--surface);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11.5px;
  }
  #local-pane #local-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;
  }
  #local-pane #local-instructions-modal .swatch {
    display: inline-block;
    width: 10px; height: 10px;
    vertical-align: middle;
    border-radius: 2px;
    margin: -2px 4px 0 0;
  }
  #local-pane #local-instructions-modal strong { color: var(--paper); font-weight: 600; }
  #local-pane #local-instructions-modal em { font-style: italic; color: var(--paper-soft); }

  /* Top-pairs modal: reuses overlay styling; wider since it holds two
     side-by-side columns of (k, m, Δ, z, label) rows. */
  #local-pane #local-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;
  }
  #local-pane #local-pairs-overlay.open { display: flex; }
  #local-pane #local-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;
  }
  #local-pane #local-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;
    color: var(--paper-soft);
    cursor: pointer;
  }
  #local-pane #local-pairs-close:hover { color: var(--paper); border-color: var(--amber-mute); }
  #local-pane #local-pairs-modal h2 {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
  #local-pane #local-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;
  }
  #local-pane #local-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);
  }
  #local-pane #local-pairs-howto strong { color: var(--paper); font-weight: 600; }
  #local-pane #local-pairs-howto ul { margin: 6px 0 0 0; padding-left: 18px; list-style: disc; }
  #local-pane #local-pairs-howto li { margin: 2px 0; }
  #local-pane #local-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;
  }
  #local-pane #local-pairs-howto .swatch-chosen { color: #1a7f37; font-weight: 600; }
  #local-pane #local-pairs-howto .swatch-rejected { color: #cf222e; font-weight: 600; }
  #local-pane #local-pairs-howto code {
    font-family: var(--mono); font-size: 11px;
    background: var(--surface-raised); padding: 1px 4px; border-radius: 3px;
  }
  #local-pane #local-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;
  }
  #local-pane #local-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;
  }
  #local-pane #local-pairs-controls .ctrl {
    display: flex; align-items: center; gap: 6px;
    cursor: help;
  }
  #local-pane #local-pairs-controls .ctrl-check input[type="checkbox"] {
    margin: 0 4px 0 0; cursor: pointer;
    accent-color: var(--amber);
  }
  #local-pane #local-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);
  }
  #local-pane #local-pairs-controls .ctrl-lbl {
    color: var(--paper-mute);
    font-family: var(--mono); font-size: 10.5px;
    border-bottom: 1px dotted var(--rule);
  }
  #local-pane #local-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;
  }
  #local-pane #local-pairs-controls input[type="number"]:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 2px var(--amber-glow);
  }
  #local-pane #local-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;
  }
  #local-pane #local-pairs-controls .counts {
    margin-left: auto;
    color: var(--paper-soft);
    font-family: var(--mono); font-size: 11px;
  }
  #local-pane #local-pairs-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    /* Cap the table area to viewport height so each column scrolls
       internally rather than the whole modal growing tall. */
    align-items: stretch;
  }
  #local-pane #local-pairs-content .col {
    /* Each column has its own scrollbar — header stays visible at the
       top while rows scroll. Pad-right reserves space for the scrollbar
       so card content doesn't reflow when it appears. */
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 4px;
    position: relative;
  }
  #local-pane #local-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);
    /* Sticky header inside the scrollable column. */
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--rule);
  }
  #local-pane #local-pairs-content .col h3.chosen { color: #1a7f37; }
  #local-pane #local-pairs-content .col h3.rejected { color: #cf222e; }
  /* Two-row card layout per pair:
       row 1 = topic-side context (k id, sample prompt snippet)
       row 2 = feature-side context (m id, label, Δ, z) */
  #local-pane #local-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;
  }
  #local-pane #local-pairs-content .row:hover { background: var(--ink-deep); }
  #local-pane #local-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;
  }
  #local-pane #local-pairs-content .row .id {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--paper-soft); text-align: left;
  }
  #local-pane #local-pairs-content .row .id b { color: var(--paper); font-weight: 600; }
  #local-pane #local-pairs-content .row .delta {
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    text-align: right;
  }
  #local-pane #local-pairs-content .row .delta.pos { color: #1a7f37; }
  #local-pane #local-pairs-content .row .delta.neg { color: #cf222e; }
  #local-pane #local-pairs-content .row .z {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--paper-soft); text-align: right;
  }
  #local-pane #local-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;
  }
  #local-pane #local-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: shows Δ_A, Δ_B and a ✓/✗ glyph for
     sign agreement. Spans the two middle columns (Δ + z) so it sits
     directly under those values for easy comparison. */
  #local-pane #local-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;
  }
  #local-pane #local-pairs-content .row .sh-row .sh-key {
    color: var(--paper-mute); font-size: 9px;
  }
  #local-pane #local-pairs-content .row .sh-row .sh-ok {
    color: #1a7f37; font-weight: 700; font-size: 10.5px;
  }
  #local-pane #local-pairs-content .row .sh-row .sh-bad {
    color: #cf222e; font-weight: 700; font-size: 10.5px;
  }
  #local-pane #local-pairs-content .row .sh-row .delta {
    font-size: 9.5px; padding: 0;
  }
  #local-pane #local-pairs-content .empty {
    color: var(--paper-soft); font-style: italic;
    padding: 20px; text-align: center;
  }
  /* Curated highlights — pinned section above the chosen/rejected columns.
     Lists every entry from interesting.json regardless of whether the
     (k,m) row passes the structural filters; synthesizes rows from
     DELTA/D_KM/Z_KM for entries absent from ranked_pairs_top.json. The
     amber rule beneath separates it from the regular ranking columns. */
  #local-pane #local-pairs-curated {
    grid-column: 1 / -1;
    border: 1px solid var(--amber-mute);
    background: rgba(214, 158, 46, 0.04);
    border-radius: 3px;
    padding: 10px 12px 6px;
    margin-bottom: 6px;
    max-height: 38vh;
    overflow-y: auto;
  }
  #local-pane #local-pairs-curated .curated-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 4px;
  }
  #local-pane #local-pairs-curated .curated-head h3 {
    margin: 0; font-size: 12px; font-weight: 600; color: var(--amber);
    letter-spacing: 0.04em; text-transform: uppercase;
  }
  #local-pane #local-pairs-curated .curated-head .note {
    font-size: 10.5px; color: var(--paper-soft); font-style: italic;
  }
  /* Three-column curated card: prompt cluster (left, prominent) ·
     feature cluster (middle)  |  implication callout (right). Each row
     reads "topic + feature → curator's note about what DPO learns." */
  #local-pane #local-pairs-curated .curated-card {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) minmax(240px, 1.4fr);
    gap: 20px;
    padding: 14px 12px;
    border-bottom: 1px dashed var(--rule-soft);
    cursor: pointer;
    transition: background 80ms ease;
    align-items: start;
  }
  #local-pane #local-pairs-curated .curated-card:hover { background: var(--amber-glow); }
  #local-pane #local-pairs-curated .curated-card:last-child { border-bottom: none; }
  #local-pane #local-pairs-curated .curated-card .left, #local-pane #local-pairs-curated .curated-card .middle, #local-pane #local-pairs-curated .curated-card .right {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
  }
  #local-pane #local-pairs-curated .curated-card .id {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--amber); font-weight: 500;
    letter-spacing: 0.04em;
  }
  /* Prompt cluster title (left column) — the largest text in the card,
     since "what topic" is the primary frame for reading the entry. */
  #local-pane #local-pairs-curated .curated-card .topic-title {
    font-size: 15px; line-height: 1.3;
    color: var(--paper); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  #local-pane #local-pairs-curated .curated-card .metrics {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--paper-mute); margin-top: 4px;
  }
  #local-pane #local-pairs-curated .curated-card .metrics .delta.pos { color: var(--chosen); }
  #local-pane #local-pairs-curated .curated-card .metrics .delta.neg { color: var(--rejected); }
  #local-pane #local-pairs-curated .curated-card .metrics .sh-ok { color: var(--chosen); font-weight: 700; }
  #local-pane #local-pairs-curated .curated-card .metrics .sh-bad { color: var(--rejected); font-weight: 700; }
  /* Feature cluster label (middle column) — supporting context, muted. */
  #local-pane #local-pairs-curated .curated-card .feature-label {
    font-size: 11.5px; line-height: 1.4;
    color: var(--paper-soft); font-style: italic;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  /* Implication callout (right column) — amber-tinted rounded box with a
     small tail pointing left, suggesting "this is what the topic+feature
     pair implies." Reads as the curator's voice. */
  #local-pane #local-pairs-curated .curated-card .caption-bubble {
    position: relative;
    background: var(--amber-glow);
    border: 1px solid var(--amber-mute);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px; line-height: 1.5;
    color: var(--paper);
    font-style: italic;
  }
  #local-pane #local-pairs-curated .curated-card .caption-bubble::before {
    content: "";
    position: absolute;
    left: -7px; top: 14px;
    width: 0; height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid var(--amber-mute);
  }
  #local-pane #local-pairs-curated .curated-card .caption-bubble::after {
    content: "";
    position: absolute;
    left: -5px; top: 15px;
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--amber-glow);
  }
  #local-pane #local-pairs-btn { right: 100px; }

  #local-pane #local-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;
  }
  #local-pane #local-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;
  }
  #local-pane #local-panel > #local-detail > p.empty {
    font-size: 14px;
    color: var(--paper-mute);
    margin: 30vh 0 0; text-align: center;
  }

  #local-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;
  }

  #local-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. */
  #local-pane h3.h-chosen, #local-pane h3.h-rejected {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 32px;
  }
  #local-pane h3.h-chosen { color: var(--chosen);   }
  #local-pane h3.h-rejected { color: var(--rejected); }

  /* Two-column layout for chosen vs rejected feature-cluster lists in pair
     and prompt-cluster detail panels. Each column owns its own h3 + rows.
     The middle column is a thin vertical rule so the two lists read as
     distinct rather than two halves of one wide list. */
  #local-pane .rc-cols {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 28px;
    margin-top: 18px;
  }
  #local-pane .rc-cols .rc-divider {
    background: var(--rule-soft);
    align-self: stretch;
    margin: 28px 0 0;
  }
  #local-pane .rc-cols .rc-col { min-width: 0; }
  #local-pane .rc-cols .rc-col h3 { margin-top: 0; }
  #local-pane .rc-cols .rc-row { font-size: 11px; }
  #local-pane .rc-cols .rc-row .ct { font-size: 11px; }

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

  /* ───────── TRIPLET ───────── */
  #local-pane .triplet {
    margin-top: 16px;
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
  }
  #local-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;
  }
  #local-pane .triplet .box.prompt { border-top-color: var(--amber); }
  #local-pane .triplet .box.chosen { border-top-color: var(--chosen); }
  #local-pane .triplet .box.rejected { border-top-color: var(--rejected); }
  #local-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;
  }

  #local-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;
  }
  #local-pane .text-triplet .box.prompt { border-top-color: var(--amber); }
  #local-pane .text-triplet .box.chosen { border-top-color: var(--chosen); }
  #local-pane .text-triplet .box.rejected { border-top-color: var(--rejected); }

  #local-pane .text-triplet .box .role {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 10px;
  }
  #local-pane .text-triplet .box.prompt   .role { color: var(--amber); }
  #local-pane .text-triplet .box.chosen   .role { color: var(--chosen); }
  #local-pane .text-triplet .box.rejected .role { color: var(--rejected); }
  #local-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;
  }

  #local-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 ───────── */
  #local-pane .cluster-id {
    font-family: var(--mono);
    color: var(--amber);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  #local-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;
  }
  #local-pane .cluster-stats {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--paper-mute);
    margin-top: 4px;
    letter-spacing: 0.04em;
  }

  /* ───────── FEATURE LISTS ───────── */
  #local-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);
  }
  #local-pane .feats li {
    padding: 4px 12px;
    position: relative;
    border-left: 1px solid var(--rule-soft);
  }
  #local-pane .feats li:hover { border-left-color: var(--amber-mute); }
  #local-pane .feats .fid {
    color: var(--paper-faint);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
  }
  #local-pane .feats .lab { color: var(--paper-soft); }
  #local-pane .feats li.selected-feature {
    background: var(--amber-glow);
    border-left: 2px solid var(--amber);
    padding: 5px 12px;
    margin: 1px 0;
  }
  #local-pane .feats li.selected-feature .fid { color: var(--amber); }
  #local-pane .feats li.selected-feature .lab { color: var(--paper); font-weight: 500; }

  #local-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 ───────── */
  #local-pane .stat {
    cursor: help;
    border-bottom: 1px dotted var(--paper-faint);
    transition: color 100ms ease, border-color 100ms ease;
  }
  #local-pane .stat:hover { color: var(--amber); border-bottom-color: var(--amber); }

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

  #local-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;
  }
  #local-pane .badge.b-mixed { color: var(--amber);     background: var(--amber-glow); }
  #local-pane .badge.b-chosen { color: var(--chosen);    background: var(--chosen-soft); }
  #local-pane .badge.b-rejected { color: var(--rejected);  background: var(--rejected-soft); }
  #local-pane .badge.b-balanced { color: var(--azure);     background: var(--azure-soft); }
  #local-pane .badge.b-inconclusive { color: var(--paper-mute); background: var(--rule-soft); }

  /* ───────── ROW: cluster summary entries ───────── */
  /* Three columns: small id, wide label (takes all remaining space), and a
     compact metrics stack on the right. Inline grid-template-columns on the
     element overrides this when callers need a custom layout, but the
     default gives labels the most horizontal real estate. */
  #local-pane .rc-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 11.5px;
    align-items: center;
    transition: background 80ms ease;
  }
  #local-pane .rc-row .rc-metrics {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.25;
    min-width: 0;
  }
  #local-pane .rc-row .rc-metrics .ct { white-space: nowrap; }
  #local-pane .rc-row:hover { background: var(--amber-glow); }
  #local-pane .rc-row.clickable { cursor: pointer; padding-left: 8px; padding-right: 8px;
                      margin-left: -8px; margin-right: -8px; }
  #local-pane .rc-row.clickable:hover { background: var(--amber-glow); }
  #local-pane .rc-row.clickable:hover .rc-id { color: var(--amber-bright); }
  #local-pane .rc-row .rc-id {
    font-family: var(--mono);
    color: var(--amber);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
  }
  #local-pane .rc-row .rc-id:hover { color: var(--amber-bright); }
  #local-pane .rc-row .bar-row { display: flex; align-items: center; gap: 6px; }
  #local-pane .rc-row .bar { height: 8px; }
  #local-pane .rc-row .bar.c { background: var(--chosen); }
  #local-pane .rc-row .bar.r { background: var(--rejected); }
  #local-pane .rc-row .ct {
    font-family: var(--mono);
    color: var(--paper-mute);
    font-size: 10.5px;
    letter-spacing: 0.04em;
  }
  /* Curator-flagged rows in the chosen/rejected feature-cluster lists
     (when viewing a prompt cluster) or the chosen/rejected prompt-cluster
     lists (when viewing a feature cluster). The (k,m) pair is in
     INTERESTING.blocks — same set surfaced by the curator-highlights
     block above. Strong amber left rule + visible tint + a small star
     glyph before the id, so the row clearly reads as flagged even when
     scanning quickly. */
  #local-pane .rc-row.clickable.noteworthy {
    border-left: 4px solid var(--amber);
    padding-left: 4px;  /* 8px clickable padding − 4px border */
    background: rgba(214, 158, 46, 0.12);
  }
  #local-pane .rc-row.clickable.noteworthy:hover {
    background: rgba(214, 158, 46, 0.22);
  }
  #local-pane .rc-row.noteworthy .rc-id {
    color: var(--amber); font-weight: 700;
  }
  /* Cluster label inside a noteworthy row picks up a small bit of amber
     in its text color too, so the entire row reads as flagged rather
     than just the id pill. */
  #local-pane .rc-row.noteworthy .ct {
    color: var(--paper);
  }
  /* Curator highlights — amber-bordered block surfaced inside the detail
     pane when the selected prompt cluster has one or more curator-flagged
     (k, m) entries. Each row is clickable and pivots to that feature
     cluster (same target as the rc-row click handler). */
  #local-pane .curator-highlights {
    border: 1px solid var(--amber-mute);
    background: rgba(214, 158, 46, 0.04);
    border-radius: 3px;
    padding: 8px 10px;
    margin: 12px 0 14px;
  }
  #local-pane .curator-highlights h3 {
    margin: 0 0 6px;
    font-size: 11px; font-weight: 600;
    color: var(--amber); letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  /* Stacked row: feature/topic label on top line with id (m=# or k=#) at
     the right edge, then manual_caption beneath as the prominent reading
     element. Caption is the curator's voice; label is supporting context. */
  #local-pane .curator-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 8px 6px;
    border-bottom: 1px dashed var(--rule-soft);
  }
  #local-pane .curator-row:last-child { border-bottom: none; }
  #local-pane .curator-row.clickable { cursor: pointer; transition: background 80ms ease; }
  #local-pane .curator-row.clickable:hover { background: var(--amber-glow); }
  #local-pane .curator-row .cr-id {
    font-family: var(--mono);
    color: var(--amber); font-weight: 500;
    font-size: 10.5px; letter-spacing: 0.04em;
    justify-self: end;
    align-self: baseline;
  }
  #local-pane .curator-row .cr-label {
    font-size: 11px; line-height: 1.35;
    color: var(--paper-soft); font-style: italic;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  #local-pane .curator-row .cr-caption {
    grid-column: 1 / -1;
    font-size: 12px; line-height: 1.45;
    color: var(--paper);
    font-style: italic;
  }

  /* ───────── EXAMPLE CARDS (in response-cluster detail) ───────── */
  #local-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;
  }
  #local-pane .ex-card:hover {
    background: var(--ink-deep);
    border-color: var(--amber-mute);
  }
  #local-pane .ex-card.side-c { border-left: 3px solid var(--chosen); }
  #local-pane .ex-card.side-r { border-left: 3px solid var(--rejected); }
  #local-pane .ex-card .head {
    display: flex; gap: 8px; align-items: center;
    font-size: 11px; color: var(--paper-mute);
    margin-bottom: 8px;
  }
  #local-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;
  }
  #local-pane .ex-card .pill.c { background: var(--chosen); }
  #local-pane .ex-card .pill.r { background: var(--rejected); }
  #local-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;
  }
  #local-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;
  }
  #local-pane .ex-card:hover .ex-line.fade::after {
    background: linear-gradient(transparent, var(--surface));
  }
  #local-pane .ex-card .ex-label {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    margin: 8px 0 4px;
  }
  #local-pane .ex-card .ex-label.prompt { color: var(--amber); }
  #local-pane .ex-card .ex-label.chosen { color: var(--chosen); }
  #local-pane .ex-card .ex-label.rejected { color: var(--rejected); }

  /* ───────── COLLAPSIBLE OTHER-SAMPLES (response detail) ───────── */
  #local-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;
  }
  #local-pane details.ex-details:hover { border-color: var(--amber-mute); }
  #local-pane details.ex-details[open] { background: var(--surface); }
  #local-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;
  }
  #local-pane details.ex-details summary::-webkit-details-marker { display: none; }
  #local-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;
  }
  #local-pane details.ex-details[open] summary::before { transform: rotate(90deg); color: var(--amber); }
  #local-pane details.ex-details summary:hover { background: var(--amber-glow); }
  #local-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;
  }
  #local-pane details.ex-details summary .pill.c { background: var(--chosen); }
  #local-pane details.ex-details summary .pill.r { background: var(--rejected); }
  #local-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;
  }
  #local-pane details.ex-details .body {
    padding: 4px 14px 12px;
    border-top: 1px solid var(--rule-soft);
  }
  #local-pane details.ex-details .body .ex-label {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    margin: 8px 0 4px;
  }
  #local-pane details.ex-details .body .ex-label.prompt { color: var(--amber); }
  #local-pane details.ex-details .body .ex-label.chosen { color: var(--chosen); }
  #local-pane details.ex-details .body .ex-label.rejected { color: var(--rejected); }
  #local-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;
  }
  #local-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;
  }
  #local-pane details.ex-details .body .drill {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px; font-weight: 500;
    color: var(--amber);
    cursor: pointer;
  }
  #local-pane details.ex-details .body .drill:hover { color: var(--amber-bright); text-decoration: underline; }

  /* Horizontal pair rows: prompt / chosen / rejected stacked vertically. */
  #local-pane .pair-row-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 4px;
  }
  #local-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;
  }
  #local-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);
  }
  #local-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);
  }
  #local-pane .pair-row .col + .col {
    border-left: 1px solid var(--rule-soft);
  }
  #local-pane .pair-row .col.prompt { border-top-color: var(--amber); }
  #local-pane .pair-row .col.chosen { border-top-color: var(--chosen); }
  #local-pane .pair-row .col.rejected { border-top-color: var(--rejected); }
  #local-pane .pair-row .col .label {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
  }
  #local-pane .pair-row .col.prompt   .label { color: var(--amber); }
  #local-pane .pair-row .col.chosen   .label { color: var(--chosen); }
  #local-pane .pair-row .col.rejected .label { color: var(--rejected); }
  #local-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;
  }
  #local-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. */
  #local-pane .pair-row[data-leaning="chosen"]   .col.chosen, #local-pane .pair-row[data-leaning="rejected"] .col.rejected {
    border-top-width: 5px;
  }
  #local-pane .pair-row[data-leaning="chosen"]   .col.chosen   .label, #local-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. */
  #local-pane .example-pair {
    margin: 0 0 14px;
  }
  #local-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) ───────── */
  #local-pane .example-row {
    border-top: 1px solid var(--rule-soft);
    padding: 14px 0;
    font-size: 12px;
  }
  #local-pane .example-row:first-of-type { border-top: 0; padding-top: 4px; }
  #local-pane .example-row.clickable {
    cursor: pointer;
    margin: 0 -10px; padding-left: 10px; padding-right: 10px;
    border-radius: 6px;
    transition: background 80ms ease;
  }
  #local-pane .example-row.clickable:hover { background: var(--amber-glow); }
  #local-pane .example-row.clickable .ex-meta::after {
    content: " — click to open";
    color: var(--amber);
    font-weight: 500;
    opacity: 0;
    transition: opacity 100ms ease;
  }
  #local-pane .example-row.clickable:hover .ex-meta::after { opacity: 1; }
  #local-pane .example-row .ex-meta {
    font-family: var(--mono);
    font-size: 10px; color: var(--paper-mute);
    letter-spacing: 0.06em;
    margin-bottom: 8px;
  }
  #local-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;
  }
  #local-pane .example-row .role-tag.prompt { color: var(--amber); }
  #local-pane .example-row .role-tag.chosen { color: var(--chosen); }
  #local-pane .example-row .role-tag.rejected { color: var(--rejected); }
  #local-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. */
  #local-pane .example-row .ex-text.highlight-c, #local-pane .example-row .ex-text.highlight-r {
    font-weight: 500;
    color: var(--paper);
    padding: 8px 10px 8px 14px;
    border-radius: 0 4px 4px 0;
  }
  #local-pane .example-row .ex-text.highlight-c {
    background: var(--chosen-soft);
    border-left: 3px solid var(--chosen);
  }
  #local-pane .example-row .ex-text.highlight-r {
    background: var(--rejected-soft);
    border-left: 3px solid var(--rejected);
  }
  #local-pane .example-row .role-tag.highlight-c, #local-pane .example-row .role-tag.highlight-r {
    font-size: 10.5px;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 3px;
  }
  #local-pane .example-row .role-tag.highlight-c { background: var(--chosen);   }
  #local-pane .example-row .role-tag.highlight-r { background: var(--rejected); }

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

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

  /* ───────── DATA-LANDING (curated findings, shown while data loads) ─────────
     Ported from the "Viewer Orientation" design. Everything is scoped under
     #data-landing / #finding-detail so the design's generic class names
     (.lede, .chip, .insight, …) cannot collide with the viewer's own. Colors
     are the shared :root tokens the design copied from this viewer. */
  #local-pane #local-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;
  }
  #local-pane #local-data-landing .hero-h {
    font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.1;
    letter-spacing: -0.018em; color: var(--paper); margin: 0 0 18px;
  }
  #local-pane #local-data-landing .hero-h .em { font-style: italic; color: var(--amber); }
  #local-pane #local-data-landing .lede {
    font-size: 14.5px; line-height: 1.62; color: var(--paper-soft); margin: 0 0 10px;
  }
  #local-pane #local-data-landing .lede b { color: var(--paper); font-weight: 600; }
  #local-pane #local-data-landing .lede em { color: var(--amber); font-style: italic; }
  #local-pane #local-data-landing .lede .chosen-w { color: var(--chosen); font-weight: 600; }
  #local-pane #local-data-landing .lede .rejected-w { color: var(--rejected); font-weight: 600; }
  #local-pane #local-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);
  }
  #local-pane #local-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);
  }
  #local-pane #local-data-landing .section-rule .note { font-size: 11.5px; color: var(--paper-faint); font-style: italic; font-family: var(--serif); }
  #local-pane #local-data-landing .findings { display: grid; grid-template-columns: 1fr; gap: 12px; }
  #local-pane #local-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;
  }
  #local-pane #local-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);
  }
  #local-pane #local-data-landing .finding.val-good { border-left-color: var(--chosen); }
  #local-pane #local-data-landing .finding.val-harm { border-left-color: var(--rejected); }
  #local-pane #local-data-landing .vtag {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; margin: 0 0 -4px;
  }
  #local-pane #local-data-landing .vtag .dot { width: 6px; height: 6px; border-radius: 999px; }
  #local-pane #local-data-landing .vtag.good { color: var(--chosen); } #local-pane #local-data-landing .vtag.good .dot { background: var(--chosen); }
  #local-pane #local-data-landing .vtag.harm { color: var(--rejected); } #local-pane #local-data-landing .vtag.harm .dot { background: var(--rejected); }
  #local-pane #local-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;
  }
  #local-pane #local-data-landing .finding .insight {
    font-size: 14px; line-height: 1.55; color: var(--paper-soft); margin: -2px 0 0; text-wrap: pretty;
  }
  #local-pane #local-data-landing .finding .insight em { color: var(--amber); font-style: italic; }
  #local-pane #local-data-landing .finding .insight b { font-weight: 600; }
  #local-pane #local-data-landing .finding .foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
  #local-pane #local-data-landing .chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
    border-radius: 999px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.02em; white-space: nowrap;
  }
  #local-pane #local-data-landing .chip.c { color: var(--chosen); background: var(--chosen-soft); }
  #local-pane #local-data-landing .chip.r { color: var(--rejected); background: var(--rejected-soft); }
  #local-pane #local-data-landing .chip .dot { width: 6px; height: 6px; border-radius: 999px; }
  #local-pane #local-data-landing .chip.c .dot { background: var(--chosen); }
  #local-pane #local-data-landing .chip.r .dot { background: var(--rejected); }
  #local-pane #local-data-landing .robust { font-family: var(--mono); font-size: 10.5px; color: var(--chosen); font-weight: 700; }
  #local-pane #local-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;
  }
  #local-pane #local-data-landing .pathline .k { color: var(--amber); font-weight: 600; }
  #local-pane #local-data-landing .pathline .arrow { color: var(--paper-faint); margin: 0 5px; }
  #local-pane #local-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;
  }
  #local-pane #local-data-landing .finding:hover .go { opacity: 1; transform: translateX(0); color: var(--amber); }
  #local-pane #local-data-landing .panel-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule);
    display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
  #local-pane #local-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;
  }
  #local-pane #local-data-landing .foot-link:hover { color: var(--amber); border-bottom-color: var(--amber-mute); }
  #local-pane #local-data-landing .foot-link .ic { color: var(--paper-faint); }
  #local-pane #local-data-landing .foot-link:hover .ic { color: var(--amber); }
  #local-pane #local-data-landing .foot-sep { color: var(--rule); }

  /* finding detail sub-view */
  #local-pane #local-finding-detail .vtag {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; margin: 0 0 10px;
  }
  #local-pane #local-finding-detail .vtag .dot { width: 6px; height: 6px; border-radius: 999px; }
  #local-pane #local-finding-detail .vtag.good { color: var(--chosen); } #local-pane #local-finding-detail .vtag.good .dot { background: var(--chosen); }
  #local-pane #local-finding-detail .vtag.harm { color: var(--rejected); } #local-pane #local-finding-detail .vtag.harm .dot { background: var(--rejected); }
  #local-pane #local-finding-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; }
  #local-pane #local-finding-detail .fd-insight em { color: var(--amber); font-style: italic; }
  #local-pane #local-finding-detail .fd-body { font-size: 14px; line-height: 1.6; color: var(--paper-soft); margin: 0 0 22px; }
  #local-pane #local-finding-detail .fd-body b { color: var(--paper); font-weight: 600; }
  #local-pane #local-finding-detail .fd-body em { color: var(--amber); font-style: italic; }
  #local-pane #local-finding-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; }
  #local-pane #local-finding-detail .fd-metric .v { font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
  #local-pane #local-finding-detail .fd-metric .v.pos { color: var(--chosen); } #local-pane #local-finding-detail .fd-metric .v.neg { color: var(--rejected); }
  #local-pane #local-finding-detail .fd-metric .l { font-size: 10px; color: var(--paper-mute); margin-top: 3px; }
  #local-pane #local-finding-detail .fd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
  #local-pane #local-finding-detail .fd-node { background: var(--surface-raised); border: 1px solid var(--rule-soft);
    border-top: 3px solid var(--amber); border-radius: 10px; padding: 14px 16px; min-width: 0; }
  #local-pane #local-finding-detail .fd-node.feature { border-top-color: var(--azure); }
  #local-pane #local-finding-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; }
  #local-pane #local-finding-detail .fd-node .id { font-family: var(--mono); font-size: 11px; color: var(--amber); font-weight: 600; }
  #local-pane #local-finding-detail .fd-node.feature .id { color: var(--azure); }
  #local-pane #local-finding-detail .fd-node .name { font-family: var(--serif); font-size: 14.5px; color: var(--paper); line-height: 1.32; margin-top: 4px; }
  #local-pane #local-finding-detail .fd-node .desc { font-size: 11.5px; color: var(--paper-soft); line-height: 1.45; margin-top: 7px; font-style: italic; font-family: var(--serif); }
  #local-pane #local-finding-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; }
  #local-pane #local-finding-detail .fd-cta:hover:not(:disabled) { filter: brightness(1.08); }
  #local-pane #local-finding-detail .fd-cta:disabled { opacity: 0.4; cursor: progress; }
  #local-pane #local-finding-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); }
  #local-pane #local-finding-detail .fd-examples { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); }
  #local-pane #local-finding-detail .fd-ex-h {
    margin: 0 0 12px; font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-mute);
    display: flex; align-items: baseline; gap: 10px;
  }
  #local-pane #local-finding-detail .fd-ex-note { font-family: var(--serif); font-style: italic; font-size: 11.5px;
    text-transform: none; letter-spacing: 0; color: var(--paper-faint); font-weight: 400; }
  #local-pane #local-finding-detail .empty { color: var(--paper-faint); font-style: italic; font-family: var(--serif); font-size: 12.5px; }

  /* per_prompt load progress bar — pinned at the top of the right panel */
  #local-pane #local-loadbar { position: absolute; top: 0; left: 0; right: 0; z-index: 7; pointer-events: none; }
  #local-pane #local-loadbar[hidden] { display: none; }
  #local-pane #local-loadbar .lb-track { height: 4px; background: var(--rule-soft); overflow: hidden; }
  #local-pane #local-loadbar .lb-fill { height: 100%; width: 0%; background: var(--amber); transition: width 150ms linear; box-shadow: 0 0 8px var(--amber-mute); }
  #local-pane #local-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%; } }
  #local-pane #local-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 so the
        OPEN list is fully styled (the native option list can't be). The native
        select stays in the DOM (hidden) as data source + change-event target. */
  #local-pane .cdd-native { display: none !important; }
  #local-pane .cdd { position: relative; margin-top: 6px; }
  #local-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;
  }
  #local-pane .cdd-trigger:hover { border-color: var(--amber-mute); }
  #local-pane .cdd-trigger.cdd-open { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
  #local-pane .cdd-trigger .cdd-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #local-pane .cdd-trigger.cdd-placeholder .cdd-label { color: var(--paper-faint); font-style: italic; font-family: var(--serif); }
  #local-pane .cdd-trigger .cdd-caret { flex: none; color: var(--paper-mute); font-size: 10px; transition: transform 140ms ease; }
  #local-pane .cdd-trigger.cdd-open .cdd-caret { transform: rotate(180deg); color: var(--amber); }
  #local-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);
  }
  #local-pane .cdd-panel[hidden] { display: none; }
  #local-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;
  }
  #local-pane .cdd-opt:hover { background: var(--amber-glow); }
  #local-pane .cdd-opt.active { background: var(--amber-glow); }
  #local-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; }
  #local-pane .cdd-opt .cdd-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--paper); }
  #local-pane .cdd-opt.active .cdd-lbl { font-weight: 600; }
  #local-pane .cdd-panel::-webkit-scrollbar { width: 8px; }
  #local-pane .cdd-panel::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }