/* Signal 2.0: all authored colours live in this semantic token block. */
:root {
  color-scheme: dark;
  --background: #1C1D1B;
  --surface-default: #292B28;
  --surface-raised: #353833;
  --grid-inactive: #393C36;
  --action-primary: #DDF28C;
  --text-on-primary: #192016;
  --text-primary: #F4F5EF;
  --text-secondary: #B7BDB2;
  --border-subtle: #62695F;
  --muted: #91998D;
  --danger: #F0A39B;
  --focus: #A8D7FA;
  /* The proposed subtle border is decorative; these boundaries pass 3:1. */
  --border-control: var(--muted);
  --border-strong: var(--text-secondary);
  --text-disabled: var(--text-secondary);
  --grid-beat: var(--surface-raised);
  --note-active: var(--action-primary);
  --note-indicator: var(--text-on-primary);
  --playhead: var(--focus);
  --overlay: rgb(0 0 0 / 0.55);
  /* Compatibility aliases for the existing UI-generated overview density. */
  --bg: var(--background); --fg: var(--text-primary);
  --primary: var(--action-primary); --surface: var(--surface-default); --border: var(--border-control);
  --control-height: 32px; --control-small: 28px; --touch-height: 44px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --track-width: 196px; --track-height: 44px; --step-width: 44px; --step-gap: 3px;
  --panel-width: 560px; --toolbar-height: 48px; --columns: 16;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--background); color: var(--text-primary); font: 16px/1.5 Arial,Helvetica,sans-serif; }
