:root{--bg:#edf4ff;--ink:#17233f;--accent:#436df4;--bubble:#5b85ff;--bubble2:#2d59dd;--glow:#cfe0ff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 20%,var(--glow),transparent 30%),var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif;transition:background .5s}body[data-theme=sunset]{--bg:#fff1eb;--accent:#f06c66;--bubble:#ff8c76;--bubble2:#e7595b;--glow:#ffd4c7}body[data-theme=mint]{--bg:#eafaf4;--accent:#27a982;--bubble:#45c99f;--bubble2:#159276;--glow:#c8f3e4}body[data-theme=lavender]{--bg:#f3efff;--accent:#8066d9;--bubble:#9a7de7;--bubble2:#6e51c2;--glow:#ded3fa}button,a{font:inherit}header{height:70px;max-width:1120px;margin:auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between}header a{text-decoration:none;color:inherit;font-weight:800}.brand{font:800 20px "Manrope"}.brand>span{display:inline-grid;place-items:center;width:37px;height:37px;border-radius:12px;background:var(--accent);color:#fff;margin-right:7px}.brand b{color:var(--accent)}main{max-width:1000px;margin:auto;padding:30px 18px 80px}.intro{text-align:center}.intro>p{font-size:10px;font-weight:800;letter-spacing:2.5px;color:var(--accent)}.intro h1{font:800 clamp(55px,9vw,95px)/.95 "Manrope";letter-spacing:-5px;margin:15px}.intro h1 span{color:var(--accent)}.intro h2{font-size:17px;color:#69738a;font-weight:600}.controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:34px 0 16px}.themes,.actions{display:flex;gap:7px;flex-wrap:wrap}.themes button,.actions button{border:1px solid #dce2ed;background:#ffffffc7;border-radius:14px;padding:10px 13px;color:#687188;font-weight:700;cursor:pointer}.themes button{display:flex;align-items:center;gap:7px}.themes i{width:16px;height:16px;border-radius:50%;background:var(--bubble);box-shadow:inset -3px -3px 5px var(--bubble2)}.themes button.selected{background:var(--ink);border-color:var(--ink);color:#fff}.play-card{position:relative;background:#fff9;border:1px solid #fff;border-radius:34px;padding:17px;box-shadow:0 30px 80px #2b477d20;backdrop-filter:blur(10px);overflow:hidden}.stats{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#7a8396;font-size:12px}.stats b{color:var(--accent);font-size:19px;margin-right:3px}.stats p{margin:0;font-weight:800;color:var(--ink)}.bubble-sheet{min-height:560px;border-radius:25px;padding:20px;display:grid;grid-template-columns:repeat(10,1fr);gap:9px;background:linear-gradient(145deg,var(--bubble),var(--bubble2));box-shadow:inset 0 0 35px #fff3,inset 0 -12px 25px #102c7d35;touch-action:none;user-select:none}.bubble{aspect-ratio:1;border:0;border-radius:50%;padding:0;background:radial-gradient(circle at 31% 24%,#fff9 0 8%,#fff2 18%,transparent 35%),radial-gradient(circle at 48% 43%,var(--bubble) 0 42%,var(--bubble2) 75%);box-shadow:inset 5px 6px 12px #fff6,inset -8px -10px 14px #173b9c58,0 5px 7px #132d813d;cursor:pointer;transition:transform .12s,filter .15s,box-shadow .15s}.bubble:hover:not(.popped){transform:scale(1.06)}.bubble.popped{transform:scale(.83);background:radial-gradient(circle at 50% 55%,#17376a25,transparent 48%);box-shadow:inset 4px 5px 12px #142d6c65,0 1px 1px #fff7;filter:saturate(.55);cursor:default}.bubble.pop-now{animation:pop .22s ease-out}.complete{position:absolute;z-index:4;inset:67px 17px 17px;border-radius:25px;background:#17233fe8;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;backdrop-filter:blur(8px)}.complete[hidden]{display:none}.complete>span{font-size:75px}.complete h2{font:800 42px "Manrope";margin:8px}.complete p{color:#cbd2df}.complete button{border:0;border-radius:15px;background:var(--accent);color:#fff;padding:13px 21px;font-weight:800}.calm-note{max-width:650px;margin:25px auto 0;display:flex;align-items:center;justify-content:center;gap:15px;text-align:left;color:#687188}.calm-note>i{font-style:normal;font-size:36px;color:var(--accent)}.calm-note b{color:var(--ink)}.calm-note p{font-size:12px;margin:3px 0}@keyframes pop{45%{transform:scale(1.18)}to{transform:scale(.83)}}@media(max-width:720px){main{padding:15px 8px 50px}.controls{flex-direction:column;align-items:stretch}.themes,.actions{justify-content:center}.themes button{font-size:11px}.actions button{font-size:11px}.play-card{padding:8px;border-radius:24px}.bubble-sheet{grid-template-columns:repeat(7,1fr);gap:7px;padding:11px;min-height:520px;border-radius:19px}.complete{inset:58px 8px 8px}.stats{height:48px}.intro h2{font-size:14px}}@media(max-width:420px){.bubble-sheet{grid-template-columns:repeat(6,1fr);min-height:500px}.themes button{padding:8px}.themes i{display:none}.stats p{display:none}}