.lesson-meter{color:var(--muted);font-size:14px;margin:10px 0}.lesson-list{display:grid;gap:12px;max-width:780px}.lesson-card{display:flex;align-items:center;gap:18px;border:1px solid var(--line);background:var(--surface,#fff);border-radius:12px;padding:20px;text-decoration:none;color:var(--ink);min-height:76px}.lesson-card strong{flex:1}.lesson-card>span:last-child{font-size:14px;white-space:nowrap;color:var(--muted)}.lesson-number{color:var(--brand);font-size:22px}.lesson-browse{margin-top:18px}.lesson-celebration{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;min-height:55vh;justify-content:center}.lesson-score{font-size:24px;margin:0}.lesson-continue{min-width:240px;justify-content:space-between;gap:24px}.completion-art{height:220px;width:240px;position:relative;color:var(--brand);display:grid;place-items:center}.completion-art i{font-style:normal;font-size:58px;animation:lesson-tick .55s ease-out both}.completion-art span{position:absolute;left:calc(50% - 22px);top:calc(50% - 22px);height:44px;min-width:44px;display:grid;place-items:center;font:25px Georgia,serif;transform:rotate(var(--turn)) translateY(-90px) rotate(calc(-1 * var(--turn)));animation:lesson-orbit 1.1s calc(var(--i) * .055s) ease-out both}.motif-1 span{border:1px solid var(--line);border-radius:8px}.motif-2 span{font-style:italic}.motif-3 span{border-bottom:2px solid var(--brand)}.motif-4 span{border:1px solid var(--line);border-radius:50%}@keyframes lesson-tick{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes lesson-orbit{from{opacity:0;transform:rotate(var(--turn)) translateY(-20px) rotate(calc(-1 * var(--turn)))}to{opacity:1;transform:rotate(var(--turn)) translateY(-90px) rotate(calc(-1 * var(--turn)))}}@media(prefers-reduced-motion:reduce){.completion-art span,.completion-art i{animation:none}}@media(max-width:500px){.lesson-card{gap:12px;padding:16px}.lesson-card strong{font-size:16px}.lesson-card>span:last-child{font-size:12px}.lesson-continue{width:100%}}
.exercise-context{display:grid;gap:7px;margin:0 0 24px;line-height:1.55}.exercise-context p{margin:0}.exercise-context .context-label{font-size:14px;color:var(--muted);margin-top:10px}.exercise-prompt{overflow-wrap:anywhere}.exercise-actions{display:flex;align-items:stretch;gap:10px;flex-wrap:nowrap}.exercise-actions>#after-answer{margin:0;display:contents}.exercise-actions #next-exercise{display:flex;align-items:center;justify-content:center;white-space:nowrap}.exercise-actions>#after-answer[hidden]{display:none!important}.answer-symbol{display:inline-block;font-weight:700;font-size:22px;margin-right:9px;color:#a12652}.feedback.correct .answer-symbol{color:#5c5b32}.exercise-card #return-skill{display:none}@media(max-width:500px){.exercise-actions>.button,.exercise-actions #next-exercise{font-size:15px;padding:12px 13px;min-height:48px;flex:1}.exercise-actions>.button span{display:none}.exercise-prompt{font-size:23px;line-height:1.5}.symbol-key{font-size:16px;line-height:1.65}}
.motion-grid span{animation-name:lesson-flip}.motion-assemble span{animation-name:lesson-assemble}.motion-write span{animation-name:lesson-write}.motion-expand span{animation-name:lesson-expand}.motion-worlds span{animation-name:lesson-worlds}
@keyframes lesson-flip{from{opacity:0;transform:rotate(var(--turn)) translateY(-90px) rotate(calc(-1 * var(--turn))) rotateY(90deg)}to{opacity:1;transform:rotate(var(--turn)) translateY(-90px) rotate(calc(-1 * var(--turn))) rotateY(0deg)}}
@keyframes lesson-assemble{from{opacity:0;transform:rotate(var(--turn)) translateY(-145px) rotate(calc(-1 * var(--turn)))}to{opacity:1;transform:rotate(var(--turn)) translateY(-90px) rotate(calc(-1 * var(--turn)))}}
@keyframes lesson-write{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes lesson-expand{from{opacity:0;scale:.15}60%{opacity:1;scale:1.12}to{opacity:1;scale:1}}
@keyframes lesson-worlds{from{opacity:0;transform:rotate(calc(var(--turn) - 70deg)) translateY(-90px) rotate(calc(70deg - var(--turn)))}to{opacity:1;transform:rotate(var(--turn)) translateY(-90px) rotate(calc(-1 * var(--turn)))}}
@media(prefers-reduced-motion:reduce){.completion-art span,.completion-art i{animation:none}}

body[data-page="practice"] .exercise-heading{margin:0 0 20px}.exercise-actions .lesson-meter{margin:0 0 0 auto;align-self:center;flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}

/* State is visible through words and a checkmark as well as colour. */
.lesson-card{display:grid;grid-template-columns:30px minmax(0,1fr) auto 16px;background:var(--white);border-inline-start:4px solid var(--line);gap:18px}
.lesson-card strong{min-width:0;overflow-wrap:anywhere}
.lesson-card--complete{background:var(--surface);border-color:#d9b5c4;border-inline-start-color:#b57791}
.lesson-card--started{border-inline-start-color:var(--brand)}
.lesson-number{font-variant-numeric:tabular-nums;text-align:center}
.lesson-card--complete .lesson-number{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand);color:white;font-size:16px}
.lesson-progress{display:flex;flex-direction:column;align-items:flex-end;gap:5px;white-space:nowrap;font-size:13px}
.lesson-status{display:inline-flex;align-items:center;gap:5px;line-height:1.4;color:var(--muted)}
.lesson-card--complete .lesson-status{font-weight:600;color:var(--brand)}
.lesson-card--started .lesson-status{padding:2px 9px;border-radius:20px;background:var(--mint);color:var(--brand);font-weight:600}
.lesson-count{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.lesson-card:hover{border-color:var(--brand)}
@media(max-width:500px){
  .lesson-card{grid-template-columns:28px minmax(0,1fr) 16px;gap:8px 12px;padding:16px 14px}
  .lesson-number{grid-column:1;grid-row:1 / span 2}
  .lesson-card strong{grid-column:2;grid-row:1}
  .lesson-progress{grid-column:2;grid-row:2;flex-direction:row;align-items:center;gap:12px;font-size:12px}
  .lesson-card>.lesson-arrow{grid-column:3;grid-row:1 / span 2;font-size:16px}
  .lesson-card--complete .lesson-number{width:28px;height:28px}
  .lesson-count{font-size:12px}
}

.course-navigation{display:flex;gap:6px;margin:16px 0 20px;border-bottom:1px solid var(--line);max-width:780px}
.course-navigation a{padding:12px 20px;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;min-height:44px}
.course-navigation a[aria-current="page"]{border-color:var(--brand);color:var(--brand);font-weight:700}
#practice-options{margin:22px 0}#course-intro{max-width:680px;line-height:1.5}
.saved-practice{display:grid;gap:12px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.test-preparation{padding:0;list-style:none;max-height:35vh;overflow:auto;margin:12px 0 18px}
.test-preparation li{display:flex;gap:16px;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.test-preparation a{color:var(--brand);line-height:1.5}.test-preparation span{font-size:12px;color:var(--muted);white-space:nowrap}
.test-preparation li.complete a{color:var(--muted)}#test-preparation-details summary{cursor:pointer;padding:12px 0}
.module-practice-link{display:inline-flex;margin-top:18px;min-height:36px;align-items:center}
.module-test.locked{cursor:pointer}
@media(max-width:500px){.test-preparation li{gap:10px}.course-navigation a{flex:1;text-align:center}#practice-options{flex-direction:column;align-items:stretch}}
#practice-search{display:block;width:min(100%,780px);margin:0 0 18px;min-height:44px}#practice-search[hidden]{display:none}
.course-test-notice{max-width:780px;margin:22px 0;padding:22px;border:1px solid var(--line);border-inline-start:4px solid var(--brand);border-radius:12px;background:var(--surface)}
.course-test-notice[hidden]{display:none}.course-test-notice h2{font-size:24px;line-height:1.3;margin:0 0 10px}.course-test-notice p{line-height:1.5;margin:0 0 16px}