/* Loaded after the page and game stylesheets. Artwork canvases and image assets stay untouched. */
:root,
:root[data-theme="forest"] { color-scheme: light; --paper:#fbf8ee; --white:#fffdf6; --ink:#384f49; --muted:#748579; --green:#416b51; --sage:#e7efdf; --line:#d8ddc8; --peach:#e5a58f; --gold:#b89045; --red:#a95e53; --theme-focus:#62866a; --theme-canvas:#e4eedc; --theme-card:#fffdf6; --theme-accent:#9bad7e; --theme-soft:#edf2e5; --theme-pattern:#bbaa7b; }
:root[data-theme="ocean"] { color-scheme:light; --paper:#f1f8f8; --white:#fbffff; --ink:#304e56; --muted:#71868a; --green:#39717b; --sage:#dcefed; --line:#c8dcdd; --peach:#d98e79; --gold:#a9823d; --red:#a85e58; --theme-focus:#4b8993; --theme-canvas:#d9eeee; --theme-card:#fbffff; --theme-accent:#6fa7a4; --theme-soft:#e4f3f1; --theme-pattern:#8eb8b5; }
:root[data-theme="lilac"] { color-scheme:light; --paper:#f7f4fa; --white:#fffdfd; --ink:#4b4359; --muted:#857a91; --green:#6b5e86; --sage:#ebe5f2; --line:#ded5e7; --peach:#d89591; --gold:#a78345; --red:#a95d69; --theme-focus:#8572a1; --theme-canvas:#ece4f1; --theme-card:#fffdfd; --theme-accent:#a18db6; --theme-soft:#f0eaf5; --theme-pattern:#b8a8c6; }
:root[data-theme="sunset"] { color-scheme:light; --paper:#fcf5ed; --white:#fffdf8; --ink:#58483d; --muted:#8d7868; --green:#806044; --sage:#f2e5d3; --line:#e6d4bf; --peach:#d98568; --gold:#a77934; --red:#a55749; --theme-focus:#b56f53; --theme-canvas:#f4e4cf; --theme-card:#fffdf8; --theme-accent:#c18a5b; --theme-soft:#f7ead9; --theme-pattern:#c6a27d; }

:root { --cat-ink:var(--ink); --cat-green:var(--theme-accent); --cat-coral:var(--peach); }
body { background-color:var(--paper); color:var(--ink); background-image:radial-gradient(ellipse at 12% 18%,color-mix(in srgb,var(--theme-accent) 14%,transparent),transparent 31%),radial-gradient(ellipse at 88% 82%,color-mix(in srgb,var(--gold) 8%,transparent),transparent 34%),radial-gradient(color-mix(in srgb,var(--theme-pattern) 14%,transparent) .7px,transparent .7px);background-size:auto,auto,14px 14px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline-color:var(--theme-focus)!important; }
.site-theme-picker { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; white-space:nowrap; }
.site-theme-picker select { max-width:130px; border:1px solid var(--line); border-radius:9px; background:var(--white); color:var(--ink); padding:7px 25px 7px 10px; font:inherit; }
.site-theme-picker select:focus-visible { outline:2px solid var(--theme-focus); outline-offset:2px; }

/* Learning map, practice surfaces and account dialogs. */
.learn-header,.map-summary,.map-footer,.stage-progress,.route-header,.route-evidence,.route-principles,.route-detail-nav { border-color:var(--line); }
.learn-header,.map-hero,.map-summary,.chapter-heading,.stage-top,.stage-stats,.learn-stage,.learn-map { color:var(--ink); }
.learn-brand>span,.primary-button,.chapter-button[aria-pressed="true"],.map-progress i,.stage-progress i,.stat strong,.result-stats b,.route-primary { color:var(--green); }
.chapter-button[aria-pressed="true"] { color:#fff; }
.primary-button,.route-primary { background:var(--green); border-color:var(--green); color:#fff; }
.map-hero canvas,.course-game-canvas,.course-game-panel,.wiz-feature-art,.cat-stage { background-color:var(--theme-canvas); }
.chapter-button,.course-lesson,.typing-panel,.learn-dialog,.game-start-card>div,.round-button,.secondary-button,.learner-form input { background-color:var(--white); border-color:var(--line); color:var(--ink); }
.course-lesson.current,.typing-tile.current,.typing-tile.done,.course-lesson.completed { background:var(--theme-soft); border-color:var(--theme-accent); }
.course-lesson.game-card { background:color-mix(in srgb,var(--theme-soft) 72%,var(--white)); }
.course-lesson.locked,.course-lesson.ahead { background:color-mix(in srgb,var(--paper) 80%,var(--white)); color:var(--muted); }
.course-lesson h3,.stage-top h1,.map-hero h1,.chapter-heading h2,.learn-dialog h2 { color:var(--ink); }
.course-lesson p,.eyebrow,.lesson-top,.lesson-top .lesson-symbol,.lesson-stars,.result-stars,.dialog-eyebrow,.map-summary strong { color:var(--green); }
.lesson-text .current,.route-sample .current { background:color-mix(in srgb,var(--theme-accent) 24%,var(--white)); color:var(--ink); }
.learn-dialog,.cat-sheet-card { background:var(--theme-card); color:var(--ink); border-color:var(--line); }

/* Cozy game UI uses a few fixed colors in its original skin; map them to the selected palette. */
.cat-playground { --cat-ink:var(--ink); --cat-green:var(--theme-accent); --cat-coral:var(--peach); color:var(--ink); }
.cat-feature-copy,.cat-scene-card,.cat-sheet-card,.cat-hud-pill,.cat-scene-card[aria-pressed="true"] { background-color:var(--theme-card); }
.cat-feature-copy h2,.cat-sheet-card h2,.cat-scene-card strong,.cat-feature-copy h2 span { color:var(--ink); }
.cat-level[aria-pressed="true"],.cat-pressure i.filled,.cat-scene-card[aria-pressed="true"] { background-color:var(--theme-soft); border-color:var(--theme-accent); }
.cat-level[aria-pressed="true"],.cat-scene-card[aria-pressed="true"] { color:var(--green); }
.cat-scene-card[aria-pressed="true"] strong { color:var(--green); }
.cat-game-top,.cat-game-main,.wiz-feature,.wiz-page-head h1,.travel-page-head h1 { color:var(--ink); }
.cat-stage { border-color:var(--theme-accent); }
.cat-stage-status,.cat-stage-alert:not(:empty) { background-color:var(--theme-soft); color:var(--ink); }
.cat-result-stars,.cat-hearts { color:var(--peach); }
.route-hero aside,.route-sample,.detail-rules,.rest-circle { background-color:var(--theme-soft); border-color:var(--line); }

/* Wizard and travel pages ship with their own violet and parchment accents. */
.arcade-tabs { border-color:var(--line); }
.arcade-tabs>button,.wiz-route-grid>div,.wiz-rules>div,.wiz-bank,.wiz-bank-grid button,
.wiz-spell-panel,.wiz-stat,.wiz-sheet-card,.wiz-sheet-rule,.trail-book,.trail-sheet-card,
.trail-rules>div,.trail-passages>button,.trail-continue,.trail-passage-preview {
  background-color:var(--theme-card); border-color:var(--line); color:var(--ink);
}
.arcade-tabs>button[aria-selected="true"],.arcade-tabs>button:first-child[aria-selected="true"],
.wiz-tempos button[aria-pressed="true"],.wiz-word>span.next,.trail-bands button[aria-pressed="true"],
.trail-char.next { background-color:var(--theme-soft); border-color:var(--theme-accent); color:var(--green); }
.wiz-primary,.trail-primary { background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 3px 0 color-mix(in srgb,var(--green) 45%,transparent); }
.wiz-primary:hover,.trail-primary:hover { background:color-mix(in srgb,var(--green) 88%,var(--ink)); }
.wiz-dialog,.trail-dialog { color:var(--ink); background-color:var(--paper); }
.wiz-stage,.trail-scene { border-color:var(--theme-accent); }
.wiz-sheet-card,.trail-sheet-card { background-color:var(--theme-card); }
.wiz-sheet-card h2,.trail-sheet-card h2,.wiz-feature-copy h2,.trail-feature-copy h2 { color:var(--green); }
.wiz-route-grid strong,.wiz-stat>strong,.wiz-results strong,.trail-results strong,.trail-map-caption,
.trail-section-head h2,.trail-stop-list>span.active,.wiz-section-heading h2 { color:var(--green); }
.wiz-dialog select,.wiz-feature-copy>select,.trail-input-line input { color:var(--ink); background-color:var(--white); border-color:var(--line); }
.wiz-word>span,.trail-input-line,.trail-reading { color:var(--ink); background-color:var(--theme-card); }
.wiz-word>span.done,.trail-char.done { color:var(--green); background-color:var(--theme-soft); border-color:var(--theme-accent); }
.trail-postcard { /* retain its photographic image while tuning the paper border */ border-color:var(--theme-card); outline-color:var(--line); }

@media (max-width:600px) { .site-theme-picker { gap:5px; font-size:10px; } .site-theme-picker select { max-width:104px; padding:6px 19px 6px 7px; } }

/* Shared finish: quiet glass surfaces, tactile controls and warm ambient light. */
.learn-header {
  background:color-mix(in srgb,var(--white) 80%,transparent);
  border-bottom-color:color-mix(in srgb,var(--line) 72%,transparent);
  box-shadow:0 5px 24px color-mix(in srgb,var(--ink) 5%,transparent);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
}
.learn-brand>span {
  display:inline-grid;place-items:center;width:34px;height:34px;margin-right:5px;
  border-radius:11px;background:linear-gradient(145deg,var(--theme-focus),var(--green));
  color:#fff!important;font-size:18px!important;box-shadow:0 5px 12px color-mix(in srgb,var(--green) 22%,transparent);
}
.learn-header nav>a:not(.site-account-link) { transition:color .2s ease,transform .2s ease; }
.learn-header nav>a:not(.site-account-link):hover { color:var(--green);transform:translateY(-1px); }
.primary-button,.secondary-button,.round-button,.chapter-button,.map-pagination button,.site-account-link {
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease;
}
.primary-button { background-image:linear-gradient(125deg,var(--green),color-mix(in srgb,var(--green) 72%,var(--theme-focus)));box-shadow:0 5px 12px color-mix(in srgb,var(--green) 18%,transparent),inset 0 1px 0 #ffffff36; }
.primary-button:hover,.site-account-link:hover { transform:translateY(-2px);box-shadow:0 9px 18px color-mix(in srgb,var(--green) 22%,transparent); }
.secondary-button:hover,.round-button:hover,.map-pagination button:hover { transform:translateY(-1px);border-color:var(--theme-accent);box-shadow:0 5px 12px color-mix(in srgb,var(--ink) 8%,transparent); }
.site-account-link { box-shadow:0 3px 10px color-mix(in srgb,var(--green) 8%,transparent); }
.arcade-tabs>button,.cat-scene-card,.trail-passages>button,.wiz-tempos button,.trail-bands button {
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background-color .22s ease;
}
.arcade-tabs>button:hover,.cat-scene-card:hover,.trail-passages>button:hover,.wiz-tempos button:hover,.trail-bands button:hover {
  transform:translateY(-2px);border-color:color-mix(in srgb,var(--theme-accent) 62%,var(--line));
  box-shadow:0 8px 18px color-mix(in srgb,var(--theme-accent) 13%,transparent);
}
.cat-feature-copy,.wiz-feature,.trail-feature-copy,.cat-stage,.wiz-stage,.trail-scene {
  box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 6%,transparent),inset 0 1px 0 #ffffffb5;
}
@media (prefers-reduced-motion:reduce) {
  .learn-header nav>a:not(.site-account-link),.primary-button,.secondary-button,.round-button,.chapter-button,.map-pagination button,.site-account-link,.arcade-tabs>button,.cat-scene-card,.trail-passages>button,.wiz-tempos button,.trail-bands button { transition:none; }
}