/* Theme only UI surfaces, never invert components, wire colors or exports. */
.appearance-control{display:inline-flex;align-items:center;gap:5px;margin:0;font:13px system-ui;flex-shrink:0}
.appearance-control select{width:auto;max-width:100px;padding:6px;border:1px solid #93a6b8;border-radius:7px;font:inherit;background:#fff;color:#30475b}
:root[data-theme=dark]{color-scheme:dark;background:#111923;color:#e4edf6;--theme-surface:#1b2837;--theme-raised:#243448;--theme-text:#e4edf6;--theme-muted:#b0c1d1;--theme-line:#42566b}
:root[data-theme=dark] body{background:#111923;color:var(--theme-text)}
:root[data-theme=dark] :is(header,aside,article,dialog,.toolbar,.statusbar,.view-controls,.library-search-header,.microblue-panel,.mb-tabs,.panel-rail,.code-tools,.block-tools,.block-starters,.code-console,#code-panel,#example-manager,.example-card,.project-example-card,.gesture-hint){background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-line)}
:root[data-theme=dark] :is(button,input,select,textarea,.button,.library-card,.lesson-link){background-color:var(--theme-raised);color:var(--theme-text);border-color:var(--theme-line)}
:root[data-theme=dark] button:hover:not(:disabled){background-color:#334c68;color:#fff}
:root[data-theme=dark] :is(.primary,button[aria-pressed=true],button[aria-selected=true],.lesson-link[aria-current=step]){background:#235c93;color:white;border-color:#65aff5}
:root[data-theme=dark] a{color:#86c5ff}
:root[data-theme=dark] :is(.muted,.micro,.small,.eyebrow,.property-field,.pin-list,.quick-guide,.quick-guide summary,.library-card small,.section-title>span,.project-title span,.example-card p,.view-controls span,#mode-label,#counts,.mb-widget-title small){color:var(--theme-muted)}
:root[data-theme=dark] :is(.property-heading,.pin-list b,.section-title h2){color:var(--theme-text)}
:root[data-theme=dark] :is(input,textarea)::placeholder{color:#a9bbcd}
:root[data-theme=dark] #canvas-wrap{background:#243142}
:root[data-theme=dark] #grid circle{fill:#52667c}
:root[data-theme=dark] .panel-divider{background:#42566b}
:root[data-theme=dark] #library-toggle{background:#234c3b;color:#b8efca}
:root[data-theme=dark] #code-toggle{background:#514723;color:#fff0ad}
:root[data-theme=dark] #microblue-toggle{background:#203f69;color:#b9dbff}
:root[data-theme=dark] :is(.mb-joystick,.mb-drive-control,.mb-widget,.mb-message,.lesson-preview,.equation){background:#263a50;color:var(--theme-text);border-color:var(--theme-line)}
:root[data-theme=dark] .mb-joystick:before,:root[data-theme=dark] .mb-joystick:after{background:#52667c}
:root[data-theme=dark] :is(.diagnostic.warning){color:#ffd28a}
:root[data-theme=dark] :is(.diagnostic.error,#example-error){color:#ffaaa3}
:root[data-theme=dark] .diagnostic.success{color:#95dfbb}
/* Preserve the logo and technical drawing sheets in their original colors. */
:root[data-theme=dark] :is(.brand-logo,header>a>img){background:#fff;border-radius:6px;padding:3px}
:root[data-theme=dark] :is(#schematic-pane,.example-card svg,.project-example-card svg,.teaching-preview){background:#f4f7fa;color:#203448;color-scheme:light}

:root[data-theme=dark] .appearance-control select{background:var(--theme-raised);color:var(--theme-text)}
@media print{.appearance-control{display:none}:root[data-theme=dark] body,:root[data-theme=dark] article{background:white;color:black}}

.appearance-icon{width:14px;height:14px;border:1.5px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
:root[data-theme=dark] :is(#workspace-tabs,.circuit-view-switch,.breadboard-guide,.breadboard-type-cards>div,#welcome-tour section,.mb-monitor,.mb-monitor pre,.mb-tabs){background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-line)}
:root[data-theme=dark] :is(header small,summary,.mb-coordinates,.mb-footnote,.tour-progress){color:var(--theme-muted)}
:root[data-theme=dark] #workspace-tabs [aria-selected=true]{background:#24566b;color:#d0f6ff}
:root[data-theme=dark] #save-project{color:#a8d9ff}
:root[data-theme=dark] .sketch-surface #sketch-editor{background:transparent;color:transparent}

:root[data-theme=dark] .mb-reading{background:#16394c;color:#a4e8ff}
:root[data-theme=dark] .mb-heading{color:#76bcff}
:root[data-theme=dark] #workspace-tabs button{color:#b5c8da}
:root[data-theme=dark] #workspace-tabs [aria-selected=true]{color:#d0f6ff}

/* Robot configuration, floating arena controls, and scene chrome. */
:root[data-theme=dark] #robot-panel{background:#172331;color:var(--theme-text)}
:root[data-theme=dark] #robot-panel :is(.robot-settings-body,#robot-setup,#robot-settings,#arena-settings,#robot-studio-header,.robot-heading,#arena-drawing-tools,#arena-object-card,.arena-setting-card,.arena-global-panel,.studio-step,#mount-zoom-tools){background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-line)}
:root[data-theme=dark] #robot-panel :is(h2,h3,h4,label,summary,strong){color:var(--theme-text)}
:root[data-theme=dark] #robot-panel :is(p,small,.field-help){color:var(--theme-muted)}
:root[data-theme=dark] #robot-panel :is(output,#robot-reading){color:#8de2d3}
:root[data-theme=dark] #robot-panel :is(.setting-card-body>button,#arena-view-tools button,#studio-presets button){background:var(--theme-raised);color:var(--theme-text);border-color:var(--theme-line)}
:root[data-theme=dark] #robot-panel :is(#mount-visual,#arena-scale){background:#243142;color:var(--theme-text)}
:root[data-theme=dark] #robot-scene .arena-floor{fill:#243142;stroke:#9fb4c8}
:root[data-theme=dark] #robot-grid path{stroke:#53677c}
:root[data-theme=dark] #robot-scene [data-object-kind=wall]{fill:#9aaec0}
:root[data-theme=dark] #arena-axes text{fill:#b9e6ff;stroke:#243142}
:root[data-theme=dark] #arena-axes path[fill=none]{stroke:#86c5ff}
:root[data-theme=dark] #arena-axes path:not([fill=none]){fill:#86c5ff;stroke:#243142}

/* Floating inspectors and secondary panels must pair foreground and surface colors. */
:root[data-theme=dark] :is(.floating-properties,.ai-panel,#wire-quick-editor,.distance-stage,#serial-output,#create-example-bar){background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-line)}
:root[data-theme=dark] .ai-panel pre{background:var(--theme-raised);color:var(--theme-text)}
:root[data-theme=dark] :is(.ai-panel #ai-status,.distance-source,#author-status,.code-note,#block-status,.note-arrow-tools p){color:var(--theme-muted)}
:root[data-theme=dark] #cloud-conflict{background:#493b23;color:#ffe2ad;border-color:#ab8545}
:root[data-theme=dark] #block-status.block-error{background:#492b31;color:#ffb9b9}
:root[data-theme=dark] .toolbar :is(button,a.learn-menu){background:transparent;border-color:transparent;box-shadow:none;color:var(--theme-text)}
:root[data-theme=dark] .toolbar :is(button,a.learn-menu):hover:not(:disabled){background:#334c68;border-color:transparent;color:white}
:root[data-theme=dark] .toolbar button[aria-pressed=true]{background:#235c93;border-color:transparent;color:white}
/* Keep functional swatches and annotation paper colors independent of UI theme. */
:root[data-theme=dark] #wire-quick-editor .wire-swatch{background:var(--swatch)}
:root[data-theme=dark] .canvas-note-editor{color:#384856}
:root[data-theme=dark] .resistor-color-reference p{color:var(--theme-muted)}
:root[data-theme=dark] .resistor-color-reference svg text{fill:var(--theme-text)}
:root[data-theme=dark] .resistor-color-reference svg path{stroke:var(--theme-muted)}

:root[data-theme=dark] .panel-rail button.panel-rail-button:is(#library-toggle,#code-toggle,#microblue-toggle){background:transparent;color:var(--theme-muted);border-color:transparent;box-shadow:none}
:root[data-theme=dark] .panel-rail button.panel-rail-button:is(#library-toggle,#code-toggle,#microblue-toggle)[aria-expanded=true]{background:var(--theme-raised);color:var(--theme-text);border-color:transparent;border-left-color:#5898e9}
:root[data-theme=dark] .panel-rail button.panel-rail-button:is(#library-toggle,#code-toggle,#microblue-toggle):hover{background:#334c68;color:#fff}
/* Continuous lesson groups, without rounded notches between adjacent rows. */
:root[data-theme=dark] #lesson-list .lesson-link{border-radius:0}
:root[data-theme=dark] #lesson-list h2+.lesson-link{border-radius:7px 7px 0 0}
:root[data-theme=dark] #lesson-list .lesson-link:has(+h2),:root[data-theme=dark] #lesson-list .lesson-link:last-child{border-bottom-left-radius:7px;border-bottom-right-radius:7px}