:root{--paper:#fbf9f4;--paper-raised:#fff;--ink:#1f2421;--ink-soft:#4a544d;--ink-faint:#7b857d;--line:#e7e2d6;--line-strong:#d6cfbe;--pass:#2e7d52;--pass-soft:#e6f0e9;--fail:#c0392b;--fail-soft:#f7e7e4;--amber:#b47216;--amber-soft:#f6ecd9;--info:#2b6cb0;--info-soft:#e4eef8;--code-bg:#1c2620;--code-fg:#e9e6dd;--code-comment:#7e9a8a;--code-keyword:#8fd7a0;--code-string:#e6c884;--code-number:#d99ca6;--code-fn:#88c0d0;--code-punct:#9aa69e;--font-display:"Fraunces", Georgia, "Times New Roman", serif;--font-body:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--radius:12px;--radius-sm:8px;--maxw:760px;--sidebar-w:300px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:17px;line-height:1.7}a{color:var(--pass);border-bottom:1px solid color-mix(in srgb, var(--pass) 30%, transparent);text-decoration:none;transition:border-color .15s}a:hover{border-color:var(--pass)}h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);letter-spacing:-.01em;font-weight:500;line-height:1.2}code,pre,kbd{font-family:var(--font-mono)}::selection{background:var(--pass-soft)}*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}.layout{min-height:100vh}.topbar{z-index:30;background:color-mix(in srgb, var(--paper) 88%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);align-items:center;gap:14px;height:64px;padding:0 22px;display:flex;position:sticky;top:0}.brand{border:none;align-items:center;gap:12px;display:flex}.brand-mark{background:var(--ink);width:38px;height:38px;color:var(--paper);font-family:var(--font-display);border-radius:10px;place-items:center;font-size:20px;display:grid}.brand-text{line-height:1.15;font-family:var(--font-display);color:var(--ink);flex-direction:column;font-size:18px;display:flex}.brand-text small{font-family:var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-size:11px}.topbar-repo{color:var(--pass);border:1px solid var(--pass-soft);background:var(--pass-soft);border-radius:999px;margin-left:auto;padding:6px 12px;font-size:13px;font-weight:500}.topbar-repo:before{content:"";background:var(--pass);vertical-align:middle;border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block}.nav-toggle{border:1px solid var(--line-strong);cursor:pointer;width:38px;height:38px;color:var(--ink);background:0 0;border-radius:8px;place-items:center;font-size:16px;transition:border-color .12s,background .12s;display:grid}.nav-toggle:hover{border-color:var(--ink);background:var(--paper-raised)}.body{grid-template-columns:var(--sidebar-w) 1fr;align-items:start;transition:grid-template-columns .24s;display:grid}.layout.nav-closed .body{grid-template-columns:0 1fr}.sidebar{border-right:1px solid var(--line);height:calc(100vh - 64px);position:sticky;top:64px;overflow:hidden auto}.sidebar-inner{width:var(--sidebar-w);padding:28px 18px 60px;transition:opacity .18s}.layout.nav-closed .sidebar{border-right-color:#0000}.layout.nav-closed .sidebar-inner{opacity:0}.nav-backdrop{display:none}.nav-home,.nav-link{color:var(--ink-soft);border:none;border-radius:8px;padding:7px 12px;font-size:14.5px;transition:background .12s,color .12s;display:block}.nav-home{margin-bottom:8px;font-weight:500}.nav-link:hover,.nav-home:hover{background:var(--paper-raised);color:var(--ink)}.nav-link.active,.nav-home.active{background:var(--ink);color:var(--paper)}.nav-group{margin-top:22px}.nav-group-title{letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);align-items:center;gap:8px;padding:0 12px 8px;font-size:11px;font-weight:600;display:flex}.nav-group-num{font-family:var(--font-mono);color:var(--line-strong)}.content{justify-content:center;padding:56px 40px 120px;display:flex}.lesson,.welcome{width:100%;max-width:var(--maxw)}.lesson-eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);align-items:center;gap:12px;font-size:12px;display:flex}.lesson-part{color:var(--pass);font-weight:600}.lesson-minutes:before{content:"·";margin-right:12px}.lesson-title{margin:14px 0 0;font-size:42px}.lesson-tagline{font-family:var(--font-display);color:var(--ink-soft);margin:14px 0 0;font-size:21px;font-style:italic}.lesson-rule{border:none;border-top:1px solid var(--line);margin:34px 0}.prose-p{color:var(--ink-soft);margin:22px 0}.lesson-title+.prose-p,.prose-p:first-of-type{color:var(--ink)}.prose-h{margin:48px 0 8px;font-size:26px}.prose-list{color:var(--ink-soft);margin:22px 0;padding-left:22px}.prose-list li{margin:10px 0;padding-left:6px}.prose-list li::marker{color:var(--pass)}:where(.prose-p,.prose-list,.callout,td) code{background:var(--paper-raised);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:1px 6px;font-size:.86em}.codeblock{border-radius:var(--radius);background:var(--code-bg);border:1px solid #2c3a32;margin:26px 0;overflow:hidden;box-shadow:0 18px 40px -28px #0000008c}.codeblock-bar{background:#18211b;border-bottom:1px solid #2c3a32;justify-content:space-between;align-items:center;padding:9px 14px;display:flex}.codeblock-name{font-family:var(--font-mono);color:var(--code-comment);font-size:12px}.codeblock-copy{font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--code-comment);cursor:pointer;background:0 0;border:1px solid #2c3a32;border-radius:6px;padding:4px 9px;font-size:11px;transition:color .15s,border-color .15s}.codeblock-copy:hover{color:var(--code-keyword);border-color:var(--code-keyword)}.codeblock pre{margin:0;padding:18px;font-size:13.5px;line-height:1.75;overflow-x:auto}.codeblock code{color:var(--code-fg);white-space:pre}.codeblock figcaption{color:var(--code-comment);background:#18211b;border-top:1px solid #2c3a32;padding:11px 16px;font-size:13px;font-style:italic}.tok-comment{color:var(--code-comment);font-style:italic}.tok-string{color:var(--code-string)}.tok-number{color:var(--code-number)}.tok-keyword{color:var(--code-keyword)}.tok-fn{color:var(--code-fn)}.tok-punct{color:var(--code-punct)}.tok-plain{color:var(--code-fg)}.callout{border-radius:var(--radius);border:1px solid var(--line);background:var(--paper-raised);border-left-width:4px;margin:26px 0;padding:16px 20px}.callout p{color:var(--ink);margin:0}.callout-label{letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;font-size:11px;font-weight:700}.callout-tip{border-left-color:var(--pass);background:var(--pass-soft)}.callout-tip .callout-label{color:var(--pass)}.callout-key{border-left-color:var(--ink)}.callout-key .callout-label{color:var(--ink)}.callout-note{border-left-color:var(--info);background:var(--info-soft)}.callout-note .callout-label{color:var(--info)}.callout-warn{border-left-color:var(--amber);background:var(--amber-soft)}.callout-warn .callout-label{color:var(--amber)}.callout-fail{border-left-color:var(--fail);background:var(--fail-soft)}.callout-fail .callout-label{color:var(--fail)}.quote{border-left:3px solid var(--pass);margin:32px 0;padding:4px 0 4px 26px}.quote p{font-family:var(--font-display);color:var(--ink);margin:0;font-size:22px;line-height:1.45}.quote footer{color:var(--ink-faint);margin-top:12px;font-size:14px}.quote-author{color:var(--ink-soft);font-weight:600}.quote-source,.quote footer a{margin-left:8px}.quote-source:before,.quote footer a:before{content:"— "}.table-wrap{border:1px solid var(--line);border-radius:var(--radius);margin:26px 0;overflow-x:auto}.prose-table{border-collapse:collapse;width:100%;font-size:14.5px}.prose-table th,.prose-table td{text-align:left;border-bottom:1px solid var(--line);vertical-align:top;padding:11px 16px}.prose-table th{background:var(--paper-raised);color:var(--ink);letter-spacing:.04em;text-transform:uppercase;font-size:12.5px;font-weight:600}.prose-table td{color:var(--ink-soft)}.prose-table tr:last-child td{border-bottom:none}.compare{grid-template-columns:1fr 1fr;gap:16px;margin:26px 0;display:grid}.compare-col{min-width:0}.compare .codeblock{margin:0}.compare-label{letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;font-size:12px;font-weight:600}.compare-bad .compare-label{color:var(--fail)}.compare-good .compare-label{color:var(--pass)}.compare-bad .codeblock{border-color:color-mix(in srgb, var(--fail) 35%, #2c3a32)}.compare-good .codeblock{border-color:color-mix(in srgb, var(--pass) 45%, #2c3a32)}.demo-wrap{margin:26px 0}.demo-title{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;font-size:12px;font-weight:600}.demo{border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--paper-raised);overflow:hidden}.demo-head{font-family:var(--font-mono);color:var(--ink-faint);border-bottom:1px dashed var(--line);background:color-mix(in srgb, var(--pass-soft) 40%, var(--paper-raised));padding:9px 16px;font-size:12.5px}.demo-head code{color:var(--pass);background:0 0;border:none;padding:0}.demo-body{padding:22px 18px}.demo-readout{font-family:var(--font-mono);color:var(--ink-faint);margin:14px 0 0;font-size:13px;display:inline-block}.demo button{font-family:var(--font-body);border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);cursor:pointer;border-radius:8px;padding:7px 14px;font-size:15px;transition:border-color .12s,background .12s}.demo button:hover{border-color:var(--pass)}.counter-demo{align-items:center;gap:14px;display:flex}.counter-value{font-family:var(--font-display);text-align:center;min-width:44px;font-size:30px}.counter-reset{margin-left:8px;color:var(--ink-faint)!important;font-size:13px!important}.star-demo{align-items:center;gap:16px;display:flex}.star-demo [role=radiogroup]{gap:2px;display:inline-flex}.star-demo [role=radio]{color:var(--amber);background:0 0;border:none;padding:0 2px;font-size:30px;line-height:1}.demo form{flex-direction:column;gap:12px;max-width:340px;display:flex}.demo form label{color:var(--ink-soft);flex-direction:column;gap:4px;font-size:13px;font-weight:500;display:flex}.demo form input{font-family:var(--font-body);border:1px solid var(--line-strong);background:var(--paper);border-radius:8px;padding:9px 11px;font-size:15px}.demo form input:focus{outline:2px solid var(--pass-soft);border-color:var(--pass)}.demo form [role=alert]{color:var(--fail);margin:0;font-size:13.5px}.demo form button[type=submit]{background:var(--ink);color:var(--paper);border-color:var(--ink);align-self:flex-start}.demo form button[disabled]{opacity:.6;cursor:progress}.lesson-nav{border-top:1px solid var(--line);justify-content:space-between;gap:16px;margin-top:64px;padding-top:28px;display:flex}.lesson-nav-btn{max-width:48%;font-family:var(--font-display);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-raised);flex-direction:column;gap:4px;padding:14px 18px;font-size:17px;transition:border-color .12s;display:flex}.lesson-nav-btn:hover{border-color:var(--pass)}.lesson-nav-btn span{font-family:var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-size:11px}.lesson-nav-btn.align-right{text-align:right;margin-left:auto}.welcome{padding-top:24px}.welcome-kicker{letter-spacing:.08em;text-transform:uppercase;color:var(--pass);font-size:13px;font-weight:600}.welcome-title{max-width:14ch;margin:18px 0 0;font-size:54px;line-height:1.08}.welcome-lede{color:var(--ink-soft);max-width:62ch;margin:22px 0 0;font-size:19px}.welcome-cta{font-family:var(--font-body);color:var(--paper);background:var(--ink);cursor:pointer;border:none;border-radius:999px;margin-top:32px;padding:13px 26px;font-size:16px;font-weight:500;transition:transform .12s,background .12s}.welcome-cta:hover{background:var(--pass);transform:translateY(-1px)}.welcome-grid{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px;display:grid}.welcome-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-raised);padding:22px}.welcome-card h3{margin:0 0 8px;font-size:18px}.welcome-card p{color:var(--ink-soft);margin:0;font-size:14.5px}.welcome-card code{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:.85em}@media (width<=879.98px){.body,.layout.nav-closed .body{grid-template-columns:1fr;transition:none}.sidebar{background:var(--paper);z-index:25;width:min(86vw,320px);height:calc(100vh - 64px);transition:transform .24s;position:fixed;top:64px;left:0;transform:translate(-105%);box-shadow:0 30px 60px -30px #0006}.sidebar.open{transform:translate(0)}.sidebar-inner{opacity:1;width:100%}.layout.nav-closed .sidebar{border-right-color:var(--line)}.nav-backdrop{-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);z-index:24;background:#141a1661;animation:.2s backdrop-in;display:block;position:fixed;inset:64px 0 0}.content{padding:36px 22px 100px}.lesson-title{font-size:34px}.welcome-title{font-size:40px}.compare,.welcome-grid{grid-template-columns:1fr}.lesson-nav{flex-direction:column}.lesson-nav-btn{max-width:100%}}@keyframes backdrop-in{0%{opacity:0}}@media (width<=540px){.topbar{gap:10px;padding:0 14px}.brand-text small{display:none}.topbar-repo{padding:8px;font-size:0}.topbar-repo:before{margin-right:0}.welcome-title{font-size:32px}.lesson-title{font-size:28px}.content{padding:28px 16px 90px}}@media (prefers-reduced-motion:reduce){.body,.sidebar,.sidebar-inner,.nav-backdrop{transition:none;animation:none}}