/* Appearance layer: deliberately loaded after the component styles. */
:root {
  --base-a: #a8d8ff;
  --base-t: #ffb6bd;
  --base-c: #fff0a6;
  --base-g: #b7e8bf;
  --base-a-ink: #132c36;
  --base-t-ink: #132c36;
  --base-c-ink: #132c36;
  --base-g-ink: #132c36;
  --surface-raised: #14222f;
  --surface-soft: #14282d;
  --accent-soft: #193a35;
  --appearance-shadow: 0 22px 80px #0005;
  --scene-bg: #080e18;
  --scene-ink: #e7eee9;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7f4;
  --panel: #ffffff;
  --panel2: #edf3ef;
  --line: #ccd9d5;
  --line2: #dde5e0;
  --text: #18353c;
  --muted: #4d656b;
  --soft: #61757a;
  --mint: #246c60;
  --blue: #356a92;
  --gold: #90651e;
  --rose: #a34f65;
  --purple: #74628f;
  --surface-raised: #ffffff;
  --surface-soft: #eef4f0;
  --accent-soft: #e1eee7;
  --appearance-shadow: 0 22px 80px #29463b24;
  --scene-bg: #eff5f0;
  --scene-ink: #18353c;
  --cell-atlas-soft: #61757a;
}

/* The two header actions stay together at every viewport width. */
.topbar { column-gap: 20px; }
.appearance-controls { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.appearance-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 6px 9px; border-radius: 5px; color: var(--muted); font-size: 10px; line-height: 1.3; white-space: nowrap; }
.appearance-controls button:hover { background: var(--surface-soft); color: var(--text); }
.appearance-controls button:focus-visible { outline-offset: 3px; }
.appearance-controls svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.appearance-theme-toggle { border-right: 1px solid var(--line2); }
.appearance-theme-toggle[data-current-theme="light"] .appearance-moon,
.appearance-theme-toggle[data-current-theme="dark"] .appearance-sun { display: none; }

