:root{
 --bg:#0b1220;--paper:#121a2e;--ink:#e7ecf5;--muted:#9aa7c2;--green:#4ddc82;
 --green2:#35c46a;--border:#223052;--purple:#b48cf0;--pink:#ff6fa8;
 --move:#4ecbb0;--logic:#7fa8e6;--loops:#4fc3cf;--vars:#e8934a;
 --challenge:#142a3d;--teacher:#241733;--code:#0a0f1a;--codeText:#d9f7e2;
}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
 background:var(--bg);color:var(--ink);line-height:1.6}
a{color:var(--green2)} .wrap{width:min(1120px,calc(100% - 2rem));margin:auto}
header{background:linear-gradient(135deg,#06140a,#123a1f);color:#fff;padding:1rem 0}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.top h1{font-size:1.25rem;margin:0}.top a{color:#fff;text-decoration:none;font-weight:650;margin-left:1rem}
.hero{padding:2.6rem 0 2rem}.hero h2{font-size:clamp(2rem,5vw,3.6rem);line-height:1.05;margin:.4rem 0 1rem}
.hero p{font-size:1.08rem;max-width:850px;color:#eff9f1}
main{padding:2rem 0 4rem}.card,.lesson{background:var(--paper);border:1px solid var(--border);
 border-radius:16px;box-shadow:0 3px 14px rgba(0,0,0,.4)}.card{padding:1rem 1.2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1rem}
.card h3{margin:.4rem 0}.lesson{padding:clamp(1rem,3vw,2rem)}
.badge{display:inline-block;background:rgba(77,220,130,.15);color:var(--green);border-radius:999px;padding:.2rem .6rem;font-size:.82rem;font-weight:750}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem;margin:1rem 0 1.5rem}
.meta>div{border:1px solid var(--border);border-radius:11px;background:#0f1626;padding:.7rem}
.lesson h2{margin-top:2rem;border-bottom:2px solid var(--border);padding-bottom:.35rem}
.teacher,.challenge,.tip,.warning{padding:.8rem 1rem;border-left:5px solid var(--purple);border-radius:8px;margin:1rem 0;background:var(--teacher)}
.challenge{border-color:#4fa8e0;background:var(--challenge)}.tip{border-color:var(--green);background:#132a1a}
.warning{border-color:#f4c542;background:#332710}
.block-stack{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:1rem 0;padding:.4rem 0}
.block{display:inline-flex;align-items:center;gap:.45rem;color:#fff;border-radius:8px;padding:.48rem .72rem;font-family:ui-monospace,Consolas,monospace;font-weight:700;box-shadow:inset 0 -2px #0004}
.block.build{background:var(--pink)}.block.move{background:var(--move)}.block.function{background:var(--purple)}
.block.loop{background:var(--loops)}.block.logic{background:var(--logic)}.block.var{background:var(--vars)}
.block.preview{background:#a873c9}.indent{margin-left:2rem}.indent2{margin-left:4rem}
.slot{background:#fff;color:#233;padding:.05rem .35rem;border-radius:4px;min-width:1.5rem;text-align:center}
pre{background:var(--code);color:var(--codeText);padding:1rem;border-radius:12px;overflow:auto}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}.nav a,.ide-button{
 display:inline-block;background:rgba(255,255,255,.07);border-radius:10px;padding:.65rem .9rem;text-decoration:none;font-weight:750}
.ide-button{background:#1f8a4a;color:white}
table{width:100%;border-collapse:collapse;background:var(--paper)}th,td{border:1px solid var(--border);padding:.65rem;text-align:left;vertical-align:top}th{background:#182238}
footer{border-top:1px solid var(--border);padding:2rem 0;color:var(--muted)}
.small{color:var(--muted);font-size:.92rem}
.check li{margin:.35rem 0}
@media(max-width:650px){.nav{flex-direction:column}.top nav{width:100%}.indent{margin-left:1rem}.indent2{margin-left:2rem}}