/* Loaded by every experiment; selectors override legacy fixed dark surfaces. */
html[data-theme] body {background:var(--lab-bg)!important;color:var(--lab-text)!important;--bg:var(--lab-bg);--panel:var(--lab-panel);--text:var(--lab-text);--muted:var(--lab-muted);--border:var(--lab-border);--exp-text:var(--lab-text);--exp-muted:var(--lab-muted);--exp-border:var(--lab-border)}
html[data-theme] body :where(main,header,footer,aside,section,article,nav,details,summary,.card,.experiment-card,.experiment-stage,.scene-card,.readout,#panel,#ui-container,#container,.banner,.transport,.insight,.locale-menu,.world-model-notes,.equation-panel,.experiment-controls,.lab-home) {background-color:var(--lab-panel)!important;border-color:var(--lab-border)!important;color:var(--lab-text)!important}
html[data-theme] body :where(h1,h2,h3,h4,p,label,legend,summary,output,.note,.sub,.caption,.legend,.cvlabel,.readout,#stat,#status,#readout) {color:var(--lab-text)!important}
html[data-theme] body :where(button,select,input[type=number],input[type=search],input[type=text],textarea) {background-color:var(--lab-panel)!important;color:var(--lab-text)!important;border-color:var(--lab-border)!important}
html[data-theme] body canvas {background-color:var(--lab-bg)!important}
html[data-theme=light] body a {color:#176084}
html[data-theme=black] body {--exp-gold:var(--lab-accent, #e9b86a)}
html[data-theme] body :where(.shared-playback,.prediction,.clock-card,.drift-card,.controls,.explanation,.rate-card,.scene-heading,.experiment-scene-heading,.heading,.model-content,.equation-formulas) {background-color:var(--lab-panel)!important;color:var(--lab-text)!important;border-color:var(--lab-border)!important}
html[data-theme] body :where(.shared-playback small,.scene-heading span,.experiment-scene-heading span,.heading span,.range-ends,.detail,.clock-label,.clock-value) {color:var(--lab-muted)!important}
html[data-theme] body button:is([aria-pressed=true],[aria-selected=true],.active,.selected) {box-shadow:inset 0 0 0 2px var(--lab-accent)!important}
/* Instruction cards inherit the same surface as the experiment controls. */
html[data-theme] body .experiment-instruction {background:var(--lab-panel)!important;color:var(--lab-text)!important;border-color:var(--lab-border)!important}
html[data-theme] body .experiment-instruction strong {color:var(--lab-text)!important}
/* All experiment sliders follow the saved accent rather than legacy gold. */
html[data-theme] body input[type=range] {accent-color:var(--lab-accent)!important}
html[data-theme] body input[type=range]::-webkit-slider-thumb {background:var(--lab-accent)!important}
html[data-theme] body input[type=range]::-moz-range-thumb {background:var(--lab-accent)!important}

/* Accent readouts and native checkmarks share the saved experiment color. */
html[data-theme] body input:is([type=checkbox],[type=radio]) {accent-color:var(--lab-accent)!important}
html[data-theme] body :where(.guide-number,.experiment-eyebrow,.eyebrow,output,.shared-playback select) {color:var(--lab-accent)!important}

html[data-theme=light] {--scene-grid:rgba(45,65,80,.15)}
/* A shared accent-colored full stop follows each experiment's main title. */
body[data-world] .experiment-header h1::after,
.time-header h1::after,
body[data-world=lhc] #panel h1::after {
  content:".";
  color:var(--lab-accent,var(--exp-gold,#e9b86a));
}