:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;--radius:12px;--radius-s:8px;--sidebar-w:280px;--label-w:188px;--side-w:168px;--slot-h:46px;--bg:#111316;--panel:#1a1d22;--panel-2:#23272e;--inset:#0d0f12;--border:#2b3038;--border-strong:#3a414b;--text:#e8eaed;--text-2:#a1a9b4;--text-3:#69717c;--accent:#ff9f43;--play:#2fd27a;--play-ink:#04210f;--stop:#ff5a5f;--mute:#f0b429;--solo:#4da3ff;--slot-bg:#1c2026;--lcd-bg:#07090b;--lcd-ink:#ffb347;--shadow:0 1px 0 #ffffff08 inset, 0 8px 24px #00000040;--glow:.55;--c-metro_high:#ffd23f;--c-metro_low:#b8c4d6;--c-hihat:#33d6c6;--c-snare:#ff5c93;--c-kick:#ff8a3d}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (prefers-color-scheme:light){:root{--bg:#e3e6ea;--panel:#f7f8fa;--panel-2:#eceef2;--inset:#dfe3e8;--border:#cfd4db;--border-strong:#b7bec8;--text:#15181c;--text-2:#505864;--text-3:#7f8893;--accent:#e07a10;--play:#1fa85c;--play-ink:#fff;--stop:#e0393f;--mute:#c98a00;--solo:#1f7ae0;--slot-bg:#f2f4f7;--shadow:0 1px 2px #0000000f, 0 6px 18px #0000000f;--glow:0;--c-metro_high:#d4a106;--c-metro_low:#6f7f96;--c-hihat:#0fa395;--c-snare:#dd3572;--c-kick:#e8681c}}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-user-select:none;user-select:none;font-size:15px;line-height:1.35}button,input,select,output{font:inherit;color:inherit}button{touch-action:manipulation;cursor:pointer}button:disabled{cursor:default;opacity:.35}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon{flex:none;display:block}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{grid-template-columns:var(--sidebar-w) minmax(0, 1fr);height:100vh;height:100dvh;display:grid;overflow:hidden}.main{flex-direction:column;min-width:0;min-height:0;display:flex}.workspace{flex-direction:column;flex:1;gap:14px;min-height:0;padding:14px 16px 20px;display:flex;overflow:auto}.btn{border:1px solid var(--border-strong);border-radius:var(--radius-s);background:var(--panel-2);align-items:center;gap:6px;height:44px;padding:0 16px;font-weight:600;display:inline-flex}.btn--small{height:36px;padding:0 12px;font-size:14px}.btn:active,.icon-btn:active,.stepper-btn:active,.toggle:active{transform:translateY(1px)}.icon-btn{border-radius:var(--radius-s);width:44px;height:44px;color:var(--text-2);background:0 0;border:1px solid #0000;place-items:center;display:inline-grid}.icon-btn:hover{background:var(--panel-2);color:var(--text)}.icon-btn--danger:hover{color:var(--stop)}.section-title{letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin:0;font-size:12px;font-weight:700}.tag{border:1px solid var(--border-strong);font-family:var(--mono);color:var(--text-2);border-radius:5px;padding:2px 6px;font-size:11px}.sidebar{background:var(--panel);border-right:1px solid var(--border);min-height:0;padding-top:env(safe-area-inset-top);flex-direction:column;display:flex}.sidebar-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;min-height:60px;padding:0 12px 0 16px;display:flex}.brand{letter-spacing:.01em;align-items:center;gap:10px;font-weight:700;display:flex}.brand-mark{background:linear-gradient(90deg, var(--c-kick) 0 25%, transparent 25% 37%, var(--c-snare) 37% 62%, transparent 62% 75%, var(--c-hihat) 75%) center / 100% 6px no-repeat, var(--panel-2);border:1px solid var(--border-strong);border-radius:6px;width:22px;height:22px}.drawer-close,.drawer-open{display:none}.list-head{justify-content:space-between;align-items:center;padding:14px 12px 8px 16px;display:flex}.pattern-list{flex:1;margin:0;padding:0 8px 16px;list-style:none;overflow-y:auto}.pattern-item{border-radius:var(--radius-s);text-align:left;background:0 0;border:1px solid #0000;align-items:center;gap:10px;width:100%;min-height:56px;margin-bottom:4px;padding:8px 12px 8px 14px;display:flex;position:relative}.pattern-item:hover{background:var(--panel-2)}.pattern-item[aria-current=true]{background:var(--panel-2);border-color:var(--border-strong)}.pattern-item[aria-current=true]:before{content:"";background:var(--accent);border-radius:2px;width:3px;position:absolute;top:10px;bottom:10px;left:-1px}.pattern-item-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:600;overflow:hidden}.pattern-item-meta{align-items:center;gap:8px;display:flex}.pattern-item-bpm{text-align:right;min-width:6.5ch;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px}.pattern-item-bpm small{color:var(--text-3);font-size:11px}.empty-hint{color:var(--text-3);padding:0 16px}.scrim{display:none}.pattern-header{padding:calc(10px + env(safe-area-inset-top)) 16px 12px;background:var(--panel);border-bottom:1px solid var(--border);flex-direction:column;gap:10px;display:flex}.header-row{align-items:center;gap:12px;display:flex}.header-row--controls{flex-wrap:wrap;gap:12px 28px}.field-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-size:11px;font-weight:700;display:block}.name-field{flex:1;min-width:0}.name-input{-webkit-user-select:text;user-select:text;background:0 0;border:0;border-bottom:1px solid #0000;width:100%;padding:2px 0;font-size:24px;font-weight:700}.name-input:hover{border-bottom-color:var(--border-strong)}.name-input:focus{border-bottom-color:var(--accent);outline:none}.header-actions{align-items:center;gap:4px;display:flex}.save-status{color:var(--text-3);white-space:nowrap;margin-right:8px;font-size:12px}.save-status:before{content:"";background:var(--play);vertical-align:1px;border-radius:50%;width:7px;height:7px;margin-right:6px;display:inline-block}.save-status--saving:before,.save-status--loading:before{background:var(--accent)}.save-status--error,.save-status--offline{color:var(--stop)}.save-status--error:before,.save-status--offline:before{background:var(--stop)}.field{flex-direction:column;gap:5px;display:flex}.field--tempo{flex:1;min-width:300px}.tempo{align-items:center;gap:8px;display:flex}.tempo-slider{flex:1;min-width:120px;max-width:420px}.bpm-readout{min-width:3ch;font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;font-size:26px;font-weight:700}.bpm-readout small{color:var(--text-3);margin-left:4px;font-size:11px;font-weight:600}.tap-btn{justify-content:center;min-width:56px}.stepper{border:1px solid var(--border-strong);border-radius:var(--radius-s);background:var(--inset);align-items:center;display:inline-flex;overflow:hidden}.stepper-btn{border-radius:var(--radius-s);background:var(--panel-2);width:44px;height:44px;color:var(--text);border:0;flex:none;place-items:center;display:grid}.stepper .stepper-btn{border-radius:0}.tempo .stepper-btn{border:1px solid var(--border-strong)}.stepper-value{text-align:center;min-width:52px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:18px;font-weight:700}.stepper--compact .stepper-btn{width:36px;height:38px}.stepper--compact .stepper-value{min-width:34px;font-size:16px}.slider{--fill:var(--accent);appearance:none;touch-action:none;cursor:pointer;background:0 0;height:36px;margin:0}.slider::-webkit-slider-runnable-track{background:var(--inset);border:1px solid var(--border-strong);border-radius:3px;height:6px}.slider::-moz-range-track{background:var(--inset);border:1px solid var(--border-strong);border-radius:3px;height:6px}.slider::-moz-range-progress{background:var(--fill);border-radius:3px;height:6px}.slider::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid var(--fill);background:var(--panel);border-radius:50%;width:22px;height:22px;margin-top:-9px;box-shadow:0 1px 4px #00000059}.slider::-moz-range-thumb{border:2px solid var(--fill);background:var(--panel);border-radius:50%;width:18px;height:18px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex:none;overflow:hidden}.panel-head{align-items:baseline;gap:12px;padding:12px 14px 4px;display:flex}.panel-hint{color:var(--text-3);font-size:12px}.scroller{scrollbar-width:thin;padding:6px 0 12px;overflow-x:auto}.lane-grid{grid-template-columns:var(--label-w) minmax(var(--track-min), 1fr) var(--side-w);min-width:calc(var(--label-w) + var(--track-min) + var(--side-w));row-gap:6px;display:grid;position:relative}.lane{display:contents}.l-metro_high{--c:var(--c-metro_high)}.l-metro_low{--c:var(--c-metro_low)}.l-hihat{--c:var(--c-hihat)}.l-snare{--c:var(--c-snare)}.l-kick{--c:var(--c-kick)}.lane-label{z-index:3;background:var(--panel);align-items:center;gap:8px;min-width:0;padding:0 8px 0 14px;display:flex;position:sticky;left:0}.lane-label--ruler{min-height:20px}.lane-chip{background:var(--c);border-radius:3px;flex:none;width:6px;height:30px}.lane-name{overflow-wrap:break-word;flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.15;overflow:hidden}.lane-toggles{gap:4px;display:flex}.toggle{border:1px solid var(--border-strong);background:var(--panel-2);width:32px;height:34px;font-family:var(--mono);color:var(--text-2);border-radius:6px;font-size:13px;font-weight:700}.toggle--mute[aria-pressed=true]{background:var(--mute);border-color:var(--mute);color:#1b1300}.toggle--solo[aria-pressed=true]{background:var(--solo);border-color:var(--solo);color:#fff}.lane-side{z-index:3;background:var(--panel);align-items:center;gap:8px;padding:0 14px 0 12px;display:flex;position:sticky;right:0;box-shadow:-14px 0 12px -12px #00000059}.lane-side--ruler{box-shadow:none;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-size:10px;font-weight:700}.volume-slider{--fill:var(--c);flex:1;min-width:0}.volume-readout{text-align:right;width:3ch;font-family:var(--mono);color:var(--text-2);font-variant-numeric:tabular-nums;font-size:12px}.track,.ruler{grid-template-columns:repeat(var(--beats), minmax(0, 1fr));display:grid}.track{background:var(--inset);border-radius:var(--radius-s);padding:5px 0;transition:opacity .15s}.is-silent .track{opacity:.4}.ruler-beat{border-left:1px solid var(--border-strong);font-family:var(--mono);color:var(--text-3);padding:0 7px;font-size:12px;font-weight:700}.ruler-beat.is-now{color:var(--accent)}.beat{grid-template-columns:repeat(var(--sub), minmax(0, 1fr));border-left:1px solid var(--border-strong);gap:3px;padding:0 4px;display:grid}.beat:first-child,.ruler-beat:first-child{border-left-color:#0000}.layer-grid .beat.is-now{background:color-mix(in srgb, var(--accent) 7%, transparent)}.slot{height:var(--slot-h);border:1px solid var(--border);background:var(--slot-bg);border-radius:6px;min-width:0;padding:0;transition:background-color 80ms,box-shadow 80ms;position:relative}.slot:hover{border-color:var(--c)}.slot-label{font-family:var(--mono);color:var(--text-3);pointer-events:none;font-size:11px}.slot:first-child .slot-label{color:var(--text-2);font-weight:700}.slot.is-on{background:var(--c);border-color:var(--c);box-shadow:0 0 12px color-mix(in srgb, var(--c) calc(var(--glow) * 100%), transparent)}.slot.is-on .slot-label{color:#0000008c}.playhead-lane{pointer-events:none;z-index:2;grid-column:2;position:absolute;inset:0}.playhead{opacity:0;will-change:transform;position:absolute;inset:0}.playhead:before{content:"";background:var(--accent);width:2px;box-shadow:0 0 10px var(--accent);border-radius:1px;position:absolute;top:0;bottom:0;left:-1px}.editor-grid{row-gap:8px}.beat--editor{justify-content:center;align-items:center;padding:2px 4px;display:flex}.select{border:1px solid var(--border-strong);border-radius:var(--radius-s);background:var(--panel-2);flex:1;min-width:0;height:40px;padding:0 8px;font-size:14px}.transport{padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--border);justify-content:flex-end;align-items:center;gap:18px;display:flex}.lcd{border-radius:var(--radius-s);background:var(--lcd-bg);font-family:var(--mono);color:var(--lcd-ink);border:1px solid #000;grid-template-rows:auto auto;grid-template-columns:auto auto;align-items:baseline;column-gap:12px;margin-right:auto;padding:6px 14px;display:grid;box-shadow:inset 0 2px 8px #0009}.lcd-label{letter-spacing:.15em;text-transform:uppercase;opacity:.55;grid-column:1/-1;font-size:9px}.lcd-value{font-variant-numeric:tabular-nums;text-shadow:0 0 8px color-mix(in srgb, var(--lcd-ink) 60%, transparent);font-size:24px;font-weight:700}.lcd-sub{opacity:.7;font-size:13px}.master{color:var(--text-2);align-items:center;gap:8px;display:flex}.master-slider{width:160px}.play-btn{background:var(--play);min-width:168px;height:56px;color:var(--play-ink);box-shadow:0 4px 16px color-mix(in srgb, var(--play) 35%, transparent);border:0;border-radius:12px;justify-content:center;align-items:center;gap:10px;padding:0 24px;font-size:17px;font-weight:700;display:inline-flex}.play-btn.is-playing{background:var(--stop);color:#fff;box-shadow:0 4px 16px color-mix(in srgb, var(--stop) 35%, transparent)}.play-btn:active{transform:scale(.98)}.empty-state{color:var(--text-2);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;display:flex;position:relative}.empty-state .drawer-open{position:absolute;top:12px;left:12px}@media (max-width:900px){.app{grid-template-columns:minmax(0,1fr)}.sidebar{z-index:50;width:min(320px,86vw);transition:transform .22s;position:fixed;inset:0 auto 0 0;transform:translate(-100%);box-shadow:0 0 40px #0006}.sidebar.is-open{transform:none}.scrim{z-index:40;background:#00000073;display:block;position:fixed;inset:0}.drawer-close,.drawer-open{display:inline-grid}.drawer-open{margin-left:-8px}}@media (max-width:640px){:root{--label-w:112px;--side-w:92px;--slot-h:42px}.lane-label{flex-wrap:wrap;align-content:center;row-gap:4px}.layer-grid .lane-chip{height:14px}.layer-grid .lane-name{flex-basis:calc(100% - 20px)}.volume-readout{display:none}.lane-side--ruler{visibility:hidden}.lane-side{padding:0 10px 0 8px}.lane-side--editor .icon-btn{display:none}.workspace{padding:10px 8px 16px}.panel-hint,.master,.save-status{display:none}.name-input{font-size:20px}.field--tempo{min-width:100%}.lane-label{column-gap:6px;padding-left:10px}.lane-name{font-size:12px}.toggle{width:36px;height:30px}.play-btn{flex:1;min-width:0}}@media (prefers-reduced-motion:reduce){.sidebar,.slot,.track{transition:none}}