/* Each experiment is an instrument: a distinct palette and a purposeful surface. */
:root{--page:#061f25;--panel:#10373e;--screen:#08282e;--accent:#6fe8ed;--second:#ffd48a;--edge:color-mix(in srgb,var(--accent) 24%,var(--page));--soft:color-mix(in srgb,var(--accent) 10%,var(--panel));--response:.08}
body{background:var(--page);color:#f3f7fa}
.topbar{background:color-mix(in srgb,var(--panel) 65%,var(--page));border-color:var(--edge)}
.brandmark{background:var(--accent);color:var(--page);border-radius:50% 50% 50% 8px}
.progress,.mini-pulse,.station-heading .eyebrow{color:var(--accent)}
.brand small,.station-heading p:last-child{color:#c0cdd4}
.stations,.sidebar-bottom{border-color:var(--edge)}
.station{border-inline-start:2px solid color-mix(in srgb,var(--station-color) 32%,transparent);color:#c5cfd6}
.station .number{color:var(--station-color)}
.station.active{background:var(--soft);border-color:var(--edge);border-inline-start:3px solid var(--accent);color:var(--accent)}
.station.active .number{color:var(--accent)}
.station-heading{gap:22px;min-height:109px}
.station-heading>div:first-child{max-width:calc(100% - 145px)}
.station-heading h1{font-size:clamp(1.65rem,2.1vw,2.25rem)}
#station-symbol{opacity:1;flex:0 0 128px;text-align:center;line-height:1.1;border:1px solid var(--edge);border-radius:16px 4px 16px 4px;padding:14px 8px;background:var(--soft);color:var(--accent)}
.instrument-glyph{display:block;font-family:Georgia,serif;font-size:2.8rem}
#station-symbol small{display:block;font-family:LabArabic,Tahoma,sans-serif;font-size:.62rem;line-height:1.7;direction:rtl;color:#d2dde3;margin-top:6px}
.experiment{background:var(--panel);color:#d0dbe2;border-color:var(--edge);border-radius:8px;display:flex;align-items:center;gap:8px}
.experiment:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--experiment-color);flex-shrink:0}
.experiment.active{background:var(--accent);border-color:var(--accent);color:var(--page)}
.experiment.active:before{background:var(--page)}
.lab-panel{background:var(--panel);border-color:var(--edge);border-top:3px solid var(--accent);border-radius:16px;box-shadow:0 14px 40px #0002}
.lab-head{border-color:var(--edge);background:var(--soft);padding-block:14px}
.live-tag{color:var(--accent);border-color:var(--edge);background:var(--page)}
.instrument-caption{display:flex;justify-content:space-between;gap:12px;padding:9px 20px;font-size:.68rem;background:var(--screen);color:#bdcfd6;border-bottom:1px solid var(--edge)}
#concept-tag{color:var(--accent)}
#instrument-state{display:flex;align-items:center;gap:6px}
#instrument-state:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--second)}
.scene{background-color:var(--screen);background-image:linear-gradient(color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px);background-size:28px 28px}
.scene:after{content:"";position:absolute;inset:9px;pointer-events:none;border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);border-radius:3px}
.readouts{background:var(--edge);border-color:var(--edge)}
.readout{background:color-mix(in srgb,var(--panel) 78%,var(--page));padding-block:12px}
.readout small{color:#c0d0d8}.readout strong{color:var(--accent);font-variant-numeric:tabular-nums}
.observation{margin:16px 20px 0;background:var(--page);border:1px solid var(--edge);border-radius:10px;padding:11px 14px;transition:border-color .2s}
.observation-title{display:flex;align-items:center;gap:8px;font-size:.76rem;color:#d1dee5}
.observation-title>small{margin-inline-start:auto;color:var(--second);font-size:.68rem}
.observation-icon{color:var(--accent);font:22px Arial}
.compare-values{display:flex;align-items:center;justify-content:space-around;gap:12px;margin-top:8px;text-align:center}
.compare-values>span:not(.compare-arrow){min-width:0;flex:1}.compare-values small{font-size:.7rem;color:#b7c8ce}.compare-values>span>small{display:block}.compare-values bdi{font-family:Arial,sans-serif;font-size:1.22rem;color:#c6d1d8;display:block;font-variant-numeric:tabular-nums}.compare-values .now bdi{color:var(--accent);font-weight:700}.compare-values bdi small{color:inherit;font-weight:400}.compare-arrow{font-size:1.2rem;color:var(--accent)}
.observation.changed{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)}
.playback{display:flex;gap:6px;align-items:center}.playback .quiet{font-size:.68rem;padding:5px 7px;min-height:34px}
.quiet,.secondary{border-color:var(--edge);color:#d7e4e9}.quiet:hover,.secondary:hover{background:var(--soft)}
.control output{color:var(--accent);background:var(--page)}
.control input[type=range]{accent-color:var(--accent)}
.bounds{color:#a9bcc4}.assumption{border-color:var(--edge);color:#bccdd5}
.step-line{border-color:var(--edge)}.step-line span{color:#a3b6c0}.step-line .active{color:var(--accent);border-color:var(--accent)}
.step-caption,.task strong,.connection>span{color:var(--second)}
.learning-panel p{color:#c8d3db}
.choice{background:var(--panel);border-color:var(--edge);color:#ebf1f5}
.choice.selected{background:color-mix(in srgb,var(--second) 14%,var(--panel));border-color:var(--second);color:#fff2da}
.primary{background:var(--accent);color:var(--page)}
.task{background:var(--panel);border-color:var(--second)}
.law{background:var(--panel);border-color:var(--accent)}.law .formula{color:var(--accent)}.law p{color:#d1dde2}
.transfer,.connection{border-color:var(--edge)}.connection{background:var(--panel)}.connection p{color:#c8d6dd}
.answer-row input{background:var(--screen);border-color:var(--edge)}
.target-hint{color:var(--second)}.target-hint.matched{color:var(--accent)}
.control-guidance{color:#dae5e9;background:var(--page);border-color:var(--edge)}
.control-guidance.needs-attention{background:color-mix(in srgb,var(--second) 12%,var(--page));border-color:var(--second);color:#fff0d8}
.lab-panel.target-reached #instrument-state{color:var(--accent)}.lab-panel.target-reached #instrument-state:before{background:var(--accent)}
dialog{background:var(--panel);border-color:var(--edge)}dialog p{color:#d0dce5}dialog a{color:var(--accent)}.dialog-close{background:var(--page)}
button:focus-visible,a:focus-visible,input:focus-visible{outline-color:var(--second)}
/* Motion: the ruled track, with a time scale beneath the instrument. */
[data-world=motion] .scene{background-size:38px 38px,76px 38px}
[data-world=motion] .scene:after{inset:12px 12px 4px;border:0;border-bottom:5px solid transparent;border-image:repeating-linear-gradient(90deg,var(--accent) 0 1px,transparent 1px 10px) 5}
/* Forces: squared drafting panels and firm, opposed edges. */
[data-world=force] .lab-panel,[data-world=force] .observation,[data-world=force] #station-symbol{border-radius:4px}
[data-world=force] .scene{background-size:18px 18px}
[data-world=force] .scene:after{border:0;background:linear-gradient(var(--accent),var(--accent)) top left/22px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) top left/2px 22px no-repeat,linear-gradient(var(--accent),var(--accent)) bottom right/22px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) bottom right/2px 22px no-repeat;opacity:.6}
/* Energy: a calm, illuminated meter face. */
[data-world=energy] .scene{background-image:linear-gradient(0deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),repeating-linear-gradient(0deg,transparent 0 28px,color-mix(in srgb,var(--accent) 8%,transparent) 28px 29px);background-size:100% 100%}
[data-world=energy] .lab-panel{border-radius:22px 22px 8px 8px}
[data-world=energy] .readout{border-bottom:4px solid var(--accent)}
[data-world=energy] .observation.changed .now{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--accent) 40%,transparent))}
/* Impacts: a striped instrument rail. */
[data-world=impact] .lab-panel{border-top:0;border-radius:5px}
[data-world=impact] .lab-head{border-top:7px solid transparent;border-image:repeating-linear-gradient(135deg,var(--accent) 0 8px,var(--screen) 8px 16px) 7}
[data-world=impact] .scene{background-size:60px 30px}
[data-world=impact] .observation{border-radius:2px;border-inline-start:4px solid var(--accent)}
/* Gravity: a radial reference field. */
[data-world=orbit] .scene{background-image:repeating-radial-gradient(circle at center,transparent 0 39px,color-mix(in srgb,var(--accent) 10%,transparent) 40px 41px),linear-gradient(90deg,transparent calc(50% - 1px),color-mix(in srgb,var(--accent) 14%,transparent) 50%,transparent calc(50% + 1px));background-size:100% 100%}
[data-world=orbit] .scene:after{border:0}
[data-world=orbit] #station-symbol{border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center}
/* Fluids: depth bands, read from the surface down. */
[data-world=fluid] .scene{background-image:linear-gradient(180deg,color-mix(in srgb,var(--accent) 13%,transparent),transparent 80%),repeating-linear-gradient(0deg,transparent 0 39px,color-mix(in srgb,var(--accent) 14%,transparent) 40px 41px);background-size:100% 100%}
[data-world=fluid] .scene:after{inset:8px 8px 8px auto;width:9px;border:0;border-right:2px solid var(--accent);background:repeating-linear-gradient(0deg,transparent 0 12px,var(--accent) 12px 13px);opacity:.4}
[data-world=fluid] .lab-panel{border-radius:28px 28px 12px 12px}
[data-world=fluid] .readouts{border-top:3px double var(--accent)}
/* Waves: an oscilloscope screen with a subdued phosphor grid. */
[data-world=wave] .scene{background-color:color-mix(in srgb,var(--screen) 65%,#020806);background-size:20px 20px;box-shadow:inset 0 0 55px #0008}
[data-world=wave] .scene svg{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 22%,transparent))}
[data-world=wave] .scene:after{border-radius:20px;border-color:color-mix(in srgb,var(--accent) 26%,transparent)}
[data-world=wave] .readout{background:var(--screen)}
/* Electricity: circuit-board spacing and component-style readouts. */
[data-world=electric] .lab-panel{border-radius:8px}
[data-world=electric] .scene{background-image:radial-gradient(color-mix(in srgb,var(--accent) 24%,transparent) 1px,transparent 1px);background-size:18px 18px}
[data-world=electric] .readouts{padding:10px;gap:10px;background:var(--screen)}
[data-world=electric] .readout{border:1px solid var(--edge);border-radius:5px;background:var(--page)}
[data-world=electric] #station-symbol{border-radius:4px;border-inline:4px double var(--accent)}
/* Optics: the measured rail of an optical bench. */
[data-world=optic] .scene{background-image:linear-gradient(180deg,transparent 0 49.5%,color-mix(in srgb,var(--accent) 10%,transparent) 50%,transparent 50.5%);background-size:100% 100%}
[data-world=optic] .scene:after{inset:auto 12px 4px;height:7px;border:0;border-bottom:1px solid var(--accent);background:repeating-linear-gradient(90deg,var(--accent) 0 1px,transparent 1px 12px);opacity:.4}
[data-world=optic] .lab-panel{border-radius:3px 22px 3px 22px}
[data-world=optic] #station-symbol{border-radius:50% 4px 50% 4px}
@media(max-width:1150px){.controls-head{flex-wrap:wrap;gap:10px}.instrument-caption{padding-inline:15px}.observation{margin-inline:16px}.playback{margin-inline-start:auto}}
@media(max-width:900px){.station{background:var(--panel)}.station.active{background:var(--soft)}}
@media(max-width:650px){.station-heading{gap:12px;min-height:100px}.station-heading>div:first-child{max-width:calc(100% - 98px)}.station-heading h1{font-size:1.43rem}.station-heading .eyebrow{font-size:.65rem}#station-symbol{flex-basis:86px;padding:10px 6px}.instrument-glyph{font-size:2rem}#station-symbol small{font-size:.5rem}.station-heading p:last-child{font-size:.76rem;line-height:1.8}.scene{height:240px}.instrument-caption{font-size:.59rem;gap:8px;padding:8px 12px}.lab-head h2{font-size:.92rem}#learning{background:var(--panel);border-color:var(--edge)}.observation{margin-top:13px;padding:10px 12px}.observation-title{font-size:.69rem}.observation-title>small{font-size:.6rem}.compare-values bdi{font-size:1.15rem}.playback{gap:5px}.playback .quiet{font-size:.65rem}.controls-head{gap:8px}.control label{font-size:.84rem}.experiment{font-size:.76rem;padding:7px 10px}}
@media(max-width:370px){.header-actions{gap:4px}.progress{font-size:.62rem}.brand{font-size:1rem}.controls-head>span{font-size:.8rem}.playback{margin-inline-start:0;width:100%}.playback button{flex:1}}
@media(prefers-reduced-motion:reduce){.scene svg{filter:none}}