/* Loaded only on the strategy guide; the lessons use the existing tile palette. */
.practice-lessons{margin:32px 0 44px}
.practice-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;border:1px solid var(--edge);border-radius:var(--radius);background:var(--surface);padding:28px;margin:22px 0;scroll-margin-top:24px}
.practice-card h2{font:600 clamp(25px,3vw,34px)/1.15 var(--display);letter-spacing:-.02em;text-transform:none;margin:0 0 18px}
.lesson-copy,.lesson-demo{min-width:0}
.lesson-copy p,.lesson-copy li{font-size:17px;line-height:1.55;color:var(--ink-soft)}
.lesson-copy strong{color:var(--cream)}
.lesson-copy .guide-kicker{font:500 11px var(--mono);color:var(--gold);margin:0 0 14px}
.lesson-demo{border:1px solid #395a49;background:radial-gradient(ellipse at top,#254635,#10271f 80%);border-radius:12px;padding:24px 18px;align-self:start;text-align:center}
.lesson-meter{font:500 12px var(--mono);letter-spacing:.08em;color:var(--gold);margin-bottom:24px}
.pattern-board.practice-board{margin:0 auto;grid-template-columns:repeat(var(--cols),56px);gap:6px}
.practice-board .pattern-cell{width:56px;height:56px;font-size:25px}
.practice-board button{padding:0;font-family:var(--mono)}
.practice-board button:enabled:hover{border-color:var(--gold)}
.practice-board button.chord-target{border:2px solid var(--gold);color:#d4efc2}
.practice-board .is-flagged{background:#4b3024;border-color:#d9865e;color:#ffb58e}
.practice-board .is-safe{background:#315544;border:2px solid #b3eacc;color:#c7f3d9}
.practice-board .is-mine,.practice-board .is-wrong{background:#572c25;border:2px solid #ffa48b;color:#ffe0d2}
.practice-board .is-reduced{border:2px solid var(--gold);background:#293e29}
.lesson-feedback{min-height:100px;font-size:16px;line-height:1.5;color:var(--cream);margin:22px 0 16px!important}
.lesson-caption{color:var(--ink-soft);font-size:13px;line-height:1.4;min-height:36px;margin:14px 0 0!important}
.lesson-button{border:1px solid #8ea879;border-radius:8px;color:#182613;background:var(--gold);padding:12px 16px;min-height:44px;font-weight:600;line-height:1.3}
.lesson-button:disabled{opacity:.65}
.lesson-controls{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center}
.lesson-controls .text-button{min-height:44px}
.lesson-solution{padding:14px 0;border-top:1px solid var(--edge)}
.lesson-solution summary{cursor:pointer;color:var(--mint);padding:8px 0}
.reduction-steps{padding-left:23px!important;margin:20px 0 0}
.reduction-steps li{padding:6px 8px;margin:0 0 8px;border-left:2px solid transparent}
.reduction-steps li[aria-current="step"]{background:#e5c46a0d;border-color:var(--gold)}
.practice-cta{display:flex;align-items:center;justify-content:center;gap:12px 20px;flex-wrap:wrap;padding:12px 0}
.practice-cta p{margin:0;font-size:17px}.practice-cta>a:last-child{font-size:15px}
.pattern-library-heading{font-size:28px!important;text-transform:none!important;letter-spacing:0!important}
@media(max-width:800px){.practice-card{grid-template-columns:1fr;gap:20px}.lesson-demo{width:100%;max-width:440px;justify-self:center}}
@media(max-width:580px){.practice-card{padding:20px 16px}.lesson-demo{padding:20px 10px}.practice-cta{flex-direction:column;text-align:center}.practice-cta .action-primary{max-width:100%;font-size:15px}}
html:not(.js) .lesson-controls,html:not(.js) [data-chord-reset]{display:none}