:root{color-scheme:light;--yellow:#ffdc00;--pink:#f92587;--ink:#161116;--charge:0}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--yellow);color:var(--ink)}.main-page{height:100svh;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:5px solid #1c38ff;outline-offset:5px}.cosmos{height:100svh;position:relative;overflow:hidden;isolation:isolate}.stage{position:absolute;inset:0;isolation:isolate}.checker{position:absolute;inset:-12%;z-index:-4;background:conic-gradient(#fff7dc 25%,#1c1622 0 50%,#fff7dc 0 75%,#1c1622 0) 0 0/100px 100px;transform:rotate(-8deg);opacity:.12;mask-image:radial-gradient(ellipse,transparent 15%,#000 85%)}.charge-glow{position:absolute;inset:0;z-index:-3;background:radial-gradient(ellipse at 50% 48%,#fff 0%,#c731ff 28%,#6920ff99 49%,transparent 72%);opacity:var(--charge);pointer-events:none}.halo{position:absolute;left:50%;top:48%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:-2}.halo-a{width:min(79vw,700px);background:var(--pink);transform:translate(-50%,-50%) rotate(-12deg);border:4px solid var(--ink);box-shadow:16px 17px 0 var(--ink)}.halo-b{width:min(67vw,595px);border:2px dashed #ffe98a;transform:translate(-50%,-50%)}.energy{position:absolute;left:50%;top:48%;width:min(73vw,650px);overflow:visible;transform:translate(-50%,-50%) rotate(-90deg);pointer-events:none;z-index:1}.energy circle{fill:none;stroke-width:3}.energy-track{stroke:#3b17425c}#energy-fill{stroke:#fffbd5;stroke-linecap:round;stroke-dasharray:590.62;stroke-dashoffset:590.62;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #f3ff58)}.orbit{position:absolute;inset:0;z-index:7;pointer-events:none}.satellite{position:absolute;left:50%;top:48%;margin:-60px 0 0 -60px;width:120px;height:120px;padding:0;background:transparent;pointer-events:auto;will-change:transform;user-select:none;-webkit-user-select:none}.satellite-card{display:block;position:relative;width:100%;height:100%;border:3px solid var(--ink);box-shadow:5px 6px 0 var(--ink);background:#fff7dc;border-radius:16px;overflow:hidden}.satellite img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.subject{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:clamp(160px,39vw,320px);padding:0;background:transparent;z-index:6;touch-action:manipulation;user-select:none;-webkit-user-select:none}.core-shell{display:block;position:relative;width:100%;aspect-ratio:1.047;border:4px solid var(--ink);border-radius:40%;overflow:hidden;background:#fff7dc;box-shadow:9px 11px 0 var(--ink);transform:rotate(-4deg);transition:aspect-ratio .5s,border-radius .5s}.core-shell>img,.core-shell>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.core-shell>video,.core-shell>#bean-fallback{object-fit:contain;background:#faf8fa}.core-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#fffc 46%,transparent 68%);opacity:0;mix-blend-mode:screen}body[data-form="bean"] .core-shell{aspect-ratio:.801;border-radius:45% 45% 38% 38%}.counter{position:absolute;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);font:1000 clamp(48px,7vw,78px)/1.1 Impact,"Arial Black",system-ui,sans-serif;letter-spacing:-.04em;color:#fff9dc;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 5px 0 var(--ink);z-index:30;pointer-events:none;font-variant-numeric:tabular-nums;transform-origin:50% 70%}.icon-button{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--ink);border-radius:50%;background:#fff7dc;box-shadow:3px 4px 0 var(--ink);color:var(--ink)}.icon-button svg{width:30px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.pause{position:absolute;top:max(20px,env(safe-area-inset-top));right:20px;z-index:50}.click-hint{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:35;background:transparent;padding:18px 35px 12px;white-space:nowrap;user-select:none;-webkit-user-select:none}.hint-label{display:block;position:relative;font:1000 clamp(26px,5vw,40px)/1.2 system-ui,sans-serif;color:#fffde5;-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--ink),0 0 15px #fff;animation:hint-pulse .85s ease-in-out infinite alternate}.hint-pointer{display:block;width:16px;height:16px;border-left:4px solid var(--ink);border-top:4px solid var(--ink);transform:rotate(45deg);margin:0 auto 1px;animation:point-up .7s ease-in-out infinite alternate}.click-hint:active .hint-label{color:var(--pink)}#particles,#ripples{position:absolute;inset:0;pointer-events:none;z-index:24}.particle{position:absolute;left:0;top:0;width:52px;height:65px;object-fit:cover;border-radius:44%;border:2px solid var(--ink);pointer-events:none;will-change:transform}.ripple{position:absolute;left:50%;top:48%;width:160px;height:160px;margin:-80px 0 0 -80px;border:8px solid #fff6a3;border-radius:50%;box-shadow:0 0 0 6px var(--pink),0 0 30px #fff;will-change:transform;pointer-events:none}.magic-field{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0}.beam-wheel{position:absolute;left:50%;top:48%;width:var(--beam-size,150vmax);height:var(--beam-size,150vmax);transform:translate(-50%,-50%);transform-origin:50% 50%;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0deg 13deg,#fff4b891 15deg 17deg,transparent 19deg 30deg);animation:wheel 10s linear infinite;opacity:.8}.magic-wash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,#fff9ce 0%,#e399ff77 24%,#8a20dfaa 52%,#291052dd 100%)}.sigil{position:absolute;left:50%;top:48%;width:min(84vw,750px);aspect-ratio:1;border:3px solid #fff7b9;border-radius:50%;box-shadow:0 0 24px #ffea9188,inset 0 0 24px #ffea9188;transform:translate(-50%,-50%)}.sigil-one{animation:sigil-spin 8s linear infinite}.sigil-one i{position:absolute;inset:14%;border:2px solid #fff7b9;transform:rotate(15deg)}.sigil-one i:nth-child(2){transform:rotate(45deg)}.sigil-one i:nth-child(3){transform:rotate(75deg)}.sigil-two{width:min(63vw,560px);border:8px double #fff7b9;animation:sigil-spin 6s linear infinite reverse}.magic-stars{position:absolute;inset:0}.magic-stars i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:#fffbc7;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:star-pulse 1.1s ease-in-out infinite alternate;animation-delay:var(--delay)}.nova{position:absolute;left:50%;top:48%;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;background:radial-gradient(circle,#fffef1 0%,#fff5c5 38%,#ffe32caa 55%,#f7259a44 67%,transparent 73%);opacity:0;transform:scale(0)}body.transforming .halo-a{background:#9324e6}body.transforming .energy{opacity:0}body.transforming .core-shell{border-color:#fff6ba;box-shadow:0 0 35px #fff5a4,0 0 70px #ec8cff99}body.transforming .click-hint{opacity:.2;pointer-events:none}body.transforming .counter{color:#fff6a3}body[data-phase="reveal"] .counter{color:#ffec00}.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}.reduce-motion .hint-label,.reduce-motion .hint-pointer{animation:none}.reduce-motion .core-shell{transition:none}#waiting{min-height:100svh;display:grid;place-items:center;background:var(--yellow)}.waiting-image{width:150px;fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}@keyframes hint-pulse{from{opacity:.56;transform:scale(.95)}to{opacity:1;transform:scale(1.08)}}@keyframes point-up{to{transform:rotate(45deg) translate(-4px,-4px)}}@keyframes wheel{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes sigil-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes star-pulse{from{opacity:.3;transform:scale(.5) rotate(-15deg)}to{opacity:1;transform:scale(1.25) rotate(30deg)}}@media(max-width:600px){.satellite{width:78px;height:89px;margin:-44.5px 0 0 -39px}.satellite-card{border-width:2px;box-shadow:3px 4px 0 var(--ink);border-radius:12px}.subject{width:41vw;min-width:145px;max-width:210px}.core-shell{border-width:3px;box-shadow:6px 8px 0 var(--ink)}.halo-a{width:80vw;box-shadow:9px 10px 0 var(--ink)}.halo-b{width:68vw}.counter{top:24px;font-size:56px}.pause{right:16px;top:max(20px,env(safe-area-inset-top));width:44px;height:44px}.click-hint{bottom:max(20px,env(safe-area-inset-bottom))}.sigil{width:91vw}.sigil-two{width:72vw}.particle{width:44px;height:55px}}@media(max-height:590px){.subject{width:clamp(110px,27vh,180px);min-width:0}.counter{top:10px;font-size:42px}.click-hint{bottom:8px;padding-top:8px;padding-bottom:5px}.hint-label{font-size:25px}.satellite{width:65px;height:70px;margin:-35px 0 0 -32.5px}.halo-a{width:min(72vw,69vh)}.halo-b{width:min(60vw,57vh)}.energy{width:min(65vw,63vh)}.sigil{width:min(87vw,88vh)}.sigil-two{width:min(70vw,72vh)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
#counter{font:1000 clamp(28px,5.5vw,44px)/1.1 "Arial Black",system-ui,sans-serif;letter-spacing:0;color:var(--ink);-webkit-text-stroke:0;text-shadow:none;white-space:nowrap;padding:8px 17px;border:3px solid var(--ink);border-radius:12px;box-shadow:4px 5px 0 var(--ink);background:#fffffb}#counter[data-rank="1"]{background:#fcf1d3}#counter[data-rank="2"]{background:#feff06}#counter[data-rank="3"]{background:#f8cb47}#counter[data-rank="4"]{background:#e83827}.sound{position:absolute;top:max(20px,env(safe-area-inset-top));left:20px;z-index:50}.sound-cross{display:none}.sound[aria-pressed="true"] .sound-cross{display:block}.sound[aria-pressed="true"] .sound-waves{display:none}@media(max-width:600px){.sound{left:16px;width:44px;height:44px}}@media(max-height:590px){#counter{font-size:25px;padding:5px 13px}}
/* The whole rainbow stage is reused for every evolution. */
.rainbow-vortex{position:absolute;inset:0;background:conic-gradient(from 30deg at 50% 48%,#ff167e,#ff6a00,#ffed00,#55ff00,#00eeff,#255aff,#a300ff,#ff167e);mask-image:radial-gradient(ellipse at 50% 48%,transparent 4%,#000 35%,#000 75%,transparent 100%);opacity:.86;animation:rainbow-breathe 3.4s ease-in-out infinite alternate}.magic-wash{background:radial-gradient(ellipse at 50% 48%,transparent 0%,#7d00ff11 27%,#ab00ec33 53%,#15003b99 100%)}.beam-wheel{background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0deg 12deg,#fff5c9dd 14deg 15deg,#7affff99 16deg 17deg,transparent 19deg 30deg);opacity:.8}.prism-halo{position:absolute;left:50%;top:48%;width:min(89vw,790px);aspect-ratio:1;border-radius:50%;background:conic-gradient(#ff1688,#ff7800,#ffec00,#42ff00,#00efff,#3161ff,#bd11ff,#ff1688);mask-image:radial-gradient(circle,transparent 56%,#000 58%,#000 66%,transparent 69%);transform:translate(-50%,-50%);animation:prism-spin 4.5s linear infinite;filter:drop-shadow(0 0 12px #fff)}.sigil-one{border-color:#fff7b9;box-shadow:0 0 20px #fff7b9,0 0 45px #ff199c,inset 0 0 26px #fff7b9}.sigil-one i{border-color:#fff9ba}.sigil-two{border-color:#8effff;box-shadow:0 0 20px #24e9ff,inset 0 0 24px #ffec00}.magic-stars i{background:var(--star-color,#fffbc7);animation-duration:1.65s}.lens-flares{position:absolute;inset:0}.lens-flares i{position:absolute;width:10px;height:10px;border-radius:50%;background:white;box-shadow:0 0 10px 5px #fffead,0 0 22px 8px #ff76de;animation:flare-glow 2.6s ease-in-out infinite alternate}.lens-flares i::before,.lens-flares i::after{content:"";position:absolute;left:50%;top:50%;width:75px;height:3px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#fff,transparent)}.lens-flares i::after{transform:translate(-50%,-50%) rotate(90deg);width:54px}.lens-flares i:nth-child(1){left:14%;top:29%;animation-delay:-.4s}.lens-flares i:nth-child(2){left:84%;top:38%;animation-delay:-1.2s}.lens-flares i:nth-child(3){left:23%;top:68%;animation-delay:-.8s}.lens-flares i:nth-child(4){left:76%;top:73%;animation-delay:-1.6s}.lens-flares i:nth-child(5){left:50%;top:17%;animation-delay:-2.1s}.lens-flares i:nth-child(6){left:56%;top:83%;animation-delay:-.1s}body.transforming .click-hint{opacity:.55;pointer-events:auto}body[data-phase="showcase"] .prism-halo,body[data-phase="settle"] .prism-halo{width:min(94vw,820px)}body[data-phase="showcase"] .core-shell,body[data-phase="settle"] .core-shell{border-color:#fff9bc;box-shadow:0 0 0 5px #ff208f,0 0 0 9px #ffdf00,0 0 0 13px #36eeff,0 0 35px 16px #ff40f388,0 0 65px 24px #fff58188}body.transforming .satellite-card{border-color:var(--satellite-color);box-shadow:0 0 0 2px #fff9,0 0 16px var(--satellite-color)}@keyframes rainbow-breathe{from{opacity:.7}to{opacity:.94}}@keyframes prism-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes flare-glow{0%{opacity:.2;transform:scale(.45) rotate(-12deg)}65%,100%{opacity:1;transform:scale(1.35) rotate(12deg)}}
body[data-phase="settle"] .core-shell{border-color:var(--ink);box-shadow:9px 11px 0 var(--ink);transition:aspect-ratio .5s,border-radius .5s,border-color var(--settle-duration,2500ms),box-shadow var(--settle-duration,2500ms)}body[data-phase="settle"] .satellite-card{border-color:var(--ink);box-shadow:5px 6px 0 var(--ink);transition:border-color var(--settle-duration,2500ms),box-shadow var(--settle-duration,2500ms)}body[data-phase="settle"] .halo-a{background:var(--pink);transition:background var(--settle-duration,2500ms)}@media(max-width:600px){body[data-phase="settle"] .core-shell{box-shadow:6px 8px 0 var(--ink)}body[data-phase="settle"] .satellite-card{box-shadow:3px 4px 0 var(--ink)}}

body[data-phase="showcase"] .rainbow-vortex,body[data-phase="settle"] .rainbow-vortex{animation-duration:1.7s}body[data-phase="showcase"] .prism-halo,body[data-phase="settle"] .prism-halo{animation-duration:2.25s}body[data-phase="showcase"] .magic-stars i,body[data-phase="settle"] .magic-stars i{animation-duration:.825s}body[data-phase="showcase"] .lens-flares i,body[data-phase="settle"] .lens-flares i{animation-duration:1.3s}