first-lesson.css

.first-lesson main{max-width:1320px;margin:auto;padding:0 clamp(20px,4vw,64px)}.first-lesson .welcome{padding:62px 0 25px;max-width:850px}.first-lesson h1{margin:12px 0 24px;font-size:clamp(3rem,6vw,5.7rem)}.first-lesson .lede{font-size:20px;max-width:62ch}.first-lesson .eyebrow{color:var(--gold);font-size:14px;letter-spacing:.04em;margin:0}.first-lesson .lesson-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:45px;align-items:start;padding:25px 0 60px}.first-lesson .lesson-copy{padding-top:24px}.first-lesson h2{margin:0 0 22px}.first-lesson h3{margin:28px 0 12px}.first-lesson h4{font-size:18px;margin:0 0 8px}.first-lesson p{font-size:16px}.first-lesson button{padding:11px 17px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;font-size:16px;min-height:46px}.first-lesson button.primary{background:var(--mint);color:var(--bg);border-color:var(--mint)}.first-lesson .status,.first-lesson .quiet,.first-lesson figcaption{color:var(--muted);font-size:16px}.first-lesson .status{min-height:3.2em;margin:16px 0}.first-lesson .status.error{color:var(--red)}.first-lesson .answer{border-block:1px solid var(--line);padding:20px 0}.first-lesson #answer-value{font-family:'EB Garamond',Georgia,serif;font-size:36px;line-height:1.2;margin:8px 0}.first-lesson #answer-context{margin:8px 0 0;color:var(--muted)}.first-lesson .steps{display:grid;grid-template-columns:1fr 1fr;gap:8px}.first-lesson .steps button{text-align:left}.first-lesson .steps button[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:#29222c}.first-lesson .step-note{padding:18px 20px;margin-top:14px;background:var(--panel);border-left:2px solid var(--gold)}.first-lesson .step-note p{margin:8px 0}.first-lesson #step-value{color:var(--mint)}.first-lesson .creature-view{margin:0;position:sticky;top:24px}.first-lesson canvas{display:block;width:100%;height:auto;aspect-ratio:720/680;background:none}.first-lesson .motion-control{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.first-lesson #body-selection{color:var(--gold);font-size:16px}.first-lesson figcaption{margin-top:16px;line-height:1.65;max-width:58ch}.first-lesson details{margin-top:20px}.first-lesson summary{cursor:pointer;color:var(--mint);font-size:16px}.first-lesson .number-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.first-lesson label{font-size:16px}.first-lesson input{display:block;width:100%;margin-top:8px;padding:10px;min-height:46px;background:var(--panel);border:1px solid var(--line);color:var(--ink)}.first-lesson input[aria-invalid=true]{border-color:var(--red)}.first-lesson .next{border-top:1px solid var(--line);padding:42px 0 30px;max-width:850px}.first-lesson .next-links{display:flex;gap:18px 28px;flex-wrap:wrap;margin:24px 0}.first-lesson .next-links a{font-size:16px}.first-lesson .site-footer p{font-size:16px}.first-lesson [hidden]{display:none!important}.first-lesson .skip{position:absolute;left:20px;top:-100px;z-index:10;background:var(--bg);padding:12px}.first-lesson .skip:focus{top:10px}@media(max-width:850px){.first-lesson .welcome{padding-top:36px}.first-lesson .lesson-grid{grid-template-columns:1fr;gap:25px}.first-lesson .creature-view{position:static;grid-row:1}.first-lesson canvas{max-height:440px;object-fit:contain}.first-lesson .lesson-copy{padding-top:0}}@media(prefers-reduced-motion:reduce){.first-lesson *{scroll-behavior:auto;transition:none}}

.first-lesson :is(button,label,summary){font-size:16px!important}

.first-lesson .step-preview{display:none}@media(max-width:850px){.first-lesson .step-preview{display:block;aspect-ratio:720/480;max-height:240px;margin-top:12px}}

/* Introduce the object and its purpose before asking readers to use controls. */
.first-lesson .welcome{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:none;gap:40px;align-items:center;padding:40px 0 42px}
.first-lesson .welcome .creature-view{position:static;min-width:0}.first-lesson .welcome .lede{font-size:20px;line-height:1.65}.first-lesson .introduction-action{display:inline-block;margin-top:12px;font-size:16px}
.first-lesson .introduction-story{border-block:1px solid var(--line);padding:36px 0}.first-lesson .introduction-story>p{max-width:80ch}.first-lesson .meaning-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1050px}.first-lesson .meaning-columns h3{margin-top:18px}.first-lesson .lesson-grid{display:block;max-width:900px;margin:auto;padding:42px 0}.first-lesson .lesson-copy{padding-top:0}.first-lesson .step-preview{display:block;max-height:330px;aspect-ratio:720/480}.first-lesson .copy-demonstration{border-top:1px solid var(--line);margin-top:32px;padding-top:10px}.first-lesson #copy-result{color:var(--mint)}
@media(max-width:850px){.first-lesson .welcome{grid-template-columns:1fr;gap:16px;padding:30px 0}.first-lesson .welcome .creature-view{grid-row:auto}.first-lesson .welcome canvas{max-height:320px}.first-lesson .meaning-columns{grid-template-columns:1fr;gap:0}.first-lesson .step-preview{max-height:240px}.first-lesson .introduction-story{padding:28px 0}}

.first-lesson .route-example{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;padding:40px 0}.first-lesson .route-example h2{font-size:clamp(2rem,3.5vw,3rem)}.first-lesson .route-example button{margin:8px 8px 8px 0}.first-lesson .route-result{color:var(--mint);font-size:20px;min-height:3em}.first-lesson .route-map{margin:20px 0;align-self:start;position:sticky;top:30px}.first-lesson .route-map svg{width:100%;height:auto;display:block}.first-lesson .route-map path{stroke:#695d71}.first-lesson .route-map path.used{stroke:var(--mint);stroke-width:5}.first-lesson .route-map path.closed{stroke:#cda48a;stroke-dasharray:6 8}.first-lesson .route-map circle{fill:var(--ink)}.first-lesson .route-map text{fill:var(--ink);font:17px system-ui}.first-lesson .route-map .closed text{fill:#e7b295}.first-lesson .route-map .closed circle{fill:#e7b295}.first-lesson #intro-copy-result{color:var(--mint)}.first-lesson #intro-reproduced-source{max-height:250px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 monospace}.first-lesson .water-lesson{border-block:1px solid var(--line);padding:24px 0;margin-bottom:35px}.first-lesson .water-lesson>.creature-view{position:static;max-width:460px;margin:20px auto}.first-lesson .introduction-story h2{font-size:clamp(2rem,3.5vw,3rem)}
@media(max-width:850px){.first-lesson .route-example{grid-template-columns:1fr;gap:8px}.first-lesson .route-map{position:static;grid-row:1}.first-lesson .welcome .lede{font-size:19px}}