@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#202a39;--muted:#657185;--blue:#2859dd;--line:#e1e6ee;--wash:#f6f8fc;--paper:#fff;--violet:#704ac2}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;font-size:17px;line-height:1.65}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}button,input{font:inherit}img{max-width:100%;height:auto;display:block}h1,h2,h3{font-family:Manrope,system-ui,sans-serif;line-height:1.15;letter-spacing:-.04em}h1{font-size:clamp(44px,5.4vw,76px);font-weight:800;margin:20px 0 25px}h2{font-size:clamp(30px,3.2vw,44px);margin:14px 0 22px}h3{font-size:23px;margin:15px 0}p{margin:0 0 18px}.wrap{max-width:1200px;margin:auto;padding:0 36px}.header{border-bottom:1px solid var(--line);background:#ffffffee;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.header-row{height:85px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-family:Manrope,sans-serif;font-weight:800;font-size:18px;letter-spacing:-.03em;white-space:nowrap}.brand:hover{text-decoration:none}.brand img{width:34px;height:34px}.nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:600}.nav a{color:var(--ink)}.nav .active{color:var(--blue)}.nav .nav-github{padding:9px 16px;border:1px solid var(--line);border-radius:8px}.hero{padding:76px 0 72px;display:grid;grid-template-columns:1.03fr 1fr;gap:58px;align-items:center}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:9px}.eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}.hero .lead{font-size:20px;line-height:1.65;color:#5a687b;max-width:570px}.hero h1 em{font-style:normal;color:var(--blue)}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}.btn{padding:13px 20px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink);font-weight:700;font-size:14px;transition:transform .16s,border-color .16s}.btn:hover{text-decoration:none;border-color:#9faecc;transform:translateY(-2px)}.btn.primary{background:var(--blue);border-color:var(--blue);color:white}.text-link{font-size:14px;font-weight:700}.fine{font-size:12px;color:var(--muted);line-height:1.6}.hero .fine{margin-top:18px}.visual{border:1px solid #d5dcf0;background:#f6f8fe;border-radius:20px;padding:24px;position:relative;overflow:hidden}.visual .visual-label{display:flex;justify-content:space-between;font-size:11px;color:#526385;text-transform:uppercase;letter-spacing:.12em;margin-bottom:24px;font-weight:700}.visual-stages{display:grid;grid-template-columns:1fr 1fr;gap:12px}.visual-stages .stage{border:1px solid #d8e0ef;border-radius:12px;background:white;padding:18px;font-size:13px;line-height:1.55}.stage b{display:block;font-size:14px;color:#273853;margin-bottom:6px}.stage span{color:#637185}.stage small{display:block;font-size:10px;letter-spacing:.12em;font-weight:700;color:#6f7d97;margin-bottom:8px}.stage.blue{background:#e8f0ff}.stage.yellow{background:#fff0c8;border-color:#e9d388}.stage.violet{background:#efe9fb}.stage.green{background:#e3f2ed}.visual-note{display:flex;gap:14px;align-items:center;margin-top:20px;border-top:1px solid #dce3f0;padding-top:18px}.mini-face{width:47px;height:45px;flex-shrink:0;background:#202e52;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:12px}.mini-face:before,.mini-face:after{content:'';height:10px;width:5px;border-radius:3px;background:#a4edc7;transform:rotate(10deg)}.visual-note p{font-size:12px;color:#526385;line-height:1.5;margin:0}.ribbon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;font-size:12px;font-weight:600;color:var(--muted)}.ribbon span:first-child{color:var(--ink)}.section{padding:78px 0}.section.soft{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.section-head{display:flex;gap:40px;align-items:end;justify-content:space-between;margin-bottom:32px}.section-head>div{max-width:720px}.section-head p{color:var(--muted);max-width:710px;margin-bottom:0}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.feature-card{padding:28px;border:1px solid var(--line);border-radius:14px;background:white}.feature-card .number{width:34px;height:34px;border-radius:9px;background:#e8eefc;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}.feature-card p{font-size:15px;color:var(--muted);margin:0}.diagram{padding:25px;background:white;border:1px solid var(--line);border-radius:14px}.diagram img{width:100%}.diagram figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:15px}.diagram{margin:36px 0 0}.resource-row{display:grid;grid-template-columns:1.12fr 1fr;border:1px solid var(--line);border-radius:16px;background:white;overflow:hidden}.resource-art{padding:30px;background:#eff4ff;display:flex;align-items:center}.resource-info{padding:38px}.tag{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);font-weight:700;display:inline-block}.resource-info h3{font-size:29px;line-height:1.3;margin:14px 0}.resource-info p{color:var(--muted);font-size:15px}.resource-info .meta{font-size:12px;color:#738093;margin-bottom:15px}.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.buddy-preview{background:#f3f0fc;border:1px solid #e2daef;border-radius:20px;padding:24px}.buddy-preview img{border-radius:10px;width:100%;image-rendering:auto}.buddy-preview figcaption{margin-top:12px;font-size:11px;line-height:1.5;color:#726389}.split .lead{color:var(--muted);font-size:18px}.link-list{margin:24px 0 0;list-style:none;padding:0}.link-list li{padding:13px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:25px;font-size:14px}.join{display:grid;grid-template-columns:1.5fr 1fr;gap:70px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:44px;background:#f4f7ff}.join h2{margin:10px 0 20px}.join p{font-size:16px;color:var(--muted)}.join-actions{display:flex;flex-direction:column;gap:12px}.join-actions .fine{margin:3px 0 0;text-align:center}.footer{padding:38px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.footer-row{display:flex;justify-content:space-between;gap:30px}.footer p{margin-bottom:7px}.footer-links{display:flex;flex-wrap:wrap;gap:20px;align-items:start}.footer a{color:#4c5d79}.buddy-site{--blue:#6c46bd;--line:#e6e0ec}.buddy-site .hero{grid-template-columns:.9fr 1.2fr;gap:46px}.buddy-site .hero h1{font-size:clamp(48px,5.1vw,73px)}.buddy-site .eyebrow{color:var(--violet)}.buddy-site .hero-demo{margin:0;background:#f1ecfb;border:1px solid #dfd6f0;border-radius:22px;padding:22px}.hero-demo img{width:100%;border-radius:12px}.hero-demo figcaption{font-size:11px;color:#796b89;margin-top:14px;line-height:1.55}.behavior-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.behavior{border-radius:14px;padding:28px;background:#f8f5fe;border:1px solid #e5dff0}.behavior:nth-child(2){background:#fff5e9;border-color:#f0e1cd}.behavior:nth-child(3){background:#eaf6f0;border-color:#d1e8dc}.behavior .status{display:inline-block;font-family:monospace;font-size:11px;padding:5px 10px;border:1px solid #d9cce9;border-radius:5px;color:#67557c}.behavior p{font-size:15px;color:#655f70;margin-bottom:0}.simple-table{width:100%;border-collapse:collapse;font-size:15px}.simple-table th{text-align:left;min-width:145px;font-weight:600;color:var(--ink);vertical-align:top}.simple-table th,.simple-table td{border-bottom:1px solid var(--line);padding:18px 10px 18px 0}.simple-table td{color:var(--muted)}.check-note{border-left:3px solid #ccbddf;padding:12px 20px;background:#f6f2fc;color:#71627e;font-size:13px;margin-top:24px}.reading-hero{max-width:820px;padding:66px 0 42px}.reading-hero h1{font-size:clamp(38px,4.3vw,57px);line-height:1.2}.reading-hero p{color:var(--muted);font-size:20px}.crumbs{font-size:13px;color:var(--muted);margin-bottom:22px}.article-meta{font-size:13px;color:var(--muted);padding-bottom:28px;border-bottom:1px solid var(--line)}.article-body{max-width:820px;padding:32px 0 75px;font-size:18px;line-height:1.8}.article-body h2{font-size:30px;margin:45px 0 18px}.article-body h3{font-size:23px;line-height:1.3;margin:32px 0 16px}.article-body p{margin-bottom:22px}.article-body img{margin:30px auto;border:1px solid var(--line);border-radius:8px}.article-body pre{overflow-x:auto;border:1px solid var(--line);background:#f5f7fa;padding:22px;border-radius:8px;font-size:12px;line-height:1.6}.article-body code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:.81em;background:#f1f3f7;border-radius:3px;padding:2px 4px}.article-body pre code{padding:0;background:none}.article-body blockquote{border-left:3px solid #a9bae8;margin:25px 0;padding:12px 24px;color:var(--muted);background:var(--wash)}.article-body table{font-size:14px;border-collapse:collapse;width:100%;display:block;overflow-x:auto}.article-body th,.article-body td{padding:12px;border:1px solid var(--line);text-align:left}.article-body li{margin-bottom:9px}.article-source{padding:20px;border:1px solid var(--line);background:var(--wash);font-size:14px;line-height:1.6;margin-top:30px}.article-body h1{display:none}.article-body>p:first-child{font-size:14px}.learning-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.learning-card{display:block;padding:30px;border:1px solid var(--line);border-radius:14px;color:var(--ink)}.learning-card:hover{text-decoration:none;border-color:#a6b8dc}.learning-card h3{font-size:25px}.learning-card p{color:var(--muted);font-size:15px}.learning-card span{font-size:13px;font-weight:700;color:var(--blue)}.library-note{margin-top:28px;font-size:14px;color:var(--muted)}.empty-hero{padding:80px 0}a:focus-visible,button:focus-visible{outline:3px solid #91b0ff;outline-offset:4px}.skip{position:absolute;top:-100px;left:20px;background:white;padding:10px;z-index:40}.skip:focus{top:8px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}@media(max-width:950px){.hero,.buddy-site .hero,.split{grid-template-columns:1fr;gap:32px}.hero{padding:48px 0}.hero h1{max-width:770px}.hero .lead{max-width:690px}.visual{max-width:690px}.hero-demo{max-width:750px}.nav{gap:18px}.nav .nav-github{display:none}.feature-grid,.behavior-grid{grid-template-columns:1fr}.resource-row,.join{grid-template-columns:1fr}.resource-art{padding:20px}.join{gap:18px}.split{gap:30px}.section{padding:58px 0}.ribbon{flex-wrap:wrap;gap:10px 25px}.footer-row{flex-direction:column}.section-head{align-items:start;flex-direction:column;gap:16px}}@media(max-width:600px){.wrap{padding:0 22px}.header-row{height:auto;min-height:76px;padding:16px 22px;gap:14px;flex-wrap:wrap}.brand{font-size:16px}.brand img{width:30px;height:30px}.nav{font-size:12px;gap:18px;width:100%}.hero{padding:38px 0 46px}.hero h1,.buddy-site .hero h1{font-size:43px}.hero .lead{font-size:18px}.actions{gap:10px}.btn{padding:12px 16px;font-size:13px}.visual{padding:18px}.visual-stages .stage{padding:14px}.visual-note{align-items:start}.section{padding:48px 0}.ribbon{font-size:11px}.resource-info{padding:25px}.resource-info h3{font-size:25px}.diagram{padding:8px;border-radius:9px}.diagram figcaption{font-size:11px;padding:6px}.join{padding:28px}.learning-grid{grid-template-columns:1fr}.reading-hero{padding:38px 0 24px}.reading-hero h1{font-size:38px}.article-body{font-size:17px}.article-body pre{padding:14px}.simple-table th{min-width:115px}.buddy-site .hero-demo{padding:12px}.footer-links{gap:15px}.feature-card,.behavior{padding:23px}}