:root{--bg: #0c0e0d;--ink: #e8e6e1;--muted: color-mix(in srgb, var(--ink) 58%, var(--bg));--line: color-mix(in srgb, var(--ink) 16%, var(--bg));--panel: color-mix(in srgb, var(--bg) 84%, white);--salt: #e8b860;--vol: #8fb0f0;--hog: #5fe08a;--heat: #ff8a5c;--pab: #ffe27a;--sugar: #d9b98a;--msn: #7fd6d0;--perox: #b9a3ff;--yap: #f29bd1;--ease-out: cubic-bezier(.23, 1, .32, 1);--serif: "Newsreader", "Iowan Old Style", Georgia, serif;--sans: "Inter", system-ui, -apple-system, sans-serif;--mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;--charts-w: 360px;--toolbar-h: 128px;color-scheme:dark}:root[data-view=inside]{color-scheme:light;--bg: #e4e0da;--ink: #1d1b19;--panel: color-mix(in srgb, var(--bg) 80%, white);--salt: #c98a2b;--vol: #3d5a99;--hog: #2fa35a;--heat: #e0603a;--pab: #b8920e;--sugar: #8a6a3a;--msn: #23948c;--perox: #6d4aa8;--yap: #b8457f}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased;transition:background-color .4s ease,color .4s ease}button,select{font:inherit;color:inherit}#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}.warmth{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(120% 70% at 35% 100%,#ff6e2861,#ff6e2800 70%)}.label{font:500 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.p-title{position:fixed;top:24px;left:28px;pointer-events:none}.p-title h1{margin:0;font:italic 400 clamp(40px,4.6vw,64px)/.9 var(--serif);letter-spacing:-.02em}.p-title p{margin:8px 0 0;font:400 18px/1.35 var(--serif);color:var(--muted)}.p-top{position:fixed;top:24px;left:260px;right:calc(var(--charts-w) + 44px);display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.glow,.settings{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 70%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.glow-label{padding:0 8px 0 10px;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.glow button,.chip{border:0;background:transparent;padding:7px 12px;border-radius:999px;font:500 12.5px/1 var(--sans);color:var(--muted);cursor:pointer;transition:background-color .16s ease,color .16s ease}.glow button.on,.chip[aria-pressed=true]{background:var(--ink);color:var(--bg)}.settings{gap:4px;padding-left:12px}.select{display:flex;align-items:center;gap:6px;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.select select{text-transform:none;letter-spacing:0;font:500 12.5px/1 var(--sans);color:var(--ink);background:transparent;border:0;padding:6px 2px;cursor:pointer}.select select option{color:#1d1b19}.p-caption{position:fixed;left:28px;right:calc(var(--charts-w) + 44px);bottom:calc(var(--toolbar-h) + 34px);margin:0;text-align:center;pointer-events:none;font:400 clamp(18px,1.8vw,25px)/1.3 var(--serif);text-wrap:balance;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}.p-caption.out{opacity:0;transform:translateY(6px)}.glow-note{position:fixed;top:76px;left:260px;right:calc(var(--charts-w) + 44px);margin:0;text-align:center;font:500 12.5px/1.3 var(--sans);color:var(--muted);opacity:0;transition:opacity .25s ease;pointer-events:none}.glow-note.show{opacity:1}.p-charts{position:fixed;top:24px;right:20px;bottom:20px;width:var(--charts-w);display:flex;flex-direction:column;gap:10px;padding:14px 14px 12px;border-radius:18px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 62%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.charts-head{display:flex;justify-content:space-between;align-items:baseline}.clock{font:500 13px/1 var(--mono);color:var(--muted)}.sections{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin}.charts-empty{margin:auto 8px;text-align:center;font:italic 400 17px/1.4 var(--serif);color:var(--muted)}.section{display:grid;gap:4px;padding-bottom:12px;border-bottom:1px solid var(--line);animation:section-in .26s var(--ease-out)}.section:last-child{border-bottom:0}@keyframes section-in{0%{opacity:0;transform:translateY(-6px)}}.section-head{display:flex;justify-content:space-between;align-items:baseline}.section-head h3{margin:0;font:italic 400 19px/1.1 var(--serif)}.section-head .now{font:500 13px/1 var(--mono)}.section canvas.strip{width:100%;height:14px;display:block;border-radius:3px}.section canvas.chart{width:100%;height:74px;display:block}.p-note{margin:0;font:400 11.5px/1.4 var(--sans);color:var(--muted)}.p-note a{color:inherit}.toolbar{position:fixed;left:20px;right:calc(var(--charts-w) + 40px);bottom:20px;height:var(--toolbar-h);display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.85fr);gap:10px}.tool{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;min-width:0;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 62%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s ease,box-shadow .2s ease}.tool.active{border-color:var(--accent, var(--ink));box-shadow:0 0 0 1px var(--accent, var(--ink)) inset}.tool[data-stress=salt]{--accent: var(--salt)}.tool[data-stress=heat]{--accent: var(--heat)}.tool[data-stress=sugar]{--accent: var(--sugar)}.tool[data-stress=peroxide]{--accent: var(--perox)}.tool-art{display:grid;place-items:center;height:100%;min-height:0}.tool-text{min-width:0}.tool-text h2{margin:0;font:italic 400 21px/1 var(--serif)}.level{margin:5px 0 4px;font:500 13px/1 var(--mono);color:var(--accent, var(--muted))}.how{margin:0;font:400 12px/1.3 var(--sans);color:var(--muted)}.shaker-slot{width:52px;height:90px}.knob{width:64px;height:64px;border-radius:50%;cursor:grab;touch-action:none;outline:none}.knob:active{cursor:grabbing}.knob:focus-visible{box-shadow:0 0 0 2px var(--heat)}.knob svg{width:100%;height:100%;display:block}.sugar,.dropper,.pitcher{border:0;background:transparent;padding:0;cursor:pointer}.sugar svg{width:66px;height:60px;display:block}.sugar .cubes{transition:transform .26s var(--ease-out),opacity .26s var(--ease-out)}.sugar[aria-pressed=true] .cubes{transform:translateY(-14px);opacity:0}.dropper svg{width:34px;height:70px;display:block;transform-origin:50% 20%;transition:transform .16s var(--ease-out)}.dropper:active svg{transform:scale(.94,.9)}.pitcher svg{width:54px;height:62px;display:block;transform-origin:30% 80%;transition:transform .22s var(--ease-out)}.pitcher.pouring svg{transform:rotate(-38deg) translateY(-6px)}.sugar:focus-visible,.dropper:focus-visible,.pitcher:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:8px}.shaker{position:fixed;left:0;top:0;width:52px;height:90px;padding:0;border:0;background:transparent;z-index:5;cursor:grab;touch-action:none;will-change:transform;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}.shaker:active{cursor:grabbing}.shaker svg{width:100%;height:100%;display:block}.shaker:focus-visible{outline:2px solid var(--salt);outline-offset:6px;border-radius:12px}.fallback{position:fixed;inset:0;display:grid;place-items:center;padding:16px;font:400 18px var(--serif);text-align:center;background:var(--bg)}.fallback[hidden]{display:none}@media(hover:hover)and (pointer:fine){.glow button:not(.on):hover,.chip:not([aria-pressed=true]):hover{color:var(--ink)}.pitcher:hover svg{transform:rotate(-8deg)}.sugar:hover .cubes{transform:translateY(-3px)}}@media(prefers-reduced-motion:reduce){.p-caption{transition:opacity .2s ease;transform:none}.section{animation:none}.pitcher.pouring svg,.pitcher:hover svg,.sugar:hover .cubes{transform:none}}@media(max-width:1000px){:root{--toolbar-h: 112px}.p-title{top:14px;left:16px}.p-title h1{font-size:38px}.p-title p{display:none}.p-top{top:14px;left:150px;right:12px;justify-content:flex-end}.glow-note{top:104px;left:16px;right:16px}.p-charts{inset:auto 12px 12px;width:auto;height:31vh;padding:10px 12px}.p-note{display:none}.toolbar{left:12px;right:12px;bottom:calc(31vh + 22px);display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.tool{flex:0 0 172px;scroll-snap-align:start;grid-template-columns:52px 1fr}.tool-water{flex-basis:160px}.toolbar{-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent);padding-right:28px}.how{font-size:11.5px}.p-caption{left:16px;right:16px;bottom:calc(31vh + var(--toolbar-h) + 34px);font-size:18px}}@media(max-width:600px){.p-top{left:12px;top:64px;justify-content:center}.glow-label{display:none}}.how-btn{border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:var(--ink);color:var(--bg);font:500 12.5px/1 var(--sans);cursor:pointer;transition:transform .16s var(--ease-out)}.how-btn:active{transform:scale(.97)}.how-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.about{width:min(680px,calc(100vw - 32px));max-height:min(86vh,900px);padding:0;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--ink);box-shadow:0 30px 80px #00000073;overflow:hidden;opacity:1;transform:none;transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),overlay .22s allow-discrete,display .22s allow-discrete}.about[open]{display:flex;flex-direction:column}@starting-style{.about[open]{opacity:0;transform:translateY(8px) scale(.98)}}.about::backdrop{background:#00000080;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.about-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 26px 14px;border-bottom:1px solid var(--line)}.about-head h2{margin:0;font:italic 400 32px/1 var(--serif)}.about-head p{margin:6px 0 0;font:400 16px/1.3 var(--serif);color:var(--muted)}.about-close{width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:50%;background:transparent;font:400 22px/1 var(--sans);cursor:pointer}.about-close:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.about-body{overflow-y:auto;padding:0 26px 26px;scrollbar-width:thin}.about-toc{position:sticky;top:0;z-index:1;display:flex;gap:6px;padding:12px 0;background:var(--bg);overflow-x:auto;scrollbar-width:none}.about-toc a{flex:none;padding:5px 11px;border-radius:999px;border:1px solid var(--line);font:500 12px/1 var(--sans);color:var(--muted);text-decoration:none}.about-toc a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.about section{scroll-margin-top:50px;padding:14px 0 4px 14px;border-left:3px solid var(--accent, var(--line));margin-top:10px}.about [data-stress=salt]{--accent: var(--salt)}.about [data-stress=heat]{--accent: var(--heat)}.about [data-stress=sugar]{--accent: var(--sugar)}.about [data-stress=peroxide]{--accent: var(--perox)}.about h3{margin:0 0 6px;font:italic 400 23px/1.1 var(--serif)}.about p{margin:0 0 10px;font:400 14.5px/1.55 var(--sans);max-width:62ch}.about sup{font-size:.7em;line-height:0;margin-left:1px}.about sup a{color:var(--accent, var(--ink));text-decoration:none;font-weight:600;padding:0 1px}.about-refs{border-left:0!important;padding-left:0!important;border-top:1px solid var(--line);margin-top:18px!important}.about-refs ol{margin:0;padding-left:22px;font:400 12.5px/1.5 var(--sans);color:var(--muted)}.about-refs li{margin-bottom:6px;scroll-margin-top:50px}.about-refs li:target{color:var(--ink)}.about-refs a{color:var(--ink)}@media(hover:hover)and (pointer:fine){.about-toc a:hover{color:var(--ink);border-color:var(--accent, var(--ink))}.about-close:hover{background:var(--line)}}@media(prefers-reduced-motion:reduce){.about{transition:opacity .2s ease}@starting-style{.about[open]{transform:none}}}@media(max-width:600px){.about{width:calc(100vw - 16px);max-height:92vh}.about-head,.about-body{padding-left:16px;padding-right:16px}.how-btn{position:fixed;top:18px;right:12px}}