: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;--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}}*{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}.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)}