:root{--color-bg:#f5f5f7;--color-surface:#fff;--color-text:#1c1c1e;--color-muted:#6b6b70;--color-border:#d2d2d7;--color-cell:#ececef;--color-cell-downbeat:#e0e0e6;--color-active:#2f6df6;--color-active-text:#fff;--color-danger:#c0362c;--color-focus:#1a56db;--color-playhead:#2f6df62e;--label-width:96px;--cell-size:44px;--cell-gap:4px;--radius:8px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#101014;--color-surface:#1c1c22;--color-text:#f2f2f5;--color-muted:#a0a0a8;--color-border:#33333c;--color-cell:#2a2a32;--color-cell-downbeat:#33333e;--color-active:#4d86ff;--color-active-text:#0b0b0f;--color-danger:#ff6b5e;--color-focus:#6ea0ff;--color-playhead:#4d86ff42}}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--color-bg);color:var(--color-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.4}.app{max-width:900px;margin:0 auto;padding:1rem}.app-header h1{margin:.5rem 0 1rem;font-size:1.5rem}.app-main{flex-direction:column;gap:1rem;display:flex}.grid-scroll{-webkit-overflow-scrolling:touch;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);padding:.5rem;overflow:auto hidden}.grid{gap:var(--cell-gap);flex-direction:column;width:max-content;min-width:100%;display:flex}.grid-row{grid-template-columns:var(--label-width) repeat(var(--step-count), var(--cell-size));gap:var(--cell-gap);align-items:stretch;display:grid}.grid-label{z-index:2;background:var(--color-surface);border-right:1px solid var(--color-border);align-items:center;padding:0 .5rem;font-weight:600;display:flex;position:sticky;left:0}.grid-label--corner{color:var(--color-muted);font-size:.85rem;font-weight:500}.grid-count{font-variant-numeric:tabular-nums;min-height:1.75rem;color:var(--color-muted);justify-content:center;align-items:center;font-size:.9rem;display:flex}.grid-count--downbeat{color:var(--color-text);font-weight:700}.grid-cell{display:flex}.step{width:100%;min-width:var(--cell-size);height:var(--cell-size);border:1px solid var(--color-border);background:var(--color-cell);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:6px;padding:0;transition:background-color .1s,transform 50ms}.grid-cell--downbeat .step{background:var(--color-cell-downbeat)}.step:hover{border-color:var(--color-active)}.step:active{transform:scale(.94)}.step--active{background:var(--color-active);border-color:var(--color-active);box-shadow:inset 0 0 0 2px var(--color-active)}.step:focus-visible,.button:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.leadsheet-controls{flex-wrap:wrap;gap:.75rem 1rem;display:flex}.field{flex-direction:column;flex:12rem;gap:.25rem;display:flex}.field--tempo{flex:0 0 8rem}.field label{color:var(--color-muted);font-size:.85rem;font-weight:600}.field input{min-height:44px;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:0 .75rem;font-size:1rem}.field input:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;border-color:var(--color-active)}.notation-title{color:var(--color-muted);margin:0 0 .5rem;font-size:1rem;font-weight:600}.notation-scroll{-webkit-overflow-scrolling:touch;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);padding:.5rem .75rem;overflow:auto hidden}.notation-scroll .score{max-width:none;height:auto;display:block}.transport{flex-wrap:wrap;align-items:center;gap:.5rem .75rem;display:flex}.transport__play{min-width:9.5rem}.transport__loop{min-height:44px;color:var(--color-text);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.4rem;padding:0 .5rem;font-weight:600;display:inline-flex}.transport__loop input{width:20px;height:20px;accent-color:var(--color-active)}.transport__status{color:var(--color-muted);flex:12rem;min-width:0;font-size:.9rem}.transport__status--error{color:var(--color-danger);font-weight:600}.button:disabled{opacity:.5;cursor:not-allowed}.grid-cell.is-playing{background:var(--color-playhead);border-radius:6px}.grid-count.is-playing{color:var(--color-active);font-weight:700}.toolbar{flex-wrap:wrap;gap:.75rem;display:flex}.button{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);min-height:44px;color:var(--color-text);cursor:pointer;touch-action:manipulation;padding:0 1.25rem;font-size:1rem;font-weight:600}.button--primary{border-color:var(--color-active);background:var(--color-active);color:var(--color-active-text)}.button--primary:hover{filter:brightness(1.05)}.button--danger{border-color:var(--color-danger);color:var(--color-danger)}.button--danger:hover{background:var(--color-danger);color:var(--color-active-text)}.sticking-select{width:100%;min-height:44px;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;font-size:16px}.sticking-select:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.grid-row{grid-template-columns:var(--label-width) var(--grid-columns);column-gap:0}.grid-cell,.grid-count{padding:0 2px}.sticking-select{width:calc(100% - 4px);margin:0 2px}.raster-controls{gap:12px;padding-bottom:8px;display:flex}.raster-controls label{flex-direction:column;gap:4px;font-size:.85rem;display:flex}.raster-controls select{min-height:44px;font:inherit;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px}.raster-status{color:var(--color-danger);white-space:normal;max-width:800px;margin:8px 0 0}.raster-status:empty{display:none}.grid-cell--downbeat .step--active{background:var(--color-active)}