@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:200 800;font-display:swap;src:url(../media/0b1dc8ddaa74ba49-s.1w1m1wqmjasxa.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:200 800;font-display:swap;src:url(../media/e629b5bc06499d58-s.1y3v-klcv8xov.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:200 800;font-display:swap;src:url(../media/1a099d89ee94ee96-s.15dvesjzf7814.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:200 800;font-display:swap;src:url(../media/fba5a26ea33df6a3-s.p.08ssgmy_tb90r.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Plus Jakarta Sans Fallback;src:local(Arial);ascent-override:98.88%;descent-override:21.15%;line-gap-override:0.0%;size-adjust:104.98%}.plus_jakarta_sans_998af07d-module__eAa6Xq__className{font-family:Plus Jakarta Sans,Plus Jakarta Sans Fallback;font-style:normal}.plus_jakarta_sans_998af07d-module__eAa6Xq__variable{--font-sans:"Plus Jakarta Sans", "Plus Jakarta Sans Fallback"}
@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:100 800;font-display:swap;src:url(../media/13bf9871fe164e7f-s.3bz3aq452sydg.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:100 800;font-display:swap;src:url(../media/cc545e633e20c56d-s.2sb9jzhmrh7ny.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:100 800;font-display:swap;src:url(../media/71b036adf157cdcf-s.343obqi851wr5.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:100 800;font-display:swap;src:url(../media/89b21bb081cb7469-s.40kcwrf1wub16.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:100 800;font-display:swap;src:url(../media/3fe682a82f50d426-s.200l3jur7oygh.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:100 800;font-display:swap;src:url(../media/70bc3e132a0a741e-s.p.269kn9uafm0ti.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono Fallback;src:local(Arial);ascent-override:75.79%;descent-override:22.29%;line-gap-override:0.0%;size-adjust:134.59%}.jetbrains_mono_a9009f96-module__TeJ6iG__className{font-family:JetBrains Mono,JetBrains Mono Fallback;font-style:normal}.jetbrains_mono_a9009f96-module__TeJ6iG__variable{--font-mono:"JetBrains Mono", "JetBrains Mono Fallback"}
:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--font-sans:var(--font-sans,"Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);--font-mono:var(--font-mono,"JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace);--bg-app:#08090d;--bg-surface:#0f121a;--bg-surface-elevated:#151a24;--bg-surface-glass:#0f121ac7;--bg-surface-subtle:#ffffff08;--bg-surface-active:#ffffff12;--border-subtle:#ffffff14;--border-strong:#ffffff24;--border-focus:#ffffff59;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-primary:#f8fafc;--accent-primary-text:#08090d;--accent-blue:#38bdf8;--accent-indigo:#818cf8;--accent-emerald:#10b981;--accent-amber:#f59e0b;--accent-rose:#f43f5e;--accent-left-hand:#38bdf8;--accent-right-hand:#f43f5e;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-full:9999px;--shadow-card:0 4px 20px -2px #00000080, 0 0 0 1px var(--border-subtle);--shadow-modal:0 24px 48px -12px #000000bf, 0 0 0 1px var(--border-strong);--transition-snappy:.15s cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html,body{background:var(--bg-app);height:100%;color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;overflow:hidden}.app{-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 50% 0,#121622 0%,#08090d 75%);flex-direction:column;height:100dvh;display:flex}.topbar{background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);z-index:10;flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1.25rem;display:flex}.brand{align-items:center;gap:.75rem;display:flex}.logo-wrapper{justify-content:center;align-items:center;display:flex;position:relative}.logo-mark{object-fit:contain;mix-blend-mode:screen;filter:brightness(1.05)contrast(1.05);width:auto;height:36px}.brand-text{flex-direction:column;gap:.1rem;display:flex}.brand-name-wrap{align-items:center;gap:.5rem;display:flex}.brand-name{letter-spacing:-.02em;color:var(--text-primary);font-size:1.05rem;font-weight:700}.brand-badge{font-family:var(--font-mono);letter-spacing:.04em;background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-muted);text-transform:uppercase;padding:.15rem .4rem;font-size:.65rem;font-weight:600}.brand-tagline{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-size:.68rem;font-weight:500}.controls{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.control-group{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-secondary);align-items:center;gap:.5rem;padding:.2rem .6rem;font-size:.8rem;display:flex}.control-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:.75rem;font-weight:600}.custom-select-wrap{align-items:center;display:inline-flex;position:relative}select{appearance:none;background:var(--bg-surface-elevated);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-family:var(--font-mono);cursor:pointer;transition:border-color var(--transition-snappy), background var(--transition-snappy);outline:none;padding:.35rem 1.6rem .35rem .65rem;font-size:.82rem;font-weight:500}select:hover{border-color:var(--border-strong);background:var(--bg-surface-subtle)}select:focus-visible{border-color:var(--border-focus)}option,optgroup{background-color:var(--bg-surface-elevated);color:var(--text-primary)}.select-arrow{pointer-events:none;width:10px;height:10px;color:var(--text-muted);position:absolute;right:.55rem}.toggle-switch{cursor:pointer;color:var(--text-secondary);align-items:center;gap:.5rem;font-size:.8rem;font-weight:500;display:inline-flex}.toggle-switch input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.toggle-pill{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-full);width:32px;height:18px;transition:background var(--transition-snappy), border-color var(--transition-snappy);position:relative}.toggle-pill:after{content:"";background:var(--text-muted);width:12px;height:12px;transition:transform var(--transition-snappy), background var(--transition-snappy);border-radius:50%;position:absolute;top:2px;left:2px}.toggle-switch input:checked+.toggle-pill{background:#38bdf826;border-color:#38bdf866}.toggle-switch input:checked+.toggle-pill:after{background:var(--accent-blue);transform:translate(14px)}button{background:var(--text-primary);color:var(--accent-primary-text);border-radius:var(--radius-md);font-family:var(--font-sans);letter-spacing:-.01em;cursor:pointer;transition:transform 80ms ease, background var(--transition-snappy), border-color var(--transition-snappy), color var(--transition-snappy), opacity var(--transition-snappy);border:1px solid #0000;outline:none;justify-content:center;align-items:center;gap:.4rem;padding:.45rem 1rem;font-size:.84rem;font-weight:600;display:inline-flex}button:hover{opacity:.92}button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:not-allowed;transform:none}button.secondary{background:var(--bg-surface-elevated);color:var(--text-primary);border:1px solid var(--border-subtle)}button.secondary:hover{background:var(--bg-surface-active);border-color:var(--border-strong)}button.danger{color:var(--accent-rose);background:#f43f5e1f;border:1px solid #f43f5e4d}button.danger:hover{border-color:var(--accent-rose);background:#f43f5e33}button.primary-start{background:var(--text-primary);color:#000;box-shadow:0 1px 3px #0003}.status-pill{border-radius:var(--radius-full);font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);align-items:center;gap:.4rem;padding:.25rem .55rem;font-size:.68rem;font-weight:600;display:inline-flex}.status-dot{background:var(--text-muted);border-radius:50%;width:6px;height:6px}.status-pill[data-status=running]{color:var(--accent-emerald);background:#10b98114;border-color:#10b9814d}.status-pill[data-status=running] .status-dot{background:var(--accent-emerald);box-shadow:0 0 6px #10b98199}.control-dock{background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);flex:none;font-size:.8rem}.dock-topline{flex-wrap:wrap;align-items:center;gap:.9rem;padding:.45rem 1.25rem;display:flex}.dock-tabs{gap:.15rem;margin-left:auto;display:flex}.dock-collapse-toggle{appearance:none;border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:color var(--transition-snappy), border-color var(--transition-snappy);background:0 0;align-items:center;gap:.3rem;padding:.3rem .55rem;font-size:.7rem;font-weight:600;display:inline-flex}.dock-collapse-toggle:hover{color:var(--text-primary);border-color:var(--border-strong)}.control-dock[data-collapsed] .dock-collapse-toggle{margin-left:auto}.dock-chevron{transition:transform var(--transition-snappy);flex-shrink:0}.control-dock[data-collapsed] .dock-chevron{transform:rotate(-90deg)}.dock-tab{appearance:none;color:var(--text-muted);cursor:pointer;transition:color var(--transition-snappy), border-color var(--transition-snappy);background:0 0;border:0;border-bottom:2px solid #0000;border-radius:0;padding:.35rem .65rem;font-size:.78rem;font-weight:600}.dock-tab:hover{color:var(--text-secondary);background:0 0}.dock-tab[data-active]{color:var(--text-primary);border-bottom-color:var(--accent-blue)}.dock-tab[data-alert]:after{content:"";background:var(--accent-amber);vertical-align:middle;border-radius:50%;width:5px;height:5px;margin-left:.35rem;display:inline-block}.dock-panel{border-top:1px solid var(--border-subtle);background:var(--bg-surface-subtle);flex-wrap:wrap;align-items:center;gap:1rem;min-height:2.6rem;padding:.5rem 1.25rem .6rem;display:flex}.transport-toggle{padding:.35rem 1rem;font-size:.8rem}.transport-position-box{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#050608;align-items:center;padding:.25rem .65rem;display:flex}.transport-position{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-primary);letter-spacing:.04em;font-size:.85rem;font-weight:600}.transport-bpm{align-items:center;gap:.6rem;display:flex}input[type=range]{appearance:none;cursor:pointer;vertical-align:middle;background:0 0;height:18px}input[type=range]::-webkit-slider-runnable-track{border-radius:var(--radius-full);height:4px;transition:background var(--transition-snappy);background:#ffffff1f}input[type=range]:hover::-webkit-slider-runnable-track{background:#fff3}input[type=range]::-webkit-slider-thumb{appearance:none;background:#fff;border:2px solid #0f121a;border-radius:50%;width:16px;height:16px;margin-top:-6px;transition:transform .1s;box-shadow:0 1px 4px #0006}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.transport-bpm input[type=range]{width:110px}.transport-bpm-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-primary);min-width:4.5rem;font-size:.8rem}.time-signature-fields{align-items:center;gap:.15rem;display:inline-flex}.time-signature-fields input[type=number]{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);width:2.6rem;color:var(--text-primary);font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:center;-moz-appearance:textfield;padding:.15rem .3rem;font-size:.8rem}.time-signature-fields input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.time-signature-fields input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-signature-fields input[type=number]:focus{border-color:var(--accent-emerald,#10b981);outline:none}.time-signature-slash{color:var(--text-muted);font-size:.85rem}.transport-item-label{white-space:nowrap;align-items:center;gap:.45rem;display:flex}.dock-panel button{padding:.3rem .85rem;font-size:.78rem}.drum-info{font-family:var(--font-mono);color:var(--text-muted);font-size:.75rem}.drum-panel-card{width:min(760px,100%)}.drum-slot-picker{align-items:flex-start;gap:.9rem;margin:.5rem 0 .8rem;display:flex}.drum-slot-hand{flex:none;width:66px;margin:0}.drum-slot-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(3.1rem,1fr));gap:3px;display:grid}.drum-mask{font-family:var(--font-mono);background:var(--bg-surface-elevated);color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.25rem .1rem;font-size:.66rem;font-weight:600}.drum-mask[data-filled]{color:var(--text-primary);border-color:var(--accent-amber)}.drum-mask[data-hard]{opacity:.45}.drum-mask[data-active]{background:var(--accent-amber);color:var(--accent-primary-text);border-color:var(--accent-amber);opacity:1}.drum-shape-row{flex-wrap:wrap;align-items:center;gap:.6rem;margin:.6rem 0 .4rem;display:flex}.drum-grid-scroll{margin:.4rem 0 1rem;padding-bottom:.3rem;overflow-x:auto}.drum-grid{flex-direction:column;gap:.3rem;min-width:min-content;display:flex}.drum-grid-row{grid-template-columns:4.5rem 1fr;align-items:center;gap:.5rem;display:grid}.drum-grid-voice{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);text-align:right;font-size:.72rem}.drum-grid-cells{grid-template-columns:repeat(var(--steps,16), minmax(15px, 1fr));gap:3px;display:grid}.drum-cell{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);cursor:pointer;border-radius:3px;min-width:0;height:20px;padding:0;transition:background 80ms,border-color 80ms}.drum-cell[data-beat]{background:var(--bg-surface-active)}.drum-cell[data-bar]{border-left:2px solid var(--border-strong)}.drum-cell[data-on]{background:var(--accent-amber);border-color:var(--accent-amber)}.drum-cell[data-playhead]{outline:2px solid var(--text-primary);outline-offset:1px}.drum-cell:hover{border-color:var(--border-strong)}.looper-record{align-items:center;gap:.45rem;display:inline-flex}.looper-record-dot{background:var(--accent-rose);border-radius:50%;width:8px;height:8px}.looper-record-dot[data-recording]{animation:1s step-end infinite looper-blink}@keyframes looper-blink{50%{opacity:.25}}.looper-info{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:.75rem}.looper-file-actions{align-items:center;gap:.4rem;margin-left:auto;display:flex}.looper-error{color:var(--accent-rose);flex-basis:100%;font-size:.75rem}.session-info{font-family:var(--font-mono);color:var(--text-muted);font-size:.75rem}.layers-empty{color:var(--text-muted);flex-basis:100%;margin:.25rem 0 0;font-size:.75rem}.layers-strip{flex-direction:column;flex-basis:100%;gap:.3rem;margin:.25rem 0 0;padding:0;list-style:none;display:flex}.layer-row{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);align-items:center;gap:.5rem;padding:.3rem .55rem;display:flex}.layer-reorder{flex-direction:column;gap:1px;display:flex}.layer-reorder button{border:1px solid var(--border-subtle);background:var(--bg-surface-subtle);color:var(--text-muted);cursor:pointer;border-radius:3px;line-height:1.1;padding:0 .3rem!important;font-size:.55rem!important}.layer-reorder button:disabled{opacity:.3;cursor:default}.layer-kind{font-family:var(--font-mono);letter-spacing:.06em;border-radius:var(--radius-sm);color:var(--bg-surface);background:var(--accent-indigo);padding:.1rem .35rem;font-size:.6rem}.layer-row[data-kind=drums] .layer-kind{background:var(--accent-amber)}.layer-name{text-align:left;min-width:3rem;color:var(--text-primary);cursor:text;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:1px solid #0000;flex:1;overflow:hidden;padding:.15rem .3rem!important;font-size:.8rem!important}.layer-name:hover{border-color:var(--border-subtle)}.layer-name-input{background:var(--bg-surface);border:1px solid var(--border-focus);min-width:3rem;color:var(--text-primary);border-radius:3px;flex:1;padding:.15rem .3rem;font-size:.8rem}.layer-instrument{max-width:8.5rem;padding:.15rem .3rem!important;font-size:.7rem!important}.layer-instrument-spacer{width:8.5rem}.layer-gain{align-items:center;gap:.35rem;display:flex}.layer-gain input[type=range]{width:72px}.layer-gain-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);text-align:right;width:3.2rem;font-size:.65rem}.layer-btn{font-family:var(--font-mono);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-surface-subtle);color:var(--text-muted);cursor:pointer;line-height:1;padding:.15rem .45rem!important;font-size:.7rem!important}.layer-btn[data-active]{background:var(--accent-emerald);color:var(--bg-surface);border-color:#0000}.layer-btn[data-dim]{opacity:.4}.layer-remove:hover{background:var(--accent-rose);color:var(--bg-surface);border-color:#0000}@media (max-width:780px){.layer-row{flex-wrap:wrap}.layer-instrument,.layer-instrument-spacer{width:auto;max-width:none}}.session-canvas{z-index:55;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#040508d1;justify-content:center;align-items:center;padding:1.25rem;display:flex;position:fixed;inset:0}.canvas-card{background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);width:min(1100px,100%);max-height:88vh;box-shadow:var(--shadow-modal);flex-direction:column;padding:1.2rem 1.3rem 1.4rem;display:flex}.canvas-head{flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:.9rem;display:flex}.canvas-head h2{letter-spacing:-.02em;color:var(--text-primary);margin:0;font-size:1.15rem;font-weight:700}.canvas-head button{padding:.28rem .8rem;font-size:.78rem}.canvas-head-spacer{flex:1}.canvas-zoom{align-items:center;gap:.4rem;display:flex}.canvas-zoom-value,.canvas-meta{font-family:var(--font-mono);color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.7rem}.canvas-empty{color:var(--text-muted);text-align:center;margin:1.5rem 0;font-size:.85rem}.canvas-scroll{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-surface-subtle);overflow:auto}.canvas-inner{min-width:100%}.canvas-ruler{border-bottom:1px solid var(--border-subtle);background:var(--bg-surface-elevated);z-index:2;height:22px;display:flex;position:sticky;top:0}.canvas-ruler-bar{font-family:var(--font-mono);color:var(--text-muted);border-right:1px solid var(--border-subtle);flex:none;padding:.25rem 0 0 .3rem;font-size:.62rem}.canvas-lane{border-bottom:1px solid var(--border-subtle);display:flex}.canvas-lane:last-child{border-bottom:none}.canvas-lane-head{z-index:3;background:var(--bg-surface-elevated);border-right:1px solid var(--border-strong);flex-direction:column;flex:none;gap:.3rem;width:190px;padding:.45rem .55rem;display:flex;position:sticky;left:0}.canvas-lane-name{white-space:nowrap;text-overflow:ellipsis;font-size:.78rem;overflow:hidden}.canvas-lane[data-kind=loop] .canvas-lane-name{color:var(--accent-indigo)}.canvas-lane[data-kind=drums] .canvas-lane-name{color:var(--accent-amber)}.canvas-lane-controls{gap:.2rem;display:flex}.canvas-lane-controls button{font-family:var(--font-mono);border:1px solid var(--border-subtle);background:var(--bg-surface-subtle);color:var(--text-muted);cursor:pointer;border-radius:3px;line-height:1.1;padding:.1rem .35rem!important;font-size:.62rem!important}.canvas-lane-controls button:disabled{opacity:.3;cursor:default}.canvas-lane-controls button[data-active]{background:var(--accent-emerald);color:var(--bg-surface);border-color:#0000}.canvas-lane-remove:hover{background:var(--accent-rose);color:var(--bg-surface);border-color:#0000}.canvas-lane-track{flex:none;height:46px;position:relative}.canvas-block{border:1px solid #0000;border-radius:4px;position:absolute;top:6px;bottom:6px}.canvas-lane[data-kind=loop] .canvas-block{background:#818cf842;border-color:#818cf873}.canvas-lane[data-kind=drums] .canvas-block{background:#f59e0b38;border-color:#f59e0b6b}.canvas-block[data-ghost]{opacity:.5}.canvas-lane:not([data-audible]) .canvas-block{opacity:.25}.canvas-block-mark{background:var(--text-primary);opacity:.55;width:2px;margin-left:-1px;position:absolute;top:4px;bottom:4px}.canvas-playhead{background:var(--accent-rose);z-index:4;pointer-events:none;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}@media (max-width:780px){.canvas-lane-head{width:130px}.dock-topline,.dock-panel{gap:.6rem .9rem;padding-left:1rem;padding-right:1rem}.dock-tabs{order:3;width:100%;margin-left:0}.dock-collapse-toggle{margin-left:auto}.transport-bpm input[type=range]{width:80px}.looper-file-actions{margin-left:0}}.camera-wrap{background:#040508;flex:1;min-height:0;position:relative;overflow:hidden}.camera-video,.camera-canvas{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.wave-canvas{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.viewport-reticles{pointer-events:none;border-radius:var(--radius-md);border:1px solid #ffffff0a;position:absolute;inset:1rem}.reticle-corner{border-style:solid;border-color:#ffffff40;width:12px;height:12px;position:absolute}.reticle-tl{border-width:2px 0 0 2px;top:-1px;left:-1px}.reticle-tr{border-width:2px 2px 0 0;top:-1px;right:-1px}.reticle-bl{border-width:0 0 2px 2px;bottom:-1px;left:-1px}.reticle-br{border-width:0 2px 2px 0;bottom:-1px;right:-1px}.camera-placeholder{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;padding:2rem;display:flex;position:absolute;inset:0}.placeholder-card{background:var(--bg-surface-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);max-width:440px;box-shadow:var(--shadow-card);flex-direction:column;align-items:center;gap:1rem;padding:2rem 2.25rem;display:flex}.placeholder-icon-wrap{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);width:52px;height:52px;color:var(--text-primary);border-radius:50%;justify-content:center;align-items:center;display:flex}.placeholder-tagline{letter-spacing:-.02em;color:var(--text-primary);margin:0;font-size:1.25rem;font-weight:700}.placeholder-desc{color:var(--text-secondary);margin:0;font-size:.85rem;line-height:1.5}.placeholder-features{flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.25rem;display:flex}.producthunt-badge{margin-top:.9rem;line-height:0;display:block}.producthunt-badge img{width:250px;height:54px}.placeholder-badge{font-family:var(--font-mono);color:var(--text-muted);background:var(--bg-surface-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.2rem .5rem;font-size:.68rem}.error-overlay{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-md);color:#fecdd3;z-index:20;background:#f43f5e26;border:1px solid #f43f5e66;margin:0;padding:.5rem 1rem;font-size:.82rem;font-weight:500;position:absolute;top:1rem;left:50%;transform:translate(-50%)}.hud-overlay{background:var(--bg-surface-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-card);z-index:5;flex-direction:column;gap:.6rem;max-width:min(90vw,420px);padding:.7rem 1.1rem .85rem;display:flex;position:absolute;bottom:1rem;left:1rem}.hud-overlay[data-collapsed]{padding:.45rem .7rem}.hud-collapse-toggle{appearance:none;width:100%;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:.75rem;padding:0;font-size:.65rem;font-weight:600;display:flex}.hud-chevron{transition:transform var(--transition-snappy);flex-shrink:0}.hud-overlay[data-collapsed] .hud-chevron{transform:rotate(-90deg)}.hud-grid{grid-template-columns:repeat(2,minmax(110px,1fr));gap:.4rem 1.25rem;margin:0;display:grid}.hud-grid dt{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin:0;font-size:.65rem;font-weight:600}.hud-grid dd{font-family:var(--font-mono);color:var(--text-primary);letter-spacing:-.01em;margin:.15rem 0 .2rem;font-size:.82rem;font-weight:500}.hud-status-tag{align-items:center;gap:.35rem;display:inline-flex}.hud-status-dot{background:var(--text-muted);border-radius:50%;width:6px;height:6px}.hud-status-dot[data-sounding=true]{background:var(--accent-emerald)}.param-meters-overlay{background:var(--bg-surface-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-card);z-index:5;flex-direction:column;gap:.6rem;min-width:180px;padding:.75rem 1rem;display:flex;position:absolute;top:1rem;right:1rem}.param-meter{align-items:center;gap:.6rem;display:flex}.param-meter-label{width:3.4rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;flex:none;font-size:.68rem;font-weight:600}.param-meter-track{border-radius:var(--radius-full);background:#ffffff14;flex:1;height:5px;overflow:hidden}.param-meter-fill{border-radius:var(--radius-full);height:100%;transition:width 80ms linear}.param-meter-fill--filter{background:var(--accent-blue)}.param-meter-fill--volume{background:var(--accent-emerald)}.param-meter-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-secondary);text-align:right;flex:none;min-width:3.8rem;font-size:.72rem}.eq-overlay{background:var(--bg-surface-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:240px;box-shadow:var(--shadow-card);z-index:5;padding:.6rem .9rem;font-size:.8rem;position:absolute;top:5.5rem;right:1rem}.eq-overlay summary{cursor:pointer;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none;outline:none;padding:.15rem 0;font-size:.75rem;font-weight:600}.eq-overlay summary:hover{color:var(--text-primary)}.eq-band{align-items:center;gap:.5rem;margin-top:.45rem;display:flex}.eq-band-label{width:3.2rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;flex:none;font-size:.7rem;font-weight:600}.eq-band input[type=range]{flex:1;min-width:0}.eq-band-value{text-align:right;width:3.2rem;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-secondary);flex:none;font-size:.72rem}.eq-reset{width:100%;margin-top:.6rem;padding:.25rem .5rem;font-size:.72rem}.legend-overlay{background:var(--bg-surface-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);max-width:min(90vw,360px);box-shadow:var(--shadow-card);z-index:5;padding:.55rem .85rem;font-size:.78rem;position:absolute;bottom:1rem;right:1rem}.legend-overlay summary{cursor:pointer;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;outline:none;padding:.15rem 0;font-size:.75rem;font-weight:600}.legend-overlay summary:hover{color:var(--text-primary)}.legend-overlay ul{color:var(--text-secondary);margin:.5rem 0 .2rem;padding-left:1.1rem;line-height:1.6}.legend-section{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:.7rem 0 0;font-size:.7rem;font-weight:600}.drum-beat-overlay{background:var(--bg-surface-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);max-width:min(92vw,420px);box-shadow:var(--shadow-card);z-index:5;padding:.6rem .8rem;position:absolute;bottom:1rem;left:50%;transform:translate(-50%)}.drum-beat-head{font-family:var(--font-mono);justify-content:space-between;align-items:baseline;gap:.75rem;margin-bottom:.5rem;font-size:.72rem;display:flex}.drum-beat-slot{color:var(--accent-amber);letter-spacing:.04em;font-weight:700}.drum-beat-status{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.66rem}.drum-beat-overlay[data-playing] .drum-beat-status{color:var(--accent-emerald)}.drum-beat-lanes{flex-direction:column;gap:.25rem;display:flex}.drum-beat-lane{align-items:center;gap:.5rem;display:flex}.drum-beat-voice{width:2.4rem;font-family:var(--font-mono);color:var(--text-muted);text-align:right;flex:none;font-size:.66rem}.drum-beat-cells{grid-template-columns:repeat(var(--steps), 1fr);flex:1;gap:2px;display:grid}.drum-beat-cell{background:#ffffff12;border-radius:2px;height:10px;transition:background 80ms linear}.drum-beat-cell[data-on]{background:#f59e0b80}.drum-beat-cell[data-now]{background:var(--text-primary);box-shadow:0 0 6px #ffffff80}.drum-beat-cell[data-on][data-now]{background:var(--accent-amber);box-shadow:0 0 8px #f59e0be6}.song-tutorial{background:var(--bg-surface);border-top:1px solid var(--border-subtle);z-index:10;flex:none;grid-template-columns:minmax(0,auto) minmax(0,1fr);grid-template-areas:"now lyric""now timeline""now controls";align-items:center;gap:.5rem 1.5rem;padding:.75rem 1.25rem;display:grid}.song-now{grid-area:now;align-items:center;gap:1.15rem;display:flex}.song-now-chord{flex-direction:column;min-width:7.5rem;display:flex}.song-chord-name{font-family:var(--font-mono);letter-spacing:-.03em;color:var(--text-primary);font-size:1.85rem;font-weight:700;line-height:1}.song-chord-degree{text-transform:uppercase;letter-spacing:.08em;color:var(--accent-blue);margin-top:.15rem;font-size:.72rem;font-weight:600}.song-chord-sounds,.song-chord-warn{color:var(--text-muted);margin-top:.1rem;font-size:.7rem}.song-chord-warn{color:var(--accent-rose)}.song-hands{gap:.6rem;display:flex}.hand-diagram{text-align:center;width:50px;margin:0}.hand-diagram svg{width:100%;height:auto}.hand-palm,.hand-finger{fill:none;stroke:#fff3;stroke-width:4.5px;transition:stroke var(--transition-snappy)}.hand-finger--up{stroke:var(--text-primary)}.hand-diagram[data-matched] .hand-palm,.hand-diagram[data-matched] .hand-finger{stroke:var(--accent-emerald)}.hand-diagram figcaption{color:var(--text-muted);margin-top:.2rem;font-size:.62rem;font-weight:500;line-height:1.2}.song-match{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);white-space:nowrap;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-surface-elevated);padding:.2rem .5rem;font-size:.7rem;font-weight:600}.song-match[data-matched]{color:var(--accent-emerald);background:#10b98114;border-color:#10b98159}.song-lyric{color:var(--text-primary);opacity:.9;grid-area:lyric;margin:0;font-size:.85rem;font-weight:500}.song-timeline{grid-area:timeline;gap:.4rem;margin:0;padding:.1rem 0;list-style:none;display:flex;overflow-x:auto}.song-timeline-item button{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-muted);flex-direction:column;align-items:center;min-width:3.2rem;padding:.25rem .6rem;font-weight:600;display:flex}.song-timeline-item button:hover{background:var(--bg-surface-active);color:var(--text-primary)}.song-timeline-item[data-current] button{border-color:var(--text-primary);color:var(--text-primary);background:#ffffff14}.song-timeline-item[data-unreachable] button{color:var(--accent-rose);border-color:#f43f5e66}.song-timeline-chord{font-family:var(--font-mono);font-size:.82rem}.song-timeline-fingers{font-family:var(--font-mono);color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.62rem}.song-controls{color:var(--text-secondary);flex-wrap:wrap;grid-area:controls;align-items:center;gap:.75rem;font-size:.8rem;display:flex}.song-controls button{padding:.25rem .65rem;font-size:.78rem}.song-tempo input[type=range]{width:80px}.song-tempo-hint{font-family:var(--font-mono);color:var(--text-muted);font-size:.78rem}.song-progress{font-family:var(--font-mono);color:var(--text-muted);margin-left:auto;font-size:.78rem}@media (max-width:780px){.song-tutorial{grid-template-columns:1fr;grid-template-areas:"now""lyric""timeline""controls";gap:.75rem}.song-progress{margin-left:0}}.intro-modal,.song-modal{display:none}.intro-modal[data-open],.song-modal{z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#040508d1;justify-content:center;align-items:center;padding:1.25rem;display:flex;position:fixed;inset:0}html[data-intro=seen] .intro-modal{display:none}.intro-card,.song-modal-card{background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);width:min(540px,100%);max-height:88vh;box-shadow:var(--shadow-modal);padding:1.6rem;overflow-y:auto}.intro-card h1,.song-modal-head h2{letter-spacing:-.02em;color:var(--text-primary);margin:0 0 .6rem;font-size:1.4rem;font-weight:700}.intro-card h1{margin:.5rem 0;font-size:1.35rem}.intro-lead,.song-modal-hint{color:var(--text-secondary);margin:0;font-size:.86rem;line-height:1.55}.intro-head{margin-bottom:1rem}.intro-tabs{border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;gap:.25rem;margin-bottom:.9rem;display:flex}.intro-tab{appearance:none;color:var(--text-muted);cursor:pointer;transition:color var(--transition-snappy), border-color var(--transition-snappy);background:0 0;border:0;border-bottom:2px solid #0000;border-radius:0;padding:.45rem .6rem;font-size:.78rem;font-weight:600}.intro-tab:hover{color:var(--text-secondary);background:0 0}.intro-tab[data-active]{color:var(--text-primary);border-bottom-color:var(--accent-blue,#38bdf8)}.intro-tabpanel{color:var(--text-secondary);min-height:8.5rem;font-size:.84rem;line-height:1.55;display:none}.intro-tabpanel[data-active]{display:block}.intro-tabpanel p{margin:0 0 .6rem}.intro-tabpanel ul{margin:.4rem 0 .2rem;padding-left:1.1rem}.intro-tabpanel li{margin-bottom:.3rem}.intro-tabpanel code{font-family:var(--font-mono);background:var(--bg-surface-elevated);border-radius:var(--radius-sm);padding:.05rem .3rem;font-size:.8em}.intro-hand-title{font-weight:700;margin-top:.6rem!important;margin-bottom:.25rem!important}.intro-hand-title.left{color:var(--accent-left-hand)}.intro-hand-title.right{color:var(--accent-right-hand)}.intro-foot{border-top:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:1rem;margin-top:1.1rem;padding-top:.9rem;display:flex}.intro-privacy{color:var(--text-muted);align-items:center;gap:.4rem;font-size:.72rem;display:inline-flex}.intro-privacy-dot{background:var(--accent-emerald);border-radius:50%;width:6px;height:6px}.intro-dismiss{width:auto;margin:0;padding:.55rem 1.4rem;font-size:.88rem}.song-modal-head{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.song-textarea{resize:vertical;width:100%;min-height:200px;color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-family:var(--font-mono);background:#040508;outline:none;padding:.75rem;font-size:.82rem;line-height:1.6}.song-textarea:focus{border-color:var(--border-focus)}.song-error{color:var(--accent-rose);margin:.4rem 0 0;font-size:.8rem}.song-modal-actions{flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1rem;display:flex}.song-modal-spacer{flex:1}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:#ffffff1f}::-webkit-scrollbar-thumb:hover{background:#ffffff38}:is(html:has(.seo-page-container),body:has(.seo-page-container),html:has(.not-found-container),body:has(.not-found-container)){height:auto;min-height:100%;overflow-y:auto}button,input,select,.toggle-switch,.drum-cell,.dock-tab,.step-dot,.key-option,.layer-btn,.hud-status-tag{touch-action:manipulation}input[type=range]{touch-action:pan-y}.seo-page-container{min-height:100dvh;color:var(--text-primary);background:radial-gradient(circle at 50% 0,#161b2c 0%,#08090d 85%);flex-direction:column;display:flex}.seo-main{flex:1 0 auto}.seo-content-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 1.5rem}.seo-header{z-index:50;-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);background:#0f121ad9;position:sticky;top:0}.seo-header-inner{justify-content:space-between;align-items:center;gap:1.5rem;max-width:1120px;margin:0 auto;padding:.85rem 1.5rem;display:flex}.seo-logo-link{color:inherit;align-items:center;gap:.75rem;text-decoration:none;display:flex}.seo-logo-img{object-fit:contain;border-radius:var(--radius-sm);width:32px;height:32px}.seo-logo-text{flex-direction:column;display:flex}.seo-logo-title{letter-spacing:.08em;color:#fff;font-size:1.05rem;font-weight:800}.seo-logo-sub{font-size:.65rem;font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.05em}.seo-nav{align-items:center;gap:1.25rem;display:none}@media (min-width:820px){.seo-nav{display:flex}}.seo-nav-link{color:var(--text-secondary);transition:color var(--transition-snappy);font-size:.9rem;font-weight:500;text-decoration:none}.seo-nav-link:hover{color:#fff}.seo-header-cta{align-items:center;display:flex}.seo-cta-btn{color:#08090d;border-radius:var(--radius-full);transition:opacity var(--transition-snappy), transform var(--transition-snappy);background:#fff;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.85rem;font-weight:700;text-decoration:none;display:inline-flex}.seo-cta-btn:hover{opacity:.92;transform:translateY(-1px)}.seo-live-dot{background:#10b981;border-radius:50%;width:8px;height:8px;animation:2s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}.breadcrumbs-nav{padding:1.25rem 0 .5rem}.breadcrumbs-list{color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:.4rem;margin:0;padding:0;font-size:.8rem;list-style:none;display:flex}.breadcrumb-item{align-items:center;gap:.4rem;display:flex}.breadcrumb-link{color:var(--text-secondary);transition:color var(--transition-snappy);text-decoration:none}.breadcrumb-link:hover{color:var(--accent-blue)}.breadcrumb-separator{color:var(--border-strong)}.breadcrumb-current{color:var(--text-primary);font-weight:500}.seo-hero{text-align:center;padding:2.5rem 0 3.5rem}.seo-hero-badge{letter-spacing:.08em;text-transform:uppercase;color:var(--accent-blue);border-radius:var(--radius-full);background:#38bdf81a;border:1px solid #38bdf840;margin-bottom:1.25rem;padding:.35rem .85rem;font-size:.75rem;font-weight:700;display:inline-block}.seo-hero-title{letter-spacing:-.02em;background:linear-gradient(#fff 40%,#94a3b8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;max-width:900px;margin:0 auto 1.25rem;font-size:clamp(2rem,4.5vw,3.25rem);font-weight:800;line-height:1.15}.seo-hero-subtitle{color:var(--text-secondary);max-width:780px;margin:0 auto 2rem;font-size:clamp(1rem,2vw,1.2rem);line-height:1.6}.seo-hero-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-bottom:2.5rem;display:flex}.seo-btn-primary{color:#08090d;border-radius:var(--radius-full);transition:transform var(--transition-snappy), opacity var(--transition-snappy);background:linear-gradient(135deg,#38bdf8,#818cf8);align-items:center;gap:.6rem;padding:.85rem 1.85rem;font-size:.95rem;font-weight:700;text-decoration:none;display:inline-flex;box-shadow:0 4px 20px #38bdf84d}.seo-btn-primary:hover{opacity:.95;transform:translateY(-2px)}.seo-btn-icon{width:18px;height:18px}.seo-btn-secondary{color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--radius-full);transition:background var(--transition-snappy), border-color var(--transition-snappy);background:#ffffff0d;align-items:center;gap:.5rem;padding:.85rem 1.65rem;font-size:.95rem;font-weight:600;text-decoration:none;display:inline-flex}.seo-btn-secondary:hover{background:#ffffff1a;border-color:#ffffff4d}.seo-hero-highlights{color:var(--text-secondary);flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem;font-size:.85rem;display:flex}.seo-highlight-item{align-items:center;gap:.4rem;display:flex}.seo-highlight-bullet{color:#10b981;font-weight:800}.seo-section{border-top:1px solid var(--border-subtle);padding:4rem 0}.seo-section-header{text-align:center;max-width:720px;margin:0 auto 3rem}.seo-section-title{color:#fff;margin:0 0 .85rem;font-size:clamp(1.6rem,3vw,2.25rem);font-weight:700}.seo-section-desc{color:var(--text-secondary);margin:0;font-size:1rem;line-height:1.6}.seo-guide-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;display:grid}.seo-guide-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:border-color var(--transition-snappy), transform var(--transition-snappy);flex-direction:column;padding:1.75rem;display:flex}.seo-guide-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}.seo-guide-badge-row{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.seo-guide-hand{text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-sm);padding:.25rem .6rem;font-size:.7rem;font-weight:700}.hand-left{color:var(--accent-left-hand);background:#38bdf826}.hand-right{color:var(--accent-right-hand);background:#f43f5e26}.hand-both{color:var(--accent-indigo);background:#818cf826}.seo-guide-step-num{font-family:var(--font-mono);color:var(--text-muted);font-size:.75rem}.seo-guide-title{color:#fff;margin:0 0 .6rem;font-size:1.2rem;font-weight:700}.seo-guide-desc{color:var(--text-secondary);flex:1;margin:0 0 1rem;font-size:.9rem;line-height:1.55}.seo-guide-detail{border-radius:var(--radius-sm);border-left:2px solid var(--accent-blue);color:var(--text-secondary);background:#00000059;padding:.75rem;font-size:.8rem;line-height:1.4}.seo-features-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;display:grid}.seo-feature-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#ffffff05;padding:1.5rem}.seo-feature-icon{color:var(--accent-blue);margin-bottom:.85rem;font-size:1.5rem}.seo-feature-title{color:#fff;margin:0 0 .5rem;font-size:1.1rem;font-weight:700}.seo-feature-desc{color:var(--text-secondary);margin:0;font-size:.88rem;line-height:1.55}.seo-specs-table-wrap{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-surface);max-width:780px;margin:0 auto;overflow:hidden}.seo-specs-table{border-collapse:collapse;width:100%}.seo-spec-row:not(:last-child){border-bottom:1px solid var(--border-subtle)}.seo-spec-label{color:var(--text-secondary);background:#ffffff04;width:38%;padding:.9rem 1.25rem;font-size:.88rem;font-weight:600}.seo-spec-value{color:var(--text-primary);font-size:.88rem;font-family:var(--font-mono);padding:.9rem 1.25rem}.seo-faq-list{flex-direction:column;gap:.85rem;max-width:820px;margin:0 auto;display:flex}.seo-faq-item{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:border-color var(--transition-snappy);overflow:hidden}.seo-faq-item[open]{border-color:var(--border-strong)}.seo-faq-question{color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.5rem;font-size:.98rem;font-weight:600;display:flex}.seo-faq-question::-webkit-details-marker{display:none}.seo-faq-chevron{width:18px;height:18px;color:var(--text-muted);transition:transform var(--transition-snappy);flex-shrink:0}.seo-faq-item[open] .seo-faq-chevron{transform:rotate(180deg)}.seo-faq-answer{color:var(--text-secondary);border-top:1px solid #ffffff0a;padding:1rem 1.5rem 1.25rem;font-size:.9rem;line-height:1.6}.seo-faq-answer p{margin:0}.seo-related-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;display:grid}.seo-related-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:border-color var(--transition-snappy), transform var(--transition-snappy);flex-direction:column;padding:1.5rem;text-decoration:none;display:flex}.seo-related-card:hover{border-color:var(--accent-blue);transform:translateY(-2px)}.seo-related-tag{text-transform:uppercase;color:var(--accent-blue);margin-bottom:.5rem;font-size:.7rem;font-weight:700}.seo-related-title{color:#fff;margin:0 0 .5rem;font-size:1.15rem;font-weight:700}.seo-related-desc{color:var(--text-secondary);flex:1;margin:0 0 1.25rem;font-size:.85rem;line-height:1.5}.seo-related-link-text{color:var(--accent-blue);align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;display:inline-flex}.seo-arrow-icon{width:14px;height:14px}.seo-cta-banner{text-align:center;border-top:1px solid var(--border-subtle);background:linear-gradient(#0000 0%,#38bdf80f 100%);padding:4.5rem 0}.seo-banner-title{color:#fff;margin:0 0 .85rem;font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:800}.seo-banner-subtitle{color:var(--text-secondary);max-width:650px;margin:0 auto 2rem;font-size:1.05rem;line-height:1.55}.seo-banner-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;display:flex}.seo-footer{border-top:1px solid var(--border-subtle);background:var(--bg-app);padding:4rem 0 2rem;font-size:.88rem}.seo-footer-inner{grid-template-columns:1.5fr repeat(auto-fit,minmax(200px,1fr));gap:2.5rem;max-width:1120px;margin:0 auto 3.5rem;padding:0 1.5rem;display:grid}@media (max-width:768px){.seo-footer-inner{grid-template-columns:1fr;gap:2rem}}.seo-footer-brand{flex-direction:column;gap:1rem;display:flex}.seo-footer-tagline{color:var(--text-secondary);max-width:320px;margin:0;font-size:.85rem;line-height:1.6}.seo-footer-badges{flex-wrap:wrap;gap:.5rem;display:flex}.seo-badge{border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-secondary);font-size:.68rem;font-family:var(--font-mono);background:#ffffff0d;padding:.2rem .55rem}.seo-footer-heading{text-transform:uppercase;letter-spacing:.06em;color:#fff;margin:0 0 1rem;font-size:.85rem;font-weight:700}.seo-footer-list{flex-direction:column;gap:.65rem;margin:0;padding:0;list-style:none;display:flex}.seo-footer-link{color:var(--text-secondary);transition:color var(--transition-snappy);font-size:.85rem;text-decoration:none}.seo-footer-link:hover{color:var(--accent-blue)}.seo-footer-text{color:var(--text-muted);margin:0 0 1rem;font-size:.82rem;line-height:1.55}.seo-footer-links-row{align-items:center;gap:.75rem;font-size:.82rem;display:flex}.seo-footer-ext-link{color:var(--text-secondary);transition:color var(--transition-snappy);text-decoration:none}.seo-footer-ext-link:hover{color:#fff}.seo-footer-sep{color:var(--border-strong)}.seo-footer-bottom{border-top:1px solid var(--border-subtle);padding-top:2rem}.seo-footer-bottom-inner{max-width:1120px;color:var(--text-muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin:0 auto;padding:0 1.5rem;font-size:.78rem;display:flex}.seo-copyright,.seo-legacy-note{margin:0}.not-found-container{min-height:100dvh;color:var(--text-primary);background:radial-gradient(circle at 50% 20%,#171b2d 0%,#08090d 80%);flex-direction:column;display:flex}.not-found-content{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;max-width:720px;margin:0 auto;padding:3rem 1.5rem;display:flex}.not-found-code{font-size:clamp(5rem,12vw,8.5rem);font-weight:900;font-family:var(--font-mono);letter-spacing:-.04em;background:linear-gradient(135deg,#38bdf8 0%,#f43f5e 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0 0 1rem;line-height:1}.not-found-title{color:#fff;margin:0 0 1rem;font-size:clamp(1.6rem,3.5vw,2.25rem);font-weight:800}.not-found-desc{color:var(--text-secondary);max-width:580px;margin:0 0 2.5rem;font-size:1.05rem;line-height:1.6}.not-found-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;width:100%;margin-bottom:2.5rem;display:grid}.not-found-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:border-color var(--transition-snappy), transform var(--transition-snappy);flex-direction:column;align-items:center;gap:.35rem;padding:1.1rem;text-decoration:none;display:flex}.not-found-card:hover{border-color:var(--accent-blue);transform:translateY(-2px)}.not-found-card-title{color:#fff;font-size:.92rem;font-weight:700}.not-found-card-sub{color:var(--text-muted);font-size:.75rem}.seo-catalog-card{padding:2rem}.seo-catalog-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}@supports (min-height:100dvh){.app,.seo-page-container,.not-found-container{min-height:100dvh}}@media (max-width:768px){.seo-footer{padding:2.5rem 0 1.5rem}.seo-footer-inner{grid-template-columns:1fr;gap:2rem;margin-bottom:2rem;padding:0 1rem}.seo-footer-bottom-inner{text-align:center;flex-direction:column;gap:.6rem;padding:0 1rem}}@media (max-width:640px){.topbar{gap:.5rem;padding:.5rem .75rem}.brand{gap:.5rem}.logo-mark{height:28px}.brand-name{font-size:.92rem}.brand-tagline,.brand-badge{display:none}.controls{gap:.35rem}.controls button{padding:.35rem .6rem;font-size:.72rem}.status-pill{padding:.2rem .5rem;font-size:.68rem}.hud-overlay{gap:.4rem;width:auto;max-width:none;padding:.5rem .75rem .6rem;bottom:.5rem;left:.5rem;right:.5rem}.hud-overlay[data-collapsed]{padding:.4rem .7rem;right:auto}.hud-overlay[data-collapsed] .hud-collapse-toggle{gap:.5rem;width:auto}.hud-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem .75rem}.hud-grid dt{font-size:.58rem}.hud-grid dd{white-space:nowrap;text-overflow:ellipsis;margin:.05rem 0 .1rem;font-size:.72rem;overflow:hidden}.param-meters-overlay{gap:.3rem;min-width:130px;padding:.4rem .6rem;top:.5rem;left:.5rem;right:auto}.param-meter{gap:.4rem}.param-meter-label{width:2.6rem;font-size:.6rem}.param-meter-value{min-width:2.8rem;font-size:.65rem}.eq-overlay{width:auto;max-width:140px;padding:.4rem .65rem;top:.5rem;right:.5rem}.eq-overlay[open]{z-index:25;max-width:200px}.dock-topline{gap:.4rem .6rem;padding:.45rem .75rem}.dock-tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;padding-bottom:2px;overflow-x:auto}.dock-tabs::-webkit-scrollbar{display:none}.dock-tab{white-space:nowrap;flex-shrink:0;padding:.35rem .55rem;font-size:.74rem}.dock-panel{-webkit-overflow-scrolling:touch;gap:.6rem;padding:.6rem .75rem;overflow-x:auto}.session-canvas,.drum-modal{padding:.5rem}.canvas-card,.drum-card{max-height:94vh;padding:.85rem}.seo-header-inner{gap:.75rem;padding:.6rem 1rem}.seo-logo-img{width:28px;height:28px}.seo-logo-title{font-size:.95rem}.seo-logo-sub{display:none}.seo-cta-btn{white-space:nowrap;padding:.4rem .75rem;font-size:.78rem}.seo-content-wrap{padding:0 1rem}.breadcrumbs-nav{padding:.75rem 0 .25rem}.breadcrumbs-list{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;font-size:.75rem;overflow-x:auto}.breadcrumbs-list::-webkit-scrollbar{display:none}.breadcrumb-item{white-space:nowrap;flex-shrink:0}.seo-hero{padding:1.75rem 0 2.25rem}.seo-hero-badge{margin-bottom:.85rem;padding:.25rem .7rem;font-size:.7rem}.seo-hero-title{word-break:break-word;overflow-wrap:break-word;margin-bottom:.85rem;font-size:clamp(1.65rem,7.5vw,2.35rem);line-height:1.18}.seo-hero-subtitle{margin-bottom:1.5rem;font-size:.92rem;line-height:1.55}.seo-hero-actions{flex-direction:column;gap:.75rem;width:100%;margin-bottom:1.75rem}.seo-btn-primary,.seo-btn-secondary{text-align:center;box-sizing:border-box;justify-content:center;width:100%;padding:.75rem 1.25rem;font-size:.9rem}.seo-hero-highlights{grid-template-columns:1fr 1fr;gap:.5rem .75rem;font-size:.78rem;display:grid}.seo-section{padding:2.5rem 0}.seo-section-header{margin-bottom:1.75rem}.seo-section-title{word-break:break-word;font-size:1.45rem}.seo-section-desc{font-size:.88rem}.seo-guide-grid,.seo-features-grid,.seo-related-grid{grid-template-columns:1fr;gap:1rem}.seo-guide-card,.seo-feature-card,.seo-related-card,.seo-catalog-card{padding:1.25rem}.seo-guide-title{font-size:1.1rem}.seo-spec-row{flex-direction:column;display:flex}.seo-spec-label{width:100%;padding:.6rem .85rem .2rem;font-size:.8rem}.seo-spec-value{word-break:break-word;width:100%;padding:.2rem .85rem .65rem;font-size:.82rem}.seo-faq-question{padding:.85rem 1rem;font-size:.9rem}.seo-faq-answer{padding:0 1rem 1rem;font-size:.85rem}.seo-cta-banner{padding:3rem 0}.seo-banner-title{font-size:1.6rem}.seo-banner-subtitle{margin-bottom:1.5rem;font-size:.9rem}.seo-banner-actions{flex-direction:column;width:100%}:is(.camera-wrap:has(.camera-placeholder) .hud-overlay,.camera-wrap:has(.camera-placeholder) .param-meters-overlay,.camera-wrap:has(.camera-placeholder) .eq-overlay){display:none}.camera-placeholder{-webkit-overflow-scrolling:touch;justify-content:flex-start;padding:.85rem;overflow-y:auto}.placeholder-card{gap:.7rem;max-width:100%;padding:1.25rem}.placeholder-tagline{font-size:1.05rem}.producthunt-badge img{width:210px;height:auto}}@media (max-width:520px){.intro-card,.song-modal-card{width:100%;max-height:90vh;padding:1.1rem}.intro-card h1{margin:.3rem 0;font-size:1.15rem}.intro-lead{font-size:.82rem;line-height:1.45}.intro-tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;margin-bottom:.75rem;overflow-x:auto}.intro-tabs::-webkit-scrollbar{display:none}.intro-tab{white-space:nowrap;flex-shrink:0;padding:.35rem .55rem;font-size:.75rem}.intro-tabpanel{font-size:.82rem}.intro-foot{flex-direction:column-reverse;align-items:stretch;gap:.75rem;margin-top:.9rem;padding-top:.75rem}.intro-dismiss{text-align:center;width:100%;padding:.65rem 1rem;font-size:.88rem}.intro-privacy{justify-content:center;font-size:.74rem}.not-found-content{padding:2rem 1rem}.not-found-code{font-size:4.5rem}.not-found-title{font-size:1.45rem}.not-found-desc{margin-bottom:1.75rem;font-size:.88rem}.not-found-grid{grid-template-columns:1fr;gap:.75rem}.not-found-card{align-items:flex-start;padding:.9rem 1rem}}@media (max-width:400px){.seo-hero-highlights{grid-template-columns:1fr}}