/* SPDX-License-Identifier: MIT */
#sync-status{font-size:12px;color:var(--muted);padding:8px 2px;min-height:32px}
#record[aria-pressed=true]{background:#d34f63;color:#fff;border-color:#d34f63}
:root{color-scheme:dark;--bg:#101316;--panel:#191e21;--line:#303a3d;--fg:#e9efde;--muted:#9ba9a0;--accent:#b5e65a;--ink:#192015;--track:#b5e65a;font:14px/1.5 'Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg)}button,input,select{font:inherit}button,select,.file-button{border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--fg);padding:9px 14px;cursor:pointer}button:hover:not(:disabled),.file-button:hover{border-color:var(--accent)}button:disabled{opacity:.35;cursor:default}button.accent,button[aria-selected=true]{background:var(--accent);color:var(--ink);border-color:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible,.key:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input{accent-color:var(--accent)}input[type=number]{width:76px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);padding:7px}input[type=range]{width:100%;min-width:70px}select{max-width:100%}header{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding:20px 4vw}.brand{display:flex;gap:12px;align-items:center}.brand strong{font-size:20px;letter-spacing:.11em}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.15em}.sigil{display:grid;place-items:center;background:var(--accent);color:var(--ink);width:42px;height:46px;font-size:32px;font-weight:900;transform:skew(-8deg);border-radius:9px}.top-controls,.row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}main{max-width:1320px;margin:auto;padding:0 28px}h1{font-size:clamp(28px,4vw,45px);line-height:1.1;letter-spacing:-.03em;margin:8px 0}h2{font-size:18px;font-weight:600;margin:0 0 14px}h3{font-size:15px;margin-top:28px}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--accent);margin:0 0 8px}.muted,small{color:var(--muted)}.hero{display:flex;justify-content:space-between;align-items:center;padding:30px 0 20px;gap:24px}.hero p.muted{max-width:780px}.card{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--panel)}.transport{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:14px 18px}.transport label{display:flex;align-items:center;gap:8px}.transport input[type=range]{width:80px}.grow{flex:1}label>span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}.transport label>span{margin:0}#tracks{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:22px 0}#tracks button{text-align:left;padding:14px 16px;border-top:3px solid var(--color)}#tracks strong{display:block;font-size:16px}#tracks small{display:block;font-size:10px;letter-spacing:.04em;margin-top:4px}#tracks button[aria-selected=true]{color:var(--fg);background:var(--panel);border-color:var(--color);box-shadow:inset 0 0 35px #b5e65a08}.tabs{display:flex;gap:5px;margin-bottom:18px;overflow-x:auto}.tabs button{border-radius:7px 7px 0 0;white-space:nowrap;border-bottom:2px solid transparent}.tabs button[aria-selected=true]{background:transparent;color:var(--accent);border-color:transparent;border-bottom-color:var(--accent)}.sound-header{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-bottom:16px}.sound-header h2{margin:0;min-width:160px}.sound-header select{width:100%}.sound-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}.control label{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;gap:12px}.control output{color:var(--fg);font-variant-numeric:tabular-nums}.control select{width:100%}canvas{width:100%;height:100px;display:block;margin-bottom:16px;border-radius:8px;background:var(--bg)}#waveform{height:150px;margin-top:18px}#keys{display:flex;margin-top:12px;touch-action:none;gap:3px}.key{height:88px;flex:1;border-radius:4px;background:#dce3d3;color:#273123;border:0;padding:0;display:flex;align-items:flex-end;justify-content:center;font-size:11px;user-select:none}.key.black{height:58px;background:#303b35;color:#b3c3b5}.key.held{background:var(--accent)}.keyboard{margin-top:20px;padding:15px 18px}.keyboard .row button{padding:4px 10px}.pill{font-size:11px;color:var(--muted);padding:6px 9px;border-radius:20px;border:1px solid var(--line)}.pill.connected{color:var(--accent)}.meter-box{min-width:100px;text-align:right}.meter{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-bottom:7px}.meter i{display:block;width:0;height:100%;background:var(--accent);transition:width .05s}#status{padding:12px 0;color:var(--accent);min-height:46px}#status.error{color:#ff938b}footer{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px;border-top:1px solid var(--line);padding:16px 0 24px}#step-grid{display:grid;grid-template-columns:repeat(16,1fr);gap:6px;margin:20px 0}#step-grid button{min-width:0;height:65px;padding:4px;font-size:11px}#step-grid button.on{background:var(--accent);color:var(--ink)}#step-grid button.selected{outline:2px solid var(--fg);outline-offset:2px}#step-grid button.playhead{box-shadow:inset 0 -5px 0 #b478ff}#banks button{padding:5px 14px}#mixer-strips{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.strip{border-left:2px solid var(--color);padding-left:12px}.strip label{display:block;margin:15px 0}.strip input{width:100%}.file-button{display:inline-flex;position:relative;overflow:hidden;align-items:center}.file-button span{margin:0;color:var(--fg)}.file-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}progress{accent-color:var(--accent);width:150px}a{color:var(--accent)}[hidden]{display:none!important}
body[data-theme=neon]{--bg:#100f1c;--panel:#1b1730;--line:#383052;--fg:#eee9ff;--muted:#aaa0c7;--accent:#cf91ff;--ink:#241432}
body[data-theme=paper]{color-scheme:light;--bg:#eceee5;--panel:#fafbf5;--line:#cdd5c7;--fg:#243124;--muted:#65715e;--accent:#456f2b;--ink:#fff}
@media(max-width:850px){header{flex-direction:column;align-items:flex-start;padding:16px 20px}.sound-grid{grid-template-columns:1fr}main{padding:0 16px}#tracks{grid-template-columns:repeat(3,1fr)}#mixer-strips{grid-template-columns:repeat(3,1fr)}#step-grid{grid-template-columns:repeat(8,1fr)}.hero{padding:24px 0 12px}.hero .meter-box{display:none}footer{flex-direction:column;gap:5px}.card{padding:16px}}@media(max-width:480px){.top-controls{gap:7px}.top-controls button{font-size:12px;padding:8px}.controls{gap:16px}.sound-header{gap:14px}.sound-header label{flex:1;min-width:120px}#mixer-strips{grid-template-columns:1fr 1fr}.key{height:70px;font-size:9px}#tracks button{padding:10px}.brand strong{font-size:18px}.pill{display:none}}

/* Original 0.4 console: compact typography, restrained surfaces and persistent transport. */
:root{--bg:#101214;--panel:#16191c;--line:#2b3034;--fg:#e7e9e6;--muted:#939d9b;--accent:#c1e77e;--ink:#182110;font:13px/1.45 'Segoe UI',system-ui,sans-serif}
header{padding:14px 3vw}.brand strong{font-size:17px}.sigil{width:32px;height:34px;font-size:25px;border-radius:3px;transform:none}main{max-width:1440px}.hero{padding:20px 0 16px}.hero h1{font-size:26px;letter-spacing:-.02em}.hero .eyebrow{font-size:10px}.hero p.muted{margin:5px 0}.hero .meter-box{width:140px}.card{border-radius:5px;padding:18px}button,select,.file-button{border-radius:4px;padding:8px 12px}.transport{position:sticky;top:0;z-index:5;background:var(--bg);border-color:var(--line);padding:11px 12px;gap:10px;box-shadow:0 5px 16px #0004}.transport #tempo{width:72px;font:600 19px 'Segoe UI',sans-serif}.transport #play[aria-pressed=true]{box-shadow:0 0 0 2px var(--accent)}.transport #record{color:#ff8694}#tracks{gap:6px;margin:8px 0 18px}#tracks button{padding:10px 12px;border-top-width:2px;border-radius:3px}#tracks strong{font-size:13px}#tracks button[aria-selected=true]{background:#22292b;box-shadow:none}.tabs{border-bottom:1px solid var(--line);margin-bottom:16px;gap:12px}.tabs button{border-radius:0;background:none;padding:9px 4px}.sound-header{padding:14px 18px;gap:18px}.sound-header h2{font-size:20px;min-width:110px}.sound-grid{gap:12px}.sound-grid h2{font-size:13px;letter-spacing:.035em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:9px}.controls{gap:13px 22px}canvas{height:72px;border-radius:2px}.control label{font-size:11px}.control output{color:var(--accent);font-family:Consolas,monospace}.control select{padding:6px 10px}input[type=range]{height:15px}.keyboard{border-radius:4px}.key{height:65px}.key.black{height:44px}#status{font-size:12px;min-height:40px}#sync-status{font:11px Consolas,monospace;min-height:30px}.pill{border-radius:4px}.record-setup{padding:12px 0}#step-edit input[type=text]{width:170px;background:var(--bg);color:var(--fg);border:1px solid var(--line);padding:8px}#live-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0;touch-action:none}#live-pads button{height:74px;font:12px Consolas,monospace;text-align:left;padding:16px;border-color:var(--line);user-select:none}#live-pads button[aria-pressed=true]{background:var(--accent);color:var(--ink);border-color:var(--accent)}#step-grid button{height:58px;font-size:10px}#step-grid button.playhead{box-shadow:inset 0 -4px 0 #fff}.panel p{max-width:1000px}footer{font-size:9px}
@media(max-width:850px){.transport{position:relative}.sound-grid{grid-template-columns:1fr}.hero h1{font-size:23px}#live-pads{gap:6px}#live-pads button{height:60px;padding:9px;font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* 0.4.1: one visual hierarchy, full hardware keyboard and fast live controls. */
.hero{padding:13px 0}.hero h1{font-size:22px;margin:4px 0}.hero .muted{font-size:11px}.hero .eyebrow{font-size:9px}.brand small{font-family:Consolas,monospace}.transport{gap:8px}.transport #undo,.transport #redo{font-size:11px;padding:7px 9px}.position-display{font:17px Consolas,monospace;color:var(--accent);white-space:nowrap;padding:0 8px;min-width:84px}.tabs button{border:0}.tabs button[aria-selected=true]{border-bottom:2px solid var(--accent)}.sound-header .eyebrow{display:none}#preset-search{display:block;width:100%;min-width:150px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:3px;padding:6px 10px;margin-bottom:5px;font:12px inherit}.live-tracks{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:14px 0}.live-strip{border-top:2px solid var(--color);background:var(--bg);padding:9px;display:flex;gap:5px;align-items:center}.live-strip span{font:10px Consolas,monospace;flex:1}.live-strip button{font:11px Consolas,monospace;padding:5px 8px}.live-strip button[aria-pressed=true]{background:var(--color);border-color:var(--color);color:var(--ink)}#live-pads{gap:8px;margin:12px 0}#live-pads button{height:58px;padding:12px}.pattern-actions{padding:12px 0;border-top:1px solid var(--line)}.pattern-actions #toggle-step{margin-left:auto}.pattern-actions #toggle-step[aria-pressed=true]{background:var(--accent);color:var(--ink)}#step-grid button{font-family:Consolas,monospace}#step-grid button:nth-child(4n+1){border-left:2px solid var(--muted)}.keyboard{padding:12px}#keys{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));position:relative;gap:2px;height:112px;min-width:0;padding:0;margin-top:12px}.key{position:relative;height:112px;grid-row:1;background:#dce0d8;color:#202620;border-radius:0 0 3px 3px;font-size:10px;padding-bottom:9px;box-shadow:inset 0 -4px #0002;touch-action:none}.key.black{position:absolute;top:0;width:3.7%;height:72px;background:#292e31;color:#bec8c3;z-index:2;border:1px solid #101214;box-shadow:inset 0 -5px #0003;padding-bottom:7px}.key.held,.key.black.held{background:var(--accent);color:var(--ink)}.key:hover{filter:brightness(1.08)}.transport #play{background:var(--panel);color:var(--accent)}.transport #play[aria-pressed=true]{background:var(--accent);color:var(--ink);box-shadow:none}.transport #record[aria-pressed=true]{background:#d34f63;color:white}#status{position:sticky;bottom:0;z-index:4;padding:8px 12px;background:var(--bg);border-top:1px solid var(--line);min-height:34px}.sound-grid .card{padding:16px}.control label{min-height:20px}.record-setup{gap:14px}#step-edit{align-items:flex-end}#step-edit label{flex:1;min-width:92px}#step-edit input{max-width:100%}#step-edit input[type=text]{width:220px}.panel>p.muted{font-size:12px;line-height:1.55}
@media(max-width:1100px){.live-tracks{grid-template-columns:repeat(3,1fr)}.transport{flex-wrap:wrap}.position-display{margin-left:auto}.transport .grow{display:none}}@media(max-width:600px){header{gap:12px}.hero{display:none}.transport{margin-top:12px;padding:10px;gap:7px}.transport label:has(#swing),.transport label:has(#clock){flex:1;min-width:140px}#tracks{margin-top:12px;gap:5px}.live-strip{padding:6px}.live-strip span{font-size:9px}.live-strip button{padding:5px 7px}#keys{height:90px}.key{height:90px;font-size:8px}.key.black{height:58px;font-size:0}#live-pads button{height:53px;font-size:10px;padding:9px}.keyboard .row small{flex-basis:100%}.pattern-actions #toggle-step{margin-left:0}.tabs{gap:9px}.sound-header{gap:10px}.sound-header h2{font-size:18px}}

#clock-details{position:relative}#clock-details summary{list-style:none;cursor:pointer;padding:8px 10px;border:1px solid var(--line);border-radius:4px;font-size:11px;color:var(--muted)}#clock-details summary::-webkit-details-marker{display:none}#clock-details[open] summary{color:var(--accent);border-color:var(--accent)}.timing-popover{position:absolute;top:calc(100% + 12px);left:0;min-width:290px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:5px;box-shadow:0 10px 30px #0006;display:grid;gap:15px;z-index:12}.timing-popover label{justify-content:space-between}.timing-popover input[type=range]{width:100px}.timing-popover select{max-width:170px}.transport>.position-display{margin-left:4px}.transport #tempo{font-size:20px}.transport{flex-wrap:wrap}.hero{padding:10px 0}.hero .muted{display:none}.hero h1{font-size:20px}.hero .eyebrow{margin-bottom:2px}.hero .meter-box{width:100px}
@media(max-width:600px){.timing-popover{left:auto;right:0;min-width:270px;max-width:90vw}.transport>.position-display{margin-left:0}.transport #save-device{font-size:11px}.position-display{font-size:14px;min-width:70px}}

.system-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}.system-block{border:1px solid var(--line);border-radius:12px;padding:22px;min-width:0}.system-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.system-fields input:not([type=range]),.system-fields select{width:100%}.system-fields input[type=range]{min-width:60px;flex:1}.system-fields .row{flex-wrap:nowrap}.system-block label{display:flex;flex-direction:column;gap:9px}.system-block p{line-height:1.65}.core-state{display:block;font-size:22px;color:var(--accent);margin:18px 0}.core-state.warn{color:#f3aa67}.profile-block{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:24px}.profile-block small{grid-column:1/-1}.system-save{grid-column:1/-1}.system-save p{font-size:12px}@media(max-width:720px){.system-grid,.profile-block{grid-template-columns:1fr}.system-fields{grid-template-columns:1fr}}

.system-fields input[type=text]{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:10px 12px;min-width:0}.system-block h3{font-size:18px;margin:10px 0 20px}.system-block .eyebrow{margin:0}.system-block p.muted{font-size:12px}.system-block .system-fields label span{font-size:12px;color:var(--muted)}

/* Original pad workstation. The 4x4 layout follows physical white-key order. */
.pad-workstation{border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:28px}.sampler-layout{display:grid;grid-template-columns:minmax(260px,1fr) minmax(320px,1.2fr);gap:26px;margin:24px 0}.pad-banks{margin-bottom:12px}.pad-banks button{min-width:100px}#sampler-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}#sampler-pads button{height:91px;white-space:pre-line;text-align:left;padding:14px;font-size:11px;line-height:1.8;border-radius:7px;background:var(--bg);border:1px solid var(--line)}#sampler-pads button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}#sampler-pads button.held{background:var(--accent);color:var(--bg)}.pad-editor{min-width:0}#pad-wave{width:100%;height:100px;background:var(--bg);border-radius:6px;margin-top:14px}#pad-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}#pad-fields label{display:grid;gap:6px;font-size:11px;color:var(--muted)}#pad-fields input,#pad-fields select{width:100%;min-width:0;padding:9px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:4px}.pad-map-actions{margin-top:16px}#sampler-help,#sampler-map-note{font-size:12px;line-height:1.7}#pad-duration{font-size:11px}#pad-name{margin:0}.pad-editor .row button{font-size:10px;padding:7px}.pad-editor .row{gap:7px}
@media(max-width:840px){.sampler-layout{grid-template-columns:1fr}#sampler-pads button{height:76px}.pad-workstation>.row{align-items:flex-start}.pad-map-actions{flex-wrap:wrap}}

/* Text alignment: fixed baselines, bounded names, equal bank/editor headers. */
.pad-workstation>.row{align-items:center;gap:16px}.pad-workstation>.row h2{margin:0;line-height:1.3}.pad-workstation>.row>div{min-width:0}.pad-workstation>.row>button{max-width:100%;white-space:normal;line-height:1.4}
.pad-banks,.pad-editor>.row{min-height:38px;margin:0 0 12px;align-items:center}.pad-editor>.row{flex-wrap:wrap}.pad-banks button{height:38px;padding:8px 14px}.pad-editor>.row h3{line-height:1.3;font-variant-numeric:tabular-nums}#pad-wave{margin:0 0 12px}#pad-duration{min-height:18px;margin:0 0 14px;font-variant-numeric:tabular-nums}
#sampler-pads{align-items:stretch;grid-auto-rows:86px}#sampler-pads button{display:grid;grid-template-rows:auto auto;align-content:center;justify-items:start;gap:6px;min-width:0;height:100%;padding:12px;line-height:1.3;white-space:normal;font-variant-numeric:tabular-nums}#sampler-pads .pad-code{font-size:12px;line-height:16px;letter-spacing:.03em}#sampler-pads .pad-source{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:15px}
#pad-fields{align-items:start;gap:14px 16px}#pad-fields label{gap:6px;line-height:1.4}#pad-fields label>span{margin:0;min-height:18px;line-height:18px}#pad-fields input,#pad-fields select{height:40px;margin:0;font-size:13px;line-height:20px;font-variant-numeric:tabular-nums}#sampler-help,#sampler-map-note{overflow-wrap:anywhere}
@media(max-width:840px){#sampler-pads{grid-auto-rows:76px}.pad-editor>.row{justify-content:flex-start}.pad-editor>.row h3{margin-right:auto}}@media(max-width:440px){#sampler-pads{gap:6px;grid-auto-rows:70px}#sampler-pads button{padding:8px}#pad-fields{gap:12px}#pad-fields label{font-size:10px}.pad-editor>.row .grow{display:none}}

@media(max-width:440px){#pad-fields label>span{min-height:36px}}