:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--font-sans:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"SFMono-Regular", "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Monaco, Consolas, monospace;--font-xs:.75rem;--font-sm:.875rem;--font-base:1rem;--font-lg:1.125rem;--focus-ring-color:color-mix(in srgb, var(--accent-color), transparent 70%);--base03:#002b36;--base02:#073642;--base01:#586e75;--base00:#657b83;--base0:#839496;--base1:#93a1a1;--base2:#eee8d5;--base3:#fdf6e3;--yellow:#b58900;--orange:#cb4b16;--red:#dc322f;--magenta:#d33682;--violet:#6c71c4;--blue:#268bd2;--cyan:#2aa198;--green:#859900;--bg-color:var(--base03);--panel-color:var(--base02);--text-color:var(--base1);--text-primary:var(--text-color);--text-secondary:var(--base0);--text-muted:var(--base01);--accent-color:var(--blue);--accent-hover:var(--cyan);--success-color:var(--green);--soloist-color:var(--magenta);--harmony-color:var(--violet);--smart-color:var(--violet);--error-color:var(--red);--yellow-rgb:181, 137, 0;--cyan-rgb:42, 161, 152;--magenta-rgb:211, 54, 130;--chords-color-rgb:38, 139, 210;--bass-color-rgb:133, 153, 0;--soloist-color-rgb:211, 54, 130;--harmony-color-rgb:108, 113, 196;--groove-color-rgb:147, 161, 161;--card-bg:#0a404e;--card-bg-hover:var(--base01);--border-color:#93a1a126;--border:var(--border-color);--input-bg:#002b3666;--surface-sunken:var(--input-bg);--select-bg:var(--base03);--select-text:var(--base2);--select-border:var(--base01);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--shadow-sm:0 4px 6px -1px #0000001a;--shadow-md:0 4px 12px #0000004d;--shadow-lg:0 10px 25px #00000080;--step-bg:#93a1a126;--step-bg-hover:#93a1a140;--beat-active:var(--yellow);--beat-inactive-odd:var(--base02);--beat-inactive-even:var(--base01);--beat-playing:var(--orange);--z-background:-1;--z-base:1;--z-step:2;--z-panel-content:5;--z-controls:10;--z-tabs:10;--z-sidebar:20;--z-panel-header:50;--z-header:90;--z-mobile-nav:100;--z-floating:500;--z-overlay:1000;--z-modal:2000;--z-toast:3000;--z-maximized:10000;--z-maximized-header:10001;--anim-fast:.15s;--anim-normal:.25s;--anim-slow:.4s;--anim-ease:cubic-bezier(.4, 0, .2, 1);--anim-bounce:cubic-bezier(.34, 1.56, .64, 1)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg-color:var(--base3);--panel-color:var(--base2);--text-color:var(--base02);--text-primary:var(--text-color);--text-secondary:var(--base01);--text-muted:var(--base00);--accent-color:var(--blue);--accent-hover:var(--cyan);--success-color:var(--green);--soloist-color:var(--magenta);--harmony-color:var(--violet);--error-color:var(--red);--chords-color-rgb:38, 139, 210;--bass-color-rgb:133, 153, 0;--soloist-color-rgb:211, 54, 130;--harmony-color-rgb:108, 113, 196;--groove-color-rgb:7, 54, 66;--card-bg:var(--base3);--card-bg-hover:var(--base2);--border-color:#07364226;--border:var(--border-color);--input-bg:#eee8d580;--surface-sunken:var(--input-bg);--select-bg:var(--base3);--select-text:var(--base02);--select-border:var(--base1);--step-bg:#0736421a;--step-bg-hover:#07364233;--beat-active:var(--yellow);--beat-inactive-odd:var(--base2);--beat-inactive-even:var(--base3)}*{box-sizing:border-box}[data-e2e-mode=true],[data-e2e-mode=true] *,[data-e2e-mode=true] :before,[data-e2e-mode=true] :after{transition:none!important;animation:none!important}body{font-family:var(--font-sans);background-color:var(--bg-color);color:var(--text-color);touch-action:manipulation;height:100dvh;transition:background-color var(--anim-normal) var(--anim-ease), color var(--anim-normal) var(--anim-ease), border-color var(--anim-normal) var(--anim-ease);flex-direction:column;margin:0;display:flex;overflow:hidden}#flashOverlay{opacity:0;pointer-events:none;z-index:var(--z-maximized);background-color:#fff;transition:opacity 50ms;position:fixed;inset:0}.stepper-btn:hover{background:#93a1a11a}.stepper-btn:active{background:#93a1a133}.stepper-control{transition:border-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease)}.stepper-control:focus-within{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--focus-ring-color)}header{background:color-mix(in srgb, var(--panel-color), var(--bg-color) 8%);padding:var(--space-4) var(--space-6);box-shadow:var(--shadow-sm);z-index:var(--z-header);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;gap:1rem;height:80px;display:flex;position:sticky;top:0}#settingsBtn{padding:var(--space-2);border-radius:var(--radius-sm);cursor:pointer;transition:color var(--anim-fast) var(--anim-ease), background-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease);background:0 0;border:none;justify-content:center;align-items:center;font-size:1.2rem;display:inline-flex}#settingsBtn:hover{background:color-mix(in srgb, var(--accent-color), transparent 92%)}#settingsBtn:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}@media (width<=600px){header{justify-content:space-between;gap:.05rem;max-width:100%;height:64px;padding:.5rem .1rem;overflow:hidden}.app-title-group{flex:auto;min-width:0;overflow:hidden}h1{letter-spacing:-.07em;z-index:1;text-overflow:ellipsis;flex-shrink:1;width:100%;min-width:0;max-width:100%;padding-right:4px;font-size:.75rem;overflow:hidden}.main-controls{flex-shrink:0;justify-content:flex-end;gap:0;min-width:0}.primary-btn{flex-shrink:0;min-width:36px;padding:.4rem .1rem;font-size:.6rem}input[type=number]{width:28px;padding:0;font-size:.75rem}.control-group{gap:.05rem;padding:.1rem}.control-label{display:none}#settingsBtn{margin-right:0;padding:.4rem .2rem;font-size:1.2rem}#tapBtn{padding:.2rem .25rem;font-size:.65rem}}.handle-tap{background-color:var(--accent-color);color:#fff;transform:scale(.95)}h1{background:linear-gradient(45deg, var(--accent-color), var(--violet));-webkit-text-fill-color:transparent;color:#0000;white-space:nowrap;-webkit-background-clip:text;background-clip:text;width:fit-content;margin:0;font-size:1.5rem;display:inline-block}.main-controls{align-items:center;gap:1rem;display:flex}.primary-btn{background-color:var(--accent-color);color:#fff;padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);cursor:pointer;transition:all var(--anim-fast) var(--anim-ease);font-weight:700;font-size:var(--font-base);box-shadow:var(--shadow-sm);border:none;justify-content:center;align-items:center;min-width:100px;height:42px;line-height:1;display:inline-flex}.primary-btn:hover{background-color:var(--accent-hover);transform:translateY(-1px)}.primary-btn:active{transform:translateY(0)}.primary-btn.playing{background-color:var(--error-color);box-shadow:0 4px 6px -1px #dc26264d}.control-group{background:var(--input-bg);border-radius:var(--radius-md);height:32px;padding:0 var(--space-2);border:1px solid var(--border-color);align-items:center;display:flex}.control-label{font-size:var(--font-xs);text-transform:uppercase;color:var(--text-secondary);margin-right:.5rem;font-weight:700}input[type=number]{color:var(--text-color);text-align:center;background:0 0;border:none;width:60px;font-size:1rem;font-weight:700}input[type=number]:focus{outline:none}button{background:var(--card-bg);border:1px solid var(--border-color);color:var(--text-color);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease), color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease), transform var(--anim-fast) var(--anim-ease)}button:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px;border-color:var(--accent-color)}.rel-key-btn{color:var(--accent-color);background:#94a3b81a;border:1px solid #94a3b833}.header-btn{padding:var(--space-2);font-size:var(--font-sm);justify-content:center;align-items:center;min-width:32px;height:32px;line-height:1;display:inline-flex}.header-btn--primary{background:var(--accent-color);color:#fff;border-color:var(--accent-color);padding-inline:var(--space-3);font-weight:600}.header-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.header-btn--icon{width:32px;min-width:32px;padding:0;font-size:1rem}@media (pointer:coarse){.header-btn,.header-btn--icon{min-width:44px;min-height:44px}.header-btn--icon{width:44px}}.app-main-layout{grid-template:"arranger sidebar""visualizer sidebar""empty sidebar"1fr/1fr 380px;gap:1.5rem;width:100%;max-width:1600px;min-height:calc(100vh - 80px);margin:0 auto;padding:1.5rem;display:grid}#panel-arranger{grid-area:arranger;min-height:400px}#panel-visualizer{min-height:200px;transition:all .3s var(--anim-ease);grid-area:visualizer}#panel-visualizer.collapsed{min-height:60px}@media (width<=1100px){.app-main-layout{grid-template-columns:1fr 320px}}@media (width<=900px){.app-main-layout{flex-direction:column;gap:0;padding:.5rem;display:flex}#panel-arranger,#panel-visualizer{grid-area:auto;min-height:0}.dashboard-panel{margin-bottom:.75rem}#panel-arranger{order:1;margin-bottom:1rem}#panel-visualizer{order:4;margin-bottom:2rem}}.library-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.9rem;display:block}select{background-color:var(--select-bg);color:var(--select-text);border:1px solid var(--select-border);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-sm);cursor:pointer;transition:background-color var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease);width:100%;font-weight:500;box-shadow:0 1px 2px #0000001a}select:hover{border-color:var(--accent-color);background-color:var(--input-bg)}select:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--focus-ring-color);outline:none}#timeSigSelect,#keySelect,#drumBarsSelect,#swingBaseSelect{width:auto;height:32px;padding:.3rem .5rem;font-size:.85rem}#timeSigSelect{min-width:60px}select option{background-color:var(--panel-color);color:var(--text-color)}.app-title-group{flex-direction:column;gap:.15rem;min-width:0;display:flex}.app-subtitle{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.85rem;overflow:hidden}.app-main-layout.workspace-shell{grid-template-columns:280px minmax(0,1fr);align-items:start;gap:1.5rem;width:100%;max-width:1600px;min-height:calc(100vh - 80px);margin:0 auto;padding:1.5rem;display:grid}.workspace-content{flex-direction:column;min-width:0;min-height:0;display:flex}.workspace-stage{width:100%;min-width:0;min-height:0;animation:workspaceStageEnter var(--anim-normal) var(--anim-ease);flex-direction:column;flex:auto;display:flex}.workspace-stage--arranger{--workspace-accent:var(--accent-color)}.workspace-stage--studio{--workspace-accent:var(--violet)}.workspace-stage--visuals{--workspace-accent:var(--cyan)}.workspace-view{flex-direction:column;gap:1.5rem;min-width:0;min-height:0;display:flex}.workspace-studio-genre-header{flex-direction:column}.workspace-studio-genre-pills{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:0;overflow:visible}.workspace-stats-grid,.workspace-shortcut-grid,.workspace-launch-grid,.workspace-status-grid{grid-template-columns:minmax(0,1fr)}.workspace-action-row{flex-direction:column}.workspace-action-row>*{width:100%}.workspace-visualizer-area{min-height:260px}@media (width<=600px){.app-subtitle{display:none}}.dashboard-panel{background:var(--panel-color);border-radius:var(--radius-xl);padding:var(--space-5);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:border-color var(--anim-normal) var(--anim-ease), box-shadow var(--anim-normal) var(--anim-ease), background-color var(--anim-normal) var(--anim-ease);box-sizing:border-box;--panel-accent:var(--accent-color);flex-direction:column;min-width:0;display:flex;position:relative;overflow:visible}.dashboard-panel:before{content:"";border-top-left-radius:inherit;border-top-right-radius:inherit;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel-accent), transparent 25%) 16%, var(--panel-accent) 50%, color-mix(in srgb, var(--panel-accent), transparent 25%) 84%, transparent);pointer-events:none;height:3px;position:absolute;top:0;left:0;right:0}.dashboard-panel.settings-open{z-index:var(--z-panel-header);overflow:visible}.dashboard-panel.collapsed{padding-bottom:var(--space-3)}.dashboard-panel.collapsed .panel-header{border-bottom:none;margin-bottom:0}.dashboard-panel.collapsed .viz-graph-area,.dashboard-panel.collapsed .viz-legend{display:none}.panel-header{margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;gap:var(--space-2);display:flex;overflow:visible}.panel-title{margin:0}.panel-header-controls{align-items:center;gap:var(--space-2);display:flex}.key-controls{align-items:flex-start;gap:var(--space-1);display:flex}.time-sig-group{flex-direction:column;align-items:center;gap:0;display:flex}.time-sig-group select{width:100%;padding:0 var(--space-2);height:32px;font-size:var(--font-sm);border-radius:var(--radius-md)}@media (width<=600px){#panel-arranger .panel-header{flex-direction:column;align-items:stretch;gap:.75rem;padding-bottom:.75rem}.panel-title-group{justify-content:space-between;align-items:center;width:100%;display:flex}.chord-panel-header .panel-title-group{justify-content:space-between;align-items:center;display:flex}.panel-header-controls{justify-content:space-between;gap:.5rem;width:100%;display:flex}.key-controls{flex-grow:1;grid-template-columns:38px 1fr 1fr 38px 30px 30px;align-items:center;gap:.25rem;display:grid}#keySelect{width:100%;max-width:none;padding-left:.4rem;padding-right:.2rem}.header-btn{width:100%;min-width:0;height:32px;padding:0}}.arranger-action-container{justify-content:flex-end;display:flex;position:relative}.action-trigger-btn{background:var(--accent-color);color:#fff;border-radius:var(--radius-md);padding:var(--space-3);align-items:center;gap:var(--space-2);cursor:pointer;box-shadow:var(--shadow-sm);transition:background-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease), transform var(--anim-fast) var(--anim-ease);z-index:var(--z-sidebar);font-weight:700;font-size:var(--font-sm);border:none;display:flex}.action-trigger-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.action-trigger-btn.active{background:var(--base01)}.action-trigger-btn:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}.action-menu-content{background:var(--panel-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-3);gap:var(--space-2);z-index:var(--z-mobile-nav);grid-template-columns:repeat(auto-fit,minmax(130px,1fr));width:auto;min-width:280px;max-width:400px;animation:.2s ease-out menuFadeIn;display:none;position:absolute;bottom:calc(100% + 5px);right:0;box-shadow:0 8px 24px #0006}.action-menu-content.open{display:grid}.action-menu-content button{min-height:auto;padding:var(--space-3);font-size:var(--font-sm);flex-direction:row;justify-content:flex-start;width:100%}.menu-divider{background:var(--border-color);opacity:.5;grid-column:1/-1;height:1px;margin:.25rem 0}.menu-section-header{text-transform:uppercase;color:var(--text-muted);letter-spacing:.1em;grid-column:1/-1;padding:.75rem .5rem .25rem;font-size:.65rem;font-weight:700}.menu-section-header:first-of-type{padding-top:.25rem}.menu-click-away{z-index:calc(var(--z-mobile-nav) - 1);cursor:default;background:0 0;position:fixed;inset:0}#panel-arranger,#panel-chords{--panel-accent:var(--accent-color)}#panel-grooves{--panel-accent:var(--yellow)}#panel-bass{--panel-accent:var(--success-color)}#panel-soloist{--panel-accent:var(--soloist-color)}#panel-harmonies{--panel-accent:var(--harmony-color)}#panel-visualizer{--panel-accent:var(--cyan)}.chord-panel-header h2{color:var(--accent-color)}h2{text-transform:uppercase;letter-spacing:.05em;margin:0;font-size:1.1rem}.workspace-toolbar-popover{z-index:var(--z-floating);display:inline-flex;position:relative}.workspace-toolbar-trigger{gap:.35rem;min-width:0;padding-inline:.65rem}.workspace-toolbar-trigger.is-open{background:var(--card-bg-hover);border-color:color-mix(in srgb, var(--accent-color), transparent 45%)}.workspace-toolbar-trigger-copy{align-items:center;gap:.32rem;min-width:0;display:inline-flex}.workspace-toolbar-trigger-label{color:var(--text-secondary);white-space:nowrap;font-size:.76rem;font-weight:700}.workspace-toolbar-trigger-value{white-space:nowrap;font-size:.8rem;font-weight:700}.workspace-toolbar-trigger-caret{color:var(--text-muted);font-size:.78rem}.workspace-toolbar-panel{opacity:0;visibility:hidden;transform-origin:100% 0;pointer-events:none;border:1px solid var(--border-color);background:var(--panel-color);box-shadow:var(--shadow-lg);overscroll-behavior:contain;scrollbar-gutter:stable;min-width:14rem;max-width:min(22rem,100vw - 1.5rem);z-index:var(--z-modal);border-radius:14px;flex-direction:column;align-items:stretch;gap:.7rem;padding:.75rem;transition:opacity .16s,transform .16s;display:flex;position:absolute;top:calc(100% + .5rem);right:0;overflow-y:auto;transform:translateY(-.5rem)scale(.98)}.workspace-toolbar-popover.is-open .workspace-toolbar-panel,.workspace-toolbar-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)scale(1)}@media (width>=701px){.workspace-toolbar-panel--fixed{overscroll-behavior:contain;scrollbar-gutter:stable;z-index:var(--z-modal);overflow-y:auto}.workspace-toolbar-panel .workspace-fab-item{scroll-margin-block-start:6rem}}.workspace-fab-item{box-shadow:var(--shadow-md);background:var(--card-bg);border:1px solid var(--border-color);width:100%;min-width:0;height:42px;color:var(--text-color);text-align:left;border-radius:12px;justify-content:flex-start;align-items:center;gap:.65rem;padding:.5rem .9rem;font-weight:700;transition:background-color .18s,border-color .18s,transform .18s,box-shadow .18s;display:inline-flex}.workspace-toolbar-panel .workspace-fab-item:hover,.workspace-toolbar-panel .workspace-fab-item:focus-visible{background:var(--accent-color);border-color:var(--accent-color);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-1px)}.workspace-fab-item--seed:hover,.workspace-fab-item--seed:focus-visible{background:var(--card-bg);border-color:var(--border-color);color:var(--text-color);box-shadow:none;transform:none}.workspace-toolbar-panel__section{flex-direction:column;gap:.4rem;min-width:0;display:flex}.workspace-toolbar-panel__label{letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);font-size:.72rem;font-weight:700}.workspace-toolbar-panel__action{width:100%;padding:var(--space-2) var(--space-3);text-align:left;border-radius:var(--radius-sm);color:var(--text-color);font-size:var(--font-base);cursor:pointer;background:0 0;border:none;display:block}.workspace-toolbar-panel__action:hover,.workspace-toolbar-panel__action:focus-visible{background:var(--accent-color);color:#fff;outline:none}.workspace-toolbar-panel__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;display:grid}.workspace-toolbar-panel__button{white-space:nowrap;min-width:0;min-height:34px;padding-inline:.55rem}.workspace-toolbar-panel__button--wide{justify-content:center;width:100%}.workspace-toolbar-panel select{width:100%;max-width:none}.workspace-toolbar-panel--key{min-width:15rem}.workspace-toolbar-panel--seed{min-width:15.75rem}.workspace-toolbar-panel--seed .workspace-seed-control{width:100%}.workspace-toolbar-panel--seed .workspace-seed-row{justify-content:flex-start}.workspace-toolbar-panel--seed .seed-input{flex:7rem;width:min(100%,7.5rem);min-width:0}.workspace-arranger-toolbar-trigger--key{justify-content:space-between;min-width:0;padding-inline:.65rem}.setting-toggle-label{align-items:center;gap:var(--space-1);color:var(--text-secondary);cursor:pointer;font-size:var(--font-xs);display:flex}.section-label{margin-bottom:var(--space-2);color:var(--text-secondary);font-size:var(--font-sm);display:block}.stepper-control{border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--input-bg);align-items:center;display:flex;overflow:hidden}.stepper-btn{padding:var(--space-2) var(--space-3);color:var(--text-color);cursor:pointer;transition:background-color var(--anim-fast) var(--anim-ease), color var(--anim-fast) var(--anim-ease), transform var(--anim-fast) var(--anim-ease);background:0 0;border:none;font-size:1.1rem;font-weight:700}.stepper-btn:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:-2px}.stepper-input{width:40px;color:var(--text-color);text-align:center;-moz-appearance:textfield;background:0 0;border:none;padding:0;font-weight:700}.tap-btn{height:24px;padding:0 var(--space-2);font-size:var(--font-xs)}.button-group{align-items:center;gap:var(--space-1);display:flex}.button-group-btn{padding:var(--space-1) var(--space-2);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--input-bg);color:var(--text-color);cursor:pointer;font-size:var(--font-xs);transition:background-color var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease), color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease)}.button-group-btn.active{background:var(--accent-color);color:#fff}.button-group-btn:hover{border-color:var(--accent-color);background:var(--card-bg-hover)}.button-group-btn.active:hover{background:var(--accent-color)}.button-group-btn:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}.seed-input{width:80px;padding:var(--space-1) var(--space-2);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-xs);text-transform:uppercase}.seed-input:focus-visible{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--focus-ring-color);outline:none}.icon-btn{padding:var(--space-1);justify-content:center;align-items:center;line-height:1;display:inline-flex}#playBtn{flex-direction:column;justify-content:center;align-items:center;min-width:80px;line-height:1.1;display:flex}@media (width<=600px){#playBtn{white-space:nowrap;width:7rem;padding:.35rem .25rem}}.badge-btn{color:var(--accent-color);cursor:pointer;padding:1px var(--space-1);border-radius:var(--radius-sm);text-align:center;min-width:28px;font-family:inherit;font-size:.65rem;font-weight:700;line-height:inherit;appearance:none;transition:background-color var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease);background:#3b82f61a;border:1px solid #3b82f633;margin-top:2px;display:inline-block}.badge-btn:hover{background:#3b82f633;border-color:#3b82f666}.badge-btn:focus-visible{outline:2px solid var(--accent-color);outline-offset:1px}.display-area{--lead-vertical-fill:1;--lead-vertical-gap-fill:1;--lead-vertical-type-fill:1;--lead-row-width:100%;--lead-row-gap:.46rem;--lead-measure-gap:.3rem;--lead-marker-reserve:.72rem;--lead-marker-lane-gap:.14rem;--lead-marker-size:.64rem;--lead-measure-min-height:54px;--lead-chord-min-height:44px;--lead-card-padding:.24rem .18rem;--lead-font-size:clamp(1.16rem, 2.55vw, 1.72rem);background:linear-gradient(180deg, color-mix(in srgb, var(--input-bg), white 3%), color-mix(in srgb, var(--input-bg), black 2%));margin-bottom:var(--space-2);border:1px solid var(--border-color);box-sizing:border-box;gap:calc(var(--lead-row-gap) * var(--lead-vertical-gap-fill));scroll-behavior:smooth;scroll-snap-type:y proximity;overscroll-behavior:contain;border-radius:18px;align-content:start;align-items:start;height:60vh;min-height:200px;max-height:750px;padding:clamp(.36rem,1.1vw,.9rem);scroll-padding-block:clamp(2rem,16vh,7rem);display:grid;position:relative;overflow:hidden auto;box-shadow:inset 0 1px #ffffff0a}.lead-sheet--compact{--lead-row-gap:.32rem;--lead-measure-gap:.22rem;--lead-marker-reserve:.56rem;--lead-marker-lane-gap:.1rem;--lead-marker-size:.56rem;--lead-measure-min-height:40px;--lead-chord-min-height:34px;--lead-card-padding:.14rem .12rem;--lead-font-size:clamp(1rem, 2.2vw, 1.28rem)}.lead-sheet--ultra-compact{--lead-row-gap:.2rem;--lead-measure-gap:.16rem;--lead-marker-reserve:.4rem;--lead-marker-lane-gap:.06rem;--lead-marker-size:.5rem;--lead-measure-min-height:32px;--lead-chord-min-height:28px;--lead-card-padding:.1rem .08rem;--lead-font-size:clamp(.86rem, 2.05vw, 1.08rem)}.lead-sheet--scroll-guided.lead-sheet--compact{--lead-row-gap:.38rem;--lead-measure-gap:.24rem;--lead-marker-reserve:.56rem;--lead-measure-min-height:46px;--lead-chord-min-height:38px;--lead-font-size:clamp(1.08rem, 2.35vw, 1.34rem)}.lead-sheet--scroll-guided.lead-sheet--ultra-compact{--lead-row-gap:.28rem;--lead-measure-gap:.18rem;--lead-marker-reserve:.44rem;--lead-measure-min-height:38px;--lead-chord-min-height:32px;--lead-font-size:clamp(.98rem, 2.18vw, 1.18rem)}.lead-sheet-section-group{gap:calc(var(--lead-row-gap) * .8 * var(--lead-vertical-gap-fill));width:min(var(--lead-row-width), 100%);isolation:isolate;transition:transform var(--anim-fast) var(--anim-ease);align-content:start;align-self:start;justify-items:stretch;margin-inline:auto;display:grid;position:relative}.lead-sheet-section-group--active:before{content:"";background:color-mix(in srgb, var(--accent-color), transparent 92%);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-color), transparent 84%), 0 10px 24px #00000014;pointer-events:none;z-index:0;border-radius:20px;position:absolute;inset:-.16rem -.18rem}.lead-sheet-row{column-gap:var(--lead-measure-gap);isolation:isolate;scroll-snap-align:start;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;row-gap:0;width:100%;scroll-margin-block:clamp(1.6rem,12vh,6rem);display:grid;position:relative}.lead-sheet-row--with-markers{row-gap:var(--lead-marker-lane-gap)}.lead-sheet-row--active:before{content:"";background:color-mix(in srgb, var(--accent-color), transparent 18%);width:3px;box-shadow:0 0 10px color-mix(in srgb, var(--accent-color), transparent 60%);z-index:2;border-radius:999px;position:absolute;top:.16rem;bottom:.16rem;left:-.28rem}.lead-sheet-row--upcoming .measure-box{border-color:color-mix(in srgb, var(--accent-color), transparent 78%);background:color-mix(in srgb, var(--panel-color), var(--accent-color) 4%)}.lead-sheet-marker-slot{min-width:0;min-height:calc(var(--lead-marker-reserve) * var(--lead-vertical-gap-fill));z-index:1;justify-content:flex-start;align-items:flex-end;padding-left:.08rem;display:flex;position:relative}.lead-sheet-row-marker{border:1px solid color-mix(in srgb, var(--accent-color), transparent 58%);background:color-mix(in srgb, var(--accent-color), transparent 88%);min-width:1.35rem;color:var(--text-color);font-size:calc(var(--lead-marker-size) * var(--lead-vertical-type-fill));letter-spacing:.08em;text-transform:uppercase;pointer-events:none;transition:border-color var(--anim-fast) var(--anim-ease), background-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease), color var(--anim-fast) var(--anim-ease);border-radius:999px;justify-content:center;align-items:center;padding:.08rem .3rem;font-weight:800;line-height:1;display:inline-flex}.lead-sheet-marker-slot--section-active .lead-sheet-row-marker{border-color:color-mix(in srgb, var(--accent-color), transparent 48%);background:color-mix(in srgb, var(--accent-color), transparent 80%);box-shadow:inset 0 0 0 1px #ffffff1f,0 3px 8px #0000000f}.lead-sheet-marker-slot--row-active .lead-sheet-row-marker{color:#fff;border-color:color-mix(in srgb, var(--accent-color), transparent 18%);background:color-mix(in srgb, var(--accent-color), white 6%);box-shadow:inset 0 0 0 1px #ffffff47, 0 5px 12px color-mix(in srgb, var(--accent-color), transparent 84%)}.measure-box{min-width:0;min-height:calc(var(--lead-measure-min-height) * var(--lead-vertical-fill));border:1px solid var(--border-color);background:linear-gradient(180deg, color-mix(in srgb, var(--panel-color), white 4%), color-mix(in srgb, var(--panel-color), black 2%));z-index:1;transition:border-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease), background-color var(--anim-fast) var(--anim-ease);border-radius:14px;align-items:stretch;gap:0;scroll-margin-block:clamp(2rem,16vh,7rem);display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0a,0 1px 2px #0000000d}.measure-box:after{content:"";background:color-mix(in srgb, var(--border-color), transparent 18%);pointer-events:none;opacity:.7;width:1px;position:absolute;top:14%;bottom:14%;right:0}.measure-box--active{border-color:color-mix(in srgb, var(--accent-color), transparent 25%);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-color), transparent 35%), 0 0 0 1px color-mix(in srgb, var(--accent-color), transparent 75%), 0 8px 22px color-mix(in srgb, var(--accent-color), transparent 90%);background:color-mix(in srgb, var(--panel-color), var(--accent-color) 8%)}.chord-card{min-width:0;min-height:calc(var(--lead-chord-min-height) * var(--lead-vertical-fill));padding:var(--lead-card-padding);color:var(--text-color);font-size:calc(var(--lead-font-size) * var(--font-scale,1) * var(--lead-vertical-type-fill));letter-spacing:-.025em;text-align:center;cursor:pointer;transition:background-color var(--anim-fast) var(--anim-ease), color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease);background:0 0;border:none;border-radius:0;flex:1 1 0;justify-content:center;align-items:center;font-weight:700;line-height:.98;display:flex;position:relative}.chord-card+.chord-card{border-left:1px solid color-mix(in srgb, var(--border-color), transparent 18%)}.chord-symbol{white-space:nowrap;justify-content:center;align-items:flex-start;gap:.02em;max-width:100%;display:inline-flex}.chord-card--with-sparkline{padding-bottom:.8rem}.chord-card.minor{color:var(--soloist-color)}.chord-card.aug{color:#a78bfa}.chord-card.active{background:var(--accent-color);color:#fff;box-shadow:inset 0 0 0 1px #ffffff52}.root{font-weight:760;display:inline-block}.suffix{opacity:.82;align-self:flex-start;margin-left:.02em;font-size:.58em;transform:translateY(.04em)}.bass-note{opacity:.74;align-self:flex-end;margin-left:.06em;font-size:.64em;font-weight:500}.sparkline-container{pointer-events:none;opacity:.55;align-items:flex-end;gap:1px;width:100%;height:8px;padding:0 3px 2px;display:flex;position:absolute;bottom:0;left:0;overflow:hidden}.sparkline-bar{background:var(--soloist-color);min-width:2px;transition:height var(--anim-fast) var(--anim-ease);border-radius:1px;flex-grow:1}.chord-card.active .sparkline-bar{opacity:.82;background:#fff}.preset-library{isolation:isolate;gap:var(--space-4);flex-direction:column;display:flex;position:relative}.preset-library-toolbar{z-index:18;gap:var(--space-3);border:1px solid var(--border-color);border-radius:var(--radius-lg);background:color-mix(in srgb, var(--panel-color), var(--bg-color) 12%);flex-direction:column;padding:.9rem;display:flex;position:sticky;top:0;box-shadow:0 14px 28px #00000029,inset 0 1px #ffffff0a}.preset-library-toolbar:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000 0%,#ffffff14 20%,#ffffff38 50%,#ffffff14 80%,#0000 100%);height:1px;position:absolute;bottom:0;left:.75rem;right:.75rem}.preset-library-results{gap:var(--space-4);flex-direction:column;padding-top:.2rem;display:flex}.preset-library-search-row{gap:var(--space-2);align-items:center;display:flex}.preset-library-search-input{border:1px solid var(--border-color);border-radius:var(--radius-lg);background:var(--input-bg);min-width:0;color:var(--text-color);flex:1;padding:.75rem .875rem;font-size:.94rem}.preset-library-search-input::placeholder{color:var(--text-muted)}.preset-library-search-input:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px;border-color:var(--accent-color)}.preset-library-clear-btn{min-width:0;padding-inline:.9rem}.preset-library-toolbar-meta{justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.preset-library-summary{color:var(--text-secondary);font-size:var(--font-sm);margin:0}.preset-library-favorites-toggle{white-space:nowrap}.preset-library-filter-group{gap:var(--space-2);flex-direction:column;display:flex}.preset-library-filter-label{font-size:var(--font-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-weight:700}.preset-library-filter-chips{flex-wrap:wrap}.preset-library-section{gap:var(--space-3);flex-direction:column;display:flex}.preset-library-section-header{flex-direction:column;gap:.35rem;display:flex}.preset-library-section-header h4{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0;font-size:.82rem;font-weight:700}.preset-library-section-header p{color:var(--text-secondary);font-size:var(--font-sm);margin:0;line-height:1.45}.preset-library-card-grid{justify-content:start;align-items:stretch;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),17.5rem));display:grid}.preset-library-card{--preset-accent:var(--accent-color);gap:var(--space-2);width:100%;min-height:11.25rem;padding:var(--space-3);border:1px solid var(--border-color);border-left:4px solid var(--preset-accent);border-radius:var(--radius-lg);background:linear-gradient(180deg, var(--input-bg), var(--card-bg-hover));transition:transform var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease), background-color var(--anim-fast) var(--anim-ease);animation:fade-in-up var(--anim-normal) var(--anim-ease) both;flex-direction:column;display:flex;box-shadow:0 12px 24px #00000024}.preset-library-card:hover,.preset-library-card:focus-within{border-color:var(--preset-accent);background:var(--card-bg-hover);transform:translateY(-2px);box-shadow:0 16px 28px #0000002e}.preset-library-card.active{border-color:var(--preset-accent);box-shadow:0 0 0 1px var(--preset-accent), 0 18px 32px #0003}.preset-library-card-actions{justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.preset-library-pin-btn,.preset-library-delete-btn{border:1px solid var(--border-color);min-width:0;color:var(--text-secondary);font-size:var(--font-xs);transition:background-color var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease), color var(--anim-fast) var(--anim-ease);background:0 0;border-radius:999px;padding:.35rem .7rem}.preset-library-pin-btn:hover,.preset-library-delete-btn:hover{border-color:var(--preset-accent);color:var(--text-primary)}.preset-library-pin-btn.active{border-color:var(--preset-accent);background:var(--preset-accent);color:#fff}.preset-library-pin-btn:focus-visible,.preset-library-delete-btn:focus-visible,.preset-library-card-button:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}.preset-library-card-button{align-items:flex-start;gap:var(--space-2);width:100%;min-height:7rem;color:var(--text-color);text-align:left;background:0 0;border:0;flex-direction:column;flex:1;padding:0;display:flex}.preset-library-card-header{align-items:center;gap:var(--space-2);justify-content:space-between;width:100%;display:flex}.preset-library-card-title{color:var(--text-primary);font-size:.95rem;font-weight:700;line-height:1.3}.preset-library-card-badges{gap:var(--space-1);flex-wrap:wrap;display:flex}.preset-library-badge{color:var(--text-secondary);letter-spacing:.04em;text-transform:uppercase;background:#ffffff0f;border-radius:999px;padding:.2rem .5rem;font-size:.7rem;font-weight:600}.preset-library-card-preview{color:var(--text-secondary);font-size:var(--font-sm);-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:0;line-height:1.45;display:-webkit-box;overflow:hidden}.preset-library-card[data-source=user] .preset-library-card-preview{color:var(--text-color)}.preset-library-empty-state{gap:var(--space-2);border:1px dashed var(--border-color);border-radius:var(--radius-lg);background:var(--surface-sunken);flex-direction:column;padding:1rem;display:flex}.preset-library-empty-state h4,.preset-library-empty-state p{margin:0}.preset-library-empty-state p{color:var(--text-secondary);line-height:1.5}.preset-library-card[data-category=Pop\/Rock]{--preset-accent:var(--blue)}.preset-library-card[data-category=Electronic],.preset-library-card[data-category=Experimental]{--preset-accent:var(--violet)}.preset-library-card[data-category="Soul/R&B"],.preset-library-card[data-category=Soul\/Funk]{--preset-accent:var(--magenta)}.preset-library-card[data-category=Blues]{--preset-accent:var(--cyan)}.preset-library-card[data-category=World\/Latin],.preset-library-card[data-category=Custom]{--preset-accent:var(--orange)}.preset-library-card[data-category=Jazz]{--preset-accent:var(--green)}.preset-library-card[data-category=Classical\/Trad],.preset-library-card[data-category=Rock\/Metal]{--preset-accent:var(--red)}.preset-library-card[data-category=Theory],.preset-library-card[data-category=Country\/Folk]{--preset-accent:var(--yellow)}@media (width<=720px){.preset-library-toolbar{gap:var(--space-2);padding:.8rem}.preset-library-search-row{flex-wrap:wrap}.preset-library-search-input{padding:.7rem .8rem;font-size:1rem}.preset-library-clear-btn{width:auto;padding-inline:.75rem}.preset-library-toolbar-meta{align-items:stretch;gap:var(--space-1)}.preset-library-summary{font-size:.8rem;line-height:1.35}.preset-library-favorites-toggle{justify-content:center;width:100%}.preset-library-filter-group{gap:var(--space-1)}.preset-library-filter-label{font-size:.7rem}.preset-library-filter-chips{scrollbar-width:none;flex-wrap:nowrap;gap:.35rem;padding-bottom:.15rem;overflow:auto hidden}.preset-library-filter-chips::-webkit-scrollbar{display:none}.preset-library-filter-chips .button-group-btn{white-space:nowrap;flex:none}.preset-library-results{gap:var(--space-3)}.preset-library-section{gap:var(--space-2)}.preset-library-section-header h4{font-size:.76rem}.preset-library-section-header p{display:none}.preset-library-card-grid{gap:var(--space-2);grid-template-columns:minmax(0,1fr)}.preset-library-card{gap:.4rem;min-height:0;padding:.75rem;box-shadow:0 10px 18px #0000001f}.preset-library-card-button{gap:.35rem;min-height:0}.preset-library-card-title{font-size:.9rem}.preset-library-card-badges{gap:.15rem}.preset-library-badge{padding:.16rem .4rem;font-size:.62rem}.preset-library-card-preview{-webkit-line-clamp:2;font-size:.8rem}.preset-library-card-actions{gap:.35rem}.preset-library-pin-btn,.preset-library-delete-btn{padding:.3rem .6rem}.preset-library-empty-state{padding:.85rem}}body.modal-open{overflow:hidden}.settings-overlay,.modal-overlay{width:100%;height:100%;z-index:var(--z-modal);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--anim-normal) var(--anim-ease), visibility var(--anim-normal) var(--anim-ease);background:#000c;outline:none;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.settings-overlay.active,.modal-overlay.active{opacity:1;visibility:visible;pointer-events:auto}.settings-overlay.closing,.modal-overlay.closing,.closing .settings-overlay,.closing .modal-overlay{opacity:0;pointer-events:none}.settings-content{background:var(--panel-color);border:1px solid var(--border-color);width:95%;max-width:800px;max-height:85vh;color:var(--text-color);animation:modal-in var(--anim-normal) var(--anim-ease) forwards;border-radius:12px;flex-direction:column;padding:2rem;display:flex;overflow-y:auto;box-shadow:0 20px 25px -5px #00000080}.closing .settings-content{animation:modal-out var(--anim-normal) var(--anim-ease) forwards}@keyframes modal-in{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes modal-out{0%{opacity:1;transform:scale(1)translateY(0)}to{opacity:0;transform:scale(.95)translateY(10px)}}.settings-controls{margin-top:1.5rem}.generate-modal-shell{flex-direction:column;min-height:700px;display:flex}.generate-modal-body{padding:var(--space-5);flex-grow:1}.generate-success{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:2rem 0;display:flex}.generate-success-icon{filter:drop-shadow(0 0 10px var(--accent-color));margin-bottom:1rem;font-size:4rem}.generate-success-title{color:var(--accent-color);margin-bottom:.5rem}.generate-success-copy{color:var(--text-muted);margin-bottom:2rem;font-size:.9rem}.generate-success-button{width:100%;padding:1rem;font-size:1rem}.generate-mode-switcher{padding:var(--space-2);background:var(--input-bg);border:1px solid var(--border-color);border-radius:12px;justify-content:center;margin-bottom:2rem;display:flex}.generate-mode-toggle-group{gap:var(--space-2);width:100%}.generate-mode-toggle-group .button-group-btn{border-radius:var(--radius-md);flex:1;padding:.75rem;font-size:1rem}.generate-copy{margin-bottom:1.5rem}.generate-section-spaced{margin-top:1rem}.generate-section-borderless{margin-bottom:0;padding-bottom:0}.generate-template-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;padding-bottom:1rem;display:grid}.generate-template-card{border:1px solid var(--border-color);background:var(--input-bg);color:var(--text-color);cursor:pointer;text-align:left;border-radius:12px;flex-direction:column;gap:.25rem;padding:1.25rem;transition:all .2s;display:flex}.generate-template-card:hover{border-color:var(--accent-color);transform:translateY(-2px)}.generate-template-card-header{color:var(--accent-color);justify-content:space-between;gap:1rem;font-size:1rem;font-weight:700;display:flex}.generate-template-card-confirm{color:var(--red);font-size:.8rem}.generate-template-card-meta{color:var(--text-muted);font-size:.75rem}.generate-select--sm{min-width:100px}.generate-select--md{min-width:150px}.generate-text-input{border:1px solid var(--border-color);background:var(--input-bg);width:100%;color:var(--text-color);border-radius:4px;padding:.5rem}.generate-value-highlight{color:var(--accent-color);margin-right:.5rem;font-weight:700}.generate-range{width:100px}.generate-subsection{margin-top:.5rem}.generate-submit-btn{width:100%;margin-top:1rem;padding:1rem;font-size:1rem}@media (width>=900px){.settings-controls{grid-template-columns:1fr 1fr;align-items:start;gap:2rem;display:grid}.settings-section:last-child{grid-column:span 2}}#editorOverlay .settings-content{border:none;border-radius:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;padding:0}.editor-modal{background:var(--panel-color);flex-direction:column;height:100%;padding:0;display:flex;overflow:hidden}.modal-header,.modal-header-shared{border-bottom:1px solid var(--border-color);background:var(--panel-color);flex-shrink:0;justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.modal-header h2,.modal-header-shared h2{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin:0;font-size:.9rem}.editor-modal-header{align-items:flex-start;gap:1rem;padding:1rem 1rem .85rem}.editor-modal-header h2{color:var(--text-color);text-transform:none;letter-spacing:normal}.editor-modal-header-copy{flex-direction:column;gap:.35rem;min-width:0;display:flex}.editor-modal-kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:0;font-size:.68rem;font-weight:700}.editor-modal-summary{color:var(--text-muted);max-width:56rem;margin:0;font-size:.9rem;line-height:1.45}.editor-modal-header-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.65rem;margin-left:auto;display:flex}.editor-toolbar-btn{min-height:40px}.editor-action-container{position:relative}.editor-action-trigger{background:var(--input-bg);color:var(--text-color);border:1px solid var(--border-color);box-shadow:none;border-radius:999px;padding:.55rem .9rem}.editor-action-trigger:hover{background:var(--card-bg-hover);border-color:color-mix(in srgb, var(--accent-color), transparent 35%)}.editor-action-trigger.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.editor-action-trigger-label{font-size:.84rem}.editor-action-menu{background:color-mix(in srgb, var(--panel-color), var(--accent-color) 3%);border:1px solid color-mix(in srgb, var(--border-color), var(--accent-color) 18%);border-radius:18px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.55rem;min-width:min(32rem,100vw - 2rem);max-width:min(36rem,100vw - 2rem);padding:.9rem;top:calc(100% + .65rem);bottom:auto;right:0;box-shadow:0 20px 40px #0206173d}.editor-action-menu>button{background:color-mix(in srgb, var(--input-bg), var(--card-bg) 30%);border:1px solid color-mix(in srgb, var(--border-color), white 10%);letter-spacing:.01em;border-radius:12px;min-height:44px;padding:.75rem .85rem;font-weight:600}.editor-action-menu>button:hover{border-color:color-mix(in srgb, var(--accent-color), transparent 28%);background:color-mix(in srgb, var(--input-bg), var(--accent-color) 10%)}.editor-action-menu .menu-divider{opacity:.32}.editor-action-menu .menu-section-header{color:var(--text-muted);padding-top:.3rem;padding-bottom:.15rem}.editor-modal-toolbar{border-bottom:1px solid var(--border-color);background:color-mix(in srgb, var(--panel-color), black 3%);flex-wrap:wrap;align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.editor-modal-stats{flex-wrap:wrap;gap:.5rem;display:flex}.editor-stat-chip{border:1px solid var(--border-color);background:var(--input-bg);min-height:30px;color:var(--text-muted);border-radius:999px;align-items:center;padding:.25rem .7rem;font-size:.78rem;display:inline-flex}@media (width<=700px){.editor-modal-header-actions{justify-content:flex-start;width:100%;margin-left:0}.editor-toolbar-btn,.editor-action-container{width:100%}.editor-action-trigger{justify-content:space-between;width:100%}.editor-action-menu{min-width:100%;max-width:100%;left:0;right:0}}.close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:1.5rem;line-height:1}.close-btn:hover{color:var(--text-color)}.midi-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}.midi-ch-group label{color:var(--text-muted);margin-bottom:.3rem;font-size:.75rem;display:block}.settings-help{border-top:1px solid var(--border-color);margin-top:1.5rem;padding-top:1.5rem}.settings-help summary{cursor:pointer;color:var(--text-color);justify-content:space-between;align-items:center;font-weight:700;list-style:none;display:flex}.settings-help summary::-webkit-details-marker{display:none}.summary-arrow{color:var(--accent-color);font-size:.8em}.help-content{color:var(--text-secondary);margin-top:1rem;font-size:.9rem;line-height:1.6}.help-card{background:rgba(var(--accent-color-rgb), .1);border:1px solid rgba(var(--accent-color-rgb), .2);border-radius:8px;padding:1rem}.help-card h4{color:var(--accent-color);margin-top:0;margin-bottom:.5rem}.manual-link{color:#fff;background:var(--accent-color);border-radius:6px;margin-top:.5rem;padding:.5rem 1rem;font-weight:700;text-decoration:none;display:inline-block}.manual-content{color:var(--text-secondary);line-height:1.6}.manual-content h1{color:var(--text-color);border-bottom:2px solid var(--accent-color);margin-top:0;margin-bottom:1.5rem;padding-bottom:.5rem;font-size:1.8rem}.manual-content h2{color:var(--accent-color);border-bottom:1px solid var(--border-color);margin-top:2rem;margin-bottom:1rem;padding-bottom:.3rem;font-size:1.4rem}.manual-content h3{color:var(--text-color);margin-top:1.5rem;margin-bottom:.75rem;font-size:1.1rem}.manual-content p{margin-bottom:1rem}.manual-content ul,.manual-content ol{margin-bottom:1rem;padding-left:1.5rem}.manual-content li{margin-bottom:.5rem}.manual-content code{background:var(--input-bg);font-family:var(--font-mono);color:var(--accent-color);border-radius:4px;padding:.2rem .4rem;font-size:.9em}.manual-content hr{border:none;border-top:1px solid var(--border-color);margin:2rem 0}.table-container{border:1px solid var(--border-color);background:#0003;border-radius:8px;width:100%;margin:1.5rem 0;overflow-x:auto}.notation-table{border-collapse:collapse;width:100%;min-width:500px;font-size:.85rem}.notation-table th,.notation-table td{text-align:left;border-bottom:1px solid var(--border-color);padding:.75rem 1rem}.notation-table th{color:var(--text-color);background:var(--input-bg);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:700}.notation-table tr:last-child td{border-bottom:none}.notation-table td strong{color:var(--text-color)}.app-version-display{text-align:center;color:var(--text-muted);opacity:.7;margin-top:1.5rem;font-size:.8rem}.editor-scroll-area{background:color-mix(in srgb, var(--bg-color), black 10%);-webkit-overflow-scrolling:touch;flex-grow:1;padding:1rem;overflow-y:auto}.modal-footer{border-top:1px solid var(--border-color);background:var(--panel-color);flex-shrink:0;padding:1rem;position:relative}.footer-primary-actions{flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-bottom:.75rem;display:flex}.footer-main-btn{flex-grow:1;justify-content:center;padding:.5rem;font-size:.85rem}.section-list{flex-direction:column;gap:.9rem;padding-bottom:1.5rem;display:flex}@media (width>=900px){#editorOverlay .settings-content{border:1px solid var(--border-color);border-radius:20px;width:min(100vw - 32px,1680px);max-width:min(100vw - 32px,1680px);height:calc(100vh - 32px);max-height:calc(100vh - 32px)}.editor-modal{height:100%;margin:0}.editor-modal-header{padding:1.1rem 1.4rem .95rem}.editor-modal-header h2{font-size:1.25rem}.editor-modal-toolbar{padding:.85rem 1.4rem}.editor-scroll-area{padding:1.25rem 1.4rem 1.5rem}.section-list{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-content:start;gap:1rem;display:grid}.section-card{height:fit-content;margin:0;padding:1rem;box-shadow:0 4px 6px -1px #0000001a}.section-prog-input{min-height:92px}}.settings-section{border-bottom:1px solid var(--border-color);margin-bottom:1.5rem;padding-bottom:1rem}.settings-section--spaced{margin-top:1rem}.settings-section--borderless{border-bottom:none}.settings-section--no-padding{padding-bottom:0}.settings-action-center{justify-content:center}.settings-install-btn{justify-content:center;display:none}.settings-stepper-column{align-items:flex-end}.settings-estimated-time{color:var(--accent-color);font-weight:500}.settings-reset-panel{background:#ef44441a;border:1px solid #ef444433;border-radius:8px;flex-direction:column;grid-column:1/-1;gap:.5rem;padding:.5rem;display:flex}.settings-reset-copy{color:var(--text-color);text-align:center;font-size:.8rem}.settings-reset-actions{gap:.5rem;display:flex}.settings-reset-btn{flex:1;padding:.4rem;font-size:.8rem}.settings-reset-btn--primary{background:var(--red);color:#fff;border:none;font-weight:700}.settings-reset-btn--secondary{border-color:var(--border-color);color:var(--text-color);background:0 0}.settings-manual-btn{cursor:pointer;text-align:center;border:none;width:100%}.manual-modal{max-width:900px;height:90vh}.manual-modal-footer{margin-top:2rem}.settings-section h3{color:var(--text-secondary);text-transform:uppercase;margin-top:0;margin-bottom:1rem;font-size:.9rem}.setting-item{margin-bottom:1rem}.setting-label{justify-content:space-between;margin-bottom:.4rem;font-size:.9rem;display:flex}select,input[type=range]{accent-color:var(--accent-color)}#midiControls input[type=number]{background:var(--input-bg);border:1px solid var(--border-color);width:100%;color:var(--text-color);text-align:center;border-radius:4px;padding:.3rem;font-size:.9rem}#midiLatencyValue{font-family:monospace;font-weight:700}#midiOutputSelect{background:var(--input-bg);border:1px solid var(--border-color);width:100%;color:var(--text-color);border-radius:4px;padding:.5rem}.section-card{background:color-mix(in srgb, var(--card-bg), black 4%);border:1px solid color-mix(in srgb, var(--border-color), white 8%);transition:border-color var(--anim-normal) var(--anim-ease), box-shadow var(--anim-normal) var(--anim-ease), transform var(--anim-normal) var(--anim-ease);animation:fade-in-up var(--anim-normal) var(--anim-ease) forwards;border-radius:16px;padding:.95rem;position:relative;overflow:visible}@keyframes fade-in-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:fade-in-up var(--anim-normal) var(--anim-ease) forwards}.section-card:hover{border-color:color-mix(in srgb, var(--accent-color), transparent 30%);transform:translateY(-1px);box-shadow:0 16px 32px #0206172e}.drag-handle{border:1px solid var(--border-color);background:var(--input-bg);cursor:grab;min-width:28px;height:28px;color:var(--text-muted);letter-spacing:-.18em;-webkit-user-select:none;user-select:none;border-radius:999px;justify-content:center;align-items:center;padding:0 .3rem;font-size:.95rem;transition:color .2s;display:inline-flex}.drag-handle:hover{color:var(--accent-color)}.drag-handle:active,.section-card:active{cursor:grabbing}.section-card.dragging{opacity:.45;cursor:move}.section-card.drag-over{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-color-alpha);z-index:10;transform:scale(1.01)}.section-actions{border:1px solid var(--border-color);background:var(--input-bg);border-radius:999px;flex-wrap:wrap;align-items:center;gap:.2rem;padding:.18rem;display:flex}.section-move-btn,.section-duplicate-btn,.section-kebab-btn,.section-delete-btn,.section-link-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:1rem;transition:all .2s;display:flex}.section-move-btn:hover,.section-duplicate-btn:hover,.section-kebab-btn:hover,.section-link-btn:hover{color:var(--text-color);background:color-mix(in srgb, var(--card-bg), white 8%);border-color:color-mix(in srgb, var(--accent-color), transparent 60%)}.section-link-btn.active{color:var(--accent-color);background:color-mix(in srgb, var(--accent-color), transparent 85%);border-color:color-mix(in srgb, var(--accent-color), transparent 40%);box-shadow:none}.section-link-btn.active:hover{background:color-mix(in srgb, var(--accent-color), transparent 78%)}.section-delete-btn:hover{color:var(--red);background:#ef44441a}.section-card.linked{border-color:color-mix(in srgb, var(--accent-color), transparent 38%);background:color-mix(in srgb, var(--card-bg), var(--accent-color) 6%);position:relative}.section-card.linked:before{content:none}.section-card:has(+.section-card.linked){z-index:var(--z-base)}.section-header{flex-direction:column;gap:.65rem;margin-bottom:.75rem;display:flex}.section-title-row{align-items:center;gap:.75rem;width:100%;display:flex}.section-title-meta{flex-shrink:0;align-items:center;gap:.45rem;display:flex}.section-status-chip{background:color-mix(in srgb, var(--accent-color), transparent 86%);border:1px solid color-mix(in srgb, var(--accent-color), transparent 56%);min-height:28px;color:var(--accent-color);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;align-items:center;padding:.1rem .55rem;font-size:.68rem;font-weight:700;display:inline-flex}.section-controls-row{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem;width:100%;display:flex}.section-label-input{border:none;border-bottom:1px solid var(--border-color);width:100%;color:var(--text-color);background:0 0;padding:.15rem 0;font-size:1rem;font-weight:700;transition:border-color .2s}.section-label-input:focus{border-bottom-color:var(--accent-color);outline:none}.symbol-dropdown{background:var(--panel-color);border:1px solid var(--border-color);z-index:var(--z-floating);border-radius:8px;grid-template-columns:repeat(4,1fr);gap:.4rem;min-width:180px;padding:.5rem;display:grid;position:absolute;top:100%;right:0;box-shadow:0 8px 16px #00000080}.symbol-btn{background:var(--input-bg);border:1px solid var(--border-color);cursor:pointer;text-align:center;color:var(--text-color);border-radius:4px;padding:.4rem;font-size:.9rem;transition:all .1s}.symbol-btn:hover{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.symbol-row{background:var(--panel-color);border-bottom:1px solid var(--border-color);z-index:1;scrollbar-width:none;gap:.4rem;padding:.4rem .25rem;display:flex;position:sticky;top:0;overflow-x:auto}.symbol-row::-webkit-scrollbar{display:none}.symbol-row .symbol-btn{flex-shrink:0}@media (pointer:coarse){.symbol-btn{min-width:44px;min-height:44px;font-size:1rem}}.section-prog-input{background:var(--input-bg);border:1px solid var(--border-color);width:100%;color:var(--text-color);resize:vertical;min-height:88px;transition:border-color var(--anim-normal), box-shadow var(--anim-normal);border-radius:12px;padding:.75rem;font-family:monospace;font-size:1rem;line-height:1.45}.section-prog-input.mutated{animation:mutated-pulse 1s var(--anim-ease)}@keyframes mutated-pulse{0%{border-color:var(--accent-color);box-shadow:0 0 0 0 var(--accent-color-alpha)}50%{border-color:var(--accent-hover);background:rgba(var(--chords-color-rgb), .1);box-shadow:0 0 0 10px #0000}to{border-color:var(--border-color);box-shadow:0 0 #0000}}.section-prog-input:focus{border-color:var(--accent-color);outline:none}.section-settings-row{flex-wrap:wrap;align-items:center;gap:.45rem;margin:0;display:flex}.section-setting-item,.form-control-compact{background:var(--input-bg);border:1px solid var(--border-color);border-radius:999px;align-items:center;height:34px;padding:.1rem .55rem;display:flex}.section-repeat-input{width:2rem;color:var(--text-color);text-align:center;background:0 0;border:none;padding:0;font-size:.88rem;font-weight:700}.section-repeat-input:focus{outline:none}.section-key-select,.section-ts-select{background:var(--input-bg);border:1px solid var(--border-color);border-radius:999px;width:auto;min-width:92px;height:34px;padding:0 .7rem;font-size:.78rem}.section-setting-item .setting-label{color:var(--text-muted);margin-right:.2rem;font-size:.72rem}.section-group{border:1px solid color-mix(in srgb, var(--border-color), var(--accent-color) 18%);background:color-mix(in srgb, var(--panel-color), var(--accent-color) 3%);isolation:isolate;border-radius:20px;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;width:100%;height:fit-content;padding:.85rem;display:grid;box-shadow:0 18px 36px #0206171f}.section-group .section-card{box-shadow:none;z-index:0;min-width:0;height:100%;margin:0}.section-group .section-card:hover{z-index:10;box-shadow:0 16px 32px #02061729}@media (width<=900px){.section-group{box-shadow:none;background:0 0;border:none;border-radius:0;flex-direction:column;gap:.75rem;padding:0;display:flex}.section-group .section-card{height:auto}}.instrument-selection-grid{border:1px solid var(--border-color);background:#0003;border-radius:8px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem;margin-bottom:1.5rem;padding:1rem;display:grid}@media (width<=400px){.instrument-selection-grid{grid-template-columns:1fr}}.instrument-toggle-row{cursor:pointer;flex-direction:row;align-items:center;gap:.75rem;display:flex}.instrument-toggle-container{flex-shrink:0;display:flex}.share-modal-body{padding:var(--space-5)}.share-duration-value{color:var(--accent-color);margin-right:.5rem;font-weight:700}.share-destination-stack{gap:1.5rem;margin-top:1rem}.share-card{margin:0;padding:1.25rem}.share-card--accent{border-color:rgba(var(--accent-color-rgb), .3)}.share-card-title{margin-bottom:.5rem}.share-card-copy{margin-bottom:1rem}.share-actions{gap:.75rem}.share-action-btn{padding:.75rem}.share-action-btn--accent{border-color:var(--accent-color);color:var(--accent-color)}.share-filename-input{background:var(--input-bg);border:1px solid var(--border-color);color:var(--text-color);border-radius:4px;padding:.5rem}.instrument-toggle-label{white-space:nowrap;font-weight:500}.editor-action-trigger{justify-content:center;padding:.75rem 1rem}.editor-action-trigger-icon{font-size:1.2rem}.editor-clear-confirm{background:#ff000014;border:1px solid #ef444438;border-radius:10px;grid-column:1/-1;margin:0;padding:.7rem}.editor-clear-confirm-copy{color:var(--text-color);text-align:center;margin-bottom:.5rem;font-size:.8rem}.editor-clear-confirm-actions{gap:.5rem;display:flex}.editor-clear-confirm-btn{cursor:pointer;border:none;border-radius:8px;flex:1;min-height:36px;padding:.4rem .55rem;font-size:.8rem}.editor-clear-confirm-btn--danger{background:var(--red);color:#fff}.editor-clear-confirm-btn--secondary{color:var(--text-color);border:1px solid var(--border-color);background:0 0}.divider-top{border-top:1px solid var(--border-color);padding-top:var(--space-4);margin-top:var(--space-4)}.power-btn{background:var(--input-bg);border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;width:32px;height:32px;transition:color var(--anim-fast) var(--anim-ease), background-color var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease), transform var(--anim-fast) var(--anim-ease);font-size:var(--font-base);border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex}.power-btn:hover{color:var(--text-color);border-color:var(--text-muted);background:#ffffff0d}.power-btn.active{color:var(--green);border-color:var(--green);background:#8599001a;box-shadow:0 0 10px #85990033}.power-btn:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}.panel{background:var(--panel-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-5);position:relative;overflow:hidden}.panel-header{margin-bottom:var(--space-5);justify-content:space-between;align-items:center;display:flex}.panel-header h2{font-size:var(--font-lg);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin:0}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.setting-group{margin-bottom:var(--space-6);padding-bottom:var(--space-2)}.setting-group-title{margin-top:0;margin-bottom:var(--space-4);font-size:var(--font-sm);color:var(--accent-color);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-color);padding-bottom:var(--space-2)}.setting-row{justify-content:space-between;align-items:center;gap:var(--space-5);margin-bottom:var(--space-4);flex-wrap:wrap;min-height:2.5rem;display:flex}.setting-row:last-child{margin-bottom:0}.setting-info{gap:var(--space-1);flex-direction:column;flex:1;min-width:120px;display:flex}.setting-label{font-size:var(--font-sm);color:var(--text-color);font-weight:500}.setting-description{font-size:var(--font-xs);color:var(--text-muted);line-height:1.4}.setting-control{align-items:center;gap:var(--space-3);min-width:fit-content;display:flex}.setting-value-display{font-size:var(--font-sm);color:var(--accent-color);font-family:var(--font-mono);text-align:right;min-width:3.5rem}.toggle-switch{cursor:pointer;width:36px;height:20px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{background-color:var(--input-bg);border:1px solid var(--border-color);transition:background-color var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease);border-radius:999px;position:absolute;inset:0}.toggle-slider:before{content:"";background-color:var(--text-muted);width:14px;height:14px;transition:transform var(--anim-fast) var(--anim-ease), background-color var(--anim-fast) var(--anim-ease);border-radius:50%;position:absolute;bottom:2px;left:2px}input:checked+.toggle-slider{background-color:var(--accent-color);border-color:var(--accent-color)}input:checked+.toggle-slider:before{background-color:#fff;transform:translate(16px)}input:focus-visible+.toggle-slider{outline:2px solid var(--accent-color);outline-offset:2px}.setting-control>select{padding:var(--space-2) var(--space-3);font-size:var(--font-sm);width:220px}.setting-control input[type=range]{width:120px}.grid-actions{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.form-control-compact{background:var(--input-bg);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:0 var(--space-2);align-items:center;height:28px;display:flex}.smart-tab-layout{gap:var(--space-3);padding:var(--space-1) 0;flex-direction:column;display:flex}.smart-tab-label{font-size:var(--font-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.chip-grid{gap:var(--space-2);flex-wrap:wrap;display:flex}.notification-box{background:var(--panel-color);border:1px solid var(--border-color);color:var(--text-color);z-index:var(--z-modal);border-radius:12px;align-items:center;gap:1rem;min-width:280px;max-width:90vw;padding:.75rem 1.5rem;display:flex;position:fixed;bottom:2rem;left:50%;transform:translate(-50%);box-shadow:0 10px 25px #00000080}.flex-row{align-items:center;gap:.5rem;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-col{flex-direction:column;gap:.5rem;display:flex}.grid-2-col{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.w-full{width:100%}.text-mini-muted{color:var(--text-muted);font-size:.75rem}.danger-btn{color:var(--error-color);background:#ef44441a;border-color:#ef444433}.update-banner{background:var(--panel-color);border:1px solid var(--accent-color);z-index:var(--z-toast);border-radius:8px;align-items:center;gap:1rem;padding:1rem;transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)translateY(-200%);box-shadow:0 4px 12px #0000004d}.update-banner.show{transform:translate(-50%)translateY(0)}.update-banner span{font-size:.9rem;font-weight:500}#updateRefreshBtn{background:var(--accent-color);color:#fff;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-weight:700;font-size:var(--font-sm);cursor:pointer;border:none}#updateRefreshBtn:hover{background:var(--accent-hover)}#updateRefreshBtn:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}@media (width<=600px){.update-banner{text-align:center;flex-direction:column;align-items:stretch;top:10px;left:10px;right:10px;transform:translateY(-200%)}.update-banner.show{transform:translateY(0)}}.viz-graph-area{background:color-mix(in srgb, var(--surface-sunken), var(--panel-color) 22%);border:1px solid color-mix(in srgb, var(--border-color), transparent 20%);min-height:500px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-color), transparent 92%);border-radius:8px;flex-direction:column;flex-grow:1;display:flex;position:relative;overflow:hidden}#unifiedVizContainer{flex-grow:1;width:100%}.viz-legend{color:var(--text-secondary);background:color-mix(in srgb, var(--panel-color), var(--surface-sunken) 50%);border:1px solid color-mix(in srgb, var(--border-color), transparent 12%);border-radius:8px;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:.25rem;padding:.75rem .9rem;font-size:.8rem;display:flex}.legend-group{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.legend-label{color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em;margin-right:.25rem;font-size:.7rem;font-weight:700}.legend-item{align-items:center;gap:.4rem;display:flex}.legend-swatch{border:1px solid color-mix(in srgb, var(--text-color), transparent 78%);border-radius:2px;width:10px;height:10px}.swatch-root{background:var(--accent-color)}.swatch-third{background:var(--green)}.swatch-fifth{background:var(--orange)}.swatch-seventh{background:var(--violet)}.swatch-bass{background:var(--success-color)}.swatch-chords{background:var(--accent-color)}.swatch-harmony{background:var(--harmony-color)}.swatch-drums{background:var(--yellow)}.swatch-soloist{background:var(--soloist-color)}@media (width<=700px){.workspace-view--visuals #panel-visualizer{gap:.35rem}.workspace-view--visuals #panel-visualizer .panel-header{padding-bottom:.25rem}.workspace-view--visuals .workspace-visualizer-area,.workspace-view--visuals .viz-graph-area{min-height:clamp(170px,32dvh,240px)}.viz-legend{align-items:flex-start;gap:.3rem .65rem;padding:.45rem .6rem;font-size:.7rem}.legend-group{flex:calc(50% - .35rem);align-items:flex-start;gap:.35rem .5rem;min-width:0}.legend-item{gap:.24rem}.legend-label{font-size:.58rem}.legend-swatch{width:7px;height:7px}}.toast{background:var(--success-color);color:#fff;letter-spacing:.02em;pointer-events:auto;animation:toast-in var(--anim-normal) var(--anim-bounce) forwards;border-radius:20px;padding:.6rem 1.25rem;font-size:.9rem;font-weight:700;box-shadow:0 10px 15px -3px #0000004d}.toast.closing{animation:toast-out var(--anim-normal) var(--anim-ease) forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(20px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-10px)scale(.9)}}.chart-surface{grid-template:"topbar topbar""chart rail"1fr/1fr 320px;height:100dvh;display:grid}.chart-surface__topbar{align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--border-color);background:var(--bg-color);flex-wrap:wrap;grid-area:topbar;display:flex}.chart-surface__zone{align-items:center;gap:var(--space-2);display:flex}.chart-surface__zone--shape{margin-left:auto}@media (width>=1024px){.chart-surface__zone--shape,.chart-surface__zone--output{padding-left:var(--space-4);position:relative}.chart-surface__zone--shape:before,.chart-surface__zone--output:before{content:"";background:var(--border-color);width:1px;position:absolute;top:20%;bottom:20%;left:0}}.chart-surface__overflow-menu{padding:var(--space-1);gap:var(--space-1);flex-direction:column;display:flex}.chart-surface__chart{flex-direction:column;grid-area:chart;min-height:0;display:flex}.chart-surface__chart .display-area{align-content:safe center;height:100%;min-height:0;max-height:none;margin-bottom:0}.chart-surface__rail{grid-area:rail;min-height:0;overflow:hidden auto}@media (width<=1023px){.chart-surface{grid-template:"topbar""chart"1fr"rail"/1fr}}@media (width<=639px){.chart-surface__rail{white-space:nowrap;overflow:auto hidden}}@media (width<=640px){.chart-surface{grid-template:"topbar""chart"1fr/1fr}.chart-surface__chart{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}.chart-surface__topbar{row-gap:var(--space-1);column-gap:var(--space-2);grid-template-columns:1fr auto;grid-template-areas:"play output""shape shape";display:grid}.chart-surface__zone--play{grid-area:play}.chart-surface__zone--shape{grid-area:shape;justify-content:flex-end;margin-left:0}.chart-surface__zone--output{grid-area:output}}.mobile-action-bar{z-index:var(--z-sidebar);align-items:stretch;gap:var(--space-1);padding:var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom,0px));background:var(--panel-color);border-top:1px solid var(--border-color);display:none;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #0003}@media (width<=640px){.mobile-action-bar{display:flex}}.mobile-action-bar__btn{min-height:56px;padding:var(--space-1);color:var(--text-secondary);cursor:pointer;transition:background var(--anim-fast) var(--anim-ease), color var(--anim-fast) var(--anim-ease);background:0 0;border:0;border-radius:12px;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:.15rem;font-size:.7rem;font-weight:600;display:flex}.mobile-action-bar__btn:hover{color:var(--text-primary)}.mobile-action-bar__btn.is-active{color:var(--accent-color);background:color-mix(in srgb, var(--accent-color), transparent 88%)}.mobile-action-bar__icon{font-size:1.25rem;line-height:1}.mobile-action-bar__label{font-size:.7rem;line-height:1}.mobile-mix-sheet.workspace-studio-surface--modal{width:min(100vw,32rem);max-height:88dvh;bottom:calc(64px + env(safe-area-inset-bottom,0px) + var(--space-2));top:auto;left:50%;transform:translate(-50%)}.mobile-mix-sheet .instrument-rail{box-shadow:none;background:0 0;border:0;padding:0}.mobile-mix-sheet .workspace-studio-live-mix-header>div:first-child{display:none}.viz-overlay{z-index:var(--z-modal);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:#000000d9;flex-direction:column;display:flex;position:fixed;inset:0}.viz-overlay__header{padding:var(--space-2) var(--space-4);flex-shrink:0;justify-content:flex-end;display:flex}.viz-overlay__body{min-height:0;padding:0 var(--space-4) var(--space-4);gap:var(--space-3);flex-direction:column;flex:1;display:flex}.viz-overlay__body .viz-graph-area{flex:1;min-height:0}.chart-surface__shared-pill{background:var(--accent-color);color:#fff;white-space:nowrap;border-radius:999px;align-items:center;gap:.35rem;padding:.25rem .6rem;font-size:.75rem;line-height:1;display:flex}.chart-surface__shared-pill button{color:inherit;cursor:pointer;background:0 0;border:none;padding:0 .1rem;font-size:.9rem;line-height:1}.instrument-rail--vertical .workspace-studio-live-mix-header{align-items:stretch;gap:var(--space-2);flex-direction:column}.instrument-rail--vertical .workspace-studio-live-mix-header>div:first-child .workspace-kicker{display:none}.instrument-rail--vertical .workspace-studio-live-mix-tools{justify-content:flex-start;margin-left:0}.instrument-rail--vertical .workspace-studio-mix-row-copy p{display:none}.instrument-rail--horizontal{border-radius:0;flex-direction:row;align-items:stretch;gap:0;padding:0;display:flex;overflow:hidden}.instrument-rail--horizontal .workspace-studio-live-mix-header,.instrument-rail--horizontal .workspace-studio-panel-genre,.instrument-rail--horizontal .workspace-studio-mixer-accordion{display:none}.instrument-rail--horizontal .workspace-studio-live-mix-rows{gap:var(--space-2);padding:var(--space-2);flex-direction:row;flex:1;align-items:stretch;display:flex;overflow:auto hidden}.instrument-rail--horizontal .workspace-studio-mix-row{justify-content:space-between;align-items:center;gap:var(--space-1);padding:var(--space-2);text-align:center;flex-direction:column;flex-shrink:0;min-width:72px;display:flex}.instrument-rail--horizontal .workspace-studio-mix-row-main{align-items:center;gap:var(--space-1);flex-direction:column;display:flex}.instrument-rail--horizontal .workspace-studio-mix-row-copy h3{font-size:.72rem}.instrument-rail--horizontal .workspace-studio-mix-row-actions{align-items:center;gap:var(--space-1);flex-direction:column;display:flex}.workspace-kicker{color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin:0 0 .25rem;font-size:.72rem;font-weight:700}.workspace-studio-live-mix{--studio-mix-grid-gap:.8rem;--studio-mix-card-width:20rem;gap:1rem;position:relative;overflow:visible;container-type:inline-size}.workspace-studio-live-mix-header{flex-direction:column;gap:.15rem;display:flex}.workspace-studio-live-mix-header h2{margin:0}.workspace-studio-panel-genre{width:100%}.workspace-studio-live-mix-rows{gap:var(--studio-mix-grid-gap);display:grid}.workspace-instrument-state{border:1px solid var(--border-color);background:var(--input-bg);color:var(--text-muted);white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;padding:.3rem .6rem;font-size:.74rem;font-weight:700;display:inline-flex}.workspace-instrument-state--on{border-color:color-mix(in srgb, var(--green), transparent 40%);background:color-mix(in srgb, var(--green), transparent 88%);color:var(--green)}.workspace-instrument-state--queued{border-color:color-mix(in srgb, var(--yellow), transparent 40%);background:color-mix(in srgb, var(--yellow), transparent 88%);color:var(--yellow)}.workspace-instrument-state--off{border-color:var(--border-color);background:var(--input-bg);color:var(--text-muted)}.workspace-studio-active-count{border:1px solid var(--border-color);background:var(--input-bg);color:var(--text-muted);border-radius:999px;justify-content:center;align-items:center;padding:.38rem .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.workspace-studio-mix-row{--studio-row-accent:var(--accent-color);border:1px solid color-mix(in srgb, var(--studio-row-accent), transparent 70%);background:color-mix(in srgb, var(--panel-color), var(--studio-row-accent) 3%);box-shadow:var(--shadow-sm);transition:transform var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease);border-radius:16px;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 1rem;display:flex;position:relative;overflow:visible}@container (width>=41rem){.workspace-studio-live-mix-rows{width:min(100%, calc((2 * var(--studio-mix-card-width)) + var(--studio-mix-grid-gap)));grid-template-columns:repeat(2, minmax(0, var(--studio-mix-card-width)));justify-content:center;align-items:stretch;margin-inline:auto}.workspace-studio-mix-row{gap:.75rem;min-height:0;padding:.82rem .88rem}.workspace-studio-mix-row-main{gap:.75rem}.workspace-studio-mix-row-icon{border-radius:12px;width:2.3rem;height:2.3rem;font-size:1rem}.workspace-studio-mix-row-copy h3{font-size:.94rem}.workspace-studio-mix-row-actions{gap:.35rem}.workspace-studio-live-mix .workspace-studio-mix-menu-trigger,.workspace-studio-live-mix .power-btn{width:32px;height:32px;padding:0}}.workspace-studio-mix-row.is-active{box-shadow:var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--studio-row-accent), transparent 72%)}.workspace-studio-mix-row:not(.is-active):not(.is-menu-open){border-color:var(--border-color);background:color-mix(in srgb, var(--panel-color), transparent 10%)}.workspace-studio-mix-row:not(.is-active):not(.is-menu-open) .workspace-studio-mix-row-icon{opacity:.5;filter:grayscale(.6)}.workspace-studio-mix-row:not(.is-active):not(.is-menu-open) .workspace-studio-mix-row-copy h3{color:var(--text-muted)}.workspace-studio-mix-row.is-menu-open{z-index:calc(var(--z-panel-header) + 2);border-color:color-mix(in srgb, var(--studio-row-accent), transparent 30%);box-shadow:var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--studio-row-accent), transparent 72%);transform:translateY(-1px)}.workspace-studio-mix-row:hover{transform:translateY(-1px)}.workspace-studio-mix-row--groove{--studio-row-accent:var(--yellow)}.workspace-studio-mix-row--bass{--studio-row-accent:var(--success-color)}.workspace-studio-mix-row--chords{--studio-row-accent:var(--accent-color)}.workspace-studio-mix-row--harmony{--studio-row-accent:var(--harmony-color)}.workspace-studio-mix-row--soloist{--studio-row-accent:var(--soloist-color)}.workspace-studio-mix-row-main{flex:auto;align-items:center;gap:.9rem;min-width:0;display:flex}.workspace-studio-mix-row-icon{border:1px solid color-mix(in srgb, var(--studio-row-accent), transparent 65%);background:color-mix(in srgb, var(--studio-row-accent), transparent 88%);border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:2.6rem;height:2.6rem;font-size:1.05rem;display:inline-flex;box-shadow:inset 0 1px #ffffff0d}.workspace-studio-mix-row-copy{align-items:center;min-width:0;display:flex}.workspace-studio-mix-row-copy h3{color:var(--studio-row-accent);margin:0;font-size:.98rem}.workspace-studio-mix-row-actions{flex-shrink:0;align-items:center;gap:.45rem;display:flex}.workspace-studio-mix-menu-trigger{width:36px;height:36px;color:var(--text-muted);border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:.9rem;display:inline-flex}.workspace-studio-mix-menu-trigger:hover{color:var(--studio-row-accent);border-color:color-mix(in srgb, var(--studio-row-accent), transparent 55%);background:color-mix(in srgb, var(--studio-row-accent), transparent 92%)}.workspace-studio-mix-menu-trigger.is-open{color:var(--studio-row-accent);border-color:color-mix(in srgb, var(--studio-row-accent), transparent 35%);background:color-mix(in srgb, var(--studio-row-accent), transparent 90%)}.workspace-studio-surface-root{position:relative}.workspace-studio-mixer-accordion{border-top:1px solid var(--border-color);margin-top:.25rem}.workspace-studio-mixer-accordion-trigger{width:100%;color:var(--text-color);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:.5rem;padding:.7rem .25rem;font-size:.82rem;font-weight:700;display:flex}.workspace-studio-mixer-accordion-trigger:hover{color:var(--text-color);background:0 0}.workspace-studio-mixer-accordion-trigger .workspace-studio-active-count{margin-left:auto;padding:.15rem .55rem;font-size:.72rem}.workspace-studio-mixer-accordion-caret{color:var(--text-muted);font-size:.9rem;transition:transform .16s}.workspace-studio-mixer-accordion.is-open .workspace-studio-mixer-accordion-caret{transform:rotate(180deg)}.workspace-studio-mixer-accordion-body{padding-bottom:.5rem}.workspace-studio-genre-button{border:1px solid color-mix(in srgb, var(--accent-color), transparent 55%);background:color-mix(in srgb, var(--accent-color), transparent 92%);width:100%;box-shadow:var(--shadow-sm);transition:transform var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease);border-radius:12px;align-items:center;gap:.6rem;padding:.7rem 1rem;display:flex}.workspace-studio-genre-button:hover{border-color:color-mix(in srgb, var(--accent-color), transparent 35%);transform:translateY(-1px)}.workspace-studio-genre-button:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px;border-color:color-mix(in srgb, var(--accent-color), transparent 35%)}.workspace-studio-genre-button.is-open{border-color:color-mix(in srgb, var(--accent-color), transparent 32%);background:color-mix(in srgb, var(--accent-color), transparent 88%);box-shadow:var(--shadow-md)}.workspace-studio-genre-button-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-size:.68rem;font-weight:700}.workspace-studio-genre-button-value{color:var(--accent-color);white-space:nowrap;font-size:.9rem;font-weight:700}.workspace-studio-genre-button-caret{color:var(--accent-color);font-size:.95rem;line-height:1}.workspace-studio-genre-button-right{align-items:center;gap:.35rem;margin-left:auto;display:flex}.workspace-studio-surface-backdrop{-webkit-backdrop-filter:blur(2px);z-index:calc(var(--z-modal) - 1);background:#02061775;border:none;padding:0;position:fixed;inset:0}.workspace-studio-surface-layer{z-index:var(--z-modal);isolation:isolate;pointer-events:none;position:fixed;inset:0}.workspace-studio-surface{--studio-surface-accent:var(--accent-color);border:1px solid color-mix(in srgb, var(--studio-surface-accent), transparent 72%);background:var(--panel-color);box-shadow:0 22px 60px #02061747, 0 0 0 1px color-mix(in srgb, var(--studio-surface-accent), transparent 88%);z-index:var(--z-modal);pointer-events:auto;border-radius:20px;flex-direction:column;gap:.65rem;padding:.8rem;display:flex;position:fixed;overflow:hidden}.workspace-studio-surface--modal{width:min(94vw,32rem);max-height:min(80dvh,42rem);animation:.18s ease-out workspaceStudioSurfaceModalIn;top:50%;left:50%;transform:translate(-50%,-50%)}.workspace-studio-surface--anchored{transform-origin:100% 0;animation:.18s ease-out workspaceStudioSurfaceAnchorIn}.workspace-studio-surface--groove{--studio-surface-accent:var(--yellow)}.workspace-studio-surface--bass{--studio-surface-accent:var(--success-color)}.workspace-studio-surface--chords{--studio-surface-accent:var(--accent-color)}.workspace-studio-surface--harmony{--studio-surface-accent:var(--harmony-color)}.workspace-studio-surface--soloist{--studio-surface-accent:var(--soloist-color)}.workspace-studio-surface--mixer{--studio-surface-accent:var(--cyan)}.workspace-studio-surface-header{z-index:1;justify-content:space-between;align-items:flex-start;gap:.65rem;min-width:0;display:flex;position:relative}.workspace-studio-surface-header-copy{flex-direction:column;gap:.2rem;min-width:0;display:flex}.workspace-studio-surface-header h3{color:var(--text-color);margin:0}.workspace-studio-surface-summary{color:var(--text-muted);margin:0;font-size:.82rem;line-height:1.4}.workspace-studio-surface-meta{flex-wrap:wrap;gap:.5rem;margin-top:.15rem;display:flex}.workspace-studio-surface-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-gutter:stable;flex-direction:column;flex:auto;gap:.65rem;width:100%;min-height:0;padding-right:.1rem;scroll-padding-block-end:1rem;display:flex;overflow:auto}.workspace-studio-surface--mixer-panel .workspace-studio-surface-body{gap:.45rem}.workspace-studio-surface-close{border:1px solid var(--border-color);background:var(--input-bg);width:32px;height:32px;box-shadow:var(--shadow-sm);color:var(--text-color);z-index:2;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;font-size:1.15rem;line-height:1;display:inline-flex;position:relative}.workspace-studio-surface-close:hover{background:var(--card-bg-hover);border-color:color-mix(in srgb, var(--studio-surface-accent), transparent 55%)}.workspace-studio-surface-close:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px;border-color:color-mix(in srgb, var(--studio-surface-accent), transparent 45%)}.workspace-studio-genre-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;display:grid}.workspace-studio-genre-option{text-align:left;background:var(--card-bg);border:1px solid var(--border-color);width:100%;min-height:44px;box-shadow:var(--shadow-sm);border-radius:12px;justify-content:space-between;align-items:center;gap:.5rem;padding:.65rem .8rem;font-weight:700;display:inline-flex}.workspace-studio-genre-option:hover,.workspace-studio-genre-option:focus-visible{border-color:color-mix(in srgb, var(--accent-color), transparent 35%);transform:translateY(-1px)}.workspace-studio-genre-option.active{background:color-mix(in srgb, var(--accent-color), transparent 85%);border-color:color-mix(in srgb, var(--accent-color), transparent 35%);color:var(--accent-color)}.workspace-studio-genre-option-mark{font-size:.82rem}.workspace-studio-mixer-grid{flex-direction:column;gap:.45rem;display:flex}.workspace-studio-mixer-strip{--studio-row-accent:var(--accent-color);border:1px solid color-mix(in srgb, var(--studio-row-accent), transparent 72%);background:color-mix(in srgb, var(--panel-color), var(--studio-row-accent) 3%);box-shadow:var(--shadow-sm);border-radius:14px;grid-template-columns:minmax(0,6rem) minmax(0,1fr);align-items:center;gap:.6rem;padding:.58rem .65rem;display:grid}.workspace-studio-mixer-strip--groove{--studio-row-accent:var(--yellow)}.workspace-studio-mixer-strip--bass{--studio-row-accent:var(--success-color)}.workspace-studio-mixer-strip--chords{--studio-row-accent:var(--accent-color)}.workspace-studio-mixer-strip--harmony{--studio-row-accent:var(--harmony-color)}.workspace-studio-mixer-strip--soloist{--studio-row-accent:var(--soloist-color)}.workspace-studio-mixer-strip-heading{align-items:center;gap:.45rem;min-width:0;display:flex}.workspace-studio-mixer-strip-heading h4{color:var(--studio-row-accent);margin:0;font-size:.88rem}.workspace-studio-mixer-strip-icon{border:1px solid color-mix(in srgb, var(--studio-row-accent), transparent 65%);background:color-mix(in srgb, var(--studio-row-accent), transparent 88%);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:1.85rem;height:1.85rem;font-size:.9rem;display:inline-flex}.workspace-studio-mixer-strip-controls{gap:.3rem;min-width:0;display:grid}.workspace-studio-mixer-strip-slider{grid-template-columns:1.5rem minmax(0,1fr) 2.1rem;align-items:center;gap:.4rem;min-width:0;display:grid}.workspace-studio-mixer-strip-slider-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-size:.68rem;font-weight:700}.workspace-studio-mixer-strip-slider-value{text-align:right;min-width:0;color:var(--text-muted);font-size:.72rem;font-weight:700}.workspace-studio-mixer-accordion-body .workspace-studio-mixer-strip input[type=range]{width:100%;min-width:0;max-width:100%}.workspace-studio-surface--settings .grid-2-col{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));align-items:start;gap:.65rem}.workspace-studio-surface--settings .setting-group,.workspace-studio-surface--band-feel .setting-group,.workspace-studio-surface-card{border:1px solid color-mix(in srgb, var(--studio-surface-accent), transparent 78%);background:var(--card-bg);box-shadow:var(--shadow-sm);border-radius:16px;margin:0;padding:.72rem}.workspace-studio-surface--settings .grid-2-col>.setting-group:last-child,.workspace-studio-surface--band-feel .setting-group:last-child{border-top:1px solid color-mix(in srgb, var(--studio-surface-accent), transparent 78%);background:var(--input-bg);border-radius:16px;margin:0;padding:.72rem}.workspace-studio-surface--settings .setting-group-title,.workspace-studio-surface--band-feel .setting-group-title{letter-spacing:.1em;color:var(--text-muted);opacity:1;border-bottom:1px solid color-mix(in srgb, var(--studio-surface-accent), transparent 82%);margin-bottom:.45rem;padding-bottom:.26rem;font-size:.68rem}.workspace-studio-surface--settings .setting-row,.workspace-studio-surface--band-feel .setting-row{align-items:flex-start;gap:.38rem;min-height:0;margin-bottom:.3rem}.workspace-studio-surface--settings .setting-label{font-size:.74rem}.workspace-studio-surface--settings .setting-info,.workspace-studio-surface--band-feel .setting-info{width:100%;min-width:0}.workspace-studio-surface--settings .setting-control,.workspace-studio-surface--band-feel .setting-control{flex-wrap:wrap;flex:auto;justify-content:flex-start;width:100%;min-width:0}.workspace-studio-surface--settings .setting-value-display,.workspace-studio-surface--band-feel .setting-value-display{min-width:2.2rem;font-size:.72rem}.workspace-studio-surface--settings input[type=range],.workspace-studio-surface--band-feel input[type=range]{flex:10rem;width:100%;min-width:8rem}.workspace-studio-surface--settings select{height:30px;padding:.2rem .4rem;font-size:.76rem}.workspace-studio-surface--settings .setting-control>select,.workspace-studio-surface--band-feel .setting-control>select{flex:10rem;width:100%;min-width:0}.workspace-studio-surface--settings .divider-top{margin-top:.5rem;padding-top:.5rem}.workspace-studio-surface--settings .instrument-settings-swing-controls{flex-wrap:wrap;justify-content:flex-start;width:100%;margin-left:0}.workspace-studio-surface--settings .instrument-settings-swing-controls input[type=range]{flex:9rem}.workspace-studio-surface--settings .instrument-settings-swing-controls>select{flex:0 5rem}.workspace-studio-surface--settings .smart-tab-layout{gap:.55rem;padding:0}.workspace-studio-surface--settings .flex-between{flex-wrap:wrap;align-items:flex-start;gap:.75rem}.workspace-studio-surface--settings .button-group{flex-wrap:wrap;justify-content:flex-start;width:100%;min-width:0}.workspace-studio-surface--settings .button-group-btn{border-radius:999px;min-width:0;max-width:100%;padding:.28rem .62rem}.workspace-studio-surface-card--soloist{width:100%}.workspace-studio-surface--settings .smart-tab-label.panel-title{letter-spacing:.08em;margin:0;font-size:.7rem}@keyframes workspaceStudioSurfaceModalIn{0%{opacity:0;transform:translate(-50%,calc(12px - 50%))scale(.985)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes workspaceStudioSurfaceAnchorIn{0%{opacity:0;transform:translateY(10px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){.workspace-studio-mix-row,.workspace-studio-genre-button{transition:none;animation:none}}@media (width<=380px){h1{font-size:1rem}}@media (width<=340px){.key-controls{grid-template-columns:32px 1fr 1fr 34px 26px 26px;gap:.15rem}.header-btn{font-size:.75rem}}@media (width<=900px){input[type=range]{height:24px}.panel-header-controls{gap:.25rem}}@media (width<=1100px) and (pointer:coarse){main.app-main-layout.workspace-shell{padding:.5rem .5rem calc(92px + env(safe-area-inset-bottom));flex-direction:column;align-items:stretch;gap:.75rem;min-height:100dvh;display:flex}main.app-main-layout.workspace-shell .workspace-content{flex-direction:column;flex:auto;align-self:stretch;width:100%;max-width:none;min-height:0;display:flex}.workspace-nav{left:.5rem;right:.5rem;bottom:calc(.5rem + env(safe-area-inset-bottom));z-index:var(--z-mobile-nav);box-shadow:var(--shadow-lg);border-radius:18px;padding:.6rem;position:fixed;top:auto}.workspace-nav-header{display:none}.workspace-nav-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;display:grid}.workspace-nav-btn{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;min-height:60px;padding:.55rem .2rem}.workspace-nav-icon{font-size:1rem}.workspace-nav-label{font-size:.72rem;line-height:1.1}.workspace-view--arranger,.workspace-arranger-layout,.workspace-arranger-main,.workspace-arranger-chords{width:100%;max-width:none;min-height:0}.workspace-arranger-layout{height:calc(100dvh - 156px - 1rem);overflow:visible}.workspace-arranger-main{gap:.6rem;overflow:visible}.workspace-arranger-chords{flex:1;overflow:hidden}.workspace-arranger-chords .display-area{height:100%;max-height:none;overflow:hidden auto}}@media (width>=900px){.app-main-layout{grid-template:"arranger sidebar""visualizer sidebar""empty sidebar"1fr/1fr 28rem;align-items:stretch;gap:1rem;max-width:1800px;padding:1.5rem;display:grid}#panel-arranger{grid-area:arranger}#panel-visualizer{grid-area:visualizer}.dashboard-panel{padding:1.25rem}}@media (width>=1600px){.app-main-layout{grid-template-columns:1fr 32rem}}@media (width<=700px){.workspace-view--arranger .workspace-arranger-layout{flex-direction:column;height:calc(100dvh - 156px - .35rem);display:flex;overflow:hidden}.workspace-view--arranger .workspace-arranger-main{flex:auto;gap:.22rem}.workspace-view--arranger #panel-arranger{flex:auto;padding:.54rem .54rem .5rem}.workspace-view--arranger #panel-arranger .panel-header{flex-direction:column;align-items:stretch;gap:.26rem;padding-bottom:.18rem}.workspace-view--arranger #panel-arranger .panel-header>div{width:100%}.workspace-view--arranger #panel-arranger .workspace-kicker,.workspace-view--arranger #panel-arranger .workspace-arranger-header-title{display:none}.workspace-view--arranger #panel-arranger .panel-header-controls{justify-content:stretch;gap:.35rem;width:100%}.workspace-view--arranger #panel-arranger .workspace-arranger-controls-panel{margin-top:.12rem;padding:.24rem .28rem}.workspace-view--arranger .workspace-arranger-controls-panel{align-items:flex-start;gap:.34rem}.workspace-view--arranger .workspace-arranger-controls-main,.workspace-view--arranger .workspace-arranger-controls-actions{width:100%}.workspace-view--arranger .workspace-arranger-controls-actions{justify-content:flex-start;gap:.24rem;margin-left:0}.workspace-view--arranger .workspace-arranger-toolbar-cluster{width:100%;min-width:0}.workspace-view--arranger .workspace-arranger-controls-actions .header-btn,.workspace-view--arranger .workspace-arranger-controls-actions .workspace-toolbar-popover{width:auto;min-width:0}.workspace-view--arranger .workspace-arranger-controls-actions .header-btn,.workspace-view--arranger .workspace-arranger-controls-actions .workspace-toolbar-trigger{gap:.2rem;height:32px}.workspace-view--arranger .workspace-arranger-action-btn{padding-inline:.28rem}.workspace-view--arranger .workspace-arranger-action-btn--primary,.workspace-view--arranger .workspace-arranger-action-btn--edit,.workspace-view--arranger #shareHubBtn{padding-inline:.58rem}.workspace-view--arranger .workspace-arranger-toolbar-trigger--key{justify-content:space-between;min-width:min(10.75rem,100%)}.workspace-view--arranger .workspace-toolbar-trigger-copy{gap:.28rem}.workspace-view--arranger .workspace-toolbar-trigger-label,.workspace-view--arranger .workspace-toolbar-trigger-value{font-size:.78rem}.workspace-toolbar-panel{border-radius:12px;gap:.65rem;padding:.7rem}.workspace-toolbar-panel--seed .workspace-seed-row{justify-content:flex-start}.workspace-toolbar-panel--seed .seed-input{flex:6rem;width:min(100%,7rem)}.workspace-view--arranger .workspace-arranger-controls-panel .key-controls{justify-content:flex-start;gap:.2rem}.workspace-toolbar-panel__button{min-height:32px}.workspace-view--arranger .workspace-arranger-chords{flex:auto;min-height:0;overflow:hidden}.workspace-view--arranger .workspace-arranger-chords .display-area{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;height:100%;max-height:none;scroll-margin-block:12vh;overflow-y:auto}.workspace-view--studio{gap:.75rem}.workspace-view--studio,.workspace-view--studio .workspace-columns,.workspace-view--studio .workspace-stack{width:100%}.workspace-view--studio .workspace-columns{gap:.6rem}.workspace-view--studio .workspace-studio-live-mix{gap:.75rem;padding:.9rem}.workspace-view--studio .workspace-studio-live-mix-header{flex-direction:column;align-items:stretch;gap:.55rem}.workspace-view--studio .workspace-studio-live-mix-header h2{font-size:.98rem}.workspace-view--studio .workspace-studio-live-mix-tools{justify-content:space-between;gap:.5rem;width:100%;margin-left:0}.workspace-view--studio .workspace-studio-mixer-button{align-self:flex-start}.workspace-view--studio .workspace-studio-mixer-button,.workspace-view--studio .workspace-studio-genre-button{justify-content:space-between;width:auto;max-width:100%;padding-inline:.7rem}.workspace-view--studio .workspace-studio-live-mix-rows{gap:.6rem}.workspace-view--studio .workspace-studio-mix-row{gap:.75rem;padding:.8rem}.workspace-view--studio .workspace-studio-mix-row-main{gap:.75rem}.workspace-view--studio .workspace-studio-mix-row-icon{border-radius:12px;width:2.3rem;height:2.3rem}.workspace-view--studio .workspace-studio-mix-row-heading{gap:.4rem}.workspace-view--studio .workspace-studio-mix-row-heading h3{font-size:.92rem}.workspace-view--studio .workspace-studio-mix-row-copy p{font-size:.78rem}.workspace-view--studio .workspace-instrument-state{padding:.24rem .45rem;font-size:.68rem}.workspace-view--studio .workspace-studio-mix-row-actions{gap:.35rem}.workspace-view--studio .workspace-studio-mixer-button,.workspace-view--studio .workspace-studio-mix-menu-trigger,.workspace-view--studio .power-btn{height:30px;font-size:.95rem}.workspace-view--studio .workspace-studio-mixer-button,.workspace-view--studio .workspace-studio-mix-menu-trigger{width:auto;padding:0 .65rem 0 .72rem}.workspace-studio-surface--modal{top:max(.75rem, calc(env(safe-area-inset-top) + .5rem));left:.75rem;right:.75rem;bottom:max(.75rem, calc(env(safe-area-inset-bottom) + .5rem));width:auto;min-height:0;max-height:none;padding:.82rem;padding-bottom:calc(.82rem + env(safe-area-inset-bottom));animation:.18s ease-out workspaceStudioSurfaceMobileIn;transform:none}.workspace-studio-surface-body{min-height:0;padding-bottom:calc(1.3rem + env(safe-area-inset-bottom));gap:.55rem;scroll-padding-block-end:calc(1.3rem + env(safe-area-inset-bottom))}.workspace-studio-surface--settings .workspace-studio-surface-header{gap:.55rem}.workspace-studio-surface--settings .workspace-studio-surface-summary{display:none}.workspace-studio-mixer-grid{gap:.45rem}.workspace-studio-mixer-strip{border-radius:14px;grid-template-columns:minmax(0,5.4rem) minmax(0,1fr);gap:.55rem;padding:.55rem .6rem}.workspace-studio-mixer-strip-icon{border-radius:10px;width:1.75rem;height:1.75rem;font-size:.88rem}.workspace-studio-mixer-strip-heading h4{font-size:.84rem}.workspace-studio-mixer-strip-slider{grid-template-columns:1.35rem minmax(0,1fr) 1.95rem;gap:.35rem}.workspace-studio-mixer-strip-slider-label,.workspace-studio-mixer-strip-slider-value{font-size:.66rem}.workspace-studio-genre-grid{gap:.5rem}.workspace-studio-surface--settings .grid-2-col{grid-template-columns:1fr;gap:.55rem}.workspace-studio-surface--settings .setting-group,.workspace-studio-surface--band-feel .setting-group,.workspace-studio-surface-card{border-radius:16px;padding:.62rem}.workspace-studio-surface-card--soloist{padding-bottom:1.75rem}.workspace-studio-surface--settings .setting-group-title,.workspace-studio-surface--band-feel .setting-group-title{margin-bottom:.35rem;padding-bottom:.24rem;font-size:.72rem}.workspace-studio-surface--settings .setting-row,.workspace-studio-surface--band-feel .setting-row{gap:.5rem;min-height:1.65rem;margin-bottom:.32rem}.workspace-studio-surface--settings .setting-description,.workspace-studio-surface--band-feel .setting-description{display:none}.workspace-studio-surface--settings .setting-info,.workspace-studio-surface--band-feel .setting-info{min-width:0}.workspace-studio-surface--settings .setting-control,.workspace-studio-surface--band-feel .setting-control{gap:.4rem}.workspace-studio-surface--settings .setting-control>select,.workspace-studio-surface--band-feel .setting-control>select,.workspace-studio-surface--settings .setting-control input[type=range],.workspace-studio-surface--band-feel .setting-control input[type=range]{width:clamp(92px,36vw,156px)}.workspace-view--studio .workspace-studio-mix-menu-label{font-size:.72rem}}@keyframes workspaceStudioSurfaceMobileIn{0%{opacity:0;transform:translateY(12px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes workspaceStudioSurfaceMobileFadeIn{0%{opacity:0}to{opacity:1}}@supports (-webkit-touch-callout:none){@media (width<=700px){.workspace-studio-surface-backdrop{-webkit-backdrop-filter:none;background:#0206179e}.workspace-studio-surface--modal{animation:.16s ease-out workspaceStudioSurfaceMobileFadeIn}.workspace-studio-surface,.workspace-studio-surface-header,.workspace-studio-surface-header-copy,.workspace-studio-surface-close{backface-visibility:hidden;-webkit-font-smoothing:antialiased;transform:translateZ(0)}}}