:root{--paper:#e3e2d6;--panel:#d9d9cc;--ink:#222b2e;--slate:#232c30;--grey:#556265;--rule:#b4b8ab;
--sage:#93b7a2;--green:#3d6352;--beige:#e8e4d4;--code:#ecebe1;--ok:#2e6b3f;--bad:#9b2c22;
--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono",monospace;
--sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans","DejaVu Sans",sans-serif}
@media (prefers-color-scheme:dark){:root{--paper:#1b2124;--panel:#232c30;--ink:#e3e2d6;--grey:#9aa59f;
--rule:#3a4549;--green:#93b7a2;--code:#151a1c;--ok:#7fc794;--bad:#f08a80}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.6 var(--sans)}
a{color:var(--green);text-underline-offset:.18em}a:hover{color:var(--ink)}
.wrap{max-width:50rem;margin:0 auto;padding:0 1.25rem}
.banner{background:var(--slate);color:var(--beige)}
.banner .wrap{padding-top:1.1rem;padding-bottom:1.1rem;display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.banner a{color:var(--beige);text-decoration:none}.brand{font-weight:700;letter-spacing:.03em}
.crumbs{color:#b9c1b8;font-size:.9375rem}.crumbs a{color:#b9c1b8;text-decoration:underline}
main{padding:2rem 0 4rem}
h1{font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.15;margin:.2rem 0 1rem}
h2{font-size:1.25rem;margin:2rem 0 .6rem;display:flex;align-items:center;gap:.9rem}
h2::after{content:"";flex:1;height:.7rem;background:repeating-linear-gradient(to bottom,var(--grey) 0 2px,transparent 2px 4px);opacity:.45}
h3{font-size:1.06rem;margin:1.4rem 0 .4rem}
.lesson h2::after{display:none}
p,li{max-width:42rem}
code{font-family:var(--mono);font-size:.92em;background:var(--code);padding:.05em .3em;border-radius:3px}
pre{font-family:var(--mono);font-size:.875rem;line-height:1.45;background:var(--code);border:1px solid var(--rule);
padding:.8rem 1rem;overflow-x:auto;border-radius:4px}pre code{background:none;padding:0}
table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}
th,td{border:1px solid var(--rule);padding:.3rem .6rem;text-align:left;vertical-align:top}
blockquote{margin:1rem 0;padding:.6rem 1rem;border-left:4px solid var(--sage);background:var(--panel)}
.muted{color:var(--grey)}
.notice h2{margin-top:0}
.notice{background:var(--panel);border:2px solid;border-color:#f4f3ea #858c82 #858c82 #f4f3ea;outline:1px solid #5d655c;padding:1rem 1.25rem;margin:1.5rem 0}
@media (prefers-color-scheme:dark){.notice{border-color:#3a4549 #10151a #10151a #3a4549}}
.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.9rem}
.cards li{background:var(--panel);border:1px solid var(--rule);padding:1rem}
.cards a{font-weight:700;font-size:1.1rem}
.mods{list-style:none;padding:0;margin:0}.mods>li{border-bottom:1px solid var(--rule);padding:.9rem 0}
.mods ol{margin:.4rem 0 0;padding-left:1.4rem}
.ex{border:1px solid var(--rule);background:var(--panel);padding:.2rem 1.1rem 1rem;margin:1.2rem 0}
.ex .kind{font:.75rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--grey)}
details{margin:.5rem 0}summary{cursor:pointer;color:var(--green);font-weight:600}
.choices{list-style:none;padding:0}.choices label{display:flex;gap:.5rem;align-items:flex-start;cursor:pointer;padding:.15rem 0}
.choices p{margin:0}
button{font:.875rem var(--mono);padding:.35rem .8rem;background:var(--panel);color:var(--ink);cursor:pointer;
border:2px solid;border-color:#f4f3ea #858c82 #858c82 #f4f3ea;outline:1px solid #5d655c}
.res{margin-left:.7rem;font-weight:700}.res.ok{color:var(--ok)}.res.bad{color:var(--bad)}
.pn{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--rule);margin-top:2.5rem;padding-top:1rem;flex-wrap:wrap}
footer{border-top:1px solid var(--rule);color:var(--grey);font-size:.9rem;padding:1.2rem 0 2rem}