.lesson-shell { max-width: 1050px; margin: 0 auto; }
.lesson-top { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.lesson-top label { margin: 0; font-size: 0.875rem; }
.lesson-top select, .goal-picker select { color: var(--ink); background: var(--enamel); border: 1px solid var(--line); border-radius: 5px; padding: 0.6rem; max-width: 100%; font: inherit; min-height: 44px; }
.lesson-top h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.025em; }
.lesson-machine { border: 1px solid var(--line); border-radius: 10px; background: var(--enamel); box-shadow: var(--shadow); overflow: hidden; }
.lesson-route { display: flex; gap: 0; padding: 1.2rem 1.5rem; background: var(--paper); border-bottom: 1px solid var(--line); overflow-x: auto; }
.lesson-stop { position: relative; flex: 1; min-width: 100px; border: 0; border-top: 5px solid var(--iron); border-radius: 0; background: transparent; font-size: 0.875rem; padding: 1.1rem 0.3rem 0.2rem; line-height: 1.5; }
.lesson-stop[aria-current='step'] { color: var(--signal); font-weight: 700; border-top-color: var(--brass); }
.lesson-stop[aria-current='step']::before { content: ''; position: absolute; top: -11px; left: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%; background: var(--brass); box-shadow: inset -3px -3px 3px rgb(0 0 0 / 0.25); }
.lesson-face { padding: clamp(1.2rem, 4vw, 2.5rem); }
.lesson-face > h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 1rem; }
.lesson-concept { line-height: 1.75; max-width: 78ch; margin-bottom: 1.5rem; border-left: 3px solid var(--brass); padding-left: 1rem; }
.lesson-question { font-size: 1.2rem; line-height: 1.6; margin: 1rem 0; font-weight: 600; max-width: 75ch; }
.lesson-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0.7rem; margin: 1.1rem 0; }
.lesson-option { display: flex; text-align: left; gap: 0.7rem; align-items: flex-start; line-height: 1.5; padding: 1rem; border: 1px solid var(--line); border-radius: 6px; margin: 0; font-weight: 400; background: var(--paper); }
.lesson-option:has(input:checked), button.lesson-option[aria-pressed='true'] { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); background: color-mix(in srgb, var(--signal) 9%, var(--enamel)); }
.lesson-option input { width: 20px; height: 20px; flex: 0 0 20px; margin: 2px 0 0; accent-color: var(--signal); }
.lesson-option strong { display: block; font-size: 1rem; }.lesson-option small { display: block; color: var(--muted); font-size: 0.875rem; margin-top: 0.3rem; }
.lesson-feedback { padding: 1rem; background: var(--paper); border-left: 4px solid var(--signal); line-height: 1.65; margin: 1rem 0; }
.lesson-fields { display: grid; gap: 1rem; }.lesson-fields label { font-size: 1rem; margin-top: 0; line-height: 1.5; }.lesson-fields textarea { display: block; margin-top: 0.4rem; min-height: 5rem; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); padding: 0.75rem; }
.lesson-help { color: var(--muted); font-size: 0.875rem; line-height: 1.65; margin: 1rem 0; }
.lesson-context { border: 1px solid var(--line); background: var(--paper); padding: 1rem; margin: 1rem 0; border-radius: 5px; }
.lesson-context p { margin: 0.5rem 0; line-height: 1.65; white-space: pre-wrap; }.lesson-context strong { font-size: 0.875rem; display: block; color: var(--muted); }
.lesson-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.7rem; border-top: 1px solid var(--line); padding: 1.2rem 1.5rem; }
.lesson-controls .primary { margin: 0; }.lesson-controls p { font-size: 0.875rem; color: var(--muted); }
.goal-picker { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1rem 0; }.goal-picker label { margin: 0; }
.value-rounds { display: flex; flex-wrap: wrap; gap: 0.7rem; list-style: none; padding: 0; margin: 1rem 0; }.value-rounds li { padding: 0.5rem 0.8rem; border-bottom: 3px solid var(--line); font-size: 1rem; }.value-rounds .round-kept { border-color: var(--signal); }.value-rounds .round-current { border-color: var(--brass); }
.lesson-review { margin: 1.2rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 6px; }.lesson-review p { line-height: 1.7; }.lesson-review summary { line-height: 1.6; }
.lesson-source { margin: 1rem 0; font-size: 0.875rem; color: var(--muted); line-height: 1.65; }
.lesson-index { columns: 2; list-style: none; padding: 0; }.lesson-index li { break-inside: avoid; margin-bottom: 0.3rem; }.lesson-index button { text-align: left; width: 100%; background: transparent; }
.lesson-saved { color: var(--signal); }.lesson-warning { border: 2px solid var(--brass); padding: 1rem; margin: 1rem 0; line-height: 1.6; }
.chapter-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0; }
.chapter-links button { font-size: 0.875rem; }
body[data-track-guided='true'] .origin #goal-edit { display: none; }
.lesson-face { animation: lesson-arrive 220ms ease-out; }
@keyframes lesson-arrive { from { opacity: 0.6; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .lesson-index { columns: 1; }.lesson-controls { padding: 1rem; }.lesson-top select { width: 100%; }.lesson-top label { width: 100%; }.masthead-actions { gap: 0.4rem; }.lesson-route { padding: 1rem; }.lesson-face { padding: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .lesson-face { animation: none; } }