/* Generated by scripts/build-theme.py; edit scripts/theme/*.css. */
/* Original page palettes remain authoritative in light mode. These semantic
   defaults style the new control only; dark aliases are scoped below. */
:root {
  color-scheme: light;
  --theme-bg: #f4efe6;
  --theme-surface: #fffdf8;
  --theme-raised: #fbf8f2;
  --theme-text: #20332e;
  --theme-muted: #53645c;
  --theme-border: #d4d7cf;
  --theme-control-border: #737f76;
  --theme-hover: #e5ebe3;
  --theme-selected: #d5e3d9;
  --theme-green: #496759;
  --theme-green-soft: #e8eee5;
  --theme-red: #984632;
  --theme-red-soft: #f2e1da;
  --theme-gold: #896823;
  --theme-link: #496759;
  --theme-focus: #984632;
  --theme-overlay: rgba(23, 39, 35, .52);
  --theme-shadow: 0 14px 40px rgba(56, 48, 37, .16);
  --theme-on-accent: #fff;
}

.theme-toggle {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--theme-control-border);
  border-radius: 50%;
  color: var(--theme-text);
  background: var(--theme-raised);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.reading-controls .theme-toggle {
  align-self: center;
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  border: 0;
  background: transparent;
}
.theme-toggle:hover { background: var(--theme-hover); }
.reading-controls .theme-toggle:hover { background: rgba(32, 51, 46, 0.07); }
.theme-toggle:active,
.reading-controls .theme-toggle:active { background: var(--theme-selected); }
.theme-toggle:focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 3px;
}
.theme-toggle__icon { display: block; width: 20px; height: 20px; }
.theme-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.theme-dock {
  position: fixed;
  z-index: 10;
  right: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
  display: flex;
  width: auto;
  margin: 0;
  padding: 0;
}
.theme-dock .theme-toggle { box-shadow: var(--theme-shadow); }
/* Keep last cards clear of the floating control without shrinking
   category-index pages that already reserve a deep footer. */
