/* Learning appearance is independent of the captured/native simulator palettes. */
:root {
  --surface:#ffffff;--speaking-ink:#177b67;--control:#ffffff;--on-primary:#ffffff;--focus:#96620f;
  color-scheme:light;
}
:root[data-appearance="dark"] {
  --ink:#e7f0eb;--speaking-ink:#83d8b5;--muted:#afc0b8;--paper:#121b1a;--line:#6a8378;
  --teal:#83d8b5;--mint:#263d33;--gold:#edc780;
  --surface:#1c2925;--control:#24372f;--sidebar:#17241f;--active:#2c4b3c;
  --on-primary:#102b21;--focus:#f6ce78;--warning-bg:#3c3020;--warning-ink:#f1d19a;
  --primary-button-bg:#386653;--primary-button-hover:#426f5c;--primary-button-pressed:#304f41;
  color-scheme:dark;
}
/* Restore inherited app tokens at every native boundary. Never filter screenshots. */
:where(.menu-explorer, .personal-desktop, .system-screen, .sim-window) {
  --ink:#172b35;--muted:#647680;--paper:#f5f7f5;--line:#dce5df;
  --teal:#167b67;--mint:#e5f3eb;--gold:#ad712a;
  color-scheme:light;
}
:root[data-appearance="dark"] :is(.personal-desktop,.sim-window) {color:var(--ink)}
.appearance-card {margin-bottom:20px}
.appearance-control {border:0;padding:0;margin:0;min-width:0}
.appearance-control legend {font-size:20px;font-weight:700;padding:0;margin-bottom:14px}
.appearance-options {display:flex;flex-wrap:wrap;gap:10px}
.appearance-choice {min-height:44px;flex:1 1 130px}
.appearance-choice[aria-pressed="true"] {background:var(--mint);color:var(--teal);border:2px solid var(--teal);font-weight:700}
.appearance-choice[aria-pressed="true"]::before {content:'✓ ';font-weight:700}
.appearance-control p:last-child {margin-bottom:0}
.appearance-choice:focus-visible {outline:3px solid var(--focus);outline-offset:3px}
:root[data-appearance="dark"] :is(button,input,select,textarea,a,summary):not(:where(.menu-explorer *, .personal-desktop *, .system-screen *, .sim-window *)):focus-visible {
  outline:3px solid var(--focus);outline-offset:3px;
}
:root[data-appearance="dark"] button:not(:where(.menu-explorer *, .personal-desktop *, .system-screen *, .sim-window *)) {
  background:var(--control);color:var(--ink);border-color:var(--line);
}
:root[data-appearance="dark"] button:not(:where(.menu-explorer *, .personal-desktop *, .system-screen *, .sim-window *)):hover {
  background:var(--active);border-color:var(--teal);
}
:root[data-appearance="dark"] .brand span {
  background:var(--teal);color:var(--on-primary);border-color:var(--teal);
}
/* Softer button fills stay independent of the bright speaking-text accent. */
:root[data-appearance="dark"] button.primary:not(:where(.menu-explorer *, .personal-desktop *, .system-screen *, .sim-window *)) {
  background:var(--primary-button-bg);color:var(--ink);border-color:var(--line);
}
:root[data-appearance="dark"] button.primary:not(:where(.menu-explorer *, .personal-desktop *, .system-screen *, .sim-window *)):not(:disabled):hover {
  background:var(--primary-button-hover);color:var(--ink);border-color:var(--line);
}
:root[data-appearance="dark"] button.primary:not(:where(.menu-explorer *, .personal-desktop *, .system-screen *, .sim-window *)):not(:disabled):active {
  background:var(--primary-button-pressed);color:var(--ink);border-color:var(--line);
}
:root[data-appearance="dark"] button.primary:not(:where(.menu-explorer *, .personal-desktop *, .system-screen *, .sim-window *)):disabled {
  background:var(--control);color:var(--muted);border-color:var(--line);opacity:1;cursor:not-allowed;
}
:root[data-appearance="dark"] .layout>aside {background:var(--sidebar)}
:root[data-appearance="dark"] .layout>aside>nav button {background:transparent}
:root[data-appearance="dark"] .layout>aside>nav button:hover,
:root[data-appearance="dark"] .layout>aside>nav button.active {background:var(--active);color:var(--teal)}
:root[data-appearance="dark"] :is(.steps,.row) .selected:not(:where(.menu-explorer *, .personal-desktop *, .system-screen *, .sim-window *)),
:root[data-appearance="dark"] .appearance-choice[aria-pressed="true"] {
  background:var(--mint);color:var(--teal);border-color:var(--teal);
}
:root[data-appearance="dark"] :is(.card,.ex-teaching,.ex-task-panel) {
  background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none;
}
:root[data-appearance="dark"] :is(.system-entry,.completion-card,.chunk,.feedback) {
  background:var(--mint);color:var(--ink);border-color:var(--line);
}
:root[data-appearance="dark"] :is(.system-entry p,.source-note,.source-details,.word-card .breakdown p,.ex-teaching .ex-note,.ex-teaching .ex-overview small,.ex-pronunciation-part small) {
  color:var(--muted);
}
:root[data-appearance="dark"] :is(.mnemonic,.word-card .mnemonic,.ex-teaching .ex-mnemonic,.scene-glossary strong,.scene-glossary small) {
  color:var(--warning-ink);
}
:root[data-appearance="dark"] :is(.mnemonic,.coach-panel,.notice,.feedback.warn,.ex-local-feedback,.reading),
:root[data-appearance="dark"] #notice:not(:empty) {
  background:var(--warning-bg);color:var(--warning-ink);border-color:var(--gold);
}

