.kar{max-width:var(--reading);font-family:var(--sans);margin:0 auto;padding:12px 16px 120px}.kar h1{margin:8px 0;font-size:22px}.kar .lede,.kar .note{color:var(--ink-2);font-size:14px;line-height:1.5}.kar #kintro{color:var(--ink-2);align-items:center;gap:12px;margin:0 0 12px;font-size:.9em;display:flex}.kar #kintro[hidden]{display:none}.kar #kintro .kc{font-size:1.1em}.kar .modes{flex-wrap:wrap;gap:6px;margin:14px 0 8px;display:flex}.kar .modes button,.kar .shift button,.kar .mctl button{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:9px;padding:7px 12px;font-size:14px}.kar .modes button.on{border-color:var(--acc);color:var(--acc-d);font-weight:600}.kar .kpick a{border:1px solid var(--line);color:var(--ink);background:var(--panel);border-radius:9px;padding:6px 11px;font-size:14px;text-decoration:none}.kar .kpick a.on{border-color:var(--acc);color:var(--acc-d);font-weight:600}.kar audio{width:100%;margin:6px 0}.kar .mctl{align-items:center;gap:8px;display:inline-flex}.kar .kbar{top:var(--barH,57px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line);margin:0 0 10px;padding:6px 0 8px;position:sticky}.kar .kbar iframe{display:block}.kar .g-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.kar .g-controls button{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:9px;padding:7px 12px}.kar #g-start{border-color:var(--acc);color:var(--acc-d);font-weight:600}.g-metronome{flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:8px;font-size:12px;display:flex}.g-metronome label{align-items:center;gap:5px;display:flex}.g-metronome input[type=checkbox]{width:17px;height:17px;accent-color:var(--acc-d)}.g-metronome input[type=range]{width:70px;accent-color:var(--acc-d)}.kar #g-clock{font-family:var(--mono);margin-left:auto}.kar .g-tempo{align-items:center;gap:8px;margin-top:8px;font-size:14px;display:flex}.kar #g-rate{min-width:0;accent-color:var(--acc);flex:1}.kar #g-rate-label{text-align:right;font-variant-numeric:tabular-nums;min-width:44px}.kar .kbar audio{margin:2px 0}.kar .krow{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;min-height:32px;margin-top:6px;display:flex}.kar #vocal-countdown{color:var(--acc-d);font-variant-numeric:tabular-nums;font-size:20px;font-weight:700}.kar .kshift{align-items:center;gap:6px;font-size:14px;display:inline-flex}.kar .kshift b{font-family:var(--mono);text-align:center;min-width:54px;font-size:13px}.kar .kshift button,.kar .mctl button{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:9px;padding:5px 8px;font-size:14px}.kar #m-clock{font-family:var(--mono);font-size:16px}.kar .shift{color:var(--ink-2);flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 14px;font-size:14px;display:flex}.kar .shift b{font-family:var(--mono);text-align:center;min-width:64px}.klines{font-family:var(--mono);font-size:16px}.ksect{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:11px;font-family:var(--sans);margin:18px 0 4px}.kl{cursor:text;border-radius:8px;padding:3px 6px;line-height:1.25;transition:background .2s}.kar[data-mode=backing] .kl,.kar[data-mode=demo] .kl,.kar[data-mode=practice] .kl{cursor:pointer}.kl.cur{background:var(--chord-hi)}.kk{vertical-align:bottom;white-space:pre;flex-direction:column;display:inline-flex}.kt{color:var(--chord);min-height:1.2em;font-size:14px;font-weight:700}.kc{border-radius:4px;padding:0 1px;font-weight:700;transition:background .15s,color .15s}.kc+.kc{margin-left:4px}.kc.on{background:var(--chord);color:var(--panel)}.kc.past{opacity:.55}.kw{transition:color .12s}.kw.past{color:var(--ink-2)}.kw.on{color:var(--acc-d);text-underline-offset:4px;text-decoration:underline 3px}.klines.idle .kw.past{color:inherit}
