:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--paper:#fbfbf8;--paper-edge:#f0f0ea;--ink:#1b1b1b;--muted:#6a6a6a;--accent:#d14a2b;--line:#1b1b1b;--barline:#2f2f2f;--beatline:#1b1b1b33;--subline:#1b1b1b14;--shadow:0 14px 32px #00000014;--font-sans:"Space Grotesk","Helvetica Neue",Arial,sans-serif;--font-mono:"JetBrains Mono","SFMono-Regular",Menlo,Monaco,monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{max-width:100vw;overflow-x:hidden}body{min-height:100vh;font-family:var(--font-sans);color:var(--ink);background:linear-gradient(#f3f3ee 0%,#ecece6 100%)}a{color:inherit;text-decoration:none}button,input{font:inherit}.page{justify-content:center;padding:40px 24px 80px;display:flex}.grid-shell{background:var(--paper);width:min(1200px,100%);box-shadow:var(--shadow);border:1px solid var(--paper-edge);border-radius:18px;gap:28px;padding:32px;display:grid}.grid-header{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;display:grid}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-size:12px;font-weight:600}h1{margin:8px 0 6px;font-size:clamp(28px,3vw,40px)}.subtle{color:var(--muted);font-size:14px}.legend{background:#fffdfa;border:1px solid #e6e2da;border-radius:12px;gap:8px;padding:16px;display:grid}.legend-item{color:var(--muted);align-items:center;gap:10px;font-size:13px;display:flex}.legend-head{width:18px;height:18px;color:var(--accent);border:1px solid var(--ink);border-radius:999px;place-items:center;font-weight:700;display:grid}.legend-dot{background:var(--line)}.legend-x:after{content:"x";color:var(--accent);font-weight:700;font-family:var(--font-mono),monospace}.controls{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;display:grid}.control-block{background:#fffdfa;border:1px solid #e6e2da;border-radius:12px;gap:10px;padding:16px;display:grid}.control-block label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:12px;font-weight:600}.measure-input{align-items:center;gap:12px;display:flex}.measure-input input{border:1px solid #d6dbe2;border-radius:10px;width:80px;padding:6px 8px}.measure-input select{background:#fff;border:1px solid #d6dbe2;border-radius:10px;width:140px;padding:6px 8px}.beat-row button.active{color:#fff;background:#1b1b1b;border-color:#1b1b1b}.measure-caption{color:var(--muted);font-size:12px}.button-row{flex-wrap:wrap;gap:8px;display:flex}.controls button{color:#fff;cursor:pointer;background:#1b1b1b;border:1px solid #c9c4bb;border-radius:999px;padding:8px 14px;font-weight:600;transition:transform .15s,box-shadow .15s;box-shadow:0 6px 12px #00000026}.controls button:hover:not(:disabled){transform:translateY(-1px)}.controls button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.controls button.ghost{color:var(--ink);box-shadow:none;background:#fff;border:1px solid #c9c4bb}.helper{color:var(--muted);font-size:12px}.staff-wrap{background:#fffefc;border:1px solid #d9d3c7;border-radius:12px;grid-template-columns:160px minmax(0,1fr);display:grid;overflow:hidden}.staff-labels{background:#f7f4ee;border-right:1px solid #d9d3c7;grid-template-rows:repeat(9,24px);display:grid}.label-row{color:var(--muted);align-items:center;padding:0 12px;font-size:13px;display:flex;position:relative}.label-row.line-row:before{content:"";background:#1b1b1b80;height:1px;position:absolute;top:50%;left:0;right:0}.staff-grid{background:#fffefc;grid-template-rows:repeat(9,24px);align-items:start;display:grid;overflow-x:auto}.staff-row{width:max-content;display:grid;position:relative}.staff-row.line-row:before{content:"";background:var(--line);height:1px;position:absolute;top:50%;left:0;right:0}.cell{all:unset;border:none;border-right:1px solid var(--subline);cursor:pointer;background:0 0;place-items:center;width:100%;height:24px;display:grid;position:relative}.cell:disabled{cursor:default;border-right-color:#0000}.cell.beat-start{box-shadow:inset 1px 0 0 var(--beatline)}.cell.measure-start{box-shadow:inset 2px 0 0 var(--barline)}.cell.active{background:0 0}.cell.triplet-beat{background-image:linear-gradient(90deg,#0000 0% 32%,#1b1b1b0f 33% 34%,#0000 35% 66%,#1b1b1b0f 67% 68%,#0000 69% 100%)}.note-dot{background:var(--line);border-radius:999px;width:12px;height:8px;display:inline-block;transform:rotate(-12deg)}.note-x{font-family:var(--font-mono),monospace;color:var(--ink);font-weight:700;transform:translateY(-1px)}.osmd-panel{background:#fffefc;border:1px solid #d9d3c7;border-radius:12px;gap:12px;padding:16px;display:grid}.ad-zone{text-align:center;color:var(--muted);background:#fffdfa;border:1px dashed #c9c4bb;border-radius:12px;padding:12px;font-size:12px}.osmd-header h2{margin-bottom:6px;font-size:16px}.osmd-view svg{width:100%;height:auto}@media (max-width:900px){.grid-header{grid-template-columns:1fr}.staff-wrap{grid-template-columns:120px minmax(0,1fr)}}@media (max-width:720px){.page{padding:24px 16px 48px}.grid-shell{padding:20px}.staff-wrap{grid-template-columns:100px minmax(0,1fr)}.controls{grid-template-columns:1fr}}