body:has(.theme-dock) main {
  padding-bottom: max(clamp(5rem, 9vw, 8rem), calc(5.5rem + env(safe-area-inset-bottom, 0px)));
}
.js .reading-controls--with-theme,
.lesson-controls--with-theme {
  align-items: center;
  max-width: calc(100% - 2rem);
  flex-wrap: wrap;
}
@media (max-width: 31rem) {
  .js .reading-controls--with-theme,
  .lesson-controls--with-theme {
    max-width: none;
    gap: .35rem;
  }
  /* The toolbar can wrap when labels are enlarged or the viewport is narrow.
     Its measured height keeps the final lesson lines and audio notices clear. */
  body:has(.study-controls--fixed) main {
    padding-bottom: max(10rem, calc(var(--study-controls-height, 7rem) + 3rem + env(safe-area-inset-bottom, 0px)));
  }
  .audio-status {
    bottom: calc(var(--study-controls-height, 7rem) + 2rem + env(safe-area-inset-bottom, 0px));
  }
  /* On phones the floating reading controls become a full-width bar docked to
     the bottom edge. The specificity outranks each page's own mobile rule;
     the in-flow station toolbar keeps its place beside the theme switch. */
  :root :is(.js .reading-controls, .first-visit-page .reading-controls,
            .yukata-reading-controls):not(.toolbar) {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding-right: max(.75rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(.55rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(.75rem, env(safe-area-inset-left, 0px));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
  }
}
/* On phones, content cards run edge to edge, past the page gutter, so no
   strip of page shows beside them. Text inside a card keeps its padding;
   headings, links and notes between cards keep the gutter. Cards in one
   list, and a reading's header and the content right under it, close up
   into one column divided by hairlines. The :root prefix outranks each
   page's own card shape. */
@media (max-width: 40rem) {
  :root .page-shell :is(
    .reading-header, .rules-section .rule-card, .grammar-card,
    .reading-section .passage-card, .picture-figure, .story-body .scene,
    .story-related__link, .kanji-practice, .kanji-section, .playlist,
    .lesson-header, .phrase-section .phrase, .visit-header, .journey-stage .step,
    .intro-card, :is(.layout, .lesson-column) > .panel, .audio-lessons__panel,
    .essential-phrases, .destination-card__map, .destination-link
  ) {
    margin-inline: calc(-1 * var(--page-gutter));
    border-right-width: 0;
    border-left-width: 0;
    border-radius: 0;
  }
  /* Speaker and pattern stripes stay, along the left edge of the screen. */
  :root .page-shell :is(.dialogue-section .dialogue-line, .patterns) {
    margin-inline: calc(-1 * var(--page-gutter));
    border-right-width: 0;
    border-radius: 0;
  }
  :root .page-shell .audio-lessons__intro { border-radius: 0; }
  /* The station title card's accent bar no longer has side borders to cover. */
  :root .page-shell .intro-card::before {
    inset-inline: 0;
    border-radius: 0;
  }
  /* The photo gallery bleeds as a whole, so its two-column rows still fit. */
  :root .page-shell .place-gallery {
    margin-inline: calc(-1 * var(--page-gutter));
    gap: 0 1px;
  }
  :root .page-shell .place-gallery__item {
    border-right-width: 0;
    border-left-width: 0;
    border-radius: 0;
  }
  :root .page-shell :is(.reading-header, .place-gallery, .picture-figure)
    + :is(.rules-section, .reading-section, .dialogue-section, .place-gallery, .picture-figure) {
    margin-top: -1px;
  }
  :root .page-shell .visit-header { margin-bottom: -1px; }
  :root .page-shell :is(.rules-section .rules-list, .reading-section .reading-list,
                        .dialogue-list, .story-body, .story-related__grid,
                        .phrase-section .phrase-list, .journey-stage .steps) {
    gap: 0;
  }
  :root .page-shell :is(.rules-section .rules-list, .reading-section .reading-list,
                        .dialogue-list, .story-body, .story-related__grid,
                        .phrase-section .phrase-list, .journey-stage .steps,
                        .place-gallery) > * + * {
    margin-top: -1px;
  }
  :root .page-shell :is(.rules-section .rule-card, .reading-section .passage-card,
                        .dialogue-line, .phrase-section .phrase) .translation {
    border-top: 0;
  }
  /* Keep the Practice button beside its invitation on 390px-wide phones. */
  :root .page-shell .grammar-practice-launch p { flex-basis: 12rem; }
}
@media (pointer: coarse) {
  .reading-controls .theme-toggle {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
  .reading-controls--with-theme :is(.control-button, .theme-toggle),
  .lesson-controls--with-theme :is(.audio-speed, .content-toggle) {
    min-height: 44px;
  }
}
/* Keyboard focus is transient: it does not alter the resting light design. */
:root :is(a, button, summary, select, [tabindex]):focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 3px;
}
.step-heading :is(a, button):focus-visible { outline-color: white; }
/* No theme transition: changing palettes never animates text or images. */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}

@media screen {
  :root[data-theme="dark"] {
    /* Nested under the dark root by build-theme.py. No light layout rules here. */
    color-scheme: dark;
    --theme-bg: #121614;
    --theme-surface: #181d1a;
    --theme-raised: #1f2522;
    --theme-text: #e2e0d8;
    --theme-muted: #b6bfb8;
    --theme-border: #4b5b51;
    --theme-control-border: #8f9f94;
    --theme-green: #a9c9b5;
    --theme-green-soft: #15221d;
    --theme-red: #f0ae9c;
    --theme-red-soft: #2a1c1a;
    --theme-gold: #e3c077;
    --theme-hover: #2a3531;
    --theme-selected: #33433c;
    --theme-link: #b9d9c5;
    --theme-focus: #e3c077;
    --theme-overlay: rgba(4, 6, 5, .82);
    --theme-shadow: 0 14px 40px rgba(0, 0, 0, .45);
    --theme-on-accent: #121614;
    --theme-card-rgb: 24, 29, 26;
    --theme-white-card-rgb: 24, 29, 26;
    --paper: var(--theme-bg);
    --paper-light: var(--theme-raised);
    --card: var(--theme-surface);
    --ink: var(--theme-text);
    --ink-soft: var(--theme-muted);
    --line: color-mix(in srgb, var(--ink) 14%, transparent);
    --dialogue-texture: none;
    --accent: var(--theme-green);
    --accent-deep: var(--theme-green);
    --staff: var(--theme-green);
    --water: var(--theme-green);
    --water-deep: var(--theme-green);
    --steam: var(--theme-green-soft);
    --sulfur: var(--theme-gold);
    --vermilion: var(--theme-red);
    --vermilion-deep: var(--theme-red);
    --focus: var(--theme-focus);
    --shadow: 0 6px 20px rgba(0, 0, 0, .16);
    --shadow-soft: 0 4px 16px rgba(0, 0, 0, .14);
    --shadow-hover: 0 10px 28px rgba(0, 0, 0, .24);

    & { background: var(--theme-bg); }
    body {
      color: var(--theme-text);
      background:
        radial-gradient(circle at 7% 2%, rgba(187, 91, 69, .055), transparent 24rem),
        radial-gradient(circle at 96% 38%, rgba(100, 140, 115, .05), transparent 28rem),
        var(--theme-bg);
    }
    ::selection { color: var(--theme-text); background: #4c6557; }

    /* Homepage and category identity. Preserve warm red and sage card families. */
    .place-card { background: var(--theme-surface); }
    a.place-card:hover { border-color: var(--theme-control-border); }
    .place-card__media { background-color: var(--theme-raised); }
    a.place-card:hover .place-card__arrow { color: var(--theme-on-accent); }
    .article-card {
      background: radial-gradient(circle at 92% 11%, rgba(187, 91, 69, .13), transparent 10rem), var(--theme-surface);
    }
    .article-card--green,
    .article-card--manners {
      background: radial-gradient(circle at 92% 11%, rgba(110, 155, 127, .13), transparent 10rem), var(--theme-surface);
    }
    .article-card__glyph { color: rgba(240, 174, 156, .085); }
    .article-card--green .article-card__glyph,
    .article-card--manners .article-card__glyph { color: rgba(169, 201, 181, .085); }
    .article-card__glyph--dialogue { color: rgba(240, 174, 156, .085); }
    .article-card--manners::before { border-top-color: var(--theme-green); }
    .article-card--manners .article-card__english { color: var(--theme-green); }
    .article-card--manners .level-badge { color: var(--theme-on-accent); background: var(--theme-green); }
    .article-card--manners:hover .article-card__arrow { color: var(--theme-on-accent); background: var(--theme-green); }
    .article-card:hover { border-color: var(--theme-control-border); }
    .article-card:hover .article-card__arrow { color: var(--theme-on-accent); }
    .destination-card__map { background: #29405b; }
    .destinations__level,
    .destination-link__arrow { color: var(--theme-green); background: var(--theme-green-soft); }
    .destinations__level { border-color: var(--theme-border); }
    .destination-map__island { fill: #3d5748; stroke: #91af9b; }
    .destination-map__water-line { stroke: #637b6b; }
    .destination-map__marker-number { fill: var(--theme-on-accent); }
    .destination-map__marker-label { stroke: var(--theme-green-soft); }
    .destination-link__number { color: var(--theme-on-accent); }
    .destination-link:is(:hover, :focus-visible) .destination-link__arrow { color: var(--theme-on-accent); }
    .article-card__media,
    .destination-link__media { background-color: var(--theme-raised); }
    .reading-header__glyph,
    .visit-header__glyph { color: rgba(169, 201, 181, .085); }
    .reading-header,
    .visit-header { background-color: var(--theme-surface); }

    /* Dialogue portraits and photographic headers keep their original geometry.
       Their existing fade stops use --theme-card-rgb in the original styles. */
    .dialogue-line { --card: var(--theme-surface); }
    .dialogue-line::after {
      color: var(--theme-text);
      background: rgba(24, 29, 26, .92);
    }
    .dialogue-line .speaker { border-color: #9fa99d; }
    .dialogue-line .speaker__english { color: var(--theme-text); }
    .lesson-header,
    .phrase,
    .patterns { background-color: var(--theme-surface); }
    .phrase-audio { color: var(--theme-muted); }
    .phrase-audio:hover,
    .phrase-audio[aria-pressed="true"] { color: var(--theme-text); }
    .phrase-audio[aria-pressed="true"] { outline: 1px solid var(--theme-control-border); outline-offset: 2px; }
    .kanji-animation-toggle { color: var(--theme-muted); }
    .kanji-animation-toggle:hover { color: var(--theme-text); background: var(--theme-hover); }

    /* This second map is defined in the famous-onsen article's inline stylesheet. */
    .map-island { fill: #3d5748; }
    .map-water-line { stroke: #637b6b; }
    .map-marker__number { fill: var(--theme-on-accent); }
    .map-legend__number { color: var(--theme-on-accent); }
    .vocabulary-dialog__content { background-color: var(--theme-surface); }
    .vocabulary-table-wrap { scrollbar-color: var(--theme-control-border) var(--theme-surface); }
    .vocab-word { text-decoration-color: var(--theme-green); }
    .sign-character--otokoyu { color: #adcce8; }
    .sign-character--onnayu { color: var(--theme-red); }

    /* Dark-theme source fragment. The theme builder scopes these rules to the
       explicit dark preference and to the no-JavaScript system-theme fallback. */

    /* Shared reading and study controls. */
    .reading-controls,
    .lesson-controls {
      color: var(--theme-text);
      border-color: var(--theme-control-border);
      background: var(--theme-raised);
      box-shadow: var(--theme-shadow);
    }

    .reading-controls {
      background: color-mix(in srgb, var(--theme-raised) 72%, transparent);
    }

    :is(.control-button, .audio-speed, .content-toggle, .theme-toggle):hover:not(:disabled) {
      color: var(--theme-text);
      background: var(--theme-hover);
    }

    :is(.control-button, .audio-speed, .content-toggle):active:not(:disabled) {
      background: var(--theme-selected);
    }

    :is(.level-badge, .visit-header__badge, .control-button__state, .lesson-control__state) {
      color: var(--theme-on-accent);
    }

    .control-button[aria-pressed="false"] .control-button__state,
    .audio-speed[aria-pressed="false"] .lesson-control__state,
    .content-toggle[aria-expanded="false"] .lesson-control__state {
      color: var(--theme-muted);
      background: var(--theme-surface);
    }

    .audio-status {
      color: var(--theme-text);
      border-color: var(--theme-control-border);
      background: var(--theme-raised);
      box-shadow: var(--theme-shadow);
    }

    /* Keep the decorative glyphs subtle without affecting the image artwork. */
    .reading-header__glyph,
    .visit-header__glyph {
      color: color-mix(in srgb, var(--theme-green) 10%, transparent);
    }

    /* These SVGs already have their own .075 opacity. Do not apply a second
       translucent glyph color or the stroke-order animation would disappear. */
    .kanji-page :is(.yu-stroke-animation, .haku-stroke-animation, .tetsu-stroke-animation) {
      color: var(--theme-green);
    }

    .visit-header::before {
      border-top-color: var(--theme-green);
    }

    .step {
      border-color: var(--theme-border);
    }

    .sign-character--otokoyu {
      color: #9dc7ee;
    }

    .sign-character--onnayu {
      color: var(--theme-red);
    }

    /* Inline audio stays quiet; headings printed on artwork retain white icons. */
    .audio-button:not(.heading-audio) {
      color: var(--theme-text);
    }

    .audio-button:not(.heading-audio) svg {
      color: var(--theme-muted);
    }

    .audio-button:not(.heading-audio):is(:hover, [aria-pressed="true"]),
    .audio-button:not(.heading-audio):is(:hover, [aria-pressed="true"]) svg {
      color: var(--theme-green);
    }

    .audio-word.is-playing {
      color: var(--theme-text);
      background: var(--theme-selected);
      box-shadow: inset 0 -0.08em var(--theme-green);
    }

    .audio-word.is-playing rt {
      color: var(--theme-text);
    }

    /* Vocabulary tables, word highlighting, and dynamically created speakers. */
    .vocab-word {
      border-bottom-color: var(--theme-control-border);
    }

    .vocab-word:hover {
      color: var(--theme-green);
      background: var(--theme-hover);
    }

    .vocabulary-card {
      border-top-color: var(--theme-gold);
    }

    .vocabulary-section .vocabulary-card {
      border-color: color-mix(in srgb, var(--theme-gold) 24%, var(--theme-border));
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-gold) 9%, transparent), transparent 36%),
        var(--theme-surface);
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--theme-gold) 14%, transparent),
        var(--theme-shadow);
    }

    .vocabulary-header {
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--theme-gold) 8%, transparent), transparent 62%),
        var(--theme-surface);
    }

    .vocabulary-section .vocabulary-header {
      border-bottom-color: color-mix(in srgb, var(--theme-gold) 18%, var(--theme-border));
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--theme-gold) 16%, transparent), transparent 68%),
        transparent;
    }

    .vocabulary-kicker {
      color: var(--theme-gold);
    }

    .vocabulary-section .vocabulary-view-switcher {
      border-color: color-mix(in srgb, var(--theme-gold) 34%, transparent);
      background: color-mix(in srgb, var(--theme-gold) 10%, var(--theme-surface));
    }

    .vocabulary-section .vocabulary-view-button[aria-pressed="true"] {
      color: #16110a;
      background: var(--theme-gold);
    }

    .vocabulary-table thead th {
      color: var(--theme-muted);
      background: var(--theme-raised);
    }

    .vocabulary-section .vocabulary-table thead th {
      color: color-mix(in srgb, var(--theme-gold) 62%, var(--theme-muted));
      background: color-mix(in srgb, var(--theme-gold) 8%, var(--theme-raised));
    }

    .vocabulary-section .vocabulary-table th,
    .vocabulary-section .vocabulary-table td,
    .vocabulary-section .vocabulary-table tbody tr {
      border-bottom-color: color-mix(in srgb, var(--theme-gold) 14%, var(--theme-border));
    }

    .vocabulary-section .vocabulary-show-more {
      border-color: color-mix(in srgb, var(--theme-gold) 34%, transparent);
      background: color-mix(in srgb, var(--theme-gold) 10%, var(--theme-surface));
    }

    .vocabulary-section .vocabulary-list-more .vocabulary-show-more {
      background: color-mix(in srgb, var(--theme-gold) 8%, var(--theme-surface));
    }

    .vocabulary-section .vocabulary-picture-card {
      border-color: color-mix(in srgb, var(--theme-gold) 20%, var(--theme-border));
      background: color-mix(in srgb, var(--theme-gold) 5%, var(--theme-surface));
    }

    .vocabulary-section .vocabulary-picture-card__text {
      border-top-color: color-mix(in srgb, var(--theme-gold) 14%, var(--theme-border));
    }

    .vocabulary-section .vocabulary-practice-option {
      border-color: color-mix(in srgb, var(--theme-gold) 18%, var(--theme-border));
      background: color-mix(in srgb, var(--theme-gold) 4%, var(--theme-surface));
    }

    .vocabulary-section .vocabulary-practice-progress progress,
    .vocabulary-section .vocabulary-practice-progress progress::-webkit-progress-bar {
      background: color-mix(in srgb, var(--theme-gold) 14%, var(--theme-raised));
    }

    .vocabulary-table tbody tr:hover,
    .vocabulary-table [data-vocabulary-row]:is(:hover, :active, :has(:focus-visible)) {
      background: var(--theme-hover);
    }

    .vocabulary-section .vocabulary-table tbody tr:hover,
    .vocabulary-section .vocabulary-table [data-vocabulary-row]:is(:hover, :active, :has(:focus-visible)) {
      background: color-mix(in srgb, var(--theme-gold) 14%, var(--theme-surface));
    }

    .vocabulary-section .vocabulary-table tbody tr.is-just-revealed:hover,
    .vocabulary-section .vocabulary-table [data-vocabulary-row].is-just-revealed:is(:hover, :active, :focus-within) {
      background: transparent;
    }

    .vocabulary-table [data-vocabulary-row].is-playing {
      background: var(--theme-selected);
      box-shadow: inset 3px 0 var(--theme-green);
    }

    .vocabulary-section .vocabulary-table [data-vocabulary-row].is-playing {
      background: color-mix(in srgb, var(--theme-gold) 16%, var(--theme-surface));
      box-shadow: inset 3px 0 var(--theme-gold);
    }

    .vocabulary-speaker {
      color: var(--theme-muted);
      border-color: var(--theme-control-border);
      background: var(--theme-surface);
    }

    .vocabulary-section .vocabulary-speaker {
      color: var(--theme-gold);
      border-color: color-mix(in srgb, var(--theme-gold) 40%, transparent);
    }

    .vocabulary-speaker:hover,
    .vocabulary-speaker.is-playing {
      color: var(--theme-green);
      border-color: var(--theme-green);
      background: var(--theme-hover);
    }

    .vocabulary-section .vocabulary-speaker:hover,
    .vocabulary-section .vocabulary-speaker.is-playing {
      color: var(--theme-gold);
      border-color: var(--theme-gold);
    }

    .vocabulary-table .vocabulary-speaker {
      background: transparent;
    }

    .vocabulary-table [data-vocabulary-row].is-playing .vocabulary-speaker {
      color: var(--theme-text);
    }

    .vocabulary-section .vocabulary-table [data-vocabulary-row].is-playing .vocabulary-speaker {
      color: var(--theme-gold);
    }

    /* Both dialog types share the same elevation and backdrop treatment. */
    .vocabulary-dialog,
    .vocabulary-grid-dialog {
      color: var(--theme-text);
      border-color: var(--theme-control-border);
      background: var(--theme-raised);
      box-shadow: var(--theme-shadow);
    }

    .vocabulary-dialog::backdrop,
    .vocabulary-grid-dialog::backdrop {
      background: var(--theme-overlay);
    }

    .vocabulary-dialog__close,
    .vocabulary-grid-trigger,
    .vocabulary-grid-close {
      color: var(--theme-text);
      border-color: var(--theme-control-border);
      background: var(--theme-surface);
    }

    .vocabulary-dialog__close:hover,
    .vocabulary-grid-trigger:hover,
    .vocabulary-grid-close:hover {
      color: var(--theme-text);
      border-color: var(--theme-green);
      background: var(--theme-hover);
    }

    .vocabulary-section .vocabulary-grid-trigger:hover {
      border-color: var(--theme-gold);
    }

    .vocabulary-dialog__close:active,
    .vocabulary-grid-trigger:active,
    .vocabulary-grid-close:active {
      background: var(--theme-selected);
    }

    .vocabulary-grid-dialog__header {
      color: var(--theme-text);
      border-color: var(--theme-border);
      background: var(--theme-raised);
    }

    .vocabulary-picture-card,
    .vocabulary-picture-card__text {
      border-color: var(--theme-border);
    }

    .vocabulary-picture-card {
      background: var(--theme-surface);
    }

    /* The cream mats around vocabulary illustrations are intentional: the
       original artwork and its built-in white background remain untouched. */
    .vocabulary-dialog__image {
      border-color: var(--theme-control-border);
    }

    .word-tooltip {
      color: var(--theme-text);
      border-color: var(--theme-control-border);
      background: var(--theme-raised);
      box-shadow: var(--theme-shadow);
    }

    :is(.source-link, .back-link):hover,
    .place-gallery__caption a:hover {
      color: var(--theme-link);
    }

    .translation-word.is-tooltip-active:not(.is-playing) {
      color: var(--theme-text);
      background: var(--theme-selected);
      box-shadow: 0 0 0 0.06em var(--theme-selected);
    }

    /* Reading cards and story dialogue keep their existing color identities. */
    .rule-card {
      box-shadow: var(--theme-shadow);
    }

    .grammar-formula {
      border-color: var(--theme-border);
      background: var(--theme-green-soft);
    }

    .dialogue--staff,
    .ending {
      background: var(--theme-green-soft);
    }

    /* Explicit focus colors also cover elements injected after initial load. */
    :is(.back-link, .source-link, .control-button, .audio-speed, .content-toggle,
        .vocab-word, .vocabulary-dialog__close, .vocabulary-table-wrap,
        .vocabulary-grid-trigger, .vocabulary-grid-close, .vocabulary-speaker,
        .translation-word):focus-visible,
    .place-gallery a:focus-visible {
      outline-color: var(--theme-focus);
    }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
    /* Nested under the dark root by build-theme.py. No light layout rules here. */
    color-scheme: dark;
    --theme-bg: #121614;
    --theme-surface: #181d1a;
    --theme-raised: #1f2522;
    --theme-text: #e2e0d8;
    --theme-muted: #b6bfb8;
    --theme-border: #4b5b51;
    --theme-control-border: #8f9f94;
    --theme-green: #a9c9b5;
    --theme-green-soft: #15221d;
    --theme-red: #f0ae9c;
    --theme-red-soft: #2a1c1a;
    --theme-gold: #e3c077;
    --theme-hover: #2a3531;
    --theme-selected: #33433c;
    --theme-link: #b9d9c5;
    --theme-focus: #e3c077;
    --theme-overlay: rgba(4, 6, 5, .82);
    --theme-shadow: 0 14px 40px rgba(0, 0, 0, .45);
    --theme-on-accent: #121614;
    --theme-card-rgb: 24, 29, 26;
    --theme-white-card-rgb: 24, 29, 26;
    --paper: var(--theme-bg);
    --paper-light: var(--theme-raised);
    --card: var(--theme-surface);
    --ink: var(--theme-text);
    --ink-soft: var(--theme-muted);
    --line: color-mix(in srgb, var(--ink) 14%, transparent);
    --dialogue-texture: none;
    --accent: var(--theme-green);
    --accent-deep: var(--theme-green);
    --staff: var(--theme-green);
    --water: var(--theme-green);
    --water-deep: var(--theme-green);
    --steam: var(--theme-green-soft);
    --sulfur: var(--theme-gold);
    --vermilion: var(--theme-red);
    --vermilion-deep: var(--theme-red);
    --focus: var(--theme-focus);
    --shadow: 0 6px 20px rgba(0, 0, 0, .16);
    --shadow-soft: 0 4px 16px rgba(0, 0, 0, .14);
    --shadow-hover: 0 10px 28px rgba(0, 0, 0, .24);

    & { background: var(--theme-bg); }
    body {
      color: var(--theme-text);
      background:
        radial-gradient(circle at 7% 2%, rgba(187, 91, 69, .055), transparent 24rem),
        radial-gradient(circle at 96% 38%, rgba(100, 140, 115, .05), transparent 28rem),
        var(--theme-bg);
    }
    ::selection { color: var(--theme-text); background: #4c6557; }

    /* Homepage and category identity. Preserve warm red and sage card families. */
    .place-card { background: var(--theme-surface); }
    a.place-card:hover { border-color: var(--theme-control-border); }
    .place-card__media { background-color: var(--theme-raised); }
    a.place-card:hover .place-card__arrow { color: var(--theme-on-accent); }
    .article-card {
      background: radial-gradient(circle at 92% 11%, rgba(187, 91, 69, .13), transparent 10rem), var(--theme-surface);
    }
    .article-card--green,
    .article-card--manners {
      background: radial-gradient(circle at 92% 11%, rgba(110, 155, 127, .13), transparent 10rem), var(--theme-surface);
    }
    .article-card__glyph { color: rgba(240, 174, 156, .085); }
    .article-card--green .article-card__glyph,
    .article-card--manners .article-card__glyph { color: rgba(169, 201, 181, .085); }
    .article-card__glyph--dialogue { color: rgba(240, 174, 156, .085); }
    .article-card--manners::before { border-top-color: var(--theme-green); }
    .article-card--manners .article-card__english { color: var(--theme-green); }
    .article-card--manners .level-badge { color: var(--theme-on-accent); background: var(--theme-green); }
    .article-card--manners:hover .article-card__arrow { color: var(--theme-on-accent); background: var(--theme-green); }
    .article-card:hover { border-color: var(--theme-control-border); }
    .article-card:hover .article-card__arrow { color: var(--theme-on-accent); }
    .destination-card__map { background: #29405b; }
    .destinations__level,
    .destination-link__arrow { color: var(--theme-green); background: var(--theme-green-soft); }
    .destinations__level { border-color: var(--theme-border); }
    .destination-map__island { fill: #3d5748; stroke: #91af9b; }
    .destination-map__water-line { stroke: #637b6b; }
    .destination-map__marker-number { fill: var(--theme-on-accent); }
    .destination-map__marker-label { stroke: var(--theme-green-soft); }
    .destination-link__number { color: var(--theme-on-accent); }
    .destination-link:is(:hover, :focus-visible) .destination-link__arrow { color: var(--theme-on-accent); }
    .article-card__media,
    .destination-link__media { background-color: var(--theme-raised); }
    .reading-header__glyph,
    .visit-header__glyph { color: rgba(169, 201, 181, .085); }
    .reading-header,
    .visit-header { background-color: var(--theme-surface); }

    /* Dialogue portraits and photographic headers keep their original geometry.
       Their existing fade stops use --theme-card-rgb in the original styles. */
    .dialogue-line { --card: var(--theme-surface); }
    .dialogue-line::after {
      color: var(--theme-text);
      background: rgba(24, 29, 26, .92);
    }
    .dialogue-line .speaker { border-color: #9fa99d; }
    .dialogue-line .speaker__english { color: var(--theme-text); }
    .lesson-header,
    .phrase,
    .patterns { background-color: var(--theme-surface); }
    .phrase-audio { color: var(--theme-muted); }
    .phrase-audio:hover,
    .phrase-audio[aria-pressed="true"] { color: var(--theme-text); }
    .phrase-audio[aria-pressed="true"] { outline: 1px solid var(--theme-control-border); outline-offset: 2px; }
    .kanji-animation-toggle { color: var(--theme-muted); }
    .kanji-animation-toggle:hover { color: var(--theme-text); background: var(--theme-hover); }

    /* This second map is defined in the famous-onsen article's inline stylesheet. */
    .map-island { fill: #3d5748; }
    .map-water-line { stroke: #637b6b; }
    .map-marker__number { fill: var(--theme-on-accent); }
    .map-legend__number { color: var(--theme-on-accent); }
    .vocabulary-dialog__content { background-color: var(--theme-surface); }
    .vocabulary-table-wrap { scrollbar-color: var(--theme-control-border) var(--theme-surface); }
    .vocab-word { text-decoration-color: var(--theme-green); }
    .sign-character--otokoyu { color: #adcce8; }
    .sign-character--onnayu { color: var(--theme-red); }

    /* Dark-theme source fragment. The theme builder scopes these rules to the
       explicit dark preference and to the no-JavaScript system-theme fallback. */

    /* Shared reading and study controls. */
    .reading-controls,
    .lesson-controls {
      color: var(--theme-text);
      border-color: var(--theme-control-border);
      background: var(--theme-raised);
      box-shadow: var(--theme-shadow);
    }

    .reading-controls {
      background: color-mix(in srgb, var(--theme-raised) 72%, transparent);
    }

    :is(.control-button, .audio-speed, .content-toggle, .theme-toggle):hover:not(:disabled) {
      color: var(--theme-text);
      background: var(--theme-hover);
    }

    :is(.control-button, .audio-speed, .content-toggle):active:not(:disabled) {
      background: var(--theme-selected);
    }

    :is(.level-badge, .visit-header__badge, .control-button__state, .lesson-control__state) {
      color: var(--theme-on-accent);
    }

    .control-button[aria-pressed="false"] .control-button__state,
    .audio-speed[aria-pressed="false"] .lesson-control__state,
    .content-toggle[aria-expanded="false"] .lesson-control__state {
      color: var(--theme-muted);
      background: var(--theme-surface);
    }

    .audio-status {
      color: var(--theme-text);
      border-color: var(--theme-control-border);
      background: var(--theme-raised);
      box-shadow: var(--theme-shadow);
    }

    /* Keep the decorative glyphs subtle without affecting the image artwork. */
    .reading-header__glyph,
    .visit-header__glyph {
      color: color-mix(in srgb, var(--theme-green) 10%, transparent);
    }

    /* These SVGs already have their own .075 opacity. Do not apply a second
       translucent glyph color or the stroke-order animation would disappear. */
    .kanji-page :is(.yu-stroke-animation, .haku-stroke-animation, .tetsu-stroke-animation) {
      color: var(--theme-green);
    }

    .visit-header::before {
      border-top-color: var(--theme-green);
    }

    .step {
      border-color: var(--theme-border);
    }

    .sign-character--otokoyu {
      color: #9dc7ee;
    }

    .sign-character--onnayu {
      color: var(--theme-red);
    }

    /* Inline audio stays quiet; headings printed on artwork retain white icons. */
    .audio-button:not(.heading-audio) {
      color: var(--theme-text);
    }

    .audio-button:not(.heading-audio) svg {
      color: var(--theme-muted);
    }

    .audio-button:not(.heading-audio):is(:hover, [aria-pressed="true"]),
    .audio-button:not(.heading-audio):is(:hover, [aria-pressed="true"]) svg {
      color: var(--theme-green);
    }

    .audio-word.is-playing {
      color: var(--theme-text);
      background: var(--theme-selected);
      box-shadow: inset 0 -0.08em var(--theme-green);
    }

    .audio-word.is-playing rt {
      color: var(--theme-text);
    }

    /* Vocabulary tables, word highlighting, and dynamically created speakers. */
    .vocab-word {
      border-bottom-color: var(--theme-control-border);
    }

    .vocab-word:hover {
      color: var(--theme-green);
      background: var(--theme-hover);
    }

    .vocabulary-card {
      border-top-color: var(--theme-gold);
    }

    .vocabulary-section .vocabulary-card {
      border-color: color-mix(in srgb, var(--theme-gold) 24%, var(--theme-border));
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-gold) 9%, transparent), transparent 36%),
        var(--theme-surface);
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--theme-gold) 14%, transparent),
        var(--theme-shadow);
    }

    .vocabulary-header {
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--theme-gold) 8%, transparent), transparent 62%),
        var(--theme-surface);
    }

    .vocabulary-section .vocabulary-header {
      border-bottom-color: color-mix(in srgb, var(--theme-gold) 18%, var(--theme-border));
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--theme-gold) 16%, transparent), transparent 68%),
        transparent;
    }

    .vocabulary-kicker {
      color: var(--theme-gold);
    }

    .vocabulary-section .vocabulary-view-switcher {
      border-color: color-mix(in srgb, var(--theme-gold) 34%, transparent);
      background: color-mix(in srgb, var(--theme-gold) 10%, var(--theme-surface));
    }

    .vocabulary-section .vocabulary-view-button[aria-pressed="true"] {
      color: #16110a;
      background: var(--theme-gold);
    }

    .vocabulary-table thead th {
      color: var(--theme-muted);
      background: var(--theme-raised);
    }

    .vocabulary-section .vocabulary-table thead th {
      color: color-mix(in srgb, var(--theme-gold) 62%, var(--theme-muted));
      background: color-mix(in srgb, var(--theme-gold) 8%, var(--theme-raised));
    }

    .vocabulary-section .vocabulary-table th,
    .vocabulary-section .vocabulary-table td,
    .vocabulary-section .vocabulary-table tbody tr {
      border-bottom-color: color-mix(in srgb, var(--theme-gold) 14%, var(--theme-border));
    }

    .vocabulary-section .vocabulary-show-more {
      border-color: color-mix(in srgb, var(--theme-gold) 34%, transparent);
      background: color-mix(in srgb, var(--theme-gold) 10%, var(--theme-surface));
    }

    .vocabulary-section .vocabulary-list-more .vocabulary-show-more {
      background: color-mix(in srgb, var(--theme-gold) 8%, var(--theme-surface));
    }

    .vocabulary-section .vocabulary-picture-card {
      border-color: color-mix(in srgb, var(--theme-gold) 20%, var(--theme-border));
      background: color-mix(in srgb, var(--theme-gold) 5%, var(--theme-surface));
    }

    .vocabulary-section .vocabulary-picture-card__text {
      border-top-color: color-mix(in srgb, var(--theme-gold) 14%, var(--theme-border));
    }

    .vocabulary-section .vocabulary-practice-option {
      border-color: color-mix(in srgb, var(--theme-gold) 18%, var(--theme-border));
      background: color-mix(in srgb, var(--theme-gold) 4%, var(--theme-surface));
    }

    .vocabulary-section .vocabulary-practice-progress progress,
    .vocabulary-section .vocabulary-practice-progress progress::-webkit-progress-bar {
      background: color-mix(in srgb, var(--theme-gold) 14%, var(--theme-raised));
    }

    .vocabulary-table tbody tr:hover,
    .vocabulary-table [data-vocabulary-row]:is(:hover, :active, :has(:focus-visible)) {
      background: var(--theme-hover);
    }

    .vocabulary-section .vocabulary-table tbody tr:hover,
    .vocabulary-section .vocabulary-table [data-vocabulary-row]:is(:hover, :active, :has(:focus-visible)) {
      background: color-mix(in srgb, var(--theme-gold) 14%, var(--theme-surface));
    }

    .vocabulary-section .vocabulary-table tbody tr.is-just-revealed:hover,
    .vocabulary-section .vocabulary-table [data-vocabulary-row].is-just-revealed:is(:hover, :active, :focus-within) {
      background: transparent;
    }

    .vocabulary-table [data-vocabulary-row].is-playing {
      background: var(--theme-selected);
      box-shadow: inset 3px 0 var(--theme-green);
    }

    .vocabulary-section .vocabulary-table [data-vocabulary-row].is-playing {
      background: color-mix(in srgb, var(--theme-gold) 16%, var(--theme-surface));
      box-shadow: inset 3px 0 var(--theme-gold);
    }

    .vocabulary-speaker {
      color: var(--theme-muted);
      border-color: var(--theme-control-border);
      background: var(--theme-surface);
    }

    .vocabulary-section .vocabulary-speaker {
      color: var(--theme-gold);
      border-color: color-mix(in srgb, var(--theme-gold) 40%, transparent);
    }

    .vocabulary-speaker:hover,
    .vocabulary-speaker.is-playing {
      color: var(--theme-green);
      border-color: var(--theme-green);
      background: var(--theme-hover);
    }

    .vocabulary-section .vocabulary-speaker:hover,
    .vocabulary-section .vocabulary-speaker.is-playing {
      color: var(--theme-gold);
      border-color: var(--theme-gold);
    }

    .vocabulary-table .vocabulary-speaker {
      background: transparent;
    }

    .vocabulary-table [data-vocabulary-row].is-playing .vocabulary-speaker {
      color: var(--theme-text);
    }

    .vocabulary-section .vocabulary-table [data-vocabulary-row].is-playing .vocabulary-speaker {
      color: var(--theme-gold);
    }

    /* Both dialog types share the same elevation and backdrop treatment. */
    .vocabulary-dialog,
    .vocabulary-grid-dialog {
      color: var(--theme-text);
      border-color: var(--theme-control-border);
      background: var(--theme-raised);
      box-shadow: var(--theme-shadow);
    }

    .vocabulary-dialog::backdrop,
    .vocabulary-grid-dialog::backdrop {
      background: var(--theme-overlay);
    }

    .vocabulary-dialog__close,
    .vocabulary-grid-trigger,
    .vocabulary-grid-close {
      color: var(--theme-text);
      border-color: var(--theme-control-border);
      background: var(--theme-surface);
    }

    .vocabulary-dialog__close:hover,
    .vocabulary-grid-trigger:hover,
    .vocabulary-grid-close:hover {
      color: var(--theme-text);
      border-color: var(--theme-green);
      background: var(--theme-hover);
    }

    .vocabulary-section .vocabulary-grid-trigger:hover {
      border-color: var(--theme-gold);
    }

    .vocabulary-dialog__close:active,
    .vocabulary-grid-trigger:active,
    .vocabulary-grid-close:active {
      background: var(--theme-selected);
    }

    .vocabulary-grid-dialog__header {
      color: var(--theme-text);
      border-color: var(--theme-border);
      background: var(--theme-raised);
    }

    .vocabulary-picture-card,
    .vocabulary-picture-card__text {
      border-color: var(--theme-border);
    }

    .vocabulary-picture-card {
      background: var(--theme-surface);
    }

    /* The cream mats around vocabulary illustrations are intentional: the
       original artwork and its built-in white background remain untouched. */
    .vocabulary-dialog__image {
      border-color: var(--theme-control-border);
    }

    .word-tooltip {
      color: var(--theme-text);
      border-color: var(--theme-control-border);
      background: var(--theme-raised);
      box-shadow: var(--theme-shadow);
    }

    :is(.source-link, .back-link):hover,
    .place-gallery__caption a:hover {
      color: var(--theme-link);
    }

    .translation-word.is-tooltip-active:not(.is-playing) {
      color: var(--theme-text);
      background: var(--theme-selected);
      box-shadow: 0 0 0 0.06em var(--theme-selected);
    }

    /* Reading cards and story dialogue keep their existing color identities. */
    .rule-card {
      box-shadow: var(--theme-shadow);
    }

    .grammar-formula {
      border-color: var(--theme-border);
      background: var(--theme-green-soft);
    }

    .dialogue--staff,
    .ending {
      background: var(--theme-green-soft);
    }

    /* Explicit focus colors also cover elements injected after initial load. */
    :is(.back-link, .source-link, .control-button, .audio-speed, .content-toggle,
        .vocab-word, .vocabulary-dialog__close, .vocabulary-table-wrap,
        .vocabulary-grid-trigger, .vocabulary-grid-close, .vocabulary-speaker,
        .translation-word):focus-visible,
    .place-gallery a:focus-visible {
      outline-color: var(--theme-focus);
    }
    }
  }
}
/* Dark rules only apply to screen. Original light colors and image treatments
   are restored for printing even when the saved preference is dark. */
@media print {
  :root { color-scheme: light; }
  html, body { color: #20332e; background: white; }
  .theme-toggle, .theme-dock, .reading-controls, .lesson-controls {
    display: none !important;
  }
}