:root{
  --bg:#0d0f12; --card:#15181d; --card2:#1a1e25; --border:#242830;
  --text:#e4e6ea; --sub:#8a909c; --accent:#7c8cff; --accent2:#4fd1c5;
  --warn:#ffb454; --code:#c3f0ca; --lock:#ff7a7a;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  line-height:1.65; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px; margin:0 auto; padding:32px 22px 96px;}
.top{
  display:flex; align-items:center; gap:12px; margin-bottom:26px;
  font-size:.82rem; color:var(--sub);
}
.top a{color:var(--sub); text-decoration:none; border-bottom:1px dashed #333842;}
.top a:hover{color:var(--accent); border-color:var(--accent);}
.hero{
  border:1px solid var(--border); background:
    radial-gradient(1200px 200px at 0% -20%, rgba(124,140,255,.14), transparent 60%),
    var(--card);
  border-radius:16px; padding:26px 26px 22px; margin-bottom:30px;
}
.hero .kind{
  display:inline-block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); background:rgba(124,140,255,.1); border:1px solid rgba(124,140,255,.25);
  padding:4px 10px; border-radius:999px; margin-bottom:14px;
}
.hero h1{font-size:1.9rem; line-height:1.2; margin:0 0 8px; font-weight:700;}
.hero p.lede{margin:0; color:var(--sub); font-size:1rem;}
h2{
  font-size:1.28rem; font-weight:650; margin:38px 0 12px; padding-top:8px;
  border-top:1px solid var(--border);
}
h2:first-of-type{border-top:none;}
h3{font-size:1.05rem; font-weight:650; margin:24px 0 8px; color:#eef0f4;}
p{margin:12px 0;}
a{color:var(--accent);}
ul,ol{margin:12px 0; padding-left:22px;}
li{margin:6px 0;}
li::marker{color:var(--accent);}
strong{color:#fff; font-weight:650;}
code{
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:.85em;
  background:#11151b; color:var(--code); border:1px solid #222833;
  padding:1px 6px; border-radius:6px;
}
pre{
  background:#0a0d11; border:1px solid var(--border); border-radius:12px;
  padding:16px 18px; overflow:auto; margin:16px 0;
}
pre code{background:none; border:none; padding:0; color:#d7e2ff;}
.callout{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--card2); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:10px; padding:14px 16px; margin:18px 0; font-size:.95rem;
}
.callout .ci{font-size:1.1rem; line-height:1.4; flex-shrink:0;}
.callout.tip{border-left-color:var(--accent2);}
.callout.warn{border-left-color:var(--warn);}
.callout.fact{border-left-color:#b98cff;}
.params{
  display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:12px;
  overflow:hidden; margin:18px 0; font-size:.92rem;
}
.params dt{background:#12161c; padding:10px 14px; font-weight:600; color:#eaf0ff;}
.params dd{background:var(--card); padding:10px 14px; margin:0; color:var(--sub);}
table{width:100%; border-collapse:collapse; margin:18px 0; font-size:.92rem;}
th,td{border:1px solid var(--border); padding:9px 12px; text-align:left;}
th{background:#12161c; color:#eaf0ff; font-weight:600;}
td{color:var(--sub);}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 4px;}
.tag{font-size:.74rem; color:var(--sub); background:#12161c; border:1px solid var(--border); padding:3px 10px; border-radius:999px;}
hr{border:none; border-top:1px solid var(--border); margin:30px 0;}
.foot{margin-top:56px; padding-top:18px; border-top:1px solid var(--border); color:#4a4f59; font-size:.75rem; text-align:center;}
.foot a{color:#6b7280;}
/* index grid */
.sec-title{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sub); margin:34px 0 12px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px;}
a.card{
  display:flex; gap:13px; align-items:flex-start; text-decoration:none; color:var(--text);
  background:var(--card); border:1px solid var(--border); border-radius:13px; padding:15px 16px;
  transition:border-color .15s,transform .15s,background .15s;
}
a.card:hover{border-color:var(--accent); transform:translateY(-2px); background:var(--card2);}
a.card .ico{width:40px;height:40px;border-radius:10px;background:#1c2028;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
a.card .m{display:flex;flex-direction:column;gap:3px;min-width:0;}
a.card .m .n{font-weight:650;font-size:.96rem;}
a.card .m .d{font-size:.78rem;color:var(--sub);}
a.card.locked{border-style:dashed;}
a.card.locked .ico{background:#2a1416;color:var(--lock);}
.lockbadge{font-size:.7rem;color:var(--lock);border:1px solid #46262a;background:#1e1416;border-radius:999px;padding:2px 8px;margin-left:auto;align-self:center;}
@media(max-width:560px){.hero h1{font-size:1.55rem;} .wrap{padding:22px 16px 80px;} .params{grid-template-columns:1fr;}}

/* ---- course lesson typography ---- */
.lesson blockquote{
  margin:18px 0; padding:14px 16px; background:var(--card2);
  border:1px solid var(--border); border-left:3px solid var(--accent2); border-radius:10px; color:var(--text);
}
.lesson blockquote p{margin:6px 0;}
.lesson blockquote p:first-child{margin-top:0;} .lesson blockquote p:last-child{margin-bottom:0;}
.lesson img{max-width:100%; border-radius:10px; border:1px solid var(--border); margin:12px 0;}
.lesson h1{font-size:1.4rem; margin:26px 0 10px;}
.lesson ul li::marker,.lesson ol li::marker{color:var(--accent);}
.lesson a{word-break:break-word;}
.lesson kbd{font-family:"SF Mono",ui-monospace,monospace; font-size:.82em; background:#1b2028; border:1px solid #2c3340; border-bottom-width:2px; border-radius:6px; padding:1px 6px; color:#eaf0ff;}
.lesson table{display:block; overflow-x:auto;}
/* ---- lesson prev/next nav ---- */
.lessonnav{display:flex; gap:12px; margin:40px 0 0; flex-wrap:wrap;}
.lnav{flex:1 1 220px; display:flex; flex-direction:column; gap:4px; text-decoration:none;
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:13px 16px;
  color:var(--text); transition:border-color .15s,transform .15s;}
.lnav:hover{border-color:var(--accent); transform:translateY(-1px);}
.lnav.next{text-align:right; align-items:flex-end;}
.lnav .dir{font-size:.72rem; color:var(--sub); text-transform:uppercase; letter-spacing:.08em;}
.lnav .t{font-weight:600; font-size:.92rem;}
/* ---- course index numbered cards ---- */
.course-grid a.card .ico{font-size:.9rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums;}