*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at top,#33334d,#181c2b 75%);color:#f7e8cf;font:14px Tahoma,Arial,sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit;border:1px solid #81798a;border-radius:12px;background:#333347;padding:10px 12px}button:hover:not(:disabled){filter:brightness(1.15)}button:disabled{opacity:.5;cursor:default}button:focus-visible{outline:3px solid #ffdba0;outline-offset:3px}[hidden]{display:none!important}main{max-width:590px;margin:auto;padding:22px 18px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}header small{font:9px Arial;letter-spacing:2px;color:#c1b0b7}h1{font-size:30px;margin:8px 0}h1 span{color:#f0c388}nav{display:flex;gap:6px}nav button{font-size:10px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stats div{text-align:center;background:#363344;border:1px solid #645967;border-radius:15px;padding:11px;font-size:11px;color:#d5c8c6}.stats b{display:block;font-size:25px;color:#ffe1ad;margin-top:5px;font-weight:400}.timer{height:5px;background:#575063;margin:14px 3px;border-radius:5px;overflow:hidden;direction:ltr}.timer span{display:block;height:100%;width:100%;background:#d8ad83;transition:width .15s linear}.timer.urgent span{background:#ff9292}.counter{position:relative;display:flex;gap:20px;align-items:flex-end;min-height:330px;background:linear-gradient(#272c41,#333246);border:1px solid #6b6070;border-radius:22px;overflow:hidden;padding:24px 22px 38px}.window{position:absolute;left:25px;top:16px;width:160px;height:175px;border:7px solid #60586b;border-radius:90px 90px 0 0;background:linear-gradient(#171e38,#423954);box-shadow:inset 0 0 0 3px #252537}.window span{position:absolute;left:25px;top:17px;color:#f9dca4;font-size:58px;transform:rotate(-20deg)}.window i{position:absolute;right:23px;top:30px;color:#f6dab1;font-style:normal}.window i:nth-of-type(2){top:80px;right:50px}.window i:nth-of-type(3){top:105px;right:25px}.receipt{position:relative;z-index:2;flex:1;min-width:0;align-self:stretch;background:#f1e5cd;color:#483947;padding:15px;border-radius:5px 5px 13px 13px;box-shadow:0 7px 20px #0003;transform:rotate(1deg)}.receipt>small{font-size:10px;color:#7d665d}.receipt h2{font-size:18px;margin:10px 0}.receipt p{font-size:10px;color:#795f59;border-bottom:1px dashed #b49c89;padding-bottom:10px}ol{padding:0;list-style:none;margin:0}ol li{display:flex;gap:8px;align-items:center;padding:7px 0;font-size:12px;border-radius:6px}ol li.current{background:#e4c995;color:#312c35}ol li.done{color:#6b665a}ol li .number{font-size:11px;width:23px;text-align:center}ol li .symbol{font-size:15px}ol li.done .name{text-decoration:line-through}.cup-area{position:relative;width:42%;max-width:190px;z-index:1;text-align:center;padding-bottom:4px;direction:ltr}.cup{position:relative;height:130px;width:120px;max-width:85%;margin:auto;background:#eae1d630;border:4px solid #f3e2ca;border-top-width:6px;border-radius:5px 5px 32px 32px}.cup:after{content:'';position:absolute;right:-27px;top:18px;width:26px;height:55px;border:7px solid #f3e2ca;border-left:0;border-radius:0 30px 30px 0}.cup-logo{position:absolute;inset:30px 0 auto;font-size:39px;color:#fff0d0;text-shadow:0 2px 2px #42333e}.saucer{height:11px;width:155px;max-width:100%;margin:7px auto;background:#b7a3a3;border-radius:50%;box-shadow:0 7px 12px #0005}.cup-label{font:7px Arial;letter-spacing:1px;display:block;margin-top:14px;color:#d6b8af}.steam{font-size:36px;color:#d6c4c099;height:40px;animation:float 3s ease-in-out infinite}.shelf{position:absolute;bottom:0;left:0;right:0;height:28px;border-top:7px solid #ab7d66;background:#725247}#layers{position:absolute;inset:0;overflow:hidden;border-radius:0 0 26px 26px;display:flex;flex-direction:column-reverse;justify-content:flex-start}.layer{width:100%;flex-shrink:0;animation:pour .2s ease-out;border-top:1px solid #fff3}#message{text-align:center;min-height:42px;line-height:1.9;font-size:12px;color:#e8c7a9;margin:15px 0 8px}#message.error{color:#ffb3ae}#ingredients{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.ingredient{padding:12px 3px;background:#3c3444;min-height:85px;position:relative}.ingredient .icon{display:block;font-size:25px;color:var(--color);line-height:1.2}.ingredient .label{display:block;font-size:11px;margin-top:9px}.ingredient kbd{position:absolute;top:3px;left:6px;font:9px Tahoma;color:#d8c6bf}footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:20px;font-size:10px;color:#d3c2c5}footer button{font-size:10px}.tip{text-align:center;font-size:10px;color:#bcb0ba;line-height:2;margin-top:17px}#overlay{position:fixed;inset:0;background:#111624d9;backdrop-filter:blur(8px);display:grid;place-items:center;z-index:5;padding:20px;overflow:auto}.dialog{max-width:420px;width:100%;padding:28px;background:radial-gradient(ellipse at top,#514351,#2b2b3e);border:1px solid #b08d77;border-radius:27px;text-align:center;box-shadow:0 25px 90px #0007}.seal{font-size:78px;line-height:1.1;color:#f0c88f}.dialog small{color:#d5b5a9;font-size:11px}.dialog h2{font-size:27px;margin:18px 0}.dialog p{font-size:13px;line-height:2.1;color:#ebddce}#guide{font-size:11px;line-height:2.1;text-align:right;padding:15px;border-radius:12px;background:#222535;color:#d7d0c5}.primary{width:100%;background:#e7bd8c;border:0;color:#382d36;font-weight:700;padding:15px;margin-top:22px}#secondary{width:100%;margin-top:10px}@keyframes float{50%{transform:translateY(-5px);opacity:.5}}@keyframes pour{from{opacity:.3;transform:scaleY(.3)}}@media(max-width:390px){main{padding:17px 12px}.counter{gap:12px;padding:18px 14px 37px;min-height:310px}.receipt{padding:10px}.receipt h2{font-size:16px}.cup{width:95px;height:115px}.cup:after{right:-23px;width:22px}.window{left:17px;width:130px}#ingredients{gap:5px}.ingredient .label{font-size:10px}nav button{padding:9px 7px;font-size:9px}h1{font-size:27px}header small{font-size:8px}.dialog{padding:23px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body.paused .steam{animation-play-state:paused}