: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%;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 .btn:disabled{opacity:.3;cursor:default;pointer-events:none}.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%;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%;translate:-50%}.tempo input[type=range]{accent-color:#fff;width:100%;height:28px}.stamps{border:1px solid var(--line);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);pointer-events:auto;background:#0e1626db;border-radius:22px;flex-direction:column;gap:12px;width:min(94vw,380px);padding:14px;animation:.3s both reveal;display:flex;position:absolute;top:14%;left:50%;translate:-50%;box-shadow:0 18px 60px #00000080}.stamps .row{flex-wrap:nowrap;gap:10px}.stamp{aspect-ratio:1;border:1px solid var(--line);background:var(--glass);max-width:78px;color:var(--ink);cursor:pointer;touch-action:manipulation;border-radius:16px;flex:1;padding:10px;transition:transform .12s,background .2s}.stamp:active{background:var(--glass-hi);transform:scale(.92)}.stamp svg{fill:currentColor;filter:drop-shadow(0 0 3px);width:100%;height:100%;display:block}.name{color:var(--dim,#9fb6d2);align-items:center;gap:10px;display:flex}.name input{border:1px solid var(--line);min-width:0;height:44px;color:var(--ink);letter-spacing:.4px;background:#ffffff0f;border-radius:14px;outline:none;flex:1;padding:0 14px;font:600 18px/1 ui-rounded,system-ui,sans-serif}.name input:focus{background:#ffffff1a;border-color:#ffffff80}.name .btn{--btn:44px}.name .btn:disabled{opacity:.35;cursor:default}.voice{border:1px solid var(--line);width:196px;height:196px;box-shadow:0 18px 60px #00000080, 0 0 calc(14px + var(--level,0) * 80px) color-mix(in srgb, var(--c,#fff) 60%, transparent);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);pointer-events:auto;background:radial-gradient(circle at 50% 36%,#22304ceb,#0a101ef0);border-radius:50%;place-items:center;animation:.3s both reveal;display:grid;position:absolute;top:50%;left:50%;translate:-50% -50%}.voice:before{content:"";background:conic-gradient(var(--c,#fff) calc(var(--p,0) * 360deg), #ffffff21 0);pointer-events:none;border-radius:50%;position:absolute;inset:9px;-webkit-mask:radial-gradient(circle,#0000 64%,#000 66%);mask:radial-gradient(circle,#0000 64%,#000 66%)}.mic{background:var(--glass-hi);width:112px;height:112px;color:var(--ink);cursor:pointer;touch-action:manipulation;transform:scale(calc(1 + var(--level,0) * .16));border:1px solid #ffffff47;border-radius:50%;place-items:center;transition:transform 60ms linear,background .2s,border-color .2s,opacity .2s;display:grid}.mic:active{background:#ffffff42}.mic.rec{color:#fff;background:#ff40584d;border-color:#ff7882d9}.voice[data-phase=ready] .mic{animation:2.4s ease-in-out infinite breathe}.voice[data-phase=working] .mic{opacity:.5}.voice[data-phase=denied] .mic{color:#ff9aa6;border-color:#ff8c9699}.voice[data-phase=quiet] .mic{animation:.42s nope}.reddot{background:#ff3b57;border-radius:50%;width:12px;height:12px;animation:1s ease-in-out infinite blink;position:absolute;top:24px;right:30px;box-shadow:0 0 12px #ff3b57}@keyframes nope{0%,to{translate:0}20%{translate:-9px}45%{translate:8px}70%{translate:-5px}}@keyframes blink{50%{opacity:.25}}@keyframes breathe{50%{box-shadow:0 0 26px color-mix(in srgb, var(--c,#fff) 45%, transparent);background:#ffffff3d}}@media (prefers-reduced-motion:reduce){.shimmer{animation:none;box-shadow:0 0 0 4px #ffdc7866}.reveal,.picker,.toast,.tempo,.stamps,.voice,.chain i.next,.reddot,.voice[data-phase=quiet] .mic,.voice[data-phase=ready] .mic{animation:none}.mic{transform:none}}