main { max-width: 1600px; margin: auto; padding: var(--space-6); min-width: 0; }
p,h1,h2 { margin: 0; }
header { display:flex; align-items:baseline; gap:10px; border-top:2px solid var(--action-primary); padding-top:10px; margin-bottom:var(--space-3); }
h1 { font-size:26px; line-height:1; letter-spacing:-.045em; }
h1 span { color:var(--action-primary); }
h2 { font-size:13px; letter-spacing:.04em; }
.byline { font-size:11px; white-space:nowrap; color:var(--text-secondary); }
.eyebrow,footer { font-size:10px; letter-spacing:.08em; color:var(--text-secondary); }
header .eyebrow { margin-left:auto; }
button,input,select { font:inherit; }
button,select,input[type=number],input[type=search] {
  --control-background:var(--surface-default); --control-text:var(--text-primary); --control-boundary:var(--border-control);
  background:var(--control-background); color:var(--control-text); border:1px solid var(--control-boundary);
  border-radius:0; min-height:var(--control-height); height:var(--control-height); font-size:12px; line-height:1.25; padding:0 10px;
}
button { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:600; cursor:pointer; touch-action:manipulation; }
button:not(:disabled):hover,select:not(:disabled):hover,input[type=number]:hover { --control-background:var(--surface-raised); --control-boundary:var(--border-strong); }
button.primary,button[aria-pressed=true]:not(.track-name):not(.sound-select):not(.favourite),.pad.hit {
  --control-background:var(--action-primary); --control-text:var(--text-on-primary); --control-boundary:var(--action-primary);
}
button.primary:not(:disabled):hover,button[aria-pressed=true]:not(.track-name):not(.sound-select):not(.favourite):not(:disabled):hover {
  --control-background:var(--action-primary); --control-text:var(--text-on-primary); --control-boundary:var(--text-on-primary);
}
button[aria-pressed=true]:not(.step):not(.sound-select):not(.favourite) { text-decoration:underline; text-underline-offset:4px; }
button svg,button small,button strong { color:inherit; }
button.danger { --control-text:var(--danger); --control-boundary:var(--danger); }
button:disabled,select:disabled,input:disabled {
  --control-background:var(--surface-default); --control-text:var(--text-disabled); --control-boundary:var(--border-control);
  opacity:1; cursor:not-allowed; border-style:dashed;
}
button[hidden],[hidden] { display:none!important; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 2px var(--background); }
::selection { background:var(--focus); color:var(--text-on-primary); }
label { font-size:11px; color:var(--text-secondary); }
output { font-weight:600; color:var(--text-primary); }
select { max-width:100%; cursor:pointer; }
select option { background:var(--surface-default); color:var(--text-primary); }
select option:checked { background:var(--action-primary); color:var(--text-on-primary); }
input[type=number] { width:76px; }
input[type=search]::placeholder { color:var(--text-secondary); opacity:1; }
input[type=range] { appearance:none; -webkit-appearance:none; display:block; width:100%; height:var(--control-height); padding:0; margin:0; background:transparent; border:0; accent-color:var(--action-primary); cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track { height:4px; background:var(--border-control); }
input[type=range]::-moz-range-track { height:4px; background:var(--border-control); }
input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:16px; height:16px; margin-top:-6px; border:2px solid var(--text-on-primary); border-radius:0; background:var(--action-primary); }
input[type=range]::-moz-range-thumb { width:12px; height:12px; border:2px solid var(--text-on-primary); border-radius:0; background:var(--action-primary); }
input[type=range]:disabled { cursor:not-allowed; }
input[type=range]:disabled::-webkit-slider-thumb { background:var(--surface-raised); border-color:var(--border-strong); }
input[type=range]:disabled::-moz-range-thumb { background:var(--surface-raised); border-color:var(--border-strong); }
.check { display:flex; align-items:center; gap:6px; min-height:var(--control-height); }
.check input { appearance:none; -webkit-appearance:none; width:18px; height:18px; border:1px solid var(--border-control); border-radius:0; margin:0; background:var(--surface-default); display:grid; place-content:center; cursor:pointer; }
.check input:checked { background:var(--action-primary); border-color:var(--action-primary); }
.check input:checked::after { content:''; width:9px; height:5px; border-left:2px solid var(--text-on-primary); border-bottom:2px solid var(--text-on-primary); transform:rotate(-45deg); margin-top:-2px; }
.transport { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); min-height:var(--toolbar-height); padding:var(--space-2) 0; position:sticky; top:0; z-index:5; background:var(--background); border-bottom:1px solid var(--border-subtle); }
.transport>label { flex:0 1 110px; max-width:140px; display:grid; grid-template-columns:auto auto; align-items:center; column-gap:4px; }
.transport label input[type=range] { grid-column:1/-1; height:20px; }
.transport>label,.transport-secondary>label[for=master] { height:var(--control-height); grid-template-rows:calc(var(--control-height) - 20px) 20px; line-height:12px; }
.transport>details { flex:1; min-width:0; border:0; padding:0; margin:0; }
.transport>details>summary { display:none; }
.transport-secondary { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.transport-secondary>label { display:flex; align-items:center; gap:6px; }
.transport-secondary>label[for=master] { display:grid; grid-template-columns:auto auto; flex:0 1 110px; }
.transport-secondary>label[for=bars] { white-space:nowrap; }
.history,.pattern-slots { display:flex; gap:var(--space-1); }
.pattern-slots { margin-left:auto; }
.pattern-slots button { min-width:32px; }
.readout { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); min-height:32px; font-size:11px; color:var(--text-secondary); }
.readout p { overflow-wrap:anywhere; }
#position { color:var(--text-primary); white-space:nowrap; font-size:11px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-2); }
.section-heading>span { font-size:11px; color:var(--text-secondary); }
.sequencer { border-top:1px solid var(--border-subtle); padding-top:var(--space-3); }
.timeline-nav,.button-row { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
.timeline-nav { margin:4px 0 8px; font-size:11px; }
.timeline-nav select { display:inline; width:auto; }
.edit-modes { display:flex; align-items:center; gap:var(--space-1); margin-left:auto; }
#bar-nav { display:flex; gap:3px; overflow-x:auto; padding:4px 0 8px; }
#bar-nav button { flex:0 0 32px; position:relative; padding:0; font-size:10px; }
#bar-nav button::after { content:''; position:absolute; left:6px; right:6px; bottom:3px; height:2px; background:var(--density,var(--border-control)); }
#bar-nav button[aria-pressed=true]::after { background:var(--text-on-primary); }
#bar-nav button.current { border-color:var(--focus); }
.icon { display:inline-block; width:24px; height:24px; flex:none; vertical-align:middle; }
#sequence-scroll { position:relative; overflow-x:auto; isolation:isolate; scroll-padding-left:var(--track-width); overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; padding:4px 0 8px; }
#timeline-surface { position:relative; width:100%; min-width:calc(var(--track-width) + var(--columns)*(var(--step-width) + var(--step-gap))); }
.sequence-row { display:grid; grid-template-columns:var(--track-width) repeat(var(--columns),minmax(var(--step-width),1fr)); min-width:calc(var(--track-width) + var(--columns)*(var(--step-width) + var(--step-gap))); gap:var(--step-gap); margin-bottom:4px; }
.track-head { position:sticky; left:0; z-index:4; display:flex; align-items:center; gap:2px; padding-right:6px; min-width:0; height:var(--track-height); background:var(--background); border-left:3px solid transparent; }
.track-head:has(.track-name[aria-pressed=true]) { background:var(--surface-raised); border-left-color:var(--action-primary); }
.track-head .track-name { flex:1; min-width:0; height:var(--track-height); min-height:var(--track-height); justify-content:flex-start; gap:6px; text-align:left; font-size:12px; font-weight:400; padding:4px; border:0; background:transparent; color:var(--text-primary); }
.track-head .track-name:hover { background:var(--surface-raised); }
.track-head .track-name[aria-pressed=true] { text-decoration:underline; text-underline-offset:4px; }
.track-name .icon { width:18px; height:18px; }
.track-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-head .mute,.track-head .solo { width:var(--control-small); min-width:var(--control-small); height:var(--control-small); min-height:var(--control-small); padding:0; font-size:10px; visibility:hidden; }
.track-head.controls-visible .mute,.track-head.controls-visible .solo,.track-head:focus-within .mute,.track-head:focus-within .solo,.track-head:hover .mute,.track-head:hover .solo { visibility:visible; }
.track-head.muted .track-name { color:var(--text-secondary); }
.track-head.muted .track-label { text-decoration:line-through; }
.track-head[data-mute=true] .track-label::after { content:' / M'; }
.track-head[data-solo=true][data-mute=false] .track-label::after { content:' / S'; }
.step { position:relative; height:var(--track-height); min-height:var(--track-height); min-width:var(--step-width); padding:0; background:var(--grid-inactive); border-color:var(--border-control); }
.step.beat-start { background:var(--grid-beat); border-left-width:2px; }
.step.bar-start { border-left:3px solid var(--border-strong); }
.step.active,.step[aria-pressed=true] { background:var(--note-active); color:var(--text-on-primary); border-color:var(--note-active); }
.step.active.bar-start,.step.active.beat-start,.step[aria-pressed=true].bar-start,.step[aria-pressed=true].beat-start { border-left-color:var(--text-on-primary); }
.step[aria-pressed=true]::before { content:''; position:absolute; bottom:0; left:0; width:calc(var(--note-velocity,1)*100%); min-width:2px; height:2px; background:var(--note-indicator); }
.step::after { content:none; display:none; }
.step.selected-note { border-bottom:3px double var(--text-on-primary); }
.step.current { outline:none; }
.step:focus-visible { position:relative; z-index:6; outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 2px var(--background); }
.step-number { padding:4px 0; font-size:10px; text-align:center; color:var(--text-secondary); }
.step-number.current { color:var(--focus); font-weight:700; }
#step-numbers .track-head { height:24px; font-size:9px; color:var(--text-secondary); border:0; }
.overview { --track-height:34px; --step-width:6px; --step-gap:2px; }
.overview .overview-bar { display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); gap:2px; padding:0; min-width:0; height:var(--track-height); min-height:var(--track-height); border:0; background:transparent; }
.overview .step { display:block; min-width:0; border:0; pointer-events:none; }
.overview .step.beat-start { border-left:1px solid var(--border-control); }
.overview .step.bar-start { border-left:2px solid var(--border-strong); }
.overview .step.active { background:var(--note-active); border-left-color:var(--note-indicator); }
.overview .step-number { overflow:visible; }
#playhead-line { position:absolute; top:24px; bottom:0; width:2px; background:var(--playhead); box-shadow:-1px 0 0 var(--text-on-primary),1px 0 0 var(--text-on-primary); pointer-events:none; z-index:3; }
.sequence-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); margin-top:var(--space-2); }
#browse { color:var(--action-primary); background:var(--background); border-color:var(--border-control); }
.hint { color:var(--text-secondary); font-size:12px; margin:8px 0; }
#pattern-info { font-size:11px; }
details { border-top:1px solid var(--border-subtle); margin-top:var(--space-3); }
summary { cursor:pointer; font-size:12px; font-weight:600; min-height:var(--control-height); padding:8px 0; color:var(--text-primary); }
summary span { font-weight:400; color:var(--text-secondary); }
#track-editor { padding:0 12px; background:var(--surface-default); border-top-color:var(--border-control); }
.settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); padding:4px 0 12px; }
.settings-grid .button-row,.settings-grid>.hint { grid-column:1/-1; }
.settings-grid output { display:block; }
#note-editor { max-width:280px; margin:0; }
.advanced-tools { display:grid; gap:var(--space-4); padding:4px 0 16px; }
.button-row label input[type=number],.button-row label select { display:block; }
.save-line { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:16px; font-size:11px; color:var(--text-secondary); }
.save-line p { flex:1; min-width:0; }
#pads { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; max-width:440px; }
.pad { aspect-ratio:1.2; height:auto; min-height:44px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:8px; text-align:left; font-size:12px; border-bottom:3px solid var(--border-control); touch-action:none; }
.pad small { font-size:10px; font-weight:400; }
.pad.hit { text-decoration:underline; }
footer { border-top:1px solid var(--border-subtle); margin-top:16px; padding-top:12px; }
[role=tooltip],.tooltip { background:var(--surface-raised); color:var(--text-primary); border:1px solid var(--border-control); padding:4px 8px; }
dialog { background:var(--background); color:var(--text-primary); border:1px solid var(--border-control); border-radius:0; }
dialog::backdrop { background:var(--overlay); }
#instrument-browser { position:fixed; inset:0 0 0 auto; margin:0; width:min(var(--panel-width),100%); height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; max-width:100%; padding:0; border:0; border-left:1px solid var(--border-control); overflow:hidden; }
#instrument-browser[open] { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; }
.browser-header,.browser-results,.browser-footer { min-width:0; width:100%; max-width:100%; }
.browser-header { padding:20px 16px 12px; }
.browser-header .section-heading { align-items:flex-start; margin-bottom:16px; }
.browser-header .section-heading>div { min-width:0; }
.browser-header h2 { font-size:26px; line-height:1.2; letter-spacing:-.04em; margin-top:4px; }
.browser-header .eyebrow { color:var(--text-secondary); }
.search-label { display:block; margin-bottom:4px; }
#sound-search { width:100%; min-height:40px; height:40px; padding:8px 12px; font-size:16px; -webkit-appearance:none; }
#library-sections,#category-filters { display:flex; gap:4px; overflow-x:auto; width:100%; max-width:100%; min-width:0; scrollbar-width:thin; padding:10px 0 4px; }
#library-sections button,#category-filters button { flex:none; white-space:nowrap; padding:0 8px; font-size:11px; }
#sound-results { margin-top:6px; font-size:11px; color:var(--text-secondary); }
.browser-results { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:0 16px 16px; min-height:0; }
#instrument-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:stretch; min-width:0; width:100%; }
.sound-card { position:relative; min-width:0; border:1px solid var(--border-control); background:var(--surface-default); }
.sound-select { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:10px; text-align:left; width:100%; height:100%; min-height:150px; padding:12px; font-weight:400; border:0; background:var(--surface-default); color:var(--text-primary); min-width:0; overflow-wrap:anywhere; }
.sound-select:hover { background:var(--surface-raised); }
.sound-select strong { font-size:14px; line-height:1.25; }
.sound-select>.icon { margin-bottom:4px; color:var(--text-primary); }
.sound-description { font-size:11px; line-height:1.4; color:var(--text-secondary); }
.sound-select[aria-pressed=true] { background:var(--surface-raised); color:var(--text-primary); outline:2px solid var(--action-primary); outline-offset:-2px; }
.sound-select[aria-pressed=true]>.icon { color:var(--action-primary); }
.sound-select .selection-label { color:var(--action-primary); font-size:10px; font-weight:600; }
.favourite { position:absolute; top:0; right:0; width:44px; height:44px; min-width:44px; min-height:44px; padding:10px; border:0; background:var(--surface-default); color:var(--text-primary); }
.favourite .icon { width:20px; height:20px; }
.favourite[aria-pressed=true] { background:var(--surface-default); color:var(--action-primary); }
.favourite[aria-pressed=true] .icon { fill:currentColor; }
.sound-select:focus-visible,.favourite:focus-visible { outline:2px solid var(--focus); outline-offset:-3px; box-shadow:none; }
#library-empty { font-size:13px; padding:24px 0; color:var(--text-secondary); }
.browser-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:12px 16px max(16px,env(safe-area-inset-bottom)); border-top:1px solid var(--border-control); background:var(--background); }
#library-selection { display:flex; align-items:center; gap:8px; font-size:12px; min-width:0; color:var(--text-primary); }
#library-selection .icon { color:var(--text-primary); }
#library-storage { grid-column:1/-1; font-size:11px; color:var(--danger); }
#library-storage:empty { display:none; }
#library-action { min-width:100px; }
#close-browser { flex:none; }
.browser-open { overflow:hidden; }
@media(max-width:699px) {
  :root { --track-width:112px; --control-height:44px; }
  main { padding:16px; }
  header .eyebrow { display:none; }
  .transport { gap:6px; padding:6px 0; }
  .transport>label[for=tempo] { flex:1 1 100px; max-width:none; }
  .transport>details { flex-basis:100%; }
  .transport>details>summary { display:block; min-height:44px; }
  .transport-secondary { padding-bottom:8px; gap:6px; }
  .transport-secondary>label[for=master] { flex:1 1 100px; }
  .transport-secondary .pattern-slots { margin-left:0; }
  .pattern-slots button { min-width:44px; }
  .readout { padding:8px 0; }
  .timeline-nav .edit-modes { margin-left:0; }
  .check { min-height:44px; }
  #bar-nav button { flex-basis:44px; min-height:44px; }
  .track-head .mute,.track-head .solo { display:none; }
  .settings-grid { grid-template-columns:minmax(0,1fr); }
  .settings-grid .button-row { grid-column:auto; }
  .save-line p { flex-basis:100%; }
  #instrument-browser { width:100%; border:0; }
  .browser-header { padding-top:max(12px,env(safe-area-inset-top)); }
  .browser-header h2 { font-size:24px; }
  #sound-search { min-height:44px; height:44px; }
  .sound-select { min-height:160px; }
  .browser-footer { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}
@media(pointer:coarse) {
  :root { --control-height:44px; }
  .overview { --track-height:44px; }
  .overview .overview-bar { min-height:44px; }
  #bar-nav button { min-height:44px; min-width:44px; }
}
@media(prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* Aligned control groups: label space belongs to the row, descriptions below it. */
.advanced-tools { max-width:1100px; gap:20px; }
.advanced-tools .button-row,.settings-grid .button-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; align-items:end; }
.advanced-tools .button-row { grid-template-columns:repeat(5,minmax(0,1fr)); }
.advanced-tools .button-row label { display:grid; gap:6px; min-width:0; }
.advanced-tools .button-row button,.settings-grid .button-row button { width:100%; min-width:0; height:auto; min-height:var(--control-height); padding:6px 8px; }
.advanced-tools input[type=number],.advanced-tools select { width:100%; }
.advanced-tools>.hint { margin:0; }
footer { display:flex; justify-content:space-between; align-items:center; gap:16px; letter-spacing:0; font-size:12px; }
footer a { color:var(--text-primary); text-underline-offset:4px; }
.search-actions { display:flex; gap:8px; margin-top:8px; }
.search-actions button { font-size:11px; }
.sound-select { padding-bottom:52px; }
.favourite,.favourite[aria-pressed=true],.favourite:not(:disabled):hover { background:transparent; }
.sound-add { position:absolute; bottom:0; right:0; width:44px; height:44px; min-height:44px; padding:0; border:0; border-left:1px solid var(--border-control); border-top:1px solid var(--border-control); font-size:24px; color:var(--action-primary); background:transparent; }
.sound-add:not(:disabled):hover { background:var(--surface-raised); }
.sound-add:focus-visible { outline-offset:-3px; }
@media(max-width:699px) {
 .advanced-tools .button-row,.settings-grid .button-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 8px; }
 .advanced-tools .button-row button,.settings-grid .button-row button { min-height:44px; }
 .browser-header .section-heading { margin-bottom:8px; }
 #category-filters,#library-sections { padding-top:6px; }
}
/* Composition workspace: compact aligned regions, with the timeline dominant. */
:root { --track-width:176px; --track-height:36px; }
.transport { display:flex; gap:12px; flex-wrap:wrap; min-height:56px; align-items:center; padding:8px 0; }
.transport-group { display:flex; gap:4px; }
.transport>label,.transport .tempo-control,.transport .master-control,.transport .swing-control { flex:none; height:36px; display:grid; grid-template-columns:1fr auto; grid-template-rows:14px 22px; align-items:center; column-gap:8px; max-width:none; line-height:14px; }
.transport .tempo-control { width:74px; grid-template-columns:1fr; }
.transport .tempo-control input { width:74px; height:22px; min-height:22px; padding:0 6px; font-weight:700; }
.transport .tempo-control>span { cursor:ew-resize; touch-action:none; }
.transport .master-control { width:128px; }
.transport .swing-control { width:100px; }
.transport .master-control input,.transport .swing-control input { grid-column:1/-1; height:22px; }
.transport .check { display:flex; height:36px; }
.transport .history button { width:32px; padding:0; font-size:20px; }
.transport #position { font-size:10px; color:var(--text-secondary); }
#project-menu { position:relative; margin:0 0 0 auto; border:0; }
#project-menu>summary { border:1px solid var(--border-control); padding:6px 10px; min-height:32px; }
.project-actions { position:absolute; top:100%; right:0; z-index:10; width:210px; display:grid; gap:8px; padding:12px; border:1px solid var(--border-control); background:var(--surface-default); }
button:disabled,select:disabled,input:disabled { border-style:solid; cursor:not-allowed; text-decoration:line-through; }
.pattern-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 0; border-top:1px solid var(--border-subtle); font-size:12px; }
.pattern-slots { margin:0; max-width:100%; overflow:auto; padding:2px; }
.pattern-slots button { white-space:nowrap; }
.pattern-toolbar>label { display:flex; align-items:center; gap:8px; margin-left:auto; }
#song-editor { margin:0 0 8px; }
.song-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 0; }
#song-sections { display:flex; gap:8px; overflow:auto; padding-bottom:8px; }
.song-section { flex:0 0 220px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8px; padding:12px; border:1px solid var(--border-control); background:var(--surface-default); font-size:11px; }
.song-section strong { grid-column:1/-1; font-size:12px; }
.song-section input { width:54px; }
.timeline-nav { gap:8px; }
#bar-nav { display:none; }
.sequence-row { min-height:var(--track-height); }
#sequence-scroll { max-height:65vh; overflow:auto; }
#step-numbers { position:sticky; top:0; z-index:5; background:var(--background); }
#step-numbers .step-number { background:var(--background); }
.track-head { min-height:var(--track-height); }
.track-head .mute,.track-head .solo { opacity:1; visibility:visible; display:inline-flex; }
.track-head .track-name[aria-pressed=true] { border-left-color:var(--focus); background:var(--surface-raised); }
.track-name { min-width:0; }
.track-head .mute,.track-head .solo { width:26px; min-width:26px; height:28px; min-height:28px; padding:0; font-size:10px; }
.step { min-width:0; touch-action:none; }
.step.selected-note { outline:2px solid var(--focus); outline-offset:-2px; }
#timeline-surface { min-width:100%; }
.velocity-row { min-height:100px; height:100px; }
.velocity-heading { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; font-size:11px; }
.velocity-cell { position:relative; height:96px; min-height:96px; width:100%; padding:0; border:0; background:var(--surface-default); touch-action:none; }
.velocity-cell>span { position:absolute; bottom:0; left:15%; right:15%; background:var(--action-primary); pointer-events:none; }
.velocity-cell.selected { outline:2px solid var(--focus); outline-offset:-2px; }
.velocity-cell:disabled { text-decoration:none; background:var(--background); }
.overview .velocity-row { grid-template-columns:var(--track-width) repeat(var(--columns),minmax(0,1fr)); }
#track-editor { max-width:900px; margin-top:12px; padding:0 12px; }
#track-fields { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
#track-fields>label { display:grid; grid-template-columns:1fr auto; align-items:center; }
#track-fields>label output { font-size:11px; }
#track-fields>label input { grid-column:1/-1; height:24px; }
.parameter-reset { justify-self:start; height:24px; min-height:24px; padding:2px 6px; font-size:10px; }
.track-primary { grid-column:1/-1; max-width:560px; }
.track-more { grid-column:1/-1; margin:0; }
.track-more .button-row { grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); padding-bottom:8px; }
#note-editor { grid-column:1/-1; max-width:none; }
.note-actions { display:flex; gap:8px; flex-wrap:wrap; }
#arrangement-tools .advanced-tools { max-width:900px; }
#help { position:relative; }
@media(min-width:700px) { .step { min-height:36px; height:36px; } .overview { --track-height:34px; } }
@media(max-width:699px) {
 :root { --track-width:160px; --track-height:44px; }
 .transport { gap:8px; position:sticky; padding-top:max(8px,env(safe-area-inset-top)); }
 .transport>label,.transport .tempo-control,.transport .master-control,.transport .swing-control { height:44px; grid-template-rows:18px 26px; }
 .transport .tempo-control input { height:26px; min-height:26px; font-size:16px; }
 .transport .master-control { width:100px; }
 .transport .swing-control { width:84px; }
 .transport .history button { width:44px; }
 #project-menu { margin-left:0; } #project-menu>summary { min-height:44px; padding:10px; }
 .project-actions { right:auto; left:0; }
 .pattern-toolbar { gap:6px; } .pattern-slots { flex-basis:100%; }
 .pattern-toolbar>label { margin-left:0; }
 .track-head .mute,.track-head .solo { display:inline-flex; width:32px; min-width:32px; min-height:44px; height:44px; }
 .track-name { padding:0 3px; } .track-name .icon { display:none; }
 #track-editor[open] { position:fixed; bottom:0; left:0; right:0; max-height:65vh; overflow:auto; z-index:8; margin:0; border-top:2px solid var(--border-strong); padding-bottom:max(12px,env(safe-area-inset-bottom)); }
 #track-editor[open]>summary { position:sticky; top:0; background:var(--surface-default); z-index:1; }
 #track-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .parameter-reset { min-height:44px; }
 .settings-grid .track-primary { grid-column:1/-1; }
}
.transport>#project-menu { flex:none; margin-left:auto; overflow:visible; }
.transport>#project-menu>summary { display:list-item; }
.transport .swing-control output { white-space:nowrap; }
.pattern-toolbar>label[for=playback-scope] { margin-left:0; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:16px; }
.workspace:has(#track-editor[open]) { grid-template-columns:minmax(0,1fr) 220px; }
#track-editor { min-width:0; width:100%; margin:0; }
#track-fields { grid-template-columns:1fr; }
#track-fields .track-primary { grid-template-columns:1fr 1fr; }
#track-fields .track-more .button-row { grid-template-columns:1fr; }
.track-head:has(.track-name[aria-pressed=true]) { border-left-color:var(--focus); }
.sequence-footer { justify-content:flex-start; }
#pattern-info { margin-left:auto; }
#step-numbers { cursor:grab; touch-action:none; }
#step-numbers:active { cursor:grabbing; }
@media(max-width:699px) { .workspace:has(#track-editor[open]) { grid-template-columns:minmax(0,1fr); } #track-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } .transport>#project-menu { margin-left:0; } }
.transport .master-control { width:158px; grid-template-columns:minmax(0,1fr) 34px; }
.transport .master-control>span { grid-row:1; grid-column:1/-1; }
.transport .master-control>output { grid-row:2; grid-column:2; text-align:right; }
.transport .master-control>input { grid-row:2; grid-column:1; }
.transport .swing-control { width:128px; grid-template-columns:minmax(0,1fr) 28px; }
.transport .swing-control>output { grid-row:2; grid-column:2; text-align:right; }
.transport .swing-control>input { grid-row:2; grid-column:1; }
@media(max-width:699px) { .transport .master-control { width:140px; } .transport .swing-control { width:110px; } }
.transport label.master-control input[type=range],.transport label.swing-control input[type=range] { grid-column:1; width:100%; }
.pattern-slots button { flex:0 0 auto; }
.pattern-actions { position:relative; border:0; margin:0; }
.pattern-actions>summary { padding:6px 10px; border:1px solid var(--border-control); min-height:32px; }
.pattern-actions>div { position:absolute; top:100%; left:0; z-index:7; display:grid; min-width:160px; gap:8px; padding:12px; background:var(--surface-default); border:1px solid var(--border-control); }
header>#help { margin:0 0 0 8px; border:0; }
header>#help summary { padding:0; min-height:24px; font-size:11px; }
header>#help>p { position:fixed; bottom:24px; right:24px; max-width:400px; max-height:60vh; overflow:auto; z-index:10; padding:20px; margin:0; background:var(--surface-default); border:1px solid var(--border-control); }
.timeline-guidance { font-size:10px; color:var(--text-secondary); }
.rail-resize { position:absolute; right:0; top:0; bottom:0; width:10px; cursor:col-resize; border-right:2px solid var(--border-control); touch-action:none; }
@media(max-width:699px){
 .transport { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
 .transport-group { grid-column:1/3; grid-row:1; } .transport-group button { flex:1; padding:0 5px; }
 .transport .tempo-control { grid-column:3/5; grid-row:1; width:100%; } .transport .tempo-control input { width:100%; }
 .transport .master-control { grid-column:1/3; grid-row:2; width:100%; }
 .transport .swing-control { grid-column:3/5; grid-row:2; width:100%; }
 .transport .history { grid-column:1/3; grid-row:3; }
 .transport>.check { grid-column:3/5; grid-row:3; }
 .transport>#project-menu { grid-column:1/3; grid-row:4; margin:0; }
 .transport>#position { grid-column:3/5; grid-row:4; }
 .transport>#project-menu>summary { font-size:11px; }
 .pattern-actions>summary { min-height:44px; padding:12px 10px; }
 .track-name .icon { display:inline-block; width:14px; height:14px; }
 header>#help { margin-left:auto; } header>#help>p { left:16px; right:16px; bottom:16px; }
}
@media(max-width:699px) {
 .track-head .mute,.track-head .solo { min-width:44px; width:44px; }
 #instrument-browser { inset:auto 0 0; height:92vh; height:92dvh; max-height:92dvh; border-top:2px solid var(--border-control); }
}
.velocity-heading button { min-height:28px; height:28px; font-size:10px; padding:2px 6px; }
@media(pointer:coarse) { .velocity-heading button { min-height:44px; height:44px; } }
@media(max-width:699px) {
 .track-head .track-label { white-space:normal; overflow-wrap:anywhere; text-overflow:clip; font-size:11px; line-height:12px; }
}
.history button { position:relative; }
.history button:disabled::after { content:''; position:absolute; left:6px; right:6px; top:50%; height:1px; background:var(--text-secondary); transform:rotate(-35deg); pointer-events:none; }