body[data-page=poppin-skillshots]{--cof: #6b3f24;--cof2: #3b2213;--crema: #d9a066}.pc-cup{position:absolute;left:50%;top:56%;width:58%;translate:-50% -50%;filter:drop-shadow(0 30px 30px rgba(0,0,0,.6))}.pc-cup svg{width:100%;height:auto;display:block;overflow:visible}.pc-steam path{fill:none;stroke:#ffffff8c;stroke-width:5;stroke-linecap:round;animation:pc-steam 3.4s ease-in-out infinite;animation-delay:var(--dl)}@keyframes pc-steam{0%{opacity:0;transform:translateY(14px) scaleY(.8)}40%{opacity:.9}to{opacity:0;transform:translateY(-26px) scaleY(1.1)}}.pc-board{position:absolute;right:0;top:2%;width:min(230px,44%);padding:14px 16px;border-radius:14px;background:#1f2a24;color:#f3efe6;box-shadow:inset 0 0 0 6px #6b3f24,0 26px 40px -20px #000c;transform:rotateY(-18deg) rotate(3deg) translateZ(40px);font-size:12px;line-height:1.5}.pc-board b{display:block;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;color:var(--yellow)}.pc-board span{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed rgba(255,255,255,.2);padding:3px 0}.pc-bean{position:absolute;width:22px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a0673f,#4a2a16);box-shadow:inset -3px -4px 6px #0006;animation:pc-bean 6s ease-in-out infinite alternate;animation-delay:var(--dl)}.pc-bean:after{content:"";position:absolute;left:50%;top:12%;bottom:12%;width:3px;margin-left:-1.5px;border-radius:2px;background:#2a160a;transform:rotate(10deg)}@keyframes pc-bean{to{transform:translateY(-16px) rotate(40deg)}}.pc-cafe{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,1fr);gap:clamp(18px,3vw,40px);align-items:start;margin-top:26px}.pc-menu{border-radius:26px;padding:clamp(18px,2.4vw,28px);background:radial-gradient(120% 80% at 20% 0%,#2c3a32,#18211c);color:#f3efe6;box-shadow:inset 0 0 0 10px #6b3f24,inset 0 0 0 12px #4a2a16,0 40px 70px -40px #000000d9}.pc-menu h3{font-weight:900;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);text-align:center;margin:6px 0 14px}.pc-items{display:grid;gap:8px}.pc-item{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit;background:#ffffff0a;transition:background .25s,transform .3s var(--ease-spring)}.pc-item:hover{background:#ffffff1a;transform:translate(4px)}.pc-item[aria-pressed=true]{background:#f4c54229;box-shadow:inset 0 0 0 1.5px var(--yellow)}.pc-item i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-style:normal;background:var(--c);color:#111;box-shadow:0 4px color-mix(in srgb,var(--c) 50%,#000)}.pc-item i svg{width:24px;height:24px}.pc-item b{display:block;font-weight:900;font-size:16.5px}.pc-item small{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#f3efe6a6}.pc-item em{font-style:normal;font-size:12px;font-weight:900;color:var(--yellow);white-space:nowrap}.pc-bar{display:grid;gap:14px}.pc-station{position:relative;border-radius:26px;padding:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line),0 40px 70px -40px #000c;display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}.pc-mug{position:relative;width:120px;height:130px;perspective:400px}.pc-mug .body{position:absolute;left:8px;right:18px;bottom:6px;height:100px;border-radius:10px 10px 34px 34px;background:linear-gradient(90deg,#e9e4dc,#fff 40%,#cfc8bd);overflow:hidden;box-shadow:inset 0 -6px 12px #0000001f}.pc-mug .fill{position:absolute;left:0;right:0;bottom:0;height:var(--lv, 0%);background:linear-gradient(180deg,var(--crema),var(--fc, var(--cof)) 30%,var(--cof2));transition:height 1.4s var(--ease-out)}.pc-mug .handle{position:absolute;right:0;top:36px;width:30px;height:44px;border-radius:0 20px 20px 0;border:9px solid #ddd6cb;border-left:0}.pc-mug .stream{position:absolute;left:50%;top:-10px;width:8px;margin-left:-10px;height:0;border-radius:4px;background:var(--fc, var(--cof));transition:height .3s}.pc-mug.pour .stream{height:40px}.pc-desc b{display:block;font-weight:900;font-size:20px;margin-bottom:4px}.pc-desc small{display:block;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--red-ink);margin-bottom:6px}.pc-desc p{color:var(--muted);font-size:15px;line-height:1.55}.pc-tray{border-radius:22px;padding:16px;background:linear-gradient(180deg,#8a5a36,#5c3a20);box-shadow:inset 0 2px #fff3,0 18px 30px -18px #000c;color:#fff;display:grid;gap:12px}.pc-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pc-slot{min-height:70px;border-radius:14px;border:2px dashed rgba(255,255,255,.35);display:grid;place-items:center;text-align:center;padding:6px;font-size:12px;font-weight:900;line-height:1.2}.pc-slot.on{border:0;background:#ffffffeb;color:#3b2213;animation:pc-drop .5s var(--ease-spring)}@keyframes pc-drop{0%{transform:translateY(-20px) scale(.8);opacity:0}}.pc-tray .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.pc-tray p{font-weight:700;font-size:14px;color:#ffffffe0}.pc-exp{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);gap:clamp(24px,4vw,60px);align-items:start;margin-top:28px}.pc-ticket{position:relative;overflow-x:clip;padding:22px 22px 30px;background:#fbf8f2;color:#2b1b10;border-radius:6px;box-shadow:0 30px 50px -26px #000c;font-family:Courier New,monospace;transform:rotate(2deg);--notch: radial-gradient(circle at 10px 0, transparent 9px, #fbf8f2 10px)}.pc-ticket:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:12px;background:radial-gradient(circle at 8px 0,transparent 0 7px,#fbf8f2 8px) 0 0 / 16px 12px repeat-x;transform:rotate(180deg)}.pc-ticket h3{font-family:var(--font);font-weight:900;font-size:16px;letter-spacing:.14em;text-transform:uppercase;text-align:center;border-bottom:2px dashed #c9b9a3;padding-bottom:10px;margin-bottom:10px}.pc-ticket ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:t}.pc-ticket li{counter-increment:t;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;font-size:13.5px;line-height:1.45;transition:opacity .4s,transform .4s;transition-delay:calc(var(--i) * .26s)}.js .pc-ticket:not(.print) li{opacity:0;transform:translateY(-6px)}.pc-ticket li:before{content:counter(t,decimal-leading-zero);font-weight:700;color:#a0673f}.pc-ticket li b{display:block;font-family:var(--font);font-weight:900;font-size:15px}.pc-stamp{position:absolute;right:14px;bottom:18px;padding:6px 12px;border:3px solid var(--red);border-radius:8px;color:var(--red);font-family:var(--font);font-weight:900;font-size:14px;letter-spacing:.14em;transform:rotate(-12deg) scale(1.6);opacity:0;transition:opacity .3s 1.6s,transform .4s var(--ease-spring) 1.6s}.pc-ticket.print .pc-stamp{opacity:.9;transform:rotate(-12deg) scale(1)}.pc-dep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px;perspective:1200px}.pc-sign{position:relative;padding:26px;border-radius:28px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 30%,var(--surface)),var(--surface) 70%);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 70%,transparent),0 14px color-mix(in srgb,var(--c) 30%,#000),0 40px 60px -30px #000c;transform:rotateX(8deg);transition:transform .6s var(--ease-spring);display:grid;gap:10px;min-width:0}.pc-sign:hover{transform:rotateX(0) translateY(-6px)}.pc-sign .awn{position:absolute;left:18px;right:18px;top:-16px;height:26px;border-radius:10px 10px 4px 4px;background:repeating-linear-gradient(90deg,var(--c) 0 22px,#ffffff 22px 44px);box-shadow:0 6px 10px -4px #00000080}.pc-sign small{font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}.pc-sign h3{font-weight:900;font-size:clamp(22px,2.4vw,30px);line-height:1.1}.pc-sign p{color:var(--muted);font-size:16px;line-height:1.55}@media (max-width: 960px){.pc-cafe,.pc-exp{grid-template-columns:minmax(0,1fr)}}@media (max-width: 700px){.pc-dep{grid-template-columns:minmax(0,1fr);gap:26px}.pc-sign{transform:none;padding:22px 18px}.pc-station{grid-template-columns:90px minmax(0,1fr);padding:14px}.pc-mug{transform:scale(.78);transform-origin:0 50%}.pc-item{grid-template-columns:40px minmax(0,1fr);padding:8px 10px}.pc-item i{width:40px;height:40px}.pc-item em{display:none}.pc-board{font-size:11px;width:50%}.pc-ticket{transform:none}}@media (prefers-reduced-motion: reduce){.pc-steam path,.pc-bean{animation:none}.pc-ticket li,.pc-stamp{transition:none}}
