:root{color-scheme:dark;--copper:#df9f64;--cream:#f5ead7;--muted:#c3b29e}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;background:radial-gradient(ellipse at 35% 15%,#432b20 0,#241913 42%,#15100c 85%);color:var(--cream);font:1rem/1.6 'Segoe UI',Arial,sans-serif;padding:32px 24px}body:before{content:"";position:fixed;inset:14px;border:1px solid #df9f642a;pointer-events:none}.entrance{width:min(360px,100%);min-width:0;text-align:center}.ritual{position:relative;width:260px;height:132px;max-width:90%;margin:0 auto 18px;isolation:isolate}.ladle-art{display:block;width:100%;height:100%;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:.875rem;letter-spacing:.12em;color:var(--copper);margin:0 0 10px}h1{font:400 clamp(2.3rem,7vw,3rem)/1.12 Georgia,serif;margin:0 0 16px;letter-spacing:-.025em}.intro{color:var(--muted);margin:0 0 26px;font-size:1rem}form{text-align:left}label{font-size:.875rem;color:var(--cream)}input,button{font:inherit}input{width:100%;min-width:0;min-height:52px;padding:12px 15px;border:1px solid #987553;border-radius:5px;background:#15100c80;color:var(--cream);margin-top:8px}button[type=submit]{width:100%;min-height:52px;padding:13px 20px;border:1px solid var(--copper);border-radius:5px;color:#241811;background:var(--copper);font-weight:650;cursor:pointer}button[type=submit]:hover{background:#edba88}button[type=submit]:active{background:#d3945e}button:disabled{cursor:wait}button[aria-busy=true]{background:#df9f64;color:#241811}input[aria-invalid=true]{border-color:#f2bf9a}.error{font-size:.875rem;color:#f2bf9a;min-height:1.6em;margin:8px 0 10px}.options{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px}#sound{border:1px solid #df9f6470;border-radius:999px;background:#21170f;color:var(--cream);min-height:44px;padding:9px 16px;font-size:.875rem;cursor:pointer}#sound[aria-pressed=true]{background:var(--copper);color:#241811}#sound:hover{border-color:#edba88}#skip{color:#edba88;font-size:.875rem;padding:10px 4px;min-height:44px}input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #edba88;outline-offset:4px}#status{font-size:.875rem;color:var(--copper);min-height:1.6em;margin:10px 0}.note{font-size:.875rem;color:var(--muted);margin:12px 0 0}[hidden]{display:none!important}
.ladle-art .fil0{fill:var(--copper)}.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}}
@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 20px}.ritual{width:220px;height:110px;margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.playing .steam path,.playing .ladle,.playing .water{animation:none!important}}

/* Длинные русские названия не расширяют сетку на узком экране. */
body{grid-template-columns:minmax(0,1fr)}

.ladle-art .fil0{fill:#df9f64}