:root{--bg:#f3e7d6;--bg2:#e8d5bb;--ink:#3b2416;--sub:#8a6a50;--accent:#a8673a;--card:#fffaf2;--coffee:#5a3620;--milk:#f8f2e8}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:Hiragino Maru Gothic ProN,Hiragino Sans,Noto Sans JP,Yu Gothic,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0;overflow:hidden;touch-action:none;background:radial-gradient(120% 80% at 50% 30%,var(--bg) 40%,var(--bg2))}canvas#c{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}canvas#c:active{cursor:grabbing}:root{--vpad:max(0px, calc((100svh - 100vw * 16 / 9) / 2));--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--aw:100vw}.hud{position:absolute;z-index:2;left:0;right:0;top:0;padding:calc(10px + var(--vpad) + var(--sat)) 16px 0;text-align:center;pointer-events:none;transition:transform .35s ease-out}.hud .lab{display:block;font-size:15px;font-weight:700;color:var(--sub);letter-spacing:.1em;transition:opacity .3s}.hud .count{transform-origin:50% 0;transition:transform .45s ease,opacity .25s}.hud.quoting .count{opacity:0;transition:opacity .2s}.hud.quoting .lab{opacity:0}.hud .num{font-weight:800;font-variant-numeric:tabular-nums;line-height:1;font-size:52px}.hud small{font-size:.4em;margin-left:2px}.hud .rlogo{width:min(300px,calc(var(--aw) * .76));margin:0 auto;line-height:0;animation:up .35s ease-out}body.inres .hud .rlogo{width:min(240px,calc(var(--aw) * .62))}.hud .rlogo img{display:block;width:100%;height:auto}.title{position:absolute;z-index:2;left:0;right:0;bottom:calc(28px + var(--vpad) + var(--sab));text-align:center;pointer-events:none;padding:0 16px}.title .goal{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:14px;background:#fffaf2;border:1.5px solid #cdbba5;box-shadow:0 2px 6px #3b24161f}.title .goal .mcup{display:block;transform-origin:50% 100%}.title .goal .arr{font-size:20px;font-weight:900;color:var(--ink)}.title .goal .lab{margin-left:4px;font-size:13px;font-weight:800;line-height:1.35;color:var(--ink);text-align:left;letter-spacing:.04em}.title .goal .lab b{color:#c0392b}.title .shakebtn{display:block;margin:14px auto 0;width:150px;height:58px;border-radius:999px;border:3px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-size:22px;font-weight:900;letter-spacing:.1em;cursor:pointer;touch-action:manipulation;pointer-events:auto;box-shadow:0 4px 0 var(--ink);animation:pulse 1.6s ease-in-out infinite}.title .shakebtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);animation:none}@keyframes pulse{50%{transform:scale(1.05)}}.done{position:absolute;z-index:5;left:0;right:0;top:42%;margin:0;text-align:center;font-size:44px;font-weight:900;color:var(--ink);-webkit-text-stroke:7px #fff;paint-order:stroke fill;pointer-events:none;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}@keyframes pop{0%{transform:scale(.3);opacity:0}}:root{--gl:brightness(1)}@keyframes glow{50%{transform:scale(1.06);filter:var(--gl) brightness(1.15)}}.done span{display:inline-block}:root{--ring:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)}.done.legit{font-size:52px;color:#d99a1e;--gl:drop-shadow(0 0 12px rgba(255,214,90,.9));filter:var(--gl);animation:bump .3s ease-out .4s,glow 1.2s ease-in-out .9s infinite}@keyframes bump{40%{transform:scale(1.15)}}.done.legit span{animation:legitIn .9s cubic-bezier(.2,.9,.3,1) both}.done.legit span:nth-child(-n+2){--dx:-90px;--c0:#5a3620;--s0:#fff}.done.legit span:nth-child(n+3){--dx:90px;--c0:#fffaf2;--s0:#3b2416}@keyframes legitIn{0%{transform:translate(var(--dx));opacity:0;color:var(--c0);-webkit-text-stroke-color:var(--s0)}45%{transform:none;opacity:1;color:var(--c0);-webkit-text-stroke-color:var(--s0);filter:none}62%{color:var(--c0);-webkit-text-stroke-color:var(--s0)}72%{color:#fff8d0;-webkit-text-stroke-color:#fff;filter:brightness(1.6)}to{color:#d99a1e;-webkit-text-stroke-color:#fff;filter:none}}.done.straw{animation:slurp .25s ease-in-out .95s}@keyframes slurp{50%{transform:translateY(-4px) scaleY(.95)}}.done.straw span{transform-origin:50% 100%;animation:suckup .55s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i) * .08s)}@keyframes suckup{0%{transform:translateY(80px) scale(.55,1.8);opacity:0}60%{opacity:1}}.done.spill{animation:slam .22s cubic-bezier(.6,0,1,1) both,shake .4s ease-out .22s both}@keyframes slam{0%{transform:translateY(-40px) scale(3);opacity:0}}@keyframes shake{0%{transform:translate(7px,2px) rotate(2deg)}25%{transform:translate(-6px,-1px) rotate(-4deg)}50%{transform:translate(3px,1px) rotate(1deg)}75%{transform:translate(-2px) rotate(-3.5deg)}to{transform:rotate(-3deg)}}.done.spill i{position:absolute;left:50%;top:50%;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px #3b241659;animation:splash .7s cubic-bezier(.2,.6,.6,1) .22s both}@keyframes splash{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(calc(var(--dx) - 50%),calc(var(--dy) - 50%)) scale(.5);opacity:0}}.done.anything{animation:none}.done.anything span{animation:ransom .45s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * .1s);transform:translateY(var(--y)) rotate(var(--r)) scale(var(--s))}.done.anything span:nth-child(1),.result.anything h2 span:nth-child(1){--fx:0px;--fy:-110px;--fr:-25deg;--r:-7deg;--y:3px;--s:1.05}.done.anything span:nth-child(2),.result.anything h2 span:nth-child(2){--fx:-110px;--fy:0px;--fr:20deg;--r:5deg;--y:-4px;--s:.92}.done.anything span:nth-child(3),.result.anything h2 span:nth-child(3){--fx:0px;--fy:110px;--fr:-15deg;--r:-3deg;--y:2px;--s:1.1}.done.anything span:nth-child(4),.result.anything h2 span:nth-child(4){--fx:110px;--fy:0px;--fr:30deg;--r:6deg;--y:-2px;--s:.96}.done.anything span:nth-child(5),.result.anything h2 span:nth-child(5){--fx:40px;--fy:-110px;--fr:-40deg;--r:-10deg;--y:4px;--s:1.08}@keyframes ransom{0%{transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(1.5);opacity:0}}.done.milkOnly{animation:float .9s ease-out .4s both,shine5 .35s ease-out 1.05s both}@keyframes shine5{to{filter:drop-shadow(0 0 10px rgba(255,255,255,.9))}}@keyframes float{to{transform:translateY(-8px)}}.done.milkOnly span,.done.empty span{-webkit-text-stroke-width:3px;filter:var(--ring)}.done.milkOnly span{animation:pop .4s cubic-bezier(.2,1.6,.4,1) both,bleach .35s ease-out both;animation-delay:0s,calc(.45s + var(--i) * .08s)}@keyframes bleach{to{color:#fff;-webkit-text-stroke-color:#3b2416}}.done.coffeeOnly{color:#1e0f06;animation:waft 1.4s ease-in-out .9s infinite}@keyframes waft{50%{transform:translateY(-2px)}}.done.coffeeOnly span{animation:steam .8s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i) * .09s)}@keyframes steam{0%{transform:translateY(22px) scaleY(1.15);opacity:0;filter:blur(6px)}70%{filter:blur(0);opacity:1}to{filter:none}}.done.empty{animation:deflate .5s ease-in .55s both}@keyframes deflate{to{transform:translateY(5px) scale(.95)}}.done.empty span{animation:pop .4s cubic-bezier(.2,1.6,.4,1) both,hollow .35s ease-in both;animation-delay:0s,calc(.5s + var(--i) * .07s)}.done.empty span:last-child{transform-origin:50% 90%;animation:pop .4s cubic-bezier(.2,1.6,.4,1) both,hollow .35s ease-in .78s both,droop .4s ease-in-out 1s both}@keyframes hollow{to{color:#efe7dc;-webkit-text-stroke-color:#9a8470}}@keyframes droop{to{rotate:-14deg}}.done.unmixed{animation:fadein .6s ease-out .35s both,slump .5s ease-in-out 1s both}@keyframes fadein{0%{opacity:0}}@keyframes slump{to{transform:translateY(4px) rotate(-5deg)}}.done.unmixed span:last-child{transform-origin:50% 90%;animation:tilt .4s ease-in-out 1.2s both}@keyframes tilt{to{rotate:-10deg;translate:0 2px}}.confetti{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none}.confetti i{position:absolute;top:-20px;border-radius:2px;opacity:0;animation-name:fall;animation-timing-function:cubic-bezier(.3,.2,.6,1);animation-fill-mode:forwards}@keyframes fall{0%{opacity:1;transform:translate(0) rotate(0)}85%{opacity:1}to{opacity:0;transform:translate(var(--dx),105vh) rotate(var(--r))}}.result{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:0 12px calc(22px + var(--sab));display:flex;justify-content:center;animation:up .35s ease-out}@keyframes up{0%{transform:translateY(40px);opacity:0}}.card{position:relative;width:100%;max-width:420px;background:var(--card);border-radius:18px;padding:22px 16px 8px;text-align:center;box-shadow:0 8px 28px #3b241640}.card h2{position:absolute;left:0;right:0;top:0;translate:0 -50%;margin:0;padding-left:1em;font-size:30px;line-height:1.15;font-weight:900;color:var(--ink);pointer-events:none;-webkit-text-stroke:7px #fff;paint-order:stroke fill}.rend{margin:0 0 4px;display:flex;align-items:center;justify-content:center;gap:.44em;white-space:nowrap;font-weight:800;color:var(--ink);font-size:min(18px,calc((min(420px,var(--aw) - 24px) - 88px)*.0709))}.rno{padding:.13em .6em;border-radius:.47em;background:var(--ink);color:var(--card);font-size:.83em;font-variant-numeric:tabular-nums}.rnew{padding:.15em .6em;border-radius:.54em;background:#d6223d;color:#fff;font-size:.72em;letter-spacing:.04em;animation:newpop .5s ease-out .3s both}@keyframes newpop{0%{transform:scale(0)}70%{transform:scale(1.25)}to{transform:scale(1)}}.rfound{position:absolute;top:24px;right:12px}@media(max-width:420px){.rend{margin-right:56px}}.zukan-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;cursor:pointer}.zukan-btn.complete{border-color:#d9a520;box-shadow:0 0 0 1px #f7dc7a}.rfound.zukan-btn{padding:2px 7px;border-width:1.5px;font-size:11px}.tzukan{display:flex;justify-content:center;margin-top:4px}.tzukan button{pointer-events:auto}.tzukan:not(:has(button:not([hidden]))){display:none}.zukan-box h2 small{font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}.zcrown{vertical-align:-3px;margin-right:6px;filter:drop-shadow(0 1px 2px rgba(138,95,16,.4));animation:newpop .5s ease-out .15s both}.zukan-box.complete h2 small{color:#c98a12;font-weight:900}.zukan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.zukan-list li{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:7px 10px;border-radius:10px;background:#fff;border:1.5px solid #e2cfb5}.zukan-list .zno{grid-row:span 2;padding:1px 7px;border-radius:6px;background:var(--ink);color:var(--card);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}.zukan-list .zname{font-size:15px;font-weight:900}.zukan-list .zsub{font-size:12px;font-weight:700;color:var(--accent);white-space:pre-line}.zukan-list li.legit{background:linear-gradient(160deg,#fff6d8,#fffaf2 55%,#ffeeb8);border-color:#e0a82e}.zukan-list li.legit .zname{color:#c98a12}.zukan-list li.yet{background:#3b24160f;border-style:dashed}.zukan-list li.yet .zno{background:#b9a48c}.zukan-list li.yet .zname{color:var(--sub);letter-spacing:.2em}.zukan-list li.yet .zsub{color:var(--sub)}.quote{--qfs:clamp(14px, calc(var(--aw) * .042), 16.5px);--qbs:clamp(11px, calc(var(--aw) * .033), 12px);position:absolute;z-index:3;left:0;right:0;top:calc(118px + var(--vpad) + var(--sat));width:min(calc(100% - 32px),300px);min-height:calc(var(--qfs) * 3.2 + var(--qbs) * 1.3 + 20px);margin:0 auto;box-sizing:border-box;padding:8px 16px 9px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;border-radius:12px;background:#f8f0e4f5;box-shadow:0 2px 10px #3b24161f;text-align:left;cursor:pointer;font-family:Hiragino Mincho ProN,Yu Mincho,YuMincho,"Noto Serif JP",serif;color:var(--ink);text-shadow:0 0 8px rgba(255,250,242,.95),0 0 2px rgba(255,250,242,.95);animation:quote 6s ease-in-out both}.quote p{margin:0}.qtext{position:relative;font-size:var(--qfs);font-weight:600;line-height:1.6;white-space:pre-line}.qby{position:relative;margin-top:3px!important;font-size:var(--qbs);line-height:1.3;color:var(--sub)}.qcount{position:absolute;right:0;bottom:-18px;margin:0!important;font-family:Hiragino Maru Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif;font-size:112px;font-weight:900;line-height:1;letter-spacing:-.04em;white-space:nowrap;color:#3b24161a;font-variant-numeric:tabular-nums;text-shadow:none;pointer-events:none}.qcount small{font-size:.32em;margin-left:2px}.qcount .u{font-size:.45em;margin-left:1px}.qby:before{content:"\2015  "}@keyframes quote{0%{opacity:0;transform:translateY(6px)}15%,to{opacity:1;transform:none}}.rcomment{margin:2px 0 0;line-height:1.3;font-size:clamp(12px,calc(var(--aw) * .038),15px);text-wrap:balance;word-break:auto-phrase;white-space:pre-line;font-weight:800;color:var(--accent)}.result.legit .card{position:relative;background:linear-gradient(160deg,#fff6d8,#fffaf2 55%,#ffeeb8);border:3px solid #e0a82e;box-shadow:0 8px 28px #3b241640,0 0 26px #f5c54299}.result.legit .card:after{content:"";position:absolute;inset:0;border-radius:15px;background:linear-gradient(100deg,transparent 44%,rgba(255,255,255,.75) 50%,transparent 56%) no-repeat;background-size:300% 100%;animation:shine 2.4s ease-in-out .4s infinite;pointer-events:none}@keyframes shine{0%{background-position:100% 0}60%,to{background-position:0 0}}.result.legit h2{font-size:34px;color:#d99a1e;animation:glow 1.2s ease-in-out .3s infinite;--gl:drop-shadow(0 0 8px rgba(255,214,90,.9));filter:var(--gl)}.result.legit h2:before,.result.legit h2:after{content:"\2605";display:inline-block;margin:0 4px;font-size:.75em;animation:newpop .4s ease-out .45s both}.result.legit .rcomment{color:var(--ink)}.getbadge{position:absolute;z-index:3;margin:0;padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,#f7dc7a,#d9a520 50%,#f7dc7a);color:#3b2416;font-size:13px;font-weight:900;white-space:nowrap;box-shadow:0 2px 8px #3b24164d;transform:translate(-50%,-50%) rotate(-30deg);animation:getpop .5s ease-out both;pointer-events:none}.getbadge b{margin-left:4px;color:#d6223d}@keyframes getpop{0%{transform:translate(-50%,-50%) rotate(-30deg) scale(0)}70%{transform:translate(-50%,-50%) rotate(-30deg) scale(1.25)}}.cupbtn{position:absolute;z-index:3;width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;background:none;cursor:pointer;transform:translate(-50%,-50%)}.cupbtn:before{content:"";position:absolute;inset:5px;border-radius:50%;border:2px solid #8a5f10;background:linear-gradient(160deg,#f7dc7a,#d9a520 55%,#fff2b8);box-shadow:0 2px 6px #3b241633}.cupbtn svg{position:relative;width:20px;height:20px;color:#5a3a08}.cupbtn.gold:before{border-color:var(--ink);background:#fff}.cupbtn.gold svg{color:var(--ink)}.rcount{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;margin:2px 0 0;font-size:38px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}.rcount:before{content:""}.rtail{justify-self:start;display:flex;align-items:baseline;gap:8px;white-space:nowrap}.rstats{margin:3px 0 0;font-size:12px;line-height:1.4;color:var(--sub)}.rstats .nw{white-space:nowrap}.rstats .ball{display:inline-block;width:.95em;height:.95em;margin:0 2px 0 4px;border-radius:50%;vertical-align:-.12em}.rstats .ball.milk{background:var(--milk);box-shadow:inset 0 0 0 1.5px #b9a48c}.rstats .ball.coffee{background:var(--coffee)}.rcount small{font-size:.4em;margin-left:4px;font-weight:800}.rsub{font-size:15px;font-weight:800}.btns{display:flex;gap:10px;margin-top:8px}.btns button{flex:1;height:44px;padding:0 8px;line-height:1;border-radius:12px;border:2px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:800;cursor:pointer}.btns button.primary{background:var(--ink);color:#fff}.credit{display:flex;justify-content:space-between;margin:6px 2px 0;line-height:1.2;font-size:12px;color:var(--sub)}.credit a{color:inherit;text-underline-offset:4px}.suck{position:absolute;z-index:4;left:50%;bottom:calc(44px + var(--sab));transform:translate(-50%) translateY(calc(-1 * var(--lift, 0px)));transition:transform .1s;width:96px;height:96px;border-radius:50%;border:3px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-size:22px;font-weight:900;cursor:pointer;touch-action:none;box-shadow:0 4px 0 var(--ink)}.suck.on{background:var(--accent);color:#fff;transform:translate(-50%) translateY(calc(3px - var(--lift, 0px)));box-shadow:0 1px 0 var(--ink)}.share-layer{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;background:#3b24168c}.share-box{width:min(520px,100%);max-height:calc(100% - 46px);overflow:auto;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--card);border-radius:16px;box-shadow:0 20px 60px #3b241666}.share-box:focus{outline:none}.share-box h2{margin:0;font-size:18px;text-align:center}.share-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.share-opts:has(#shareVid[hidden]){grid-template-columns:1fr}.share-card{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;border:2px solid #e2cfb5;border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;font:inherit}.share-card:hover:not(:disabled){border-color:var(--accent)}.share-card:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.share-card:disabled{cursor:wait}.share-prev{position:relative;display:block;height:34vh;height:34svh;background:var(--bg)}.share-prev img,.share-prev video{display:block;width:100%;height:100%;object-fit:contain}.share-wait{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--sub)}.share-lab{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;font-weight:800;font-size:14px;background:#a8673a1f}.share-lab svg{flex:none}.share-text{padding:11px 8px;border-radius:12px;border:2px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:800;cursor:pointer}.share-close{flex:none;padding:8px 26px;border:0;border-radius:999px;background:#3b2416e6;color:#fffaf2;font:inherit;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px #00000040}.toast{position:absolute;z-index:40;left:50%;bottom:calc(24px + var(--sab));transform:translate(-50%);margin:0;padding:8px 14px;border-radius:10px;background:#3b2416e6;color:#fff;font-size:13px;font-weight:700;white-space:nowrap;pointer-events:none}#version{position:absolute;z-index:5;right:6px;bottom:calc(2px + var(--sab));margin:0;font-size:10px;color:var(--sub);opacity:.6;pointer-events:none}.card h2 span{display:inline-block}.card h2{-webkit-text-stroke-width:4.8px}.result.legit h2{-webkit-text-stroke-width:4.6px}.result.spill h2{rotate:-3deg}.result.anything h2 span{transform:translateY(var(--y)) rotate(var(--r)) scale(var(--s))}.result.milkOnly h2{color:#fff;-webkit-text-stroke-width:2.2px;-webkit-text-stroke-color:#3b2416;filter:var(--ring) drop-shadow(0 0 8px rgba(255,255,255,.9))}.result.coffeeOnly h2{color:#1e0f06}.result.empty h2{color:#efe7dc;-webkit-text-stroke-width:2.2px;-webkit-text-stroke-color:#9a8470;filter:var(--ring)}.result.empty h2 span:last-child{transform-origin:50% 90%;rotate:-14deg}.result.unmixed h2{rotate:-5deg}.result.unmixed h2 span:last-child{transform-origin:50% 90%;rotate:-10deg;translate:0 2px}.intro #resLogo,.intro #c,.intro .title .goal,.intro #shakeBtn,.intro #zukanBtnT,.intro #cupBtn{opacity:0}