:root{--ink:#e6edf3;--muted:#9ba9b7;--bg:#0d0d12;--panel:#17131a;--line:#342735;--azure:#ff4fa3;--cyan:#ff7ab8;--gold:#f2c14e;--danger:#ff7b72;--max:1120px;color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);line-height:1.65}a{color:#ff9dcc}a:hover{text-decoration-thickness:2px}a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:20;background:#fff;color:#000;padding:.6rem}.top{position:sticky;top:0;z-index:10;background:rgba(13,13,18,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.top-inner{max-width:var(--max);margin:auto;display:flex;align-items:center;gap:1rem;padding:.8rem 1rem}.brand{font-weight:800;text-decoration:none;color:var(--ink)}.brand span{color:var(--azure)}nav{margin-left:auto;display:flex;gap:.35rem;flex-wrap:wrap}nav a{padding:.35rem .65rem;text-decoration:none;color:var(--muted);border-radius:.4rem}nav a[aria-current],nav a:hover{background:#2a1825;color:var(--ink)}main{max-width:var(--max);margin:auto;padding:3rem 1rem 5rem}.hero{max-width:900px}.eyebrow,.badge{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--azure)}h1{font-size:clamp(2.15rem,6vw,4.4rem);line-height:1.03;margin:.5rem 0 1rem;letter-spacing:-.04em}h2{font-size:clamp(1.45rem,3vw,2.05rem);margin-top:3.5rem;line-height:1.2}h3{margin-top:2rem;line-height:1.3}.lede{font-size:1.16rem;color:#c8d3dd;max-width:74ch}.meta,.callout,.command,.question,.status-card{border:1px solid var(--line);background:var(--panel);border-radius:.7rem;padding:1rem 1.2rem;margin:1.3rem 0}.meta{border-left:4px solid var(--azure)}.warning{border-left:4px solid var(--gold)}.danger{border-left-color:var(--danger)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}.card{border:1px solid var(--line);background:linear-gradient(150deg,#1c151d,#131014);padding:1.2rem;border-radius:.8rem}.card h3{margin:.25rem 0}.card p{color:var(--muted)}.card a{text-decoration:none}.diagram{margin:1.5rem 0;overflow:auto;border:1px solid var(--line);border-radius:.8rem;background:#0b090c;padding:.8rem}.diagram svg{display:block;width:100%;min-width:650px;height:auto}.diagram figcaption{color:var(--muted);font-size:.9rem;margin:.6rem}.question{border-left:4px solid var(--cyan)}details{border:1px solid var(--line);border-radius:.6rem;margin:.8rem 0;background:#131014}summary{cursor:pointer;padding:.8rem 1rem;font-weight:700}details>div{padding:0 1rem 1rem;color:#c8d3dd}.command h3{font-size:1rem;margin:0 0 .6rem;color:var(--cyan)}pre{overflow:auto;background:#090709;border:1px solid #38283a;padding:1rem;border-radius:.5rem;color:#ffe5f1}code{font-family:"Cascadia Code",Consolas,monospace;font-size:.92em}.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem}.fact{border-top:3px solid var(--azure);background:#131014;padding:.8rem}.check li{margin:.5rem 0}.session-list{list-style:none;padding:0}.session-list li{display:grid;grid-template-columns:4rem 1fr auto;gap:1rem;align-items:center;border-top:1px solid var(--line);padding:.8rem 0}.status{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);border-radius:99px;padding:.2rem .55rem;color:var(--muted)}.status.implemented{color:var(--cyan);border-color:#8c315f}.status.planned{color:var(--gold);border-color:#7d4d38}.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:4rem;border-top:1px solid var(--line);padding-top:1.2rem}.pager a{text-decoration:none}.toc{columns:2;column-gap:2rem}.toc a{display:block;padding:.2rem 0}.small{font-size:.9rem;color:var(--muted)}footer{border-top:1px solid var(--line);padding:2rem 1rem;color:var(--muted);text-align:center}@media(max-width:700px){main{padding-top:2rem}.top-inner{align-items:flex-start;flex-direction:column}.top{position:relative}nav{margin:0}.session-list li{grid-template-columns:3rem 1fr}.session-list .status{grid-column:2}.toc{columns:1}.pager{flex-direction:column}.diagram svg{min-width:560px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Academy alignment: React Learn with AI is the canonical design system. */
:root{--ink:#c9d1d9;--muted:#8b949e;--bg:#0d1117;--panel:#161b22;--line:#30363d;--azure:#ff5ca8;--cyan:#3fb950;--gold:#d29922;--danger:#f85149;--max:920px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
body{font-size:16px;line-height:1.65}.top{background:#161b22;border-color:#30363d;backdrop-filter:none}.top-inner{padding:14px 24px;gap:8px}.brand{font-size:15px;margin-right:16px;color:#ff5ca8}.brand span{color:inherit}nav{gap:0}nav a{font-size:13px;padding:4px 8px;border-radius:6px}nav a[aria-current],nav a:hover{color:#ff5ca8;background:rgba(255,92,168,.1)}main{padding:40px 24px 80px}h1{font-size:26px;line-height:1.2;letter-spacing:0;margin-bottom:6px}h2{font-size:18px;color:#ff5ca8;margin:36px 0 12px;padding-bottom:8px;border-bottom:1px solid #30363d}h3{font-size:15px;margin:24px 0 8px}.lede{font-size:14px;color:#8b949e}.eyebrow,.badge{font-size:12px;color:#ff5ca8}.meta,.callout,.command,.question,.status-card,.card,details,.diagram,pre{border-radius:6px;background:#161b22;border-color:#30363d}.card{background:#161b22}.diagram{background:#111}.command h3{color:#ff5ca8}.question{border-left-color:#ff5ca8}pre{background:#0d1117;color:#c9d1d9}.fact{background:#161b22;border-top-color:#ff5ca8}.status.implemented{color:#3fb950;border-color:#238636}.pager{border-color:#30363d}
/* Academy-wide publication status watermark. */
body::after { content: "DRAFT"; position: fixed; left: 50%; top: 50%; z-index: 999; transform: translate(-50%, -50%) rotate(-28deg); color: rgba(255, 92, 168, 0.09); font-size: clamp(88px, 18vw, 240px); font-weight: 900; letter-spacing: 0.08em; line-height: 1; pointer-events: none; user-select: none; white-space: nowrap; }

/* Balanced academy palette. */
:root { --azure:#58a6ff; --cyan:#39c5cf; --violet:#a371f7; --green:#3fb950; --gold:#d29922; --coral:#ff7b72; --academy-pink:#ff5ca8; }
.brand, .brand span { color:var(--academy-pink); }
.diagram svg :is(rect,circle,ellipse,path,line,polyline,polygon):nth-of-type(6n + 1) { stroke:var(--azure) !important; }
.diagram svg :is(rect,circle,ellipse,path,line,polyline,polygon):nth-of-type(6n + 2) { stroke:var(--cyan) !important; }
.diagram svg :is(rect,circle,ellipse,path,line,polyline,polygon):nth-of-type(6n + 3) { stroke:var(--violet) !important; }
.diagram svg :is(rect,circle,ellipse,path,line,polyline,polygon):nth-of-type(6n + 4) { stroke:var(--green) !important; }
.diagram svg :is(rect,circle,ellipse,path,line,polyline,polygon):nth-of-type(6n + 5) { stroke:var(--gold) !important; }
.diagram svg :is(rect,circle,ellipse,path,line,polyline,polygon):nth-of-type(6n) { stroke:var(--coral) !important; }
.diagram svg marker path { fill:var(--azure) !important; }