:root{--ink:#f4eefb;--ink-soft:#b9b2c8;--ink-faint:#7d7790;--paper:#07060c;--paper-2:#110c1c;--accent:#ef1dab;--gold:#ffd76a;--glass:#ffffff0f;--glass-line:#ffffff29;--hair:#ffffff1a;--panel-bg:#140e20b8;--scrim-bg:#06050c80;--prose:#cfc8de;--field:#201734;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-text-size-adjust:100%}html[data-theme=light]{--ink:#0b0b0f;--ink-soft:#6b6b76;--ink-faint:#a6a6b0;--paper:#fff;--paper-2:#f4f4f7;--glass:#ffffff8c;--glass-line:#ffffffbf;--hair:#0a0a1412;--panel-bg:#ffffff9e;--scrim-bg:#f4f4f766;--prose:#3a3a44;--field:#fff;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--paper);height:100%;color:var(--ink);overscroll-behavior:none;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:Hanken Grotesk,ui-sans-serif,system-ui,sans-serif;font-weight:400;overflow:hidden}#stage,.hint,.menu-toggle,.legal,#chordlegend,.label-layer,.note-bubble,.kbd-visual,.kbd-piano,.kbd-key,.kbd-hint,.profile-bar,.profile-chip,.scrim,.panel,.tabs,.tab,.ctl-row,.ctl-btn,.ctl-toggle{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#viz{z-index:0;pointer-events:none;width:100%;height:100%;display:block;position:fixed;inset:0}.fret-layer{z-index:1;pointer-events:none;opacity:0;transition:opacity .45s;position:fixed;inset:0}#stage{z-index:1;touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair;flex-direction:column;justify-content:center;align-items:center;gap:clamp(20px,5vh,54px);height:100dvh;display:flex;position:relative}.hz{letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);font-variant-numeric:tabular-nums;min-height:1.2em;font-family:Martian Mono,ui-monospace,monospace;font-size:clamp(11px,2.6vw,14px);font-weight:300;transition:color .4s}.orb{aspect-ratio:1;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(22px)saturate(1.5);will-change:transform;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:min(62vw,300px);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;display:flex;position:relative;box-shadow:0 30px 80px -30px #140a1e47,0 2px 10px #140a1e0f,inset 0 1px #ffffffe6,inset 0 -20px 40px -20px #ef1dab0f}.orb.playing{transform:scale(1.04);box-shadow:0 40px 90px -28px #ef1dab52,0 2px 10px #140a1e14,inset 0 1px #fffffff2,inset 0 -24px 50px -20px #ef1dab29}.note{letter-spacing:-.02em;color:var(--ink);font-size:clamp(72px,22vw,132px);font-weight:200;line-height:.9;transition:opacity .3s}.note-line{align-items:baseline;gap:8px;min-height:.9em;display:flex}.oct{color:var(--accent);font-family:Martian Mono,monospace;font-size:clamp(16px,5vw,30px);font-weight:400}.acc{letter-spacing:.1em;color:var(--accent);opacity:.85;font-family:Martian Mono,monospace;font-size:clamp(10px,2.4vw,13px);position:absolute;bottom:22%}.hint{color:var(--ink-faint);letter-spacing:.02em;font-size:clamp(12px,3vw,14px);transition:opacity .6s}.playing-anywhere .hint{opacity:0}.menu-toggle{z-index:7;left:calc(env(safe-area-inset-left) + 14px);top:calc(env(safe-area-inset-top) + 12px);background:var(--glass);border:1px solid var(--glass-line);cursor:pointer;border-radius:11px;justify-content:center;align-items:center;width:38px;height:38px;padding:0;display:flex;position:fixed;overflow:hidden;transform:none;box-shadow:0 8px 24px -10px #140a1e40}.menu-icon{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}.menu-bars{pointer-events:none;background:#07060c6b;flex-direction:column;justify-content:center;align-items:center;gap:3px;display:flex;position:absolute;inset:0}.menu-bars span{background:#fff;border-radius:2px;width:17px;height:2px;box-shadow:0 1px 2px #0000008c}.legal{z-index:2;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 26px);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);pointer-events:none;justify-content:space-between;padding:0 22px;font-family:Martian Mono,monospace;font-size:10px;display:flex;position:fixed}.legal a{color:inherit;pointer-events:auto;text-decoration:none}.legal .dot{display:none}#stage>*{animation:.9s cubic-bezier(.2,.8,.2,1) both rise}.hz{animation-delay:50ms}.orb{animation-delay:.12s}.hint{animation-delay:.3s}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){#stage>*,.orb{transition:none;animation:none}}.scrim{z-index:5;background:var(--scrim-bg);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s;position:fixed;inset:0}.scrim.on{opacity:1;pointer-events:auto}.panel{z-index:6;left:50%;top:max(4vh, calc(env(safe-area-inset-top) + 12px));background:var(--panel-bg);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(30px)saturate(1.6);opacity:0;pointer-events:none;border-radius:22px;flex-direction:column;width:min(92vw,440px);max-height:min(88dvh,800px);transition:opacity .32s,transform .32s cubic-bezier(.2,.8,.2,1);display:flex;position:fixed;transform:translate(-50%)translateY(-8px)scale(.98);box-shadow:0 40px 100px -34px #140a1e66,inset 0 1px #ffffffe6}.panel.on{opacity:1;pointer-events:auto;transform:translate(-50%)translateY(0)scale(1)}.panel-head{border-bottom:1px solid var(--hair);touch-action:none;justify-content:space-between;align-items:center;padding:18px 20px 12px;display:flex;position:relative}.panel-head:before{content:"";background:var(--ink-faint);opacity:.5;border-radius:2px;width:38px;height:4px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.panel-title{letter-spacing:.01em;font-size:17px;font-weight:500}.panel-close{border:1px solid var(--glass-line);background:var(--glass);width:30px;height:30px;color:var(--ink-soft);cursor:pointer;border-radius:50%;font-size:13px}.panel-close:active{transform:scale(.94)}.panel-body{scrollbar-width:thin;scrollbar-color:#ef1dab80 transparent;padding:16px 20px 22px;overflow-y:auto}.panel-body::-webkit-scrollbar{width:9px}.panel-body::-webkit-scrollbar-track{background:0 0}.panel-body::-webkit-scrollbar-thumb{background:#ef1dab66 padding-box content-box;border:3px solid #0000;border-radius:9px}.panel-body::-webkit-scrollbar-thumb:hover{background:#ef1dabb3 padding-box content-box}.panel-body.prose{-webkit-user-select:text;user-select:text;padding:26px 30px 34px}.panel-body.prose p{text-align:justify;-webkit-hyphens:auto;hyphens:auto;letter-spacing:.004em;color:var(--prose);margin-bottom:15px;font-size:12.5px;line-height:1.85}.panel-sec{margin-bottom:22px}.panel-sec:last-child{margin-bottom:0}.sec-label{letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);border-top:1px solid var(--glass-line);margin-top:26px;margin-bottom:6px;padding-top:16px;font-family:Martian Mono,monospace;font-size:10px}.sec-label:first-child{border-top:none;margin-top:2px;padding-top:0}.sec-note{color:var(--ink-soft);margin-top:6px;font-size:12.5px;line-height:1.55}.ctl-row{justify-content:space-between;align-items:center;gap:16px;padding:9px 0;display:flex}.ctl-label{color:var(--ink);font-size:14px}.ctl-slide{flex:1;align-items:center;gap:10px;max-width:62%;display:flex}.ctl-val{color:var(--ink-soft);text-align:right;min-width:34px;font-family:Martian Mono,monospace;font-size:11px}input[type=range]{appearance:none;background:#80808c59;border-radius:3px;outline:none;flex:1;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 8px #ef1dab73}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 8px #ef1dab73}.ctl-select{border:1px solid var(--glass-line);background:var(--field);color:var(--ink);border-radius:9px;padding:6px 10px;font-family:inherit;font-size:13px}.ctl-select option,.ctl-select optgroup{background:var(--field);color:var(--ink)}.ctl-num{border:1px solid var(--glass-line);background:var(--field);width:72px;color:var(--ink);text-align:right;border-radius:9px;padding:6px 8px;font-family:Martian Mono,monospace;font-size:13px}.ctl-btn{border:1px solid var(--glass-line);background:var(--glass);color:var(--ink);cursor:pointer;border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600}.ctl-btn.on{background:var(--accent);color:#fff;border-color:#0000}.ctl-btn:active{transform:translateY(1px)}.tabs{border-bottom:1px solid var(--hair);flex-wrap:wrap;flex-shrink:0;gap:6px;padding:12px 16px;display:flex}.tab{border:1px solid var(--hair);color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:999px;padding:6px 11px;font-size:12px}.tab.on{background:var(--accent);color:#fff;border-color:#0000}.tab-body{flex-direction:column;display:flex}.profile-bar{flex-direction:column;gap:8px;padding:2px 0;display:flex}.preset-item{background:var(--glass);border:1px solid var(--glass-line);width:100%;color:var(--ink);text-align:left;cursor:pointer;border-radius:14px;align-items:center;gap:12px;padding:13px 16px;font-size:15px;font-weight:600;transition:background .18s,color .18s,border-color .18s,transform .12s;display:flex}.preset-item:active{transform:scale(.99)}.preset-item.on{background:var(--accent);color:#fff;border-color:#0000;box-shadow:0 6px 20px -8px #ef1dabb3}.preset-dot{border-radius:50%;flex:none;width:14px;height:14px;box-shadow:0 0 8px -1px}.preset-name{flex:1}.preset-row{border-radius:14px;position:relative;overflow:hidden}.preset-actions{display:flex;position:absolute;inset:0 0 0 auto}.preset-act{color:#fff;cursor:pointer;border:none;min-width:74px;padding:0 14px;font-size:12.5px;font-weight:700}.preset-rename{background:#3b82f6}.preset-delete{background:#e0405e}.preset-face{z-index:1;background:var(--paper-2);touch-action:pan-y;will-change:transform;position:relative}.preset-save{border:1px dashed var(--glass-line);width:100%;color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:14px;margin-top:4px;padding:12px;font-size:14px;font-weight:600}.preset-save:active{background:var(--glass)}.ctl-toggle{border:1px solid var(--hair);cursor:pointer;background:#0a0a141a;border-radius:999px;width:44px;height:26px;padding:0;transition:background .25s;position:relative}.ctl-toggle .knob{background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .25s cubic-bezier(.2,.8,.2,1);position:absolute;top:2px;left:2px;box-shadow:0 1px 4px #0003}.ctl-toggle.on{background:var(--accent)}.ctl-toggle.on .knob{transform:translate(18px)}.ctl-toggle.soon{opacity:.4;cursor:not-allowed}.chord-legend{z-index:6;top:calc(env(safe-area-inset-top) + 16px);text-align:center;pointer-events:none;letter-spacing:.005em;color:var(--ink-soft);opacity:0;font-size:clamp(18px,5.5vw,34px);font-weight:300;line-height:1;transition:opacity .22s,color .22s;position:fixed;left:0;right:0}.chord-legend.on{opacity:1}.chord-legend.is-chord{color:var(--ink);text-shadow:0 0 26px #ef1dab52}.label-layer{pointer-events:none;z-index:35;position:fixed;inset:0;overflow:hidden}.note-bubble{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(13px)saturate(1.5);will-change:transform;border-radius:16px;flex-direction:column;align-items:center;gap:1px;padding:7px 13px;animation:.22s cubic-bezier(.2,.9,.2,1) bubble-in;display:flex;position:absolute;top:0;left:0;box-shadow:0 8px 26px -12px #ef1dab80,inset 0 1px #ffffff59}.nb-note{color:var(--ink);text-shadow:0 0 14px #ef1dab66;font-size:19px;font-weight:500;line-height:1}.nb-hz{letter-spacing:.02em;color:var(--accent);opacity:.92;font-family:Martian Mono,monospace;font-size:10px}@keyframes bubble-in{0%{opacity:0;transform-origin:50%}}body.hide-notes .label-layer,body.hide-notes #chordlegend,body.hide-visuals #viz{display:none!important}.kbd-visual{z-index:6;left:50%;bottom:calc(env(safe-area-inset-bottom) + 120px);opacity:0;pointer-events:none;flex-direction:column;align-items:center;gap:8px;width:min(420px,100vw - 168px);transition:opacity .25s,transform .25s;display:flex;position:fixed;transform:translate(-50%)translateY(10px)}.kbd-visual.on .kbd-piano,.kbd-visual.on .kbd-controls,.kbd-visual.in-menu .kbd-piano,.kbd-visual.in-menu .kbd-controls{pointer-events:auto}.kbd-visual.on{opacity:1;transform:translateX(-50%) translate(var(--kx,0px), var(--ky,0px)) scale(var(--ks,1));transform-origin:bottom}body.tray-edit .kbd-visual.on{outline:1.5px dashed var(--accent);outline-offset:6px;cursor:grab;touch-action:none;border-radius:16px}.kbd-visual.in-menu{opacity:1;pointer-events:auto;width:100%;margin-top:4px;position:static;transform:none}.kbd-piano{touch-action:none;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(16px)saturate(1.4);border-radius:14px;flex-direction:column;gap:4px;width:100%;padding:6px;display:flex;position:relative;box-shadow:0 18px 50px -24px #140a1e80}.kbd-octave{gap:3px;height:clamp(40px,11vh,72px);display:flex;position:relative}.kbd-key{pointer-events:auto;cursor:pointer;touch-action:none;border-radius:0 0 7px 7px;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;padding-bottom:7px;font-family:Martian Mono,monospace;transition:background 80ms,box-shadow 80ms;display:flex;position:relative}.kbd-key.white{border:1px solid var(--glass-line);color:var(--ink);background:linear-gradient(#ffffff24,#ffffff0d);flex:1}.kbd-key.black{color:#e7e0f0;z-index:2;background:linear-gradient(#1b1426,#070409);border:1px solid #0009;width:7%;height:56%;position:absolute;top:6px;transform:translate(-50%);box-shadow:0 4px 10px #00000080}.kbd-key.pressed{background:var(--accent);color:#fff;box-shadow:0 0 18px #ef1dabb3}.kk-cap{font-size:13px;font-weight:600}.kk-note{opacity:.65;font-size:9px}.kbd-key.black .kk-cap{font-size:11px}.kbd-key.black .kk-note{font-size:8px}.kbd-hint{color:var(--ink-faint);letter-spacing:.02em;text-align:center;font-size:11px}.kbd-controls{pointer-events:auto;justify-content:center;align-items:center;gap:12px;display:flex}.kbd-oct-btn{border:1px solid var(--glass-line);background:var(--glass);width:34px;height:30px;color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(12px)saturate(1.3);border-radius:10px;font-size:13px}.kbd-oct-btn svg{width:15px;height:15px;margin:0 auto;display:block}.kbd-oct-btn:active{background:var(--accent);color:#fff;transform:translateY(1px)}.kbd-oct-readout{text-align:center;letter-spacing:.04em;min-width:56px;color:var(--accent);font-family:Martian Mono,monospace;font-size:14px;font-weight:500}.inst-tray{z-index:5;left:50%;bottom:calc(env(safe-area-inset-bottom) + 14px);background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(18px)saturate(1.4);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;border-radius:22px;gap:7px;width:min(520px,94vw);padding:7px;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 18px 50px -22px #140a1e8c}.inst-card{color:var(--ink-faint);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:16px;flex-direction:column;flex:1 1 0;align-items:center;gap:3px;padding:10px 4px 8px;transition:background .2s,color .2s,box-shadow .2s;display:flex;position:relative}.inst-card.on{background:var(--accent);color:#fff;box-shadow:0 6px 18px -6px #ef1daba6}.inst-card.soon{opacity:.45}.inst-ic{line-height:0}.inst-ic svg{width:23px;height:23px;display:block}.inst-name{letter-spacing:.02em;font-size:10px;font-weight:600}.inst-gear{box-sizing:border-box;opacity:.45;border-radius:0 16px 0 11px;justify-content:flex-end;align-items:flex-start;width:26px;height:26px;padding:4px 4px 0 0;display:flex;position:absolute;top:0;right:0}.inst-gear svg{width:14px;height:14px;display:block}.inst-card.on .inst-gear{opacity:.9}.tray-lock{z-index:7;right:12px;top:calc(env(safe-area-inset-top) + 10px);background:var(--glass);border:1px solid var(--glass-line);width:34px;height:34px;color:var(--ink-faint);-webkit-backdrop-filter:blur(18px)saturate(1.4);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;display:flex;position:fixed}.tray-lock svg{width:18px;height:18px}.tray-lock.on{background:var(--accent);color:#fff;box-shadow:0 6px 18px -6px #ef1daba6}.inst-tray.free{-webkit-backdrop-filter:none;box-shadow:none;pointer-events:none;background:0 0;border-color:#0000;gap:0;width:auto;padding:0;top:0;bottom:auto;left:0;transform:none}.inst-tray.free .inst-card{pointer-events:auto;width:calc(62px * var(--card-scale,1));padding:calc(10px * var(--card-scale,1)) calc(4px * var(--card-scale,1)) calc(8px * var(--card-scale,1));background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(16px)saturate(1.4);box-shadow:0 8px 22px -12px #140a1e66}.inst-tray.free .inst-card .inst-ic svg{width:calc(23px * var(--card-scale,1));height:calc(23px * var(--card-scale,1))}.inst-tray.free .inst-card .inst-name{font-size:calc(10px * var(--card-scale,1))}.inst-tray.free .inst-card.on{background:var(--accent);border-color:#0000}body.tray-edit .inst-card{outline:1.5px dashed var(--accent);outline-offset:2px;cursor:grab;touch-action:none}body.tray-edit .inst-card:active{cursor:grabbing}.tray-ghost{z-index:4;border:1.5px dashed var(--glass-line);opacity:0;pointer-events:none;border-radius:16px;width:62px;height:60px;transition:opacity .2s;position:fixed}body.tray-edit .tray-ghost{opacity:.55}.loop-layers{flex-direction:column;gap:8px;max-height:240px;display:flex;overflow-y:auto}.loop-layer{background:var(--glass);border:1px solid var(--glass-line);border-radius:10px;flex-direction:column;gap:7px;padding:9px 11px;display:flex}.loop-layer-head{align-items:center;gap:10px;display:flex}.loop-layer-name{color:var(--ink);flex:1;font-size:13px;font-weight:600}.loop-slide-row{align-items:center;gap:10px;display:flex}.loop-slide-label{color:var(--ink-soft);min-width:32px;font-size:11px;font-weight:600}.loop-move{border:1px solid var(--glass-line);color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:8px;padding:5px 8px;font-size:12px;font-weight:700;line-height:1}.loop-move:disabled{opacity:.3;cursor:default}.beat-control{flex:1;align-items:center;gap:10px;max-width:62%;display:flex}.beat-control .ctl-select{flex:1;min-width:0}.beat-editor{flex-direction:column;gap:12px;display:flex}.beat-drum{flex-direction:column;gap:7px;display:flex}.beat-drum-head{align-items:center;gap:10px;display:flex}.beat-drum-name{min-width:46px;color:var(--ink);font-size:13px;font-weight:600}.beat-drum-head .ctl-slide,.loop-layer .ctl-slide{flex:1;max-width:none}.loop-mute{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;min-width:50px;padding:5px 9px;font-size:11px;font-weight:600}.loop-mute.off{color:var(--ink-faint);border:1px solid var(--glass-line);background:0 0}.loop-del{opacity:.55;color:var(--ink);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:5px 8px;font-size:13px}.loop-del:hover{opacity:1}.section-mode-pill{border:1px solid var(--glass-line);border-radius:8px;display:flex;overflow:hidden}.smpill-btn{color:var(--ink-faint);cursor:pointer;background:0 0;border:none;flex:1;padding:7px 8px;font-size:12px;font-weight:600;transition:background .14s,color .14s}.smpill-btn.active{background:var(--accent);color:#fff}.smpill-btn:disabled{opacity:.35;cursor:default}.note-piano{flex-wrap:wrap;gap:4px;margin:6px 0 2px;display:flex}.note-key{background:var(--glass);border:1px solid var(--glass-line);min-width:34px;color:var(--ink-faint);cursor:pointer;border-radius:7px;padding:6px 4px;font-size:10px;font-weight:600}.note-key.black{background:#00000047}.note-key.on{background:var(--accent);color:#fff;border-color:#0000}.sheet{z-index:6;background:var(--panel-bg);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(30px)saturate(1.6);width:min(96vw,480px);max-height:min(84dvh,760px);padding-bottom:env(safe-area-inset-bottom);opacity:0;pointer-events:none;border-bottom:none;border-radius:24px 24px 0 0;flex-direction:column;transition:opacity .3s,transform .34s cubic-bezier(.2,.8,.2,1);display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)translateY(14px);box-shadow:0 -30px 90px -34px #140a1e80,inset 0 1px #ffffffe6}.sheet.on{opacity:1;pointer-events:auto;transform:translate(-50%)translateY(0)}.sub-tabs{z-index:6;background:var(--paper-2);border-bottom:1px solid var(--glass-line);gap:6px;margin:-16px -20px 14px;padding:14px 20px 12px;display:flex;position:sticky;top:-16px}.sub-tab{border:1px solid var(--glass-line);background:var(--glass);min-width:0;color:var(--ink-soft);cursor:pointer;white-space:nowrap;border-radius:10px;flex:1 1 0;justify-content:center;align-items:center;gap:5px;padding:11px 4px;font-size:13px;font-weight:600;display:flex;overflow:hidden}.sub-tab.on{background:var(--accent);color:#fff;border-color:#0000}.sub-tab-ic{flex:none;width:15px;height:15px;display:inline-flex}.sub-tab-ic svg{width:15px;height:15px}.sub-tab-ic.flip{transform:scaleX(-1)}.perm-scrim{z-index:9;background:var(--scrim-bg);-webkit-backdrop-filter:blur(6px);opacity:0;justify-content:center;align-items:center;padding:24px;transition:opacity .22s;display:flex;position:fixed;inset:0}.perm-scrim.on{opacity:1}.perm-card{text-align:center;background:var(--panel-bg);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(30px)saturate(1.6);border-radius:22px;width:min(360px,90vw);padding:26px 24px 18px;box-shadow:0 40px 100px -34px #140a1e80}.perm-title{color:var(--ink);margin-bottom:10px;font-size:17px;font-weight:600}.name-input{border:1px solid var(--glass-line);background:var(--field);width:100%;color:var(--ink);text-align:center;border-radius:12px;margin-bottom:18px;padding:10px 12px;font-family:inherit;font-size:15px}.perm-body{color:var(--ink-soft);margin-bottom:22px;font-size:13px;line-height:1.6}.perm-actions{justify-content:center;gap:10px;display:flex}.step-grid{grid-template-columns:repeat(16,1fr);gap:3px;width:100%;display:grid}.step-cell{aspect-ratio:1;border:1px solid var(--hair);cursor:pointer;background:#7f7f8c1f;border-radius:4px;min-width:0;padding:0;transition:background .12s,box-shadow .12s}.step-cell.beat-start{border-color:var(--glass-line);border-width:1.5px}.step-cell.on{background:var(--accent);border-color:#0000;box-shadow:0 0 10px #ef1dab8c}.step-cell.hold{background:#e8b13ad9;border-color:#0000;box-shadow:0 0 8px #e8b13a80}.step-cell.playing{outline:2px solid var(--gold);outline-offset:1px}.np-scrim{z-index:8;background:var(--scrim-bg);-webkit-backdrop-filter:blur(5px);justify-content:center;align-items:center;display:none;position:fixed;inset:0}.np-scrim.on{display:flex}.numpad{background:var(--panel-bg);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(30px)saturate(1.6);border-radius:22px;width:min(280px,80vw);padding:18px;box-shadow:0 40px 100px -34px #140a1e66}.np-disp{text-align:center;color:var(--ink);margin-bottom:14px;font-family:Martian Mono,monospace;font-size:30px}.np-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.np-key{border:1px solid var(--hair);background:var(--glass);color:var(--ink);cursor:pointer;border-radius:12px;padding:14px 0;font-size:18px}.np-key:active{background:var(--accent);color:#fff}