:root{--bg: #1b1030;--ink: #1a0f26;--panel: rgba(32, 18, 54, .78);--panel-edge: rgba(255, 255, 255, .12);--text: #fbf3ff;--muted: #c7b5e3;--tomato: #ff6f6f;--mango: #ffb547;--butter: #ffe169;--mint: #5fe3a9;--sky: #58c8ff;--lilac: #a98bff;--gum: #ff86dc;--radius: 14px;--font: Fredoka, ui-rounded, "SF Pro Rounded", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#stage{position:fixed;inset:0;display:block;touch-action:none;cursor:crosshair}body[data-tool=blob] #stage{cursor:cell}#hud{position:fixed;inset:0;pointer-events:none;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;justify-content:space-between}#hud>*{pointer-events:auto}.bar{display:flex;align-items:flex-start;gap:12px;pointer-events:none!important}.bar>*{pointer-events:auto}.brand,.logo{display:flex;flex-direction:column;line-height:.85;user-select:none}.brand .b1,.logo .b1{font-weight:700;font-size:26px;letter-spacing:.04em;background:linear-gradient(90deg,var(--tomato),var(--mango),var(--butter),var(--mint),var(--sky),var(--lilac));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 var(--ink))}.brand .b2,.logo .b2{font-weight:600;font-size:13px;letter-spacing:.32em;color:var(--muted);padding-left:2px}.controls{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.chip,.seg{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px #00000040;color:var(--text);font:600 15px var(--font)}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button.chip{transition:transform .12s cubic-bezier(.3,1.8,.5,1),background .15s}button.chip:hover{transform:translateY(-2px) rotate(-1deg)}button.chip:active{transform:translateY(2px) scale(.96)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--butter);outline-offset:2px}.seg{padding:3px;gap:2px}.seg button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;color:var(--muted);transition:background .15s,color .15s}.seg button[aria-pressed=true]{background:var(--mint);color:var(--ink)}.seg button[data-tool=bumper][aria-pressed=true]{background:#7cf7e4}.ico-blob{width:12px;height:12px;border-radius:50%;background:currentColor}.ico-bumper{width:16px;height:4px;border-radius:2px;background:currentColor;transform:rotate(-30deg)}kbd{font:600 11px var(--font);padding:1px 5px;border-radius:5px;background:#ffffff24;opacity:.8}.scale .lbl{color:var(--muted)}.scale select{appearance:none;-webkit-appearance:none;font:600 15px var(--font);color:var(--butter);background:transparent;border:0;padding:4px 2px;cursor:pointer}.scale select option{color:var(--ink)}.grav .tog[aria-pressed=false]{color:var(--sky)}.grav input[type=range]{width:90px;accent-color:var(--mango)}.grav input:disabled{opacity:.35}[data-cmd=mute][aria-pressed=true]{color:var(--tomato)}.chaos{background:linear-gradient(135deg,var(--tomato),var(--gum));color:var(--ink);font-weight:700;letter-spacing:.03em}.groove{align-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(420px,100%)}.meter{position:relative;width:100%;height:22px;border-radius:999px;background:var(--panel);border:2px solid var(--panel-edge);overflow:hidden;box-shadow:0 4px #00000040}.meter .fill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,var(--mint),var(--sky),var(--lilac),var(--gum));transition:transform .12s linear}.meter.disco .fill{background:linear-gradient(90deg,var(--tomato),var(--mango),var(--butter),var(--mint),var(--sky),var(--lilac),var(--gum));background-size:200% 100%;animation:shimmer .6s linear infinite}.meter .label{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--text);text-shadow:0 1px 0 var(--ink),0 0 6px var(--ink)}.meter.disco{animation:bop .5s ease-in-out infinite}.streak{font-size:13px;color:var(--muted)}.keys{position:fixed;right:14px;bottom:12px;font-size:12px;color:#ffffff59;pointer-events:none!important}@keyframes shimmer{to{background-position:-200% 0}}@keyframes bop{50%{transform:scale(1.04) rotate(-.6deg)}}#overlay{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:#140a248c;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);cursor:pointer;transition:opacity .35s,visibility .35s;z-index:10}#overlay.gone{opacity:0;visibility:hidden;pointer-events:none}.card{max-width:400px;width:100%;padding:26px 24px 20px;border-radius:26px;background:#261640;border:2px solid var(--panel-edge);box-shadow:0 10px #0000004d,0 30px 60px #0006;text-align:center;animation:float 3.2s ease-in-out infinite}.logo{align-items:center;margin-bottom:10px}.logo .b1{font-size:48px}.logo .b2{font-size:17px}.card p{margin:8px 0 12px;color:var(--muted)}.card ul{list-style:none;padding:0;margin:0 0 18px;text-align:left;display:grid;gap:6px;font-size:15px}.card li:before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;background:var(--mango);box-shadow:0 0 0 3px #ffb54740}.card li:nth-child(2):before{background:var(--mint)}.card li:nth-child(3):before{background:var(--sky)}.card li:nth-child(4):before{background:var(--gum)}.start{width:100%;min-height:52px;border-radius:999px;background:linear-gradient(135deg,var(--mango),var(--tomato));color:var(--ink);font-weight:700;font-size:19px;box-shadow:0 5px #a2364a;transition:transform .12s;animation:wiggle 2.4s ease-in-out infinite}.start:active{transform:translateY(4px);box-shadow:0 1px #a2364a}.card small{display:block;margin-top:12px;color:var(--muted);font-size:12px}@keyframes float{50%{transform:translateY(-6px)}}@keyframes wiggle{0%,80%,to{transform:rotate(0)}85%{transform:rotate(-2deg) scale(1.03)}90%{transform:rotate(2deg) scale(1.03)}95%{transform:rotate(-1deg)}}@media(prefers-reduced-motion:reduce){.card,.start,.meter.disco,.meter.disco .fill{animation:none}}@media(max-width:720px){.bar{flex-direction:column;align-items:stretch;gap:8px}.brand{flex-direction:row;align-items:baseline;gap:8px}.brand .b1{font-size:20px}.brand .b2{font-size:11px;letter-spacing:.2em}.controls{margin-left:0;justify-content:flex-start;gap:6px}.chip,.seg{min-height:36px;padding:0 10px;font-size:14px}.seg button{min-height:30px;padding:0 10px}.scale .lbl,kbd{display:none}.grav input[type=range]{width:64px}.keys{display:none}}@media(hover:none){kbd,.keys{display:none}}
