:root{--pink: #ff4fd8;--cyan: #39c9ff;--yellow: #ffd166;--violet: #8a5cff}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#0a0514;font-family:"Baloo 2",Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}#app{position:fixed;top:0;right:0;bottom:0;left:0}canvas{display:block}#ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}#brand{position:absolute;top:18px;left:24px;color:#fff}#brand h1{font-size:clamp(28px,4.4vw,48px);font-weight:800;letter-spacing:1.5px;line-height:1;background:linear-gradient(92deg,var(--pink) 10%,var(--yellow) 50%,var(--cyan) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(255,79,216,.45));animation:wobble 3.6s ease-in-out infinite}#brand p{opacity:.72;font-size:14px;font-weight:600;margin-top:2px;letter-spacing:.4px}@keyframes wobble{0%,to{transform:rotate(-1.4deg) translateY(0)}50%{transform:rotate(1.4deg) translateY(-2px)}}#dock{position:absolute;left:50%;bottom:18px;transform:translate(-50%);display:flex;flex-direction:column;gap:10px;align-items:center;background:#180d309e;border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:12px 16px 14px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 44px #0000008c;pointer-events:auto;max-width:min(94vw,780px)}.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.chip{border:1px solid rgba(255,255,255,.16);background:#ffffff0f;color:#eee;padding:7px 14px;border-radius:999px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:transform .16s,background .16s,box-shadow .16s;white-space:nowrap}.chip:hover{transform:translateY(-2px);background:#ffffff21}.chip.active{background:linear-gradient(90deg,var(--pink),var(--violet));border-color:transparent;box-shadow:0 4px 20px #ff4fd88c}.chip span{margin-right:5px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}.ctrl{border:1px solid rgba(255,255,255,.18);background:#ffffff12;color:#fff;padding:8px 16px;border-radius:12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:transform .16s,background .16s}.ctrl:hover{transform:translateY(-2px);background:#ffffff24}.ctrl.on{background:linear-gradient(90deg,#39c9ff59,#39c9ff26);border-color:#39c9ff99}#musicBtn{background:linear-gradient(90deg,#ff9f43,#ff6b6b);border-color:transparent}#musicBtn.on{background:linear-gradient(90deg,#2dd4a7,#39c9ff)}#musicBtn.attention{animation:heartbeat 1.3s ease-in-out infinite}@keyframes heartbeat{0%,to{box-shadow:0 0 #ff9f43bf;transform:scale(1)}50%{box-shadow:0 0 0 11px #ff9f4300;transform:scale(1.045)}}.tempo{display:flex;align-items:center;gap:8px;color:#fff}.tempo-label{font-size:12px;font-weight:800;letter-spacing:1.5px;color:#fff9}.tempo input[type=range]{accent-color:var(--pink);width:130px;cursor:pointer}#bpmLabel{font-size:13px;font-weight:800;color:var(--yellow);min-width:62px}.bubble{position:absolute;transform:translate(-50%,-118%) rotate(-2deg);background:#fff;color:#221638;padding:9px 16px;border-radius:16px;border:3px solid #221638;font-weight:700;font-size:15px;line-height:1.25;max-width:250px;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s;box-shadow:4px 6px #22163859}.bubble.show{opacity:1}.bubble.pop{animation:pop .32s cubic-bezier(.34,1.56,.64,1)}.bubble:after{content:"";position:absolute;left:50%;bottom:-19px;transform:translate(-50%);border:8px solid transparent;border-top:11px solid #221638}@keyframes pop{0%{scale:.4}to{scale:1}}#hint{position:absolute;right:16px;bottom:14px;color:#ffffff6b;font-size:12px;font-weight:600;letter-spacing:.3px}@media(max-width:640px){#brand p,#hint{display:none}#dock{padding:10px;bottom:10px}}