*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:light dark;--bg: #f0f0f7;--surface: #ffffff;--text: #17171c;--muted: #6b6b78;--border: #e4e4ee;--accent: #6d5cff;--accent-strong: #5847e6;--accent-rim: #4133b8;--shadow: rgba(23, 23, 40, .12)}@media(prefers-color-scheme:dark){:root{--bg: #0b0b0f;--surface: #16161c;--text: #f4f4f8;--muted: #9a9aa8;--border: #26262f;--accent: #8b7bff;--accent-strong: #6d5cff;--accent-rim: #241d5c;--shadow: rgba(0, 0, 0, .5)}}body{min-height:100dvh;background-color:var(--bg);color:var(--text)}.page{max-width:80ch;margin-inline:auto;padding:2rem}.app{max-width:640px;margin-inline:auto;padding:clamp(1.25rem,4vw,2.5rem) 1.25rem 3rem;display:flex;flex-direction:column;gap:1.5rem;min-height:100dvh}.app__header{text-align:center}.app__title{font-size:clamp(2rem,8vw,2.75rem);font-weight:800;letter-spacing:-.03em;margin:0}.app__subtitle{margin:.35rem 0 0;color:var(--muted);font-size:1rem}.toy-switch{display:flex;gap:.25rem;padding:.25rem;background:var(--surface);border:1px solid var(--border);border-radius:999px;align-self:center;box-shadow:0 1px 2px var(--shadow)}.toy-switch__tab{appearance:none;border:none;background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:.95rem;padding:.55rem 1.25rem;border-radius:999px;cursor:pointer;transition:color .15s ease,background-color .15s ease}.toy-switch__tab:hover{color:var(--text)}.toy-switch__tab--active{background:var(--accent);color:#fff}.stage{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:clamp(1rem,4vw,2rem);box-shadow:0 1px 2px var(--shadow)}.bubblewrap{width:100%;display:flex;flex-direction:column;gap:1rem}.bubblewrap__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem}.bubblewrap__count{margin:0;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}.btn-ghost{appearance:none;font:inherit;font-weight:600;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:10px;padding:.45rem .9rem;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.btn-ghost:hover{border-color:var(--accent)}.bubblewrap__sheet{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(38px,11vw,54px),1fr));gap:clamp(8px,2.4vw,14px);place-items:center;padding:clamp(10px,3vw,18px);border-radius:18px;background:linear-gradient(115deg,#fff0 42%,#ffffff38,#fff0 58%),repeating-linear-gradient(59deg,#ffffff0d 0 2px,#463c8208 2px 6px),linear-gradient(160deg,#8c82f01a,#786edc0a);box-shadow:inset 0 1px 1px #ffffff8c,inset 0 -1px 2px #281e5a12}.bubble{appearance:none;border:none;padding:0;margin:0;position:relative;cursor:pointer;width:clamp(34px,10vw,50px);aspect-ratio:1;border-radius:50%;background:radial-gradient(120% 120% at 50% 38%,#ffffffad,#e9e7ff5c 33%,#978cf047 70%,#6d5cff70);box-shadow:0 4px 7px #3c327847,0 1px 2px #3c327833,inset 0 -3px 6px #4637a059,inset 0 2px 4px #ffffff8c;transition:transform .09s cubic-bezier(.2,.8,.3,1),box-shadow .12s ease,background .25s ease,opacity .25s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.bubble:before{content:"";position:absolute;top:13%;left:19%;width:34%;height:26%;border-radius:50%;background:radial-gradient(closest-side,#fffffff2,#fff0);transform:rotate(-18deg);pointer-events:none;transition:transform .09s ease,opacity .2s ease}.bubble:after{content:"";position:absolute;inset:13%;border-radius:50%;background:radial-gradient(closest-side at 74% 78%,#ffffff57,#fff0 62%);pointer-events:none;transition:opacity .2s ease}.bubble:nth-child(3n):before{top:16%;left:23%}.bubble:nth-child(4n):before{top:11%;left:16%;width:30%}.bubble:nth-child(5n){background:radial-gradient(120% 120% at 48% 40%,#ffffffa8,#e4e2ff57 33%,#9287ec4d 70%,#6554fa75)}.bubble:active:not(.bubble--popped){transform:scale(.9);box-shadow:0 2px 4px #3c327840,inset 0 -2px 4px #4637a052,inset 0 3px 6px #ffffff80}.bubble:active:not(.bubble--popped):before{transform:rotate(-18deg) scale(.82);opacity:.85}.bubble--popped{cursor:default;transform:scale(.82);opacity:.9;background:radial-gradient(closest-side at 42% 40%,#1e145029,#1e145000 72%),repeating-radial-gradient(circle at 50% 50%,#ffffff1a 0 1px,#5a509614 1px 3px),linear-gradient(150deg,#968ec833,#7870af1a);box-shadow:inset 0 3px 6px #32286e59,inset 0 -1px 2px #ffffff47}.bubble--popped:before,.bubble--popped:after{opacity:0}.bubble--popped:nth-child(2n){transform:scale(.82) rotate(9deg)}.bubble--popped:nth-child(3n){transform:scale(.8) rotate(-12deg)}.bubble--popped:nth-child(5n){transform:scale(.83) rotate(5deg)}@media(prefers-color-scheme:dark){.bubblewrap__sheet{background:linear-gradient(115deg,#fff0 42%,#ffffff1a,#fff0 58%),repeating-linear-gradient(59deg,#ffffff08 0 2px,#00000012 2px 6px),linear-gradient(160deg,#8b7bff1f,#5a50a00f);box-shadow:inset 0 1px 1px #ffffff1f,inset 0 -1px 2px #0006}.bubble{background:radial-gradient(120% 120% at 50% 38%,#ffffff80,#b4acff38 33%,#786cdc4d 70%,#5042be85);box-shadow:0 4px 8px #0000008c,inset 0 -3px 6px #140e3c99,inset 0 2px 4px #fff6}.bubble--popped{background:radial-gradient(closest-side at 42% 40%,#0006,#0000 72%),repeating-radial-gradient(circle at 50% 50%,#ffffff0d 0 1px,#00000029 1px 3px),linear-gradient(150deg,#3c366480,#1e1a3766);box-shadow:inset 0 3px 6px #0009,inset 0 -1px 2px #ffffff14}}.pusher{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1rem 0}.pusher__button{appearance:none;border:none;cursor:pointer;width:clamp(160px,55vw,220px);aspect-ratio:1;border-radius:50%;padding:14px;background:linear-gradient(145deg,var(--border),var(--surface));box-shadow:0 12px 24px var(--shadow),inset 0 -4px 8px #00000026,inset 0 3px 6px #fff6;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.pusher__cap{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 30%,#ffffff73,#fff0 55%),linear-gradient(180deg,var(--accent),var(--accent-strong));box-shadow:0 10px 0 var(--accent-rim),0 14px 18px var(--shadow),inset 0 3px 5px #ffffff59;transition:transform .05s ease,box-shadow .05s ease}.pusher__button--down .pusher__cap{transform:translateY(9px);box-shadow:0 1px 0 var(--accent-rim),0 3px 6px var(--shadow),inset 0 3px 6px #00000040}.pusher__count{margin:0;font-weight:700;font-size:1.1rem;color:var(--muted);font-variant-numeric:tabular-nums}.bubble:focus-visible,.toy-switch__tab:focus-visible,.btn-ghost:focus-visible,.pusher__button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}@media(prefers-reduced-motion:reduce){.bubble,.bubble:before,.bubble:after,.pusher__cap,.toy-switch__tab{transition:none}}