.percent-lesson { max-width: 820px; margin: 2rem auto; padding: clamp(1.2rem,4vw,3rem); background: var(--surface, #fffdf8); color: var(--ink, #211c40); border-radius: 24px; line-height: 1.7; }
.percent-lesson h1 { font-size: clamp(2rem,5vw,3rem); line-height: 1.15; }
.percent-lesson h2 { margin-top: 2rem; line-height: 1.3; }
.percent-examples { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.percent-examples figure { margin: 0; padding: 1rem; border: 1px solid #bab4d3; border-radius: 18px; background: #fff; color: #211c40; }
.percent-examples h3 { margin: 0 0 1rem; font-size: 1.15rem; }
.percent-examples svg { display: block; width: 100%; max-width: 250px; margin: auto; }
.percent-examples figcaption { font-size: .9rem; margin-top: .8rem; }
.percent-lesson .primary-button { display: inline-block; margin-top: 1rem; text-decoration: none; }
@media(max-width: 520px) { .percent-examples { grid-template-columns: 1fr; } .percent-lesson { margin: .75rem; } }

.lesson-nav { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.7rem 1.2rem; }
.lesson-wide-figure { margin:1rem 0; padding:1rem; background:#fff; color:#211c40; border:1px solid #bab4d3; border-radius:18px; }
.lesson-wide-figure svg { display:block; width:100%; max-width:420px; margin:auto; }
.lesson-wide-figure figcaption { font-size:.95rem; margin-top:.8rem; }
.percent-examples .lesson-parts { max-width:100%; }
.lesson-fraction-key { padding:1rem; border:1px solid #bab4d3; border-radius:18px; background:#f6f3ff; }
.lesson-fraction-key > span { display:flex; align-items:center; gap:1rem; }
.lesson-fraction-key b { font-size:2rem; min-width:2rem; text-align:center; }
.lesson-fraction-key hr { width:2rem; margin:.2rem 0; border:0; border-top:2px solid #29214f; }
.lesson-place-value { width:100%; border-collapse:collapse; text-align:center; margin:1rem 0; font-size:clamp(.8rem,2.8vw,1.1rem); }
.lesson-place-value caption { text-align:start; font-weight:700; margin-bottom:.5rem; }
.lesson-place-value th, .lesson-place-value td { border:1px solid #bab4d3; padding:.6rem .25rem; }
.lesson-place-value th { background:#f6f3ff; color:#211c40; }
.lesson-wholes { display:flex; align-items:center; gap:.5rem; }
.lesson-wholes svg { width:calc((100% - 1rem)/3); }
.lesson-check { margin:1.5rem 0; padding:1rem; border:1px solid #bab4d3; border-radius:14px; }
.lesson-check summary { cursor:pointer; font-weight:700; }