:root{color-scheme:dark;--bg: #16191d;--bg-elevated: #20252b;--bg-panel: #262c33;--bg-panel-2: #2b3139;--bg-grid: #171b20;--border: #38414c;--border-strong: #566171;--text: #e5e8ed;--text-dim: #98a3b2;--accent: #7cc2ff;--accent-strong: #9fd76b;--danger: #e68b8b}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--text);font-family:Segoe UI,Helvetica Neue,sans-serif;font-size:13px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 180px),linear-gradient(180deg,#121518,#0d1013)}button,input,select{font:inherit}button,.toolbar-link{border:1px solid var(--border);border-radius:4px;background:linear-gradient(180deg,#353c45,#2a3037);color:var(--text);padding:.4rem .65rem;cursor:pointer;text-decoration:none}button:hover,.toolbar-link:hover{border-color:var(--border-strong);background:linear-gradient(180deg,#3d4550,#303740)}button:disabled{opacity:.45;cursor:default}input,select{width:100%;border:1px solid var(--border);border-radius:4px;background:#15191d;color:var(--text);padding:.42rem .5rem}a{color:inherit}.accent-button{border-color:#89b95d;background:linear-gradient(180deg,#8fc861,#6f9d47);color:#111610;font-weight:700}.app-shell{min-height:100vh;padding:.65rem;display:flex;flex-direction:column;gap:.55rem}.topbar{display:flex;align-items:center;gap:.75rem;padding:.45rem .6rem;border:1px solid var(--border);border-radius:6px;background:linear-gradient(180deg,#2d333b,#23292f)}.topbar-brand{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.app-title{font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.app-build{padding:.18rem .38rem;border:1px solid var(--border);border-radius:999px;color:var(--accent);font-size:.72rem}.topbar-sections{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;min-width:0;width:100%}.topbar-group{display:flex;align-items:center;gap:.35rem;padding-left:.55rem;border-left:1px solid rgba(255,255,255,.08)}.topbar-group:first-child{border-left:0;padding-left:0}.topbar-group-numeric{gap:.45rem}.topbar-status{margin-left:auto;color:var(--text-dim);flex-wrap:wrap}.toolbar-value{display:grid;grid-template-columns:auto 4rem;align-items:center;gap:.35rem;color:var(--text-dim)}.toolbar-value input{padding:.28rem .4rem}.notice-banner,.pwa-banner{padding:.55rem .7rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-elevated)}.notice-banner.is-danger{border-color:#7d4545;background:#372224}.pwa-banner{display:flex;justify-content:space-between;align-items:center;gap:.6rem}.pwa-banner.is-passive{background:#1d2328}.workspace-grid{display:grid;grid-template-columns:18rem minmax(0,1fr) 18rem;gap:.55rem;min-height:0;flex:1}.workspace-grid.is-right-panel-closed{grid-template-columns:18rem minmax(0,1fr)}.workspace-main,.sidebar-panel,.inspector-panel,.welcome-card{border:1px solid var(--border);border-radius:6px;background:var(--bg-elevated)}.workspace-main,.sidebar-panel,.inspector-panel{padding:.55rem}.workspace-main,.sidebar-panel,.inspector-panel,.sample-editor-shell,.instrument-editor-shell,.mixer-panel,.pattern-editor-shell{display:flex;flex-direction:column;gap:.55rem;min-height:0}.panel-card{padding:.55rem;border:1px solid var(--border);border-radius:5px;background:var(--bg-panel)}.panel-heading{font-size:.92rem;font-weight:700}.panel-subheading{color:var(--text-dim);font-size:.78rem}.panel-section-header,.pattern-workspace-header,.workspace-dock-bar,.mixer-header,.sample-editor-bar,.instrument-editor-bar,.sample-wave-toolbar,.sample-editor-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:.55rem}.panel-mini-stats,.sample-stats-inline,.transport-readout,.detail-row{display:flex;gap:.55rem;color:var(--text-dim);align-items:center;flex-wrap:wrap}.panel-mini-stats{gap:.25rem;flex-direction:column;align-items:flex-end;font-size:.72rem;letter-spacing:.04em}.stack-list,.sequencer-list,.draft-list{display:flex;flex-direction:column;gap:.35rem;overflow:auto}.compact-stack{max-height:11rem}.list-item,.sequencer-row,.draft-open,.draft-delete{display:flex;align-items:center;gap:.5rem}.list-item.is-active,.sequencer-row.is-selected{border-color:var(--border-strong);background:linear-gradient(180deg,#495362,#39424e)}.sequencer-row.is-playback{box-shadow:inset 0 0 0 1px #9fd76b73}.sequencer-order{width:3.3rem;justify-content:center;color:var(--text-dim);font-family:SF Mono,Menlo,monospace;padding:.35rem .2rem}.sequencer-panel .panel-card{display:flex;flex-direction:column;gap:.45rem}.sequencer-list{gap:.06rem;padding:.1rem 0;outline:none}.sequencer-list:focus{box-shadow:inset 0 0 0 1px #7cc2ff52;border-radius:4px}.sequencer-row{display:grid;grid-template-columns:3.3rem minmax(0,1fr) 1rem;gap:.25rem;align-items:center;padding:.08rem;border:1px solid transparent;border-radius:4px;background:#00000014;opacity:.72;transition:opacity .12s ease,background .12s ease,border-color .12s ease}.sequencer-row.is-condensed{gap:.04rem;padding:0}.sequencer-row:hover{opacity:.9}.sequencer-pattern-label,.sequencer-stepper{padding:.24rem .22rem}.sequencer-row.is-condensed .sequencer-order,.sequencer-row.is-condensed .sequencer-pattern-label{padding-top:.01rem;padding-bottom:.01rem;font-size:.72rem;line-height:1.05;border-radius:3px}.sequencer-row.is-condensed .sequencer-order{padding-left:.04rem;padding-right:.04rem}.sequencer-row.is-condensed .sequencer-flag{font-size:.5rem}.sequencer-pattern-label{min-width:0;font-family:SF Mono,Menlo,monospace;font-size:.96rem;font-weight:700;color:#ff8b47;background:linear-gradient(180deg,#2b2f34,#20242a);border-color:#3d444e}.sequencer-stepper{color:var(--text-dim);background:linear-gradient(180deg,#2a2f35,#23282e)}.sequencer-flag{color:#ffffff47;text-align:center;font-size:.66rem}.sequencer-flag.is-playback{color:var(--accent-strong)}.sequencer-toolbar{display:flex;justify-content:space-between;align-items:center;gap:.4rem;margin-top:.15rem}.sequencer-selected-readout{display:flex;align-items:center;gap:.22rem;min-width:0;color:var(--text-dim);font-family:SF Mono,Menlo,monospace;padding:.1rem .15rem;border-radius:4px;background:#00000024}.sequencer-selected-readout strong{display:inline-flex;min-width:2.5rem;justify-content:center;padding:.24rem .45rem;border:1px solid #6e3d21;border-radius:4px;background:linear-gradient(180deg,#ff9a57,#eb6e31);color:#20120a;box-shadow:inset 0 1px #ffffff2e}.sequencer-actions{display:grid;grid-template-columns:repeat(4,2rem);gap:.25rem}.sequencer-actions,.inline-actions,.hero-actions,.pattern-grid-actions,.pattern-strip-group,.workspace-dock-tabs,.mixer-toggle-row,.sample-editor-group,.sample-stats-inline{display:flex;gap:.4rem;flex-wrap:wrap}.pattern-inline-label{align-self:center;color:var(--text-dim);padding-right:.2rem}.sequencer-footer-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;margin-top:.05rem}.sequencer-footer-actions button,.sequencer-actions button{padding-left:.35rem;padding-right:.35rem}.sequencer-row.is-selected{opacity:1;background:linear-gradient(180deg,#5c687a9e,#424c5ab8)}.sequencer-row.is-selected .sequencer-order,.sequencer-row.is-selected .sequencer-pattern-label{border-color:#697789}.sequencer-row:not(.is-selected) .sequencer-pattern-label{color:#d2a283}.field{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.45rem}.field span{color:var(--text-dim);font-size:.76rem}.compact-field{margin-bottom:0}.inspector-action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}.utility-error{color:#f0aeae;font-size:.78rem}.pattern-grid-panel{display:flex;flex-direction:column;gap:.45rem;min-height:0}.pattern-workspace-header{align-items:center}.pattern-status-line{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;min-width:0}.pattern-status-item{display:inline-flex;align-items:center;padding:.14rem .42rem;border:1px solid rgba(255,255,255,.06);border-radius:999px;background:#0000001f;color:var(--text-dim);font-size:.82rem;white-space:nowrap}.track-header-row{--pattern-row-label-width: 2.7rem;--pattern-track-width: 8rem;--pattern-channel-count: 32;display:grid;grid-template-columns:var(--pattern-row-label-width) repeat(var(--pattern-channel-count),var(--pattern-track-width));gap:0;align-items:stretch;width:100%;margin-bottom:.28rem;position:sticky;top:0;z-index:4;padding-bottom:.2rem;background:linear-gradient(180deg,#171b20fa,#171b20fa 78%,#171b20c7)}.track-header-cell{box-sizing:border-box;border:1px solid var(--border);border-radius:4px;background:var(--bg-panel-2);padding:.2rem .24rem;min-width:0}.track-header-cell.is-active{border-color:var(--border-strong)}.track-header-cell.is-row-label{display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-weight:700;font-size:.74rem}.track-header-title{display:flex;justify-content:space-between;gap:.2rem;color:var(--text-dim);margin-bottom:.08rem;font-size:.72rem;line-height:1.1}.track-header-subtitle{min-height:.95rem;margin-bottom:.14rem;color:var(--text-dim);font-size:.66rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-header-actions{display:flex;gap:.16rem}.track-header-actions button{flex:1;min-width:0;padding:.12rem .15rem;font-size:.72rem}.pattern-grid-scroll{min-height:20rem;max-height:34rem;overflow:auto;background:var(--bg-grid);border:1px solid var(--border);border-radius:4px;padding:.28rem;font-family:SF Mono,Menlo,monospace;font-size:11px;line-height:1.45;outline:none;position:relative}.pattern-grid-scroll:focus{border-color:#7597be}.pattern-grid-content{width:calc(var(--pattern-row-label-width, 2.7rem) + (var(--pattern-channel-count, 32) * var(--pattern-track-width, 8rem)))}.pattern-grid-table{border-collapse:collapse;table-layout:fixed;width:100%}.pattern-grid-table td,.pattern-grid-table th{box-sizing:border-box;white-space:nowrap;text-align:left;padding:.15rem .34rem}.pattern-grid-table td:first-child{width:var(--pattern-row-label-width, 2.7rem);min-width:var(--pattern-row-label-width, 2.7rem);max-width:var(--pattern-row-label-width, 2.7rem)}.pattern-grid-table td:not(:first-child){width:var(--pattern-track-width, 8rem);min-width:var(--pattern-track-width, 8rem);max-width:var(--pattern-track-width, 8rem)}.pattern-grid-table td{border-left:1px solid rgba(255,255,255,.05)}.pattern-cell-field.is-note{color:#d8dde4}.pattern-cell-field.is-instrument{color:#b8b7bd}.pattern-cell-field.is-volume{color:#e0ca49}.pattern-cell-field.is-effect-type{color:#df7c3a}.pattern-cell-field.is-effect-param{color:#e3cd46}.pattern-cell-separator{color:#ffffff1f}.pattern-cell-field.is-empty{color:#54606c}.pattern-grid-table tr.is-cursor-row{background:#37475c8c}.pattern-grid-table tr.is-playback-row{background:#445a3680}.pattern-grid-table td.is-selected{background:#5a6e8459}.pattern-row-number{color:var(--text-dim);text-align:right;position:sticky;left:0;z-index:2;background:var(--bg-grid)}.pattern-control-strip{display:flex;justify-content:space-between;gap:.45rem;flex-wrap:wrap;align-items:center}.pattern-strip-status{color:var(--text-dim)}.workspace-dock{border:1px solid var(--border);border-radius:6px;background:var(--bg-elevated);overflow:hidden}.workspace-dock.is-collapsed .workspace-dock-content{display:none}.workspace-dock-bar{padding:.45rem .55rem;border-bottom:1px solid var(--border);background:#262c33;align-items:center}.workspace-dock-content{padding:.55rem;max-height:30rem;overflow:auto}.dock-close-button{width:1.8rem;min-width:1.8rem;height:1.8rem;padding:0;font-size:1rem;line-height:1}.dock-tools{display:flex;flex-direction:column;gap:.55rem}.dock-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.pattern-help-card{display:flex;flex-direction:column;gap:.22rem;padding:.55rem;border:1px solid var(--border);border-radius:4px;background:var(--bg-panel-2);color:var(--text-dim)}.pattern-help-card strong{color:var(--text)}.pattern-preset-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.45rem}.pattern-preset-button{display:flex;flex-direction:column;align-items:flex-start;gap:.22rem;text-align:left}.command-palette-backdrop,.recovery-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#05080bb8;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:40}.command-palette,.recovery-dialog{width:min(34rem,100%);border:1px solid var(--border-strong);border-radius:6px;background:var(--bg-elevated);padding:.7rem;box-shadow:0 14px 40px #00000059}.command-palette-results{display:flex;flex-direction:column;gap:.35rem;margin-top:.55rem;max-height:16rem;overflow:auto}.mixer-strip-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(8rem,1fr);gap:.55rem;overflow-x:auto}.mixer-strip{display:flex;flex-direction:column;gap:.55rem;padding:.55rem;border:1px solid var(--border);border-radius:4px;background:var(--bg-panel-2)}.mixer-strip.is-muted{opacity:.55}.mixer-strip-title{font-size:.78rem;letter-spacing:.1em;color:var(--accent)}.mixer-range-field{display:flex;flex-direction:column;gap:.25rem;color:var(--text-dim)}.mixer-range-field input{padding:0}.sample-editor-layout,.instrument-editor-layout{display:grid;gap:.55rem;grid-template-columns:minmax(0,1fr)}.sample-wave-panel,.sample-generator-panel,.instrument-editor-main,.instrument-editor-side{display:flex;flex-direction:column;gap:.55rem}.sample-wave-canvas{width:100%;min-height:14rem;border:1px solid var(--border);border-radius:4px;background:#14181d}.welcome-shell{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}.welcome-card{padding:.9rem}.welcome-kicker{color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}.drop-zone{border:1px dashed var(--border-strong);border-radius:5px;padding:1.4rem .8rem;text-align:center;color:var(--text-dim)}.drop-zone.is-dragging{border-color:var(--accent);color:var(--text)}.recovery-meta{display:flex;flex-direction:column;gap:.22rem;color:var(--text-dim)}@media(max-width:1280px){.workspace-grid,.workspace-grid.is-right-panel-closed{grid-template-columns:15rem minmax(0,1fr)}.inspector-panel{grid-column:1 / -1}}@media(max-width:920px){.workspace-grid,.workspace-grid.is-right-panel-closed{grid-template-columns:minmax(0,1fr)}.topbar{align-items:flex-start;flex-direction:column}.topbar-status{margin-left:0}.track-header-row{display:none}.dock-tools-grid{grid-template-columns:minmax(0,1fr)}}