:root{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color-scheme:dark;--bg:#0e1825;--panel:#172536;--text:#eaf3fb;--muted:#acbdd0;--line:#35485e;--accent:#ffc38c;--input:#0f1b2a;background:var(--bg);color:var(--text)}:root[data-theme=light]{color-scheme:light;--bg:#eef4fa;--panel:#fff;--text:#183248;--muted:#506779;--line:#c5d5e2;--accent:#934809;--input:#edf4fa}*{box-sizing:border-box}body{margin:0;padding:20px max(16px,env(safe-area-inset-right)) max(85px,env(safe-area-inset-bottom));line-height:1.5}header{max-width:1500px;margin:auto auto 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}h1{font-size:clamp(23px,3vw,34px);margin:0}h2{font-size:18px;margin:0 0 14px}p{margin:8px 0}a{color:var(--accent)}button,input{font:inherit}button{min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--input);color:var(--text);padding:9px 14px;cursor:pointer}button[aria-pressed=true]{border-color:var(--accent)}button:disabled{opacity:.5}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}header button:first-of-type{margin-left:auto}main{display:grid;grid-template-columns:230px minmax(300px,1fr) 330px;gap:16px;max-width:1500px;margin:auto}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;min-width:0}.controls button{width:100%;margin:5px 0}.controls label{display:block;margin-top:24px}.controls output{float:right;color:var(--accent)}input[type=range]{width:100%;height:40px;accent-color:var(--accent)}.note{font-size:13px;color:var(--muted)}.mass{font-size:42px;line-height:1;font-weight:850;letter-spacing:-1px;color:var(--accent);display:block}.mass-label{font-size:13px;color:var(--muted)}.stage{font-weight:650;color:var(--accent)}.scene-top{display:flex;justify-content:space-between;gap:16px}.temperature{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums}.apparatus{height:360px;position:relative;overflow:hidden}.vessel{position:absolute;left:50%;transform:translateX(-50%);bottom:54px;width:65%;max-width:270px;height:235px;border:4px solid #81acbf;border-top:0;border-radius:0 0 26px 26px;background:linear-gradient(90deg,#5ba7cb18,transparent,#5ba7cb18);overflow:hidden}.liquid{position:absolute;bottom:0;width:100%;background:linear-gradient(#50bfea9c,#238bcfc9);transition:height .1s linear;border-top:2px solid #a3e5ff}.ice{position:absolute;left:50%;top:55%;width:150px;height:140px;border-radius:20px;background:linear-gradient(135deg,#f6fdff,#91d6ef 45%,#d0f2ff);border:2px solid #edfcff;box-shadow:inset 8px 5px 15px #ffffff70;transform-origin:center;transition:transform .1s linear}.ice:after{content:'';position:absolute;inset:18px;border:2px solid #ffffff80;transform:rotate(12deg);border-radius:12px}.heater{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);height:38px;width:76%;max-width:310px;border-radius:12px;background:#344358;border:2px solid #63788f}.heater:before{content:'';position:absolute;left:10%;right:10%;top:-9px;height:9px;border-radius:10px;background:#596a7f}.heating .heater:before{background:#fa8556;box-shadow:0 0 20px #ff8b58}.bubbles{position:absolute;inset:0;opacity:0}.boiling .bubbles,.boiling .steam{opacity:1}.bubbles i{position:absolute;bottom:0;width:9px;height:9px;border:1px solid #e0f8ff;border-radius:50%;animation:bubble 1.5s infinite ease-in}.steam{position:absolute;left:25%;width:50%;top:8px;height:100px;opacity:0}.steam i{position:absolute;bottom:0;width:36px;height:36px;border-radius:50%;background:#bcd9e64d;filter:blur(6px);animation:steam 2.8s infinite ease-out}.frozen-animation i{animation-play-state:paused}@keyframes bubble{from{transform:translateY(0) scale(.5);opacity:0}30%{opacity:.9}to{transform:translateY(-150px) scale(1.5);opacity:0}}@keyframes steam{from{transform:translateY(0) scale(.6);opacity:0}25%{opacity:.7}to{transform:translate(18px,-75px) scale(2);opacity:0}}.meter{font-variant-numeric:tabular-nums}.meter-total{padding:18px;border-radius:12px;background:var(--input);margin:16px 0}.meter-total strong{font-size:36px;color:var(--accent)}table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;padding:12px 0;border-bottom:1px solid var(--line)}td:last-child,th:last-child{text-align:right}tr.target{color:var(--accent);font-weight:700}.result{padding:14px;border-left:3px solid var(--accent);background:var(--input);margin-top:18px}.track{height:6px;background:var(--line);border-radius:5px;overflow:hidden;margin:15px 0}.track>div{height:100%;background:var(--accent)}footer{max-width:1500px;margin:20px auto;color:var(--muted);font-size:13px}@media(max-width:1100px){main{grid-template-columns:220px minmax(0,1fr)}.meter{grid-column:1/-1}.apparatus{height:350px}}@media(max-width:640px){main{display:flex;flex-direction:column}.experiment{order:0}.meter{order:1}.controls{order:2}header{gap:10px}header button:first-of-type{margin:0}.panel{padding:16px}.mass{font-size:40px}.temperature{font-size:26px}.apparatus{height:320px}.vessel{height:210px}.ice{width:130px;height:120px}}@media(prefers-reduced-motion:reduce){.steam i,.bubbles i{animation-duration:6s!important}}

canvas.apparatus{display:block;width:100%;height:360px}.meter-total{position:relative}.heat-tag{position:relative;margin:18px 0 0 8px;padding:12px 14px;border:2px solid var(--accent);border-radius:17px 17px 17px 4px;background:var(--panel);color:var(--accent);font-weight:800;font-size:18px;line-height:1.35;box-shadow:3px 4px 0 var(--line);animation:tag-pop .3s ease-out;transform-origin:28px 0}.heat-tag[hidden]{display:none}.heat-tag:before{content:'';position:absolute;top:-12px;left:25px;width:19px;height:19px;background:var(--panel);border-left:2px solid var(--accent);border-top:2px solid var(--accent);transform:rotate(45deg)}@keyframes tag-pop{from{opacity:0;transform:scale(.8) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(max-width:640px){canvas.apparatus{height:300px}}@media(prefers-reduced-motion:reduce){.heat-tag{animation:none}}

/* Grouping, blue selected states and compact fields shared with the phase-transition controls. */
.controls{--control-accent:#5ebefa;--control-button:#202e40;--control-stage:#0a111b;align-self:start;border-radius:16px;padding:16px;background:#141e2c;max-height:calc(100dvh - 125px);overflow:auto}
:root[data-theme=light] .controls{--control-accent:#176ca5;--control-button:#e6eff7;--control-stage:#f5f9fc;background:#fff}
.controls h2{font-size:17px;margin:0 0 14px}.controls fieldset{min-width:0;border:0;border-bottom:1px solid var(--line);padding:8px 0 16px;margin:10px 0 16px}.controls legend{color:var(--control-accent);font-weight:650;font-size:15px;padding:0 5px 0 0}.controls button{background:var(--control-button);border-radius:9px;padding:8px 10px;min-height:44px;margin:0 0 8px;touch-action:manipulation}.controls button:hover:not(:disabled),.controls button[aria-pressed=true]{border-color:var(--control-accent);background:color-mix(in srgb,var(--control-accent) 18%,var(--control-button))}.controls label{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:6px 0;gap:6px}.controls input[type=number]{width:82px;min-height:44px;background:var(--control-stage);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:6px;font:inherit}.controls input[type=range]{accent-color:var(--control-accent);height:36px}.controls output{float:none;color:var(--control-accent);font-variant-numeric:tabular-nums}.controls .control-bounds{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.controls .buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.controls .buttons button{padding:7px 2px;font-size:13px;margin:0}.controls .speed-label{margin-top:12px}.controls #pause:not(:disabled){background:color-mix(in srgb,var(--control-accent) 22%,var(--control-button));border-color:var(--control-accent);font-weight:650}.sample-note{border-top:1px solid var(--line);padding-top:14px;margin-top:8px;font-size:12px;color:var(--muted)}.sample-note>span{font-weight:650;color:var(--control-accent)}.sample-note p{margin:5px 0;color:var(--text);font-size:13px}.sample-note small{font-size:12px}@media(max-width:1100px) and (min-width:641px){main{grid-template-columns:230px minmax(0,1fr)}}@media(max-width:640px){.controls{max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;order:1}.controls h2,.run-controls,.sample-note{grid-column:1/-1}.controls h2{margin:0}.controls fieldset{margin:0;padding-bottom:12px}.controls .buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.run-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.run-controls button{margin:0}.sample-note{margin:0}.meter{order:2}}@media(max-width:360px){.controls{grid-template-columns:1fr}.controls .buttons{grid-template-columns:repeat(4,minmax(0,1fr))}}