.ht{--ht-surface:var(--color-surface,#ffffff);--ht-sunken:var(--color-neutral-50,#f9fafb);--ht-soft:var(--color-neutral-100,#f3f4f6);--ht-ink:var(--color-neutral-900,#111827);--ht-ink-2:var(--color-neutral-700,#374151);--ht-ink-3:var(--color-neutral-500,#6b7280);--ht-rule:var(--color-border,#e5e7eb);--ht-rule-2:var(--color-neutral-300,#d1d5db);--ht-accent:var(--color-primary,#8b5a3c);--ht-blow:#c2410c;--ht-draw:#1d4ed8;--ht-band:rgba(17,24,39,0.03);--ht-harp-plate:#f3f4f6;--ht-harp-plate-edge:#6b7280;--ht-harp-num:#111827;--ht-harp-comb:#d1d5db;--ht-harp-hole:#1f2937;--ht-harp-hole-edge:#374151;--ht-harp-blow:#c2410c;--ht-harp-draw:#1d4ed8;--ht-harp-on-ink:#ffffff;--ht-harp-num-on:#ffffff;--ht-mono:ui-monospace,"JetBrains Mono","SF Mono","Cascadia Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;--ht-sans:var(--font-inter,Inter),"SF Pro Display",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--ht-fs:15px;color:var(--ht-ink);display:grid;gap:14px;min-width:0}.ht[data-ht-theme=dark],:root[data-theme=dark] .ht{--ht-blow:#fb923c;--ht-draw:#7cb1ff;--ht-band:rgba(248,250,252,0.035);--ht-harp-plate:#2a2f37;--ht-harp-plate-edge:#9ca3af;--ht-harp-num:#f3f4f6;--ht-harp-comb:#161a20;--ht-harp-hole:#000000;--ht-harp-hole-edge:#8b95a5;--ht-harp-blow:#fb923c;--ht-harp-draw:#7cb1ff;--ht-harp-on-ink:#0b0d10;--ht-harp-num-on:#0b0d10}@media (prefers-color-scheme:dark){:root:not([data-theme]) .ht{--ht-surface:var(--color-surface,#16191e);--ht-sunken:var(--color-neutral-50,#0f1114);--ht-soft:var(--color-neutral-100,#1d2127);--ht-ink:var(--color-neutral-900,#eceef1);--ht-ink-2:var(--color-neutral-700,#b3bac5);--ht-ink-3:var(--color-neutral-500,#8b93a1);--ht-rule:var(--color-border,#2a3038);--ht-rule-2:var(--color-neutral-300,#3a414c);--ht-accent:var(--color-primary,#e2b35c);--ht-blow:#fb923c;--ht-draw:#7cb1ff;--ht-band:rgba(248,250,252,0.035);--ht-harp-plate:#2a2f37;--ht-harp-plate-edge:#9ca3af;--ht-harp-num:#f3f4f6;--ht-harp-comb:#161a20;--ht-harp-hole:#000000;--ht-harp-hole-edge:#8b95a5;--ht-harp-blow:#fb923c;--ht-harp-draw:#7cb1ff;--ht-harp-on-ink:#0b0d10;--ht-harp-num-on:#0b0d10}}.ht *,.ht :after,.ht :before{box-sizing:border-box}.ht-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.ht-facts{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}.ht-facts>div{display:inline-flex;gap:6px;align-items:baseline;padding:4px 10px;border-radius:999px;background:var(--ht-soft);font-size:.82rem;min-width:0}.ht-facts dt{font-weight:600;color:var(--ht-ink-3);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.ht-facts dd{margin:0;color:var(--ht-ink);overflow-wrap:anywhere}.ht-note,.ht-notes{margin:0;font-size:.84rem;color:var(--ht-ink-2);padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--ht-accent) 9%,var(--ht-surface))}.ht-notes{list-style:none;display:grid;gap:4px}.ht-notes .ht-note-simplified{color:var(--ht-ink);font-weight:500}.ht-legend summary{cursor:pointer;font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ht-ink-3)}.ht-legend ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.ht-legend li{font-size:.8rem;color:var(--ht-ink-2);padding:3px 10px 3px 4px;border:1px solid var(--ht-rule);border-radius:999px}.ht-legend li b{font-family:var(--ht-mono);padding:1px 6px;border-radius:999px;background:var(--ht-soft)}.ht-legend b.ht-blow{color:var(--ht-blow)}.ht-legend b.ht-draw{color:var(--ht-draw)}.ht-zone{overflow-x:auto;overscroll-behavior-x:contain;min-width:0}.ht-score{display:flex;flex-wrap:wrap;align-items:flex-end;row-gap:16px;font:400 var(--ht-fs)/1.3 var(--ht-mono);padding:2px 0 6px}.ht-break{flex-basis:100%;height:0}.ht-secline{flex-basis:100%;display:flex;gap:8px;margin:6px 0 -10px;font-size:.72em}.ht-marker{flex-basis:100%;margin:2px 0;font:italic .82em/1.4 var(--ht-sans);color:var(--ht-ink-3)}.ht-marker:before{content:"⋯ ";font-style:normal}.ht-bar{flex:none;width:var(--ht-w);display:flex;flex-direction:column;min-width:0}.ht-bhead{display:flex;align-items:center;gap:6px;height:1.5em;padding-left:2px;white-space:nowrap;font-size:.7em}.ht-bn{color:var(--ht-ink-3);cursor:pointer;padding:0 3px;border-radius:4px}.ht-bn:hover{background:var(--ht-soft)}.ht-bn:hover,.ht-sec{color:var(--ht-accent)}.ht-sec{font:700 1em/1 var(--ht-sans);border:1.4px solid;border-radius:4px;padding:2px 5px 1px}.ht-oct{color:var(--ht-accent);font-weight:600}.ht-cols{display:flex;border-left:1.5px solid var(--ht-ink-2);position:relative}.ht-bar--untimed{width:auto;max-width:100%}.ht-bn--untimed{cursor:default;font-style:italic;color:var(--ht-ink-3)}.ht-bn--untimed:hover{color:var(--ht-ink-3);background:none}.ht-bar--untimed .ht-cols{border-left-color:var(--ht-rule-2);border-left-style:dashed;flex-wrap:wrap;row-gap:6px}.ht-words{flex-basis:100%;margin:-8px 0 0;padding-left:.35ch;font:400 .92em/1.5 var(--ht-sans);color:var(--ht-ink-2);overflow-wrap:anywhere}.ht-wline{margin:0}.ht-col{flex:none;display:flex;flex-direction:column;padding-left:.35ch;border-radius:7px;cursor:pointer;transition:background-color .18s,opacity .25s}.ht-col>span{display:block;white-space:nowrap;overflow:visible}.ht-ly{font:400 .92em/1.6 var(--ht-sans);color:var(--ht-ink);min-height:1.6em}.ht-ly.ht-ext{color:var(--ht-ink-3)}.ht-nolyr .ht-ly{display:none}.ht-ho{font-weight:700;font-size:1.12em;line-height:1.5;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.ht-ho i{font-style:normal;font-size:.82em;vertical-align:.15em;margin-left:1px}.ht-ho .ht-simp{font-weight:400;font-size:.8em;opacity:.6;margin-left:1px}.ht-br{font-size:.82em;line-height:1.2}.ht-ct,.ht-rh{font-size:.72em;line-height:1.45;color:var(--ht-ink-3)}.ht-ct{color:var(--ht-ink-2)}.ht-blow .ht-br,.ht-blow .ht-ho{color:var(--ht-blow)}.ht-draw .ht-br,.ht-draw .ht-ho{color:var(--ht-draw)}.ht-rest .ht-ho{color:var(--ht-ink-3);font-weight:500}.ht-tied .ht-ho{opacity:.45}.ht-inferred .ht-rh{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-underline-offset:2px}.ht-from-melody{opacity:.5}.ht-from-melody .ht-ho{-webkit-text-decoration:underline dashed 1px;text-decoration:underline dashed 1px;text-underline-offset:3px}.ht-col:hover{background:color-mix(in srgb,var(--ht-ink) 5%,transparent)}.ht-col.ht-now{background:color-mix(in srgb,currentColor 14%,transparent)}.ht-col.ht-blow{color:var(--ht-blow)}.ht-col.ht-draw{color:var(--ht-draw)}.ht-col.ht-rest{color:var(--ht-ink-3)}.ht-col.ht-next{background:color-mix(in srgb,currentColor 6%,transparent)}.ht-col.ht-cursor{box-shadow:inset 0 0 0 1.5px var(--ht-accent)}.ht-live .ht-col.ht-past{opacity:.4}.ht-col.ht-correct{background:color-mix(in srgb,var(--ht-correct,#16a34a) 22%,transparent);box-shadow:inset 0 -3px 0 var(--ht-correct,#16a34a)}.ht-col.ht-wrong{background:color-mix(in srgb,var(--ht-wrong,#dc2626) 20%,transparent);box-shadow:inset 0 -3px 0 var(--ht-wrong,#dc2626)}.ht-col.ht-missed{box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--ht-wrong,#dc2626) 55%,transparent)}.ht-live .ht-col.ht-past.ht-correct,.ht-live .ht-col.ht-past.ht-missed,.ht-live .ht-col.ht-past.ht-wrong{opacity:.85}[data-ht-mode=step] .ht-col.ht-now{box-shadow:inset 0 0 0 2px var(--ht-accent)}.ht-ly.ht-sing{--ht-p:0%;background:linear-gradient(90deg,var(--ht-accent) var(--ht-p),var(--ht-ink) var(--ht-p));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}.ht-transport{position:sticky;bottom:0;z-index:5;display:grid;gap:6px;padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));border:1px solid var(--ht-rule);border-radius:14px;background:color-mix(in srgb,var(--ht-surface) 88%,transparent);backdrop-filter:blur(12px) saturate(1.3);box-shadow:0 8px 24px -14px rgba(0,0,0,.35)}.ht-transport--top{top:var(--ht-top-offset,0);bottom:auto;padding-bottom:10px;box-shadow:0 10px 24px -16px rgba(0,0,0,.4)}.ht-tl{position:relative;height:22px;cursor:pointer;touch-action:none;border-radius:6px}.ht-tl:focus-visible{outline:2px solid var(--ht-accent);outline-offset:2px}.ht-tl-track{right:0;bottom:8px;height:4px;background:var(--ht-rule)}.ht-tl-fill,.ht-tl-track{position:absolute;left:0;border-radius:4px}.ht-tl-fill{top:0;bottom:0;width:0;background:var(--ht-accent)}.ht-tl-thumb{position:absolute;bottom:3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--ht-surface);box-shadow:0 0 0 2px var(--ht-ink-2),0 2px 6px rgba(0,0,0,.25)}.ht-tp{display:grid;grid-template-columns:auto 150px minmax(0,1fr) auto;grid-template-areas:"btn now harp ctl";gap:8px 20px}.ht-btns,.ht-tp{align-items:center}.ht-btns{grid-area:btn;display:flex;gap:8px}.ht-transport button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.ht-transport button:focus-visible{outline:2px solid var(--ht-accent);outline-offset:2px}.ht-play{width:48px;height:48px;border-radius:50%!important;display:grid;place-items:center;background:var(--ht-accent)!important;color:var(--ht-surface)!important}.ht-play svg{width:22px;height:22px;fill:currentColor}.ht-sq{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ht-ink-2);border:1px solid var(--ht-rule-2)!important}.ht-sq svg{width:14px;height:14px;fill:currentColor}.ht-now{grid-area:now;display:grid;min-width:0}.ht-now-h{font:700 1.5rem/1.1 var(--ht-mono);color:var(--ht-ink-3);white-space:nowrap}.ht-now-h.ht-b{color:var(--ht-blow)}.ht-now-h.ht-d{color:var(--ht-draw)}.ht-now-h i{font-style:normal;font-size:.75em;vertical-align:.15em}.ht-now-s{font-size:.74rem;color:var(--ht-ink-3);white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}.ht-now-s b{color:var(--ht-ink-2)}.ht-ctl{grid-area:ctl;gap:8px}.ht-ctl,.ht-tempo{display:flex;align-items:center}.ht-tempo{border:1px solid var(--ht-rule-2);border-radius:999px;padding:2px}.ht-tempo button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ht-ink-2)}.ht-tempo button.ht-bpm{width:auto;min-width:48px;display:grid;justify-items:center;line-height:1.05;border-radius:8px}.ht-bpm b{font:600 .98rem var(--ht-mono)}.ht-bpm small{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ht-ink-3)}.ht-i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ht-tg{display:inline-flex;flex-direction:column;align-items:center;gap:1px;padding:4px 6px!important;border-radius:8px;color:var(--ht-ink-3)!important;min-width:44px}.ht-tg span{white-space:nowrap;font-size:.58rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.ht-tg[aria-pressed=true]{color:var(--ht-accent)!important}.ht-sound{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 8px;border:1px solid var(--ht-rule-2);border-radius:999px;color:var(--ht-ink-2);cursor:pointer}.ht-sound:focus-within{outline:2px solid var(--ht-accent);outline-offset:2px}.ht-sound select{font:600 .78rem var(--ht-sans);color:var(--ht-ink);background:transparent;border:0;padding:6px 2px;max-width:7.5rem;cursor:pointer;outline:none}.ht-sound option{color:var(--ht-ink);background:var(--ht-surface)}.ht-harp{grid-area:harp;justify-self:center;width:100%;max-width:420px;display:grid;gap:3px}.ht-harp-body{border-radius:9px;overflow:hidden;border:1.5px solid var(--ht-harp-plate-edge);background:var(--ht-harp-plate)}.ht-plate{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;padding:2px 8px 1px}.ht-plate span{font:700 .74rem/16px var(--ht-mono);text-align:center;color:var(--ht-harp-num);border-radius:4px;font-variant-numeric:tabular-nums}.ht-plate span.ht-on.ht-b{background:var(--ht-harp-blow);color:var(--ht-harp-num-on)}.ht-plate span.ht-on.ht-d{background:var(--ht-harp-draw);color:var(--ht-harp-num-on)}.ht-comb{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;background:var(--ht-harp-comb);padding:6px 8px;border-top:1.5px solid var(--ht-harp-plate-edge)}.ht-hole{height:20px;border-radius:4px;background:var(--ht-harp-hole);box-shadow:inset 0 0 0 1.5px var(--ht-harp-hole-edge);display:grid;place-items:center;transition:background-color .12s,box-shadow .12s,transform .12s}.ht-hole svg{width:12px;height:12px;stroke:var(--ht-harp-on-ink);stroke-width:2.8;fill:none}.ht-hole.ht-on{transform:scale(1.12)}.ht-hole.ht-on.ht-b{background:var(--ht-harp-blow);box-shadow:0 0 0 2px var(--ht-harp-comb),0 0 0 4px var(--ht-harp-blow)}.ht-hole.ht-on.ht-d{background:var(--ht-harp-draw);box-shadow:0 0 0 2px var(--ht-harp-comb),0 0 0 4px var(--ht-harp-draw)}.ht-hole.ht-nx.ht-b{outline:2px dashed var(--ht-harp-blow);outline-offset:1px}.ht-hole.ht-nx.ht-b,.ht-hole.ht-nx.ht-d{box-shadow:inset 0 0 0 1.5px var(--ht-harp-hole-edge)}.ht-hole.ht-nx.ht-d{outline:2px dashed var(--ht-harp-draw);outline-offset:1px}.ht-bends{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;padding:0 9px;height:11px}.ht-bends span{display:flex;justify-content:center;color:var(--ht-harp-draw)}.ht-bends span.ht-b{color:var(--ht-harp-blow)}.ht-bends svg{width:10px;height:10px;stroke:currentColor;stroke-width:2.6;fill:none}@media (max-width:640px){.ht{--ht-fs:13.5px}.ht-tp{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"now harp" "btn ctl";gap:8px 12px}.ht-ctl{justify-self:end;gap:4px;flex-wrap:wrap;justify-content:flex-end}.ht-sound select{max-width:6.5rem}.ht-play{width:44px;height:44px}.ht-now-h{font-size:1.25rem}.ht-tg{min-width:38px}}@media (max-width:360px){.ht-tg span{display:none}}@media (prefers-reduced-motion:reduce){.ht *,.ht :after,.ht :before{transition:none!important}}