:root[data-appearance="dark"] .spoken-script {
  color:var(--ink)!important;background:var(--mint);
}
:root[data-appearance="dark"] .meter {background:var(--control)}
:root[data-appearance="dark"] a:not(:where(.menu-explorer *, .personal-desktop *, .system-screen *, .sim-window *)) {color:var(--teal)}
:root[data-appearance="dark"] a.brand {color:var(--ink)}
:root[data-appearance="dark"] :is(input,select,textarea):not(:where(.menu-explorer *, .personal-desktop *, .system-screen *, .sim-window *)) {
  background:var(--surface);color:var(--ink);border-color:var(--line);caret-color:var(--ink);color-scheme:dark;
}
:root[data-appearance="dark"] .search {-webkit-text-fill-color:var(--ink)}
:root[data-appearance="dark"] :is(input,textarea):not(:where(.menu-explorer *, .personal-desktop *, .system-screen *, .sim-window *))::placeholder {
  color:var(--muted);-webkit-text-fill-color:var(--muted);opacity:1;
}
:root[data-appearance="dark"] .search::selection {background:var(--teal);color:var(--on-primary);-webkit-text-fill-color:var(--on-primary)}
:root[data-appearance="dark"] input::file-selector-button {background:var(--control);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
:root[data-appearance="dark"] :is(.enrichment,.account-panel) [role="alert"] {color:#ffb9aa}
:root[data-appearance="dark"] .enrichment-segments>div {border-color:var(--line)}
@media(max-width:650px) {
  .appearance-options {gap:8px}
  .appearance-choice {flex-basis:100%;width:100%}
}
@media(forced-colors:active) {
  .appearance-choice[aria-pressed="true"] {outline:2px solid Highlight;outline-offset:2px}
  .appearance-choice:focus-visible {outline-color:Highlight}
}
/* Sentence-row state stays legible without changing simulator palettes. */
:root[data-appearance="dark"] :is(.word-card,.ex-word-panel) .teaching-row{color:var(--ink)}
:root[data-appearance="dark"] :is(.word-card,.ex-word-panel) .teaching-reference{color:var(--muted)}
:root[data-appearance="dark"] .teaching-row.audio-current .teaching-row-text,
:root[data-appearance="dark"] .teaching-reference.audio-current .teaching-row-text{color:var(--speaking-ink)}
@media(forced-colors:active){.audio-current .teaching-row-text{color:CanvasText!important}}