:root { color-scheme: light; --ink:#17202a; --muted:#596773; --line:#d7dee5; --paper:#fbfcfd; --panel:#f1f5f7; --blue:#1261a0; --teal:#087f8c; --orange:#b85c00; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.wrap { max-width:920px; margin:0 auto; padding:48px 24px 72px; }
.kicker { color:var(--blue); font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.2; } h1 { max-width:760px; margin:10px 0 18px; font-size:clamp(2rem,5vw,3.5rem); } h2 { margin-top:42px; font-size:1.65rem; } h3 { margin-top:26px; font-size:1.1rem; }
p,li { max-width:74ch; } a { color:var(--blue); } .lede { color:var(--muted); font-size:1.12rem; } .rule { border:0; border-top:1px solid var(--line); margin:32px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; } .panel { border:1px solid var(--line); background:white; padding:18px; border-radius:6px; } .panel strong { display:block; color:var(--blue); margin-bottom:4px; }
.flow { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; align-items:stretch; margin:20px 0; } .flow div { min-height:92px; padding:12px; background:var(--panel); border-top:3px solid var(--teal); font-size:.92rem; } .flow div:not(:last-child)::after { content:"→"; float:right; color:var(--muted); font-size:1.5rem; margin:22px -22px 0 0; }
code { background:#e9eef2; padding:.12em .3em; border-radius:3px; } pre { overflow-x:auto; padding:16px; background:#17202a; color:#e9f1f5; border-radius:6px; } .callout { border-left:4px solid var(--orange); background:#fff6ea; padding:14px 18px; margin:22px 0; }
.quiz { border:1px solid var(--line); background:white; padding:20px; border-radius:6px; } .quiz button { display:block; width:100%; text-align:left; margin:8px 0; padding:10px 12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:4px; cursor:pointer; } .quiz button:hover { border-color:var(--blue); } .quiz button.correct { border-color:var(--teal); background:#e6f7f5; } .quiz button.wrong { border-color:#b13a2e; background:#fff0ee; } .feedback { min-height:1.6em; color:var(--muted); }
.foot { color:var(--muted); font-size:.92rem; margin-top:44px; } table { border-collapse:collapse; width:100%; } th,td { border:1px solid var(--line); padding:10px; text-align:left; vertical-align:top; } th { background:var(--panel); }
@media (max-width:680px) { .wrap { padding:30px 16px 52px; } .flow { grid-template-columns:1fr; } .flow div:not(:last-child)::after { content:"↓"; float:right; margin:0; } }