.guides-page { padding-top: 42px; padding-bottom: 46px; }
.guides-hero { max-width: 850px; padding: 10px 0 38px; }
.guides-hero h1 { margin-top: 14px; }
.guides-lede { color: #e0e6e2; font-size: clamp(23px, 2.5vw, 30px); line-height: 1.4; letter-spacing: -.025em; margin-bottom: 20px; }
.guides-summary { max-width: 640px; font-size: 16px; line-height: 1.8; }
.guides-page section { margin-top: 0; padding-top: 32px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { margin: 0; font-size: 13px; max-width: 360px; }
.entry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.entry-card { border: 1px solid #35423d; border-radius: 8px; background: #171e1d; padding: 24px; text-decoration: none; display: flex; flex-direction: column; }
.entry-card h3 { color: #e4e9e3; font-size: 20px; line-height: 1.35; margin: 0 0 16px; letter-spacing: -.025em; }
.entry-card p { font-size: 14px; line-height: 1.7; flex: 1; margin-bottom: 24px; }
.entry-card > span { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: #c4dfa0; }
.entry-card:hover { background: #1b2520; border-color: #839a6d; }
.guides-page .guide-paths { margin-top: 52px; }
.path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.path-card { border-bottom: 1px solid #2b363a; display: grid; grid-template-columns: 32px 1fr 20px; gap: 15px; padding: 25px 4px; text-decoration: none; }
.path-number { color: #9ab77c; font: 12px/1.8 ui-monospace, monospace; padding-top: 2px; }
.path-level { color: #8f9b9d; font-size: 11px; }
.path-card h3 { margin: 6px 0 8px; font-size: 22px; color: #e4e9e3; letter-spacing: -.03em; }
.path-card p { font-size: 14px; margin-bottom: 12px; }
.path-status { color: #8c999e; font-size: 11px; }
.path-arrow { align-self: center; color: #a0b68c; }
.path-card:hover h3 { color: #c4dfa0; }
.guides-page .guide-featured { margin-top: 50px; border: 1px solid #35423d; border-radius: 8px; background: #151c1b; padding: 32px; display: grid; grid-template-columns: 1fr 220px; align-items: center; gap: 40px; }
.guide-featured h2 { font-size: 32px; margin-bottom: 14px; }
.guide-featured p { max-width: 550px; }
.feature-motif { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.feature-motif i { aspect-ratio: 1; background: #9bb980; border-radius: 1px; }
.feature-motif .air-cell { background: #29352f; }
.feature-motif .well-cell { background: #151c1b; border: 1px dashed #59684b; }
.guide-utilities { display: flex; justify-content: space-between; gap: 24px; margin-top: 32px; font-size: 13px; }
.guide-utilities p { margin: 0; }
.guide-crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #89959d; margin: 0 0 26px; }
.guide-crumbs a { text-decoration: none; }
.path-context { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #303b42; gap: 40px; padding: 26px 0; }
.path-context h2 { font-size: 15px; margin: 0 0 10px; }
.path-context p { max-width: 480px; font-size: 14px; margin: 0; }
.path-lessons ol { padding: 0; margin: 0; list-style: none; }
.path-lessons li { display: grid; grid-template-columns: 32px 1fr auto; gap: 20px; padding: 24px 18px; border-bottom: 1px solid #2b363a; }
.lesson-order { font: 12px/2 ui-monospace,monospace; color: #859398; }
.path-lessons h3 { margin: 0 0 7px; font-size: 20px; }
.path-lessons h3 a { text-decoration: none; }
.path-lessons li p { margin: 0; font-size: 14px; }
.lesson-state { font-size: 11px; color: #9aa5aa; align-self: center; }
.lesson-ready { background: #1a241d; border: 1px solid #526348; border-radius: 6px; margin-top: -1px; }
.lesson-ready .lesson-state { color: #c4dfa0; }
.guides-page .path-reference { margin-top: 40px; }
.path-reference h2 { font-size: 23px; margin-bottom: 10px; }
.lesson-meta { color: #9ba8ad; font-size: 12px; display: flex; flex-wrap: wrap; gap: 12px; }
.lesson-hero { padding-bottom: 12px; max-width: 980px; }
.lesson-outcome { max-width: 860px; border-left: 3px solid #a7c682; padding: 5px 0 5px 22px; color: #d3ded4; font-size: 18px; margin: 0 0 40px; line-height: 1.7; }
.lesson-outcome span { display: block; color: #9eaf8a; font: 10px/1.5 ui-monospace,monospace; letter-spacing: 1px; margin-bottom: 10px; }
.lesson-layout { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 44px; border-top: 1px solid #303b42; }
.lesson-index { align-self: start; position: sticky; top: 24px; padding-top: 30px; }
.lesson-index a { display: block; font-size: 13px; color: #a8b3b8; text-decoration: none; padding: 7px 0; }
.lesson-index a:hover { color: #c4dfa0; }
.lesson-body { min-width: 0; max-width: 840px; }
.lesson-body section { margin: 36px 0 0; scroll-margin-top: 24px; }
.lesson-body section:first-child { border: 0; margin: 0; }
.lesson-body h2 { font-size: 29px; }
.lesson-body p { font-size: 16px; line-height: 1.85; }
.lesson-callout { padding: 20px 24px; background: #18211d; border-left: 2px solid #90ac72; margin: 26px 0; }
.lesson-callout p { margin: 6px 0 0; }
.worked-step { display: grid; grid-template-columns: 1fr 250px; gap: 30px; align-items: center; padding: 28px 0; border-bottom: 1px solid #293438; }
.step-number { color: #afc58f; font: 12px/1.8 ui-monospace,monospace; }
.worked-step h3 { font-size: 21px; margin: 8px 0 12px; }
.worked-step p { margin: 0; font-size: 15px; }
.lesson-board { margin: 0; }
.lesson-board svg { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid #35434a; }
.lesson-board figcaption { color: #94a2a9; font-size: 11px; line-height: 1.6; margin-top: 12px; }
.lesson-check { padding-top: 24px; }
.mistake h3 { font-size: 19px; margin: 26px 0 8px; }
.guides-page .lesson-drill { padding: 28px; background: #1a231c; border: 1px solid #526348; border-radius: 8px; }
.drill-settings { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 24px; }
.drill-settings span { padding: 5px 9px; font: 11px/1.6 ui-monospace,monospace; color: #c4dfa0; border: 1px solid #4b5b41; border-radius: 4px; }
.lesson-drill ol { padding-left: 22px; }
.lesson-drill li { padding-left: 6px; margin-bottom: 12px; }
.lesson-drill .drill-note { font-size: 12px; margin: 14px 0 0; color: #a2afa1; }
.lesson-terms { display: flex; flex-wrap: wrap; gap: 10px; }
.lesson-terms a { padding: 6px 12px; border: 1px solid #364349; border-radius: 4px; text-decoration: none; font-size: 13px; }
.lesson-next { border-block: 1px solid #303b42; padding: 28px 0; margin-top: 36px; }
.lesson-next h2 { font-size: 24px; margin-bottom: 12px; }
.lesson-sources { color: #8d9b9e; margin-top: 28px; font-size: 12px; }
.lesson-sources summary { cursor: pointer; }
.lesson-sources p { font-size: 13px; margin: 12px 0 0; }
@media (max-width: 900px) {
 .entry-grid { grid-template-columns: 1fr; }
 .entry-card { padding: 22px; }
 .entry-card p { margin-bottom: 14px; }
 .lesson-layout { grid-template-columns: 1fr; gap: 0; }
 .lesson-index { position: static; border-bottom: 1px solid #303b42; padding: 18px 0; }
 .lesson-index nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
 .lesson-index .eyebrow { width: 100%; margin: 0; }
 .guide-featured .feature-motif { max-width: 170px; }
}
@media (max-width: 600px) {
 .guides-page { padding-top: 26px; }
 .guides-hero { padding-bottom: 24px; }
 .guides-hero h1 { font-size: 44px; overflow-wrap: anywhere; }
 .section-heading { align-items: start; flex-direction: column; gap: 10px; }
 .path-grid,.path-context { grid-template-columns: 1fr; }
 .path-context { gap: 24px; }
 .path-card { padding: 22px 0; }
 .guides-page .guide-featured { grid-template-columns: 1fr; padding: 24px; }
 .feature-motif { display: none; }
 .guide-utilities { flex-direction: column; gap: 14px; }
 .path-lessons li { grid-template-columns: 25px 1fr; gap: 12px; padding: 20px 12px; }
 .lesson-state { grid-column: 2; }
 .worked-step { grid-template-columns: 1fr; gap: 20px; }
 .lesson-board { max-width: 280px; width: 100%; margin-inline: auto; }
 .guides-page .lesson-drill { padding: 20px; }
}

.lesson-definitions { margin: 26px 0; }
.lesson-definitions dt { color: #d7e3cf; font-weight: 600; margin-top: 22px; }
.lesson-definitions dd { margin: 8px 0 0; font-size: 16px; line-height: 1.85; color: #aebbc3; }

/* Reused glossary illustrations, scoped to lesson content. */
.guide-concept { margin: 24px 0; }
.guide-concept figure { margin: 0; padding: 24px; border: 1px solid #35434a; border-radius: 8px; background: #141c22; }
.guide-concept figcaption { color: #a1b0b8; font: 10px/1.6 ui-monospace, monospace; letter-spacing: .08em; margin-bottom: 20px; }
.guide-concept .board { max-width: 300px; margin: 0 auto; }
.guide-concept svg { display: block; max-width: 100%; width: 100%; height: auto; }
.guide-concept .diagram-caption { font-size: 13px; line-height: 1.7; margin: 16px 0 0; color: #a5b5bf; }
.guide-concept .demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #35434a; padding-top: 16px; margin-top: 20px; }
.guide-concept .step-count { font: 11px ui-monospace,monospace; color: #a1b0b8; }
.guide-concept .demo button { background: #c4dfa0; color: #182111; border: 1px solid #647651; border-radius: 4px; padding: 9px 12px; cursor: pointer; font: 600 12px system-ui,sans-serif; }
.guide-concept .demo button:hover { background: #dfedcb; }
.guide-concept .demo button:focus-visible { outline: 2px solid #c4dfa0; outline-offset: 4px; }
.guide-concept .example-panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.guide-concept .example-label { display: block; color: #a9bbc6; font: 10px/1.6 ui-monospace,monospace; margin-bottom: 10px; }
.guide-concept .example-flow { display: grid; gap: 16px; padding: 0; list-style: none; }
.guide-concept .example-flow li { border-left: 3px solid #9bbf8c; padding: 12px 16px; background: #18242b; }
.guide-concept .example-flow strong,.guide-concept .example-flow small { display: block; }
.guide-concept .example-flow small { color: #a9bbc6; margin-top: 6px; }
.guide-concept .example-tokens { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.guide-concept .example-tokens span { padding: 8px 12px; border: 1px solid var(--piece); color: var(--piece); font: 13px ui-monospace,monospace; }
.guide-concept .example-tokens .used { opacity: .45; text-decoration: line-through; }
.guide-walkthrough { padding-left: 24px; }
.guide-walkthrough li { padding-left: 8px; margin: 24px 0; }
.guide-walkthrough h3 { font-size: 20px; margin-bottom: 8px; }
.lesson-body > section > .lesson-board { max-width: 300px; margin: 24px auto; }
@media(max-width:600px) {
 .guide-concept figure { padding: 16px; }
 .guide-concept .demo-controls { flex-wrap: wrap; }
 .guide-concept .example-panels { grid-template-columns: 1fr; }
}