/* Appearance tokens and dark UI surfaces. Paper, illustrations, photo pixels,
   drawing swatches and exports deliberately retain their original colors. */
:root{color-scheme:light}
.theme-setting{flex-wrap:wrap}
.theme-setting>div{flex:1 1 180px}
.setting-row select{color:var(--ink);min-height:44px;max-width:100%}
:root[data-theme=dark]{color-scheme:dark;--shadow:0 12px 42px #0003}
:root[data-theme=dark] :is(.sidebar,.skip-link,.icon-button,.journey-strip,.lesson-card,.mode-option,.setting-row select,.secondary,.tiny-button,.lesson-header,.lesson-footer,.art-tools,.reflection-options button,.gallery-card,.gallery-empty,.hero-sticker){background:var(--white);border-color:var(--line);color:var(--ink)}
:root[data-theme=dark] :is(.nav-item,.grownups,.brand-tag,.breadcrumb,.language-button,.greeting p,.section-heading p,.card-meta,.footer-note,.lesson-title small,.step-description,.canvas-label,.footer-encouragement,.finish-copy>p,.proud-label,.gallery-intro p,.gallery-card small,.gallery-empty p,.modal>p,.materials,.tool-button,.size-button,.hint-toast,.voice-note,.paper-under){color:var(--muted)}
:root[data-theme=dark] :is(.breadcrumb strong,.teacher h1,.gallery-empty h2){color:var(--ink)}
:root[data-theme=dark] :is(.nav-item.active,.nav-item:hover,.icon-button:hover,.pill:hover:not(.active),.secondary:hover,.tiny-button:hover,.tool-button:hover,.tool-button.active,.size-button.active,.mode-option.selected,.reflection-options button.active,.guide-toggle[aria-pressed=true],.music-player [data-action=music-toggle]){background:var(--lilac);color:var(--purple);border-color:var(--purple)}
:root[data-theme=dark] :is(.nav-count,.card-arrow,.recommended){background:var(--lilac);color:var(--purple)}
:root[data-theme=dark] :is(.pill,.guide-toggle){border-color:var(--line);color:var(--muted)}
:root[data-theme=dark] :is(.primary,.pill.active){background:var(--purple-dark);color:white}
:root[data-theme=dark] .primary:hover{background:var(--purple-dark);filter:brightness(1.12)}
:root[data-theme=dark] .pill.active{border-color:var(--purple)}
:root[data-theme=dark] :is(.hero,.prompt-card){background:var(--lilac);border-color:var(--line)}
:root[data-theme=dark] :is(.hero h2,.prompt-card h3){color:var(--ink)}
:root[data-theme=dark] :is(.hero p,.hero-meta,.eyebrow,.step-tag,.prompt-card p,.prompt-card>.icon){color:var(--muted)}
:root[data-theme=dark] .hero-art:before{background:none}
:root[data-theme=dark] :is(.little-note,.mini-stat,.settings-note,.paper-instruction,.art-modal .challenge,.play-hero,.storage-warning){background:var(--warm-surface);border-color:var(--line);color:var(--warm-ink)}
:root[data-theme=dark] :is(.little-note p,.paper-instruction b,.paper-instruction p,.step-tip,.play-hero h2,.play-hero p,.play-hero .eyebrow,.play-hero .hero-sticker,.blank-photo-note){color:var(--warm-ink)}
:root[data-theme=dark] :is(.studio-note,.skill-earned,.journey-step.done .step-round){background:var(--mint);color:var(--green-ink)}
:root[data-theme=dark] .step-round{background:var(--page);color:var(--muted)}
:root[data-theme=dark] :is(.journey-step:first-child .step-round,.journey-step.current .step-round){background:var(--lilac);color:var(--purple);box-shadow:0 0 0 4px var(--page)}
:root[data-theme=dark] .journey-step span>small{color:var(--muted)}
:root[data-theme=dark] .journey-connector{border-color:var(--line)}
:root[data-theme=dark] :is(.tool-divider,.lesson-progress span){background:var(--line)}
:root[data-theme=dark] :is(.lesson-progress span.done,.lesson-progress span.active){background:var(--purple)}
:root[data-theme=dark] .photo-label{background:var(--lilac);border-color:var(--purple);color:var(--purple)}
:root[data-theme=dark] .toggle{background:var(--line)}
:root[data-theme=dark] .toggle[aria-checked=true]{background:var(--purple-dark)}
:root[data-theme=dark] .avatar{box-shadow:0 0 0 4px var(--white)}
:root[data-theme=dark] .setup-caption{color:var(--muted)!important}
:root[data-theme=dark] :is(.drawing-paper,.demo-paper){box-shadow:0 5px 0 var(--line)}
:root[data-theme=dark] :is(button,a,input,select):focus-visible{outline-color:var(--purple)}