.lesson-screen{font-family:Georgia,serif;color:#4e3523}.lesson-kicker,.lesson-eyebrow{font:700 11px Georgia,serif;letter-spacing:2px;color:#997346;margin-top:24px}.lesson-header{display:flex;justify-content:space-between;gap:18px;align-items:center}.lesson-header h1{font-size:clamp(30px,5vw,42px);margin:12px 0}.lesson-header p{font-size:15px;color:#81684d}.lesson-count{white-space:nowrap;font:700 11px Georgia,serif;color:#997346}.lesson-progress{height:9px;background:#d8c4a3;border-radius:20px;overflow:hidden;margin:22px 0}.lesson-progress>div{height:100%;background:#a47b43;transition:width .3s}.lesson-card{background:#f1e4ca;border:1px solid #c8ae83;border-radius:8px;padding:clamp(20px,4vw,32px);min-height:300px}.lesson-card h2{font:700 clamp(24px,4vw,32px) Georgia,serif;margin:16px 0}.lesson-card p{font:16px/1.65 Georgia,serif;color:#76593d}.lesson-note-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin:25px 0}.lesson-note-row span,.lesson-note-row button{display:grid;place-items:center;min-height:55px;border:1px solid #c4a67a;border-radius:5px;background:#e4cda5;color:#5e402a;font:700 23px Georgia,serif}.lesson-tappable button{cursor:pointer}.lesson-tappable button:hover{background:#f8edda}.lesson-explore-result{min-height:52px;color:#644529;font-size:17px}.lesson-answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:25px 0}.lesson-answers button{padding:17px 8px;background:#e8d2aa;border:1px solid #b99a70;border-radius:5px;font:700 20px Georgia,serif;color:#573c26;cursor:pointer}.lesson-answers button.right{background:#d5e6c9;border-color:#6e9360}.lesson-answers button.wrong{background:#eed0c4;border-color:#ad7665}.lesson-feedback{min-height:48px;color:#6e5337;line-height:1.5}.lesson-footer{display:flex;justify-content:space-between;gap:10px;margin-top:20px}.lesson-save-note{font:12px Georgia,serif;color:#876e51}.lesson-finish{text-align:center}.lesson-finish-icon{font-size:62px;color:#b58c4e}.lesson-disclaimer{font-size:13px!important}.lesson-finish button{margin-top:10px}@media(max-width:540px){.lesson-header{display:block}.lesson-note-row{gap:3px}.lesson-note-row span,.lesson-note-row button{min-height:42px;font-size:17px}.lesson-answers{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.lesson-progress>div{transition:none}}
.lesson-chromatic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:24px 0}.lesson-chromatic-grid button{min-height:58px;padding:8px 4px;border:1px solid #b99a70;border-radius:5px;background:#e6cfa7;color:#573c26;font:700 15px Georgia,serif;cursor:pointer;touch-action:manipulation}.lesson-chromatic-grid button:hover,.lesson-chromatic-grid button:focus-visible{background:#f9eacf;outline:2px solid #946a40;outline-offset:1px}.lesson-finish #lessonGoNext{margin:10px 0 0 10px}@media(max-width:520px){.lesson-chromatic-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.lesson-chromatic-grid button{font-size:13px;min-height:52px}}

.lesson-chromatic-grid button.is-playing{background:#765238;color:#fff4df;border-color:#5e402b;box-shadow:inset 0 0 0 2px #d7b986}.lesson-chromatic-grid button:active{transform:scale(.97)}