:root{--ink:#173b57;--muted:#55758a;--paper:#fff8d9;--card:#fffefa;--teal:#24cdb3;--orange:#ffb72e;--pink:#ff5f86;--purple:#a76ce8;--sky:#79d9ff;--line:#cce3e5;--shadow:0 18px 0 rgba(23,59,87,.08),0 26px 60px rgba(23,59,87,.13);--progress:0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 8% 8%,#fff 0 4%,transparent 4.2%),radial-gradient(circle at 92% 12%,#ffd7e2 0 6%,transparent 6.2%),linear-gradient(180deg,#dff7ff 0 31%,#fff8d9 31% 100%);color:var(--ink);font-family:"Trebuchet MS",Aptos,"Segoe UI",Arial,sans-serif;min-width:280px}body::before,body::after{content:"";position:absolute;z-index:-1;border-radius:999px;background:#fff;box-shadow:45px 10px 0 10px #fff,88px 0 0 2px #fff}body::before{width:74px;height:27px;top:128px;left:5%}body::after{width:58px;height:22px;top:195px;right:10%;transform:scale(.8)}button,input{font:inherit}button{color:inherit}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:100;background:#fff;padding:.8rem 1rem;border-radius:.6rem}.skip-link:focus{top:1rem}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100% - 1240px)/2));border-bottom:3px solid var(--ink);background:#fffdf2;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:.75rem;color:inherit;text-decoration:none}.brand-mark{display:grid;place-items:center;width:49px;height:49px;border:3px solid var(--ink);border-radius:18px 18px 14px 20px;background:var(--teal);color:#fff;font-size:1.65rem;transform:rotate(-5deg);box-shadow:4px 4px 0 var(--ink)}.brand strong,.brand small{display:block}.brand strong{font-size:.9rem;letter-spacing:.15em}.brand small{font-size:.74rem;color:var(--muted);margin-top:.2rem}.header-actions{display:flex;align-items:center;gap:.65rem}.icon-button,.sound-toggle{border:2px solid var(--ink);background:#fff;border-radius:999px;min-height:42px;padding:.55rem .85rem;font-size:.82rem;box-shadow:3px 3px 0 var(--ink)}.icon-button{cursor:pointer;font-weight:900}.sound-toggle{display:flex;align-items:center;gap:.34rem;cursor:pointer}.sound-toggle input{accent-color:var(--teal)}
main{max-width:1240px;margin:0 auto;padding:62px 24px 70px}.hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:58px;align-items:end;margin-bottom:42px}.eyebrow,.section-kicker{font-size:.72rem;line-height:1.2;font-weight:900;letter-spacing:.16em;color:#087e75;margin:0 0 .65rem}.hero h1{font-size:clamp(2.9rem,7vw,6.15rem);line-height:.87;letter-spacing:-.065em;margin:0;max-width:870px;text-shadow:4px 5px 0 #fff}.title-dot{color:var(--pink)}.lede{font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.55;max-width:760px;color:#294f67;margin:1.6rem 0 .7rem;font-weight:700}.instruction{max-width:720px;color:var(--muted);font-size:.95rem;line-height:1.6;margin:0}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat{border:3px solid var(--ink);border-radius:25px;padding:20px;min-height:135px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:5px 6px 0 var(--ink)}.stat span{font-size:.65rem;letter-spacing:.12em;font-weight:900}.stat strong{font-size:2.45rem;line-height:1}.stat small{font-size:.7rem;opacity:.75}.stat-points{background:#ffd04e;transform:rotate(-1.5deg)}.stat-streak{background:#b58aff;color:var(--ink);transform:rotate(1deg)}
.timer-card{background:#65d5ff;color:var(--ink);border:4px solid var(--ink);border-radius:38px;box-shadow:var(--shadow),7px 8px 0 var(--ink);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 340px}.timer-display{padding:28px 32px 25px;min-width:0;background:radial-gradient(circle at 17% 18%,rgba(255,255,255,.65) 0 4px,transparent 5px),radial-gradient(circle at 82% 8%,rgba(255,255,255,.7) 0 7px,transparent 8px),#72d9ff}.time-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}.time-heading .section-kicker{color:#07596e}.status{margin:0;color:var(--ink);font-size:.92rem;font-weight:800}.time{font-size:clamp(3.35rem,7vw,6.7rem);font-weight:900;letter-spacing:-.075em;line-height:.8;font-variant-numeric:tabular-nums;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:24px 24px 24px 8px;padding:.12em .2em;box-shadow:5px 6px 0 var(--ink);transform:rotate(1deg)}.lab-shell{position:relative;border:3px solid var(--ink);border-radius:28px;background:linear-gradient(#fffef2 0 73%,#b7ee9b 73% 100%);overflow:hidden;padding:12px 14px 10px}.lab-doodles{position:absolute;inset:10px 18px auto;display:flex;justify-content:space-between;color:var(--pink);font-size:1.3rem;font-weight:900;pointer-events:none}.lab-doodles span:nth-child(2){color:var(--teal);animation:floaty 2.4s ease-in-out infinite}.lab-doodles span:nth-child(3){color:var(--orange);animation:twinkle 1.8s ease-in-out infinite}.lab-doodles span:nth-child(4){color:var(--purple);transform:rotate(12deg)}.lab{display:block;width:100%;height:auto;min-height:280px;overflow:visible}.bench{fill:none;stroke:#517383;stroke-width:5;stroke-linecap:round}.glass{fill:rgba(255,255,255,.42);stroke:#456b7d;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.tube{fill:none;stroke-width:15}.rim{fill:none;stroke:#345c70;stroke-width:9;stroke-linecap:round}.measure{fill:none;stroke:#668b98;stroke-width:5;stroke-linecap:round}.liquid-flow{fill:none;stroke:url(#tubeGradient);stroke-width:10;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--progress));transition:stroke-dashoffset .5s linear;filter:drop-shadow(0 2px 0 #fff)}.vessel{transform-box:fill-box;transform-origin:center bottom}.vessel.current{animation:wobble 1.1s ease-in-out infinite}.face{fill:var(--ink);stroke:none;opacity:.88}.face path{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round}.bubble{fill:#fff;opacity:.8;animation:rise 1.5s ease-in infinite}.b2{animation-delay:-.7s}.foam{fill:#ffcf4a;opacity:0;transform-origin:884px 88px;transition:opacity .3s}.foam>circle:nth-child(2){fill:#ff80a1}.foam>circle:nth-child(3){fill:#56dbc5}.foam>circle:nth-child(4){fill:#b98beb}.foam text{fill:var(--ink);font:900 29px "Trebuchet MS",sans-serif;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:6}.confetti{fill:var(--pink);stroke:var(--purple);stroke-width:7;stroke-linecap:round}.fizzing .foam{opacity:1;animation:pop .75s cubic-bezier(.2,1.8,.3,1) both}.fizzing .confetti{animation:confetti .9s ease-out infinite alternate}.stage-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;color:#55727e;margin:4px 10px}.stage-row span{font-size:.69rem;text-align:center;display:flex;justify-content:center;align-items:center;gap:.35rem;opacity:.62;transition:.2s}.stage-row i{width:11px;height:11px;border:2px solid #66848f;border-radius:50%}.stage-row .active{color:var(--ink);opacity:1}.stage-row .active i{background:var(--teal);border-color:var(--ink);box-shadow:0 0 0 4px rgba(34,189,167,.22)}.stage-row .current{font-size:.75rem}.stage-row .current i{animation:pulseDot .8s ease-in-out infinite alternate}
.control-panel{background:#fff5aa;color:var(--ink);padding:31px 28px;border-left:4px solid var(--ink)}.control-panel fieldset{border:0;padding:0;margin:0}.number-inputs{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:10px}.number-inputs label span,.quick-label{display:block;font-size:.7rem;font-weight:900;color:var(--ink);margin-bottom:.45rem}.number-inputs>span{font-size:2rem;font-weight:900;padding-bottom:.42rem}.number-inputs input{width:100%;height:62px;background:#fff;border:3px solid var(--ink);border-radius:17px;padding:0 12px;text-align:center;font-size:1.65rem;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;box-shadow:3px 4px 0 var(--ink)}.quick-label{margin:1.2rem 0 .5rem}.presets{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.presets button{border:2px solid var(--ink);background:white;border-radius:12px;padding:.62rem .15rem;font-size:.68rem;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}.primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}.primary-actions button,.secondary-actions button,.dialog-actions button,.complete-dialog button{min-height:48px;border:2px solid var(--ink);border-radius:15px;background:white;font-weight:900;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}.primary-actions .primary{grid-column:1/-1;background:var(--pink);color:#fff;border-color:var(--ink);font-size:1rem}.primary-actions button:disabled{opacity:.42;cursor:not-allowed}.secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.secondary-actions button{min-height:42px;font-size:.76rem;background:#b9f3e8}.error{color:#b02545;background:#ffe4e9;border:2px solid #b02545;border-radius:10px;padding:.5rem;font-size:.72rem;margin:.6rem 0 0}
.history-card{margin-top:34px;background:var(--card);border:3px solid var(--ink);border-radius:29px;padding:26px 30px;box-shadow:6px 7px 0 var(--ink)}.history-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.history-head h2{margin:0;font-size:1.55rem}.text-button{background:#ffd8e2;border:2px solid var(--ink);border-radius:999px;text-decoration:none;font-weight:900;cursor:pointer;padding:.65rem .9rem}.empty{margin:25px 0 8px;color:var(--muted)}.table-wrap{overflow-x:auto;margin-top:18px}table{width:100%;border-collapse:collapse;min-width:470px}th,td{text-align:left;padding:13px 12px;border-bottom:2px dashed var(--line);font-size:.87rem}th{font-size:.68rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}tbody td:nth-child(2){color:#148676;font-weight:900}
footer{max-width:1240px;margin:0 auto;padding:0 24px 45px;display:flex;justify-content:space-between;gap:30px;color:var(--muted);font-size:.72rem;line-height:1.5}footer p{max-width:550px}dialog{width:min(92vw,460px);border:0;border-radius:24px;padding:0;color:var(--ink);box-shadow:0 30px 90px rgba(6,25,36,.35)}dialog::backdrop{background:rgba(11,36,52,.68);backdrop-filter:blur(4px)}dialog form{padding:32px;text-align:center}.dialog-icon{font-size:2.5rem}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.dialog-actions .danger{background:#c83353;color:#fff;border-color:#c83353}.complete-dialog .celebration{font-size:2rem;color:var(--orange)}.complete-dialog strong{font-size:2rem;color:var(--teal)}.complete-dialog .primary{background:var(--pink);color:white;border:0;padding:0 2rem;margin-top:12px}
button:focus-visible,input:focus-visible,a:focus-visible{outline:4px solid #ff8bb0;outline-offset:3px}button:not(:disabled):hover{transform:translateY(-2px) rotate(-1deg);filter:brightness(1.02)}@keyframes rise{0%{transform:translateY(8px) scale(.7);opacity:0}40%{opacity:.9}100%{transform:translateY(-34px) scale(1.15);opacity:0}}@keyframes pop{0%{transform:scale(.4) translateY(20px) rotate(-8deg)}70%{transform:scale(1.18) translateY(-8px) rotate(5deg)}100%{transform:scale(1) rotate(0)}}@keyframes wobble{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-7px)}}@keyframes pulseDot{to{transform:scale(1.45);box-shadow:0 0 0 7px rgba(255,95,134,.25)}}@keyframes floaty{50%{transform:translateY(-8px) rotate(10deg)}}@keyframes twinkle{50%{transform:scale(1.45) rotate(15deg)}}@keyframes confetti{to{transform:scale(1.08) translateY(-5px)}}
@media(max-width:900px){main{padding-top:44px}.hero{grid-template-columns:1fr;gap:28px}.stats{max-width:500px}.timer-card{grid-template-columns:1fr}.control-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;border-left:0;border-top:4px solid var(--ink)}.control-panel>.section-kicker,.control-panel fieldset{grid-column:1/-1}.primary-actions,.secondary-actions{margin-top:20px}.secondary-actions{align-content:end}.timer-display{padding:25px 20px}.lab{min-height:0}}
@media(max-width:580px){.topbar{height:auto;min-height:74px;padding:12px 16px}.brand small,.sound-toggle>span:not(:first-child),.sound-toggle strong{display:none}.sound-toggle{padding:.55rem}.header-actions{gap:.35rem}main{padding:35px 14px 55px}.hero h1{font-size:3.25rem}.hero{gap:22px}.stats{gap:8px}.stat{min-height:116px;padding:16px}.stat strong{font-size:2rem}.timer-card{border-radius:25px}.timer-display{padding:21px 12px}.time-heading{display:block}.time{display:block;margin:20px 0 15px;font-size:4.5rem}.lab-shell{padding:5px}.stage-row{gap:1px;margin:0}.stage-row span{display:block;font-size:.58rem}.stage-row i{display:block;margin:0 auto 4px}.control-panel{display:block;padding:25px 18px}.presets{grid-template-columns:repeat(3,1fr)}.secondary-actions{margin-top:8px}.history-card{padding:22px 18px}.history-head{align-items:flex-start}footer{display:block;padding:0 18px 35px}.lab .measure{display:none}}
@media(max-width:360px){.hero h1{font-size:2.7rem}.stats{grid-template-columns:1fr}.time{font-size:3.8rem}.primary-actions,.secondary-actions{grid-template-columns:1fr}.primary-actions .primary{grid-column:auto}.number-inputs input{font-size:1.25rem}.history-head{display:block}.text-button{margin-top:15px;padding:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}