:root{--font-display: "Bricolage Grotesque", "SF Pro Display", -apple-system, system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--fs-xs: 9.5px;--fs-sm: 10.5px;--fs-md: 12.5px;--fs-lg: 14px;--fs-xl: 17px;--fs-xxl: 30px;--tracking-wide: .09em;--tracking-ultra: .18em;--bg: #efece4;--bg-deep: #e4e0d5;--panel: #f8f6f1;--well: #e2ddd0;--line: #cdc6b5;--line-soft: #ded8c9;--line-strong: #a9a08a;--text: #14130f;--text-dim: #46413a;--text-faint: #655e4f;--ph-1: #f0dcae;--ph-2: #e2b95c;--ph-3: #c98a12;--ph-4: #a4650a;--ph-5: #7a4703;--ph-ink: #241703;--ph-glow: transparent;--accent-text: #7a4703;--accent-fill: #7a4703;--accent-fill-ink: #f8f6f1;--signal: #0a6470;--signal-soft: #b8dfe4;--danger: #a8281e;--hover: rgba(20, 19, 15, .055);--press: rgba(20, 19, 15, .1);--focus: #0d7a88;--scan-alpha: .032;--grain-alpha: .03;--radius: 0px;--hair: 1px;--band: 34px;--roster-w: 226px;--inspector-w: 296px;--step-4: steps(4, end);--step-5: steps(5, end);--step-6: steps(6, end);--t-fast: 90ms;--t-mid: .16s;--t-slow: .26s}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #0a0b0c;--bg-deep: #060707;--panel: #111315;--well: #08090a;--line: #23272b;--line-soft: #191c1f;--line-strong: #3a4046;--text: #dbe0e5;--text-dim: #8b939b;--text-faint: #787f86;--ph-1: #4a3106;--ph-2: #7d5307;--ph-3: #b8790b;--ph-4: #eda219;--ph-5: #ffc95c;--ph-ink: #140d01;--ph-glow: rgba(255, 175, 40, .28);--accent-text: #eda219;--accent-fill: #eda219;--accent-fill-ink: #140d01;--signal: #3fd8e8;--signal-soft: #0e3a40;--danger: #ff5b4a;--hover: rgba(219, 224, 229, .06);--press: rgba(219, 224, 229, .12);--focus: #3fd8e8;--scan-alpha: .055;--grain-alpha: .045}}:root[data-theme=dark]{--bg: #0a0b0c;--bg-deep: #060707;--panel: #111315;--well: #08090a;--line: #23272b;--line-soft: #191c1f;--line-strong: #3a4046;--text: #dbe0e5;--text-dim: #8b939b;--text-faint: #787f86;--ph-1: #4a3106;--ph-2: #7d5307;--ph-3: #b8790b;--ph-4: #eda219;--ph-5: #ffc95c;--ph-ink: #140d01;--ph-glow: rgba(255, 175, 40, .28);--accent-text: #eda219;--accent-fill: #eda219;--accent-fill-ink: #140d01;--signal: #3fd8e8;--signal-soft: #0e3a40;--danger: #ff5b4a;--hover: rgba(219, 224, 229, .06);--press: rgba(219, 224, 229, .12);--focus: #3fd8e8;--scan-alpha: .055;--grain-alpha: .045}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:var(--fs-md);font-variant-ligatures:none;-webkit-font-smoothing:antialiased;overflow:hidden;transition:background var(--t-slow) var(--step-5),color var(--t-slow) var(--step-5)}button,input,select{font:inherit;color:inherit}button{background:none;border:0;cursor:pointer;padding:0}:focus-visible{outline:2px solid var(--focus);outline-offset:1px}@keyframes band-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@keyframes rail-in{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:none}}@keyframes rail-in-r{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:none}}@keyframes cell-lit{0%{transform:scale(.55)}to{transform:scale(1)}}@keyframes stage-in{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}@keyframes dialog-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@keyframes bloom-drift{0%{transform:translate3d(-6%,-4%,0)}50%{transform:translate3d(6%,5%,0)}to{transform:translate3d(-6%,-4%,0)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.crt-scan,.crt-grain,.crt-bloom{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:90}.crt-scan{background-image:repeating-linear-gradient(to bottom,rgba(0,0,0,var(--scan-alpha)) 0px,rgba(0,0,0,var(--scan-alpha)) 1px,transparent 1px,transparent 3px)}.crt-grain{opacity:var(--grain-alpha);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}.crt-bloom{z-index:0;opacity:.03;background:radial-gradient(38% 44% at 22% 18%,var(--ph-4),transparent 70%),radial-gradient(42% 38% at 78% 82%,var(--signal),transparent 72%);animation:bloom-drift 24s linear infinite}.shell{position:relative;z-index:1;height:100%;display:grid;grid-template-rows:var(--band) minmax(0,1fr) auto}.workbench{display:grid;grid-template-columns:var(--roster-w) minmax(0,1fr) var(--inspector-w);min-height:0;border-block:var(--hair) solid var(--line)}.lbl{font-size:var(--fs-xs);letter-spacing:var(--tracking-ultra);text-transform:uppercase;color:var(--text-faint)}.btn{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border:var(--hair) solid var(--line);background:var(--panel);color:var(--text-dim);font-size:var(--fs-sm);letter-spacing:var(--tracking-wide);text-transform:uppercase;white-space:nowrap;transition:background var(--t-fast) var(--step-4),color var(--t-fast) var(--step-4),border-color var(--t-fast) var(--step-4),transform var(--t-fast) var(--step-4)}.btn:hover{background:var(--hover);color:var(--text);border-color:var(--line-strong)}.btn:active{transform:translateY(1px);background:var(--press)}.btn[aria-pressed=true],.btn.on{background:var(--accent-fill);color:var(--accent-fill-ink);border-color:var(--accent-fill)}.btn.ghost{border-color:transparent;background:none}.btn.ghost:hover{border-color:var(--line)}.btn.danger:hover{color:var(--danger);border-color:var(--danger)}.btn.icon{width:22px;padding:0;justify-content:center}.btn.accent{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-fill-ink);font-weight:600}.btn.accent:hover{filter:brightness(1.15)}.btn.big{height:34px;flex:1;justify-content:center;font-size:var(--fs-md);border-color:var(--line-strong)}.btn.big:hover{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-fill-ink)}.export-actions{display:flex;gap:6px;margin-top:12px}.btn:disabled{opacity:.35;cursor:not-allowed}.sep{width:var(--hair);align-self:stretch;background:var(--line);margin:0 2px}.status{display:flex;align-items:center;gap:8px;padding:0 8px;background:var(--panel);animation:band-in var(--t-mid) var(--step-4) both}.brand{display:flex;align-items:baseline;gap:7px;font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);letter-spacing:.02em;font-variation-settings:"wdth" 82,"opsz" 14;white-space:nowrap}.brand .mark{color:var(--ph-4);letter-spacing:-.15em}.brand .ver{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-faint);letter-spacing:0}.transport{display:flex;align-items:center;gap:4px}.play{width:30px;height:22px;border:var(--hair) solid var(--line-strong);background:var(--panel);display:grid;place-items:center;transition:background var(--t-fast) var(--step-4),border-color var(--t-fast) var(--step-4)}.play:hover{background:var(--hover)}.play.running{background:var(--signal);border-color:var(--signal);color:var(--bg)}.play svg{display:block}.lamp{width:7px;height:7px;background:var(--line-strong);transition:background var(--t-fast) var(--step-4)}.lamp.live{background:var(--signal)}.bpm{display:flex;align-items:baseline;gap:5px}.bpm-val{font-family:var(--font-display);font-size:var(--fs-xxl);font-weight:700;line-height:1;font-variation-settings:"wdth" 76,"opsz" 30;font-variant-numeric:tabular-nums;color:var(--text);background:none;border:0;width:3.1ch;padding:0;text-align:right;cursor:ns-resize;transition:color var(--t-fast) var(--step-4)}.bpm-val:hover{color:var(--accent-text)}.bpm-val:focus{cursor:text;outline:2px solid var(--focus)}.pats{display:flex;gap:2px}.pat{position:relative;width:22px;height:22px;border:var(--hair) solid var(--line);background:var(--panel);color:var(--text-faint);font-size:var(--fs-sm);font-weight:600;display:grid;place-items:center;transition:background var(--t-fast) var(--step-4),color var(--t-fast) var(--step-4),border-color var(--t-fast) var(--step-4)}.pat:hover{border-color:var(--line-strong);color:var(--text)}.pat.filled{color:var(--text-dim);border-color:var(--line-strong)}.pat.editing{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-fill-ink)}.pat.playing:after{content:"";position:absolute;inset-inline:1px;bottom:1px;height:2px;background:var(--signal)}.pat .chain-dot{position:absolute;top:1px;right:1px;width:3px;height:3px;background:var(--signal)}.meter{width:46px;height:6px;background:var(--well);border:var(--hair) solid var(--line);overflow:hidden}.meter i{display:block;height:100%;background:var(--ph-4);transform-origin:left;transition:transform 70ms var(--step-6)}.meter i.hot{background:var(--danger)}.spacer{flex:1 1 auto}.roster{display:flex;flex-direction:column;min-height:0;background:var(--panel);border-right:var(--hair) solid var(--line);animation:rail-in var(--t-slow) var(--step-5) both}.roster-head,.inspector-head{display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 8px;border-bottom:var(--hair) solid var(--line);background:var(--bg-deep)}.roster-list{flex:1 1 auto;overflow-y:auto;min-height:0}.trk{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:6px;padding:5px 8px;border-bottom:var(--hair) solid var(--line-soft);cursor:pointer;transition:background var(--t-fast) var(--step-4);animation:rail-in var(--t-mid) var(--step-4) both}.trk:hover{background:var(--hover)}.trk.sel{background:var(--well);box-shadow:inset 3px 0 0 var(--ph-4)}.trk-idx{color:var(--text-faint);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}.trk-main{min-width:0}.trk-name{display:block;width:100%;background:none;border:0;padding:0;font-size:var(--fs-md);color:var(--text);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.trk-name:focus{background:var(--well);outline:1px solid var(--focus)}.trk-meta{display:flex;align-items:center;gap:5px;margin-top:1px}.badge{font-size:var(--fs-xs);letter-spacing:var(--tracking-wide);padding:0 3px;border:var(--hair) solid var(--line-strong);color:var(--text-dim)}.trk.sel .badge{border-color:var(--accent-text);color:var(--accent-text)}.trk-hits{font-size:var(--fs-xs);color:var(--text-faint);font-variant-numeric:tabular-nums}.trk-btns{display:flex;gap:2px}.ms{width:16px;height:16px;border:var(--hair) solid var(--line);font-size:var(--fs-xs);font-weight:700;color:var(--text-faint);display:grid;place-items:center;transition:all var(--t-fast) var(--step-4)}.ms:hover{border-color:var(--line-strong);color:var(--text)}.ms.m-on{background:var(--danger);border-color:var(--danger);color:var(--bg)}.ms.s-on{background:var(--signal);border-color:var(--signal);color:var(--bg)}.roster-foot{display:flex;gap:4px;padding:6px;border-top:var(--hair) solid var(--line)}.roster-foot .btn{flex:1;justify-content:center}.stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);animation:stage-in var(--t-slow) var(--step-5) both}.stage-head{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-height:26px;padding:3px 8px;border-bottom:var(--hair) solid var(--line);background:var(--bg-deep)}.range{font-size:var(--fs-sm);color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}.oct{display:flex;align-items:center;gap:3px}.stage-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);font-variation-settings:"wdth" 84;letter-spacing:.01em}.stage-body{flex:1 1 auto;overflow:auto;padding:10px 12px 14px;min-height:0;display:grid;align-content:center}.grid-wrap{display:grid;grid-template-columns:74px minmax(0,1fr);grid-template-rows:auto repeat(8,minmax(32px,62px));gap:0 6px;min-width:560px}.ruler{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px}.ruler-cell{text-align:center;font-size:var(--fs-xs);color:var(--text-faint);font-variant-numeric:tabular-nums;padding-bottom:3px;border-bottom:2px solid transparent;transition:color var(--t-fast) var(--step-4),border-color var(--t-fast) var(--step-4)}.ruler-cell.downbeat{color:var(--text-dim);font-weight:600}.ruler-cell.beyond{opacity:.28}.ruler-cell.now{color:var(--signal);border-bottom-color:var(--signal)}.grid-rows{display:contents}.row-label{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:0;padding-right:6px;border-bottom:var(--hair) solid var(--line-soft);cursor:pointer;transition:background var(--t-fast) var(--step-4)}.row-label:hover{background:var(--hover)}.row-label .name{font-size:var(--fs-sm);color:var(--text-dim);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-label.cursor-row .name{color:var(--accent-text)}.row-label.tonic{box-shadow:inset 2px 0 0 var(--signal)}.row-label.tonic .name{color:var(--text);font-weight:600}.row-label .smp{font-size:var(--fs-xs);color:var(--signal)}.row-cells{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;min-height:0;align-items:stretch;padding-bottom:var(--hair)}.cell{position:relative;border:var(--hair) solid var(--line);background:var(--well);transition:background var(--t-fast) var(--step-4),border-color var(--t-fast) var(--step-4)}.cell.beat{border-color:var(--line-strong)}.cell.beyond{opacity:.3}.cell:hover{border-color:var(--ph-3)}.cell.now{box-shadow:inset 0 0 0 1px var(--signal)}.cell.cursor{outline:1px dashed var(--signal);outline-offset:-3px}.cell.on{border-color:transparent;animation:cell-lit var(--t-fast) var(--step-4)}.cell.on.v1{background:var(--ph-1)}.cell.on.v2{background:var(--ph-2)}.cell.on.v3{background:var(--ph-3)}.cell.on.v4{background:var(--ph-4);box-shadow:0 0 7px var(--ph-glow)}.cell.on.v5{background:var(--ph-5);box-shadow:0 0 11px var(--ph-glow)}.cell .gate{position:absolute;top:50%;left:100%;height:2px;transform:translateY(-50%);background:var(--ph-3);pointer-events:none;opacity:.75}.stage-foot{display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-top:var(--hair) solid var(--line);background:var(--bg-deep)}.inspector{display:flex;flex-direction:column;min-height:0;background:var(--panel);border-left:var(--hair) solid var(--line);animation:rail-in-r var(--t-slow) var(--step-5) both}.inspector-body{flex:1 1 auto;overflow-y:auto;min-height:0;padding-bottom:12px}.tabs{display:flex;gap:2px}.tabs .btn{height:19px;padding:0 9px}.insp-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px}.insp-row .btn{height:18px;padding:0 7px;font-size:var(--fs-xs)}.insp-section{border-bottom:var(--hair) solid var(--line);padding:8px 10px 10px;animation:rail-in-r var(--t-mid) var(--step-4) both}.insp-section>.lbl{display:block;margin-bottom:7px}.param{margin-bottom:7px}.param-top{display:flex;align-items:baseline;justify-content:space-between;font-size:var(--fs-sm);margin-bottom:2px}.param-top .k{color:var(--text-dim);letter-spacing:.04em}.param-top .v{color:var(--text);font-variant-numeric:tabular-nums}.bar{position:relative;height:12px;background:var(--well);border:var(--hair) solid var(--line);cursor:ew-resize;touch-action:none}.bar i{position:absolute;inset:0 auto 0 0;background:var(--ph-3);transition:width 60ms var(--step-4)}.bar:hover i{background:var(--ph-4)}.bar .notch{position:absolute;top:0;bottom:0;width:1px;background:var(--line-strong)}.sr-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.hint{margin:6px 0 0;font-size:var(--fs-xs);color:var(--text-faint);letter-spacing:.02em}.dropping{outline:1px dashed var(--accent-text);outline-offset:-2px;background:var(--hover)}.note{margin:3px 0 0;font-size:var(--fs-xs);line-height:1.45;color:var(--danger)}.pick{display:flex;flex-wrap:wrap;gap:3px}.pick .btn{height:19px;padding:0 6px;font-size:var(--fs-xs)}select.field,input.field{width:100%;height:22px;padding:0 5px;background:var(--well);border:var(--hair) solid var(--line);border-radius:0;font-size:var(--fs-sm);transition:border-color var(--t-fast) var(--step-4)}select.field:hover,input.field:hover{border-color:var(--line-strong)}.drum-row{display:grid;grid-template-columns:12px minmax(0,1fr);gap:6px;padding:6px 0;border-top:var(--hair) solid var(--line-soft)}.drum-row:first-of-type{border-top:0}.drum-row.sel{box-shadow:inset 3px 0 0 var(--ph-4);margin-left:-10px;padding-left:7px}.drum-row .n{color:var(--text-faint);font-size:var(--fs-xs)}.mini-params{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:4px}.cmd{background:var(--panel);animation:band-in var(--t-slow) var(--step-5) both}.cmd-log{max-height:92px;overflow-y:auto;padding:5px 10px;border-bottom:var(--hair) solid var(--line-soft);background:var(--well);display:flex;flex-direction:column-reverse}.cmd-log:empty{display:none}.log-line{font-size:var(--fs-sm);line-height:1.5;color:var(--text-dim);white-space:pre-wrap;word-break:break-word}.log-line .tag{color:var(--text-faint);margin-right:6px}.log-line.err{color:var(--danger)}.log-line.ok{color:var(--accent-text)}.cmd-input{display:flex;align-items:center;gap:7px;height:var(--band);padding:0 10px}.cmd-input .caret{color:var(--accent-text);font-weight:700}.cmd-input input{flex:1 1 auto;background:none;border:0;padding:0;font-size:var(--fs-md);color:var(--text)}.cmd-input input::placeholder{color:var(--text-faint)}.cmd-input input:focus{outline:none}.cmd-hint{font-size:var(--fs-xs);color:var(--text-faint);letter-spacing:var(--tracking-wide)}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#0000008c;display:grid;place-items:center;padding:20px}.dialog{width:min(460px,100%);max-height:80vh;overflow-y:auto;background:var(--panel);border:var(--hair) solid var(--line-strong);animation:dialog-in var(--t-mid) var(--step-5) both}.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:var(--hair) solid var(--line);background:var(--bg-deep)}.dialog-head h2{margin:0;font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;font-variation-settings:"wdth" 84,"opsz" 18}.dialog-body{padding:12px}.dialog-body p{margin:0 0 9px;color:var(--text-dim);line-height:1.6;font-size:var(--fs-md)}.dialog-body a{color:var(--accent-text);text-decoration:none;border-bottom:var(--hair) solid var(--accent-text)}.dialog-body a:hover{color:var(--text);border-color:var(--text)}.kv{display:grid;grid-template-columns:96px 1fr;gap:3px 10px;font-size:var(--fs-sm)}.kv dt{color:var(--text-faint);letter-spacing:var(--tracking-wide);text-transform:uppercase}.kv dd{margin:0;color:var(--text-dim)}.help-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}.help-table td{padding:3px 8px 3px 0;vertical-align:top;border-bottom:var(--hair) solid var(--line-soft)}.help-table td:first-child{color:var(--accent-text);white-space:nowrap}.help-table td:last-child{color:var(--text-dim)}.empty{display:grid;place-items:center;height:100%;color:var(--text-faint);text-align:center;gap:8px;padding:30px}@media (max-width: 1180px){:root{--roster-w: 190px;--inspector-w: 250px}}@media (max-width: 940px){.workbench{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.inspector{display:none}.roster{border-right:0;border-bottom:var(--hair) solid var(--line);max-height:160px}.status{flex-wrap:wrap;height:auto;padding:4px 8px}.shell{grid-template-rows:auto minmax(0,1fr) auto}}