:root{--bg:#0a1424;--ink:#eaf4ff;--glass:#ffffff13;--glass-hi:#ffffff29;--line:#ffffff29;--btn:44px;color:var(--ink);font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,sans-serif}#ui{pointer-events:none;position:fixed;inset:0;overflow:hidden}#ui button,#ui a,#ui .hit{pointer-events:auto}.btn{width:var(--btn);height:var(--btn);border:1px solid var(--line);color:var(--ink);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;touch-action:manipulation;font:inherit;border-radius:15px;place-items:center;padding:0;transition:transform .12s,background .2s,border-color .2s,box-shadow .25s,opacity .3s;display:grid;position:relative}.btn:active{background:var(--glass-hi);transform:scale(.92)}a.btn{text-decoration:none}.btn.on{background:var(--glass-hi);border-color:#ffffff80;box-shadow:0 0 18px #ffffff2e}.btn.small{--btn:36px;border-radius:12px}.btn.wide{width:auto;padding:0 16px}.tray{transform-origin:top;flex-direction:column;justify-content:flex-start;align-items:center;gap:12px;transition:opacity .4s;display:flex;position:absolute}.tray.side{align-items:stretch}.row{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.reveal{animation:.55s cubic-bezier(.2,.9,.3,1.15) both reveal}@keyframes reveal{0%{opacity:0;transform:translateY(14px)scale(.9)}to{opacity:1;transform:none}}.dot{border:2px solid color-mix(in srgb, var(--c) 45%, transparent);cursor:pointer;touch-action:manipulation;background:0 0;border-radius:50%;place-items:center;width:40px;height:40px;padding:0;transition:transform .15s,border-color .2s,box-shadow .25s;display:grid;position:relative}.dot:after{content:"";background:color-mix(in srgb, var(--c) 30%, transparent);border-radius:50%;width:20px;height:20px;transition:background .2s,transform .2s}.dot.used:after{background:var(--c);box-shadow:0 0 12px var(--c)}.dot.sel{border-color:var(--c);box-shadow:0 0 20px color-mix(in srgb, var(--c) 60%, transparent);transform:scale(1.1)}.dot.auto{border-style:dashed}.dot.muted:after{opacity:.25}.dot:active{transform:scale(.9)}.shimmer{animation:1.6s ease-in-out infinite shimmer,4s linear infinite hue}@keyframes shimmer{0%,to{box-shadow:0 0 #ffdc7800,0 0 10px #ffffff40}50%{box-shadow:0 0 0 7px #ffdc7838,0 0 26px #fff9}}@keyframes hue{0%{filter:hue-rotate()brightness(1.15)}to{filter:hue-rotate(360deg)brightness(1.15)}}.chord{border:2px solid color-mix(in srgb, var(--c) 55%, transparent);background:color-mix(in srgb, var(--c) 22%, transparent);cursor:pointer;touch-action:manipulation;border-radius:14px;width:42px;height:42px;padding:0;transition:transform .12s,background .2s,box-shadow .25s;position:relative}.chord:active{transform:scale(.9)}.chord.now{background:var(--c);box-shadow:0 0 18px var(--c)}.slots{gap:6px;display:flex}.slot{cursor:pointer;background:var(--c);opacity:.45;border:0;border-radius:6px;width:30px;height:12px;padding:0;transition:opacity .2s,transform .2s}.slot.now{opacity:1;box-shadow:0 0 10px var(--c);transform:scaleY(1.35)}.dropbtn{border:1px solid var(--line);min-width:112px;height:52px;color:var(--ink);background:var(--glass);touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:26px;place-items:center;padding:0 22px;display:grid;position:relative;overflow:hidden}.dropbtn .fill{transform-origin:0;transform:scaleX(var(--build,0));background:linear-gradient(90deg,#ff8c5080,#fff0c8f2);position:absolute;inset:0}.dropbtn svg{position:relative}.dropbtn.live{border-color:#ffdca0e6;box-shadow:0 0 26px #ffc87880}.clipbtn{overflow:hidden}.clipbtn.rec{color:#ff6b6b;border-color:#ff6b6bb3}.clipbtn.rec:after{content:"";height:3px;width:calc(var(--p,0) * 100%);background:#ff6b6b;position:absolute;bottom:0;left:0}.mini{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:auto;border-radius:14px;grid-template-rows:repeat(2,15px);grid-template-columns:repeat(2,15px);gap:5px;padding:7px;display:grid;position:absolute}.mini button{background:rgba(255, 255, 255, calc(var(--k) * .85));cursor:pointer;touch-action:manipulation;border:1.5px solid #ffffff59;border-radius:50%;padding:0}.mini button.here{border-color:#fff;box-shadow:0 0 9px #ffffffb3}.picker{border:1px solid var(--line);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);pointer-events:auto;background:#0e1626d1;border-radius:22px;flex-direction:column;gap:10px;width:min(94vw,380px);padding:14px;animation:.3s both reveal;display:flex;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 18px 60px #00000080}.picker .row{flex-wrap:nowrap;justify-content:flex-start;gap:6px}.picker .row.wrap{flex-wrap:wrap}.picker .btn{--btn:40px;border-radius:13px}.picker input[type=range]{accent-color:var(--c);pointer-events:auto;flex:1;height:28px}.toast{border:1px solid var(--line);background:#0e1626d1;border-radius:18px;padding:12px 18px;animation:.3s both reveal;position:absolute;top:14%;left:50%;transform:translate(-50%)}.topbar{align-items:center;gap:8px;display:flex;position:absolute}.chain{border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:18px;align-items:center;gap:10px;height:36px;padding:0 14px;display:flex;position:relative}.chain:before{content:"";background:#ffffff38;border-radius:1px;height:2px;margin-top:-1px;position:absolute;top:50%;left:20px;right:20px}.chain i{background:var(--c);width:14px;height:14px;box-shadow:0 0 10px var(--c);border-radius:50%;position:relative}.chain i.next{background:var(--bg);border:2px solid var(--c);box-shadow:none;animation:1.5s ease-in-out infinite bead}@keyframes bead{0%,to{transform:scale(.85);box-shadow:0 0 #0000}50%{box-shadow:0 0 12px var(--c);transform:scale(1.12)}}.tempo{border:1px solid var(--line);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);pointer-events:auto;background:#0e1626d1;border-radius:22px;grid-template-columns:44px 1fr;align-items:center;gap:10px 12px;width:min(94vw,380px);padding:16px;animation:.3s both reveal;display:grid;position:absolute;left:50%;transform:translate(-50%)}.tempo input[type=range]{accent-color:#fff;width:100%;height:28px}@media (prefers-reduced-motion:reduce){.shimmer{animation:none;box-shadow:0 0 0 4px #ffdc7866}.reveal,.picker,.toast,.tempo,.chain i.next{animation:none}}