:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Noto Sans",sans-serif;color:#111827;background:#fafafa;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1440px;margin:auto;padding:48px 32px}header{margin-bottom:32px}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:700;color:#586172}h1{font-size:36px;letter-spacing:-.04em;margin:12px 0}h1 span{display:inline-block;font-size:16px;letter-spacing:0;font-weight:500;margin-left:20px}p{line-height:1.7;color:#586172}header p{margin:8px 0}.controls,.score{border:1px solid #dedfe3;border-radius:12px;background:white}.controls{padding:24px;margin-bottom:24px}button,input,select{font:inherit}button,select,input[type=number]{border:1px solid #d6d8df;border-radius:7px;background:#fff;color:#111827;min-height:44px}button{cursor:pointer;font-weight:600;padding:10px 18px}button:hover{background:#f0f1f3}.primary{background:#111827;color:white;min-width:120px}.primary:hover{background:#303c50}button:focus-visible,input:focus-visible,select:focus-visible,#viewport:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.transport{display:flex;gap:10px;align-items:center;flex-wrap:wrap}output{font-variant-numeric:tabular-nums;margin-left:auto;font-size:16px;font-weight:600}.settings{display:flex;align-items:end;gap:24px;margin-top:24px;flex-wrap:wrap}label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600}input[type=number]{width:80px;padding:8px}.pattern{flex:1;min-width:220px}select{padding:8px 12px;width:100%}.follow{flex-direction:row;align-items:center;min-height:44px;font-size:14px}input[type=checkbox]{accent-color:#111827;width:18px;height:18px}#note{font-size:12px;margin-bottom:8px}#status{font-size:12px;margin:0;color:#40495a}.legend{padding:16px 20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:12px}.legend b{font-size:18px}.strong{color:#000}.ghost{color:#586172}.hint{margin-left:auto;color:#586172}.sheet{display:flex;border-top:1px solid #dedfe3;overflow:hidden;border-radius:0 0 12px 12px}#names{flex:0 0 128px;background:#fff;z-index:2;box-shadow:4px 0 10px #00000008}.namehead{height:56px;display:flex;align-items:center;padding-left:16px;font-size:11px;color:#586172}#names button{width:100%;height:64px;min-height:64px;border:0;border-radius:0;border-top:1px solid #e8e9ed;text-align:left;padding:10px 12px;font-size:12px}#names button small{display:block;font-size:10px;margin-top:4px;color:#586172}#names button[aria-pressed=false]{color:#626876;background:#f3f4f6}#viewport{overflow-x:auto;overscroll-behavior-x:contain;flex:1;min-width:0;scrollbar-gutter:stable}#grid{width:max-content}.row{display:grid;grid-template-columns:repeat(128,36px);height:64px}.row.head{height:56px}.cell{height:64px;border-top:1px solid #e8e9ed;border-right:1px solid #f0f1f3;display:flex;justify-content:center;align-items:center;color:#111827;font-weight:700;font-size:18px;position:relative}.head .cell{height:56px;flex-direction:column;font-size:10px;font-weight:400;color:#586172;gap:6px;border-top:0}.cell.bar{border-left:2px solid #a9aeba}.cell.beat{background:#f7f8fa}.cell.v0{color:#9ca3af;font-size:12px;font-weight:400}.cell.v1{font-size:18px;color:#646c7b}.cell.v2{font-size:16px}.cell.v3{font-size:23px;color:#000}.cell.now{box-shadow:inset 0 0 0 2px #6b7280;background:#e8edf2}.cell.hit{background:#111827;color:#fff;box-shadow:inset 0 0 0 3px #22c55e;font-size:26px}.row.muted .cell{opacity:.35}.row.muted .cell.hit{background:inherit;color:inherit}.head .cell.now{background:#111827;color:#fff}.cell .barlabel{font-size:11px;font-weight:700;color:inherit}footer{font-size:12px;margin-top:24px;max-width:900px}footer p{margin:8px 0}small{color:#626876}@media(max-width:600px){main{padding:24px 12px}h1{font-size:29px}h1 span{display:block;margin:10px 0 0;font-size:14px}.controls{padding:16px}.settings{gap:16px}.pattern{flex-basis:100%;order:2}output{font-size:12px}.legend{gap:12px;padding:12px}.hint{margin-left:0;flex-basis:100%}#names{flex-basis:104px}#names button{font-size:11px;padding:8px}.row{grid-template-columns:repeat(128,32px)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

