:root{color-scheme:light;--color-brand: #41b649;--color-brand-dark: #24752b;--color-ink: #17201a;--color-text: #334139;--color-muted: #647168;--color-surface: #ffffff;--color-surface-soft: #f4faf5;--color-surface-raised: #ffffff;--color-border: #d9e5dc;--color-accent: #0b55b7;--shadow-subtle: 0 18px 44px rgb(23 32 26 / .08);--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: "Avenir Next", Montserrat, var(--font-sans)}*,*:before,*:after{box-sizing:border-box}html{background:var(--color-surface);font-family:var(--font-sans);scroll-behavior:smooth}body{color:var(--color-text);font-size:18px;line-height:1.6;margin:0}a{color:var(--color-brand-dark);text-decoration-thickness:.08em;text-underline-offset:.18em}a:hover{color:var(--color-brand)}h1,h2,h3{color:var(--color-ink);font-family:var(--font-display);letter-spacing:0;line-height:1.12}h1{font-size:clamp(2.5rem,7vw,5.8rem);margin:0;max-width:13ch}h2{font-size:clamp(2rem,4vw,3.25rem);margin:0 0 1rem}h3{font-size:1.25rem;margin:0 0 .65rem}p{margin:0}pre{background:#101914;border-radius:8px;color:#f4fff6;font-size:.9rem;line-height:1.55;margin:0;overflow-x:auto;padding:1rem}code{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace}.visually-hidden{block-size:1px;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}.code-copy{position:relative}.code-copy pre{padding-top:3.25rem}.code-copy__button{background:var(--color-surface-raised);border:2px solid var(--color-brand);border-radius:4px;color:var(--color-brand-dark);cursor:pointer;font:inherit;font-size:.72rem;font-weight:900;inset-block-start:.75rem;inset-inline-end:.75rem;letter-spacing:.04em;padding:.4rem .6rem;position:absolute;text-transform:uppercase;z-index:1}.code-copy__button:hover,.code-copy__button:focus{background:var(--color-brand);color:#fff}ul,ol{margin:0;padding-left:1.25rem}.container{margin-inline:auto;max-width:1120px;padding-inline:clamp(1rem,3vw,2rem);width:100%}.skip-link{background:var(--color-ink);color:#fff;left:1rem;padding:.65rem .85rem;position:fixed;top:1rem;transform:translateY(-150%);z-index:10}.skip-link:focus{transform:translateY(0)}.site-header{background:#ffffffeb;border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:4}.site-header__inner{align-items:center;display:flex;gap:1rem;justify-content:space-between;min-height:76px}.site-brand{align-items:center;color:var(--color-ink);display:inline-flex;font-family:var(--font-display);font-weight:800;gap:.65rem;text-decoration:none}.site-brand__mark{display:block;flex:0 0 auto;height:2.35rem;width:3.45rem}.site-brand__logo-mark{fill:var(--color-ink)}.site-brand__logo-accent{fill:var(--color-brand)}.site-nav{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;justify-content:flex-end}.site-nav a{color:var(--color-ink);font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}.site-nav a:hover,.site-nav a:focus{color:var(--color-brand-dark);text-decoration:underline}.hero{background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-surface-soft) 72%),radial-gradient(circle at 82% 20%,rgb(65 182 73 / .14),transparent 30%);border-bottom:1px solid var(--color-border);padding-block:clamp(4rem,9vw,7.5rem)}.hero__grid{align-items:end;display:grid;gap:2rem;grid-template-columns:minmax(0,1.1fr) minmax(280px,.65fr)}.eyebrow{color:var(--color-accent);font-size:.78rem;font-weight:800;letter-spacing:.1em;margin-bottom:.85rem;text-transform:uppercase}.lede{color:var(--color-text);font-size:clamp(1.12rem,2vw,1.35rem);line-height:1.65;margin-top:1.35rem;max-width:720px}.hero-card,.lesson-card,.callout,.resource-card{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px}.hero-card{box-shadow:var(--shadow-subtle);padding:1.35rem}.hero-card h2{font-size:1.2rem;margin-bottom:.75rem}.hero-card ol{display:grid;gap:.5rem}.section{padding-block:clamp(3.5rem,7vw,6rem)}.section--soft{background:var(--color-surface-soft)}.section-heading{margin-bottom:2rem;max-width:760px}.lesson-grid,.resource-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}.lesson-search{display:grid;gap:.45rem;margin-block:0 1rem;max-width:42rem}.lesson-search label{color:var(--color-muted);font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.lesson-search input{background:var(--color-surface-raised);border:2px solid var(--color-border);border-radius:8px;color:var(--color-text);font:inherit;inline-size:100%;padding:.8rem .9rem}.lesson-search input:focus{border-color:var(--color-brand);outline:3px solid rgb(65 182 73 / .18)}.lesson-filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-block:0 1rem}.lesson-filter{background:var(--color-surface-raised);border:2px solid var(--color-border);border-radius:999px;color:var(--color-brand-dark);cursor:pointer;font:inherit;font-size:.8rem;font-weight:900;letter-spacing:.04em;padding:.55rem .75rem;text-transform:uppercase}.lesson-filter:hover,.lesson-filter:focus,.lesson-filter[aria-pressed=true]{background:var(--color-brand);border-color:var(--color-brand);color:#fff}.lesson-filter-status{color:var(--color-muted);font-size:.9rem;font-weight:800;margin-bottom:1rem}.lesson-progress-summary{color:var(--color-muted);font-size:.9rem;font-weight:800;margin-block:-.35rem 1.25rem}.lesson-card{display:grid;gap:1rem;grid-template-rows:auto auto auto auto 1fr auto auto;min-height:300px;padding:1.25rem;text-decoration:none}.lesson-card[hidden]{display:none}.lesson-card:hover,.lesson-card:focus{border-color:var(--color-brand);box-shadow:var(--shadow-subtle)}.lesson-card__number{color:var(--color-brand-dark);font-family:var(--font-display);font-size:.85rem;font-weight:800}.lesson-card__badge{align-self:start;background:#30b24a24;border:1px solid var(--color-brand);border-radius:999px;color:var(--color-brand-dark);font-size:.72rem;font-weight:900;justify-self:start;letter-spacing:.04em;padding:.25rem .55rem;text-transform:uppercase}.lesson-card__complete{align-self:start;background:var(--color-brand);border:1px solid var(--color-brand);border-radius:999px;color:#fff;font-size:.72rem;font-weight:900;justify-self:start;letter-spacing:.04em;padding:.25rem .55rem;text-transform:uppercase}.lesson-card.is-complete{border-color:var(--color-brand)}.lesson-card h2{font-size:clamp(1.35rem,2vw,1.65rem);line-height:1.18;margin:0;overflow-wrap:anywhere}.lesson-card__meta{color:var(--color-muted);display:flex;flex-wrap:wrap;font-size:.78rem;font-weight:900;gap:.4rem .8rem;letter-spacing:.04em;text-transform:uppercase}.lesson-card p,.resource-card p{color:var(--color-text)}.lesson-card__footer{color:var(--color-brand-dark);font-size:.8rem;font-weight:800;letter-spacing:.04em;margin-top:auto;text-transform:uppercase}.lesson-card__tags{display:flex;flex-wrap:wrap;gap:.35rem}.lesson-card__tags span{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:999px;color:var(--color-muted);font-size:.72rem;font-weight:800;padding:.18rem .45rem}.callout{display:grid;gap:1rem;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);padding:clamp(1.25rem,3vw,2rem)}.callout--compact{align-items:center;background:var(--color-surface-raised);border:1px solid var(--color-brand);border-radius:8px;grid-template-columns:minmax(0,.75fr) minmax(0,1fr) auto;margin-bottom:1.5rem}.callout--compact h3{font-size:1.35rem;margin:0}.path-list{counter-reset:path;display:grid;gap:.85rem;list-style:none;padding-left:0}.path-list li{counter-increment:path}.path-list a{align-items:center;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;color:var(--color-text);display:grid;gap:.35rem 1rem;grid-template-columns:auto minmax(0,1fr);padding:1rem;text-decoration:none}.path-list a:before{align-items:center;background:var(--color-brand);block-size:2rem;border-radius:999px;color:#fff;content:counter(path);display:inline-flex;font-family:var(--font-display);font-weight:900;grid-row:span 3;inline-size:2rem;justify-content:center}.path-list a:hover,.path-list a:focus{border-color:var(--color-brand);box-shadow:var(--shadow-subtle)}.path-list span,.path-list small{color:var(--color-muted);font-size:.78rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.path-list strong{color:var(--color-ink);font-family:var(--font-display);font-size:1.25rem;line-height:1.2}.help-path-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}.help-path-card{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.85rem;padding:1.25rem}.help-path-card--highlight{background:var(--color-surface-soft);border-color:var(--color-brand)}.help-path-card h3{font-size:1.25rem;margin:0}.help-path-card p{color:var(--color-text)}.help-path-card ol{display:grid;gap:.45rem;padding-left:1.25rem}.help-path-card a{color:var(--color-brand-dark);font-weight:800}.button-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}.button{border:2px solid var(--color-brand);border-radius:4px;color:var(--color-brand-dark);display:inline-block;font-size:.84rem;font-weight:800;letter-spacing:.04em;padding:.75rem 1rem;text-decoration:none;text-transform:uppercase}.button--primary{background:var(--color-brand);color:#fff}.button:hover,.button:focus{background:var(--color-brand-dark);border-color:var(--color-brand-dark);color:#fff}.lesson-page{padding-block:clamp(3rem,7vw,6rem)}.lesson-layout{display:grid;gap:3rem;grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr)}.lesson-sidebar{border-right:1px solid var(--color-border);padding-right:2rem}.lesson-sidebar ul{display:grid;gap:.6rem;list-style:none;padding-left:0}.lesson-content{display:grid;gap:2rem}.lesson-meta{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 0}.lesson-meta div{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;padding:.7rem .85rem}.lesson-meta dt{color:var(--color-muted);font-size:.7rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.lesson-meta dd{color:var(--color-ink);font-family:var(--font-display);font-weight:900;margin:.15rem 0 0}.lesson-toolbar{align-items:center;background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:flex;flex-wrap:wrap;gap:.75rem 1rem;justify-content:space-between;padding:.85rem 1rem}.lesson-toolbar p{color:var(--color-muted);font-size:.85rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.lesson-toolbar div{display:flex;flex-wrap:wrap;gap:.75rem}.lesson-toolbar a{color:var(--color-brand-dark);font-size:.82rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.lesson-on-this-page{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;padding:1rem}.lesson-on-this-page h2{font-size:1.05rem;margin:0 0 .75rem}.lesson-on-this-page ul{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;padding-left:0}.lesson-on-this-page a{border:1px solid var(--color-border);border-radius:999px;color:var(--color-brand-dark);display:inline-block;font-size:.78rem;font-weight:900;padding:.35rem .65rem;text-transform:uppercase}.lesson-on-this-page a:hover,.lesson-on-this-page a:focus{border-color:var(--color-brand);color:var(--color-brand)}.lesson-progress{align-items:center;background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;color:var(--color-ink);cursor:pointer;display:inline-flex;font-weight:900;gap:.65rem;justify-self:start;padding:.75rem .9rem}.lesson-progress input{accent-color:var(--color-brand);block-size:1.1rem;inline-size:1.1rem}.teacher-notes{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;padding:.85rem 1rem}.teacher-notes summary{color:var(--color-ink);cursor:pointer;font-family:var(--font-display);font-weight:900}.teacher-notes[open] summary{margin-bottom:1rem}.teacher-notes__grid{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.teacher-notes__grid section{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.7rem;padding:1rem}.teacher-notes__grid h2{font-size:1.05rem;margin:0}.lesson-content section{display:grid;gap:1rem}.lesson-anchor-block,.lesson-content-sections,.lesson-content section{scroll-margin-top:6.5rem}.lesson-anchor-block,.lesson-content-sections{display:grid;gap:2rem}.lesson-section-resources{color:var(--color-muted);font-size:.9rem;font-weight:700}.demo-source{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;color:var(--color-muted);font-size:.95rem;font-weight:700;padding:.85rem 1rem}.demo-guide{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:1rem;padding:clamp(1.1rem,3vw,1.5rem)}.demo-guide__heading{display:grid;gap:.5rem;max-width:720px}.demo-guide__heading h2{font-size:clamp(1.5rem,3vw,2rem);margin:0}.demo-guide__grid{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.demo-guide__grid section{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.65rem;padding:1rem}.demo-guide__grid h3{font-size:1.05rem;margin:0}.demo-guide__grid ul{display:grid;gap:.45rem}.lesson-checkpoint{background:var(--color-surface-soft);border:1px solid var(--color-brand);border-radius:8px;padding:clamp(1.1rem,3vw,1.5rem)}.lesson-checkpoint h2{font-size:clamp(1.5rem,3vw,2rem)}.lesson-checkpoint ul{display:grid;gap:.5rem;list-style:none;padding-left:0}.lesson-checkpoint li{align-items:start;display:grid;gap:.65rem;grid-template-columns:auto minmax(0,1fr)}.lesson-checkpoint li:before{background:var(--color-brand);block-size:.85rem;border-radius:999px;content:"";inline-size:.85rem;margin-top:.4rem}.flex-playground,.box-visualizer,.dom-lab,.a11y-lab,.responsive-lab,.selector-lab,.form-lab,.transition-lab,.animation-lab,.gsap-lab,.image-lab,.nav-lab,.carousel-lab{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;padding:clamp(1rem,3vw,1.5rem)}.flex-playground__controls,.box-visualizer__controls{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.flex-playground__controls label,.box-visualizer__controls label{color:var(--color-muted);display:grid;font-size:.85rem;font-weight:800;gap:.4rem;text-transform:uppercase}.flex-playground__controls select,.flex-playground__controls input,.box-visualizer__controls select,.box-visualizer__controls input{accent-color:var(--color-brand);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font:inherit;padding:.6rem}.dom-lab__grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(12rem,.45fr)}.dom-lab__preview{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.75rem;padding:1.25rem;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.dom-lab__preview.is-highlighted{border-color:var(--color-brand);box-shadow:var(--shadow-subtle);transform:translateY(-2px)}.dom-lab__status{color:var(--color-brand-dark);font-size:.8rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.dom-lab__preview h3{font-size:1.45rem}.dom-lab__preview ul{display:grid;gap:.35rem}.dom-lab__controls{align-content:start;display:grid;gap:.6rem}.dom-lab__controls button{background:var(--color-surface-raised);border:2px solid var(--color-brand);border-radius:4px;color:var(--color-brand-dark);cursor:pointer;font:inherit;font-size:.82rem;font-weight:800;padding:.7rem .8rem;text-align:left;text-transform:uppercase}.dom-lab__controls button:hover,.dom-lab__controls button:focus{background:var(--color-brand-dark);border-color:var(--color-brand-dark);color:#fff}.a11y-lab__grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(12rem,.45fr)}.a11y-lab__preview{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;padding:1rem}.a11y-lab__card{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.75rem;padding:1rem}.a11y-lab__image{align-content:center;aspect-ratio:16 / 9;background:linear-gradient(135deg,var(--color-brand),var(--color-brand-dark));border-radius:6px;color:#fff;display:grid;font-family:var(--font-display);font-size:1.4rem;font-weight:900;place-items:center}.a11y-lab__card button,.a11y-lab__fake-button{background:var(--color-brand);border:2px solid var(--color-brand);border-radius:4px;color:#fff;cursor:pointer;display:inline-block;font:inherit;font-size:.82rem;font-weight:800;justify-self:start;padding:.7rem .8rem;text-transform:uppercase}.a11y-lab__preview :focus-visible{outline:3px solid var(--color-ink);outline-offset:3px}.a11y-lab__preview.has-weak-focus :focus-visible{outline:0}.a11y-lab .is-low-contrast{color:#aeb8b0}.a11y-lab__controls{align-content:start;display:grid;gap:.75rem}.a11y-lab__controls label{align-items:start;background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:6px;display:flex;font-weight:700;gap:.6rem;padding:.75rem}.a11y-lab__controls input{accent-color:var(--color-brand);margin-top:.2rem}.a11y-lab__checklist{display:grid;gap:.5rem;list-style:none;padding-left:0}.a11y-lab__checklist li{border:1px solid var(--color-border);border-radius:6px;font-weight:800;padding:.65rem .75rem}.a11y-lab__checklist li[data-state=pass]{background:#30b24a24;border-color:var(--color-brand)}.a11y-lab__checklist li[data-state=fail]{background:#9c46361f;border-color:#9c4636}.responsive-lab__controls{align-items:end;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) auto}.responsive-lab__controls label{color:var(--color-muted);display:grid;font-size:.85rem;font-weight:800;gap:.4rem;text-transform:uppercase}.responsive-lab__controls input{accent-color:var(--color-brand)}.responsive-lab__controls output{color:var(--color-brand-dark);font-family:var(--font-display);font-size:1.2rem;font-weight:900}.responsive-lab__viewport{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;inline-size:100%;margin-inline:auto;max-inline-size:640px;overflow:hidden;transition:max-width .18s ease}.responsive-lab__toolbar{align-items:center;background:var(--color-ink);color:#fff;display:flex;font-size:.75rem;font-weight:900;justify-content:space-between;letter-spacing:.04em;padding:.5rem .75rem;text-transform:uppercase}.responsive-lab__preview{display:grid;gap:1rem;grid-template-columns:1fr;padding:1rem}.responsive-lab__preview article{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.5rem;padding:1rem}.responsive-lab__preview h3{font-size:1.1rem}.selector-lab__controls{display:grid;gap:1rem}.selector-lab__controls label{color:var(--color-muted);display:grid;font-size:.85rem;font-weight:800;gap:.4rem;text-transform:uppercase}.selector-lab__controls select{border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font:inherit;padding:.6rem}.selector-lab__preview{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:1rem;padding:1rem}.selector-lab__preview article{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.5rem;padding:1rem}.selector-lab__preview .is-selector-match{outline:3px solid var(--color-brand);outline-offset:3px}.form-lab__grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(12rem,.45fr)}.form-lab__preview{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:1rem;padding:1rem}.form-lab__field{display:grid;gap:.4rem}.form-lab__field label,.form-lab__controls label{font-weight:800}.form-lab__field input{border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font:inherit;padding:.65rem .75rem}.form-lab__field input[aria-invalid=true]{border-color:#9c4636}.form-lab__error{color:#9c4636;font-size:.9rem;font-weight:800}.form-lab__preview button{background:var(--color-brand);border:2px solid var(--color-brand);border-radius:4px;color:#fff;cursor:pointer;font:inherit;font-size:.82rem;font-weight:800;justify-self:start;padding:.7rem .8rem;text-transform:uppercase}.form-lab__preview button:hover,.form-lab__preview button:focus{background:var(--color-brand-dark);border-color:var(--color-brand-dark)}.form-lab__controls{align-content:start;display:grid;gap:.75rem}.form-lab__controls label{align-items:start;background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:6px;display:flex;gap:.6rem;padding:.75rem}.form-lab__controls input{accent-color:var(--color-brand);margin-top:.2rem}.form-lab__checklist{display:grid;gap:.5rem;list-style:none;padding-left:0}.form-lab__checklist li{border:1px solid var(--color-border);border-radius:6px;font-weight:800;padding:.65rem .75rem}.form-lab__checklist li[data-state=pass]{background:#30b24a24;border-color:var(--color-brand)}.form-lab__checklist li[data-state=fail]{background:#9c46361f;border-color:#9c4636}.transition-lab__controls{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.transition-lab__controls label{color:var(--color-muted);display:grid;font-size:.85rem;font-weight:800;gap:.4rem;text-transform:uppercase}.transition-lab__controls select,.transition-lab__controls input{accent-color:var(--color-brand);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font:inherit;padding:.6rem}.transition-lab__stage{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:1rem;overflow:hidden;padding:1rem}.transition-lab__trigger{background:var(--color-surface-raised);border:2px solid var(--color-brand);border-radius:4px;color:var(--color-brand-dark);cursor:pointer;font:inherit;font-size:.82rem;font-weight:800;justify-self:start;padding:.7rem .8rem;text-transform:uppercase}.transition-lab__trigger:hover,.transition-lab__trigger:focus{background:var(--color-brand-dark);border-color:var(--color-brand-dark);color:#fff}.transition-lab__box{align-content:center;background:var(--color-brand);border:2px solid var(--color-brand-dark);border-radius:8px;color:#fff;display:grid;font-family:var(--font-display);font-weight:900;min-block-size:6rem;place-items:center;inline-size:9rem}.transition-lab__readout{color:var(--color-muted);font-size:.9rem;font-weight:800}.animation-lab__controls{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.animation-lab__controls label{color:var(--color-muted);display:grid;font-size:.85rem;font-weight:800;gap:.4rem;text-transform:uppercase}.animation-lab__controls select,.animation-lab__controls input{accent-color:var(--color-brand);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font:inherit;padding:.6rem}.animation-lab__stage{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:1rem;overflow:hidden;padding:1rem}.animation-lab__trigger{background:var(--color-surface-raised);border:2px solid var(--color-brand);border-radius:4px;color:var(--color-brand-dark);cursor:pointer;font:inherit;font-size:.82rem;font-weight:800;justify-self:start;padding:.7rem .8rem;text-transform:uppercase}.animation-lab__trigger:hover,.animation-lab__trigger:focus{background:var(--color-brand-dark);border-color:var(--color-brand-dark);color:#fff}.animation-lab__target{align-content:center;background:var(--color-brand);border:2px solid var(--color-brand-dark);border-radius:999px;color:#fff;display:grid;font-family:var(--font-display);font-weight:900;min-block-size:7rem;place-items:center;inline-size:7rem}.animation-lab__target[data-animation=spin]{border-radius:18px}.animation-lab__readout{color:var(--color-muted);font-size:.9rem;font-weight:800}.gsap-lab__controls{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}.gsap-lab__controls label{color:var(--color-muted);display:grid;font-size:.85rem;font-weight:800;gap:.4rem;text-transform:uppercase}.gsap-lab__controls select,.gsap-lab__controls input{accent-color:var(--color-brand);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font:inherit;padding:.6rem}.gsap-lab__stage{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:1rem;overflow:hidden;padding:1rem}.gsap-lab__trigger{background:var(--color-surface-raised);border:2px solid var(--color-brand);border-radius:4px;color:var(--color-brand-dark);cursor:pointer;font:inherit;font-size:.82rem;font-weight:800;justify-self:start;padding:.7rem .8rem;text-transform:uppercase}.gsap-lab__trigger:hover,.gsap-lab__trigger:focus{background:var(--color-brand-dark);border-color:var(--color-brand-dark);color:#fff}.gsap-lab__items{align-items:end;display:flex;gap:1rem;min-block-size:9rem}.gsap-lab__item{align-content:center;background:var(--color-brand);border:2px solid var(--color-brand-dark);border-radius:8px;color:#fff;display:grid;font-family:var(--font-display);font-size:1.4rem;font-weight:900;min-block-size:5.5rem;place-items:center;inline-size:5.5rem}.gsap-lab__readout{color:var(--color-muted);font-size:.9rem;font-weight:800}.image-lab__grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(12rem,.45fr)}.image-lab__stage{display:grid;gap:1rem}.image-lab__browser{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;overflow:hidden}.image-lab__toolbar{align-items:center;background:var(--color-ink);color:#fff;display:flex;font-size:.75rem;font-weight:900;justify-content:space-between;letter-spacing:.04em;padding:.5rem .75rem;text-transform:uppercase}.image-lab__figure{display:grid;gap:.75rem;margin:0 auto;padding:1rem;transition:max-inline-size .18s ease}.image-lab__art{align-content:end;aspect-ratio:16 / 9;background:linear-gradient(135deg,rgb(11 85 183 / .2),transparent 45%),linear-gradient(160deg,var(--color-brand) 0 38%,var(--color-surface-raised) 38% 46%,var(--color-brand-dark) 46% 100%);border-radius:8px;color:#fff;display:grid;font-family:var(--font-display);font-size:clamp(1.4rem,5vw,3rem);font-weight:900;min-block-size:12rem;padding:1rem}.image-lab__figure figcaption{color:var(--color-muted);font-size:.9rem;font-weight:700}.image-lab__metrics{display:grid;gap:.75rem;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}.image-lab__metrics div{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;padding:.85rem}.image-lab__metrics dt{color:var(--color-muted);font-size:.72rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.image-lab__metrics dd{color:var(--color-ink);font-family:var(--font-display);font-size:1.25rem;font-weight:900;margin:.2rem 0 0}.image-lab__controls{align-content:start;display:grid;gap:1rem}.image-lab__controls label{color:var(--color-muted);display:grid;font-size:.85rem;font-weight:800;gap:.4rem;text-transform:uppercase}.image-lab__controls select,.image-lab__controls input{accent-color:var(--color-brand);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font:inherit;padding:.6rem}.nav-lab__grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(12rem,.45fr)}.nav-lab__stage{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:1rem;padding:1rem}.nav-lab__stage :focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}.nav-lab__stage.has-weak-focus :focus-visible{outline:0}.nav-lab__skip{background:var(--color-ink);border-radius:4px;color:#fff;font-weight:800;justify-self:start;padding:.5rem .7rem}.nav-lab__skip[hidden],.nav-lab__toggle[hidden]{display:none}.nav-lab__header{align-items:center;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:flex;gap:1rem;justify-content:space-between;padding:.85rem}.nav-lab__brand{color:var(--color-ink);font-family:var(--font-display);font-weight:900;text-decoration:none}.nav-lab__toggle{background:var(--color-surface-raised);border:2px solid var(--color-brand);border-radius:4px;color:var(--color-brand-dark);cursor:pointer;font:inherit;font-size:.82rem;font-weight:800;padding:.55rem .75rem;text-transform:uppercase}.nav-lab__nav{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:none;padding:.85rem}.nav-lab__stage.is-mobile-open .nav-lab__nav{display:block}.nav-lab__nav ul{display:flex;flex-wrap:wrap;gap:.5rem 1rem;list-style:none;padding-left:0}.nav-lab__nav a{color:var(--color-ink);font-size:.82rem;font-weight:900;letter-spacing:.04em;text-decoration:none;text-transform:uppercase}.nav-lab__nav a:hover,.nav-lab__nav a:focus{color:var(--color-brand-dark);text-decoration:underline}.nav-lab__nav a[aria-current=page]{color:var(--color-brand-dark);text-decoration:underline;text-decoration-thickness:.16em}.nav-lab__content{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.5rem;padding:1rem}.nav-lab__controls{align-content:start;display:grid;gap:.75rem}.nav-lab__controls label{align-items:start;background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:6px;display:flex;font-weight:800;gap:.6rem;padding:.75rem}.nav-lab__controls input{accent-color:var(--color-brand);margin-top:.2rem}.nav-lab__checklist{display:grid;gap:.5rem;list-style:none;padding-left:0}.nav-lab__checklist li{border:1px solid var(--color-border);border-radius:6px;font-weight:800;padding:.65rem .75rem}.nav-lab__checklist li[data-state=pass]{background:#30b24a24;border-color:var(--color-brand)}.nav-lab__checklist li[data-state=fail]{background:#9c46361f;border-color:#9c4636}.carousel-lab__grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(12rem,.45fr)}.carousel-lab__stage{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:1rem;padding:1rem}.carousel-lab__viewport{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;min-block-size:14rem;padding:1.25rem}.carousel-lab__viewport:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}.carousel-lab__slide{display:none;gap:.75rem}.carousel-lab__slide.is-active{display:grid;transform:translate(0)}.carousel-lab__slide h3{font-size:clamp(1.6rem,4vw,2.5rem);margin:0}.carousel-lab__status{color:var(--color-brand-dark);font-size:.9rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.carousel-lab__buttons{display:flex;flex-wrap:wrap;gap:.75rem}.carousel-lab__buttons[hidden],.carousel-lab__dots[hidden],.carousel-lab__status[hidden]{display:none}.carousel-lab__buttons button,.carousel-lab__dots button{background:var(--color-surface-raised);border:2px solid var(--color-brand);border-radius:4px;color:var(--color-brand-dark);cursor:pointer;font:inherit;font-size:.82rem;font-weight:800;padding:.7rem .8rem;text-transform:uppercase}.carousel-lab__buttons button:hover,.carousel-lab__buttons button:focus,.carousel-lab__dots button:hover,.carousel-lab__dots button:focus{background:var(--color-brand-dark);border-color:var(--color-brand-dark);color:#fff}.carousel-lab__dots{display:flex;gap:.5rem}.carousel-lab__dots button{border-radius:999px;block-size:1rem;inline-size:1rem;padding:0}.carousel-lab__dots button[aria-current=true]{background:var(--color-brand)}.carousel-lab__controls{align-content:start;display:grid;gap:.75rem}.carousel-lab__controls label{align-items:start;background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:6px;display:flex;font-weight:800;gap:.6rem;padding:.75rem}.carousel-lab__controls input{accent-color:var(--color-brand);margin-top:.2rem}.carousel-lab__checklist{display:grid;gap:.5rem;list-style:none;padding-left:0}.carousel-lab__checklist li{border:1px solid var(--color-border);border-radius:6px;font-weight:800;padding:.65rem .75rem}.carousel-lab__checklist li[data-state=pass]{background:#30b24a24;border-color:var(--color-brand)}.carousel-lab__checklist li[data-state=fail]{background:#9c46361f;border-color:#9c4636}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-40px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}.interactive-notes{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.interactive-notes>div{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.65rem;padding:1rem}.interactive-notes h3{font-size:1.1rem}.interactive-notes ul{display:grid;gap:.45rem}.flex-playground__stage{align-items:stretch;background:linear-gradient(90deg,rgb(48 178 74 / .12) 1px,transparent 1px),linear-gradient(0deg,rgb(48 178 74 / .12) 1px,transparent 1px),var(--color-surface-soft);background-size:24px 24px;border:1px solid var(--color-border);border-radius:8px;display:flex;min-height:260px;padding:3rem 1rem 1rem;position:relative}.flex-playground__axis{border-radius:999px;color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.04em;padding:.3rem .55rem;position:absolute;text-transform:uppercase}.flex-playground__axis--main{background:var(--color-brand-dark);inset-block-start:.75rem;inset-inline-start:1rem}.flex-playground__axis--cross{background:var(--color-ink);inset-block-start:.75rem;inset-inline-start:7.5rem}.flex-playground__stage[data-direction=column] .flex-playground__axis--main{inset-block-start:.75rem;inset-inline-start:1rem}.flex-playground__stage[data-direction=column] .flex-playground__axis--cross{inset-block-start:.75rem;inset-inline-start:8rem}.flex-playground__item{align-content:center;background:var(--color-brand);border:2px solid var(--color-brand-dark);border-radius:6px;color:#fff;display:grid;font-family:var(--font-display);font-size:1.4rem;font-weight:900;min-block-size:4rem;min-inline-size:4rem;padding:1rem;place-items:center}.box-visualizer__stage{background:linear-gradient(90deg,rgb(48 178 74 / .12) 1px,transparent 1px),linear-gradient(0deg,rgb(48 178 74 / .12) 1px,transparent 1px),var(--color-surface-soft);background-size:24px 24px;border:1px solid var(--color-border);border-radius:8px;display:grid;min-height:360px;overflow:auto;padding:1rem;place-items:center}.box-visualizer__margin,.box-visualizer__border,.box-visualizer__padding,.box-visualizer__content{position:relative}.box-visualizer__margin{background:#30b24a26;border:1px dashed var(--color-brand-dark)}.box-visualizer__border{background:var(--color-brand-dark);border-color:var(--color-brand-dark);border-style:solid}.box-visualizer__padding{background:#ffffffb8}.box-visualizer__content{align-content:center;background:var(--color-brand);color:#fff;display:grid;font-family:var(--font-display);font-weight:900;min-block-size:5rem;place-items:center}.box-visualizer__margin span,.box-visualizer__border span,.box-visualizer__padding span{background:var(--color-ink);border-radius:999px;color:#fff;font-size:.7rem;font-weight:800;inset-block-start:.35rem;inset-inline-start:.35rem;letter-spacing:.04em;padding:.25rem .45rem;position:absolute;text-transform:uppercase;z-index:1}.lesson-content h2{font-size:2rem}.lesson-content section{border-top:1px solid var(--color-border);padding-top:2rem}.lesson-content .teacher-notes__grid section{border-top:1px solid var(--color-border);padding-top:1rem}.lesson-content .demo-guide__grid section{border-top:1px solid var(--color-border);padding-top:1rem}.resource-card{padding:1.25rem}.resource-hub{display:grid;gap:1.25rem}.resource-group{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:1rem;padding:clamp(1.25rem,3vw,1.75rem)}.resource-group__heading{display:grid;gap:.5rem;max-width:720px}.resource-group__heading h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:0}.resource-list{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}.resource-item{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.75rem;padding:1rem}.resource-item h3{font-size:1.15rem;margin:0}.resource-item p{color:var(--color-text)}.resource-item__lesson{color:var(--color-muted);font-size:.85rem;font-weight:800}.debug-principles{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr));margin-block:clamp(2rem,5vw,3.5rem)}.debug-principles article{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.65rem;padding:1.25rem}.debug-principles span{color:var(--color-brand-dark);font-size:.78rem;font-weight:900;letter-spacing:.06em}.debug-principles h2{font-size:1.35rem;margin:0}.debug-index{border-block:1px solid var(--color-border);margin-block:clamp(2.5rem,6vw,4rem);padding-block:clamp(2rem,5vw,3rem)}.debug-fix-list{display:grid;gap:clamp(2rem,5vw,3.5rem)}.debug-fix{scroll-margin-top:6rem}.debug-fix>header{border-bottom:1px solid var(--color-border);display:grid;gap:.75rem;margin-bottom:1rem;padding-bottom:1rem}.debug-fix>header h2{font-size:clamp(1.8rem,4vw,2.7rem);margin:0}.debug-fix__grid{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.debug-fix__grid section{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.75rem;padding:1rem}.debug-fix__grid h3{font-size:1.05rem;margin:0}.debug-link-list{display:grid;gap:.45rem}.module-index{border-block:1px solid var(--color-border);margin-block:clamp(2.5rem,6vw,4rem);padding-block:clamp(2rem,5vw,3rem)}.module-index__list{counter-reset:module;display:grid;gap:.85rem;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;padding:0}.module-index__list li{counter-increment:module}.module-index__list a{align-items:start;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;color:var(--color-text);display:grid;gap:.35rem;min-height:100%;padding:1rem;text-decoration:none}.module-index__list a:hover,.module-index__list a:focus{border-color:var(--color-brand)}.module-index__list span{color:var(--color-brand-dark);font-size:.78rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.module-index__list strong{color:var(--color-ink);font-family:var(--font-display);font-size:1.2rem;line-height:1.2}.module-index__list small{color:var(--color-muted);font-size:.9rem}.module-list{display:grid;gap:clamp(2rem,5vw,3.5rem)}.module-card{scroll-margin-top:6rem}.module-card__header{border-bottom:1px solid var(--color-border);display:grid;gap:.75rem;margin-bottom:1rem;padding-bottom:1rem}.module-card__header h2{font-size:clamp(1.8rem,4vw,2.7rem);margin:0}.module-card__grid{align-items:start;display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}.module-card__grid section{align-content:start;align-items:start;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.75rem;grid-auto-rows:max-content;padding:1rem}.module-card__grid h3{font-size:1.05rem;margin:0}.module-card__grid ul,.module-card__grid ol{display:grid;gap:.45rem;margin:0;padding-left:1.15rem}.module-card__grid p{margin:0}.module-project{border-color:var(--color-brand)}.project-list{display:grid;gap:1rem}.project-card{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:1rem;padding:clamp(1.25rem,3vw,1.75rem)}.project-card h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:0}.project-card__meta{color:var(--color-accent);font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.project-card__links{display:flex;flex-wrap:wrap;gap:.65rem}.project-card__links a{border:1px solid var(--color-border);border-radius:999px;color:var(--color-brand-dark);font-size:.78rem;font-weight:900;padding:.35rem .65rem;text-decoration-thickness:.08em;text-transform:uppercase}.project-card__links a:hover,.project-card__links a:focus{border-color:var(--color-brand);color:var(--color-brand)}.mini-card-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}.mini-card{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;color:var(--color-text);display:grid;gap:.35rem;min-height:100%;padding:1rem;text-decoration:none}.mini-card:hover,.mini-card:focus{border-color:var(--color-brand);color:var(--color-text)}.mini-card span{color:var(--color-brand-dark);font-size:.78rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.mini-card strong{color:var(--color-ink);font-family:var(--font-display);font-size:1.12rem;line-height:1.2}.mini-card small{color:var(--color-muted);font-size:.92rem}.project-examples-overview{border-top:1px solid var(--color-border);margin-top:clamp(2.5rem,6vw,4rem);padding-top:clamp(2.5rem,6vw,4rem)}.project-page{padding-block:clamp(3rem,7vw,6rem)}.project-detail-layout{display:grid;gap:3rem;grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr)}.project-sidebar{border-right:1px solid var(--color-border);padding-right:2rem}.project-sidebar ul{display:grid;gap:.6rem;list-style:none;padding-left:0}.project-detail{display:grid;gap:2rem}.project-meta{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 0}.project-meta div{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;padding:.7rem .85rem}.project-meta dt{color:var(--color-muted);font-size:.7rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.project-meta dd{color:var(--color-ink);font-family:var(--font-display);font-weight:900;margin:.15rem 0 0}.project-brief-section{border-top:1px solid var(--color-border);display:grid;gap:1rem;padding-top:2rem}.project-brief-section h2{font-size:clamp(1.6rem,3vw,2.35rem);margin:0}.project-milestones{counter-reset:milestone;display:grid;gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr))}.project-milestones article{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.55rem;padding:1rem}.project-milestones__number{color:var(--color-accent);font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.project-milestones h3{font-size:1.15rem;margin:0}.project-requirements{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.project-requirements article{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.75rem;padding:1rem}.project-requirements h3{font-size:1.1rem;margin:0}.project-checklist{background:var(--color-surface-soft);border:1px solid var(--color-brand);border-radius:8px;padding:clamp(1.1rem,3vw,1.5rem)}.project-starter-kit{align-items:start;background:var(--color-surface-soft);border:1px solid var(--color-brand);border-radius:8px;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) auto;padding:clamp(1.1rem,3vw,1.5rem)}.project-starter-kit ul{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:flex-end;list-style:none;padding:0}.project-starter-kit a{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:999px;color:var(--color-brand-dark);display:inline-flex;font-size:.78rem;font-weight:900;gap:.25rem;padding:.35rem .65rem;text-transform:uppercase}.project-starter-kit a:hover,.project-starter-kit a:focus{border-color:var(--color-brand);color:var(--color-brand)}.project-starter-kit span{color:var(--color-muted);font-size:.7rem;text-transform:none}.project-rubric{display:grid;gap:1rem}.project-rubric article{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:1rem;padding:1rem}.project-rubric h3{font-size:1.2rem;margin:0}.project-rubric dl{display:grid;gap:.75rem;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}.rubric-scale__level{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;padding:.85rem}.rubric-scale__level--strong{border-color:var(--color-brand)}.rubric-scale__level--needs-work{border-color:color-mix(in srgb,var(--color-accent),var(--color-border) 35%)}.project-rubric dt{color:var(--color-accent);font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.project-rubric dd{margin:.35rem 0 0}.project-models{display:grid;gap:1rem}.project-models article{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.85rem;padding:1rem}.project-models__type{color:var(--color-accent);font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.project-models h3{font-size:1.25rem;margin:0}.project-models h4{color:var(--color-ink);font-size:.95rem;margin:0 0 .5rem;text-transform:uppercase}.project-models__columns{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.project-models__columns>div{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;padding:1rem}.site-footer{background:var(--color-ink);color:#fffc;padding-block:2rem}.site-footer__inner{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between}@media(max-width:820px){.hero__grid,.callout,.lesson-layout,.project-detail-layout{grid-template-columns:1fr}.callout--compact{align-items:start}.lesson-grid,.resource-grid,.resource-list,.help-path-grid,.debug-principles,.debug-fix__grid,.module-index__list,.module-card__grid{grid-template-columns:1fr}.lesson-sidebar,.project-sidebar{border-right:0;border-bottom:1px solid var(--color-border);padding-bottom:1.5rem;padding-right:0}.flex-playground__controls,.box-visualizer__controls,.dom-lab__grid,.a11y-lab__grid,.responsive-lab__controls,.form-lab__grid,.transition-lab__controls,.animation-lab__controls,.gsap-lab__controls,.image-lab__grid,.image-lab__metrics,.nav-lab__grid,.carousel-lab__grid,.interactive-notes,.teacher-notes__grid,.demo-guide__grid,.project-requirements,.project-milestones,.project-starter-kit{grid-template-columns:1fr}.project-starter-kit ul{justify-content:flex-start}.project-rubric dl,.project-models__columns{grid-template-columns:1fr}}@media(max-width:560px){.site-header{position:static}.site-header__inner{align-items:flex-start;flex-direction:column;padding-block:1rem}.site-nav{justify-content:flex-start}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}