@font-face{font-family:HTC Acc;src:url(/fonts/htc-acc.woff?v=1) format("woff");font-weight:400;font-display:swap;unicode-range:U+266D-266F}:root{--bg: #f4f6f8;--paper: #ffffff;--ink: #13161b;--ink-2: #2c323b;--muted: #59616d;--line: #d6dbe2;--line-2: #e7ebef;--acc: #13161b;--acc-ink: #ffffff;--acc-soft: #e7ebef;--on: #13161b;--on-ink: #ffffff;--on-soft: #e7ebef;--note-ink: #13161b;--idle: #c5cbd3;--wood: #eef1f4;--key-w: #ffffff;--key-b: #1b1f25;--key-line: #9aa3ae;--disp: "Atkinson Hyperlegible Next", "HTC Acc", -apple-system, "Segoe UI", Roboto, sans-serif;--body: "Atkinson Hyperlegible Next", "HTC Acc", -apple-system, "Segoe UI", Roboto, sans-serif;--r: 6px;--wrap: 1120px;--read: 68ch;--n0: oklch(.82 .11 25);--n0d: oklch(.47 .12 25);--n1: oklch(.82 .11 55);--n1d: oklch(.47 .12 55);--n2: oklch(.82 .11 85);--n2d: oklch(.47 .12 85);--n3: oklch(.82 .11 115);--n3d: oklch(.47 .12 115);--n4: oklch(.82 .11 145);--n4d: oklch(.47 .12 145);--n5: oklch(.82 .11 175);--n5d: oklch(.47 .12 175);--n6: oklch(.82 .11 205);--n6d: oklch(.47 .12 205);--n7: oklch(.82 .11 235);--n7d: oklch(.47 .12 235);--n8: oklch(.82 .11 265);--n8d: oklch(.47 .12 265);--n9: oklch(.82 .11 295);--n9d: oklch(.47 .12 295);--n10: oklch(.82 .11 325);--n10d: oklch(.47 .12 325);--n11: oklch(.82 .11 355);--n11d: oklch(.47 .12 355);color-scheme:light}@media(prefers-color-scheme:dark){:root{--bg: #101317;--paper: #171b21;--ink: #eef1f5;--ink-2: #d3d8df;--muted: #9aa3ae;--line: #2e343c;--line-2: #242931;--acc: #eef1f5;--acc-ink: #101317;--acc-soft: #242931;--on: #eef1f5;--on-ink: #101317;--on-soft: #242931;--idle: #4a525d;--wood: #1c2027;--key-w: #e6e9ee;--key-b: #0b0d10;--key-line: #59616d;--n0: oklch(.78 .12 25);--n0d: oklch(.8 .1 25);--n1: oklch(.78 .12 55);--n1d: oklch(.8 .1 55);--n2: oklch(.78 .12 85);--n2d: oklch(.8 .1 85);--n3: oklch(.78 .12 115);--n3d: oklch(.8 .1 115);--n4: oklch(.78 .12 145);--n4d: oklch(.8 .1 145);--n5: oklch(.78 .12 175);--n5d: oklch(.8 .1 175);--n6: oklch(.78 .12 205);--n6d: oklch(.8 .1 205);--n7: oklch(.78 .12 235);--n7d: oklch(.8 .1 235);--n8: oklch(.78 .12 265);--n8d: oklch(.8 .1 265);--n9: oklch(.78 .12 295);--n9d: oklch(.8 .1 295);--n10: oklch(.78 .12 325);--n10d: oklch(.8 .1 325);--n11: oklch(.78 .12 355);--n11d: oklch(.8 .1 355);color-scheme:dark}}[data-pc="0"]{--nc: var(--n0);--ncd: var(--n0d)}[data-pc="1"]{--nc: var(--n1);--ncd: var(--n1d)}[data-pc="2"]{--nc: var(--n2);--ncd: var(--n2d)}[data-pc="3"]{--nc: var(--n3);--ncd: var(--n3d)}[data-pc="4"]{--nc: var(--n4);--ncd: var(--n4d)}[data-pc="5"]{--nc: var(--n5);--ncd: var(--n5d)}[data-pc="6"]{--nc: var(--n6);--ncd: var(--n6d)}[data-pc="7"]{--nc: var(--n7);--ncd: var(--n7d)}[data-pc="8"]{--nc: var(--n8);--ncd: var(--n8d)}[data-pc="9"]{--nc: var(--n9);--ncd: var(--n9d)}[data-pc="10"]{--nc: var(--n10);--ncd: var(--n10d)}[data-pc="11"]{--nc: var(--n11);--ncd: var(--n11d)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body);font-feature-settings:"tnum" 0}a{color:var(--ink);text-decoration-color:var(--muted);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-color:var(--ink);text-decoration-thickness:2px}img,svg{max-width:100%}.skip{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.skip:focus{clip-path:none;width:auto;height:auto;padding:8px 12px;background:var(--paper);z-index:10;inset-block-start:8px;inset-inline-start:8px}:focus-visible{outline:3px solid var(--on);outline-offset:2px}header.site{border-bottom:1px solid var(--line);background:var(--bg)}.bar{display:flex;align-items:center;gap:28px;min-height:64px}.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 21px/1 var(--disp);letter-spacing:-.02em;white-space:nowrap}.brand svg{flex:none}nav.main{display:flex;gap:22px;font-size:15.5px;overflow-x:auto;scrollbar-width:none}nav.main a{color:var(--ink-2);text-decoration:none;white-space:nowrap;padding-block:6px}nav.main a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--acc)}.bar .lefty-toggle{margin-inline-start:auto}footer.site{margin-top:72px;border-top:1px solid var(--line);padding-block:36px 48px;font-size:15px;color:var(--muted)}footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}footer strong{color:var(--ink);display:block;margin-bottom:6px;font-weight:700}footer ul{list-style:none;margin:0;padding:0}footer li{margin:4px 0}footer a{color:var(--ink-2);text-decoration:none}footer a:hover{text-decoration:underline}.small{font-size:14px;color:var(--muted)}main{padding-block:18px 0}.crumbs{font-size:14px;color:var(--muted);margin:4px 0 2px}.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--acc)}h1{font:800 clamp(36px,4.8vw,60px)/1.04 var(--disp);letter-spacing:-.025em;margin:6px 0 10px;text-wrap:balance}h2{font:800 29px/1.15 var(--disp);letter-spacing:-.015em;margin:44px 0 12px}h3{font:700 19px/1.3 var(--body);margin:26px 0 8px}p,ul,ol,table{max-width:var(--read)}.answer{font-size:19px;line-height:1.55;margin:0 0 18px;max-width:62ch}.answer strong,.hl{color:var(--ink);font-weight:800}.lede{font-size:19px;color:var(--ink-2);max-width:62ch}.updated{font-size:14px;color:var(--muted)}.sym{font-weight:700;font-variant-numeric:tabular-nums}code,.code{font:700 .95em/1 var(--body);font-variant-numeric:tabular-nums;letter-spacing:.03em;white-space:nowrap}.player{background:var(--paper);border:0;border-block:1px solid var(--line);border-radius:0;box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax);padding:24px 0;display:grid;grid-template-columns:minmax(280px,400px) 1fr;gap:28px;align-items:start}.player.wide{grid-template-columns:1fr}.stage{position:relative}.stage .voicing{margin:0}.stage .voicing svg{width:100%;height:auto;display:block}.stage figcaption{font-size:14px;color:var(--muted);margin-top:4px}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}button{font:inherit;color:inherit;cursor:pointer}button.play{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);border:0;border-radius:var(--r);height:58px;padding:0 26px 0 22px;font:800 18px var(--body);box-shadow:0 1px #00000014;touch-action:manipulation}button.play svg{width:20px;height:20px}button.play .stop,button.play[aria-pressed=true] .go{display:none}button.play[aria-pressed=true] .stop{display:inline}.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.seg button{border:0;background:transparent;height:44px;padding:0 14px;font:600 15px var(--body);color:var(--ink-2);touch-action:manipulation}.seg button+button{border-inline-start:1px solid var(--line)}.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}.tog{border:1px solid var(--line);background:transparent;border-radius:var(--r);height:44px;padding:0 16px;font:600 15px var(--body);color:var(--ink-2);touch-action:manipulation}.tog[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin:4px 0 14px;padding:0}.facts div{min-width:0}.facts dt{font-size:13px;color:var(--muted)}.facts dd{margin:0;font:700 20px/1.3 var(--body)}.vtabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-top:14px}.vtabs button{border:1px solid var(--line);background:transparent;border-radius:var(--r);padding:8px 6px 6px;font:600 12.5px var(--body);color:var(--muted);text-align:center}.vtabs button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}.vtabs svg{width:100%;height:auto;display:block;pointer-events:none}.vtabs .vt-code{display:block;margin-top:2px}.pmini{margin-top:10px}.pmini svg{width:100%;max-width:420px;height:auto}.cbox .fret{stroke:var(--key-line);stroke-width:1.4}.cbox .nut{stroke:var(--ink);stroke-width:6}.cbox .str{stroke:var(--ink)}.cbox .dot{fill:var(--nc, var(--idle));transition:fill .08s,stroke-width .08s}.cbox .barre{fill:var(--idle)}.cbox .fin{fill:var(--note-ink);font:800 14px var(--body);pointer-events:none}.cbox .open{fill:var(--nc, var(--paper));stroke:var(--ink);stroke-width:1.6}.cbox .mute{fill:var(--muted);font:20px var(--body)}.cbox .nlabel{fill:var(--ncd, var(--muted));font:800 14px var(--body)}.cbox .fretno{fill:var(--muted);font:700 14px var(--body)}.cbox .dot.lit,.cbox .open.lit{stroke:var(--ink);stroke-width:4.5}.cbox .nlabel.lit{fill:var(--ink);text-decoration:underline}.kc-fig .cbox .nlabel,.pc-fig .cbox .nlabel,[data-vtab] .cbox .nlabel,.tiles .cbox .nlabel{display:none}.fboard .wood{fill:var(--wood)}.fboard .fret{stroke:var(--key-line);stroke-width:2}.fboard .nut{stroke:var(--ink);stroke-width:6}.fboard .str{stroke:var(--ink-2);stroke-width:1.3}.fboard .inlay{fill:var(--line)}.fboard .slabel,.fboard .fnum{fill:var(--muted);font:700 12px var(--body)}.fboard .cell circle{fill:var(--nc, var(--idle));stroke:none;transition:stroke-width .08s}.fboard .cell text{fill:var(--note-ink);font:800 11px var(--body);pointer-events:none}.fboard .cell.root circle{stroke:var(--ink);stroke-width:2.5}.fboard .cell.ghost circle{fill:transparent;stroke:var(--line)}.fboard .cell.ghost text{fill:var(--muted)}.fboard .cell.lit circle{stroke:var(--ink);stroke-width:5}.fboard.play .cell{cursor:pointer}.kbd .wk rect{fill:var(--key-w);stroke:var(--key-line);stroke-width:1}.kbd .bk rect{fill:var(--key-b)}.kbd .on rect,.kbd .bk.on rect{fill:var(--nc)}.kbd .lit rect{stroke:var(--ink);stroke-width:4}.kbd .wk.lit:not(.on) rect{fill:var(--nc)}.kbd .bk.lit:not(.on) rect{fill:var(--nc)}.kbd .klabel{font:800 12px var(--body);fill:var(--note-ink);pointer-events:none}.kbd .bk .klabel{font-size:10px}.kbd .clabel{font:600 10px var(--body);fill:var(--muted);pointer-events:none}.kbd .kfin{font:800 13px var(--body);fill:var(--ink-2)}.kbd.play [data-m]{cursor:pointer}.staff .sl,.staff .ledger{stroke:var(--ink);stroke-width:1.2}.staff .clef{font-family:Noto Music,serif;fill:var(--ink)}.staff .acc{font:20px "Noto Music",var(--body);fill:var(--ink)}.staff .note ellipse{fill:var(--ink);stroke:var(--ink);stroke-width:1}.staff .note.lit ellipse{fill:var(--nc);stroke-width:2.5}.staff .slbl{font:800 13px var(--body);fill:var(--ncd, var(--muted))}.lefty .cbox .mirror,.lefty .fboard .mirror{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}.lefty .cbox .mirror text,.lefty .fboard .mirror text{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}.cols2{display:grid;grid-template-columns:1fr 1fr;gap:28px}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}ol.steps{padding-inline-start:1.3em}ol.steps li,ul.tips li{margin:6px 0}table{border-collapse:collapse;width:100%;font-size:16px}th,td{text-align:start;padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:13px;color:var(--muted);font-weight:600}.tbl-wrap{overflow-x:auto}.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:10px 0;max-width:none}.chips a,.chips button{display:inline-block;border:1px solid var(--line);border-radius:var(--r);padding:6px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;background:var(--paper)}.chips a:hover{border-color:var(--ink)}.chips .lit,.tapbtn.lit{background:var(--on);color:var(--on-ink);border-color:var(--on)}.tapbtn{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:4px 12px 4px 10px;font-weight:700;font-size:14.5px}.tapbtn:before{content:"▶";font-size:10px;margin-inline-end:6px;color:var(--muted)}.index{columns:3 220px;column-gap:28px;padding:0;list-style:none;max-width:none}.index li{break-inside:avoid;padding:3px 0}.grid-q{display:grid;grid-template-columns:90px repeat(12,minmax(46px,1fr));gap:0;font-size:14.5px;max-width:none}.grid-q>*{padding:7px 4px;border-bottom:1px solid var(--line-2);text-align:center}.grid-q .rh{text-align:start;color:var(--muted);font-weight:600}.grid-q a{text-decoration:none;font-weight:700}.faq details{border-bottom:1px solid var(--line);padding:12px 0;max-width:var(--read)}.faq summary{font-weight:700;cursor:pointer;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";float:right;color:var(--muted);font-weight:400}.faq details[open] summary:after{content:"–"}.faq details p{margin:8px 0 0}.appcard{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;background:var(--paper);border:1px solid var(--line);border-inline-start:4px solid var(--ink);border-radius:var(--r);padding:16px 20px;margin:28px 0;max-width:760px}.appcard p{margin:2px 0}.appcard .go{background:var(--ink);color:var(--bg);text-decoration:none;border-radius:var(--r);padding:10px 18px;font-weight:700;white-space:nowrap}.appcard .disc{font-size:13px;color:var(--muted)}.adslot{margin:28px 0;min-height:250px;border:1px dashed var(--line);border-radius:var(--r);display:grid;place-items:center;color:var(--muted);font-size:13px}.progline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 14px}.video{position:relative;aspect-ratio:16 / 9;background:#000;border-radius:var(--r);overflow:hidden;max-width:820px}.video img,.video iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}.video .vnote{position:absolute;inset-inline:0;inset-block-end:0;padding:12px 16px;background:linear-gradient(transparent,#000000bf);color:#fff;font-size:15px}.pchords{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;list-style:none;padding:0;margin:12px 0;max-width:none}.pchords li{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--paper);transition:background .08s}.pchords li .num{display:block;font-size:13px;color:var(--muted);font-weight:700}.pchords li .sym{font:800 30px/1.1 var(--disp)}.pchords li.lit{background:var(--on);border-color:var(--on);color:var(--on-ink)}.pchords li.lit .num{color:var(--on-ink)}.prog-player{gap:14px}.prog-player .pchords{order:-1;margin:0;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.prog-player .pchords li{padding:14px 18px}.prog-player .pchords li{min-width:0}.prog-player .pchords li .sym{font-size:min(44px,7.5vw)}.ctl-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.ctl-row label{font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:8px}select,input[type=range],textarea,input[type=text]{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}select{height:44px;padding:0 12px}input[type=range]{accent-color:var(--acc);border:0;background:transparent;width:160px}textarea{width:100%;min-height:140px;padding:12px}.circle-wrap{display:grid;grid-template-columns:minmax(280px,520px) 1fr;gap:28px;align-items:center}.cof{width:100%;height:auto}.cof [data-ckey]{cursor:pointer}.cof .seg-maj path{fill:color-mix(in oklch,var(--nc) 55%,var(--paper));stroke:var(--paper);stroke-width:2}.cof .seg-min path{fill:color-mix(in oklch,var(--nc) 28%,var(--paper));stroke:var(--paper);stroke-width:2}.cof [data-ckey]:hover path{fill:var(--nc)}.cof [data-ckey].sel path{fill:var(--nc);stroke:var(--ink);stroke-width:3}.cof [data-ckey] text{fill:var(--note-ink)}.cof text{font:800 17px var(--body);fill:var(--note-ink);pointer-events:none}.cof .seg-min text{font-size:13px}.cof .sig{font:600 11px var(--body);fill:var(--muted)}.ci-key{font:800 36px/1.1 var(--disp);margin:0}.trainer-q svg{width:100%;max-width:420px;height:auto}.answers{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;max-width:520px}.answers button{height:54px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font:700 20px var(--body)}.tr-out{font-weight:700;min-height:1.6em}.metro{display:grid;justify-items:start;gap:16px}.bpm{font:800 96px/1 var(--disp)}.beats{display:flex;gap:12px}.beats span{width:28px;height:28px;border-radius:50%;border:2px solid var(--line)}.beats span.lit{background:var(--on);border-color:var(--on)}.beats span:first-child.lit{background:var(--acc);border-color:var(--acc)}.tuner-face{display:grid;justify-items:center;gap:6px;padding:20px}.tuner-note{font:800 84px/1 var(--disp)}.gauge{width:260px;height:140px}.gauge .needle{transform-origin:130px 130px;transition:transform .08s linear}.intune .tuner-note{color:var(--on)}.strings{display:flex;flex-wrap:wrap;gap:10px}.strings button{min-width:64px;height:54px;border-radius:var(--r);border:1px solid var(--line);background:var(--paper);font:700 18px var(--body)}.strings button.lit{background:var(--on);color:var(--on-ink)}.finder-out{min-height:3em;font-size:18px}.fo-main{font:800 34px/1.2 var(--disp)}.fo-main .inv{font:600 15px var(--body);color:var(--muted)}pre.tp-out{white-space:pre-wrap;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px;font:600 16px/1.5 ui-monospace,Menlo,monospace;min-height:140px}.hero{display:grid;grid-template-columns:1fr;gap:10px;margin:10px 0 18px}.picker{display:grid;gap:10px}.picker .row{display:flex;flex-wrap:wrap;gap:6px}.picker .row button{min-width:48px;height:44px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font:700 16px var(--body)}.picker .row button[aria-pressed=true]{background:var(--ink);color:var(--bg)}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;list-style:none;padding:0;max-width:none}.tiles a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;text-decoration:none;color:var(--ink);height:100%}.tiles a:hover{border-color:var(--acc)}.tiles strong{display:block;font:800 24px/1.15 var(--disp);margin-bottom:4px}.tiles span{color:var(--muted);font-size:15px}.tiles:has(svg){grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.tiles:has(svg) a{text-align:center}.tiles svg{display:block;width:100%;max-width:160px;height:auto;margin:6px auto}@media(max-width:860px){.player{grid-template-columns:1fr;padding:14px;gap:10px}.circle-wrap,.cols2{grid-template-columns:1fr}footer .cols{grid-template-columns:1fr 1fr}}@media(max-width:640px){body{font-size:16.5px}.wrap{padding-inline:16px}.bar{flex-wrap:wrap;gap:4px 16px;min-height:0;padding-block:10px 0}.brand{font-size:25px}nav.main{order:3;width:100%;gap:18px;padding-bottom:4px}h1{font-size:36px}h2{font-size:29px;margin-top:36px}.answer{font-size:17px;margin-bottom:12px}.stage .voicing svg{max-height:38vh}.player .controls{gap:8px}.player .controls .seg button,.player .controls .tog{height:40px;padding:0 11px;font-size:14px}.player>.ctl-col{display:contents}.player .controls{position:sticky;bottom:0;z-index:3;background:var(--paper);margin:0 -14px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);order:2}.player .stage{order:1}.player .rest{order:3}button.play{height:56px}.answers button{height:50px;font-size:18px}.grid-q{grid-template-columns:70px repeat(12,52px);overflow-x:auto}.appcard{grid-template-columns:1fr}.bpm{font-size:76px}}@media print{header.site,footer.site,.controls,.vtabs,.appcard,.adslot,.no-print,nav.crumbs,.faq summary:after{display:none!important}body{background:#fff;color:#000}.player{border:0;padding:0}.voicing[hidden]{display:block!important;break-inside:avoid}a{color:#000;text-decoration:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}.kc-list{list-style:none;padding:0;margin:14px 0 6px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;max-width:none}.kc-list li{display:grid;gap:6px;align-content:start}.kc{display:grid;gap:2px;justify-items:start;border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:8px 10px;text-align:start;min-height:64px;touch-action:manipulation}.kc .num{font-size:13px;color:var(--muted);font-weight:700}.kc .sym{font:800 28px/1.05 var(--disp)}.kc.lit{background:var(--on);border-color:var(--on);color:var(--on-ink)}.kc.lit .num{color:var(--on-ink)}.kc-fig{display:grid;justify-items:center;text-decoration:none;color:var(--muted)}.kc-fig svg{width:100%;max-width:110px;height:auto}.sigs{display:flex;flex-wrap:wrap;gap:8px 28px}.sigs figure{margin:0}.sigs svg{width:200px;height:auto}.staff-fig{margin:18px 0}.staff-fig svg{max-width:100%;height:auto}.scale-figs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:start}.scale-figs figure{margin:0}.scale-figs svg{width:100%;height:auto;overflow:visible}.scale-figs .fig-fb{overflow-x:auto}.scale-figs figcaption{font-size:14px;color:var(--muted);margin-top:4px}.tempo{font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:8px}@media(max-width:860px){.kc-list{grid-template-columns:repeat(4,minmax(0,1fr))}.scale-figs{grid-template-columns:1fr}}@media(max-width:480px){.kc-list{grid-template-columns:repeat(3,minmax(0,1fr))}}.shape-row{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:14px;max-width:none}.shape-row a{display:grid;justify-items:center;text-decoration:none;color:var(--ink);gap:2px}.shape-row svg{width:96px;height:auto}.lesson-video{margin:20px 0;max-width:820px}.lesson-video figcaption{font-size:14px;color:var(--muted);margin-top:6px}.video video{position:absolute;inset:0;width:100%;height:100%}.iv-figs{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:center}.iv-figs figure{margin:0}.iv-fb{margin:12px 0}.iv-fb svg{max-width:100%;height:auto}.h1-alt{display:block;font-size:.42em;line-height:1.3;color:var(--muted);margin-top:4px;letter-spacing:0}.cof .hub{fill:var(--bg);stroke:var(--line)}.cof .hubt{font:600 16px var(--body);fill:var(--muted)}.cof .hubt.small{font-size:13px}.home-hero h1{margin-bottom:4px}.picker-box{background:var(--paper);border:0;border-block:1px solid var(--line);border-radius:0;box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax);padding:20px 0;display:grid;gap:16px;margin:14px 0 8px}.pk-controls{display:grid;gap:10px}.pk-row{display:flex;flex-wrap:wrap;gap:6px}.pk-row button{min-width:48px;height:44px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);font:700 16px var(--body);color:var(--ink);padding:0 10px;touch-action:manipulation}.pk-row button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.pk-stage{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:24px;align-items:center}.pk-fig{height:330px;display:grid;place-items:center}.pk-fig svg{max-width:100%;max-height:330px;width:auto;height:auto}.pk-name{font:800 72px/1 var(--disp);margin:0}.pk-notes{font:700 20px var(--body);margin:6px 0}.home-list li{margin:6px 0}.home-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.home-cols h3{margin-top:0}ul.plain{list-style:none;padding:0}ul.plain li{padding:3px 0}@media(max-width:760px){.pk-stage{grid-template-columns:1fr;gap:8px}.pk-fig{height:260px}.pk-fig svg{max-height:260px}.pk-name{font-size:54px}.home-cols{grid-template-columns:1fr}.pk-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.pk-row button{min-width:0;padding:0 2px;font-size:15px}.pk-stage{display:flex;flex-direction:column-reverse;align-items:stretch}.pk-info{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 14px}.pk-info .pk-name{grid-row:span 2}.pk-info .play{grid-column:1 / -1;justify-self:start;margin-top:8px}}.pchart-t{width:100%;border-collapse:collapse;max-width:none}.pchart-t th{text-align:center}.pchart-t tbody th{font:800 24px var(--disp);color:var(--ink)}.pchart-t td{text-align:center;padding:4px;border:1px solid var(--line-2)}.pchart-t a{display:grid;justify-items:center;text-decoration:none;color:var(--ink)}.pc-sym{font-weight:700}.pc-fig svg{width:84px;height:auto}.pchart[data-inst=piano] .pc-fig svg{width:150px}.pc-sub{font-size:11px;color:var(--muted)}.print-only{display:none}.embed-demo{display:grid;grid-template-columns:380px 1fr;gap:24px;align-items:start}.embed-demo textarea{font:13px/1.4 ui-monospace,Menlo,monospace;min-height:110px}.embed-player{grid-template-columns:1fr;padding:12px;border:0;background:transparent}.embed-player .voicing svg{width:100%;max-height:300px}@media(max-width:640px){.embed-player .controls{margin-inline:-12px;padding-inline:12px}}.e-title{font:800 30px/1 var(--disp);margin:0}@media(max-width:760px){.embed-demo{grid-template-columns:1fr}}@media print{@page{size:landscape;margin:10mm}.print-only{display:block;font-size:12px}.pchart-t td{padding:1px}.pc-fig svg{width:60px}.pchart[data-inst=piano] .pc-fig svg{width:110px}h1{font-size:22px;margin:0}}ul.changes li{margin:8px 0}.cform{display:grid;gap:6px;max-width:520px;margin:18px 0}.cform label{font-size:14px;color:var(--muted);font-weight:600;margin-top:8px}.cform input,.cform select,.cform textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink)}.cform button{margin-top:12px;justify-self:start}.form-msg{padding:12px 16px;border:1px solid var(--on);border-radius:var(--r);max-width:520px}.form-msg.err{border-color:var(--acc)}.drills li{margin:8px 0}.grecaptcha-badge{visibility:hidden}.kbd[data-keyboard-access][role=group] .bk rect{fill:#1b1f25}.kbd[data-keyboard-access][role=group] .bk .klabel{fill:#fff}.kbd[data-keyboard-access][role=group] .bk.on rect,.kbd[data-keyboard-access][role=group] .bk.lit rect{fill:#f4f6f8;stroke:#13161b;stroke-width:2}.kbd[data-keyboard-access][role=group] .bk.on .klabel,.kbd[data-keyboard-access][role=group] .bk.lit .klabel{fill:#13161b}.kbd[data-keyboard-access][role=group] [data-m]:focus{outline:none}.kbd[data-keyboard-access][role=group] [data-m]:focus rect{stroke:#b34700;stroke-width:4}.cof [data-ckey]:focus{outline:none}.cof [data-ckey]:focus path{stroke:#b34700;stroke-width:4}.ha-demo{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:6px 0 10px}.ha-kbd{margin:0 0 10px}.ha-kbd svg{width:100%;height:auto;max-width:620px;display:block}.ha-kbd figcaption,.ha-cap{font-size:14.5px;color:var(--muted);margin-top:6px;min-height:1.5em}.ha-taps{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px;padding:0;list-style:none;max-width:none}.ha-taps .tapbtn{padding:7px 14px 7px 12px;font-size:15px;min-height:40px;touch-action:manipulation}.ha-taps .tapbtn[aria-pressed=true]{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}.ha-taps .tapbtn .ha-sub{font-weight:500;color:var(--muted);margin-inline-start:4px}.ha-taps .tapbtn.lit .ha-sub{color:var(--on-ink)}.ha-ex{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 14px}.ha-grid{max-width:none}.ha-grid table{max-width:none;min-width:640px}.ha-grid td,.ha-grid th{padding-inline-end:8px;white-space:nowrap}.ha-grid td a{font-weight:700;text-decoration:none}.ha-grid td a:hover{text-decoration:underline}.ha-tbl td .tapbtn{white-space:nowrap}.ha-sigs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;list-style:none;padding:0;margin:12px 0;max-width:none}.ha-sig{display:grid;gap:2px;justify-items:start;width:100%;text-align:start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px 10px;touch-action:manipulation}.ha-sig svg{width:100%;height:auto;max-width:220px;pointer-events:none}.ha-sig strong{font:800 22px/1.15 var(--disp)}.ha-sig span{font-size:14px;color:var(--muted)}.ha-sig.lit{border-color:var(--on);box-shadow:inset 0 0 0 2px var(--on)}.ha-sig.lit strong,.ha-sig.lit span{color:var(--ink)}.ha-sig.lit{background:var(--on-soft)}.ha-sig:before{content:none}.ha-staffs{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:flex-start}.ha-staffs figure{margin:0}.ha-staffs svg{width:100%;max-width:260px;height:auto}.ha-staffs figcaption{font-size:14px;color:var(--muted)}.ha-triads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:12px 0;max-width:none}.ha-triads li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:grid;gap:4px;align-content:start}.ha-triads svg{width:100%;max-width:150px;height:auto}.ha-triads strong{font:800 24px/1.1 var(--disp)}.ha-triads .small{margin:0}.ha-note{font-size:15px;color:var(--muted)}@media(max-width:860px){.ha-triads{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.ha-demo{padding:12px}.ha-sigs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ha-sig{padding:6px 8px 8px}.ha-sig strong{font-size:19px}}.ha-kbd svg.kbd.play{background:none;height:auto;padding:0;border-radius:0;box-shadow:none;display:block;gap:0}.ha-cof .cof .hub{fill:var(--bg);stroke:var(--line)}.ha-cof .cof .hubt{font:600 16px var(--body);fill:var(--muted)}.ha-cof .cof .hubt.small{font-size:13px}.b-cards{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-width:none}.b-cards li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:10px 10px 12px;display:grid;gap:6px;justify-items:center;align-content:start;text-align:center}.b-cards .b-num{font-size:12.5px;color:var(--muted);font-weight:700;justify-self:start}.b-cards .b-name{font:800 26px/1.05 var(--disp);color:var(--ink);text-decoration:none}.b-cards .b-name:hover{color:var(--acc)}.b-cards svg{width:100%;max-width:132px;height:auto;display:block}.b-cards .b-kb svg{max-width:100%}.b-cards .code{font-size:13px;color:var(--muted)}.b-cards.wide{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.b-seqbtn{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--acc);color:var(--acc-ink);border-radius:var(--r);height:44px;padding:0 18px;font:700 15px var(--body);touch-action:manipulation}.b-seqbtn:before{content:"▶";font-size:11px}.b-seqbtn[aria-pressed=true]:before{content:"■"}.b-pairs{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px;max-width:var(--read)}.b-pairs li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-bottom:1px solid var(--line-2);padding-bottom:10px}.b-pairs .b-why{flex-basis:100%;font-size:15px;color:var(--ink-2);margin:0}.b-note{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;font-size:15px;color:var(--ink-2);max-width:var(--read)}.b-disc{font-size:14.5px;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;max-width:var(--read)}.b-table td .tapbtn{white-space:nowrap}.b-table td,.b-table th{padding-inline-end:10px}.b-table.center td,.b-table.center th{text-align:center}.b-table.center td:first-child,.b-table.center th:first-child{text-align:start}.b-verdict{list-style:none;padding:0;display:grid;gap:10px;max-width:var(--read)}.b-verdict li{background:var(--paper);border:1px solid var(--line);border-inline-start:4px solid var(--on);border-radius:var(--r);padding:10px 14px}.b-shop{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;max-width:none}.b-shop a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:700}.b-shop a span{display:block;font-weight:400;font-size:14px;color:var(--muted)}.b-shop a:hover{border-color:var(--acc)}.b-src{font-size:13.5px;color:var(--muted)}.b-src a{color:var(--muted)}.b-kbrow{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin:12px 0}.b-kbrow figure{margin:0;display:grid;gap:4px;justify-items:start}.b-kbrow svg{width:220px;max-width:100%;height:auto}.b-kbrow figcaption{font-size:14px;color:var(--muted)}@media(max-width:640px){.b-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.b-cards.wide{grid-template-columns:repeat(2,minmax(0,1fr))}.b-kbrow svg{width:100%}.b-kbrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.b-kbrow>p{grid-column:1 / -1}}.b-strum{display:grid;grid-template-columns:repeat(8,minmax(0,44px));gap:5px;margin:10px 0;list-style:none;padding:0;max-width:none}.b-strum .b-slot{height:48px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);display:grid;place-items:center;font:700 18px var(--body);line-height:1}.b-strum .b-slot small{display:block;font-size:11px;color:var(--muted);font-weight:600}.b-strum .b-slot.lit{background:var(--on);color:var(--on-ink);border-color:var(--on)}.b-strum .b-slot.lit small{color:var(--on-ink)}.b-strumrow{display:grid;gap:4px;margin:16px 0}.b-table .code,.b-kbrow .code{white-space:nowrap}.b-table td .code.small{display:block;font-size:12px}.b-table.b-apps{min-width:760px}.b-table.b-apps td{font-size:15px}.c-fig{margin:16px 0 8px;min-width:0;max-width:100%}.c-fig svg{max-width:100%;height:auto}.c-fig figcaption{font-size:14px;color:var(--muted);margin-top:6px;max-width:var(--read)}.c-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}.c-scroll svg{display:block;height:auto;width:100%}.c-kbd svg{min-width:700px}.c-fb svg{min-width:720px}.c-stf svg{min-width:560px;max-width:760px}.c-hint{display:none;font-size:13px;color:var(--muted);margin:4px 0 0}@media(max-width:760px){.c-hint{display:block}}.c-allkeys .kbd .wk.on rect{fill:var(--key-w)}.c-allkeys .kbd .bk.on rect{fill:var(--key-b)}.c-allkeys .kbd .wk.c-mid rect{fill:var(--acc-soft)}.c-allkeys .kbd .lit rect,.c-allkeys .kbd .wk.lit rect,.c-allkeys .kbd .bk.lit rect{fill:var(--on)}.c-allkeys .kbd .wk .klabel{font-size:11px}.c-allkeys .kbd .bk .klabel{font-size:9px}.fboard .cell.c-sharp circle{r:9px;fill:var(--paper);stroke:var(--line)}.fboard .cell.c-sharp text{font-size:8px;fill:var(--muted)}.fboard .cell.c-sharp.lit circle{fill:var(--on);stroke:var(--on)}.fboard .cell.c-sharp.lit text{fill:var(--on-ink)}.c-taprow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px;max-width:760px}.c-legend{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;color:var(--muted);margin:6px 0}.c-legend b{color:var(--ink)}.c-mn{font:800 24px/1.3 var(--disp);margin:4px 0 12px}.c-mn strong{color:var(--acc);font-weight:400}.c-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:8px 0 18px}.c-panel>h2:first-child{margin-top:0}.c-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:860px){.c-two{grid-template-columns:1fr}}.c-grand svg{display:block;width:100%;max-width:560px;height:auto}.c-rtab td{vertical-align:middle}.c-rtab svg{display:block}.c-sym .nh{fill:var(--ink);stroke:var(--ink);stroke-width:1.6}.c-sym .nh.open{fill:none}.c-sym .st{stroke:var(--ink);stroke-width:1.6}.c-sym .fl,.c-sym .rs{fill:var(--ink)}.c-sym .rsl{stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}.c-sym .sl{stroke:var(--ink);stroke-width:1.2}.c-score svg{display:block;width:100%;max-width:760px;height:auto}.c-score .sl,.c-score .ledger,.c-score .bar{stroke:var(--ink);stroke-width:1.2}.c-score .bar.end{stroke-width:4}.c-score .clef,.c-score .ts{font-family:Noto Music,serif;fill:var(--ink)}.c-score .ts{font:700 22px/1 var(--body)}.c-score .note .nh{fill:var(--ink);stroke:var(--ink);stroke-width:1.6}.c-score .note .nh.open{fill:none}.c-score .note .st,.c-score .beam{stroke:var(--ink);stroke-width:1.6}.c-score .beam{stroke-width:5}.c-score .note.lit .nh{fill:var(--on);stroke:var(--on)}.c-score .note.lit .nh.open{fill:none;stroke:var(--on);stroke-width:3}.c-score .note.lit .st{stroke:var(--on)}.c-score .rest .rsl{stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}.c-score .rest.lit .rsl{stroke:var(--on)}.c-score .slbl{font:700 13px var(--body);fill:var(--muted)}.c-score .cnt{font:600 12px var(--body);fill:var(--muted)}.c-tool{margin:8px 0 22px}.c-metro{display:grid;gap:18px;justify-items:start}.c-metro .bpm-row{display:flex;align-items:baseline;gap:12px}.c-metro .bpm-unit{font-size:16px;color:var(--muted);font-weight:700}.c-metro input[type=range]{width:min(520px,100%);height:36px}.c-metro .beats span{width:34px;height:34px}.c-steps{display:flex;flex-wrap:wrap;gap:8px}.c-steps button{min-width:54px;height:44px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font:700 16px var(--body);touch-action:manipulation}.c-tuner{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:24px;align-items:center}.c-tuner .gauge .tick{stroke:var(--muted);stroke-width:1.5}.c-tuner .gauge .tick.mid{stroke:var(--on);stroke-width:3}.c-tuner .gauge .arc{fill:none;stroke:var(--line);stroke-width:2}.c-tuner .gauge .needle line{stroke:var(--acc);stroke-width:3;stroke-linecap:round}.c-tuner .gauge .needle circle{fill:var(--acc)}.c-tuner .gauge .gl{font:600 11px var(--body);fill:var(--muted)}.c-tuner .t-cents{font-weight:700;min-height:1.5em}.c-tuner .t-msg{font-size:15px;color:var(--muted);min-height:1.5em;margin:6px 0 12px}.c-tuner .strings button small{display:block;font-size:11px;color:var(--muted);font-weight:600}.c-tuner .strings button{height:60px}@media(max-width:760px){.c-tuner{grid-template-columns:1fr}}.c-finder .c-kbd svg{min-width:640px}.c-finder .kbd .on rect{fill:var(--acc-soft)}.c-finder .kbd .bk.on rect{fill:var(--nc)}.c-tp{display:grid;grid-template-columns:1fr 1fr;gap:18px}.c-tp label.c-lbl{display:block;font-size:14px;color:var(--muted);font-weight:600;margin-bottom:6px}.c-tp textarea{font:600 16px/1.5 ui-monospace,Menlo,monospace}.c-tp pre.tp-out{margin:0}@media(max-width:760px){.c-tp{grid-template-columns:1fr}}.c-capo th,.c-capo td{text-align:center;padding-inline:6px}.c-capo th:first-child,.c-capo td:first-child{text-align:start}.c-builder .b-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}.c-builder .b-row label{font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;font-weight:600;max-width:100%}.c-builder .b-row select{min-width:0;max-width:100%;flex:1 1 auto}.c-builder .b-share{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}.c-builder .b-share input{flex:1 1 280px;height:44px;padding:0 12px;font-size:14px}.c-builder .prog-player{border:0;padding:0;background:transparent}.c-note{border-inline-start:3px solid var(--on);padding:4px 0 4px 14px;max-width:var(--read)}.c-fig svg.play,.c-tool svg.play{background:none;border-radius:0;padding:0;height:auto;box-shadow:none;display:block}.c-builder .prog-player .controls label.tempo,.c-builder .prog-player [data-share]{display:none}.c-builder .b-share .c-lbl{flex-basis:100%;margin:0}.c-small svg{display:block;width:100%;max-width:380px;height:auto}.c-builder .prog-player{box-shadow:none;clip-path:none}