:root{
  --bg:#070A0F; --surface:#10161F; --border:#223040;
  --text:#E8EEF5; --muted:#8FA3B8; --off:#3E4C5E;
  --F:#7C8DA6; --R:#38BDF8; --L:#A78BFA; --K:#F59E0B; --S:#34D399; --Y:#F472B6;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.6 Inter,'Segoe UI',Arial,Helvetica,sans-serif;
  font-feature-settings:'tnum' 1;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header.top{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:18px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:40px;height:40px;border-radius:9px;display:block}
.brand b{font-size:18px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700}
nav.langs{display:flex;gap:8px;flex-wrap:wrap}
nav.langs a{padding:6px 12px;border:1px solid var(--border);border-radius:7px;
  background:var(--surface);color:var(--muted);text-decoration:none;
  font-size:13px;letter-spacing:.06em;white-space:nowrap}
nav.langs a:hover{color:var(--text);border-color:var(--off)}
nav.langs a[aria-current]{color:var(--text);border-color:var(--text)}
.hero img{width:100%;height:auto;display:block;border-radius:14px;
  border:1px solid var(--border)}
h1{font-size:clamp(26px,4.4vw,42px);line-height:1.15;margin:34px 0 8px;
  letter-spacing:-.01em}
.tag{color:var(--muted);font-size:17px;margin:0 0 6px}
.count{color:var(--muted);font-size:14px;letter-spacing:.06em;
  text-transform:uppercase}
h2{font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:48px 0 16px;
  padding-bottom:10px;border-bottom:1px solid var(--border)}
.about p{max-width:70ch;color:#cfdbe8}
.mods{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.mod{background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:16px}
.mod h3{margin:0 0 8px;font-size:17px;display:flex;align-items:center;gap:10px}
.mod p{margin:0;color:var(--muted);font-size:14px}
.bar{display:inline-flex;gap:3px;align-items:flex-end}
.bar i{width:5px;height:14px;border-radius:2px;background:var(--off);
  display:block}
.bar i.on{height:19px;width:7px}
.lesson{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);
  align-items:flex-start}
.lesson img{width:200px;height:auto;border-radius:8px;display:block;
  border:1px solid var(--border);flex:none}
.lesson .no{color:var(--muted);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase}
.lesson h4{margin:4px 0 6px;font-size:18px;line-height:1.3}
.lesson p{margin:0;color:var(--muted);font-size:14px;max-width:62ch}
.soon{display:inline-block;margin-top:8px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--off);border:1px solid var(--border);
  border-radius:5px;padding:3px 8px}
footer{margin:56px 0 40px;padding-top:20px;border-top:1px solid var(--border);
  color:var(--muted);font-size:14px}
footer a{color:var(--text)}
.note{margin-top:10px;color:var(--off);font-size:13px;max-width:70ch}
@media(max-width:640px){
  .lesson{flex-direction:column}
  .lesson img{width:100%}
}