/* SDK semantic tokens supply alternate palettes, while Flux Protocol stays the default.
   --ark-canvas (js/tokens.js) is a separate, hardcoded-dark token that ArkUI's atomizer
   bakes straight into generated classes (eg. the scene wrapper's own background) -- it
   was never theme-aware, and only read as correct because js/settings/panel.js's
   atmosphere layer painted a themed fill on top of it. Redefining it here, at the one
   place themes are switched, fixes every consumer instead of patching each one. */
:root[data-theme]:not([data-theme="original"]) { --ark-canvas:hsl(var(--canvas)); }
:root[data-theme]:not([data-theme="original"]) body,
:root[data-theme]:not([data-theme="original"]) #scene { background:hsl(var(--canvas)); }
:root[data-theme]:not([data-theme="original"]) .hero-atmosphere { background:hsl(var(--canvas)); }
:root[data-theme]:not([data-theme="original"]) :is(.learning-page,.expansion,.article-body,.article-playground) { color:hsl(var(--text)); }
/* Route components own action, reference and caution colors. Theme switching
   supplies their semantic values rather than overriding every link/button. */
:root[data-theme]:not([data-theme="original"]) #scene .learning-page :is(h1,h2,h3) { color:hsl(var(--text-strong)); }

/* Atmosphere follows the same semantic palette as the page and settings. */
:root:not([data-theme]),:root[data-theme="original"] {
 --canvas:180 9% 2%; --surface:140 12% 8%; --overlay:140 12% 7%; --raised:140 10% 12%;
 --primary:142 15% 64%; --complement:150 9% 48%; --text-strong:140 18% 89%; --text:140 12% 80%; --text-muted:140 9% 65%;
}
.ark-background-host { opacity:1; }
.ark-header { justify-content:space-between !important; }
.ark-studio-label { color:hsl(var(--text-muted)); font:400 8px var(--ark-font); letter-spacing:.12em; }
.ark-background-host { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
:root[data-background]:not([data-background="original"]) .hero-atmosphere { display:none; }
.site-settings { position:absolute; left:20px; bottom:14px; z-index:15; }
.site-settings,.settings-root { width:44px; background:none; border:0; box-shadow:none; }
.settings-root { display:block; }
.settings-trigger { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:hsl(var(--text-muted)); font-size:19px; cursor:pointer; transition:color 180ms,background 180ms; }
.settings-trigger:hover,.settings-trigger[aria-expanded="true"] { background:hsl(var(--text-strong)/.08); color:hsl(var(--text-strong)); }
.settings-panel { box-sizing:border-box; width:310px; max-width:calc(100vw - 32px); max-height:min(680px,78dvh); overflow-y:auto; overscroll-behavior:contain; padding:26px; border:1px solid hsl(var(--border-default)); border-radius:8px; background:hsl(var(--overlay)); color:hsl(var(--text)); font:400 12px/1.5 var(--ark-font); z-index:100; scrollbar-width:thin; scrollbar-color:hsl(var(--text-muted)/.3) transparent; }
.settings-panel[hidden] { display:none !important; }
.settings-title { display:block; font:300 26px/1.2 var(--ark-font); letter-spacing:-.04em; margin:0; color:hsl(var(--text-strong)); }
.settings-description { display:block; margin-top:7px; font-size:11px; color:hsl(var(--text-muted)); }
.settings-label { display:block; margin:25px 0 11px; color:hsl(var(--text-muted)); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.settings-choices { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.settings-panel button { font:inherit; cursor:pointer; border:0; color:hsl(var(--text)); }
.settings-panel .settings-choice { margin:0; min-height:37px; padding:8px 5px; border-radius:7px; background:hsl(var(--text-strong)/.035); font-size:10px; text-align:center; transition:background 180ms,color 180ms; }
.settings-panel .settings-choice:hover { background:hsl(var(--text-strong)/.08); }
.settings-panel .settings-choice[aria-pressed="true"] { background:hsl(var(--primary)/.18); color:hsl(var(--text-strong)); }
.settings-control-label { display:block; margin-top:14px; color:hsl(var(--text)); font:400 11px/1.4 var(--ark-font); font-variant-numeric:tabular-nums; }
.settings-range { appearance:none; display:block; box-sizing:border-box; width:100%; height:28px; margin:5px 0 0; padding:0; background:transparent; cursor:pointer; }
.settings-range::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:hsl(var(--text-strong)/.15); }
.settings-range::-webkit-slider-thumb { appearance:none; width:12px; height:12px; margin-top:-4.5px; border:0; border-radius:50%; background:hsl(var(--primary)); }
.settings-range::-moz-range-track { height:3px; border-radius:3px; background:hsl(var(--text-strong)/.15); }
.settings-range::-moz-range-thumb { width:12px; height:12px; border:0; border-radius:50%; background:hsl(var(--primary)); }
.settings-panel .settings-action { display:block; width:100%; min-height:38px; margin:3px 0 0; padding:10px 12px; border-radius:7px; background:transparent; text-align:left; font-size:11px; color:hsl(var(--text-muted)); }
.settings-panel .settings-action:hover,.settings-panel .settings-action[aria-pressed="true"] { background:hsl(var(--text-strong)/.06); color:hsl(var(--text-strong)); }
#scene .settings-panel :is(button,input):focus-visible,#scene .settings-trigger:focus-visible { outline:none; background-color:hsl(var(--primary)/.1); color:hsl(var(--text-strong)); }
@media(max-width:760px) { .site-settings { left:10px; } .settings-panel { padding:22px; } }
@media(prefers-reduced-motion:reduce) { .settings-trigger,.settings-choice { transition:none; } }

#scene .settings-panel button:focus-visible { text-decoration:underline; text-underline-offset:4px; }

/* Pattern controls: a stable native range retains pointer capture while dragging. */
.settings-slider-card{display:block!important;margin-top:14px;padding:14px 14px 10px;border:1px solid hsl(var(--border-default));background:hsl(var(--text-strong)/.025);border-radius:6px;}
.settings-slider-header{display:flex!important;align-items:center;justify-content:space-between;gap:12px;}
.settings-slider-label{font:500 12px/1.4 var(--ark-font);color:hsl(var(--text-strong));}
.settings-slider-value{min-width:42px;padding:3px 7px;border-radius:3px;background:hsl(var(--reference)/.1);color:hsl(var(--reference));font:500 11px/1.4 var(--ark-font);font-variant-numeric:tabular-nums;text-align:center;}
.settings-slider-hint{display:block;margin-top:7px;color:hsl(var(--text-muted));font-size:10px;line-height:1.5;}
.settings-slider-ends{display:flex!important;justify-content:space-between;gap:10px;margin-top:-2px;color:hsl(var(--text-muted));font:400 9px/1.4 var(--ark-font);}
.settings-slider-card .settings-range{height:44px;margin:3px 0 0;padding:0 1px;touch-action:pan-y;}
.settings-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,hsl(var(--reference)) 0 var(--range-fill,50%),hsl(var(--text-strong)/.14) var(--range-fill,50%) 100%);}
.settings-range::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7px;background:hsl(var(--overlay));border:2px solid hsl(var(--reference));box-shadow:0 1px 4px hsl(var(--text-strong)/.12);}
.settings-range::-moz-range-track{height:6px;border-radius:3px;background:hsl(var(--text-strong)/.14);}
.settings-range::-moz-range-progress{height:6px;border-radius:3px;background:hsl(var(--reference));}
.settings-range::-moz-range-thumb{width:16px;height:16px;background:hsl(var(--overlay));border:2px solid hsl(var(--reference));box-shadow:0 1px 4px hsl(var(--text-strong)/.12);}
.settings-range:focus-visible{outline:2px solid hsl(var(--reference))!important;outline-offset:3px;border-radius:4px;background:transparent!important;}
.settings-slider-card[data-disabled="true"]{opacity:.45;}
.settings-slider-card[data-disabled="true"] .settings-range{opacity:1;cursor:default;}
.settings-slider-card[data-disabled="true"] .settings-slider-value{background:hsl(var(--text-strong)/.06);color:hsl(var(--text-muted));}

.settings-choices[aria-label="themesDark"],.settings-choices[aria-label="themesLight"]{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:7px;}

.settings-choice[data-theme-choice]::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:1px;background:hsl(var(--choice-ink));}
.settings-choice[data-theme-choice="clay"]{--choice-ink:2 60% 72%;}.settings-choice[data-theme-choice="grove"]{--choice-ink:2 60% 37%;}
.settings-choice[data-theme-choice="ochre"]{--choice-ink:145 44% 67%;}.settings-choice[data-theme-choice="moss"]{--choice-ink:145 44% 27%;}
.settings-choice[data-theme-choice="ghost"]{--choice-ink:214 60% 73%;}.settings-choice[data-theme-choice="glacier"]{--choice-ink:214 60% 35%;}
.settings-choice[data-theme-choice="marine"]{--choice-ink:48 60% 70%;}.settings-choice[data-theme-choice="bone"]{--choice-ink:48 60% 27%;}
.settings-choice[data-theme-choice][aria-pressed="true"]{box-shadow:inset 0 -2px hsl(var(--choice-ink));}