:root{color-scheme:dark;--bg: #14161c;--card: #1d2029;--line: #2a2e3a;--fg: #e8eaf0;--muted: #9aa0b0;--accent: #6ad08f;--accent2: #5aa3e0;--bad: #e06a6a;--warn: #e0c46a;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:var(--bg);color:var(--fg)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#08121c;padding:.5rem .75rem;border-radius:0 0 8px;z-index:10}.skip-link:focus{left:0}.topbar{display:flex;align-items:baseline;gap:.75rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--line)}.topbar h1{margin:0;font-size:1.15rem}.topbar-sub{color:var(--muted);font-size:.85rem}.app{max-width:1180px;margin:0 auto;padding:1rem 1.25rem}.app-shell{display:grid;gap:.85rem}.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.toolbar .spacer{flex:1 1 auto}.toolbar .export-status{flex-basis:100%;font-size:.82rem;color:var(--muted)}.toolbar .export-status.ok{color:var(--accent)}.toolbar .export-status.bad{color:var(--bad)}.menu{position:relative}.menu>summary{list-style:none;cursor:pointer;font:inherit;font-weight:600;color:#0f1116;background:var(--accent);border-radius:8px;padding:.5rem .85rem;-webkit-user-select:none;user-select:none}.menu>summary::-webkit-details-marker{display:none}.menu[open]>summary{filter:brightness(1.05)}.menu-list{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:240px;max-height:60vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.3rem;box-shadow:0 12px 28px #00000073;display:grid;gap:1px}.menu-head{padding:.4rem .5rem .2rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.menu-item{display:flex;justify-content:space-between;gap:.75rem;align-items:center;text-align:left;background:transparent;color:var(--fg);border:0;border-radius:6px;padding:.45rem .55rem;font-weight:500;cursor:pointer}.menu-item:hover{background:#0f1116}.menu-sub{color:var(--muted);font-size:.74rem;white-space:nowrap}.tabs{display:flex;flex-wrap:wrap;gap:.3rem;border-bottom:1px solid var(--line);padding-bottom:.4rem;min-height:1.5rem}.tab{display:inline-flex;align-items:center;background:#0f1116;border:1px solid var(--line);border-radius:8px 8px 0 0}.tab.active{background:var(--card);border-color:var(--accent)}.tab-name{background:transparent;color:var(--fg);border:0;padding:.4rem .55rem;font-weight:500;cursor:pointer}.tab.active .tab-name{color:var(--accent)}.tab-close{background:transparent;color:var(--muted);border:0;padding:.4rem .5rem;cursor:pointer;font-size:1rem;line-height:1}.tab-close:hover{color:var(--bad)}.empty-state{color:var(--muted);padding:3rem 1rem;text-align:center;border:1px dashed var(--line);border-radius:10px}.ed-rec{background:#2a2e3a;color:var(--fg)}.ed-rec.armed{background:var(--bad);color:#1a0d0d}.ed-clear{background:#3a2020;color:var(--bad)}.shell{display:grid;grid-template-columns:230px 1fr;gap:1rem;align-items:start}@media (max-width: 760px){.shell{grid-template-columns:1fr}}.library{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6rem;position:sticky;top:1rem}.lib-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.lib-head h2{margin:0;font-size:.95rem}.lib-list{display:grid;gap:.35rem;max-height:70vh;overflow-y:auto}.lib-item{display:grid;gap:.1rem;text-align:left;background:#0f1116;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem;font-weight:500}.lib-item.active{border-color:var(--accent);background:#16241c}.lib-name{font-size:.92rem}.lib-meta{font-size:.72rem;color:var(--muted)}.lib-group{margin:.5rem 0 .1rem;padding:0 .2rem;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.lib-item.example{background:transparent;border-style:dashed}.lib-item.example:hover{background:#0f1116}.main{display:grid;gap:1rem;min-width:0}.export-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.export-bar .spacer{flex:1 1 auto}.export-status{font-size:.82rem;color:var(--muted);flex-basis:100%}.export-status.ok{color:var(--accent)}.export-status.bad{color:var(--bad)}button.ghost{background:#2a2e3a;color:var(--fg)}.save-btn{background:#2a2e3a;color:var(--muted);font-weight:600;border:0;border-radius:8px;padding:.5rem .85rem;cursor:pointer}.save-btn.dirty{background:var(--warn);color:#1a160a}.save-btn:disabled{cursor:default;opacity:.7}button.ghost.danger{background:#3a2020;color:var(--bad)}.sound-panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.4rem .75rem}.sound-panel>summary{cursor:pointer;font-weight:600;font-size:.9rem;padding:.3rem 0}.sound-body{display:grid;gap:.5rem;padding:.5rem 0 .25rem}.snd-row{display:grid;grid-template-columns:7rem 1fr auto;align-items:center;gap:.6rem;font-size:.85rem;color:var(--muted)}.snd-row input[type=range]{width:100%}.snd-row select,.snd-ver{background:#0f1116;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:.3rem .45rem;font:inherit}.snd-val{color:var(--fg);min-width:2.5rem;text-align:right;font-variant-numeric:tabular-nums}.snd-hint{grid-column:2 / 4;font-size:.72rem;color:var(--muted);margin-top:-.2rem}.snd-group{margin:.5rem 0 .1rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent2);border-bottom:1px solid var(--line);padding-bottom:.2rem}.snd-toggle{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;color:var(--muted)}.preset-nav{display:inline-flex;align-items:center;gap:.3rem}.preset-name{min-width:5.5rem;text-align:center;color:var(--fg);font-size:.8rem}.snd-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.25rem}.scope-host{background:#0f1116;border:1px solid var(--line);border-radius:8px;padding:4px;margin-bottom:.5rem}.scope{width:100%;height:72px;display:block}.synth-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem}.synth-module{background:#0f1116;border:1px solid var(--line);border-radius:10px;padding:.5rem .65rem;display:grid;gap:.45rem;align-content:start}.synth-module>h4{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent2)}.synth-module .snd-row{grid-template-columns:3.5rem 1fr;gap:.4rem}.synth-module .snd-ver{width:100%}.knob-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-start;margin:0;justify-content:center}.knob{display:flex;flex-direction:column;align-items:center;gap:.15rem;width:4rem}.knob-dial{position:relative;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#2c3140,#171a22);border:1px solid #353b49;cursor:ns-resize;touch-action:none}.knob-dial:focus-visible{outline:3px solid #bfeccd;outline-offset:2px}.knob-ind{position:absolute;left:50%;top:5px;width:2px;height:16px;background:var(--accent);border-radius:2px;transform-origin:50% 17px;transform:translate(-50%) rotate(-135deg)}.knob-label{font-size:.7rem;color:var(--muted)}.knob-val{font-size:.72rem;color:var(--fg);font-variant-numeric:tabular-nums}.snd-warn{margin:.3rem 0 0;font-size:.8rem;color:var(--warn)}.snd-ok{margin:.3rem 0 0;font-size:.8rem;color:var(--accent)}.editor{display:grid;gap:1rem;outline:none}.editor:focus-visible{outline:2px solid #3a4150;outline-offset:4px;border-radius:8px}.ed-toolbar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.metro,.oct-ctl{color:var(--muted);font-size:.85rem;display:inline-flex;align-items:center;gap:.3rem}.oct-label{min-width:1.6rem;text-align:center;color:var(--fg)}button.mini{padding:.2rem .5rem;background:#2a2e3a;color:var(--fg)}.kbd-hint{color:var(--muted);font-size:.78rem}.ed-license{min-width:9rem}.host{display:contents}.ed-header{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.ed-name{flex:1 1 220px;min-width:180px;font-size:1.05rem;font-weight:600;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:.55rem .75rem}.field{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.85rem}.field-label{white-space:nowrap}.ed-bpm{width:5rem}input[type=number],select{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:.45rem .55rem;font:inherit}button{font:inherit;font-weight:600;color:#0f1116;background:var(--accent);border:0;border-radius:8px;padding:.5rem .85rem;cursor:pointer}button:hover{filter:brightness(1.08)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #bfeccd;outline-offset:2px}button.danger{background:var(--bad);color:#1a0d0d}.ed-play{background:var(--accent2);color:#08121c;min-width:5.5rem}.ed-play.playing{background:var(--bad);color:#1a0d0d}.roll{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow-x:auto;padding:4px;display:grid;gap:0}.roll-row{display:flex;align-items:stretch;height:14px}.roll-row.sharp{background:#181b22}.roll-row.c-row{border-top:1px solid #313643}.roll-label{flex:0 0 34px;font-size:.62rem;color:var(--muted);display:flex;align-items:center;padding-left:4px}.cell{flex:0 0 18px;height:100%;border-right:1px solid #20242e;cursor:pointer}.cell.beat{border-right-color:#353b49}.cell.playhead{background:#5aa3e01f}.cell:hover{background:#2c3140}.cell.note{background:var(--accent);border-right-color:var(--accent)}.cell.note.sel{background:#b6f0cb}.cell.cursor{box-shadow:inset 0 0 0 2px var(--accent2)}.cell.ghost{background:#5aa3e052}.pos-bar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.85rem}.pos-read{font-variant-numeric:tabular-nums;color:var(--accent2);font-weight:600}.pos-hint{color:var(--muted)}.lane-bar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.lane-grp{display:inline-flex;align-items:center;background:#0f1116;border:1px solid var(--line);border-radius:8px;overflow:hidden}.lane-grp.dim{opacity:.5}.lane{background:transparent;color:var(--fg);border:0;padding:.35rem .6rem;font-weight:500;cursor:pointer}.lane.active{color:var(--accent);background:#16241c}.lane-tog{background:transparent;color:var(--muted);border:0;border-left:1px solid var(--line);padding:.35rem .45rem;cursor:pointer;font-size:.72rem;font-weight:700}.lane-tog.solo.on{background:var(--accent2);color:#08121c}.lane-tog.mute.on{background:var(--warn);color:#1a160a}.lane-x{background:transparent;color:var(--muted);border:0;border-left:1px solid var(--line);padding:.35rem .45rem;cursor:pointer}.lane-x:hover{color:var(--bad)}.lane-add{margin-left:.25rem}.kbmap{position:relative;height:66px;margin:.25rem 0}.kbmap-key{position:absolute;top:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:3px;box-sizing:border-box}.kbmap-key.white{height:66px;background:#e8eaf0;color:#14161c;border:1px solid #2a2e3a;border-radius:0 0 4px 4px}.kbmap-key.black{height:42px;background:#1d2029;color:#e8eaf0;border:1px solid #000;border-radius:0 0 3px 3px;z-index:2}.kbmap-key:hover{filter:brightness(.92)}.kbmap-key.black:hover{filter:brightness(1.4)}.kb-key{font-size:.62rem;font-weight:700}.kb-note{font-size:.55rem;opacity:.7}.sel-bar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.sel-info{color:var(--muted);margin-right:.4rem;font-size:.9rem}.sel-bar button{background:#2a2e3a;color:var(--fg);padding:.35rem .6rem}.sel-bar button.danger{background:var(--bad);color:#1a0d0d}.token-wrap{display:grid;gap:.35rem}.token-label{color:var(--muted);font-size:.8rem}.token-field{width:100%;min-height:4.5rem;resize:vertical;font-family:ui-monospace,monospace;font-size:.92rem;background:#0f1116;color:var(--accent);border:1px solid var(--line);border-radius:8px;padding:.6rem .75rem;line-height:1.5}.token-field.invalid{border-color:var(--bad)}.hint-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.chip{border-radius:999px;padding:.2rem .6rem;font-size:.8rem;font-weight:600}.chip.ok{background:#173a26;color:var(--accent)}.chip.warn{background:#3a3417;color:var(--warn)}.chip.bad{background:#3a1717;color:var(--bad)}.hint-note{color:var(--muted);font-size:.8rem}.diag{margin:0;padding:.6rem .85rem;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:8px;font-size:.85rem;display:grid;gap:.25rem}.diag.ok{color:var(--accent)}.diag li.error{color:var(--bad)}.diag li.warning{color:var(--warn)}