:root{--bg: #0a0f1e;--panel: #101729;--panel-2: #0c1322;--border: #1c2740;--text: #dbe4f5;--dim: #8fa0bf;--accent: #4da3ff;--accent-2: #7ee0ff;--danger: #ff5a5a;--warn: #ffb454}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}input,select{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:4px 8px}input:focus,select:focus{outline:1px solid var(--accent)}.dim{color:var(--dim)}.btn{background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:6px 12px;color:var(--text);transition:background .12s,border-color .12s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn:hover:not(:disabled){background:#18223b;border-color:#2c3d63}.btn:disabled{opacity:.4;cursor:default}.btn.primary{background:linear-gradient(180deg,#2f6fd8,#245ab8);border-color:#3a7be0}.btn.primary:hover:not(:disabled){background:linear-gradient(180deg,#3a7be6,#2c66c8)}.btn.ghost{background:transparent;border-color:transparent;color:var(--dim)}.btn.ghost:hover:not(:disabled){color:var(--text);border-color:var(--border)}.btn.active{border-color:var(--accent);color:var(--accent-2);box-shadow:0 0 0 1px #4da3ff59 inset}.btn.big{padding:12px 22px;font-size:16px;border-radius:10px}.chip{background:transparent;border:1px solid var(--border);color:var(--dim);border-radius:5px;width:24px;height:22px;font-size:11px;line-height:1}.chip.on{color:var(--accent-2);border-color:var(--accent)}.chip.on-warn{color:var(--warn);border-color:var(--warn)}.chip.ghost{border-color:transparent}.chip.ghost:hover{border-color:var(--border);color:var(--text)}.logo{font-weight:700;font-size:18px;letter-spacing:.2px;color:var(--text);text-decoration:none}.logo span{color:var(--accent)}.studio{display:flex;flex-direction:column;height:100%}.studio-body{flex:1;display:flex;min-height:0}.studio-main{flex:1;display:flex;flex-direction:column;min-width:0}.transport{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:nowrap}.play-btn{width:44px;font-size:15px}.field{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:12px}.field input[type=number]{width:62px}.btn-group{display:flex;gap:4px}.project-field{display:flex;align-items:center;gap:7px;flex:0 1 auto;min-width:0;font-size:11px}.project-name{flex:0 1 200px;min-width:110px;font-weight:600;background:transparent;border-color:transparent}.project-name:hover,.project-name:focus{background:var(--panel-2);border-color:var(--border)}.transport-right{margin-left:auto;display:flex;align-items:center;gap:10px}.save-btn{display:flex;align-items:center;gap:6px}.save-dot{width:6px;height:6px;border-radius:50%;background:#ffd166;flex:none}.save-btn.saved{background:#14512f;border-color:#2ea86a}.master-vol{display:flex;align-items:center;gap:6px;width:150px;font-size:12px}.scope{border:1px solid var(--border);border-radius:6px;display:block}.menu{position:relative}.menu summary{list-style:none;-webkit-user-select:none;user-select:none}.menu summary::-webkit-details-marker{display:none}.menu[open] .menu-items{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:6px;display:flex;flex-direction:column;min-width:210px;z-index:30;box-shadow:0 10px 30px #00000080}.menu-items button,.menu-items a{background:none;border:none;text-align:left;padding:8px 10px;border-radius:6px;color:var(--text);text-decoration:none;font-size:13px}.menu-items button:hover:not(:disabled),.menu-items a:hover{background:#18223b}.mixer{flex:1;min-width:0;display:flex;align-items:flex-start;gap:10px;padding:14px;overflow:auto}.mixer-strips{flex:1;display:flex;align-items:flex-start;gap:8px;min-width:0}.strip{flex:none;width:86px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px 10px;background:var(--panel);border:1px solid var(--border);border-radius:10px;cursor:pointer}.strip.selected{border-color:var(--accent)}.strip.muted{opacity:.45}.strip.master{border-color:#2c3a5c;background:#0d1424}.strip-colour{width:100%;height:3px;border-radius:2px}.strip-name{width:100%;font-size:12px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strip-inst{width:100%;font-size:10px;color:var(--dim);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strip-body{display:flex;align-items:center;gap:8px;margin:4px 0}.fader-wrap{position:relative;width:30px;height:150px}.fader{position:absolute;top:50%;left:50%;width:150px;margin:0;transform:translate(-50%,-50%) rotate(-90deg);accent-color:var(--accent);cursor:pointer}.strip-meter{position:relative;width:9px;height:150px;background:#070b14;border:1px solid var(--border);border-radius:3px;overflow:hidden}.strip-meter-fill{position:absolute;left:0;bottom:0;width:100%;height:0;background:var(--accent);transition:height .05s linear}.strip-db{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}.strip-buttons{display:flex;gap:5px}.strip-buttons.limiter{flex-direction:column;align-items:center;gap:1px;font-size:10px;font-variant-numeric:tabular-nums}.menu-sep{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);padding:10px 10px 4px;border-top:1px solid var(--border);margin-top:4px}.menu-sep:first-child{border-top:none;margin-top:0}.switcher{position:relative;flex:none}.cube-btn{width:38px;height:32px;display:grid;place-items:center;background:transparent;border:1px solid transparent;border-radius:7px;cursor:pointer;perspective:110px}.cube-btn:hover,.cube-btn[aria-expanded=true]{background:#16203a;border-color:var(--border)}.cube{position:relative;width:20px;height:20px;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-34deg);transition:transform .42s cubic-bezier(.34,1.3,.5,1)}.cube-btn:hover .cube{transform:rotateX(-28deg) rotateY(-50deg)}.cube-btn[aria-expanded=true] .cube{transform:rotateX(-30deg) rotateY(-58deg) scale(1.06)}.cube-face{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:1.5px;padding:1.5px;background:#05080f;border-radius:3px;backface-visibility:hidden}.cube-face i{border-radius:1px}.cf-front{transform:translateZ(10px)}.cf-right{transform:rotateY(90deg) translateZ(10px)}.cf-top{transform:rotateX(90deg) translateZ(10px)}.switcher-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:250px;padding:4px;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 34px #00000075}.sw-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:none;border:0;border-radius:7px;color:var(--text);font:inherit;text-align:left;text-decoration:none;cursor:pointer}.sw-item:hover{background:#18223b}.sw-item.on{background:#16294a}.sw-glyph{flex:none;width:26px;height:26px;display:grid;place-items:center;font-size:14px;color:var(--accent);background:#101827;border:1px solid var(--border);border-radius:6px}.sw-text{display:flex;flex-direction:column;gap:1px;min-width:0}.sw-text strong{font-size:13px;font-weight:600}.sw-text small{font-size:11px;line-height:1.3;color:var(--dim)}.sw-tick{margin-left:auto;color:var(--accent);font-size:12px}.sw-soon{margin-left:6px;padding:1px 5px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);background:#101827;border:1px solid var(--border);border-radius:999px;vertical-align:1px}.jam-solo{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.jam-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px 24px}.wisp-stage{--level: 0;position:relative;width:min(60vh,560px);max-width:100%;max-height:100%;aspect-ratio:1101 / 896;display:grid;place-items:center;transform:scale(calc(1 + var(--level) * .13));filter:brightness(calc(1 + var(--level) * .85)) saturate(calc(1 + var(--level) * .5));will-change:transform,filter}.wisp-glow{position:absolute;top:8%;right:8%;bottom:8%;left:8%;border-radius:50%;background:radial-gradient(circle at 50% 52%,rgba(77,163,255,calc(.16 + var(--level) * .3)) 0%,rgba(47,125,255,calc(.07 + var(--level) * .16)) 38%,transparent 70%);filter:blur(18px)}.wisp-spin{position:absolute;top:0;right:0;bottom:0;left:0;mix-blend-mode:screen;pointer-events:none;will-change:transform;animation:wisp-spin-ccw 96s linear infinite}.wisp-spin-b{animation-duration:149s}@keyframes wisp-spin-ccw{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.wisp-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;will-change:transform,opacity}.wisp-a{opacity:.85;animation:wisp-drift-a 19s ease-in-out infinite,wisp-breathe 7.5s ease-in-out infinite}.wisp-b{opacity:.45;animation:wisp-drift-b 27s ease-in-out infinite,wisp-breathe 11s ease-in-out infinite reverse}@keyframes wisp-drift-a{0%,to{transform:rotate(0) scale(1) translate(0)}50%{transform:rotate(3deg) scale(1.06) translate(1.5%,-1.2%)}}@keyframes wisp-drift-b{0%,to{transform:rotate(0) scale(1.09) translate(0)}50%{transform:rotate(-4deg) scale(1) translate(-2%,1.6%)}}@keyframes wisp-breathe{0%,to{opacity:.5}50%{opacity:.9}}.wisp-wave{width:min(88vh,780px);max-width:100%;height:104px;display:block;margin-top:-8px;pointer-events:none}@media(prefers-reduced-motion:reduce){.wisp-spin,.wisp-a,.wisp-b{animation:none}.wisp-a{opacity:.8}.wisp-b{opacity:.4}}.jam-tracks{position:absolute;top:14px;left:14px;z-index:6;width:min(34%,420px);max-height:calc(100% - 28px);display:flex;flex-direction:column;gap:6px;overflow-y:auto;pointer-events:none}.jam-track{display:flex;gap:9px;padding:8px 10px;background:#101829d1;border:1px solid var(--border);border-radius:9px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:jam-track-in .32s cubic-bezier(.22,1.1,.4,1) both;pointer-events:auto}.jam-track-btn{flex:none;width:19px;height:19px;display:grid;place-items:center;padding:0;background:#0d1424;color:var(--dim);border:1px solid var(--border);border-radius:5px;font-size:11px;line-height:1;cursor:pointer}.jam-track-btn:hover:not(:disabled){background:#1b2a49;color:var(--text)}.jam-track-btn.danger:hover:not(:disabled){background:#3a1220;border-color:#ff5a5a;color:#ffd9d9}.jam-track-btn:disabled{opacity:.35;cursor:not-allowed}@keyframes jam-track-in{0%{opacity:0;transform:translateY(-6px)}}.jam-track-colour{flex:none;width:3px;border-radius:2px;background:var(--accent)}.jam-track-body{flex:1;min-width:0}.jam-track-top{display:flex;align-items:baseline;gap:8px}.jam-track-top strong{flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jam-track-name{flex:1;min-width:0;padding:1px 3px;background:transparent;color:var(--text);border:1px solid transparent;border-radius:4px;font:inherit;font-size:12px;font-weight:600}.jam-track-name:hover{border-color:var(--border)}.jam-track-name:focus{outline:none;background:#0a1120;border-color:var(--accent)}.jam-track-actions{display:flex;gap:4px;margin-left:8px}.jam-track.quiet{opacity:.5}.jam-track-btn.on{background:#16294a;border-color:var(--accent);color:var(--accent)}.jam-track-btn.on-warn{background:#3a1220;border-color:#ff5a5a;color:#ffd9d9}.jam-track-count{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}.jam-track-sub{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:10px;color:var(--dim)}.jam-track-bars{margin-left:auto;opacity:.75}.jam-track-strip{position:relative;height:12px;margin-top:6px;background:#070b14;border-radius:3px;overflow:hidden}.jam-track-strip span{position:absolute;top:2px;bottom:2px;width:2px;border-radius:1px;opacity:.85}.jam-track.live{border-color:#ff5a5a;background:#3a1220d1}.jam-track.live .jam-track-colour{background:#ff5a5a;animation:rec-pulse 1.1s ease-in-out infinite}.jam-tip{position:absolute;z-index:20;max-width:250px;padding:7px 10px;transform:translate(-50%);background:#0d1526;border:1px solid #2c3a5c;border-radius:8px;box-shadow:0 10px 26px #00000080;pointer-events:none;animation:jam-tip-in .12s ease-out both}@keyframes jam-tip-in{0%{opacity:0;transform:translate(-50%) translateY(-3px)}}.jam-tip strong{display:block;font-size:11.5px;font-weight:600;color:var(--text);line-height:1.35}.jam-tip small{display:block;margin-top:3px;font-size:10.5px;line-height:1.4;color:var(--dim)}.count-in{position:absolute;top:4%;left:50%;z-index:5;font-family:Consolas,Lucida Console,Courier New,monospace;font-size:clamp(54px,11vh,108px);font-weight:700;line-height:1;letter-spacing:.08em;color:#d6e8ff;text-shadow:0 0 30px rgba(77,163,255,.6),0 0 70px rgba(47,125,255,.35);pointer-events:none;animation:count-pop .42s cubic-bezier(.22,1.2,.4,1) both}@keyframes count-pop{0%{opacity:0;transform:translate(-50%) scale(.68)}38%{opacity:1;transform:translate(-50%) scale(1.07)}to{opacity:.9;transform:translate(-50%) scale(1)}}.count-in.armed{animation:count-pop .42s cubic-bezier(.22,1.2,.4,1) both,count-wait 1.9s ease-in-out .42s infinite}@keyframes count-wait{0%,to{opacity:.9}50%{opacity:.42}}.count-in small{display:block;margin-top:6px;font-family:var(--font, system-ui),sans-serif;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:lowercase;color:var(--dim);text-shadow:none}.knob-rail{position:relative;flex:none;padding:8px 16px 6px;background:linear-gradient(180deg,#121a2c,#0d1424);border-top:1px solid var(--border)}.knob-rail-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}.knob-rail-target{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}.knob-rail-reset{margin-left:auto;padding:2px 9px;background:#0d1424;color:var(--dim);border:1px solid var(--border);border-radius:5px;font:inherit;font-size:10px;cursor:pointer}.knob-rail-reset:hover{background:#1b2a49;color:var(--text)}.knob-rail-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:start}.knob-rail-knobs{grid-column:2;display:flex;justify-content:center;gap:4px;overflow-x:auto}.master-strip{grid-column:3;justify-self:start;margin-left:18px}.master-strip{display:flex;flex-direction:column;align-items:center;gap:1px;padding-left:18px;border-left:1px solid var(--border)}.master-fader-wrap{position:relative;width:26px;height:58px}.master-fader{position:absolute;top:50%;left:50%;width:58px;height:14px;margin:0;padding:0;transform:translate(-50%,-50%) rotate(-90deg);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:ns-resize}.master-fader::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) 0 var(--fill, 66%),#1b2438 var(--fill, 66%) 100%)}.master-fader::-moz-range-track{height:4px;border-radius:2px;background:#1b2438}.master-fader::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}.master-fader::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:8px;height:14px;margin-top:-5px;border-radius:2px;background:#dbe9ff;border:1px solid #2a3552}.master-fader::-moz-range-thumb{width:8px;height:14px;border:1px solid #2a3552;border-radius:2px;background:#dbe9ff}.knob{flex:0 1 auto;min-width:54px;max-width:82px;display:flex;flex-direction:column;align-items:center;gap:1px}.knob-dial{width:40px;height:40px;cursor:ns-resize;touch-action:none;outline:none}.knob-dial:focus-visible .knob-cap{stroke:var(--accent);stroke-width:1.5}.knob-track{fill:none;stroke:#1b2438;stroke-width:4;stroke-linecap:round}.knob-fill{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}.knob-cap{fill:#16203a;stroke:#2a3552;stroke-width:1}.knob-mark{stroke:#cfe4ff;stroke-width:2;stroke-linecap:round}.knob-label{padding:0;background:none;border:0;font:inherit;font-size:9px;font-weight:600;letter-spacing:.02em;color:var(--dim);white-space:nowrap;cursor:help}.knob-label:hover{color:var(--text)}.knob-label.static{cursor:default}.knob-slot.open .knob-label{color:var(--accent)}.fx-info{position:absolute;bottom:calc(100% - 4px);z-index:30;width:290px;max-width:calc(100vw - 24px);transform:translate(-50%);padding:11px 13px 12px;background:#0d1526;border:1px solid #2c3a5c;border-radius:10px;box-shadow:0 14px 34px #00000090;animation:fx-info-in .14s ease-out both}@keyframes fx-info-in{0%{opacity:0;transform:translate(-50%) translateY(4px)}}.fx-info-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}.fx-info-head strong{flex:1;font-size:12px;color:var(--accent);letter-spacing:.04em;text-transform:uppercase}.fx-info-head button{width:18px;height:18px;display:grid;place-items:center;padding:0;background:none;color:var(--dim);border:0;border-radius:4px;font-size:11px;cursor:pointer}.fx-info-head button:hover{background:#1b2a49;color:var(--text)}.fx-info p{margin:0 0 7px;font-size:11.5px;line-height:1.5;color:var(--text)}.fx-info-try{color:var(--dim)!important}.fx-info-try span{display:block;margin-bottom:2px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6f8db8}.fx-info-more{margin:0!important;padding-top:7px;border-top:1px solid var(--border);font-size:10.5px!important;color:var(--dim)!important}.knob-value{font-size:9px;color:#5f79a0;font-variant-numeric:tabular-nums}.jam-track.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.kb-panel{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;padding:8px 16px;background:var(--panel);border-top:1px solid var(--border);flex:none}.kb-field{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim)}.kb-field select{background:#0d1424;color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font:inherit;font-size:12px}.kb-soon select:disabled{opacity:.55;cursor:not-allowed}.kb-segment{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden}.kb-segment button{padding:4px 10px;background:#0d1424;color:var(--dim);border:0;font:inherit;font-size:12px;cursor:pointer}.kb-segment button+button{border-left:1px solid var(--border)}.kb-segment button.on{background:#1b3665;color:var(--text)}.kb-check{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);cursor:pointer}.kb-record{display:flex;align-items:center;gap:7px;padding:5px 12px;background:#0d1424;color:var(--text);border:1px solid var(--border);border-radius:7px;font:inherit;font-size:12px;font-variant-numeric:tabular-nums;cursor:pointer}.kb-record-dot{width:9px;height:9px;border-radius:50%;background:#ff5a5a;flex:none}.kb-record.kb-recording{background:#3a1220;border-color:#ff5a5a;color:#ffd9d9}.kb-record.kb-recording .kb-record-dot{animation:rec-pulse 1.1s ease-in-out infinite}.kb-record.kb-counting,.kb-record.kb-armed{border-color:#4da3ff;color:#cfe4ff}.kb-record.kb-counting .kb-record-dot{background:#4da3ff;animation:rec-pulse .5s ease-in-out infinite}.kb-record.kb-armed .kb-record-dot{background:#4da3ff;animation:rec-pulse 1.6s ease-in-out infinite}@keyframes rec-pulse{0%,to{opacity:1;box-shadow:0 0 #ff5a5a99}50%{opacity:.55;box-shadow:0 0 0 5px #ff5a5a00}}.keybed{position:relative;width:100%;height:clamp(112px,19vh,168px);flex:none;background:#070b14;border-top:1px solid var(--border);-webkit-user-select:none;user-select:none;touch-action:none}.keybed-whites{display:flex;gap:1px;height:100%;background:#0a1120}.key{position:relative;cursor:pointer}.key-white{flex:1 1 0;min-width:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#f4f8ff,#dfeaff 58%,#c3d6f2);box-shadow:inset 0 -7px 9px -7px #7b9cc9,inset 1px 0 #ffffff80}.key-black{position:absolute;top:0;width:calc(100% / var(--whites) * .6);height:62%;transform:translate(-50%);border-radius:0 0 4px 4px;background:linear-gradient(180deg,#27395f,#182845 52%,#0d1930);box-shadow:0 3px 7px #0000008c,inset 0 -3px 5px -3px #5a7fbd,inset 0 1px #8cafe647}.key-label{font-size:9px;font-weight:600;letter-spacing:.02em;color:#6d86a8;pointer-events:none}.key-white:hover{background:linear-gradient(180deg,#fff,#e9f2ff 58%,#cfe0f8)}.key-black:hover{background:linear-gradient(180deg,#31456f,#1e3153 52%,#112038)}.key-white.active{background:linear-gradient(180deg,#bcdcff,#8dc2ff 58%,#63a6f5);box-shadow:inset 0 -7px 10px -7px #2f6fbe}.key-black.active{background:linear-gradient(180deg,#3f6bb4,#2c4f8c 52%,#1d3a6b);box-shadow:0 3px 7px #0000008c,inset 0 -3px 6px -3px #8fbcff}.key.inert{opacity:.3;cursor:default}.key-drum{position:absolute;bottom:7px;left:50%;transform:translate(-50%);width:100%;font-size:8px;font-weight:600;text-align:center;letter-spacing:.02em;color:#4f6b92;pointer-events:none}.key-cap{position:absolute;left:50%;transform:translate(-50%);font-size:10px;font-weight:700;letter-spacing:.03em;pointer-events:none}.key-white .key-cap{bottom:22px;color:#59749a}.key-black .key-cap{bottom:7px;color:#93b4e4}.empty-mode{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:40px 24px;text-align:center}.empty-glyph{width:54px;height:54px;display:grid;place-items:center;margin-bottom:6px;font-size:24px;color:var(--accent);background:var(--panel);border:1px solid var(--border);border-radius:14px}.empty-mode h2{margin:0;font-size:19px}.empty-mode p{margin:0;color:var(--dim);font-size:13px}.empty-note{max-width:380px;line-height:1.5;opacity:.72}.menu-song{display:flex;flex-direction:column;gap:2px}.menu-song small{color:var(--dim);font-size:11px;line-height:1.35}.menu[open] .menu-items{max-width:300px}.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%);background:#18223b;border:1px solid var(--accent);color:var(--text);padding:10px 18px;border-radius:10px;z-index:60;box-shadow:0 8px 30px #0000008c}.tracklist{width:268px;background:var(--panel-2);border-right:1px solid var(--border);display:flex;flex-direction:column}.tracklist-scroll{flex:1;overflow-y:auto}.track-row{display:flex;border-bottom:1px solid var(--border);cursor:pointer;background:transparent}.track-row.selected{background:#131e36}.track-row.muted .track-main{opacity:.45}.track-colour{width:5px;flex:none}.track-main{flex:1;padding:8px 10px 6px;min-width:0}.track-top{display:flex;align-items:center;gap:5px}.track-name{flex:1;min-width:0;background:transparent;border-color:transparent;padding:2px 4px;font-weight:600;font-size:13px}.track-name:hover,.track-name:focus{background:var(--panel);border-color:var(--border)}.track-name:read-only,.jam-track-name:read-only{cursor:pointer}.track-name:not(:read-only),.jam-track-name:not(:read-only){background:var(--panel-2);border-color:var(--accent);cursor:text}.track-bottom{display:flex;align-items:center;gap:5px;margin-top:5px}.track-bottom select{flex:1;min-width:0;font-size:12px;padding:3px 6px}.meter{height:3px;background:#0a101f;border-radius:2px;margin-top:6px;overflow:hidden}.meter-fill{height:100%;width:0%;background:var(--accent);transition:width .05s linear}.add-track{margin:10px}.track-vol{display:flex;align-items:center;gap:6px;margin-top:5px}.track-vol .slider-wrap{flex:1;min-width:0}.track-vol .slider-value{font-size:10px;min-width:34px;text-align:right}.grid-wrap{flex:1;min-height:0;position:relative}.step-grid{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;cursor:crosshair;touch-action:none}.fx-panel{height:232px;border-top:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column}.fx-header{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);font-size:13px}.fx-track-dot{width:10px;height:10px;border-radius:50%}.range-mode{font-size:12px}.preset-menu,.fx-reset{margin-left:auto}.preset-menu~.fx-reset{margin-left:0}.preset-menu[open] .menu-items{bottom:calc(100% + 6px);top:auto;min-width:250px;max-height:320px;overflow-y:auto}.preset-save{display:flex;gap:6px;padding:4px}.preset-save input{flex:1;min-width:0}.preset-save .btn{padding:4px 10px;font-size:13px}.preset-list{display:flex;flex-direction:column}.preset-empty{padding:8px 10px;font-size:13px}.preset-row{display:flex;align-items:center}.preset-row>button:first-child{flex:1;min-width:0;display:flex;justify-content:space-between;gap:10px;align-items:baseline}.preset-row>button:first-child .dim{font-size:11px;flex:none}.preset-delete{background:none;border:none;color:var(--dim);padding:8px 10px;border-radius:6px;font-size:12px}.preset-delete:hover{color:var(--danger);background:#18223b}.fx-sections{flex:1;display:flex;gap:14px;padding:10px 14px;overflow-x:auto;overflow-y:auto}.fx-section{min-width:234px;flex:none}.fx-section h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin-bottom:6px}.fx-param{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:8px;margin-bottom:3px}.fx-param.fx-muted .slider-wrap{opacity:.35}.fx-param-label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--dim);white-space:nowrap}.fx-dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--accent);background:var(--accent);padding:0}.fx-dot.muted{background:transparent;border-color:var(--dim)}.fx-lock{background:none;border:none;font-size:9px;padding:0;opacity:.5}.fx-lock.locked{opacity:1}.slider-wrap{display:flex;align-items:center;gap:7px;flex:1;min-width:0}.slider-track{flex:1;height:14px;background:#0a101f;border:1px solid var(--border);border-radius:7px;position:relative;cursor:ew-resize;overflow:hidden;min-width:40px}.slider-fill{position:absolute;inset:0 auto 0 0;background:var(--accent);opacity:.8}.slider-value{font-size:11px;color:var(--dim);width:64px;text-align:right;flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}.slider-disabled{opacity:.5;pointer-events:none}.landing,.dashboard,.auth-page{height:100%;overflow-y:auto}.landing-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1080px;margin:0 auto}.landing-nav-links{display:flex;align-items:center;gap:20px}.landing-nav-links a{color:var(--dim);text-decoration:none}.landing-nav-links a:hover{color:var(--text)}.hero{text-align:center;padding:90px 24px 40px;max-width:780px;margin:0 auto}.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.08;background:linear-gradient(180deg,#eaf2ff,#9cc4ff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-sub{margin:22px auto 30px;font-size:17px;color:var(--dim);max-width:560px}.hero-actions{display:flex;gap:14px;justify-content:center}.hero-note{margin-top:18px;font-size:13px}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;max-width:1080px;margin:50px auto;padding:0 32px}.feature-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px}.feature-card h3{margin-bottom:8px;font-size:15px;color:var(--accent-2)}.feature-card p{color:var(--dim);font-size:13.5px;line-height:1.5}.landing-footer{text-align:center;padding:40px;font-size:13px}.auth-page{display:flex;flex-direction:column;align-items:center;gap:28px;padding-top:10vh}.auth-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:28px;width:min(380px,92vw);display:flex;flex-direction:column;gap:14px}.auth-card label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--dim)}.auth-message{font-size:13px;color:var(--warn)}.dashboard-main{max-width:880px;margin:0 auto;padding:20px 32px 60px}.dashboard-head{display:flex;align-items:center;justify-content:space-between;margin:18px 0}.project-table{width:100%;border-collapse:collapse;margin-top:16px}.project-table th{text-align:left;color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.08em;padding:8px 10px;border-bottom:1px solid var(--border)}.project-table td{padding:10px;border-bottom:1px solid var(--border)}.link-btn{background:none;border:none;color:var(--accent-2);font-weight:600;padding:0}.link-btn:hover{text-decoration:underline}.badge{font-size:11px;border-radius:5px;padding:2px 8px;text-transform:uppercase;letter-spacing:.06em}.badge.cloud{background:#4da3ff26;color:var(--accent-2)}.badge.local{background:#8fa0bf26;color:var(--dim)}.empty-state{border:1px dashed var(--border);border-radius:14px;text-align:center;padding:50px 20px;color:var(--dim);display:flex;flex-direction:column;gap:16px;align-items:center}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#040812a6;display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}.modal{background:var(--panel);border:1px solid #2c3d63;border-radius:12px;padding:16px 18px;width:520px;max-width:100%;max-height:100%;overflow-y:auto;box-shadow:0 20px 60px #0009}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.drop-zone{border:1px dashed #2c3d63;border-radius:10px;padding:16px 14px;margin-bottom:14px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:3px;background:var(--panel-2);transition:border-color .12s,background .12s}.drop-zone:hover,.drop-zone.over{border-color:var(--accent);background:#16203a}.drop-zone small{color:var(--dim)}.kit-row{border:1px dashed transparent;border-radius:7px;padding:2px 4px}.kit-row.over{border-color:var(--accent);background:#16203a}.kit-drop{flex:1;min-width:0;text-align:left;background:var(--panel-2);border:1px dashed var(--border);border-radius:6px;padding:5px 9px;color:var(--dim);font-size:12px;transition:border-color .12s,color .12s}.kit-drop:hover{border-color:var(--accent);color:var(--text)}.drop-hint{position:fixed;top:0;right:0;bottom:0;left:0;z-index:70;background:#04081299;display:flex;align-items:center;justify-content:center;pointer-events:none}.drop-hint>div{border:2px dashed var(--accent);border-radius:14px;padding:28px 40px;background:var(--panel);text-align:center;display:flex;flex-direction:column;gap:6px}.drop-hint strong{font-size:18px}.drop-hint small{color:var(--dim)}.preview-btn{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--border);background:var(--panel-2);color:var(--dim);font-size:10px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:color .12s,border-color .12s,background .12s}.preview-btn:hover{color:var(--text);border-color:#2c3d63;background:#18223b}.preview-btn.on{color:var(--accent-2);border-color:var(--accent-2)}.upload-file{flex:1;min-width:0;font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-kinds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.upload-kind{text-align:left;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:10px 12px;color:var(--text);display:flex;flex-direction:column;gap:4px}.upload-kind small{color:var(--dim);line-height:1.45}.upload-kind.on{border-color:var(--accent);background:#16203a}.upload-name{margin-bottom:12px}.upload-name input{flex:1}.upload-body{display:flex;flex-direction:column;gap:10px}.upload-row{display:flex;align-items:center;gap:10px}.upload-slots{gap:6px}.upload-slot-name{width:104px;flex:none;font-size:13px;background:transparent;border:1px solid transparent;border-radius:6px;padding:3px 6px}.upload-slot-name:read-only:hover{background:var(--panel-2);border-color:var(--border)}.kit-actions{display:flex;align-items:center;gap:12px;margin-top:6px}.kit-actions .btn{padding:4px 10px;font-size:13px}.kit-actions .dim{font-size:12px}.upload-slots input[type=file],.upload-row input[type=file]{min-width:0;flex:1;font-size:12px}.view-tabs{display:flex;justify-content:center;gap:7px;padding:6px 14px 0;background:var(--panel);border-bottom:1px solid var(--border)}.view-tab{background:linear-gradient(180deg,#8a6c28,#6b5320);border:1px solid #55411a;border-bottom:none;border-radius:10px 10px 0 0;color:#e8d49a;padding:6px 24px 7px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:color .12s,background .12s}.view-tab:hover{background:linear-gradient(180deg,#a3832f,#7c6026);color:#f7ecc8}.view-tab.on{background:linear-gradient(180deg,#ecc668,#c79f43 60%,#a9832f);border-color:#8a6c28;color:#3a2d0c}.view-tab.on:hover{background:linear-gradient(180deg,#f2cf74,#cda84c 60%,#ae8834);color:#3a2d0c}.view-tab-soon{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#cdb26a;border:1px solid #a08434;border-radius:4px;padding:1px 5px}.view-tab.on .view-tab-soon{color:#4b3a10;border-color:#4b3a10}.arrange{flex:1;min-width:0;display:grid;grid-template-rows:1fr auto;overflow:hidden}.arrange-heads{position:relative;border-right:1px solid var(--border);background:var(--panel);overflow:hidden;display:flex;flex-direction:column}.arrange-heads-ruler{justify-content:space-between}.arrange-collapse{flex:none}.arrange-heads.collapsed .arrange-head{justify-content:center;padding:0}.arrange-heads-grip{position:absolute;top:0;right:-3px;bottom:0;width:7px;cursor:col-resize;z-index:5;touch-action:none}.arrange-heads-grip:hover{background:#4da3ff40}.arrange-heads-scroll{flex:1;overflow:hidden}.arrange-head-cell{border-bottom:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.arrange-vars-toggle{flex:none}.arrange-vars{flex:1;min-height:0;overflow-y:auto;padding:2px 6px 6px 14px;display:flex;flex-direction:column;gap:2px}.arrange-var{display:flex;align-items:center;gap:6px;height:24px;padding:0 4px;border-radius:5px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;font-size:12px}.arrange-var:hover{background:#18223b}.arrange-var-name{flex:1;min-width:0;background:transparent;border:1px solid transparent;border-radius:4px;padding:1px 4px;font-size:12px}.arrange-var-name:not(:read-only){background:var(--panel-2);border-color:var(--accent)}.arrange-var-len{flex:none;font-size:10px}.arrange-heads-ruler{height:26px;display:flex;align-items:center;padding:0 6px 0 10px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--border)}.arrange-head{height:68px;flex:none;display:flex;align-items:center;gap:8px;padding:0 10px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;font-size:13px}.arrange-head:hover{background:#141c31}.arrange-head.lifting{background:#18223b;cursor:grabbing}.arrange-head-dot{width:9px;height:9px;border-radius:50%;flex:none}.arrange-head-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arrange-head-cell.master{position:sticky;top:0;z-index:2;flex:none;flex-direction:row;align-items:center;gap:8px;padding:0 10px;background:linear-gradient(180deg,#17150e,#100f0a);border-bottom:1px solid #55411a;font-weight:600;color:#e8d49a}.arrange-heads.collapsed .arrange-head-cell.master{justify-content:center;padding:0}.arrange-head-dot.master-dot{background:linear-gradient(180deg,#ecc668,#a9832f)}.arrange-master-tag{font-size:10px;text-transform:uppercase;letter-spacing:.08em}.arrange-master{position:sticky;top:26px;z-index:2;background:linear-gradient(180deg,#12110b,#0d0c08);border-bottom:1px solid #55411a;cursor:crosshair}.arrange-master svg{display:block}.arrange-master-line{fill:none;stroke:#ecc668;stroke-width:2}.arrange-master-line.flat{stroke:#ecc66859;stroke-dasharray:5 5}.arrange-master-point{fill:#ecc668;stroke:#3a2d0c;stroke-width:1.5}.arrange-master-point.active{fill:#f7ecc8;r:6}.arrange-master-readout{fill:#f7ecc8;font-size:11px;font-weight:600;paint-order:stroke;stroke:#0d0c08;stroke-width:3}.arrange-lanes{overflow:auto;position:relative;background:var(--bg);touch-action:none}.arrange-canvas{position:relative}.arrange-ruler{position:sticky;top:0;height:26px;background:#0a101f;border-bottom:1px solid var(--border);z-index:3}.arrange-bar-tick{position:absolute;top:0;height:100%;border-left:1px solid rgba(60,80,130,.4);padding:5px 0 0 5px;font-size:10px;color:var(--dim)}.arrange-bar-tick.major{border-left-color:#5a78b4b3}.arrange-lane{position:absolute;left:0;right:0;border-bottom:1px solid rgba(38,52,84,.5);background-image:linear-gradient(90deg,rgba(77,163,255,.04) 0,rgba(77,163,255,.04) 1px,transparent 1px);background-repeat:repeat-x}.arrange-clip{position:absolute;border-radius:6px;border:1px solid rgba(255,255,255,.35);padding:4px 7px;font-size:11px;color:#0c1222;font-weight:600;overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;display:flex;align-items:flex-start;justify-content:space-between;gap:6px;z-index:2}.arrange-clip.dragging{opacity:.85;cursor:grabbing;z-index:4}.arrange-clip.ghost{opacity:.5;pointer-events:none;z-index:4}.arrange-clip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1}.arrange-clip-notes{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.arrange-clip-notes rect{fill:#0a0f1d80}.arrange-var-preview{flex:none;width:46px;height:16px;background:#0c122299;border-radius:3px}.arrange-fade-shade{position:absolute;top:0;bottom:0;pointer-events:none}.arrange-fade-shade.in{left:0;background:linear-gradient(90deg,#050810b8,#05081000);border-right:1px dashed rgba(255,255,255,.35)}.arrange-fade-shade.out{right:0;background:linear-gradient(270deg,#050810b8,#05081000);border-left:1px dashed rgba(255,255,255,.35)}.arrange-fade-grip{position:absolute;bottom:-1px;width:10px;height:10px;cursor:ew-resize;z-index:2;touch-action:none}.arrange-fade-grip.in{border-left:10px solid rgba(255,255,255,.75);border-top:10px solid transparent;width:0;height:0}.arrange-fade-grip.out{border-right:10px solid rgba(255,255,255,.75);border-top:10px solid transparent;width:0;height:0}.arrange-fade-grip:hover{filter:brightness(1.3)}.arrange-clip-rename{position:relative;z-index:2;width:110px;max-width:85%;background:#ffffffeb;color:#0c1222;border:1px solid #0c1222;border-radius:4px;padding:1px 5px;font-size:11px;font-weight:600}.arrange-var-preview rect{fill:var(--accent-2)}.arrange-clip-loops{flex:none;font-size:10px;opacity:.75}.arrange-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--accent-2);opacity:.85;z-index:3;pointer-events:none}.arrange-hint{grid-column:1 / -1;margin:0;padding:7px 14px;font-size:12px;border-top:1px solid var(--border);background:var(--panel)}.arrange-menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:79}.arrange-menu{position:fixed;z-index:80;background:var(--panel);border:1px solid #2c3d63;border-radius:9px;padding:5px;display:flex;flex-direction:column;min-width:130px;box-shadow:0 10px 28px #00000080}.arrange-menu button{background:none;border:none;text-align:left;padding:7px 10px;border-radius:6px;color:var(--text);font-size:13px}.arrange-menu button:hover{background:#18223b}.clip-editor-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#04081259;display:flex;align-items:center;justify-content:center;padding:22px}.clip-editor-shell{width:min(1140px,96vw);height:min(720px,88vh);display:flex;flex-direction:column;background:#0a0f1e61;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid #2c3d63;border-radius:12px;overflow:hidden;box-shadow:0 24px 70px #0000008c}.clip-editor-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid rgba(44,61,99,.7);background:#0a101f8c;font-size:13px}.clip-editor-spacer{flex:1}.clip-editor-grid{flex:1;min-height:0;display:flex}.clip-editor-grid .grid-wrap{flex:1}.clip-editor-foot{margin:0;padding:6px 12px;font-size:11px;border-top:1px solid rgba(44,61,99,.7);background:#0a101f8c}.modal-wide{width:680px}.patch-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}.patch-chip{flex:none;padding:4px 11px;font-size:12px;text-align:center}.designer-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.designer-col .menu-sep:first-child{margin-top:0}.osc-row{display:flex;align-items:center;gap:7px;margin-bottom:6px}.osc-row select{font-size:12px;padding:3px 5px}.osc-row .slider-wrap{flex:1;min-width:0}.designer-add{padding:4px 10px;font-size:12px;margin:2px 0 10px}.designer-param{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:8px;margin-bottom:4px;font-size:12px;color:var(--dim)}.designer-check{display:flex;align-items:center;gap:7px;font-size:12px;cursor:pointer;flex:none}.designer-check-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.designer-check-row select{flex:1;min-width:0;font-size:12px;padding:3px 5px}.env-viz{width:100%;height:54px;background:var(--panel-2);border:1px solid var(--border);border-radius:7px;margin-bottom:8px}.env-line{stroke:var(--accent-2);stroke-width:1.6}.env-fill{fill:#7ee0ff1f;stroke:none}.piano{position:relative;display:flex;height:72px;border-radius:7px;overflow:hidden;border:1px solid var(--border)}.piano-white{flex:1;background:#dbe4f5;border:none;border-right:1px solid #9aa7c4;color:#33405e;font-size:9px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px}.piano-white:last-of-type{border-right:none}.piano-white:active{background:#aecdf5}.piano-black{position:absolute;top:0;width:7.6%;height:58%;background:#131a2c;border:1px solid #000;border-radius:0 0 3px 3px;z-index:2}.piano-black:active{background:#2c3d63}.designer-actions{align-items:center}.designer-name{margin-right:auto}.designer-name input{width:180px}.import-list{display:flex;flex-direction:column;gap:4px}.import-empty{padding:10px 4px;line-height:1.5}.import-project{display:flex;align-items:baseline;justify-content:space-between;gap:10px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);text-align:left;transition:border-color .12s,background .12s}.import-project:hover{border-color:var(--accent);background:#16203a}.import-track{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;cursor:pointer}.import-track:hover{background:var(--panel-2)}.import-track-dot{width:9px;height:9px;border-radius:50%;flex:none}.import-track-name{font-size:13px}.import-track small{margin-left:auto;font-size:11px}.import-note{font-size:12px;margin-top:10px;line-height:1.5}.upload-library{margin-top:16px;border-top:1px solid var(--border);padding-top:6px}.upload-note{font-size:12px;padding:6px 10px 0;line-height:1.5}.note-menu{position:absolute;z-index:20;min-width:260px;max-width:390px;background:var(--panel);border:1px solid #2c3d63;border-radius:9px;padding:9px 11px 10px;box-shadow:0 10px 28px #00000080}.note-menu.flip-up{transform:translateY(-100%)}.note-menu-grip{height:14px;margin:-4px -4px 4px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;border-radius:6px}.note-menu-grip:hover{background:var(--panel-2)}.note-menu-grip:active{cursor:grabbing}.note-menu-grip span{width:34px;height:3px;border-radius:2px;background:#2c3d63}.note-menu-grip:hover span{background:var(--accent)}.note-menu-head{margin-top:11px;text-align:center;display:flex;align-items:center;gap:8px}.note-menu-heading{flex:1;min-width:0}.transpose{flex:none;width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:var(--panel-2);color:var(--dim);font-size:11px;line-height:1;transition:color .12s,border-color .12s,background .12s}.transpose:hover:not(:disabled){color:var(--accent-2);border-color:#2c3d63;background:#18223b}.transpose:disabled{opacity:.35;cursor:default}.note-menu-title{display:block;font-size:21px;font-weight:600;line-height:1.25}.note-menu-detail{display:block;font-size:11px;color:var(--dim);margin-top:2px}.note-menu-row{display:flex;flex-wrap:wrap;gap:5px}.note-menu-row .btn{padding:4px 9px;font-size:13px}.chord-builder{border-top:1px solid var(--border);margin-top:9px;padding-top:8px}.chord-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:5px;display:flex;justify-content:space-between;gap:8px}.chord-hint{text-transform:none;letter-spacing:0;opacity:.75}.chord-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}.chord-chips .chip{flex:0 0 auto;width:auto;height:auto;white-space:nowrap;background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:4px 9px;font-size:12px;line-height:1.3;color:var(--text);display:inline-flex;align-items:baseline;gap:5px;transition:background .12s,border-color .12s}.chord-chips .chip:hover{background:#18223b;border-color:#2c3d63}.chord-chips .chip.on{background:var(--accent-2);border-color:var(--accent-2);color:#0c1222}.chord-chips .chip.fits:not(.on){border-color:#2f6fd8}.chip-roman,.chip-count{flex:none;font-size:10px;color:var(--dim)}.chord-chips .chip.on .chip-roman,.chord-chips .chip.on .chip-count{color:#0c1222a6}.chord-walk{display:flex;gap:6px;margin-bottom:10px}.chord-walk .btn{flex:1;padding:5px 10px;font-size:13px}.chord-result{font-size:12px;color:var(--dim);display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:2px}.chord-result-text{min-width:0;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}.chord-done{flex:none;padding:4px 14px;font-size:13px}.chord-warn{color:var(--warn);font-size:11px}.auth-page{padding-bottom:40px}.auth-head{display:flex;flex-direction:column;gap:6px}.auth-head h2{font-size:20px}.auth-sub,.auth-note{font-size:13px;line-height:1.55}.auth-foot{font-size:13px}.auth-sub a,.auth-note a,.auth-foot a{color:var(--accent-2);text-decoration:none}.auth-sub a:hover,.auth-note a:hover,.auth-foot a:hover{text-decoration:underline}.auth-form{display:flex;flex-direction:column;gap:14px}.auth-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--dim)}.btn.provider{padding:10px 14px;background:#f6f8fc;color:#1f2733;border-color:#d3dae6;font-weight:600}.btn.provider:hover:not(:disabled){background:#fff;border-color:#b9c4d6}.auth-or{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:12px}.auth-or:before,.auth-or:after{content:"";flex:1;height:1px;background:var(--border)}.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.label-link{color:var(--accent-2);text-decoration:none;font-size:12px}.label-link:hover{text-decoration:underline}.input-wrap{position:relative;display:flex}.input-wrap input{flex:1;padding-right:56px}.reveal{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--dim);font-size:12px;padding:4px 6px;border-radius:5px}.reveal:hover{color:var(--text)}.field-note{font-size:12px;line-height:1.4}.field-note.dim{color:var(--dim)}.field-note.warn{color:var(--warn)}.field-note.good{color:var(--accent-2)}label.auth-check{flex-direction:row;align-items:flex-start;gap:10px;color:var(--text);font-size:13px;line-height:1.45}label.auth-check input{margin-top:2px;width:15px;height:15px;accent-color:var(--accent)}label.auth-check small{display:block;margin-top:3px;font-size:12px}.account-summary{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:1px solid var(--border);border-radius:999px;background:var(--panel);color:var(--text);font-size:13px;cursor:pointer;transition:background .12s,border-color .12s}.account-summary:hover{background:#18223b;border-color:#2c3d63}.avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#2f6fd8,#245ab8);color:#fff;font-size:12px;font-weight:700}.account-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-menu .menu-sep{text-transform:none;letter-spacing:0;font-size:11px}.account-placeholder{display:inline-block;width:104px;height:32px}.account-main{max-width:560px;margin:0 auto;padding:20px 32px 60px}.account-main h2{margin:18px 0 6px}.account-section{border-top:1px solid var(--border);padding:20px 0;display:flex;flex-direction:column;gap:10px}.account-section h3{font-size:14px;color:var(--accent-2)}.account-section .btn.primary,.account-section .btn{align-self:flex-start}