:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; color: #172033; background: #f7f9fd; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
.lab { max-width: 960px; margin: 0 auto; padding: 22px; }
header { margin-bottom: 16px; }
.eyebrow { margin: 0 0 5px; color: #3157b7; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(24px, 5vw, 38px); }
header > p:last-child { margin: 7px 0 0; color: #56627a; }
.layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .8fr); gap: 20px; align-items: start; }
.visual { min-width: 0; }
svg { display: block; width: 100%; height: auto; min-height: 320px; border: 1px solid #c8d1e0; border-radius: 14px; background: #fff; }
.controls { display: grid; gap: 14px; }
label { display: grid; gap: 7px; font-weight: 650; }
select { width: 100%; min-height: 46px; padding: 8px 11px; border: 1px solid #b7c1d2; border-radius: 10px; color: inherit; background: #fff; font-size: 16px; }
input[type="range"] { width: 100%; min-height: 36px; accent-color: #3157b7; }
output { justify-self: end; color: #3157b7; }
fieldset { display: grid; gap: 7px; margin: 0; padding: 12px; border: 1px solid #c8d1e0; border-radius: 10px; }
legend { padding: 0 5px; font-weight: 650; }
label.choice { display: flex; min-height: 44px; align-items: center; gap: 9px; font-weight: 500; }
label.choice input { width: 20px; height: 20px; accent-color: #3157b7; }
button { min-height: 46px; padding: 9px 14px; border: 1px solid #abb6c9; border-radius: 10px; color: inherit; background: #fff; cursor: pointer; }
button.primary { border-color: #3157b7; color: #fff; background: #3157b7; }
.result { padding: 14px; border-left: 5px solid #8090aa; border-radius: 8px; background: #edf1f8; }
.result.correct { border-color: #138a62; background: #e6f7ef; }
.result.incorrect { border-color: #c64141; background: #fff0f0; }
.glass, .tube { fill: none; stroke: #62708a; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.water { fill: #8bd1ed; opacity: .6; }
.liquid { fill: #7cb5e6; opacity: .8; }
.bubble { fill: #c8efff; stroke: #3686b0; stroke-width: 3; animation: rise 1.2s ease-in-out infinite alternate; }
.diagram-label, .ph-label { fill: #27344b; font-size: 17px; font-weight: 650; }
.flame { fill: #ef6c42; }
.flame-core { fill: #ffd45d; }
.person { fill: #d9e1ef; stroke: #62708a; stroke-width: 4; }
.person-line, .electrode, .ph-scale { stroke: #62708a; stroke-width: 7; stroke-linecap: round; }
#mixture { fill: #e4b93f; opacity: .8; transition: fill .2s ease; }
#ph-marker { fill: #27344b; }
.gas-fill { fill: #a3dced; opacity: .75; transition: height .45s ease, y .45s ease; }
.gas-fill.oxygen { fill: #bad2ff; }
@keyframes rise { to { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } #mixture, .gas-fill { transition: none; } }
@media (max-width: 680px) { .lab { padding: 17px 12px; } .layout { grid-template-columns: 1fr; } svg { min-height: 0; } .visual { order: 1; } .controls { order: 2; } }
@media (prefers-color-scheme: dark) { :root { color: #edf2ff; background: #101522; } header > p:last-child { color: #b4bfd4; } svg, select, button { color: #edf2ff; background: #141c2b; border-color: #46536b; } fieldset { border-color: #46536b; } .diagram-label, .ph-label { fill: #edf2ff; } .glass, .tube, .person-line, .electrode, .ph-scale { stroke: #aebbd3; } .result { background: #252e40; } .result.correct { background: #12392f; } .result.incorrect { background: #431f25; } }