.note,.tune{--n1:#fbfbf6;--n2:#9a4fb8;--n3:#2f63c9;--n4:#f0c81e;--n5:#d0322a;--n6:#5aa83a;--n7:#6cc4ec}.note{white-space:nowrap;margin-right:14px;display:inline-block}.key{vertical-align:-2px;border:1px solid var(--line);width:14px;height:14px;margin-right:6px;display:inline-block}.key.n1{background:var(--n1)}.key.n2{background:var(--n2)}.key.n3{background:var(--n3)}.key.n4{background:var(--n4)}.key.n5{background:var(--n5)}.key.n6{background:var(--n6)}.key.n7{background:var(--n7)}.tune{white-space:nowrap}.tune .key{margin-right:3px}.tune .or,.tune .then{color:var(--muted);margin:0 6px}.tune .or{margin-left:3px}ul.cols{columns:12em;column-gap:24px}table.st td.n{text-align:end}table.gather .pick{white-space:nowrap;margin-right:12px;display:inline-block}table.gather tr.first td,table.gather tr.first th{border-top:2px solid var(--line)}table.gather tbody th{vertical-align:top;text-align:start;white-space:nowrap}table.hz tbody th{text-align:start;white-space:nowrap;font-weight:400}.art{max-width:800px;margin:0 0 12px}.art img{border:1px solid var(--line);width:100%;height:auto;display:block}.art figcaption{color:var(--muted);margin-top:4px;font-size:14px}.art.sm{max-width:480px}.art.xs{max-width:320px}.art.xs img{width:auto;max-width:100%}.arts{flex-wrap:wrap;align-items:flex-start;gap:12px;display:flex}.arts>*{flex:0 380px}.arts .art{margin:0}body.g-mhf2{--map-zoom:2;--pin:16px}@media (width>=600px){body.g-mhf2{--map-zoom:3;--pin:32px}}@media (width>=1000px){body.g-mhf2{--map-zoom:4}}.pinmap,.pinkeys{--camp:#2f63c9;--mon:#d0322a;--g0:#5aa83a;--g1:#8a8378;--g2:#f0c81e}.pinmap{width:calc(160px * var(--map-zoom));max-width:calc(100% + 32px);margin:0 auto 10px;position:relative}.pinmap img{width:100%;height:auto;image-rendering:pixelated;display:block}.pin{left:var(--x);top:var(--y);width:var(--pin);height:var(--pin);cursor:pointer;background:0 0;border:0;padding:0;position:absolute;transform:translate(-50%,-100%)}.pin:before{content:"";width:calc(var(--pin) * 9 / 16);height:calc(var(--pin) * 9 / 16);margin-left:calc(var(--pin) * -5 / 16);background:var(--k);transform-origin:50%;border:1px solid #222;border-radius:50% 50% 50% 0;position:absolute;bottom:2px;left:50%;transform:rotate(-45deg)}.pin:hover,.pin:focus{z-index:2}.pin:focus-visible{outline:2px solid var(--ink)}.pin .pill{border:1px solid var(--line);background:var(--panel);color:var(--ink);text-align:start;border-radius:12px;width:max-content;max-width:11em;padding:2px 8px;font-size:14px;line-height:1.4;display:none;position:absolute;top:4px;left:100%}.pin.flip .pill{left:auto;right:100%}.pin:hover .pill,.pin:focus .pill{display:block}.pin.camp,.mark.camp{--k:var(--camp)}.pin.mon,.mark.mon{--k:var(--mon)}.pin.g0,.mark.g0{--k:var(--g0)}.pin.g1,.mark.g1{--k:var(--g1)}.pin.g2,.mark.g2{--k:var(--g2)}.pinkeys{flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:0 0 8px;padding:0;list-style:none;display:flex}.pinkeys .mark{vertical-align:-1px;background:var(--k);border:1px solid #222;border-radius:50%;width:12px;height:12px;margin-right:6px;display:inline-block}.pinmap{margin-inline-start:max(-16px, calc((100% - 160px * var(--map-zoom)) / 2))}