:root{color-scheme:dark;font-family:"Arial Rounded MT Bold","Arial",sans-serif;background:#080b1b;color:#f4f3ff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,canvas:focus-visible{outline:2px solid #c4b7ff;outline-offset:5px}#game{height:100svh;min-height:340px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 48% 47%,#171832 0,#0b1024 42%,#080b1b 78%)}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:30px 38px;padding-top:max(30px,env(safe-area-inset-top));pointer-events:none}.brand{display:flex;align-items:center;gap:13px}.brand-mark{font-size:39px;color:#b6a4ff;text-shadow:0 0 26px #a286ff77}h1{font-size:21px;margin:0 0 5px;font-weight:600;letter-spacing:-.5px}.eyebrow{color:#9295b2;font-size:13px}.controls{display:flex;gap:9px;pointer-events:auto;direction:ltr}.icon-button{height:43px;width:43px;border:1px solid #ffffff12;border-radius:15px;background:#ffffff06;display:grid;place-items:center;transition:background .2s}.icon-button:hover{background:#ffffff12}.icon-button svg{height:20px;width:20px;stroke:#bfc3de;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.icon-button[aria-pressed=false]{opacity:.45}.icon-button:disabled{opacity:.25;cursor:default}.welcome{position:absolute;top:42%;left:16px;right:16px;transform:translateY(-50%);text-align:center;pointer-events:none;transition:opacity .7s,transform .7s}.welcome.hidden{opacity:0;transform:translateY(-44%)}.little-stars{display:block;color:#bda8fb;font-size:23px;letter-spacing:6px;margin-bottom:26px}.welcome h2{font-size:clamp(25px,3.6vw,45px);font-weight:500;letter-spacing:-1.3px;margin:0 0 15px;text-shadow:0 0 38px #ac94ff40}.welcome p{color:#a7a8c4;font-size:18px;margin:0}.touch-hint{display:inline-flex;align-items:center;gap:10px;margin-top:31px;font-size:14px;color:#969bbd}.touch-hint span{font-size:26px;color:#b7a7f8}.live-feedback{position:absolute;bottom:166px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:12px;color:#a6aac9;font-size:13px;pointer-events:none}.divider{width:3px;height:3px;background:#606886;border-radius:50%}footer{position:absolute;bottom:0;left:0;right:0;padding:0 24px max(23px,env(safe-area-inset-bottom));pointer-events:none;text-align:center}.mode-switch{pointer-events:auto;display:inline-flex;padding:6px;gap:5px;background:#11162cd9;border:1px solid #ffffff13;border-radius:24px;box-shadow:0 12px 40px #0003;backdrop-filter:blur(20px)}.mode-switch button{border:0;border-radius:18px;padding:13px 25px;background:transparent;font-size:15px;display:flex;align-items:center;gap:10px;color:#979ebd;transition:background .2s,color .2s}.mode-switch button[aria-pressed=true]{color:#ede5ff;background:#a68bff20;box-shadow:inset 0 0 0 1px #c1a2ff33}.mode-icon{font-size:23px;line-height:1;color:#b99afc}.mode-switch button[data-mode=bubbles] .mode-icon{color:#71d8f0}.mode-switch button[data-mode=ribbons] .mode-icon{color:#ff9cbf}.bottom-line{display:flex;gap:22px;justify-content:center;align-items:center;margin-top:18px}.bottom-line p{color:#737e9f;font-size:13px;margin:0}.bottom-line button{pointer-events:auto;background:transparent;border:0;color:#a2abc8;font-size:13px;min-height:32px}.bottom-line button[aria-pressed=true]{color:#dbc7ff}.bottom-line button span{margin-left:5px;font-size:18px}#notice{position:absolute;top:110px;left:24px;right:24px;max-width:420px;margin:auto;text-align:center;pointer-events:none;font-size:14px;line-height:1.7;color:#d1d4ed;background:#20263bf2;border:1px solid #ffffff14;border-radius:15px;padding:12px 18px;opacity:0;transition:opacity .3s}#notice.visible{opacity:1}@media(max-width:600px){header{padding:23px 20px;padding-top:max(23px,env(safe-area-inset-top))}.brand{gap:9px}.brand-mark{font-size:29px}h1{font-size:17px}.eyebrow{font-size:12px}.controls{gap:6px}.icon-button{width:36px;height:38px;border-radius:12px}.icon-button svg{height:18px;width:18px}.welcome{top:41%}.welcome h2{letter-spacing:-.7px;font-size:28px}.welcome p{font-size:16px}.mode-switch{width:100%;max-width:420px;border-radius:22px;gap:2px;padding:5px}.mode-switch button{flex:1;justify-content:center;padding:12px 9px;gap:7px;font-size:14px}.mode-icon{font-size:21px}footer{padding-left:16px;padding-right:16px}.bottom-line{gap:10px;margin-top:11px;flex-direction:column}.bottom-line p{font-size:12px}.bottom-line button{font-size:14px}.live-feedback{bottom:175px;font-size:12px}}@media(max-height:500px){header{padding:14px 22px}.eyebrow,.little-stars,.bottom-line p{display:none}.welcome{top:43%}.welcome h2{font-size:25px}.touch-hint{margin-top:12px}.mode-switch button{padding:8px 20px}.bottom-line{position:absolute;left:20px;bottom:19px}.live-feedback{bottom:90px}footer{padding-bottom:14px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

body.play-locked header .brand{opacity:.2}
body.play-locked .controls button:not(#parent-lock),body.play-locked footer,body.play-locked .live-feedback{visibility:hidden;pointer-events:none}
body.play-locked #parent-lock{position:absolute;left:20px;top:max(20px,env(safe-area-inset-top));opacity:.45;background:conic-gradient(#b6a4ff var(--hold,0%),#11162c 0);touch-action:none}
body.play-locked #parent-lock:hover,body.play-locked #parent-lock:focus-visible{opacity:1}
@media(max-width:390px){header{padding-left:14px;padding-right:14px}.brand-mark{display:none}.controls{gap:4px}.icon-button{width:34px}h1{font-size:16px}.brand{gap:0}}

.welcome{top:25%}.welcome .little-stars{display:none}.welcome h2{font-size:clamp(25px,3.5vw,40px)}.welcome .touch-hint{margin-top:12px}@media(max-height:500px){.welcome{top:35%}.welcome p,.welcome .touch-hint{display:none}}

dialog{direction:rtl;color:#f4f3ff;background:#141a30;border:1px solid #b8a5ff30;border-radius:26px;padding:27px;width:min(440px,calc(100% - 28px));max-height:85svh;box-shadow:0 30px 120px #0008;overscroll-behavior:contain}dialog::backdrop{background:#040714b8;backdrop-filter:blur(9px)}.settings-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}.settings-heading h2{font-size:23px;margin:6px 0 0}.settings-heading .icon-button{flex-shrink:0}.settings-section{padding:18px 0;border-bottom:1px solid #ffffff0e}.settings-section h3{font-size:16px;font-weight:500;color:#d4c3ff;margin:0 0 16px}.settings-section>label{display:flex;justify-content:space-between;font-size:14px;color:#c0c7e2;margin-top:13px}.settings-section output{direction:ltr;color:#e0d4ff;font-size:13px;font-variant-numeric:tabular-nums}input[type=range]{direction:ltr;width:100%;height:30px;accent-color:#b59aef;cursor:pointer;touch-action:pan-y}input[type=checkbox]{width:18px;height:18px;accent-color:#b59aef}.section-heading,.setting-row{display:flex;justify-content:space-between;align-items:center;gap:16px}.section-heading h3{margin:0}.check-label{display:flex;align-items:center;gap:7px;font-size:14px}.setting-row{font-size:14px;margin-top:8px}select{background:#222a46;color:#edf0ff;border:1px solid #ffffff16;border-radius:10px;padding:9px;font:inherit;max-width:65%}.test-button{background:#b29be61c;border:1px solid #b29be633;border-radius:11px;color:#ded0ff;min-height:42px;padding:8px 16px;margin-top:12px;font-size:14px}.test-button:disabled,input:disabled{opacity:.35;cursor:default}.setting-note{font-size:13px;line-height:1.65;color:#959fbd;margin:12px 0 0}.settings-actions{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:20px}.settings-actions button{border:0;background:transparent;color:#b7bed5;font-size:13px;min-height:44px}.settings-actions #settings-done{background:#b29be6;color:#11172a;border-radius:12px;padding:10px 16px}.bottom-line{flex-wrap:wrap}.bottom-line p{flex-basis:100%}@media(max-width:600px){.bottom-line{flex-direction:row;gap:5px 20px}.settings-heading h2{font-size:21px}dialog{padding:22px}.settings-actions{gap:6px}}

html,body{touch-action:pan-x pan-y;overscroll-behavior:none}
body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{touch-action:manipulation}
select{font-size:16px}
.audio-unlock{position:absolute;top:98px;left:50%;transform:translateX(-50%);border:1px solid #bea5ff50;background:#29223f;color:#f0e8ff;border-radius:18px;padding:10px 18px;font-size:15px;min-height:44px;z-index:2;touch-action:manipulation}
.audio-unlock[hidden],body.play-locked .audio-unlock{display:none}
@media(max-height:500px){.audio-unlock{top:72px}}