@layer components{.pd-stage{touch-action:manipulation;-webkit-user-select:none;user-select:none;background:radial-gradient(90% 60% at 50% 40%,#12304a 0%,#081420 55%,#04070b 100%);padding:0}.pd-read{color:#fff9;align-items:baseline;gap:8px;font-size:13px;display:flex}.pd-read b{font-family:var(--font-display), var(--font-sans);letter-spacing:-.03em;color:#fff;font-size:24px;font-weight:800}.pd-tip{z-index:3;color:#0d0d0f;width:max-content;max-width:calc(100% - 32px);animation:pop .3s var(--ease-pop) both;background:#ffd27a;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;position:absolute;top:64px;left:50%;translate:-50%}.pd-area{place-items:center;display:grid;position:absolute;inset:96px 14px 92px}.pd-rack{justify-items:center;gap:40px;display:grid}.pd-row{align-items:flex-end;gap:var(--gap);display:flex}.pd-tube{width:var(--tube);height:calc(var(--unit) * 4.6 + 10px);border-radius:6px 6px calc(var(--tube) / 2) calc(var(--tube) / 2);transition:translate .24s var(--ease-spring), box-shadow .16s ease;transform-origin:50% 20%;background:linear-gradient(90deg,#ffffff1a,#ffffff08 40%,#ffffff0f);flex-direction:column-reverse;flex:none;padding:0 4px 5px;display:flex;position:relative;box-shadow:inset 0 0 0 2px #ffffff42,inset 8px 0 10px -8px #fff6,0 10px 22px -10px #0009}.pd-tube:before{content:"";z-index:1;pointer-events:none;background:#ffffff2e;border-radius:4px;height:7px;position:absolute;top:-3px;left:-3px;right:-3px;box-shadow:inset 0 0 0 1.5px #ffffff52}.pd-tube:after{content:"";z-index:2;top:10px;bottom:calc(var(--tube) / 3);pointer-events:none;background:#ffffff59;border-radius:2px;width:3px;position:absolute;left:6px}.pd-tube.is-held{translate:0 calc(var(--unit) * -.6);box-shadow:inset 0 0 0 2px var(--rn), inset 8px 0 10px -8px #fff6, 0 0 26px #ccff3d4d}.pd-tube.is-pouring{z-index:10}.pd-tube.is-nope{animation:.26s pd-nope}@keyframes pd-nope{25%{translate:-4px}75%{translate:4px}}.pd-tube:focus-visible{outline:2px solid var(--rn);outline-offset:5px}.pd-tube.is-done{animation:pd-hop .7s var(--ease-spring) both}@keyframes pd-hop{40%{translate:0 -16px}}.pd-layer{height:var(--unit);background:linear-gradient(90deg, color-mix(in oklab, var(--paint) 82%, #fff), var(--paint) 45%, color-mix(in oklab, var(--paint) 85%, #000));flex:none;place-items:center;font-style:normal;display:grid;position:relative;box-shadow:inset 0 2px #ffffff38}.pd-layer:first-child{border-radius:0 0 calc(var(--tube) / 2 - 4px) calc(var(--tube) / 2 - 4px)}.pd-layer:last-of-type:before{content:"";background:color-mix(in oklab, var(--paint,#556) 70%, #fff);opacity:.8;border-radius:50%;height:4px;position:absolute;top:-2px;left:0;right:0}.pd-layer.is-hidden{color:#ffffff8c;font-size:calc(var(--unit) * .42);background:repeating-linear-gradient(135deg,#2a3240 0 5px,#232a36 5px 10px);font-weight:800;box-shadow:inset 0 1px #ffffff14}.pd-layer svg{width:min(62%, calc(var(--unit) * .62));height:min(62%, calc(var(--unit) * .62));fill:#00000094}.pd-layer.is-in{transform-origin:50% 100%;animation:pd-in .28s var(--ease-out) both}@keyframes pd-in{0%{opacity:.4;transform:scaleY(0)}}.pd-cap{z-index:3;width:calc(var(--tube) * .7);height:13px;animation:pd-cap .42s var(--ease-pop) .22s both;background:linear-gradient(#d8a36f,#a8723f);border-radius:4px 4px 3px 3px;position:absolute;top:-10px;left:50%;translate:-50%;box-shadow:inset 0 -2px #0003,0 0 0 1.5px #00000040}@keyframes pd-cap{0%{opacity:0;translate:-50% -18px}}.pd-tube.is-capped{box-shadow:inset 0 0 0 2px #ccff3d8c,inset 8px 0 10px -8px #fff6,0 0 20px #ccff3d2e}.pd-stream{z-index:9;background:var(--paint);transform-origin:50% 0;width:7px;box-shadow:0 0 8px color-mix(in oklab, var(--paint) 60%, transparent);pointer-events:none;border-radius:4px;margin-left:-3.5px;animation:.36s ease-out both pd-stream;position:absolute}@keyframes pd-stream{0%{transform:scaleY(0)}30%{opacity:1;transform:scaleY(1)}80%{opacity:1;width:5px;transform:scaleY(1)}to{opacity:0;width:2px;transform:scaleY(1)}}.pd-foot{left:16px;right:16px;bottom:max(18px, calc(env(safe-area-inset-bottom) + 10px));color:#ffffff9e;justify-content:space-between;align-items:center;gap:12px;font-size:14px;display:flex;position:absolute}.pd-tools{flex:none;gap:8px;margin-left:auto;display:flex}.pd-key{--key:#ffffff1a;--key-ink:#fff;--edge:#00000052;height:48px;box-shadow:inset 0 -3px 0 var(--edge), inset 0 0 0 1.5px #ffffff24;gap:6px;padding:0 14px;font-size:14px}.pd-key svg{width:19px;height:19px}.pd-key.is-on,.pd-key.is-call{--key:var(--rn);--key-ink:#0d0d0f;--edge:#465c006b}.pd-key.is-call{animation:1.1s ease-in-out infinite pd-call}@keyframes pd-call{50%{translate:0 -3px}}.pd-tools .key:focus-visible{outline:2px solid var(--rn);outline-offset:2px}@container (max-width:480px){.pd-key{width:48px;padding:0}.pd-key-word{display:none}.pd-foot p{font-size:13px}}.pd-won{z-index:8;text-align:center;pointer-events:none;position:absolute;top:40%;left:0;right:0}.pd-won p{letter-spacing:-.05em;color:#fff;text-shadow:0 4px 30px #0009;animation:pop .42s var(--ease-pop) .3s both;font-size:56px;font-weight:800}@media (prefers-reduced-motion:reduce){.pd-tube{transition:none}.pd-tube.is-done,.pd-tube.is-nope,.pd-layer.is-in,.pd-cap,.pd-key.is-call,.pd-won p,.pd-tip{animation:none}.pd-stream{display:none}}}