*{box-sizing:border-box}body{margin:0;font-family:"Comic Sans MS","Trebuchet MS",sans-serif;background:linear-gradient(#e8f7ff,#fff7e0);color:#223;min-height:100vh}
header{background:#5b3fd6;color:#fff;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}header h1{font-size:1.3em;margin:4px 0}
main{max-width:860px;margin:auto;padding:16px}.card{background:#fff;border-radius:18px;padding:16px;margin:12px 0;box-shadow:0 3px 10px #0002}
button{font:inherit;touch-action:manipulation;min-height:44px;font-size:1em;border:0;border-radius:14px;padding:10px 16px;margin:4px;background:#ffcf33;cursor:pointer;box-shadow:0 3px 0 #c99a00}button:disabled{opacity:.4;cursor:default}
button.alt{background:#7fe0c4;box-shadow:0 3px 0 #3aa}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.exp{text-align:left}.lock{background:#ddd;box-shadow:none}
.bench{display:flex;align-items:flex-end;gap:20px;justify-content:center;min-height:190px;background:#c9a27a;border-radius:14px;padding:16px}
.beaker{width:110px;height:150px;border:5px solid #9cc;border-top:0;border-radius:0 0 22px 22px;position:relative;overflow:hidden;background:#ffffff88}
.liquid{position:absolute;bottom:0;left:0;right:0;transition:all .8s}.bubbles{position:absolute;inset:0;font-size:22px;text-align:center;animation:rise 1s infinite}
@keyframes rise{from{transform:translateY(40px);opacity:1}to{transform:translateY(-60px);opacity:0}}
.prof{font-size:60px;text-align:center}.prof.singed{filter:grayscale(.6) brightness(.7)}.say{background:#fffbe6;border:3px solid #ffcf33;border-radius:16px;padding:10px}
.hidden{display:none!important}#boom{position:fixed;inset:0;background:radial-gradient(#fff700,#ff7b00 40%,#c00 70%,#0000);display:flex;align-items:center;justify-content:center;z-index:50;animation:flash 1.2s}
.blast{font-size:64px;font-weight:bold;color:#fff;text-shadow:0 0 10px #000;animation:pop 1.2s}
@keyframes pop{0%{transform:scale(.2)}50%{transform:scale(1.4)}100%{transform:scale(1)}}@keyframes flash{0%{opacity:0}10%{opacity:1}100%{opacity:.9}}
.shake{animation:shake .5s 2}@keyframes shake{0%,100%{transform:translate(0)}25%{transform:translate(-12px,6px)}50%{transform:translate(10px,-8px)}75%{transform:translate(-6px,-4px)}}
.smoke{font-size:30px;animation:rise 2s infinite}.ok{color:#087a3a;font-weight:bold}.bad{color:#b00;font-weight:bold}
.chip{display:inline-block;padding:10px 12px;min-height:44px;touch-action:manipulation;border-radius:12px;margin:3px;background:#eef;cursor:pointer;border:2px solid transparent}.chip.sel{border-color:#5b3fd6;background:#dcd5ff}
.danger{background:#ffe0e0}
.chip{font:inherit;font-size:1em;box-shadow:none;color:#223}
.readout{display:inline-block;font-family:monospace;font-size:1.3em;background:#222;color:#7f7;padding:6px 12px;border-radius:8px;margin:8px 0}
.bar{display:flex;align-items:center;gap:6px;margin:3px 0}.bar span:first-child{width:56px}.bar i{display:block;height:18px;background:#ff9f43;border-radius:6px}
button[aria-pressed=true].alt{outline:3px solid #5b3fd6}
@media (prefers-reduced-motion: reduce){.shake,#boom,.blast,.bubbles,.smoke{animation:none!important}.liquid{transition:none}}
.tip{background:#e8f7ff;border-left:6px solid #4aa3ff;border-radius:10px;padding:8px;margin:6px 0;color:#223;font-weight:normal}
.ph{margin:8px 0;font-size:16px}.phstrip{position:relative;height:26px;border-radius:13px;margin-top:22px;background:linear-gradient(90deg,#e0245e 0%,#ef5fa7 21%,#c060c0 43%,#7b4bb7 50%,#4a7fd0 57%,#3fae8f 71%,#7cc83c 86%,#d8d830 100%)}
.needle{position:absolute;top:-24px;transform:translateX(-50%);font-size:20px;transition:left 1s ease}
.phlab{display:flex;justify-content:space-between;font-weight:bold;font-size:16px}.phread{margin:4px 0}
.drop{font-size:44px;min-width:96px;min-height:96px;background:#bfe3ff;box-shadow:0 3px 0 #4aa3ff}
.rbar{height:18px;background:#eef;border-radius:9px;overflow:hidden;margin:6px 0}.rbar i{display:block;height:100%;background:#4aa3ff}
.detcard{font-size:1.5em;background:#fffbe6;border-radius:14px;padding:12px;text-align:center}
@media (prefers-reduced-motion: reduce){.needle{transition:none!important}}