html{font-size:larger}body{margin-inline:18px;background-color:var(--bg);color:var(--text);font-family:system-ui,sans-serif;line-height:1.5;display:grid;grid-template-columns:1fr min(31em,100%) 5fr}main,footer{grid-column:2/3}footer{font-size:small;margin-block:3rem}footer a{text-underline-offset:5px;color:var(--soft)}footer a:hover{color:var(--text)}header{font-family:serif;font-style:italic;font-size:larger}header h1{margin-block-end:.1em}.muted{color:var(--soft)}div.note,.dot{background-color:var(--soft);opacity:.2}button.note{border:0;cursor:pointer;background-color:var(--soft)}button.note[data-root]{background-color:#bdb76b}button.note[data-playing],button.note:hover{background-color:var(--hard)}.ladder{box-sizing:border-box;min-height:80svh;display:flex;flex-direction:column;align-items:end;gap:4px;justify-content:space-evenly}.ladder .note{width:50%;flex-shrink:0;flex-basis:12px;border-radius:4px;margin-inline-end:calc(8px * (13 - var(--x)))}section+section{margin-block-start:3rem}.fretboard{margin-block-start:32px}.fretboard .string,.fretboard .marks{display:flex;justify-content:center;margin-block:12px;gap:12px}.fretboard .string{flex-direction:row-reverse}.fretboard .note,.fretboard .marks>div{flex-basis:50px;height:12px;border-radius:3px}.fretboard button.note{padding:0}.dot{width:8px;height:8px;margin:auto;border-radius:4px}.intervals{display:flex;flex-wrap:wrap;max-width:320px;justify-content:space-between}button.interval{border:0;padding:0;cursor:pointer;background:transparent;color:var(--soft);font-size:2rem}button.interval[data-playing],button.interval:hover{color:var(--hard)}.piano{padding-inline-start:20px;display:flex;justify-content:center;gap:2px}.piano>.major{border-radius:3px;width:46px;height:190px;margin-inline-start:-16px}.piano>div.major{background-color:#cfcac81a}.piano>.minor{border-radius:3px;width:46px;height:120px;margin-inline-start:-16px;z-index:1;background-color:var(--bg)}.piano>.adj{margin-inline-start:0}.piano>button{border:0;cursor:pointer}.piano>button.major{background-color:var(--soft);opacity:.6}.piano>button.minor{background-color:#262626}@media (prefers-color-scheme: dark){.piano>button.minor{background-color:#1b1b1b}}.piano>button.major:hover,.piano>button.major[data-playing]{opacity:1}.piano>button.minor:hover,.piano>button.minor[data-playing]{background-color:#000}