:root,:root[data-theme=light]{--paper:#dedede;--ink:#1c1c1c;--faint:#b0b0b0;--shade:#d0d0d0;--muted:#5a5a5a;--dim:#8a8a8a;--hover:#3a3a3a;--foreground:#1c1c1c;--background:#dedede;--accent:#d1544b;--accent-fill:#d1544b29;--on-accent:#fff;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--paper:#2b2b2b;--ink:#e8e8e8;--faint:#4d4d4d;--shade:#383838;--muted:#9a9a9a;--dim:#777;--hover:#c8c8c8;--foreground:#e8e8e8;--background:#2b2b2b;--accent:#4c9aff;--accent-fill:#4c9aff33;--on-accent:#16232f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--paper);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;margin:0;padding:0;font-size:13px;line-height:1.4}:root{--mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace}.app{flex-direction:column;gap:20px;max-width:780px;margin:0 auto;padding:32px 20px 64px;display:flex}.header{border-bottom:1px solid var(--ink);justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;display:flex}.header-left{align-items:center;gap:12px;min-width:0;display:flex}.title{letter-spacing:.16em;text-transform:uppercase;margin:0;font-size:18px;font-weight:600}.panel{border:1px solid var(--ink);flex-direction:column;align-items:stretch;gap:14px;padding:14px;display:flex}.module{border:1px solid var(--ink)}.module.is-muted{opacity:.45}.module-head{border-bottom:1px solid var(--ink);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;display:flex}.module-title,.editor-title,.viz-label{align-items:center;gap:8px;display:flex}.module-title:before,.editor-title:before,.viz-label:before{content:"";background:var(--accent);width:6px;height:6px}.module-title{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0;font-size:10px;font-weight:500}.module-actions{flex-wrap:wrap;gap:8px;display:flex}.module-body{flex-direction:column;gap:14px;padding:14px;display:flex}.field{flex-direction:column;gap:6px;min-width:0;display:flex}.field-label{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-size:10px}.select{appearance:none;font:inherit;color:inherit;background:var(--paper);border:1px solid var(--ink);border-radius:0;width:100%;max-width:100%;padding:8px 10px}.controls{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.field-narrow{flex:0 0 72px}.field-grow{flex:140px}.btn{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--ink);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;white-space:nowrap;border-radius:0;padding:8px 16px}.btn:hover:not(:disabled){background:var(--shade)}.btn:disabled{color:var(--faint);border-color:var(--faint);cursor:not-allowed}.btn.is-on{background:var(--ink);color:var(--paper)}.btn.is-on:hover:not(:disabled){background:var(--hover)}.btn-sm{padding:6px 12px;font-size:11px}.btn-play{min-width:90px}.btn-play.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn-play.is-on:hover:not(:disabled){background:var(--accent);filter:brightness(1.08)}.btn-run:not(:disabled){background:var(--ink);color:var(--paper)}.btn-run:not(:disabled):hover{background:var(--hover)}.btn-icon{justify-content:center;align-items:center;width:34px;height:34px;padding:0;display:inline-flex}.transport{flex-wrap:wrap;align-items:flex-end;gap:12px;width:100%;display:flex}.field-tempo{flex:160px}.tempo-control{align-items:center;gap:10px;display:flex}.range{appearance:none;background:var(--ink);cursor:pointer;border:0;flex:auto;min-width:90px;height:1px}.range::-webkit-slider-thumb{appearance:none;background:var(--paper);border:1px solid var(--ink);border-radius:0;width:12px;height:12px}.range::-moz-range-thumb{background:var(--paper);border:1px solid var(--ink);border-radius:0;width:12px;height:12px}.tempo-value{text-align:right;font-variant-numeric:tabular-nums;flex:none;min-width:62px}.grid-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}.grid{flex-direction:column;gap:4px;min-width:560px;display:flex}.row{align-items:center;gap:10px;display:flex}.row-accent{margin-top:4px}.row-label{flex:0 0 104px;justify-content:space-between;align-items:baseline;gap:6px;display:flex}.sound-name{text-transform:uppercase;letter-spacing:.1em}.sound-desc{color:var(--dim);font-size:10px}.cells{flex:1;grid-template-columns:repeat(16,1fr);gap:4px;display:grid}.cell{background:var(--paper);border:1px solid var(--faint);cursor:pointer;border-radius:0;height:30px;padding:0}.cell.is-downbeat{border-color:var(--ink)}.cell:hover{background:var(--shade)}.cell.is-on{background:var(--ink);border-color:var(--ink)}.cell.is-playing{box-shadow:inset 0 0 0 2px var(--accent)}.cell.is-playing:not(.is-on){background:var(--accent-fill)}.cell-accent{height:12px}.tick{height:14px;color:var(--dim);border-bottom:1px solid #0000;justify-content:center;align-items:center;font-size:10px;display:flex}.tick.is-playing{color:var(--accent);border-bottom-color:var(--accent)}.status{color:var(--muted);letter-spacing:.04em;margin:0}.editor-panel{border:1px solid var(--ink)}.editor-head{border-bottom:1px solid var(--ink);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;display:flex}.editor-title{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0;font-size:10px;font-weight:500}.editor-actions{flex-wrap:wrap;gap:8px;display:flex}.editor{max-height:340px;overflow:auto}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (max-width:680px){.app{gap:16px;padding:24px 16px 48px}.transport{align-items:stretch}.field-tempo{flex:100%;order:-1}.transport .btn{flex:1 1 0;min-width:0}.field-grow{flex:100%}.row-label{flex-basis:76px}.sound-desc{display:none}.grid{min-width:480px}.cell{height:26px}.cell-accent{height:12px}.module-actions .btn,.editor-actions .btn{flex:1 1 0}.menu{grid-template-columns:1fr;gap:14px}.menu-card{min-height:170px}.keyboard{min-width:0}.key-white{height:120px}.key-black{height:72px}.editor-actions{flex:100%}}.menu{grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;display:grid}.menu-card{min-height:200px;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--ink);text-align:left;cursor:pointer;border-radius:0;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px;padding:18px;text-decoration:none;display:flex}.menu-card:hover{background:var(--shade);border-color:var(--accent)}.menu-card:hover .menu-icon{color:var(--accent)}.menu-icon{width:60px;height:40px;margin-bottom:auto}.menu-card-title{letter-spacing:.14em;text-transform:uppercase;font-size:15px}.menu-card-desc{color:var(--muted);font-size:11px}.keyboard{min-width:280px;position:relative}.keys-white{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.key{font:inherit;cursor:pointer;border-radius:0;padding:0}.key-white{background:var(--paper);height:130px;color:var(--muted);border:1px solid var(--ink);justify-content:center;align-items:flex-end;padding-bottom:8px;display:flex}.key-white:hover{background:var(--shade)}.key-white.is-held{background:var(--ink);color:var(--paper)}.key-label{letter-spacing:.1em;font-size:10px}.keys-black{pointer-events:none;position:absolute;inset:0}.key-black{background:var(--ink);border:1px solid var(--ink);width:7%;height:78px;box-shadow:0 0 0 2px var(--paper);pointer-events:auto;position:absolute;top:0}.key-black.is-held{background:var(--paper);border-width:2px}.held{letter-spacing:.06em;color:var(--muted);margin:0;font-size:11px}.viz{border-top:1px solid var(--ink);height:140px;position:relative}.viz-canvas{width:100%;height:100%;display:block}.viz-label{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);pointer-events:none;font-size:10px;position:absolute;top:8px;left:12px}.cm-playing{outline:2px solid var(--accent);background:var(--accent-fill);border-radius:2px}.editor .cm-editor,.editor .cm-gutters{background:0 0}.editor .cm-editor.cm-focused{outline:none}.cm-tooltip.cm-tooltip-autocomplete{border:1px solid var(--ink);background:var(--paper);font-family:var(--mono);font-size:12px}.cm-tooltip-autocomplete>ul>li{color:var(--ink);padding:3px 8px}.cm-tooltip-autocomplete>ul>li[aria-selected]{background:var(--accent);color:var(--on-accent)}.cm-completionIcon{opacity:.6;padding-right:10px}.cm-completionDetail{color:var(--muted);margin-left:10px;font-style:normal}.cm-tooltip.cm-completionInfo{border:1px solid var(--ink);background:var(--paper);color:var(--ink);max-width:260px;font-family:var(--mono);padding:8px 10px;font-size:11px;line-height:1.45}