: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:6rem;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%}.panel{border:.3rem solid var(--pink-hot);background:#fff;border-radius:2rem;grid-template-rows:1fr auto auto;gap:1.3rem;min-height:0;padding:1.5rem;display:grid;box-shadow:0 .6rem #d6146f33,inset 0 0 0 .5rem #ffeaf6}.dropzone{border:.32rem dashed var(--pink-light);cursor:pointer;background:repeating-linear-gradient(45deg,#fff6fb 0 1.1rem,#ffecf7 1.1rem 2.2rem);border-radius:1.6rem;outline:none;grid-template-columns:auto 1fr;align-items:center;gap:1.6rem;min-height:0;padding:1rem 1.8rem;transition:transform .15s,border-color .15s,background .15s;display:grid}.dropzone:hover,.dropzone:focus-visible,.dropzone.is-over{border-color:var(--pink-hot);background:#ffe4f3;transform:scale(1.01)}.dropzone.has-file{border-style:solid;border-color:var(--pink-hot)}.dropzone>*{pointer-events:none}.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}.dropzone-art{width:22rem}.dropzone-art img{filter:drop-shadow(0 .5rem .6rem #a80f5840);animation:2.6s ease-in-out infinite bob}.dropzone-text,.dropzone-file{gap:.4rem;min-width:0;display:grid}.dropzone-text strong,.dropzone-file strong{text-overflow:ellipsis;white-space:nowrap;font-size:2.1rem;font-weight:600;line-height:1.15;overflow:hidden}.dropzone-text span,.dropzone-file span{color:var(--text-soft);font-size:1.25rem}.dropzone-file strong{color:var(--pink-deep)}.bitrates{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.chip{border:.25rem solid var(--pink-light);box-shadow:0 .4rem 0 var(--pink-light), inset 0 .25rem 0 #fff;color:var(--text-soft);cursor:pointer;text-align:center;background:linear-gradient(#fff 0%,#ffeaf6 100%);border-radius:1.2rem;gap:.15rem;padding:.8rem 1rem;transition:transform .1s,box-shadow .1s,background .15s;display:grid}.chip:hover:not(:disabled){box-shadow:0 .55rem 0 var(--pink-light), inset 0 .25rem 0 #fff;transform:translateY(-.15rem)}.chip:disabled{cursor:not-allowed;opacity:.6}.chip strong{color:var(--text);font-size:1.55rem;font-weight:600}.chip span{font-size:1.15rem}.chip.is-active{border-color:var(--pink-hot);box-shadow:inset 0 .3rem 0 #ffffffb3, 0 .25rem 0 var(--pink-deep);background:linear-gradient(#ffb3e2,#ff8fd8);transform:translateY(.15rem)}.chip.is-active strong,.chip.is-active span{color:#7a0f47}.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}.error-text{text-align:center;color:#c2185b;width:100%;margin:0;font-size:1.25rem;font-weight:500}.working{justify-items:center;gap:.9rem;display:grid}.progress{grid-template-columns:1fr auto;align-items:center;gap:1.2rem;width:100%;padding:0 1rem;display:grid}.progress-track{border:.25rem solid var(--pink-light);background:#ffe4f3;border-radius:999px;height:2.8rem;position:relative}.progress-fill{background:repeating-linear-gradient(135deg,#ff2fa3 0 1.2rem,#ff6fc8 1.2rem 2.4rem) 0 0/200% 100%;border-radius:999px;height:100%;transition:width .3s;animation:1s linear infinite stripes}.progress-heart{filter:drop-shadow(0 0 .4rem #fff);font-size:3rem;transition:left .3s;animation:.8s ease-in-out infinite pulse;position:absolute;top:50%;transform:translate(-50%,-50%)}.progress-label{text-align:right;min-width:4.2rem;color:var(--pink-deep);font-size:1.7rem;font-weight:700}.result{text-align:center;grid-template-rows:1fr auto auto auto auto;justify-items:center;gap:.9rem}.result-art{width:100%}.result-art img{filter:drop-shadow(0 .6rem .8rem #a80f584d);animation:7s linear infinite spin}.result-title{font-family:var(--font-title);color:var(--pink-hot);text-shadow:0 .2rem #ffd6ec;margin:0;font-size:2.8rem;font-weight:400}.result-meta{min-width:0;max-width:100%;color:var(--text-soft);justify-content:center;margin:0;font-size:1.25rem;display:flex}.result-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.result-info{white-space:nowrap;flex-shrink:0}.player{color:var(--text-soft);align-items:center;gap:.8rem;font-size:1.25rem;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 spin{to{transform:rotate(360deg)}}@keyframes stripes{to{background-position:-200% 0}}@keyframes pulse{0%,to{transform:translate(-50%,-50%)scale(1)}50%{transform:translate(-50%,-50%)scale(1.25)}}@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:15rem}.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}.dropzone{text-align:center;grid-template-rows:1fr auto;grid-template-columns:1fr;justify-items:center;padding:.8rem 1rem}.dropzone-art{width:100%}.dropzone-text strong,.dropzone-file strong{max-width:100%;font-size:1.7rem}.bitrates{grid-template-columns:1fr;gap:.6rem}.chip{text-align:left;grid-template-columns:auto 1fr;align-items:center;gap:.8rem;padding:.5rem 1rem}.footer{text-align:center;flex-direction:column;gap:.1rem;padding:.5rem 1rem}}