:root{--bg-1:#2a1760;--bg-2:#0d0720;--ink:#f4f0ff;--muted:#b3a8d6;--accent:#ffd36b;--panel:#201446f0;--glass-edge:#ffffff80;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;color:var(--ink);background:var(--bg-2);margin:0;overflow:hidden}body{background:radial-gradient(130% 85% at 50% 0%, var(--bg-1), var(--bg-2) 72%);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;position:fixed;inset:0}body:before{content:"";pointer-events:none;opacity:.55;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,#0000),radial-gradient(1px 1px at 28% 72%,#fff,#0000),radial-gradient(1.5px 1.5px at 46% 9%,#fff,#0000),radial-gradient(1px 1px at 67% 34%,#fff,#0000),radial-gradient(1.5px 1.5px at 84% 14%,#fff,#0000),radial-gradient(1px 1px at 91% 61%,#fff,#0000),radial-gradient(1px 1px at 8% 52%,#fff,#0000),radial-gradient(1px 1px at 58% 88%,#fff,#0000),radial-gradient(1.5px 1.5px at 76% 81%,#fff,#0000),radial-gradient(1px 1px at 37% 44%,#fff,#0000);position:fixed;inset:0}button{font:inherit;color:inherit;cursor:pointer}svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}#app{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;display:flex;position:absolute;inset:0}header.top{grid-template-columns:44px 1fr 44px;align-items:center;padding:10px 16px 0;display:grid}.title{text-align:center}h1{letter-spacing:.02em;margin:0;font-size:22px;font-weight:700}#subtitle{min-height:18px;color:var(--accent);letter-spacing:.06em;font-size:13px}.icon-btn{background:#ffffff14;border:none;border-radius:50%;place-items:center;width:44px;height:44px;display:grid}.toolbar{justify-content:space-around;padding:8px 16px 14px;display:flex}.tool{min-width:64px;color:var(--muted);background:0 0;border:none;flex-direction:column;align-items:center;gap:6px;font-size:12px;display:flex}.tool .ico{width:52px;height:52px;color:var(--ink);background:#ffffff17;border-radius:18px;place-items:center;transition:transform .1s;display:grid;box-shadow:inset 0 1px #ffffff24}.tool svg{width:24px;height:24px}.tool:active .ico{transform:scale(.92)}.tool:disabled{opacity:.35;cursor:default}#board{flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:0;display:flex}.row{justify-content:center;display:flex}.slot{padding:calc(var(--fw) * .9) calc(var(--fw) * .25) calc(var(--fw) * .3);cursor:pointer}.flask{width:var(--fw);height:var(--fh);transform-origin:50% 0;transition:transform .16s ease-out;position:relative}.flask.selected{transform:translateY(calc(var(--fw) * -.45))}.flask.pouring{z-index:10}.flask:before{content:"";z-index:2;background:#ffffffb3;border-radius:3px;height:6px;position:absolute;top:-3px;left:21%;right:21%}.glass{-webkit-mask:var(--flask-mask) 0 0 / 100% 100% no-repeat;-webkit-mask:var(--flask-mask) 0 0 / 100% 100% no-repeat;mask:var(--flask-mask) 0 0 / 100% 100% no-repeat;background:linear-gradient(90deg,#ffffff1a,#ffffff08 40%,#ffffff14);position:absolute;inset:0;overflow:hidden}.glass:after{content:"";z-index:2;pointer-events:none;background:radial-gradient(5% 22% at 37% 32%,#ffffff38 55%,#0000),radial-gradient(10% 6% at 26% 72%,#ffffff42 45%,#0000);position:absolute;inset:0}.outline{fill:none;width:100%;height:100%;stroke:var(--glass-edge);stroke-width:2px;pointer-events:none;transition:stroke .3s,filter .3s;position:absolute;inset:0;overflow:visible}.outline path{vector-effect:non-scaling-stroke}.liquid{height:calc(100% - var(--fw) * .4);flex-direction:column-reverse;display:flex;position:absolute;bottom:0;left:0;right:0}.layer{height:25%;font-size:calc(var(--fw) * .3);color:#00000073;background-color:var(--c);background-image:linear-gradient(90deg,#ffffff38,#fff0 40%,#0000002e);flex:none;place-items:center;line-height:1;display:grid;overflow:hidden}.layer.top{box-shadow:inset 0 3px #ffffff47}.layer.hidden{color:#ffffff80;background-image:repeating-linear-gradient(135deg,#ffffff0d 0 4px,#0000 4px 8px);font-weight:800}.layer.reveal{animation:.5s ease-out reveal}@keyframes reveal{0%{filter:brightness(2.4)saturate(0)}}.cork{z-index:3;left:30%;right:30%;top:calc(var(--fw) * -.36);height:calc(var(--fw) * .56);opacity:0;background:linear-gradient(90deg,#a87a47,#d6a970 35%,#8c6235);border-radius:5px 5px 2px 2px;position:absolute;transform:translateY(-40%)}.flask.complete .cork{opacity:1;transform:none}.flask.complete:not(.settled) .cork{animation:.45s cubic-bezier(.3,1.6,.5,1) cork}@keyframes cork{0%{opacity:0;transform:translateY(-140%)}}.flask.complete .outline{filter:drop-shadow(0 0 calc(var(--fw) * .2) #ffd67873)}.flask.hint-from .outline,.flask.hint-to .outline{stroke:var(--accent);animation:.9s ease-in-out infinite hint}.flask.hint-to .outline{animation-delay:.45s}@keyframes hint{50%{filter:drop-shadow(0 0 calc(var(--fw) * .25) #ffd36bcc)}}.stream{z-index:5;pointer-events:none;transform-origin:top;border-radius:99px;position:fixed}.spark{z-index:20;pointer-events:none;color:var(--accent);font-size:14px;position:fixed}#toast{z-index:40;left:50%;bottom:calc(env(safe-area-inset-bottom) + 100px);text-align:center;background:var(--panel);opacity:0;pointer-events:none;border:1px solid #ffffff1a;border-radius:99px;max-width:calc(100% - 32px);padding:10px 18px;font-size:15px;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%,8px)}#toast.show{opacity:1;transform:translate(-50%)}.overlay{z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#08041499;place-items:center;padding:16px;transition:opacity .25s;display:grid;position:fixed;inset:0}.overlay.hidden{opacity:0;pointer-events:none}.card{text-align:center;background:var(--panel);border:1px solid #ffffff1a;border-radius:26px;width:min(360px,100%);padding:26px 22px 22px;transition:transform .3s cubic-bezier(.3,1.4,.5,1);box-shadow:0 20px 60px #00000080}.overlay.hidden .card{transform:scale(.92)}h2{margin:0 0 6px;font-size:24px}.muted{color:var(--muted);margin:0 0 18px;font-size:15px;line-height:1.4}.burst{color:var(--accent);margin-bottom:8px;font-size:44px;line-height:1;animation:6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.primary{color:#3a2300;background:linear-gradient(#ffe08a,#f4b63f);border:none;border-radius:99px;min-width:160px;padding:14px 28px;font-size:17px;font-weight:700;box-shadow:0 4px #b9821f}.primary:active{transform:translateY(2px);box-shadow:0 2px #b9821f}.setting{border-top:1px solid #ffffff14;justify-content:space-between;align-items:center;min-height:48px;padding:0 4px;font-size:17px;display:flex}.setting input[type=checkbox]{accent-color:#f4b63f;width:22px;height:22px}.level-pick{gap:8px;display:flex}.level-pick input{width:72px;font:inherit;text-align:center;color:var(--ink);background:#ffffff14;border:1px solid #ffffff26;border-radius:10px;padding:6px 8px;font-size:16px}.small{color:#3a2300;background:#f4b63f;border:none;border-radius:10px;padding:6px 14px;font-weight:700}.how{text-align:left;margin-top:14px;font-size:13px}
