:root{color-scheme:light dark;--color-brand: #41b649;--color-brand-dark: #24752b;--color-brand-strong: #166534;--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;--color-danger: #9c4636;--color-danger-soft: rgb(156 70 54 / .12);--color-success-soft: rgb(48 178 74 / .14);--color-code-surface: #101914;--color-code-text: #f4fff6;--color-header-surface: rgb(255 255 255 / .92);--color-focus-ring: rgb(65 182 73 / .24);--color-hero-glow: rgb(65 182 73 / .14);--color-grid-line: rgb(48 178 74 / .12);--color-overlay-light: rgb(255 255 255 / .72);--color-inverse-text: #ffffff;--color-footer-surface: #17201a;--color-footer-text: rgb(255 255 255 / .82);--color-footer-strong: #ffffff;--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)}:root[data-theme=dark]{color-scheme:dark;--color-brand: #45c957;--color-brand-dark: #7ee08a;--color-brand-strong: #2fad40;--color-ink: #f4fbf5;--color-text: #d9e5dc;--color-muted: #a5b5aa;--color-surface: #08140d;--color-surface-soft: #0d1f14;--color-surface-raised: #12271a;--color-border: #294333;--color-accent: #8ab8ff;--color-danger: #ffad9f;--color-danger-soft: rgb(255 173 159 / .14);--color-success-soft: rgb(69 201 87 / .14);--color-code-surface: #030805;--color-code-text: #edfff0;--color-header-surface: rgb(8 20 13 / .9);--color-focus-ring: rgb(69 201 87 / .36);--color-hero-glow: rgb(69 201 87 / .18);--color-grid-line: rgb(69 201 87 / .14);--color-overlay-light: rgb(244 251 245 / .08);--color-inverse-text: #08140d;--color-footer-surface: #030805;--color-footer-text: #d9e5dc;--color-footer-strong: #f4fbf5;--shadow-subtle: 0 18px 44px rgb(0 0 0 / .34)}*,*:before,*:after{box-sizing:border-box}html{background:var(--color-surface);font-family:var(--font-sans);scroll-behavior:smooth}body{background:var(--color-surface);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:var(--color-code-surface);border-radius:8px;color:var(--color-code-text);font-size:.9rem;line-height:1.55;margin:0;overflow-x:auto;padding:1rem}code{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace}input,select,textarea{background:var(--color-surface-raised)}ul,ol{margin:0;padding-left:1.25rem}.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}.container{margin-inline:auto;max-width:1120px;padding-inline:clamp(1rem,3vw,2rem);width:100%}.skip-link{background:var(--color-ink);color:var(--color-surface);left:1rem;padding:.65rem .85rem;position:fixed;top:1rem;transform:translateY(-150%);z-index:10}.skip-link:focus{transform:translateY(0)}@media(prefers-reduced-motion:no-preference){::view-transition-old(root){animation:page-fade-out .14s ease both}::view-transition-new(root){animation:page-fade-in .18s ease both}}@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}@keyframes page-fade-out{0%{opacity:1}to{opacity:0}}@keyframes page-fade-in{0%{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}.code-copy{position:relative}.lesson-figure{display:grid;gap:.75rem;margin:1.5rem 0}.lesson-figure img{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:6px;display:block;height:auto;width:100%}.lesson-figure figcaption{color:var(--color-muted);font-size:.9rem;line-height:1.5}.lesson-table-wrapper{border:1px solid var(--color-border);border-radius:6px;margin:1.5rem 0;overflow-x:auto}.lesson-table{border-collapse:collapse;min-width:42rem;width:100%}.lesson-table th,.lesson-table td{border-bottom:1px solid var(--color-border);padding:.8rem 1rem;text-align:left;vertical-align:top}.lesson-table th{background:var(--color-surface-soft);color:var(--color-ink);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}.lesson-table tr:last-child td{border-bottom:0}.lesson-content-sections p code,.lesson-content-sections li code,.lesson-table code,#practice li code{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:4px;color:var(--color-ink);font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.88em;padding:.1rem .25rem}.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:var(--color-inverse-text)}.site-header{background:var(--color-header-surface);border-bottom:1px solid var(--color-border);backdrop-filter:blur(16px);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:1 1 auto;flex-wrap:wrap;gap:.75rem 1.25rem;justify-content:flex-end;min-width:0}.site-actions{align-items:center;display:flex;flex-wrap:wrap;gap:.85rem;justify-content:flex-end;min-width:0}.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}.site-nav-toggle{background:var(--color-surface-raised);border:2px solid var(--color-brand);border-radius:4px;color:var(--color-brand-dark);cursor:pointer;display:none;font:inherit;font-size:.82rem;font-weight:900;letter-spacing:.04em;padding:.52rem .75rem;text-transform:uppercase}.site-nav-toggle:hover,.site-nav-toggle:focus-visible{background:var(--color-brand);color:var(--color-inverse-text);outline:3px solid var(--color-focus-ring);outline-offset:2px}.theme-toggle{align-items:center;background:transparent;border:1px solid color-mix(in srgb,var(--color-ink),transparent 78%);border-radius:999px;color:var(--color-ink);cursor:pointer;display:inline-flex;font:inherit;gap:.1rem;height:30px;justify-content:space-between;padding:.18rem;position:relative;width:58px}.theme-toggle:before{background:var(--color-ink);border-radius:50%;content:"";height:22px;left:3px;position:absolute;top:3px;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;width:22px}.theme-toggle:hover,.theme-toggle:focus-visible{border-color:var(--color-brand);box-shadow:0 0 0 3px var(--color-focus-ring);outline:0}.theme-toggle__icon{align-items:center;color:var(--color-ink);display:block;font-size:.78rem;height:22px;line-height:22px;position:relative;text-align:center;transition:color .2s ease;width:22px;z-index:1}.theme-toggle__sun{color:var(--color-surface)}.theme-toggle__moon{color:var(--color-muted)}:root[data-theme=dark] .theme-toggle{background:#f3cc5b14;border-color:color-mix(in srgb,var(--color-brand),transparent 55%)}:root[data-theme=dark] .theme-toggle:before{background:#f3cc5b;box-shadow:0 0 16px #f3cc5b73;transform:translate(28px)}:root[data-theme=dark] .theme-toggle__sun{color:var(--color-muted)}:root[data-theme=dark] .theme-toggle__moon{color:var(--color-surface)}.hero{background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-surface-soft) 72%),radial-gradient(circle at 82% 20%,var(--color-hero-glow),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 var(--color-focus-ring)}.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:var(--color-inverse-text)}.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:var(--color-success-soft);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__role{align-self:start;background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:999px;color:var(--color-muted);font-size:.72rem;font-weight:900;justify-self:start;letter-spacing:.04em;padding:.25rem .55rem;text-transform:uppercase}.lesson-card__role--core{background:var(--color-success-soft);border-color:var(--color-brand);color:var(--color-brand-dark)}.lesson-card__role--studio-support{background:color-mix(in srgb,var(--color-accent),transparent 86%);border-color:color-mix(in srgb,var(--color-accent),transparent 45%);color:var(--color-accent)}.lesson-card__role--reference,.lesson-card__role--stretch{background:var(--color-surface-raised)}.lesson-card__complete{align-self:start;background:var(--color-brand);border:1px solid var(--color-brand);border-radius:999px;color:var(--color-inverse-text);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{align-self:flex-start;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}.start-help-callout>p{align-self:center;margin-block-start:clamp(1rem,3vw,2.5rem)}.contact-instructor-callout>p,.submission-rule-callout>p{align-self:center}.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:var(--color-inverse-text);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:var(--color-inverse-text)}.button:hover,.button:focus{background:var(--color-brand-dark);border-color:var(--color-brand-dark);color:var(--color-surface)}.lesson-page{padding-block:clamp(3rem,7vw,6rem)}.lesson-layout{display:grid;gap:3rem;grid-template-columns:minmax(13rem,16rem) minmax(0,1fr)}.lesson-sidebar{border-right:1px solid var(--color-border);max-block-size:calc(100vh - 7rem);overflow:auto;padding-right:2rem;position:sticky;top:6rem}.lesson-sidebar__drawer{display:grid;gap:.85rem}.lesson-sidebar__summary{color:var(--color-ink);cursor:pointer;font-family:var(--font-display);font-weight:900}.lesson-sidebar__drawer:not([open])>:not(summary){display:none}.lesson-sidebar ul{display:grid;gap:.6rem;list-style:none;padding-left:0}.lesson-sidebar a{display:block;max-inline-size:100%;overflow-wrap:anywhere;word-break:break-word}.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:.75rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.flex-playground__controls label,.box-visualizer__controls label{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;color:var(--color-muted);display:grid;font-size:.72rem;font-weight:900;gap:.5rem;letter-spacing:.04em;padding:.75rem;text-transform:uppercase}.flex-playground__controls select,.flex-playground__controls input,.box-visualizer__controls select,.box-visualizer__controls input{accent-color:var(--color-brand);background:var(--color-surface-raised);border:2px solid var(--color-border);border-radius:4px;color:var(--color-ink);font:inherit;font-size:.95rem;font-weight:750;inline-size:100%;min-block-size:2.65rem;padding:.55rem .65rem}.flex-playground__controls select,.box-visualizer__controls select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-brand-dark) 50%),linear-gradient(135deg,var(--color-brand-dark) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .7rem) 50%;background-repeat:no-repeat;background-size:.34rem .34rem,.34rem .34rem;padding-inline-end:2rem}.flex-playground__controls input[type=range],.box-visualizer__controls input[type=range]{background:transparent;border:0;min-block-size:2.65rem;padding-inline:0}.flex-playground__controls input[type=range]::-webkit-slider-runnable-track,.box-visualizer__controls input[type=range]::-webkit-slider-runnable-track{background:color-mix(in srgb,var(--color-brand),var(--color-surface-raised) 72%);block-size:.45rem;border-radius:999px}.flex-playground__controls input[type=range]::-webkit-slider-thumb,.box-visualizer__controls input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--color-brand);block-size:1.25rem;border:2px solid var(--color-surface-raised);border-radius:999px;box-shadow:0 0 0 1px var(--color-brand-dark);inline-size:1.25rem;margin-block-start:-.4rem}.flex-playground__controls input[type=range]::-moz-range-track,.box-visualizer__controls input[type=range]::-moz-range-track{background:color-mix(in srgb,var(--color-brand),var(--color-surface-raised) 72%);block-size:.45rem;border-radius:999px}.flex-playground__controls input[type=range]::-moz-range-thumb,.box-visualizer__controls input[type=range]::-moz-range-thumb{background:var(--color-brand);block-size:1.25rem;border:2px solid var(--color-surface-raised);border-radius:999px;box-shadow:0 0 0 1px var(--color-brand-dark);inline-size:1.25rem}.flex-playground__controls select:focus-visible,.flex-playground__controls input:focus-visible,.box-visualizer__controls select:focus-visible,.box-visualizer__controls input:focus-visible{border-color:var(--color-brand);box-shadow:0 0 0 3px var(--color-focus-ring);outline:0}.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:var(--color-inverse-text)}.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:var(--color-inverse-text);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:var(--color-inverse-text);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:var(--color-muted)}.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:var(--color-success-soft);border-color:var(--color-brand)}.a11y-lab__checklist li[data-state=fail]{background:var(--color-danger-soft);border-color:var(--color-danger)}.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:var(--color-surface);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:var(--color-danger)}.form-lab__error{color:var(--color-danger);font-size:.9rem;font-weight:800}.form-lab__preview button{background:var(--color-brand);border:2px solid var(--color-brand);border-radius:4px;color:var(--color-inverse-text);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:var(--color-success-soft);border-color:var(--color-brand)}.form-lab__checklist li[data-state=fail]{background:var(--color-danger-soft);border-color:var(--color-danger)}.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:var(--color-surface)}.transition-lab__box{align-content:center;background:var(--color-brand);border:2px solid var(--color-brand-dark);border-radius:8px;color:var(--color-inverse-text);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:var(--color-surface)}.animation-lab__target{align-content:center;background:var(--color-brand);border:2px solid var(--color-brand-dark);border-radius:999px;color:var(--color-inverse-text);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:var(--color-surface)}.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:var(--color-inverse-text);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:var(--color-surface);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-block:0;margin-inline: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:var(--color-inverse-text);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:var(--color-surface);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:var(--color-success-soft);border-color:var(--color-brand)}.nav-lab__checklist li[data-state=fail]{background:var(--color-danger-soft);border-color:var(--color-danger)}.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;display:grid;min-block-size:14rem;overflow:hidden;padding:1.25rem;position:relative}.carousel-lab__viewport:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}.carousel-lab__slide{display:grid;gap:.75rem;grid-area:1 / 1;opacity:0;pointer-events:none;transform:translate(105%);transition:opacity .22s ease,transform .32s ease}.carousel-lab__slide.is-before{transform:translate(-105%)}.carousel-lab__slide.is-active{opacity:1;pointer-events:auto;transform:translate(0)}.carousel-lab__slide h3{font-size:clamp(1.6rem,4vw,2.5rem);margin:0}@media(prefers-reduced-motion:reduce){.carousel-lab__slide{transition:none}}.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:var(--color-surface)}.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:var(--color-success-soft);border-color:var(--color-brand)}.carousel-lab__checklist li[data-state=fail]{background:var(--color-danger-soft);border-color:var(--color-danger)}@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,var(--color-grid-line) 1px,transparent 1px),linear-gradient(0deg,var(--color-grid-line) 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:4.25rem 1rem 1rem;position:relative}.flex-playground__axis{align-items:center;border-radius:999px;color:var(--color-surface);display:inline-flex;font-size:.72rem;font-weight:800;letter-spacing:.04em;padding:.3rem .55rem;position:absolute;text-transform:uppercase;z-index:1}.flex-playground__axis:after{color:currentColor;display:inline-block;font-size:.78rem;font-weight:900;margin-inline-start:.3rem}.flex-playground__axis--main{background:var(--color-brand-dark);inset-block-start:.75rem;inset-inline-start:1rem}.flex-playground__axis--main:after{content:"->"}.flex-playground__axis--cross{background:var(--color-ink);inset-block-start:.75rem;inset-inline-start:min(17rem,48%)}.flex-playground__axis--cross:after{content:"v"}.flex-playground__stage[data-direction=column] .flex-playground__axis--main:after{content:"v"}.flex-playground__stage[data-direction=column] .flex-playground__axis--cross:after{content:"->"}.flex-playground__item{align-content:center;background:var(--color-brand);border:2px solid var(--color-brand-dark);border-radius:6px;color:var(--color-inverse-text);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,var(--color-grid-line) 1px,transparent 1px),linear-gradient(0deg,var(--color-grid-line) 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:var(--color-success-soft);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:var(--color-overlay-light)}.box-visualizer__content{align-content:center;background:var(--color-brand);color:var(--color-inverse-text);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:var(--color-surface);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;grid-template-rows:auto minmax(3.1rem,auto) 1fr;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;line-height:1.15;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)}.curriculum-pathways,.lesson-role-note{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:1.25rem;margin-block:1.5rem 2rem;padding:clamp(1.25rem,3vw,1.75rem)}.curriculum-pathways h2,.lesson-role-note h2{font-size:clamp(1.45rem,3vw,2rem);margin:0}.curriculum-pathways p,.lesson-role-note p{margin:0}.pathway-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}.pathway-grid article{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.45rem;padding:1rem}.pathway-grid h3{font-size:1rem;margin:0}.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;align-self:stretch;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-support-callout{border-color:var(--color-brand);grid-template-columns:1fr}.project-support-callout h2{font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.12;max-width:42rem}.project-support-callout p:not(.eyebrow){max-width:42rem}.project-support-callout .button-row{margin-top:.5rem}.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:1fr;padding:clamp(1.1rem,3vw,1.5rem)}.project-starter-kit h2{font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.12;max-width:34rem}.project-starter-kit p:not(.eyebrow){max-width:36rem}.project-starter-kit ul{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:flex-start;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}.planner-actions{margin-bottom:1.5rem}.planner-sheet{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.planner-sheet section{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:8px;min-height:11rem;padding:1rem}.planner-sheet h2{font-size:1.2rem;margin:0 0 .5rem}.planner-sheet p{color:var(--color-muted);margin:0}.site-footer{background:var(--color-footer-surface);color:var(--color-footer-text);padding-block:2rem}.site-footer__inner{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between}.site-footer p:first-child{color:var(--color-footer-strong);font-weight:900}@media(max-width:820px){.hero__grid,.callout,.lesson-layout,.project-detail-layout{grid-template-columns:minmax(0,1fr)}.callout--compact{align-items:start}.start-help-callout>p{margin-block-start:0}.lesson-grid,.resource-grid,.resource-list,.help-path-grid,.debug-principles,.debug-fix__grid,.pathway-grid,.module-index__list,.module-card__grid{grid-template-columns:1fr}.lesson-sidebar{border-right:0;border-bottom:1px solid var(--color-border);max-block-size:none;overflow:visible;padding-bottom:1.5rem;padding-right:0;position:static}.lesson-sidebar__drawer{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:8px;padding:.85rem 1rem}.lesson-sidebar__drawer .eyebrow{display:none}.lesson-sidebar__drawer[open] .lesson-sidebar__summary{margin-bottom:.85rem}.lesson-content,.lesson-meta,.lesson-meta div,.lesson-toolbar,.lesson-toolbar div,.lesson-on-this-page{min-width:0}.lesson-toolbar a,.lesson-on-this-page a{overflow-wrap:anywhere}.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,.planner-sheet{grid-template-columns:1fr}}@media(max-width:560px){.site-header{position:static}.site-header__inner{align-items:flex-start;flex-direction:column;position:relative;padding-right:5rem;padding-block:1rem}.site-actions{align-items:flex-start;display:grid;grid-template-columns:auto auto;justify-content:space-between;width:100%}.site-nav-toggle{display:inline-flex;justify-content:center}.site-nav{flex:1 1 14rem;gap:.65rem 1rem;grid-column:1 / -1;justify-content:flex-start;order:3;width:100%}.site-nav[data-mobile-nav=closed]{display:none}.site-nav[data-mobile-nav=open]{display:flex}.theme-toggle{position:absolute;right:clamp(1rem,3vw,2rem);top:1.15rem;justify-self:end;margin-left:0}.lesson-meta{display:grid;grid-template-columns:1fr}.lesson-toolbar{align-items:flex-start;flex-direction:column}.lesson-toolbar div{display:grid;gap:.5rem;width:100%}.lesson-on-this-page ul{display:grid}}@media(min-width:821px){.lesson-sidebar__summary{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media print{.site-header,.site-footer,.planner-actions,.skip-link{display:none}body{background:#fff;color:#000}.section{padding-block:0}.planner-sheet{grid-template-columns:1fr 1fr}.planner-sheet section{break-inside:avoid;min-height:2.2in}}.grid-lab,.practice-lab{display:grid;gap:1.25rem;margin-block:2rem;padding:1.25rem;border:1px solid var(--color-border);border-radius:.5rem;background:color-mix(in srgb,var(--color-surface) 88%,var(--color-accent) 12%)}.grid-lab__grid,.practice-lab__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(16rem,.75fr);gap:1rem;align-items:start}.grid-lab__stage-wrap,.grid-lab__controls,.practice-lab__stage,.practice-lab__panel{min-width:0;border:1px solid var(--color-border);border-radius:.5rem;background:var(--color-background)}.grid-lab__stage-wrap,.practice-lab__stage{padding:1rem}.grid-lab__stage{display:grid;min-height:20rem;padding:1rem;border-radius:.375rem;background-color:var(--color-surface-raised);background-image:linear-gradient(var(--color-border) 1px,transparent 1px),linear-gradient(90deg,var(--color-border) 1px,transparent 1px);background-size:3rem 3rem}.grid-lab__stage[data-grid-lines=false]{background-image:none}.grid-lab__stage[data-pattern=gallery] .grid-lab__item{aspect-ratio:1}.grid-lab__stage[data-pattern=sidebar] .grid-lab__item:not(:first-child){min-height:5rem}.grid-lab__stage[data-pattern=sidebar] .grid-lab__item:first-child{min-height:16rem}.grid-lab__item{display:grid;min-height:8rem;place-items:center;border:2px solid var(--color-brand);border-radius:.375rem;background:var(--color-brand-soft);color:var(--color-ink);font-family:var(--font-display);font-weight:900;text-align:center}.grid-lab__item.is-spanning{grid-column:span 2}.grid-lab__item span{font-size:1.5rem}.grid-lab__item strong{display:block;font-size:.85rem}.grid-lab__controls,.practice-lab__panel{display:grid;gap:.85rem;padding:1rem}.grid-lab__controls label,.practice-lab label{display:grid;gap:.45rem;font-weight:700}.grid-lab__controls label:has(input[type=checkbox]),.practice-lab__panel label:has(input[type=checkbox]){align-items:center;display:flex;gap:.55rem}.grid-lab__controls select,.grid-lab__controls input[type=range],.practice-lab select,.practice-lab input:not([type=checkbox]){width:100%}.grid-lab__controls input[type=checkbox]{accent-color:var(--color-brand)}.grid-lab__controls select:disabled,.grid-lab__controls input:disabled{cursor:not-allowed;opacity:.55}.practice-lab__actions{display:flex;flex-wrap:wrap;gap:.5rem}.practice-lab__actions button,.practice-lab button{min-height:2.5rem}.practice-lab__status{margin:0;padding:.75rem;border-radius:.375rem;background:color-mix(in srgb,var(--color-background) 82%,var(--color-accent) 18%)}.debug-card{display:grid;gap:.75rem;max-width:24rem;padding:1rem;border:2px solid var(--color-accent);border-radius:.5rem;background:var(--color-surface)}.debug-card.is-plain{border-color:transparent;background:transparent}.debug-card.needs-selector-fix{border-style:dashed;border-color:var(--color-border)}.debug-card__image{display:grid;min-height:8rem;place-items:center;border-radius:.375rem;background:linear-gradient(135deg,#73d36b,#7db7ff);color:#06140d;font-weight:800}.debug-card__image.is-missing{border:2px dashed var(--color-border);background:transparent;color:var(--color-text)}.debug-card__details{margin:0;padding:.75rem;border-radius:.375rem;background:color-mix(in srgb,var(--color-accent) 22%,transparent)}.devtools-page{display:grid;gap:1rem}.devtools-page header,.devtools-page article,.devtools-page a{border:2px solid color-mix(in srgb,var(--lab-accent, var(--color-accent)) 35%,var(--color-border));border-radius:.5rem;transition:border-color .16s ease,box-shadow .16s ease,padding .16s ease}.devtools-page a{display:inline-flex;width:fit-content;padding:.5rem .75rem}.devtools-page .is-inspected{border-color:var(--lab-accent, var(--color-accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--lab-accent, var(--color-accent)) 24%,transparent)}.token-preview{--token-accent: var(--color-accent);--token-radius: 8px;--token-space: 16px;display:grid;gap:var(--token-space)}.token-preview article,.token-preview input{border:2px solid var(--token-accent);border-radius:var(--token-radius)}.token-preview article{display:grid;gap:var(--token-space);padding:var(--token-space);background:var(--color-surface)}.token-preview button{border-radius:var(--token-radius);background:var(--token-accent);color:#06140d}.performance-meter{display:grid;gap:1rem}.performance-meter>div{display:grid;gap:.4rem}.performance-meter strong{font-size:clamp(1.75rem,3vw,2.5rem)}.performance-meter meter{width:100%;height:1rem}.states-preview{display:grid;gap:1rem;align-content:start}.states-preview button{width:fit-content;background:#2457d6;color:#fff;transition:background-color .16s ease,transform .16s ease,opacity .16s ease}.states-preview[data-state=hover] button,.states-preview[data-state=focus] button{background:#1742a4}.states-preview[data-state=focus] button{outline:3px solid currentColor;outline-offset:3px}.states-preview[data-state=active] button{transform:translateY(2px)}.states-preview[data-state=disabled] button,.states-preview[data-state=loading] button{cursor:not-allowed;opacity:.6}.states-preview[data-state=error] input{border-color:#ff7b72}.states-preview[data-state=success] [data-state-message]{color:#73d36b}.states-preview[data-state=error] [data-state-message]{color:#ffb4ad}.lesson-page,.lesson-layout,.lesson-content,.lesson-content>*,.lesson-content section,.lesson-toolbar,.lesson-toolbar>*,.lesson-on-this-page,.teacher-notes,.demo-guide,.practice-lab,.practice-lab__grid,.practice-lab__stage,.practice-lab__panel{min-width:0}.lesson-content p,.lesson-content li,.lesson-content dd,.demo-guide,.practice-lab{overflow-wrap:anywhere}.practice-lab pre,.demo-guide pre,.lesson-content pre{max-width:100%;overflow-x:auto}@media(max-width:820px){.grid-lab__grid,.practice-lab__grid,.interactive-notes{grid-template-columns:1fr}}@media(max-width:560px){.lesson-table{min-width:0;table-layout:fixed}.lesson-table th,.lesson-table td{overflow-wrap:anywhere;padding-inline:.65rem}}.code-copy{max-width:100%;min-width:0;overflow:hidden}.code-copy pre{max-width:100%;overflow-x:auto}.astro-route-announcer{position:absolute;left:0;top:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;width:1px;height:1px}