.tiles{gap:var(--space-3);grid-template-columns:repeat(12,minmax(0,1fr));list-style:none;display:grid}.tile{min-width:0;padding:var(--space-4);background:var(--surface);border-radius:18px;flex-direction:column;grid-column:span 12;gap:12px;display:flex}.tile h3{font-family:var(--font-display);font-size:1.3rem;font-weight:400}.tile p{color:var(--text-soft)}.tile-text{flex-direction:column;gap:8px;min-width:0;display:flex}.tile-note,.tile-figure figcaption{color:var(--text-faint);font-size:.82rem}.tile-figure{flex-direction:column;gap:6px;display:flex}.crop{--x:var(--dx);--y:var(--dy);--w:var(--dw);--h:var(--dh);--W:var(--dW);width:100%;max-width:calc(var(--w) * 1px);aspect-ratio:var(--w) / var(--h);background:var(--surface-inset);border-radius:12px;margin-inline:auto;position:relative}.crop picture{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.crop img{max-width:none;width:calc(var(--W) / var(--w) * 100%);height:auto;left:calc(var(--x) / var(--w) * -100%);top:calc(var(--y) / var(--h) * -100%);position:absolute}@media (max-width:759.98px){.crop{--x:var(--mx);--y:var(--my);--w:var(--mw);--h:var(--mh);--W:var(--mW);max-width:none}}.crop-whole{border-radius:inherit;cursor:zoom-in;text-decoration:none;position:absolute;inset:0}.crop-whole-light{display:none}@media (max-width:759.98px){.crop-whole.crop-whole-wide{display:none}}@media not all and (max-width:759.98px){.crop-whole.crop-whole-narrow{display:none}}:where(:root[data-theme=light]) .crop-whole-dark{display:none}:where(:root[data-theme=light]) .crop-whole-light{display:block}@media (prefers-color-scheme:light){:where(:root:not([data-theme=dark])) .crop-whole-dark{display:none}:where(:root:not([data-theme=dark])) .crop-whole-light{display:block}}.crop-whole>span{border:1px solid var(--rule);background:var(--bg);color:var(--text);white-space:nowrap;opacity:0;border-radius:7px;padding:3px 10px;font-size:.8rem;font-weight:600;line-height:1.4;transition:opacity .15s;position:absolute;top:10px;right:10px}@media (max-width:759.98px){.crop-whole>span{top:-13px}}.crop-whole:focus-visible>span{opacity:1}@media (hover:hover){.crop-whole:hover>span{opacity:1}}.whole{--bar:56px;width:100%;max-width:none;height:100%;max-height:none;padding:var(--space-3);background:var(--bg);color:var(--text);overscroll-behavior:contain;border:0;margin:0;inset:0;overflow:hidden}.whole[open]{place-items:center;display:grid;container-type:size}.whole::backdrop{background:0 0}@media (min-width:760px){.whole{padding:var(--space-4)}}:root:has(.whole[open]){padding-inline-end:var(--scrollbar,0px);overflow:hidden}.whole-frame{width:min(100cqw, (100cqh - var(--bar)) * var(--W) / var(--H));max-width:calc(var(--W) * 2px)}.whole-bar{justify-content:space-between;align-items:center;gap:var(--space-3);height:var(--bar);padding-bottom:var(--space-2);display:flex}.whole-bar h2{font-size:1.3rem}.whole-close{min-height:40px;padding:0 var(--space-3);border:1px solid var(--rule);background:var(--surface-inset);color:var(--text);font:inherit;cursor:pointer;border-radius:9px;flex:none;font-size:.92rem;font-weight:600}.whole-close:hover{border-color:var(--text-faint)}.whole-shot{aspect-ratio:var(--W) / var(--H);background:var(--surface-inset) 0 0 / 100% 100% no-repeat;transform-origin:0 0;border-radius:12px;position:relative;overflow:hidden}.whole-shot img{width:100%;height:100%}.whole-shot:after{content:"";border-radius:inherit;box-shadow:inset 0 0 0 1px var(--rule);pointer-events:none;position:absolute;inset:0}.whole-mark{left:calc(var(--x) / var(--W) * 100%);top:calc(var(--y) / var(--H) * 100%);width:calc(var(--w) / var(--W) * 100%);height:calc(var(--h) / var(--H) * 100%);box-shadow:0 0 0 1px var(--bg), inset 0 0 0 2px var(--brass), inset 0 0 0 3px var(--bg);border-radius:10px;position:absolute}@media (forced-colors:active){.whole-mark{outline-offset:-2px;outline:2px solid highlight}}.steps{margin-top:var(--space-2)}@media (min-width:760px){.steps>.tile:not(:first-child){grid-column:span 6}.steps>.tile:not(:first-child)>.crop{max-width:none;margin-inline:0}}@media (min-width:860px){.steps>.tile:first-child{align-items:center;gap:var(--space-5);flex-direction:row}.steps>.tile:first-child>.crop{flex:0 0 62%}}.also{margin-top:var(--space-4)}.also h3{font-family:var(--font-display);margin-bottom:var(--space-2);font-size:1.15rem;font-weight:400}.also ul{column-gap:var(--space-5);list-style:none}@media (min-width:620px){.also ul{columns:2}}@media (min-width:880px){.also ul{columns:3}}.also li{break-inside:avoid;color:var(--text-soft);padding:4px 0 4px 16px;font-size:.94rem;position:relative}.also li:before{content:"";background:var(--brass);border-radius:50%;width:6px;height:6px;position:absolute;top:.85em;left:0}.index-tiles .tile,.chart-tiles .tile{grid-column:span 12}@media (min-width:620px){.index-tiles .tile,.chart-tiles .tile{grid-column:span 6}}@media (min-width:1000px){.index-tiles .tile,.chart-tiles .tile{grid-column:span 4}}.index-tiles h2{font-size:clamp(1.5rem,1.3rem + .6vw,1.9rem)}.mini-keys{gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(54px,1fr));list-style:none;display:grid}.mini-keys p{margin-top:4px;font-size:.85rem}.mini-keys b{color:var(--text)}.mini-keys span{color:var(--brass)}.index-tiles.progression-tiles .tile{grid-column:span 12}.progression-tiles .mini-keys{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr))}@media (min-width:940px){.progression-tiles .mini-keys{gap:var(--space-3);grid-template-columns:repeat(5,minmax(0,1fr))}.progression-tiles .mini-keys p{font-size:.95rem}}.progression-tiles .keys-diagram{aspect-ratio:338/98}.chord-top{margin-bottom:var(--space-4)}.chord-top .chord-figure{justify-content:center;max-width:none;margin-bottom:0}.chord-side{justify-content:center;gap:var(--space-4)}.chord-side .chord-facts{margin-bottom:0}.chord-side .action{align-self:flex-start}.chord-side .chord-note{margin-top:calc(-1 * var(--space-2))}@media (min-width:940px){.chord-top>.chord-figure{grid-column:span 8}.chord-top>.chord-side{grid-column:span 4}}.inversions.tiles>.tile{grid-column:span 12}@media (min-width:940px){.inversions.tiles>.tile{grid-column:span 6}}@media (min-width:1100px){.inversions.tiles[data-count="3"]>.tile{grid-column:span 4}}.related{column-gap:var(--space-5);display:grid}@media (min-width:760px){.related{grid-template-columns:repeat(2,minmax(0,1fr))}}.progression-keys.tile-row{gap:var(--space-3)}.tile-row>li{padding:var(--space-3) var(--space-3) var(--space-4);background:var(--surface);border-radius:18px}.page-head+.chart-sheet>.chord-section:first-child{margin-top:0}.chart-tiles .tile{position:relative}.chart-tiles h3 a:after{content:"";position:absolute;inset:0}.chart-tiles .keys-diagram{overflow:visible}.chart-source,.action.chart-print{display:none}@media screen and (scripting:enabled){.action.chart-print{margin-top:var(--space-4);display:inline-flex}}@media print{.chart .sheet{padding-inline:1mm}.chart .page-head{margin-bottom:4mm}.chart h1{font-size:20pt}.chart-intro{display:none}.chart-sheet+.chart-sheet{break-before:page}.chart .chord-section{margin:5mm 0 3mm;padding-bottom:1mm;font-size:13pt}.chart-sheet>.chord-section:first-child{margin-top:0}.chart-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:3mm 8mm}.chart-sheet+.chart-sheet .chart-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:3mm 6mm}.chart-tiles .tile{break-inside:avoid;grid-column:auto;gap:1mm;padding:0}.chart-tiles h3{font-size:12pt;line-height:1.15}.chart-tiles a{color:inherit;text-decoration:none}.chart-tiles .kd-white text{font-size:13px}.chart-tiles .kd-black text{font-size:10px}.chart-source{color:var(--text-faint);margin-top:4mm;font-size:8pt;display:block}.learn-tiles.tiles>.tile{grid-column:span 4;padding:0}.learn-tiles.tiles[data-count="2"]>.tile{grid-column:span 6}.learn-tiles .kd-white text{font-size:13px}.learn-tiles .kd-black text{font-size:10px}}