#loops{font-size:11px;color:#586172;font-variant-numeric:tabular-nums}
#debug{display:block;font-size:11px;line-height:1.6;margin:8px 0;overflow-wrap:anywhere;font-weight:400}details{margin-top:16px;font-size:12px;color:#586172}summary{cursor:pointer}#names .cue-label{height:64px;padding:14px 12px;font-size:12px;background:#f4f5f7;border-top:1px solid #ddd}#names .cue-label small{display:block;font-size:10px;margin-top:4px}.cell.cue-current{background:#e8b956;color:#111827;box-shadow:inset 0 0 0 2px #111827}.cell.band{background:#e5e9ee;box-shadow:inset 1px 0 #a9aeba,inset -1px 0 #a9aeba}.cell.hit{background:#111827;color:#fff;box-shadow:inset 0 0 0 3px #22c55e}#bpm{width:104px}#refollow{font-size:12px}button[aria-busy=true]{opacity:.75}#names .namehead{height:56px}#position{margin-left:auto}.cell.hit.v1{font-size:26px;color:#fff}
/* Two bars stay in view; follow moves only once per 32 sixteenth notes. */
#grid{--cell-width:36px;width:calc(var(--cell-width)*128);position:relative}.row{grid-template-columns:repeat(128,var(--cell-width))}.page-snap{position:absolute;top:0;bottom:0;width:25%;scroll-snap-align:start;pointer-events:none}#viewport{scroll-snap-type:x mandatory;scrollbar-gutter:auto;scroll-behavior:auto}
.page-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid #dedfe3}.page-controls button{font-size:12px;padding:8px;min-height:44px}.page-controls button:last-child{justify-self:end}.page-controls button:first-child{justify-self:start}.page-controls button:disabled{opacity:.35;cursor:default}.page-controls output{margin:0;font-size:12px;white-space:nowrap;font-weight:600}
.cell.v0{font-size:min(12px,calc(var(--cell-width)*.7))}.cell.v1{font-size:min(18px,calc(var(--cell-width)*.85))}.cell.v2{font-size:min(16px,calc(var(--cell-width)*.62))}.cell.v3{font-size:min(23px,calc(var(--cell-width)*.86))}.cell.hit,.cell.hit.v1{font-size:min(26px,calc(var(--cell-width)*.88));box-shadow:inset 0 0 0 2px #22c55e}
.row.head,.head .cell,#names .namehead{height:44px}.head .cell{justify-content:flex-end;padding-bottom:5px;font-size:min(10px,calc(var(--cell-width)*.8));gap:0}.head .cell .barlabel{position:absolute;top:4px;left:0;width:calc(var(--cell-width)*16);height:15px;text-align:center;font-size:11px;white-space:nowrap;pointer-events:none}.head .cell .barlabel:empty{display:none}.cell.cue-current{box-shadow:inset 0 0 0 1px #111827}
@media(max-width:600px){main{padding:20px 8px}header{margin-bottom:20px}.controls{padding:12px;margin-bottom:16px}.settings{gap:12px}.legend{padding:8px;gap:10px;font-size:10px}.legend b{font-size:14px}.hint{font-size:10px}#names{flex:0 0 58px}#names button{height:44px;min-height:44px;font-size:9px;padding:4px;text-align:left}#names button small{font-size:8px;margin-top:2px}#names .namehead{padding-left:5px;font-size:9px}#names .cue-label{height:44px;font-size:9px;padding:8px 5px}#names .cue-label small{font-size:8px;margin-top:2px}.row:not(.head),.row:not(.head) .cell{height:44px}.head .cell>span:last-child{display:block}.page-controls{padding:4px;gap:4px}.page-controls button{font-size:10px}.page-controls output{font-size:10px}}
.head .cell .barlabel{z-index:2;background:#f7f8fa;color:#111827;font-weight:700;border-bottom:1px solid #e0e4e8;top:2px;height:17px}
#viewport[data-following=true]{overflow-x:hidden;touch-action:pan-y}#follow-state,.count-help{font-size:11px;margin:0;padding:4px 10px;color:#40495a;line-height:1.5}.practice-help{font-size:12px;color:#111827;margin:8px 0}.count-help{border-top:1px solid #eef0f3;padding-bottom:6px}.row.head,.head .cell,#names .namehead{height:52px}.head .cell .count-label{display:block;font-size:clamp(10px,calc(var(--cell-width)*1.05),12px);font-weight:600;line-height:15px;color:#111827}.head .cell.now .count-label{color:#fff}