.gfx-knob{width:300px;height:300px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.13))}.gfx-knob-rot{transform-origin:150px 150px;animation:gfx-turn360 2.2s ease-in-out both}@keyframes gfx-turn360{0%{transform:rotate(0deg);animation-timing-function:ease-in-out}26%{transform:rotate(160deg)}33%{transform:rotate(160deg);animation-timing-function:ease-in-out}57%{transform:rotate(300deg)}64%{transform:rotate(300deg);animation-timing-function:ease-in-out}88%{transform:rotate(1turn)}to{transform:rotate(1turn)}}.gfx-stage{position:relative;width:380px;height:320px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#dbdbde,#cfcfd3);border:1px solid #c2c2c7;box-shadow:0 6px 18px rgba(0,0,0,.12)}.gfx-outlet{position:absolute;left:28px;bottom:30px;width:190px;height:190px;border-radius:16px;background:linear-gradient(180deg,#b9b9be,#a8a8ae);border:1px solid #9a9aa0;padding:18px;box-sizing:border-box}.gfx-hole{width:100%;height:100%;border-radius:12px 12px 44px 44px;background:radial-gradient(circle at 50% 30%,#3a3a40,#17171a 75%);box-shadow:inset 0 8px 18px rgba(0,0,0,.6)}.gfx-floor{position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(180deg,#c6c6cb,#b2b2b8);border-top:1px solid #ababb1}.gfx-capsule{--c:#5bc8f5;position:absolute;left:62px;bottom:38px;width:84px;height:84px;pointer-events:none;will-change:transform,opacity;z-index:3;animation:gfx-dispense 1.7s cubic-bezier(.3,.6,.4,1) both}.gfx-cap-bottom{position:absolute;left:1%;right:1%;bottom:1%;height:46%;border-radius:12% 12% 999px 999px/24% 24% 999px 999px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 88%,#ffffff) 0,color-mix(in srgb,var(--c) 60%,#ffffff) 45%,color-mix(in srgb,var(--c) 78%,#ffffff) 100%);box-shadow:inset 0 3px 0 color-mix(in srgb,var(--c) 75%,#000000),inset 0 -6px 10px rgba(255,255,255,.55),inset 4px 0 6px rgba(255,255,255,.35),inset -4px 0 6px rgba(0,0,0,.06)}.gfx-cap-glass{position:absolute;inset:0;border-radius:50%;border:calc(84px * .022) solid rgba(150,158,166,.5);box-sizing:border-box;background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 26%),radial-gradient(circle at 70% 14%,rgba(255,255,255,.7) 0,rgba(255,255,255,0) 18%),linear-gradient(180deg,rgba(240,243,246,.92),rgba(232,236,241,.9) 48%,rgba(240,243,246,.6) 60%,rgba(244,247,250,.35));box-shadow:inset 0 2px 4px rgba(255,255,255,.9),inset 0 -3px 8px rgba(0,0,0,.05)}@keyframes gfx-dispense{0%{opacity:0;transform:translateY(-70px) rotate(0deg)}7%{opacity:1}28%{transform:translate(6px) rotate(60deg);animation-timing-function:ease-out}40%{transform:translate(16px,-20px) rotate(150deg);animation-timing-function:ease-in}52%{transform:translate(30px) rotate(250deg);animation-timing-function:ease-out}64%{transform:translate(60px,-8px) rotate(410deg);animation-timing-function:ease-in}74%{transform:translate(96px) rotate(560deg);animation-timing-function:ease-out}to{opacity:1;transform:translate(196px) rotate(900deg)}}.gfx-reveal{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px;box-sizing:border-box;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);z-index:10}.gfx-pakat{position:absolute;left:26px;top:22px;z-index:2;font-family:Dela Gothic One,Noto Sans JP,sans-serif;font-size:34px;font-weight:400;color:#e60023;letter-spacing:2px;line-height:1;white-space:nowrap;text-shadow:-3px -3px 0 #fff,3px -3px 0 #fff,-3px 3px 0 #fff,3px 3px 0 #fff,0 -3px 0 #fff,0 3px 0 #fff,-3px 0 0 #fff,3px 0 0 #fff,0 5px 10px rgba(0,0,0,.18);transform-origin:left top;animation:gfx-pakatFly .6s cubic-bezier(.34,1.56,.64,1) .7s both}.gfx-stars{position:absolute;left:50%;top:128px;z-index:1;pointer-events:none}.gfx-star{position:absolute;left:0;top:0;margin:-12px 0 0 -12px;opacity:0;animation:gfx-starFly .95s cubic-bezier(.2,.7,.4,1) .7s both}.gfx-bigcap{--c:#5bc8f5;position:relative;width:170px;height:170px;animation:gfx-popIn .55s cubic-bezier(.34,1.56,.64,1) both}.gfx-halfglass{bottom:0;border-radius:0 0 999px 999px;border:4px solid rgba(150,158,166,.5);border-top:2px solid rgba(150,158,166,.35);box-sizing:border-box;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 34%),linear-gradient(180deg,rgba(240,243,246,.92),rgba(228,232,238,.96));box-shadow:inset 0 -4px 8px rgba(255,255,255,.9),inset 0 3px 6px rgba(0,0,0,.05);animation:gfx-cupSettle .5s cubic-bezier(.34,1.56,.64,1) .65s both}.gfx-halfcup,.gfx-halfglass{position:absolute;left:0;width:100%;height:50%}.gfx-halfcup{top:0;border-radius:999px 999px 0 0;background:linear-gradient(0deg,color-mix(in srgb,var(--c) 88%,#ffffff) 0,color-mix(in srgb,var(--c) 60%,#ffffff) 45%,color-mix(in srgb,var(--c) 78%,#ffffff) 100%);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--c) 75%,#000000),inset 0 6px 10px rgba(255,255,255,.55),inset 4px 0 6px rgba(255,255,255,.35),inset -4px 0 6px rgba(0,0,0,.06);transform-origin:88% 100%;animation:gfx-lidPop .7s cubic-bezier(.22,1.2,.36,1) .65s both}@keyframes gfx-popIn{0%{transform:scale(.25) translateY(70px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes gfx-lidPop{0%{transform:rotate(0deg) translateY(0)}30%{transform:rotate(-8deg) translateY(-6px)}to{transform:rotate(30deg) translate(-6px,-46px)}}@keyframes gfx-cupSettle{0%{transform:translateY(0)}40%{transform:translateY(9px)}to{transform:translateY(5px)}}@keyframes gfx-starFly{0%{opacity:0;transform:translateY(10px) scale(.15) rotate(0deg)}12%{opacity:1}80%{opacity:1}to{opacity:0;transform:translate(var(--tx),var(--ty)) scale(var(--s)) rotate(var(--r))}}@keyframes gfx-pakatFly{0%{opacity:0;transform:translate(140px,175px) rotate(-6deg) scale(.2)}25%{opacity:1}to{opacity:1;transform:translate(0) rotate(-6deg) scale(1)}}.gfx-jajaan{font-family:Dela Gothic One,Noto Sans JP,sans-serif;font-weight:400;letter-spacing:1px}@media (prefers-reduced-motion:reduce){.gfx-bigcap,.gfx-capsule,.gfx-halfcup,.gfx-halfglass,.gfx-knob-rot,.gfx-pakat,.gfx-star{animation:none}}