*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font:17px/1.65 'Segoe UI',Arial,sans-serif}img{display:block;width:100%;height:auto}a{color:inherit;text-underline-offset:5px}a:hover{color:var(--accent)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button,input{border:1px solid var(--line);border-radius:8px}button{background:var(--accent);color:#fff;padding:10px 20px;font-weight:650}button:hover{filter:brightness(.93)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(38px,5vw,70px);line-height:1.06;letter-spacing:-2.6px;margin-bottom:25px}h2{font-size:30px;line-height:1.2;letter-spacing:-.8px}h3{font-size:23px;line-height:1.3;letter-spacing:-.4px}p{margin-bottom:20px}.wrap{max-width:1240px;margin:auto;padding:0 38px}.masthead{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:25px 0;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-weight:750;font-size:21px;letter-spacing:-.6px;display:flex;align-items:center;gap:11px}.brand-mark{display:grid;place-items:center;width:35px;height:35px;background:var(--accent);color:white;border-radius:9px;font:700 18px Consolas,monospace}.masthead nav{display:flex;flex-wrap:wrap;gap:25px;font-size:14px}.masthead nav a{text-decoration:none}.eyebrow{font:600 12px/1.5 Consolas,monospace;text-transform:uppercase;letter-spacing:1.7px;color:var(--accent);margin-bottom:20px}.intro{font-size:19px;line-height:1.7;color:var(--muted);max-width:620px}.button{display:inline-block;padding:12px 23px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;font-size:15px;font-weight:650}.button:hover{color:#fff}.text-link{font-size:14px;font-weight:600}.hero{padding:66px 0 64px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.hero h1{white-space:pre-line}.hero-visual{margin:0}.hero-visual img{border-radius:18px}.caption,figcaption{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.6}.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin:20px 0 28px}.section-head h2{margin-bottom:0}.section-head p{font-size:14px;margin:0;color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.story{text-decoration:none;display:block;min-width:0}.story .cover{aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:var(--tint);margin-bottom:20px}.story img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.story:hover img{transform:scale(1.025)}.story h3{margin:8px 0 12px}.story p{font-size:15px;color:var(--muted);margin-bottom:12px}.tag{font:600 11px/1.6 Consolas,monospace;text-transform:uppercase;letter-spacing:1px;color:var(--accent)}.read-link{font-size:13px;font-weight:650}.search{display:flex;flex-wrap:wrap;gap:15px;align-items:center;margin:0 0 28px}.search label{font-size:13px;color:var(--muted)}.search input{padding:10px 14px;background:white;color:#24313b;max-width:100%;width:290px}.empty{padding:20px;border:1px dashed var(--line)}.lab{margin:64px 0;padding:34px 38px;border-radius:14px;background:var(--tint)}.lab h2{font-size:27px;margin-bottom:12px}.lab p{color:var(--muted)}.lab-controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.lab-output{font-size:31px;font-weight:700;font-variant-numeric:tabular-nums}.secondary{background:transparent;color:var(--accent);border-color:var(--accent)}.lab-feedback{display:block;margin-top:16px;min-height:28px}.resources{margin:60px 0;display:grid;grid-template-columns:1fr 2fr;gap:40px;border-top:1px solid var(--line);padding-top:32px}.resources h2{font-size:24px}.resources ul{padding:0;margin:0;list-style:none}.resources li{border-bottom:1px solid var(--line);padding:12px 0}.resources a{font-size:15px;text-decoration:none;display:flex;justify-content:space-between;gap:16px}.resources a:after{content:'↗';color:var(--accent)}footer{border-top:1px solid var(--line);margin-top:65px;padding:28px 0 34px;display:flex;justify-content:space-between;gap:24px;color:var(--muted);font-size:12px}footer p{max-width:600px;margin:0}footer nav{display:flex;gap:20px;align-items:start}.reader{display:grid;grid-template-columns:minmax(0,800px) 225px;gap:65px;margin:42px auto 70px;max-width:1120px}.reader h1{font-size:clamp(34px,4.3vw,55px);letter-spacing:-1.6px}.reader h2{font-size:27px;margin-top:38px}.reader figure{margin:30px 0}.reader figure img{max-height:430px;object-fit:cover;border-radius:12px}.reader aside{padding-top:82px;font-size:13px}.reader aside strong{display:block;margin-bottom:14px}.reader aside a{display:block;margin-bottom:12px;text-decoration:none;color:var(--muted)}.reader .lede{font-size:20px;line-height:1.65;color:var(--muted)}.breadcrumb{font-size:12px;margin-bottom:28px;color:var(--muted)}.code{padding:24px;border-radius:10px;background:#172432;color:#dcebf4;overflow:auto;font:14px/1.8 Consolas,monospace;tab-size:2}.task{padding:25px 28px;background:var(--tint);border-left:4px solid var(--accent);margin:32px 0}.task strong{display:block;margin-bottom:8px}.task p{margin:0}.source{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:22px}.next{margin-top:35px;font-size:15px}.about{max-width:820px;margin:65px auto}.about h1{font-size:48px}.about h2{margin-top:35px;font-size:27px}.credits{font-size:14px}.credits li{margin-bottom:20px}.skip{position:absolute;left:10px;top:-100px;z-index:10;background:white;color:#111;padding:10px}.skip:focus{top:10px}[hidden]{display:none!important}
/* Lessons: a workbook, with blue print and yellow note paper. */
.lessons{--ink:#253041;--muted:#5c6776;--paper:#fbfcff;--line:#d9e1f0;--accent:#2449c9;--tint:#edf2ff}.lessons h1,.lessons h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-1.5px}.lessons .brand-mark{border-radius:4px;transform:rotate(-6deg)}.lessons .hero{grid-template-columns:1fr 1.05fr}.lesson-note{border-top:1px solid #e3d88b;border-bottom:1px solid #e3d88b;background:#fff7c9;color:#60561d;padding:12px 18px;font-size:13px;display:flex;gap:20px;justify-content:space-between}.lessons .cards{grid-template-columns:1fr;gap:0}.lessons .story{display:grid;grid-template-columns:185px 1fr;gap:28px;border-top:1px solid var(--line);padding:25px 0}.lessons .story .cover{margin:0;aspect-ratio:4/3;border-radius:5px}.lessons .story h3{font-size:24px;margin-top:3px}.lessons .story p{max-width:650px}.lessons .lab{background:#fff7c9;border-radius:4px;display:grid;grid-template-columns:1fr 1.1fr;gap:35px}.lessons .lab h2{font-size:30px}.lessons .lab-controls{align-content:start}.lessons .lab-feedback{grid-column:1/-1;font-size:14px}
/* Vue: workshop navigation and an app-like working surface. */
.vue{--ink:#263d34;--muted:#61776c;--paper:#fbfdfb;--line:#dbe8df;--accent:#087653;--tint:#e9f5ed}.vue .shell{display:grid;grid-template-columns:205px minmax(0,1fr);max-width:1440px;margin:auto;min-height:100vh}.vue .side{padding:35px 25px;border-right:1px solid var(--line);background:#eef5f0}.vue .side .brand{font-size:18px;align-items:start;line-height:1.35}.vue .side nav{display:grid;gap:13px;margin-top:42px;font-size:14px}.vue .side nav a{text-decoration:none;padding:8px 10px}.vue .side nav a:first-child{background:#dcece1;border-radius:6px}.vue .side small{display:block;color:var(--muted);margin-top:50px;font-size:12px;line-height:1.7}.vue .wrap{padding:0 40px;max-width:1180px;width:100%}.vue .masthead{padding:22px 0}.vue .masthead .brand{font:12px Consolas,monospace;color:var(--muted)}.vue h1{font-size:clamp(37px,4.1vw,59px);letter-spacing:-2.1px}.vue .hero{gap:30px;padding-top:48px;padding-bottom:45px}.vue .hero-visual img{border-radius:4px}.vue .cards{gap:20px}.vue .story{border:1px solid var(--line);border-radius:8px;padding:15px;background:#fff}.vue .story .cover{border-radius:4px}.vue .story h3{font-size:20px}.vue .lab{border:1px solid #a9d4bc;background:#f0f8f3;margin-top:42px}.vue .lab-controls{gap:12px}.vue .lab button{padding:6px 15px}.vue .price-row{display:flex;justify-content:space-between;gap:20px;max-width:450px;padding:11px 0;border-bottom:1px solid #c9e0d1;font-size:14px}.vue .price-row strong{font-size:24px;color:var(--accent)}.vue .resources{grid-template-columns:1fr}.vue .reader{grid-template-columns:minmax(0,1fr) 170px;gap:35px}.vue .reader h1{font-size:43px}
/* React: a violet notebook, with a live shared-state experiment. */
.react{--ink:#2d2944;--muted:#706b84;--paper:#fcfbff;--line:#e3deef;--accent:#6846c6;--tint:#f0eafb}.react .brand-mark{border-radius:50%;font-size:23px;font-weight:400}.react h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(39px,4.7vw,65px);letter-spacing:-2px}.react .hero{grid-template-columns:1.05fr 1fr;gap:70px}.react .hero-visual{background:#eee8fb;padding:25px;border-radius:20px;transform:rotate(1deg)}.react .hero-visual img{border-radius:0}.react .hero .lab{margin:0;background:#fff;padding:20px;border-radius:11px;box-shadow:0 5px 20px #4734750c}.react .hero .lab p{font-size:13px;margin-bottom:15px}.react .hero .lab h2{font-size:18px;margin-bottom:8px}.counter-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}.counter-pair button{display:flex;justify-content:space-between;align-items:center;background:#f5f1fc;color:#5131a7;border:1px solid #d6c9ed;font-size:13px}.counter-pair strong{font:700 27px Consolas,monospace}.react .cards{grid-template-columns:1fr 1fr}.react .story:first-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;background:#f0eafb;border-radius:15px;overflow:hidden;gap:35px;align-items:center}.react .story:first-child .cover{margin:0;border-radius:0;aspect-ratio:auto;height:280px}.react .story:first-child .story-copy{padding:25px 35px 25px 0}.react .story h3{font-size:27px}.react .reader h1{font-size:49px}.react .resources{background:#f3effb;border:0;padding:30px;border-radius:14px}
/* Collie: photography, spacious reading and a practical walk checklist. */
.collie{--ink:#283f37;--muted:#687c73;--paper:#fafcf9;--line:#dce4dd;--accent:#315f4b;--tint:#eaf0e8}.collie h1,.collie h2,.collie h3{font-family:Georgia,'Times New Roman',serif;font-weight:400}.collie .brand{font-family:Georgia,serif;font-size:24px;font-weight:400}.collie .brand-mark{border-radius:50%;font-size:18px}.collie .hero{padding:48px 0 55px;gap:55px;grid-template-columns:1fr 1.05fr}.collie .hero h1{font-size:clamp(44px,5vw,71px);letter-spacing:-2px}.collie .hero-visual img{height:480px;object-fit:cover;object-position:center 38%;border-radius:130px 130px 8px 8px}.collie .story .cover{border-radius:10px;aspect-ratio:4/3}.collie .story h3{font-size:27px}.collie .lab{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:0;overflow:hidden;background:#eaf0e8}.collie .lab>img{height:100%;min-height:360px;object-fit:cover}.collie .checklist-body{padding:35px 35px 35px 0}.collie .lab h2{font-size:33px}.checklist{display:grid;gap:13px}.checklist label{display:flex;gap:12px;align-items:start;font-size:15px;cursor:pointer}.checklist input{accent-color:var(--accent);margin-top:7px;width:17px;height:17px;flex-shrink:0}.collie .lab-feedback{font-size:13px}.collie .reader .lede{font-family:Georgia,serif;font-size:24px}.collie .reader figure img{object-position:center 35%}
@media(max-width:1050px){.vue .shell{grid-template-columns:170px 1fr}.vue .side{padding:28px 14px}.vue .wrap{padding:0 25px}.vue .hero{grid-template-columns:1fr}.vue .hero-visual{max-width:530px}.vue .cards{grid-template-columns:1fr}.vue .story{display:grid;grid-template-columns:170px 1fr;gap:20px}.vue .story .cover{margin:0}.reader{grid-template-columns:minmax(0,1fr) 180px;gap:35px}.hero{gap:35px}.collie .hero-visual img{height:420px}}
@media(max-width:740px){.wrap{padding:0 22px}.masthead{align-items:start;padding:22px 0;gap:15px;flex-direction:column}.masthead nav{gap:20px}.hero,.lessons .hero,.react .hero,.collie .hero{grid-template-columns:1fr;gap:30px;padding:38px 0}.hero h1{letter-spacing:-1.5px}.hero .intro{font-size:17px}.cards,.react .cards{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column;gap:10px}.lesson-note{display:block}.lesson-note span+span{display:none}.lessons .story{grid-template-columns:100px 1fr;gap:18px}.lessons .story h3{font-size:21px}.lessons .story .cover{aspect-ratio:1}.lessons .story p{font-size:14px}.lessons .lab{grid-template-columns:1fr;gap:10px}.lab{padding:25px;margin:40px 0}.resources{grid-template-columns:1fr;gap:10px;margin:40px 0}.reader,.vue .reader{display:flex;flex-direction:column;gap:0;margin:30px auto}.reader aside{order:-1;padding:0 0 20px;display:none}.reader h1,.react .reader h1,.vue .reader h1{font-size:36px}.reader .lede{font-size:18px}.reader h2{font-size:25px}.reader figure{margin:22px 0}.about{margin:40px 0}.about h1{font-size:37px}.vue .shell{display:block}.vue .side{display:none}.vue .masthead .brand{font-size:18px;font-weight:700;color:var(--ink)}.vue .wrap{padding:0 22px}.vue .hero{padding-top:35px}.vue .story{display:block}.vue .story .cover{margin-bottom:18px}.react .story:first-child{display:block;grid-column:auto;gap:0}.react .story:first-child .cover{height:220px}.react .story:first-child .story-copy{padding:22px}.react .hero-visual{transform:none;padding:16px}.react .story h3{font-size:24px}.collie .hero-visual img{height:350px;border-radius:90px 90px 8px 8px}.collie .lab{grid-template-columns:1fr;gap:0}.collie .lab>img{min-height:0;height:230px}.collie .checklist-body{padding:25px}.collie .hero h1{font-size:49px}footer{flex-direction:column;margin-top:42px}.code{font-size:12px;padding:18px}}
body:not(.collie) .story img{object-fit:contain}
.angular{--ink:#372638;--muted:#715d71;--paper:#fffafd;--line:#eddce6;--accent:#a2325c;--tint:#f8e9f1}.angular .brand-mark{border-radius:4px;background:#a2325c}.angular-hero{margin:34px 0 54px;background:#342135;color:#fff2f8;border-radius:10px;padding:45px;display:grid;grid-template-columns:1fr .9fr;gap:32px;align-items:center}.angular-hero h1{font-family:Consolas,monospace;font-size:clamp(39px,4.5vw,63px);letter-spacing:-3px}.angular-hero .eyebrow{color:#ffb9d3}.angular-hero .intro{color:#e4c9dc}.angular .cards{display:grid;grid-template-columns:1fr;gap:15px}.angular .story{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:25px;background:#fff;border:1px solid var(--line);padding:15px;border-radius:8px}.angular .story .cover{margin:0;aspect-ratio:4/3;border-radius:5px}.angular .story h3{margin:5px 0 8px}.angular .lab{border-left:4px solid var(--accent)}.angular .reader h1{font-family:Consolas,monospace;font-weight:650;letter-spacing:-1px}@media(max-width:740px){.angular-hero{grid-template-columns:1fr;padding:28px;margin:22px 0 35px}.angular-hero h1{font-size:38px;letter-spacing:-2px}.angular .story{grid-template-columns:1fr;gap:18px}.angular .story .cover{aspect-ratio:16/9}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}