:root{--pink-hot:#ff2fa3;--pink-deep:#d6146f;--pink-dark:#a80f58;--pink-light:#ff8fd8;--pink-pale:#ffd6ec;--pink-cream:#fff3f9;--lavender:#c77dff;--gold:gold;--text:#7a0f47;--text-soft:#b04a85;--font-title:"Pacifico", "Brush Script MT", cursive;--font-body:"Fredoka", "Segoe UI", system-ui, sans-serif}html{font-size:min(.96vw,1.67dvh,15px)}@media (orientation:portrait){html{font-size:min(2.52vw,1.36dvh)}}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}body{font-family:var(--font-body);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;background:#ff9ad5}button,input{font:inherit}.stage{background-color:#ff9ad5;background-image:linear-gradient(#ffb6e6 0%,#ff8fd8 60%,#ff6fc8 100%);background-position:50%;background-size:cover;place-items:center;display:grid;position:fixed;inset:0;overflow:hidden}.stage.has-bg{background-image:var(--bg-url), linear-gradient(180deg, #ffb6e6, #ff6fc8)}.stage:before{content:"";pointer-events:none;opacity:.35;background-image:radial-gradient(circle,#ffffffe6 1px,#0000 1.6px),radial-gradient(circle,#fff9 1px,#0000 1.6px);background-position:0 0,20px 30px;background-size:70px 70px,45px 45px;animation:2.6s ease-in-out infinite alternate twinkle;position:absolute;inset:0}.hearts-layer,.sparkle-layer{pointer-events:none;position:fixed;inset:0;overflow:hidden}.hearts-layer{z-index:1}.sparkle-layer{z-index:50}.heart{color:#fff;text-shadow:0 0 8px #ff2fa3b3;animation:linear infinite float-up;position:absolute;bottom:-12%}.sparkle{text-shadow:0 0 6px #fff;animation:.8s ease-out forwards sparkle;position:absolute;transform:translate(-50%,-50%)}.screen{z-index:2;aspect-ratio:16/9;background:linear-gradient(#fff8fc 0%,#ffe6f4 100%);border:.55rem solid #ff4db8;border-radius:2.6rem;grid-template-rows:auto 1fr auto;width:100rem;display:grid;position:relative;overflow:hidden;box-shadow:0 0 0 .45rem #fff,0 0 0 .9rem #ff8fd8,0 2rem 4rem #a80f5859,inset 0 0 0 .35rem #ffffffe6}.titlebar{color:#fff;background:linear-gradient(#ff7fd0 0%,#ff2fa3 55%,#e0148a 100%);border-bottom:.35rem solid #fff;grid-template-columns:1fr auto 1fr;align-items:center;padding:.7rem 2.2rem;display:grid;box-shadow:inset 0 .7rem #ffffff73}.title{font-family:var(--font-title);letter-spacing:.02em;text-shadow:0 .25rem #b50f66,0 0 1.2rem #fff9;margin:0;font-size:3.4rem;font-weight:400;line-height:1.3}.titlebar-deco{letter-spacing:.35em;color:#ffe1f3;text-shadow:0 0 .6rem #fff;font-size:1.7rem}.titlebar-deco.right{text-align:right}.jewels{justify-content:flex-end;gap:.7rem;display:flex}.jewel{border:.2rem solid #fff;border-radius:50%;width:1.9rem;height:1.9rem;display:block;box-shadow:0 .25rem #a80f588c,inset 0 .35rem #fff9}.jewel-a{background:linear-gradient(#ffd1ec,#ff2fa3)}.jewel-b{background:linear-gradient(#e9d3ff,#c77dff)}.jewel-c{background:linear-gradient(#fff3b0,gold)}.body{grid-template-columns:32fr 68fr;gap:2rem;min-height:0;padding:1.6rem 2.2rem 1.2rem;display:grid}.guide{grid-template-rows:auto 1fr;gap:1.6rem;min-height:0;display:grid}.bubble{border:.3rem solid var(--pink-hot);isolation:isolate;background:#fff;border-radius:1.8rem;min-height:10.5rem;padding:1.2rem 1.4rem 1.1rem;position:relative;box-shadow:0 .5rem #d6146f40,inset 0 0 0 .35rem #ffeaf6}.bubble-text{min-height:8.2rem;margin:0;font-size:1.5rem;font-weight:500;line-height:1.35}.bubble-tail{z-index:-1;border-right:.3rem solid var(--pink-hot);border-bottom:.3rem solid var(--pink-hot);background:#fff;width:2rem;height:2rem;position:absolute;bottom:-1.25rem;left:50%;transform:translate(-50%)rotate(45deg)}.doll{min-height:0;position:relative}.doll img{object-fit:contain;filter:drop-shadow(0 .7rem .9rem #a80f584d);transform-origin:bottom;max-width:100%;max-height:100%;margin:auto;animation:3.2s ease-in-out infinite bob;position:absolute;inset:0}.doll-working img{animation:1.1s ease-in-out infinite wiggle}.doll-cheer img{animation:.55s ease-in-out infinite alternate cheer}.doll-fallback{place-items:center;font-size:18rem;display:grid;position:absolute;inset:0}.doll-shadow{background:radial-gradient(#a80f5859,#0000 70%);border-radius:50%;height:1.6rem;position:absolute;bottom:.4rem;left:22%;right:22%}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.art{align-self:stretch;min-width:0;min-height:0;position:relative}.art img,.art .img-fallback{object-fit:contain;max-width:100%;max-height:100%;margin:auto;position:absolute;inset:0}.art .img-fallback{place-items:center;font-size:9rem;display:grid}.panel{border:.3rem solid var(--pink-hot);background:#fff;border-radius:2rem;grid-template-rows:auto 1fr;gap:1rem;min-height:0;padding:1.2rem 1.5rem 1.5rem;display:grid;box-shadow:0 .6rem #d6146f33,inset 0 0 0 .5rem #ffeaf6}.panel-title{text-align:center;font-family:var(--font-title);color:var(--pink-hot);text-shadow:0 .2rem #ffd6ec;margin:0;font-size:2.3rem;font-weight:400;line-height:1.3}.deck-grid{min-height:0;box-shadow:inset 0 .3rem 0 #ffffffb3, inset 0 -.4rem 0 #a80f5840, 0 .35rem 0 var(--pink-light);background:repeating-linear-gradient(45deg,#ffffff59 0 .6rem,#0000 .6rem 1.2rem),linear-gradient(#ffb3e2 0%,#ff8fd8 100%);border-radius:1.6rem;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);gap:1.2rem;padding:1.2rem;display:grid}.key{--key-color:var(--pink-hot);min-width:0;min-height:0;box-shadow:0 .55rem 0 var(--pink-deep), 0 .9rem 1.2rem #a80f5847, inset 0 .4rem 0 #fff, inset 0 0 0 .2rem var(--pink-pale);color:var(--text);font-family:var(--font-body);text-align:center;cursor:pointer;background:linear-gradient(#fff 0%,#fff3f9 55%,#ffe4f3 100%);border:.28rem solid #fff;border-radius:1.5rem;outline:none;grid-template-rows:1fr auto auto;justify-items:center;gap:.2rem;padding:.9rem .9rem 1rem;text-decoration:none;transition:translate .1s,box-shadow .1s,filter .15s;display:grid;position:relative}.key:hover,.key:focus-visible{filter:brightness(1.03);box-shadow:0 .9rem 0 var(--pink-deep), 0 1.3rem 1.6rem #a80f584d, inset 0 .4rem 0 #fff, inset 0 0 0 .2rem var(--pink-light);translate:0 -.35rem}.key:focus-visible{box-shadow:0 0 0 .3rem #fff, 0 0 0 .65rem var(--gold), 0 .9rem 0 var(--pink-deep), 0 1.3rem 1.6rem #a80f584d, inset 0 .4rem 0 #fff}.key:active{box-shadow:0 .1rem 0 var(--pink-deep), 0 .2rem .4rem #a80f5840, inset 0 .4rem 0 #fff, inset 0 0 0 .2rem var(--pink-light);translate:0 .4rem}.key-art{width:100%;container-type:size}.key-art img{filter:drop-shadow(0 .4rem .5rem #a80f5840);transition:transform .15s}.key-art .img-fallback{filter:drop-shadow(0 .4rem .5rem #a80f5840);font-size:min(6rem,78cqh);line-height:1}.key:hover .key-art img,.key:hover .key-art .img-fallback,.key:focus-visible .key-art img,.key:focus-visible .key-art .img-fallback{animation:1.4s ease-in-out infinite key-bounce}.key-name{max-width:100%;color:var(--key-color);text-shadow:0 .1rem #fff;font-size:1.55rem;font-weight:700;line-height:1.15}.key-tag{max-width:100%;color:var(--text-soft);font-size:1.1rem;font-weight:500;line-height:1.2}.key-locked{cursor:pointer;color:var(--text-soft);opacity:.85;background:linear-gradient(#fff6fb 0%,#ffeaf6 100%);border-style:dashed;border-color:#ffd6ec;box-shadow:0 .45rem #f39fd0,0 .7rem 1rem #a80f582e,inset 0 .4rem #fff}.key-locked:hover,.key-locked:focus-visible{opacity:1;box-shadow:0 .7rem #f39fd0,0 1rem 1.3rem #a80f5833,inset 0 .4rem #fff}.key-locked:focus-visible{box-shadow:0 0 0 .3rem #fff, 0 0 0 .65rem var(--gold), 0 .7rem 0 #f39fd0, inset 0 .4rem 0 #fff}.key-locked:active{box-shadow:0 .1rem #f39fd0,inset 0 .4rem #fff}.key-locked .key-name{color:var(--text-soft)}.key-locked .key-tag{color:#cf7fb0}.key-locked .key-art img{opacity:.9;filter:drop-shadow(0 .4rem .5rem #a80f5833)saturate(.85);max-height:88%}.key-locked:hover .key-art img,.key-locked:focus-visible .key-art img{opacity:1;filter:drop-shadow(0 .4rem .5rem #a80f5840)}.key-locked.is-wiggling{animation:.45s ease-in-out key-wiggle}.btn{font-family:var(--font-body);color:#fff;text-shadow:0 .15rem #b50f66;cursor:pointer;box-shadow:0 .55rem 0 var(--pink-dark), 0 .9rem 1.3rem #a80f5847, inset 0 .45rem 0 #ffffff8c;background:linear-gradient(#ff7fd0 0%,#ff2fa3 52%,#e0148a 100%);border:.28rem solid #fff;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;padding:.95rem 2.4rem;font-size:1.55rem;font-weight:700;line-height:1;text-decoration:none;transition:transform 80ms,box-shadow 80ms,filter .15s;display:inline-flex}.btn:hover:not(:disabled){filter:brightness(1.07)}.btn:active:not(:disabled){box-shadow:0 .1rem 0 var(--pink-dark), inset 0 .45rem 0 #ffffff8c;transform:translateY(.45rem)}.btn:disabled{cursor:not-allowed;text-shadow:none;color:#fff;background:linear-gradient(#ffc9e8 0%,#ff9ad8 100%);border-color:#fff;box-shadow:0 .35rem #e08ab8,inset 0 .45rem #ffffff80}.btn-big{padding:1.25rem 3.4rem;font-size:2.1rem}.btn-ghost{color:var(--pink-deep);text-shadow:none;border-color:var(--pink-light);box-shadow:0 .45rem 0 var(--pink-light);background:#fff}.btn-ghost:active:not(:disabled){box-shadow:0 .1rem 0 var(--pink-light)}.btn-tiny{box-shadow:0 .3rem 0 var(--pink-dark), inset 0 .3rem 0 #ffffff8c;margin-top:.7rem;padding:.5rem 1.2rem;font-size:1.05rem}.btn-round{width:3.4rem;height:3.4rem;padding:0;font-size:1.3rem}.btn-hub{color:var(--pink-deep);text-shadow:none;box-shadow:0 .35rem 0 var(--pink-dark), inset 0 .3rem 0 #fff;background:linear-gradient(#fff 0%,#ffeaf6 100%);border-color:#fff;justify-self:start;padding:.55rem 1.4rem;font-size:1.25rem}.btn-hub:active{box-shadow:0 .05rem 0 var(--pink-dark), inset 0 .3rem 0 #fff;transform:translateY(.3rem)}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;display:flex}.footer{color:#fff;text-shadow:0 .1rem #a80f5880;background:linear-gradient(#ff6fc8,#ff2fa3);border-top:.3rem solid #fff;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 2.2rem;font-size:1.2rem;display:flex}.footer-right{align-items:center;gap:1rem;display:inline-flex}.footer-love{font-family:var(--font-title);font-size:1.35rem}.mute{width:2.8rem;height:2.8rem;box-shadow:0 .3rem 0 var(--pink-dark), inset 0 .3rem 0 #ffffff8c;cursor:pointer;background:linear-gradient(#ff7fd0 0%,#ff2fa3 52%,#e0148a 100%);border:.2rem solid #fff;border-radius:50%;padding:0;font-size:1.3rem;line-height:1;transition:transform 80ms,box-shadow 80ms,filter .15s}.mute:hover{filter:brightness(1.07)}.mute:active{box-shadow:0 .05rem 0 var(--pink-dark), inset 0 .3rem 0 #ffffff8c;transform:translateY(.25rem)}.rotate-hint{display:none}@media (orientation:landscape) and (max-height:450px) and (pointer:coarse){.screen{display:none}.rotate-hint{z-index:3;place-items:center;padding:16px;display:grid;position:relative}.rotate-card{text-align:center;border:4px solid var(--pink-hot);box-shadow:0 0 0 5px #fff, 0 0 0 9px var(--pink-light), 0 12px 30px #a80f5859;background:#fff;border-radius:24px;padding:18px 28px}.rotate-card h2{font-family:var(--font-title);color:var(--pink-hot);margin:4px 0;font-size:26px;font-weight:400}.rotate-card p{color:var(--text-soft);margin:0;font-size:15px}.rotate-phone{font-size:40px;animation:1.6s ease-in-out infinite rotate-phone;display:inline-block}}@keyframes rotate-phone{0%,to{transform:rotate(0)}50%{transform:rotate(90deg)}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-.6rem)}}@keyframes wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes cheer{0%{transform:translateY(0)scale(1)}to{transform:translateY(-1.4rem)scale(1.03)}}@keyframes key-bounce{0%,to{transform:translateY(0)scale(1.06)}50%{transform:translateY(-.5rem)scale(1.06)}}@keyframes key-wiggle{0%,to{transform:translate(0)rotate(0)}20%{transform:translate(-.5rem)rotate(-2.5deg)}40%{transform:translate(.5rem)rotate(2.5deg)}60%{transform:translate(-.35rem)rotate(-1.5deg)}80%{transform:translate(.35rem)rotate(1.5deg)}}@keyframes twinkle{0%{opacity:.2}to{opacity:.5}}@keyframes float-up{0%{transform:translateY(0)rotate(0)}to{transform:translateY(-125vh)rotate(25deg)}}@keyframes sparkle{0%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(0)}to{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2) rotate(180deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (orientation:portrait){.screen{aspect-ratio:1/1.85;border-radius:2rem;width:38rem}.jewels{display:none}.titlebar{text-align:center;grid-template-columns:1fr;gap:.3rem;padding:.5rem 1rem}.titlebar-deco{display:none}.btn-hub{justify-self:center;padding:.4rem 1.2rem;font-size:1.1rem}.title{font-size:2.6rem}.body{grid-template-rows:auto 1fr;grid-template-columns:1fr;gap:1.2rem;padding:1.2rem 1.4rem 1rem}.guide{grid-template-rows:none;grid-template-columns:1fr 10rem;gap:.8rem;height:14rem}.bubble{min-height:0;padding:.9rem 1rem}.bubble-text{min-height:0;font-size:1.3rem}.bubble-tail{bottom:40%;left:auto;right:-1.25rem;transform:rotate(-45deg)}.btn-tiny{margin-top:.4rem;font-size:1.15rem}.panel{gap:.7rem;padding:1rem 1.1rem 1.2rem}.panel-title{font-size:2rem}.deck-grid{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(2,1fr);gap:.9rem;padding:.9rem}.key{border-radius:1.2rem;gap:.1rem;padding:.5rem .5rem .7rem}.key-name{font-size:1.35rem}.key-tag{font-size:1.15rem}.footer{text-align:center;flex-direction:column;gap:.1rem;padding:.5rem 1rem}}