:root{color-scheme:dark;--copper:#dca269;--cream:#f5ecd9}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at 35% 15%,#432b20 0, #241913 42%,#15100c 85%);color:var(--cream);font:16px/1.55 system-ui,sans-serif;padding:40px 24px}body:before{content:"";position:fixed;inset:14px;border:1px solid #dca26922;pointer-events:none}.entrance{width:min(360px,100%);text-align:center}.brand{position:relative;width:260px;max-width:90%;margin:45px auto 38px;isolation:isolate}.original svg{display:block;width:100%;height:auto;overflow:visible}.steam{position:absolute;left:0;bottom:0;width:100%;height:auto;overflow:visible;pointer-events:none}.steam path{stroke-width:22;opacity:0;transform-origin:22% 55%}.playing .steam path{animation:steam-rise 3000ms 650ms ease-out both}.playing .steam path:nth-child(2){animation-delay:750ms;stroke-width:30}.playing .steam path:nth-child(3){animation-delay:850ms;stroke-width:17}.eyebrow{font-size:10px;letter-spacing:.22em;color:var(--copper);margin:0 0 12px}h1{font:36px/1.2 Georgia,serif;font-weight:400;margin:0 0 12px}.intro{color:#c2b4a4;margin:0 0 30px;font-size:14px}form{text-align:left}label{font-size:13px;color:#dbcbb8}input,button{font:inherit}input{width:100%;padding:13px 15px;border:1px solid #dca26966;border-radius:5px;background:#15100c80;color:var(--cream);margin-top:8px}button[type=submit],#replay{width:100%;padding:14px 20px;border:1px solid var(--copper);border-radius:5px;color:#21150e;background:var(--copper);font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center}button:disabled{cursor:wait;opacity:.65}.error{font-size:13px;color:#ffd9b4;min-height:20px;margin:8px 0}.options{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin-top:14px}#sound{border:0;background:none;color:#d7c5b1;min-height:44px;padding:10px 12px;font-size:13px;cursor:pointer}#skip{color:var(--copper);font-size:13px;padding:10px 4px;min-height:44px}input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #f4cfaa;outline-offset:4px}#status{font-size:13px;color:var(--copper);min-height:20px;margin:10px 0}.footnote{font-size:11px;color:#aa9784;margin:24px 0 0} [hidden]{display:none!important}
@keyframes steam-rise{
 0%{opacity:0;transform:translate(0,0) scale(.7) rotate(-4deg);stroke-dasharray:120 600;stroke-dashoffset:180}
 22%{opacity:.58;transform:translate(35px,-35px) scale(.9) rotate(5deg)}
 45%{opacity:.5;transform:translate(-35px,-130px) scale(1.05) rotate(-7deg)}
 68%{opacity:.35;transform:translate(50px,-230px) scale(1.18) rotate(7deg)}
 100%{opacity:0;transform:translate(-15px,-400px) scale(1.35) rotate(-5deg);stroke-dasharray:420 600;stroke-dashoffset:-100}
}
@media(max-width:360px){body{padding:24px}h1{font-size:30px}.brand{width:230px;margin-top:30px}}
@media(prefers-reduced-motion:reduce){.playing .steam path,.playing .ladle,.playing .water{animation:none!important}}

.ladle{transform-origin:1350px 500px}.water{opacity:0;stroke-dasharray:3000;stroke-dashoffset:3000}
.playing .ladle{animation:ladle-pour 1700ms cubic-bezier(.4,0,.2,1) both}
.playing .water{animation:water-pour 1700ms ease-out both}
@keyframes ladle-pour{0%,100%{transform:translateY(0) rotate(0deg)}25%,55%{transform:translate(2650px,-1200px) rotate(-35deg)}90%{transform:translateY(0) rotate(0deg)}}
@keyframes water-pour{0%,25%{opacity:0;stroke-dashoffset:3000}29%{opacity:.75}48%{opacity:.65;stroke-dashoffset:0}55%,100%{opacity:0;stroke-dashoffset:-3000}}
/* Explicit on/off control: readable label plus visible state indicator. */
#sound{display:inline-flex;align-items:center;gap:10px;border:1px solid #dca26970;border-radius:999px;background:#21170f;padding:10px 16px;color:#f0d4b7;min-width:148px;justify-content:center}
#sound::before{content:"";display:block;width:10px;height:10px;border:1px solid #dca269;border-radius:50%;background:transparent}
#sound[aria-pressed="true"]{background:#dca269;color:#21150e;border-color:#dca269}
#sound[aria-pressed="true"]::before{background:#21150e;border-color:#21150e}
#sound:hover{border-color:#f5d4b1}