:root{--bg:#faf8f4;--ink:#1c1a17;--muted:#8d877c;--line:#e7e2d8;--accent:#e0705b;--heat-0:#e0705b;--heat-1:#ecab9e;--heat-2:#f4d2c9;--heat-3:#f9e9e4;--serif:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;color:var(--ink);background:var(--bg);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:17px;line-height:1.5}*{box-sizing:border-box}body{margin:0}h1,h2{font-weight:500}.fretboard{background:#f3eee4;border-radius:8px;width:100%;height:auto;display:block}.fretboard .string{stroke:#b8ad99}.fretboard .fret{stroke:var(--line);stroke-width:2px}.fretboard .nut{stroke:var(--ink);stroke-width:5px}.fretboard .inlay{fill:#e2d9c6}.fretboard .open-label{fill:var(--ink);font-family:var(--sans);text-anchor:middle;font-size:15px;font-weight:600}.fretboard .fret-number{fill:var(--muted);font-family:var(--sans);font-size:12px}.fretboard .note{transition:opacity .12s}.fretboard .tappable{cursor:pointer}.fretboard .tappable:hover{opacity:.7}.fretboard .note-dot{fill:var(--ink)}.fretboard .note-dot--root{fill:var(--accent)}.fretboard .note-dot--dim{opacity:.18}.fretboard .note-label--dim{opacity:.22}.fretboard .constellation{fill:none;stroke:var(--accent);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;opacity:.8}.fretboard .constellation--all{stroke-width:1.5px;opacity:.32}.fretboard .note-label{fill:#fff;font-family:var(--sans);pointer-events:none;font-size:13px;font-weight:600}.tab{font-family:var(--sans);background:0 0;border-radius:8px;flex-direction:column;gap:0;padding:12px 16px;display:inline-flex}.tab-row{align-items:center;height:30px;display:flex}.tab-open{width:22px;color:var(--muted);text-align:right;margin-right:10px;font-size:13px;font-weight:600}.tab-line{border-bottom:1px solid #d8d0c0;justify-content:center;gap:6px;width:120px;display:flex;position:relative}.tab-mark{background:var(--bg);color:var(--ink);text-align:center;padding:0 3px;font-size:12px;font-weight:600;position:relative;top:10px}.tab-mark--mute{color:var(--muted);background:0 0;font-weight:400}.tab-caption{text-align:center;color:var(--muted);margin-top:8px;font-size:12px}.tabseq{font-family:var(--sans);flex-direction:column;padding:12px 16px;display:inline-flex}.tabseq-grid{align-items:stretch;display:flex}.tabseq-col{flex-direction:column;width:20px;display:flex}.tabseq-col--labels{width:22px;margin-right:6px}.tabseq-cell{justify-content:center;align-items:center;height:22px;display:flex;position:relative}.tabseq-col:not(.tabseq-col--labels) .tabseq-cell:before{content:"";background:#d8d0c0;height:1px;position:absolute;top:50%;left:0;right:0}.tabseq-open{color:var(--muted);justify-content:flex-end;font-size:13px;font-weight:600}.tabseq-num{z-index:1;background:var(--bg);color:var(--ink);padding:0 3px;font-size:12px;font-weight:600;position:relative}.tabseq-caption{text-align:center;color:var(--muted);margin-top:8px;font-size:12px}.page{max-width:760px;margin:0 auto;padding:12vh 24px 64px}.page--wide{max-width:1040px;padding-top:7vh}.masthead{text-align:center;margin-bottom:8vh}.masthead--compact{margin-bottom:4vh}.title{font-family:var(--serif);letter-spacing:-1px;margin:0;font-size:64px}.title--sm{font-size:40px}.title--sm:after{margin-top:14px}.title:after{content:"";background:var(--accent);border-radius:2px;width:40px;height:3px;margin:20px auto 0;display:block}.tagline{color:var(--muted);margin:26px 0 18px;font-size:18px}.topnav{justify-content:center;gap:28px;margin-top:18px;display:flex}.topnav-item{font-family:var(--serif);color:var(--muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:4px 2px;font-size:22px;transition:color .12s,border-color .12s}.topnav-item:hover{color:var(--ink)}.topnav-item--on{color:var(--ink);border-bottom-color:var(--accent)}.controls{flex-direction:column;gap:14px;margin-bottom:24px;display:flex}.control-group{flex-wrap:wrap;gap:6px;display:flex}.control-group--wrap{margin-bottom:22px}.controls-row{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.control-group--right{margin-left:auto}.transport{flex-wrap:wrap;align-items:center;row-gap:12px;display:flex}.cluster{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.cluster+.cluster{border-left:1px solid var(--line);margin-left:14px;padding-left:14px}.picker-box summary{cursor:pointer;color:var(--muted);width:fit-content;font-size:14px}.picker-box summary:hover{color:var(--ink)}.picker-grids{flex-direction:column;gap:14px;margin-top:14px;display:flex}.view-controls{flex-direction:column;gap:12px;margin-bottom:28px;display:flex}.seg{background:#ede8dd;border-radius:999px;flex-wrap:wrap;align-items:center;gap:2px;width:fit-content;padding:3px;display:inline-flex}.seg__btn{font-family:var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:999px;padding:5px 12px;font-size:14px;transition:color .15s,background .15s,box-shadow .15s}.seg__btn:hover{color:var(--ink)}.seg__btn--on{background:var(--bg);color:var(--ink);font-weight:600;box-shadow:0 1px 2px #1c1a1724}.pill{font-family:var(--sans);color:var(--ink);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:999px;padding:7px 13px;font-size:14px;transition:background .12s,border-color .12s}.pill:hover{border-color:var(--muted)}.pill--on{background:var(--ink);border-color:var(--ink);color:#fff}.pill--correct{color:#fff;background:#2f7d4f;border-color:#2f7d4f}.pill--wrong{color:#fff;background:#b23a3a;border-color:#b23a3a}.quiz-score{color:var(--muted);font-variant-numeric:tabular-nums;align-self:center;font-size:14px}.pill--play{border-color:var(--accent);color:var(--accent);font-weight:600}.pill--play:hover{background:var(--accent);color:#fff}.tab-shelf{flex-wrap:wrap;gap:14px;margin-top:22px;display:flex}.tab-card{cursor:pointer;border:2px solid #0000;border-radius:10px;transition:border-color .12s}.tab-card--on{border-color:var(--accent)}.chord-editor{flex-direction:column;gap:14px;display:flex}.chord-input{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.chord-input input{border:1px solid var(--line);width:240px;height:34px;font-family:var(--sans);color:var(--ink);background:0 0;border-radius:999px;padding:0 12px;font-size:14px}.chord-input input:focus{border-color:var(--muted);outline:none}.paste-box{margin-top:18px}.paste-box summary{cursor:pointer;color:var(--muted);width:fit-content;font-size:14px}.paste-box summary:hover{color:var(--ink)}.paste-box textarea{border:1px solid var(--line);width:100%;max-width:420px;font-family:var(--mono,monospace);color:var(--ink);resize:vertical;background:0 0;border-radius:10px;margin:12px 0 10px;padding:10px 12px;font-size:14px;display:block}.paste-box textarea:focus{border-color:var(--muted);outline:none}.songbook{border-bottom:1px solid var(--line);flex-direction:column;gap:12px;margin-bottom:26px;padding-bottom:22px;display:flex}.songbook-tabs{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.songbook-meta{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.songbook-name{font-family:var(--serif);color:var(--ink);background:0 0;border:none;border-bottom:1px solid #0000;min-width:180px;padding:2px 0;font-size:22px}.songbook-name:hover{border-bottom-color:var(--line)}.songbook-name:focus{border-bottom-color:var(--accent);outline:none}.control-label{color:var(--muted);align-self:center;margin-right:4px;font-size:13px}.score{flex-direction:column;gap:22px;margin:18px 0 24px;display:flex}.system{position:relative}.system-bar{background:var(--line);width:1px;position:absolute;top:0;bottom:0}.playhead{background:var(--accent);pointer-events:none;z-index:3;width:2px;position:absolute;top:0;bottom:0}.playhead--cursor{opacity:.45}.system{cursor:pointer}.staff{position:absolute;left:0;right:0}.staff-line{background:#d8d0c0;height:1px;position:absolute;left:0;right:0}.staff-fret{background:var(--bg);font-family:var(--sans);color:var(--ink);padding:0 3px;font-size:12px;font-weight:600;position:absolute;transform:translateY(-50%)}.staff-fret--on{color:var(--accent)}.tl-chord{box-sizing:border-box;border-left:3px solid var(--ink);cursor:pointer;background:#00000004;height:54px;padding:6px 8px 0 10px;position:absolute;top:0}.tl-chord:hover{background:#0000000a}.tl-chord--on{border-left-color:var(--accent);background:var(--accent-bg,#e0705b14)}.tl-chord--cont{border-left:2px dashed var(--line)}.tl-chord__label{font-family:var(--serif);color:var(--ink);white-space:nowrap;font-size:21px;line-height:1.15;display:block}.tl-chord__fn{color:var(--muted);white-space:nowrap;font-size:11px;line-height:1.3;display:block}.tl-chord__fn--secondary,.tl-chord__fn--borrowed,.tl-chord__fn--tritone{color:var(--accent)}.tl-chord__fn--outside{color:var(--muted);opacity:.6}.tl-chord__remove{color:var(--muted);cursor:pointer;z-index:2;background:0 0;border:none;font-size:13px;line-height:1;position:absolute;top:2px;right:4px}.tl-chord__remove:hover{color:var(--accent)}.tl-handle{cursor:ew-resize;z-index:1;touch-action:none;width:10px;position:absolute;top:0;bottom:0}.tl-handle--left{left:-5px}.tl-handle--right{right:-5px}.tl-handle:after{content:"";background:var(--line);border-radius:1px;width:2px;transition:background .12s;position:absolute;top:14px;bottom:14px;left:50%;transform:translate(-50%)}.tl-handle:hover:after{background:var(--accent)}.control-hint{color:var(--muted);margin:14px 0 0;font-size:13px}.control-hint--warn{color:var(--accent)}.timesig{align-items:center;gap:2px;display:flex}.timesig input,.timesig select{border:1px solid var(--line);width:42px;height:30px;font-family:var(--sans);color:var(--ink);text-align:center;-moz-appearance:textfield;background:0 0;border-radius:8px;font-size:14px}.timesig input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.timesig input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.timesig span{color:var(--muted);font-size:18px}.vl-panel{border-top:1px solid var(--line);flex-direction:column;gap:10px;margin-top:18px;padding-top:18px;display:flex}.chart-add{border:1px dashed var(--line);color:var(--muted);cursor:pointer;background:0 0;border-radius:999px;padding:7px 14px;font-size:14px;transition:color .12s,border-color .12s}.chart-add:hover{color:var(--ink);border-color:var(--muted)}.tempo{align-items:center;gap:8px;display:flex}.tempo__value{color:var(--ink);text-align:center;min-width:64px;font-size:14px}.pill--tiny{width:30px;height:30px;padding:0;font-size:16px;line-height:1}.tl-chord--open{border-left-style:dashed}.context-strip{border:1px solid var(--line);border-radius:12px;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px;padding:9px 14px;display:flex}.context-strip .pill{padding:4px 11px;font-size:12px}.context-label{text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-size:11px}.ctx-narrow{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto;font-size:12px}.ctx-more{color:var(--muted);font-size:12px}.sugg-grid{flex-wrap:wrap;gap:8px;margin-top:18px;display:flex}.sugg-chip{cursor:pointer;text-align:left;border:1px solid #0000;border-radius:10px;flex-direction:column;align-items:flex-start;gap:2px;min-width:86px;padding:8px 12px;transition:border-color .12s;display:flex}.sugg-chip:hover{border-color:var(--ink)}.sugg-chip__name{font-family:var(--serif);color:var(--ink);font-size:18px}.sugg-chip__fn{color:var(--muted);font-size:12px}.heat-0{background:var(--heat-0)}.heat-0 .sugg-chip__name,.heat-0 .sugg-chip__fn{color:#fff}.heat-1{background:var(--heat-1)}.heat-2{background:var(--heat-2)}.heat-3{background:var(--heat-3)}.reveal{flex-direction:column;gap:20px;margin-top:28px;display:flex}.reveal-label{text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:0 0 10px;font-size:12px}.reveal-items{flex-wrap:wrap;gap:8px;display:flex}.key-chip{border:1px solid var(--line);cursor:pointer;text-align:left;background:0 0;border-radius:10px;flex-direction:column;align-items:flex-start;gap:2px;min-width:86px;padding:8px 12px;transition:border-color .12s,background .12s;display:flex}.key-chip:hover{border-color:var(--muted)}.key-chip__roman{font-family:var(--serif);color:var(--ink);font-size:18px}.key-chip__key{color:var(--muted);font-size:12px}.key-chip--on{background:var(--ink);border-color:var(--ink)}.key-chip--on .key-chip__roman{color:#fff}.key-chip--on .key-chip__key{color:#cfcabf}.key-chip--faded{opacity:.32}.key-chip--here{border-color:var(--accent);cursor:default}.key-chip--here .key-chip__roman{color:var(--accent)}.key-detail{border-top:1px solid var(--line);margin-top:26px;padding-top:22px}.key-detail__title{color:var(--muted);margin:0 0 14px}.key-detail__title strong{color:var(--ink);font-weight:600}.footnote{text-align:center;color:var(--muted);margin-top:8vh;font-size:14px}@media (width<=520px){.title{font-size:48px}.title--sm{font-size:34px}}