.lesson{max-width:1000px}.lesson h1{text-wrap:balance}.lesson .lede{max-width:780px}.lesson-byline{font-size:13px!important;color:#9caaa8!important;border-bottom:1px solid #303938;padding-bottom:24px}.lesson-toc{display:flex;flex-wrap:wrap;gap:10px 22px;margin:25px 0 50px;padding:0;text-align:left}.lesson-toc a{font-size:14px;color:#abcac4}.lesson>section{scroll-margin-top:100px}.lesson>section>h2{display:flex;gap:16px;align-items:baseline;font-size:27px;line-height:1.4}.step-number{font:13px ui-monospace,monospace;color:#829d98}.lesson-figure{margin:36px 0 64px;padding:32px;border:1px solid #34423f;border-radius:24px;background:radial-gradient(ellipse at 100% 0,rgba(52,101,95,.16),transparent 65%),#151a1b}.lesson-figure figcaption{text-align:left;margin:0 0 28px;color:inherit;display:block}.lesson-figure figcaption>span{font:12px ui-monospace,monospace;letter-spacing:2px;color:#9bbbb4}.lesson-figure h2{font-size:30px;line-height:1.3;margin:12px 0}.lesson-figure h3{font-size:18px;margin:28px 0 16px}.lesson-figure p{font-size:15px;line-height:1.85}.notation-compare{width:100%;border-collapse:collapse;table-layout:fixed;margin:24px 0}.notation-compare th{font-size:13px;font-weight:500;text-align:left;color:#b5c7c3;width:22%;padding:20px 0}.notation-compare td{text-align:center;font:32px/1.8 Arial,sans-serif;border-left:1px solid #33403c;padding:10px 0}.notation-compare tr{border-bottom:1px solid #33403c}.notation-compare .beat-label td{font:13px ui-monospace,monospace;color:#90a8a1}.degree-row td{color:#dac1ee;background:#2a2432}.pitch-row td{color:#aff0dd;background:#1b302c}.lesson-note{border-left:2px solid #aa83bd;padding:12px 18px;background:#201e26}.lesson-audio{margin:20px 0}.lesson-audio p{margin:0 0 8px;font-size:13px;color:#cee0da}.lesson-player{width:100%;height:42px;display:block;color-scheme:dark}.audio-note{color:#96aaa3!important;font-size:12px!important}.beat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.beat-cell{background:#20342e;border:1px solid #3c5b50;border-radius:12px;padding:16px 6px;text-align:center;display:flex;flex-direction:column;gap:16px}.beat-cell small,.beat-cell span{font-size:12px;color:#a6c0b6}.beat-cell strong{font-size:27px;font-weight:500;color:#cff3e5}.beat-cell.rest-cell{background:#2b2435;border-color:#705b7d}.rest-cell strong{color:#dfc9ee;font-size:22px}.ocr-stage{border:1px solid #34433d;background:#1b2521;border-radius:16px;padding:20px;margin:14px 0}.ocr-stage h3{margin:0 0 20px!important;font-size:15px}.ocr-notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center;font:38px/2 Arial,sans-serif}.ocr-notes span{border-right:1px solid #394b43}.ocr-notes span:last-child{border-right:0}.ocr-stage.incorrect{background:#302526;border-color:#775951}.incorrect .changed{color:#ffbbae;background:#493030;border-radius:9px}.ocr-stage:not(.incorrect) .changed{color:#b3ead2}.beat-total{margin-top:14px;color:#c0cec9;font:14px ui-monospace,monospace}.source-marker{font-size:12px;vertical-align:super;color:#a4d9c6}.lesson-check{border:1px solid #4d625a;border-radius:18px;padding:25px;margin:45px 0}.lesson-check h2{margin-top:0}.lesson-check summary{cursor:pointer;line-height:1.7;color:#c6e8dc;padding:8px 0}.lesson-check details p{margin-bottom:0}.lesson-sources{border-top:1px solid #3a4540;padding-top:35px;margin-top:55px}.lesson-sources ol{padding-left:23px}.lesson-sources li{margin:24px 0;padding-left:6px;scroll-margin-top:100px}.lesson-sources a{color:#c2e5d7;text-decoration:underline;text-underline-offset:4px;font-size:15px}.lesson-sources li>span{display:block;margin-top:5px;color:#93a69e;font-size:12px}.lesson-sources p{font-size:13px;line-height:1.85}.lesson-sources li p{margin:7px 0}.lesson-screen{display:flex;gap:32px;align-items:center;margin:35px 0 55px;padding:28px;background:#191b22;border-radius:20px}.lesson-screen img{width:180px;height:auto;flex:none;border-radius:20px}.lesson-screen figcaption{display:block;text-align:left}.lesson-screen p{font-size:14px;line-height:1.8}.lesson-screen a{font-size:14px;color:#badccd}.lesson-next{margin:40px 0}.lesson-next a{display:block;color:#badccd;margin:16px 0}.lesson :focus-visible{outline:2px solid #d5f7e9;outline-offset:5px}
@media(max-width:600px){.lesson-figure{padding:18px 14px;border-radius:16px}.lesson-figure h2{font-size:25px}.lesson>section>h2{font-size:23px;gap:10px}.notation-compare th{font-size:12px;width:25%;overflow-wrap:anywhere}.notation-compare td{font-size:25px}.beat-grid{gap:5px}.beat-cell{padding:14px 3px}.beat-cell strong{font-size:22px}.beat-cell small,.beat-cell span{font-size:10px}.rest-cell strong{font-size:18px}.lesson-screen{gap:20px;padding:20px;flex-direction:column;align-items:flex-start}.lesson-screen img{width:150px;align-self:center}.lesson-check{padding:18px}.lesson-byline{line-height:1.7}.ocr-stage{padding:15px}.ocr-notes{font-size:32px}.lesson-toc{display:grid;gap:12px}.lesson-player{min-width:0}}

.octave{display:inline-block;position:relative;line-height:1.5}.octave>span{position:absolute!important;left:50%;transform:translateX(-50%);font:14px/1 Arial,sans-serif;border:0!important}.octave.low>span{bottom:-4px}.octave.high>span{top:-4px}.ocr-notes>span{display:flex;justify-content:center;align-items:center;min-height:76px}