/* Native dialog supplies modal semantics, focus containment, and backdrop. */
.appearance-dialog { width: min(520px, calc(100vw - 32px)); max-height: min(88vh, 830px); max-height: min(88dvh, 830px); padding: 28px; overflow-y: auto; overscroll-behavior: contain; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--appearance-shadow); }
.appearance-dialog::backdrop { background: #0c1e286b; backdrop-filter: blur(5px); }
.appearance-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.appearance-dialog .eyebrow { margin: 0 0 8px; font-size: 9px; color: var(--mint); }
.appearance-head h2 { font: 400 36px/1.12 var(--serif); letter-spacing: -.045em; }
.appearance-close { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; margin: -5px -5px 0 0; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 24px; line-height: 1; }
.appearance-close:hover { background: var(--surface-soft); color: var(--text); }
.appearance-dialog .appearance-intro { margin: 14px 0 24px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.appearance-dialog fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.appearance-dialog legend { padding: 0; margin-bottom: 12px; color: var(--text); font-size: 12px; font-weight: 600; }
.appearance-theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.appearance-theme-options button { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); color: var(--text); text-align: left; font-size: 12px; }
.appearance-theme-options button:hover { border-color: var(--mint); }
.appearance-theme-options button[aria-pressed="true"] { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); background: var(--accent-soft); }
.appearance-theme-options small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.appearance-check { position: absolute; right: 7px; top: 4px; color: var(--mint); font-size: 10px; visibility: hidden; }
[aria-pressed="true"] > .appearance-check { visibility: visible; }
.appearance-theme-preview { position: relative; display: block; width: 35px; height: 43px; border: 1px solid #a6b7b3; border-radius: 4px; overflow: hidden; flex: 0 0 auto; }
.appearance-theme-preview::before { content: ''; display: block; height: 8px; border-bottom: 1px solid #b9c8bf; }
.appearance-theme-preview i:first-child { position: absolute; left: 5px; top: 15px; width: 13px; height: 13px; border: 1px solid; border-radius: 50%; }
.appearance-theme-preview i:last-child { position: absolute; right: 4px; top: 13px; width: 6px; height: 23px; border-left: 1px solid; }
.appearance-theme-preview--light { background: #f2f6f1; color: #41796b; }
.appearance-theme-preview--dark { background: #11212b; color: #9ad3c3; border-color: #5b756e; }
.appearance-theme-preview--dark::before { border-color: #476156; }
.appearance-dialog .appearance-palette-field { margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--line2); }
.appearance-dialog .appearance-palette-field legend { float: left; width: 100%; margin-bottom: 8px; }
.appearance-dialog .appearance-field-note { clear: both; margin: 0 0 15px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.appearance-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.appearance-base-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.appearance-base-row:focus-within { border-color: var(--mint); }
.appearance-base-symbol { display: grid; place-items: center; width: 29px; height: 32px; flex: 0 0 auto; border: 1px solid #122c3540; border-radius: 5px; font: 600 17px var(--mono); }
.appearance-base-symbol--a { background: var(--base-a); color: var(--base-a-ink); }
.appearance-base-symbol--t { background: var(--base-t); color: var(--base-t-ink); }
.appearance-base-symbol--c { background: var(--base-c); color: var(--base-c-ink); }
.appearance-base-symbol--g { background: var(--base-g); color: var(--base-g-ink); }
.appearance-base-name { flex: 1; font-size: 11px; color: var(--text); line-height: 1.4; }
.appearance-base-name code { display: block; margin-top: 4px; font: 9px var(--mono); color: var(--soft); }
.appearance-base-row input[type="color"] { width: 28px; height: 30px; flex: 0 0 28px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-soft); cursor: pointer; }
.appearance-base-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.appearance-base-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 2px; }
.appearance-base-row input[type="color"]::-moz-color-swatch { border: 0; border-radius: 2px; }
.appearance-reset { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 12px; padding: 8px 0; color: var(--mint); text-align: left; font-size: 11px; }
.appearance-reset:hover { color: var(--text); }
.appearance-reset span { font-size: 17px; }
.appearance-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line2); }
.appearance-dialog .appearance-bottom p { max-width: 290px; margin: 0; color: var(--soft); font-size: 10px; line-height: 1.6; }
.appearance-done { padding: 10px 20px; border-radius: 6px; background: var(--mint); color: #102b29; font-size: 11px; font-weight: 600; }
.appearance-done:hover { filter: brightness(1.1); color: #102b29; }
html[data-theme="light"] .appearance-done { color: #fff; }

/* Bases use a filled, labeled chip so the pale palette remains readable. */
.sequence :is(.a, .t, .c, .g) { padding: 2px 3px; border-radius: 3px; text-shadow: none; letter-spacing: .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sequence .a { background: var(--base-a); color: var(--base-a-ink); }
.sequence .t { background: var(--base-t); color: var(--base-t-ink); }
.sequence .c { background: var(--base-c); color: var(--base-c-ink); }
.sequence .g { background: var(--base-g); color: var(--base-g-ink); }

/* Bright workspace: paper-like surfaces, clear borders, dark teal type. */
html[data-theme="light"] body { background: var(--bg); }
html[data-theme="light"] :is(button, a):hover { color: var(--mint); }
html[data-theme="light"] .topbar { background: #ffffffd9; }
html[data-theme="light"] .journey { background: #f0f4ef; }
html[data-theme="light"] .journey button::after { color: #8ca29d; }
html[data-theme="light"] .journey button.active .step-num { background: #dcece1; border-color: #6e9d8d; }
html[data-theme="light"] .stage { background: radial-gradient(ellipse at 54% 49%, #deeee6 0, #eef5ef 43%, #f8faf6 80%); }
html[data-theme="light"] .scene-heading { text-shadow: 0 1px 12px #f9fcf5; }
html[data-theme="light"] .scene-heading > p:last-child { color: #49656a; }
html[data-theme="light"] :is(.camera-controls, .fold-overlay) { background: #ffffffed; box-shadow: 0 4px 24px #28483b0a; }
html[data-theme="light"] :is(.camera-controls button:hover, .camera-controls button[aria-pressed="true"]) { background: var(--accent-soft); color: var(--mint); }
html[data-theme="light"] .scene-footer p span { color: var(--soft); }
html[data-theme="light"] .hotspot { background: #ffffffed; border-color: #8cae9f; color: var(--text); box-shadow: 0 5px 22px #294c3d13; }
html[data-theme="light"] .hotspot:hover { background: #e4efe7; border-color: var(--mint); }
html[data-theme="light"] .inspector { background: linear-gradient(145deg, #fff, #f0f5ef); scrollbar-color: #9db8ad transparent; }
html[data-theme="light"] .primary { color: #fff; box-shadow: 0 3px 8px #245c4920; }
html[data-theme="light"] .primary:hover { color: #fff; background: #185c50; }
html[data-theme="light"] .primary.secondary { background: var(--accent-soft); color: var(--mint); border-color: #9ab6a7; box-shadow: none; }
html[data-theme="light"] .pill { background: #edf5ee; border-color: #a8c0b3; }
html[data-theme="light"] .pill.related { background: #faf3e1; border-color: #cfba85; }
html[data-theme="light"] .workbench { background: #fafbf8; }
html[data-theme="light"] :is(.molecule-strip button.active, .filter-row button.active) { background: var(--accent-soft); border-color: #82a28f; }
html[data-theme="light"] .atlas-card { background: linear-gradient(145deg, #fff, #f0f5ef); box-shadow: 0 4px 18px #30503d05; }
html[data-theme="light"] .atlas-card:hover { border-color: #769d88; }
html[data-theme="light"] :is(.sheet, .ic-card) { background: #fff; border-color: var(--line); }
html[data-theme="light"] .compare-box { background: #eaf3eb; border-color: #9bb9a5; }
html[data-theme="light"] th { background: #e7eee8; }
html[data-theme="light"] td { background: #ffffff6b; }
html[data-theme="light"] :is(select, textarea, input[type="text"], input[type="search"], .source-finder input) { background: #fff; color: var(--text); border-color: #b5c8bd; color-scheme: light; }
html[data-theme="light"] :is(input, textarea)::placeholder { color: #6b7d78; opacity: 1; }
html[data-theme="light"] :is(.conclusion, .ev-alternative) { background: #fbf5e6; }
html[data-theme="light"] .conclusion p { color: #6c603e; }
html[data-theme="light"] dialog { background: #fff; border-color: #bbccc2; }
html[data-theme="light"] .source-finder { background: #fff; }
html[data-theme="light"] .topology-grid span { background: #eef0df; }
html[data-theme="light"] .organelle-detail { background: #f2f7f0; border-color: #a6c0ad; }
html[data-theme="light"] .compare-jump { color: #fff; background: #286652; border-color: #286652; box-shadow: 0 6px 24px #23422c28; }
html[data-theme="light"] .compare-jump:hover { background: #174b3c; }
html[data-theme="light"] .ic-presets button { background: #f4f7f2; }
html[data-theme="light"] :is(.ic-presets button[aria-pressed="true"], .ev-steps button[aria-pressed="true"]) { background: var(--accent-soft); border-color: #92b2a1; }
html[data-theme="light"] .ic-stage { background: radial-gradient(ellipse at 50% 50%, #deeee2, #f7faf5 75%); }

/* Component-specific light surfaces and typography follow below. */
html[data-theme="light"] .inward-story {
  --story-bg: #ffffff;
  --story-line: var(--line);
  --story-ink: var(--text);
  --story-muted: var(--muted);
  --story-mint: var(--mint);
  background: linear-gradient(135deg, #edf5ee, transparent 47%), var(--story-bg);
}
html[data-theme="light"] .inward-story :is(p, small) { color: var(--muted); }
html[data-theme="light"] .inward-story :is(.inward-story-count, .inward-story-scope, .inward-story-step, .inward-story-step-number, .inward-story-plot-meta, .inward-story-plot-meta > span:last-child, .inward-story-legend, .inward-story-small-label, .inward-story-motion, .inward-story-sources > div > span) { color: var(--soft); }
html[data-theme="light"] .inward-story :is(.inward-story-eyebrow, .inward-story-stage-label, .inward-story-look > span, .inward-story-step.is-visited .inward-story-step-number, .inward-story-sources button) { color: var(--mint); }
html[data-theme="light"] .inward-story-count { background: #eaf3ec; border-color: #b9cfc0; }
html[data-theme="light"] :is(.inward-story-steps, .inward-story-context, .inward-story-sources) { background: #eff4ee; }
html[data-theme="light"] .inward-story-step:hover { background: #e4eee4; color: var(--text); }
html[data-theme="light"] .inward-story-step.is-current { color: var(--mint); }
html[data-theme="light"] .inward-story-look { border-color: #82a993; }
html[data-theme="light"] :is(.inward-story-lens button, .inward-story-navigation button) { background: #fff; border-color: var(--line); color: var(--muted); }
html[data-theme="light"] :is(.inward-story-lens button[aria-pressed="true"], .inward-story-navigation button[data-action="play"]) { background: var(--accent-soft); border-color: #9fbcaa; color: var(--mint); }
html[data-theme="light"] .inward-story-navigation button:hover:not(:disabled) { border-color: var(--mint); background: #e4eee5; }
html[data-theme="light"] .inward-story-sources a { color: var(--mint); }

html[data-theme="light"] .pairing-lab {
  --pairing-ink: var(--text);
  --pairing-muted: var(--muted);
  --pairing-line: var(--line);
  --pairing-mint: var(--mint);
  background: linear-gradient(125deg, #eef5ee, transparent 56%), #ffffff;
}
html[data-theme="light"] .pairing-lab :is(p, small) { color: var(--muted); }
html[data-theme="light"] .pairing-lab :is(.pairing-lab-badge, .pairing-lab-types button, .pairing-lab-types button > small, .pairing-lab-toolbar > span, .pairing-lab-toolbar > button, .pairing-lab-view button, .pairing-lab-facts > span, .pairing-lab-key > span, .pairing-lab-primer summary, .pairing-lab-primer summary > small, .pairing-lab-limit > span, .pairing-lab-sources > span) { color: var(--muted); }
html[data-theme="light"] .pairing-lab :is(.pairing-lab-eyebrow, .pairing-lab-category, .pairing-lab-point-head > span, .pairing-lab-point-head button, .pairing-lab-structure, .pairing-lab-sources a) { color: var(--mint); }
html[data-theme="light"] .pairing-lab :is(h4, strong) { color: var(--text); }
html[data-theme="light"] :is(.pairing-lab-badge, .pairing-lab-types button, .pairing-lab-facts > span, .pairing-lab-point, .pairing-lab-donor) { border-color: var(--line); background: #f1f6ef; }
html[data-theme="light"] .pairing-lab-types button[aria-pressed="true"] { color: var(--mint); border-color: #79a58d; background: var(--accent-soft); }
html[data-theme="light"] .pairing-lab-types button[aria-pressed="true"] > small { color: var(--mint); }
html[data-theme="light"] :is(.pairing-lab-toolbar, .pairing-lab-primer, .pairing-lab-sources) { background: #eff4ee; }
html[data-theme="light"] :is(.pairing-lab-toolbar > button, .pairing-lab-view, .pairing-lab-toolbar > button > i, .pairing-lab-point-head button) { border-color: #b3c7bb; }
html[data-theme="light"] .pairing-lab-toolbar > button > i { color: var(--muted); }
html[data-theme="light"] :is(.pairing-lab-toolbar > button[aria-pressed="true"], .pairing-lab-view button[aria-pressed="true"]) { background: #dfece2; color: var(--mint); border-color: #8faf9b; }
html[data-theme="light"] .pairing-lab-toolbar > button[aria-pressed="true"] > i { border-color: #84a990; color: var(--mint); }
html[data-theme="light"] .pairing-lab-dots button > span { background: #9eb4a8; }
html[data-theme="light"] .pairing-lab-dots button[aria-pressed="true"] > span { background: var(--mint); }
html[data-theme="light"] .pairing-lab :is(.pairing-lab-charge > span, .pairing-lab-charge > p, .pairing-lab-hint, .pairing-lab-rna-note, .pairing-lab-donor > i) { color: var(--gold); }
html[data-theme="light"] .pairing-lab-donor > span { color: var(--mint); }
html[data-theme="light"] .pairing-lab-charge { border-color: #ddcba6; }
html[data-theme="light"] .pairing-lab-key-plate { border-color: var(--mint); background: #d7e7dd; }
html[data-theme="light"] .pairing-lab-key-contact { border-color: var(--gold); }
html[data-theme="light"] .pairing-lab-key-chain { background: var(--blue); }

html[data-theme="light"] .nuclear-lab {
  --nl-bg: #ffffff;
  --nl-panel: #f1f6ef;
  --nl-line: var(--line);
  --nl-text: var(--text);
  --nl-muted: var(--muted);
  --nl-soft: var(--soft);
  --nl-mint: var(--mint);
}
html[data-theme="light"] .nuclear-lab .nl-header { background: linear-gradient(130deg, #edf5eb, transparent); }
html[data-theme="light"] .nuclear-lab .nl-model-tag { color: var(--mint); border-color: #9eb7a5; background: #f4f8ef; }
html[data-theme="light"] .nuclear-lab :is(.nl-tabs, .nl-controls, .nl-diagram-summary) { background: #f0f5ee; }
html[data-theme="light"] .nuclear-lab .nl-tabs button:hover { background: #e6efe6; }
html[data-theme="light"] .nuclear-lab .nl-tabs button[aria-selected="true"] { background: var(--accent-soft); }
html[data-theme="light"] .nuclear-lab .nl-stage { background: #fcfdf9; }
html[data-theme="light"] .nuclear-lab .nl-transport button { background: #fff; border-color: var(--line); }
html[data-theme="light"] .nuclear-lab .nl-transport button[data-action="play"] { background: var(--accent-soft); border-color: #96b3a1; }
html[data-theme="light"] .nuclear-lab .nl-transport button:hover:not(:disabled) { background: #dce9dd; border-color: var(--mint); }
html[data-theme="light"] .nuclear-lab .nl-steps button { border-top-color: #c7d6cb; }
html[data-theme="light"] .nuclear-lab .nl-steps button:hover:not(:disabled) { background: #eaf2e8; }
html[data-theme="light"] .nuclear-lab .nl-steps button.is-current { background: #e1ede2; border-top-color: var(--mint); }
html[data-theme="light"] .nuclear-lab :is(.nl-select select, .nl-sources li) { background: #fff; border-color: var(--line); color: var(--text); }
html[data-theme="light"] .nuclear-lab .nl-diagram-summary { border-color: var(--line); }
html[data-theme="light"] .nuclear-lab .nl-structure-links button:hover { color: #174e3e; }
html[data-theme="light"] .nuclear-lab .nl-caution { color: #70603d; background: #faf5e6; }
html[data-theme="light"] .nuclear-lab .nl-evidence-grid > div:last-child span { color: var(--gold); }

html[data-theme="light"] .sequence-lens {
  --sl-ink: var(--text);
  --sl-muted: var(--muted);
  --sl-line: var(--line);
  --sl-panel: #f0f6ed;
  --sl-mint: var(--mint);
  --sl-blue: var(--blue);
  --sl-gold: var(--gold);
  --sl-rose: var(--rose);
  background: radial-gradient(ellipse at 95% 0, #dfebdc88, transparent 43%), #ffffff;
}
html[data-theme="light"] .sequence-lens :is(p, label, small) { color: var(--muted); }
html[data-theme="light"] .sequence-lens :is(.sl-local-badge strong, .sl-input-form > label, .sl-stats dd, .sl-rule-details h4, .sl-rule-details summary, .sl-inference > p strong) { color: var(--text); }
html[data-theme="light"] .sequence-lens :is(.sl-eyebrow, .sl-footer .sl-eyebrow, .sl-sources a) { color: var(--mint); }
html[data-theme="light"] .sequence-lens :is(select, textarea) { background: #fff; color: var(--text); border-color: #b2c6b8; color-scheme: light; }
html[data-theme="light"] .sequence-lens :is(.sl-local-badge, .sl-tabs, .sl-rule-switch button, .sl-stats, .sl-interaction) { background: #f0f5ec; }
html[data-theme="light"] .sequence-lens .sl-boundary { color: #6d613e; background: #faf5e6; }
html[data-theme="light"] .sequence-lens .sl-tabs button span { color: var(--soft); }
html[data-theme="light"] .sequence-lens .sl-tabs button[aria-selected="true"] { background: var(--accent-soft); border-color: #9cb7a3; color: var(--mint); }
html[data-theme="light"] .sequence-lens .sl-button { background: var(--mint); color: #fff; border-color: var(--mint); }
html[data-theme="light"] .sequence-lens .sl-button:hover:not(:disabled) { background: #185547; color: #fff; }
html[data-theme="light"] .sequence-lens .sl-open { background: #f0f6ed; color: var(--mint); border-color: #9cb7a3; }
html[data-theme="light"] .sequence-lens .sl-open:hover:not(:disabled) { background: #deebdf; color: var(--mint); }
html[data-theme="light"] .sequence-lens .sl-error { background: #fff1f0; color: #a24155; border-color: #d9a2ad; }
html[data-theme="light"] .sequence-lens .sl-rule-switch button[aria-pressed="true"] { color: var(--blue); background: #eaf1f6; border-color: #9eb9cc; }
html[data-theme="light"] .sequence-lens .sl-stepper button > span:first-child { border-color: #abc1b1; }
html[data-theme="light"] .sequence-lens .sl-stepper button[aria-pressed="true"] { color: var(--mint); border-color: #92b19b; background: #eaf3e8; }
html[data-theme="light"] .sequence-lens .sl-interaction output { color: var(--mint); }
html[data-theme="light"] .sequence-lens :is(.sl-link-button:hover, .sl-sources a:hover) { color: #174e3e; }
html[data-theme="light"] .sequence-lens .sl-legend > span { color: var(--muted); }
html[data-theme="light"] .sequence-lens .sl-privacy { color: var(--soft); }
html[data-theme="light"] .sequence-lens .sl-no-match { border-color: #d5bd8a; background: #fbf7ec; }

html[data-theme="light"] .cell-atlas { background: linear-gradient(155deg, #f3f7ef, #fcfdf9 65%); }
html[data-theme="light"] .cell-atlas__filters button { border-color: var(--line); }
html[data-theme="light"] .cell-atlas__filters button[aria-pressed="true"] { background: var(--accent-soft); border-color: #89ab95; }
html[data-theme="light"] .cell-atlas__search { background: #fff; border-color: #b1c5b6; }
html[data-theme="light"] .cell-atlas__search input { background: transparent; }
html[data-theme="light"] .cell-atlas__card { background: linear-gradient(145deg, #fff, #f4f7ef); border-color: #c5d6c9; box-shadow: 0 3px 14px #29462e04; }
html[data-theme="light"] .cell-atlas__card:hover { background: #eef5e9; border-color: #87a98f; }
html[data-theme="light"] .cell-atlas__card.is-selected { background: linear-gradient(145deg, #e8f1e5, #f8faf1); border-color: #6b9b7b; box-shadow: inset 0 0 0 1px #6b9b7b22; }
html[data-theme="light"] .cell-atlas__card-choice { border-color: #d0ddcf; }
html[data-theme="light"] .cell-atlas__card.is-selected .cell-atlas__card-choice { border-color: #b4cbb7; }
html[data-theme="light"] .cell-atlas__detail { background: linear-gradient(145deg, #fff, #f1f6ec 72%); border-color: #b6ccb8; }
html[data-theme="light"] .cell-atlas__nucleus-status { background: #f1edf6; border-color: #bbaeca; }
html[data-theme="light"] .cell-atlas__nucleus-status--exception { background: #faf3e1; border-color: #d4bf8f; }
html[data-theme="light"] :is(.cell-atlas__facts > div, .cell-atlas__route, .cell-atlas__sources) { border-color: var(--line); }
html[data-theme="light"] .cell-atlas__sources summary span { border-color: #b2c7b8; }
html[data-theme="light"] .cell-atlas__sources .cell-atlas__source-note { border-color: #afc4b6; }
html[data-theme="light"] .cell-atlas__sources a { text-decoration-color: #a7bfae; }
html[data-theme="light"] .cell-atlas__empty { border-color: #b3c6b6; }
html[data-theme="light"] .cell-atlas__explore { color: #fff !important; }
html[data-theme="light"] .cell-atlas__explore:hover { background: #185547; border-color: #185547; }

/* Illustrations with authored dark-oriented labels retain an intentional ink
   drawing surface. This preserves original SVG contrast without color filters. */
html[data-theme="light"] :is(.inward-story-drawing, .pairing-lab-svg, .nl-diagram, .ev-diagram, .sl-diagram, .sl-sequence-scroll) {
  --text: #e7eee9;
  --muted: #a6bac4;
  --soft: #9bb0ba;
  --mint: #96dfcf;
  --blue: #7caedf;
  --gold: #e9bd7c;
  --rose: #dca0ba;
  --sl-ink: #e1ede8;
  --sl-muted: #a2b4b3;
  --sl-line: #344b43;
  --sl-mint: #8ce3c5;
  --sl-blue: #98bfff;
  --sl-gold: #ecc583;
  --sl-rose: #eba6bc;
  background: radial-gradient(ellipse at 50% 35%, #18322f, #0c1b25 85%);
  border-color: #28433f;
  color: #e7eee9;
  border-radius: 10px;
  color-scheme: dark;
}
html[data-theme="light"] .inward-story-drawing { margin: 12px 0 8px; padding: 12px 0; }
html[data-theme="light"] .pairing-lab-svg { padding: 10px 0; }
html[data-theme="light"] .nuclear-lab .nl-diagram { border-radius: 0; scrollbar-color: #6f8c80 #0c1b25; }
html[data-theme="light"] .ev-diagram { padding: 8px 0; }
html[data-theme="light"] .sequence-lens .sl-diagram :is(p, small, label) { color: #a6bac4; }
html[data-theme="light"] .sequence-lens .sl-diagram .sl-mirror-note { color: #c7c9ac; }
html[data-theme="light"] .sequence-lens .sl-sequence-scroll { scrollbar-color: #668773 #0c1b25; }
html[data-theme="light"] .appearance-done:hover { color: #fff; }

@media (max-width: 1220px) and (min-width: 761px) {
  .topbar { gap: 14px; padding-left: 24px; padding-right: 24px; }
  .topbar nav { gap: 19px; }
  .brand small { display: none; }
  .appearance-open > span { display: none; }
}
@media (max-width: 940px) and (min-width: 761px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: 105px; gap: 6px 18px; padding-top: 12px; }
  .topbar > nav { width: 100%; order: 5; justify-content: center; gap: 30px; }
  .topbar > nav .nav { padding: 10px 0 12px; }
  .topbar > .quiet { margin-left: auto; }
  .appearance-open > span { display: inline; }
}
@media (max-width: 760px) {
  .appearance-controls { gap: 1px; padding: 2px; margin-left: auto; }
  .appearance-controls button { padding: 6px 8px; min-height: 31px; }
  .appearance-open > span { display: none; }
  .topbar > .quiet { margin-left: auto; }
  .topbar > .appearance-controls { margin-left: 3px; }
  .topbar > nav { order: 5; }
}
@media (max-width: 430px) {
  .topbar { gap: 6px; }
  .topbar > .quiet { font-size: 9px; }
  .appearance-controls button { padding: 6px; font-size: 9px; gap: 4px; }
  .appearance-controls svg { width: 14px; height: 14px; }
  .brand small { max-width: 135px; font-size: 8px; }
  .appearance-dialog { padding: 23px 18px; border-radius: 14px; }
  .appearance-head h2 { font-size: 32px; }
  .appearance-theme-options { gap: 7px; }
  .appearance-theme-options button { padding: 10px 8px; gap: 7px; }
  .appearance-theme-preview { width: 28px; height: 37px; }
  .appearance-theme-options small { font-size: 8px; }
  .appearance-base-row { gap: 6px; padding: 9px 7px; }
  .appearance-base-symbol { width: 24px; font-size: 15px; }
  .appearance-base-name { font-size: 10px; }
  .appearance-base-row input[type="color"] { width: 25px; flex-basis: 25px; }
}
@media (max-width: 350px) {
  .appearance-theme-toggle > span { display: none; }
  .appearance-palette { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .appearance-dialog *, .appearance-controls * { transition: none; animation: none; }
}