.theme-button {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  padding: 10px; border-radius: 50%; color: var(--ink);
}
.theme-button svg { width: 22px; height: 22px; }
.theme-button:hover { background: var(--sage-pale); }
.theme-dialog {
  --theme-dialog-surface: var(--paper-light);
  width: min(420px, calc(100% - 32px)); padding: 26px; border-radius: 14px;
  background: var(--theme-dialog-surface); max-height: calc(100dvh - 48px);
}
.theme-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-dialog-heading h2 { font: 500 22px/1.5 var(--sans); margin: 0; }
.theme-dialog-close { display: grid; place-items: center; width: 44px; height: 44px; font-size: 26px; border-radius: 50%; }
.theme-choices { display: grid; gap: 10px; margin-top: 18px; }
.theme-choice {
  display: flex; align-items: center; width: 100%; min-height: 72px; gap: 14px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; text-align: left;
}
.theme-choice[aria-pressed="true"] { border-color: var(--sage); background: var(--sage-pale); }
.theme-swatch { width: 36px; height: 42px; border: 1px solid #8885; border-radius: 6px; flex-shrink: 0; }
.theme-swatch-paper { background: #f4efdc; }
.theme-swatch-light { background: #fff; }
.theme-swatch-dark { background: #171717; }
.theme-choice-label { font-size: 15px; }
.theme-selected { margin-left: auto; font-size: 17px; visibility: hidden; }
.theme-choice[aria-pressed="true"] .theme-selected { visibility: visible; }
.theme-dialog-status { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 16px 0 0; }

:root[data-theme="light"] {
  color-scheme: light;
  --paper: #fafafa; --paper-light: #ffffff; --ink: #252525; --muted: #727272;
  --sage: #383838; --sage-pale: #eeeeee; --red: #555555; --line: #e4e4e4;
  --theme-surface: #ffffff; --theme-soft: #f2f2f2; --theme-input: #f5f5f5;
  --theme-inverse: #ffffff; --theme-accent: #252525; --theme-backdrop: #0005;
  --theme-wash: #f8f8f8; --theme-detail: #626262;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111111; --paper-light: #191919; --ink: #eeeeee; --muted: #aaaaaa;
  --sage: #dddddd; --sage-pale: #303030; --red: #c3c3c3; --line: #383838;
  --theme-surface: #1b1b1b; --theme-soft: #272727; --theme-input: #242424;
  --theme-inverse: #151515; --theme-accent: #e7e7e7; --theme-backdrop: #0009;
  --theme-wash: #1d1d1d; --theme-detail: #b8b8b8;
}
:root:is([data-theme="light"], [data-theme="dark"]) body {
  background: var(--paper); background-image: none; color: var(--ink);
}
:root:is([data-theme="light"], [data-theme="dark"]) :is(.topbar, .breadcrumb, .tabs, .catalog-controls) {
  background: var(--paper); border-color: var(--line); box-shadow: none;
}
:root:is([data-theme="light"], [data-theme="dark"]) :is(.reading-sheet, .practice-sheet, .note-paper, .catalog-item, dialog, .catalog-filter-options, .notebook) {
  background: var(--theme-surface); border-color: var(--line); color: var(--ink); box-shadow: none;
}
:root:is([data-theme="light"], [data-theme="dark"]) :is(.catalog-cover, .cover, .cover-sprite, .vignette-art) {
  mix-blend-mode: normal;
}
:root:is([data-theme="light"], [data-theme="dark"]) :is(.catalog-cover, .scene-art) { background: var(--theme-soft); border-color: var(--line); }
:root:is([data-theme="light"], [data-theme="dark"]) .cover { background: var(--theme-soft) !important; }
:root:is([data-theme="light"], [data-theme="dark"]) :is(.sentence-vignette, .sentence-vignette:nth-child(even)) {
  --pencil: var(--theme-detail); --wash: var(--theme-wash);
  background: var(--theme-surface); border-color: var(--line); box-shadow: none; border-radius: 10px;
}
:root:is([data-theme="light"], [data-theme="dark"]) .sentence-vignette::after,
:root:is([data-theme="light"], [data-theme="dark"]) .lesson-heading h1::after,
:root:is([data-theme="light"], [data-theme="dark"]) .scene-keyword::after,
:root:is([data-theme="light"], [data-theme="dark"]) .notebook::before { display: none; }
:root:is([data-theme="light"], [data-theme="dark"]) :is(.vignette-verse, .catalog-copy h3, .lesson-heading h1, h1, h2, h3, .recite-paper #reciteLine, .note-paper label) {
  color: var(--ink); text-shadow: none;
}
:root:is([data-theme="light"], [data-theme="dark"]) :is(.collection-heading h1, .catalog-copy h3) { font-family: var(--sans); }
:root:is([data-theme="light"], [data-theme="dark"]) :is(.brand small, .side-sub, .side-bottom, .side-bottom .storage-note, .choice-context, .outline-heading, .outline-heading h2, .outline-heading > span, .outline-number, .reading-context small, .author, .chapter-mark, .scene-total, .manuscript-intro p, .manuscript-end p, .lesson-bottom > span, .source-details, footer, .read-gloss, .note-prompts > p, .note-save-row, .practice-help, .recite-paper > span, .recite-image > span, .check-row > span, .practice-progress p, .library-intro, .collection-mark small, .catalog-meta, .catalog-author, .recitation-scope, .catalog-results-heading > span, .catalog-version-notice, .catalog-empty, .contents-hint, dialog p, .theme-dialog-status) { color: var(--muted); }
:root:is([data-theme="light"], [data-theme="dark"]) :is(.scene-keyword, .handwriting, .manuscript-end .handwriting, .arc-label, .emotion-arc > div, .reading-outline button, .read-meaning, .vignette-gloss p, .vignette-gloss .gloss-word, .vignette-gloss .gloss-emotion, .gloss-word strong, .read-sentence.active button, .text-action, .quiet-button, .breadcrumb #backLibrary, .contents-button, .eyebrow, .small-stamp, .all-lessons, .memory-path > div, .path-label, .prompt-box, .practice-status, .sentence-scope, .reader-progress, .filter-label, .search-field > span) { color: var(--theme-detail); }
:root:is([data-theme="light"], [data-theme="dark"]) :is(.reading-note, .emotion-arc, .lesson-scope, .vignette-gloss, .recite-paper, .type-controls, .search-field, .catalog-filter-menu > summary, .cue-modes button, .note-tags button) {
  background: var(--theme-soft); border-color: var(--line); color: var(--theme-detail);
}
:root:is([data-theme="light"], [data-theme="dark"]) :is(input, textarea, select, #answerInput, .filter-label select) {
  color: var(--ink); border-color: var(--line); background-color: var(--theme-input);
}
:root:is([data-theme="light"], [data-theme="dark"]) :is(.search-field input, .note-paper textarea) { background-color: transparent; }
:root:is([data-theme="light"], [data-theme="dark"]) .note-paper textarea {
  background-image: repeating-linear-gradient(transparent 0, transparent 31px, var(--line) 31px, var(--line) 32px);
}
:root:is([data-theme="light"], [data-theme="dark"]) ::placeholder { color: var(--muted); opacity: .85; }
:root:is([data-theme="light"], [data-theme="dark"]) :is(.search-field, .type-controls, .reading-toolbar, .read-sentence, .level-buttons, .level-buttons button, .note-tags button, .memory-path, .sidebar, .about-button, .small-stamp) { border-color: var(--line); box-shadow: none; }
:root:is([data-theme="light"], [data-theme="dark"]) :is(.lesson-choice.active, .reading-outline .is-current, .reading-outline button:hover, .book-filters button.active, .tabs button[aria-selected="true"], .cue-modes button[aria-pressed="true"], .catalog-filter-menu[open] > summary, .vignette-tools button:first-child, .vignette-tools button[aria-pressed="true"], .theme-choice[aria-pressed="true"]) {
  background: var(--theme-soft); color: var(--ink); border-color: var(--theme-detail);
}
:root:is([data-theme="light"], [data-theme="dark"]) :is(.book-filters button, .vignette-tools button) {
  color: var(--theme-detail); background: transparent; border-color: var(--line);
}
:root:is([data-theme="light"], [data-theme="dark"]) .vignette-tools button:first-child { background: var(--theme-soft); color: var(--ink); }
:root:is([data-theme="light"], [data-theme="dark"]) :is(.primary-button, .primary-button:hover, .level-buttons button.active, .enter-lesson, .enter-lesson:hover) {
  background: var(--theme-accent); color: var(--theme-inverse) !important; border-color: var(--theme-accent);
}
:root:is([data-theme="light"], [data-theme="dark"]) .level-buttons button.active b { color: var(--theme-inverse); }
:root:is([data-theme="light"], [data-theme="dark"]) .level-buttons b { color: var(--muted); }
:root:is([data-theme="light"], [data-theme="dark"]) :is(.availability, .availability.is-ready, .answer-result.success, .answer-result.error) {
  color: var(--ink); background: var(--theme-soft); border: 1px solid var(--line);
}
:root:is([data-theme="light"], [data-theme="dark"]) .answer-result mark { background: var(--theme-accent); color: var(--theme-inverse); }
:root:is([data-theme="light"], [data-theme="dark"]) .progress-track { background: var(--theme-soft); }
:root:is([data-theme="light"], [data-theme="dark"]) .progress-track > div { background: var(--theme-accent); }
:root:is([data-theme="light"], [data-theme="dark"]) .panel-number {
  color: var(--theme-inverse); background: var(--theme-accent); transform: none; box-shadow: none;
}
:root:is([data-theme="light"], [data-theme="dark"]) .seal {
  color: var(--theme-inverse); background: var(--theme-accent); box-shadow: none; transform: none;
}
:root:is([data-theme="light"], [data-theme="dark"]) .collection-mark > span { color: var(--theme-detail); border-color: var(--line); box-shadow: none; transform: none; }
:root:is([data-theme="light"], [data-theme="dark"]) .note-dot { background: var(--theme-detail); }
:root:is([data-theme="light"], [data-theme="dark"]) dialog::backdrop { background: var(--theme-backdrop); }
:root:is([data-theme="light"], [data-theme="dark"]) .theme-dialog { --theme-dialog-surface: var(--theme-surface); }
@media (max-width: 699px) {
  .topbar nav { gap: 4px; }
  :root:is([data-theme="light"], [data-theme="dark"]) .library-view .book-filters button { background: transparent; border-color: transparent; }
  :root:is([data-theme="light"], [data-theme="dark"]) .library-view .book-filters button.active { color: var(--ink); border-bottom-color: var(--theme-accent); }
  :root:is([data-theme="light"], [data-theme="dark"]) .catalog-grid .enter-lesson,
  :root:is([data-theme="light"], [data-theme="dark"]) .catalog-grid .enter-lesson:hover {
    color: transparent !important; background: transparent !important; border: 0;
  }
}