/* Shared UI colors; original teaching artwork keeps its own colors. */
:root[data-palette="sun"]{
  --palette-paper:#fffdf8;
  --palette-soft:#fff7e8;
  --palette-tint:#fff3d9;
  --palette-selected:#ffebbd;
  --palette-ink:#30332f;
  --palette-heading:#303b34;
  --palette-muted:#676b62;
  --palette-brand:#95600c;
  --palette-hover:#79500d;
  --palette-line:#e8e4da;
  --palette-border:#ead9b6;
  --palette-code:#faf7ef;
  --palette-fill:#ffbe55;
  --palette-onFill:#41300e;
  --palette-shadow:#eee3d0;
}
:root[data-palette="mint"]{
  --palette-paper:#fbfefb;
  --palette-soft:#f0faf3;
  --palette-tint:#e7f7ec;
  --palette-selected:#d7f2e2;
  --palette-ink:#2c3631;
  --palette-heading:#2c4036;
  --palette-muted:#5f7066;
  --palette-brand:#247450;
  --palette-hover:#1d6142;
  --palette-line:#e0e9e2;
  --palette-border:#c4e3ce;
  --palette-code:#f3f8f4;
  --palette-fill:#77d8ac;
  --palette-onFill:#173c2e;
  --palette-shadow:#dfe9df;
}
:root[data-palette="sky"]{
  --palette-paper:#fcfdff;
  --palette-soft:#f1f8ff;
  --palette-tint:#eaf5ff;
  --palette-selected:#dcedff;
  --palette-ink:#2e3640;
  --palette-heading:#2c3e50;
  --palette-muted:#607080;
  --palette-brand:#286b9e;
  --palette-hover:#205781;
  --palette-line:#e0e7ed;
  --palette-border:#c6deef;
  --palette-code:#f3f7fb;
  --palette-fill:#80caff;
  --palette-onFill:#17374f;
  --palette-shadow:#e0e8f0;
}
:root,:root[data-palette="original"]{--palette-paper:initial;--palette-soft:initial;--palette-tint:initial;--palette-selected:initial;--palette-ink:initial;--palette-heading:initial;--palette-muted:initial;--palette-brand:initial;--palette-hover:initial;--palette-line:initial;--palette-border:initial;--palette-code:initial;--palette-fill:initial;--palette-onFill:initial;}
:root:not([data-palette="original"]) :is(.course-connected .route-nav a[aria-current],.course-connected .guide-pager a.next,.course-connected .materials-button,.course-connected .current-node-label,.story .button.primary){background:var(--palette-fill);color:var(--palette-onFill)}
:root:not([data-palette="original"]) :is(.course-connected .route-nav a[aria-current] :is(small,.route-index)){color:var(--palette-onFill)}
:root:not([data-palette="original"]) :is(.course-connected .guide-pager a.next:hover,.course-connected .materials-button:hover,.story .button.primary:hover){background:var(--palette-selected);color:var(--palette-onFill)}
:root:not([data-palette="original"]) :is(.course-connected .topbar .brand,.story h1,.story h2){color:var(--palette-heading)}
:root:not([data-palette="original"]) :is(.course-connected .course-return){color:var(--palette-hover)!important}
:root:not([data-palette="original"]) :is(.course-connected .route-nav :is(small,.route-index)){color:var(--palette-muted)}
:root:not([data-palette="original"]) :is(.course-connected .map-heading,.map-toolbar){background:var(--palette-tint)}
@media(min-width:601px){:root:not([data-palette="original"]) .story .hero-art{box-shadow:16px 19px 0 var(--palette-shadow)}}
:root:not([data-palette="original"]) :is(.story .closing .secondary){color:var(--palette-heading);border-color:var(--palette-border)}
/* The reserved width keeps the navigation still as the swatches spread in place. */
.course-palette-picker{--swatch-size:36px;--swatch-gap:16px;position:relative;flex-shrink:0;z-index:40;width:108px;height:44px}
.course-palette-picker [data-color=mint]{--swatch:#77d8ac}.course-palette-picker [data-color=sun]{--swatch:#ffbe55}.course-palette-picker [data-color=sky]{--swatch:#80caff}.course-palette-picker [data-color=original]{--swatch:#a18ac8}
.course-palette-picker .palette-swatch{position:absolute;top:4px;z-index:var(--order);right:calc((3 - var(--order))*var(--swatch-gap));display:grid;place-items:center;width:var(--swatch-size);height:36px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:right .22s cubic-bezier(.2,.75,.3,1)}
.palette-swatch i{display:block;box-sizing:border-box;width:28px;height:28px;border:2px solid var(--palette-paper,#fdfcf9);border-radius:50%;background:var(--swatch);box-shadow:0 1px 3px #22392d1a;transition:transform .18s ease,box-shadow .18s ease;pointer-events:none}
.course-palette-picker .palette-swatch[aria-pressed=true]{z-index:5}
.course-palette-picker:focus-within{--swatch-gap:24px}
.course-palette-picker .palette-swatch:focus-visible{outline:2px solid var(--palette-brand,#7250a9);outline-offset:1px;z-index:6}
@media(hover:hover) and (pointer:fine){.course-palette-picker:hover{--swatch-gap:24px}.course-palette-picker .palette-swatch:hover{z-index:6}.palette-swatch:hover i{transform:translateY(-4px);box-shadow:0 4px 8px #22392d20}}
@media(hover:none),(pointer:coarse){.course-palette-picker{--swatch-gap:24px}}
.topbar>nav,.site-header>nav{margin-left:auto}.topbar,.site-header{gap:24px}
@media(max-width:850px){.topbar,.site-header{gap:12px}.course-palette-picker{margin-left:auto}.story .site-header{height:auto;min-height:76px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.course-connected .topbar>nav,.story .site-header>nav{order:3;width:100%;margin-left:0;justify-content:flex-start}}
@media(max-width:360px){.course-palette-picker{--swatch-size:32px;width:104px}.course-palette-picker:hover,.course-palette-picker:focus-within{--swatch-gap:24px}}
@media(max-width:360px) and (hover:none){.course-palette-picker{--swatch-gap:24px}}
@media(prefers-reduced-motion:reduce){.course-palette-picker .palette-swatch,.palette-swatch i{transition:none}}
/* Keep the document canvas light while the next page is being prepared. */
:root{color-scheme:light;background:var(--palette-paper,#fdfcf9)}
:root:not([data-palette="original"]) .course-connected .route-nav a[aria-current] :is(small,.route-index){color:var(--palette-onFill)}