/* QKCcode — дизайн-система OuRi: строгий монохром, 320→1920, без зависимостей.
   (c) OuRi Corp, MIT */

:root{
  --bg:#08080a; --bg2:#0d0d10; --surface:#111114; --surface2:#17171b;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.20);
  --text:#f4f4f5; --text2:#c8c8cd; --muted:#8b8b93; --muted2:#5f5f68;
  --ok:#f4f4f5; --shadow:0 24px 60px -20px rgba(0,0,0,.85);
  --r:14px; --r-sm:10px;
  --gap:clamp(16px,2.2vw,28px);
  --maxw:1180px; --nav-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-d:"Space Grotesk",-apple-system,"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
html[data-theme="light"]{
  --bg:#f6f5f3; --bg2:#fff; --surface:#fff; --surface2:#f1f0ee;
  --line:rgba(0,0,0,.12); --line2:rgba(0,0,0,.24);
  --text:#0b0b0d; --text2:#26262b; --muted:#63636b; --muted2:#9a9aa2;
  --shadow:0 20px 50px -24px rgba(0,0,0,.35);
}
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  min-height:100vh; display:flex; flex-direction:column;
}
img,svg{ display:block; max-width:100% }
a{ color:inherit }
::selection{ background:var(--text); color:var(--bg) }
:focus-visible{ outline:2px solid var(--text); outline-offset:3px; border-radius:4px }
button{ font:inherit; color:inherit }
.mono{ font-family:var(--font-mono) }
.muted{ color:var(--muted) }
.skip{ position:fixed; left:-999px; top:8px; z-index:99; background:var(--text); color:var(--bg); padding:8px 14px; border-radius:8px }
.skip:focus{ left:8px }

/* ---------- фон ---------- */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
}
.bg-vig{ position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 120% 80% at 50% -10%,transparent 40%,var(--bg) 100%) }

/* ---------- шапка ---------- */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__in{ max-width:var(--maxw); margin:0 auto; height:100%; padding:0 20px; display:flex; align-items:center; gap:18px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--font-d); font-weight:700; letter-spacing:-.02em; font-size:1.05rem }
.brand img{ width:32px; height:32px; border-radius:8px; border:1px solid var(--line2) }
.brand small{ display:block; font:500 .62rem/1.2 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.nav__links{ display:flex; gap:4px; margin-left:auto }
.nav__links a{
  text-decoration:none; color:var(--muted); font-size:.9rem; font-weight:550;
  padding:8px 13px; border-radius:999px; transition:color .2s,background .2s;
}
.nav__links a:hover{ color:var(--text); background:var(--surface2) }
.nav__links a.on{ color:var(--text); border:1px solid var(--line2); background:var(--surface) }
.nav__right{ display:flex; align-items:center; gap:8px }
.xp-chip{
  font:600 .72rem var(--font-mono); letter-spacing:.08em; color:var(--text);
  border:1px solid var(--line2); border-radius:999px; padding:5px 11px; background:var(--surface);
  text-decoration:none; white-space:nowrap;
}
.icon-btn{
  width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:10px;
  transition:border-color .2s,background .2s;
}
.icon-btn:hover{ border-color:var(--line2); background:var(--surface2) }
.lang-btn{ width:auto; padding:0 10px; font:600 .72rem var(--font-mono); letter-spacing:.08em }
.net-dot{ display:flex; align-items:center; gap:6px; font:600 .64rem var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.net-dot i{ width:7px; height:7px; border-radius:50%; background:var(--text); box-shadow:0 0 0 3px var(--surface2) }
.net-dot.off i{ background:transparent; border:2px solid var(--muted) }
.burger{ display:none }

/* мобильное меню */
.nav__links.open{
  display:flex; position:fixed; top:var(--nav-h); left:0; right:0; z-index:49;
  flex-direction:column; gap:2px; padding:12px 20px 20px;
  background:var(--bg2); border-bottom:1px solid var(--line2);
}
.nav__links.open a{ padding:13px 14px; border-radius:12px; font-size:1rem }

/* ---------- раскладка ---------- */
main{ position:relative; z-index:1; flex:1; width:100% }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px }
.narrow{ max-width:820px; margin:0 auto; padding:0 20px }
section{ margin:clamp(48px,7vw,96px) 0 }
.kicker{
  display:inline-block; font:600 .68rem var(--font-mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line2); border-radius:999px; padding:6px 14px; margin-bottom:22px;
}
h1,h2,h3{ font-family:var(--font-d); letter-spacing:-.03em; line-height:1.04; margin:0 }
h2.sec{ font-size:clamp(1.7rem,3.6vw,2.7rem); font-weight:700; margin-bottom:10px }
.sec-sub{ color:var(--muted); max-width:640px; margin:0 0 34px; font-size:1.02rem }

/* ---------- герой ---------- */
.hero{ padding:clamp(56px,9vw,120px) 0 clamp(30px,4vw,50px) }
.hero h1{ font-size:clamp(2.6rem,8vw,5.6rem); font-weight:700; text-transform:uppercase }
.hero h1 .line{ display:block; overflow:hidden }
.hero h1 em{ font-style:normal; -webkit-text-stroke:1.5px var(--text); color:transparent }
.hero__sub{ color:var(--text2); max-width:660px; margin:26px 0 34px; font-size:clamp(1rem,1.4vw,1.12rem) }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; text-decoration:none;
  border:1.5px solid var(--text); background:var(--text); color:var(--bg);
  border-radius:999px; padding:13px 26px; font-weight:650; font-size:.95rem;
  transition:transform .2s var(--ease),opacity .2s,background .2s,color .2s;
}
.btn:hover{ transform:translateY(-2px); opacity:.88 }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--line2) }
.btn.ghost:hover{ border-color:var(--text) }
.btn.sm{ padding:8px 16px; font-size:.84rem; border-radius:999px }
.btn[disabled]{ opacity:.4; cursor:default; transform:none }
.hero__stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  margin-top:clamp(36px,5vw,64px);
}
.hero__stats div{ background:var(--bg2); padding:20px 18px }
.hero__stats b{ display:block; font:700 clamp(1.5rem,2.6vw,2.1rem)/1 var(--font-d); letter-spacing:-.02em }
.hero__stats span{ font:500 .74rem var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }

/* ---------- карточки курсов ---------- */
.cgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--gap) }
.ccard{
  position:relative; display:flex; flex-direction:column; gap:12px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;
  overflow:hidden;
}
.ccard:hover{ transform:translateY(-4px); border-color:var(--line2); box-shadow:var(--shadow) }
.ccard__top{ display:flex; align-items:center; gap:14px }
.ccard__ico{
  width:52px; height:52px; flex:none; display:grid; place-items:center;
  border:1.5px solid var(--line2); border-radius:12px; background:var(--bg2);
}
.ccard__ico svg{ width:28px; height:28px; stroke:var(--text); fill:none; stroke-width:1.7 }
.ccard h3{ font-size:1.16rem; font-weight:650; letter-spacing:-.01em }
.ccard .tag{ font:600 .64rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.ccard p{ margin:0; color:var(--muted); font-size:.92rem; flex:1 }
.ccard__meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:14px }
.ccard__meta span{ font:500 .74rem var(--font-mono); color:var(--muted); letter-spacing:.06em }
.pbar{ height:4px; background:var(--surface2); border:1px solid var(--line); border-radius:99px; overflow:hidden; flex:1; max-width:120px }
.pbar i{ display:block; height:100%; background:var(--text); width:0%; transition:width .5s var(--ease) }
.ccard .go{ font:650 .82rem var(--font); display:inline-flex; gap:6px; align-items:center; white-space:nowrap }

/* ---------- как это работает ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--gap) }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px }
.step b{ display:block; font:700 2rem var(--font-d); color:var(--muted2); margin-bottom:10px; letter-spacing:-.04em }
.step p{ margin:0; color:var(--text2); font-size:.93rem }

/* ---------- сплит-панели ---------- */
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--gap); align-items:center }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,3vw,34px) }
.panel h3{ font-size:1.3rem; margin-bottom:12px }
.panel p{ color:var(--text2); font-size:.95rem; margin:0 0 14px }
@media(max-width:860px){ .split{ grid-template-columns:1fr } }

/* ---------- код-блоки ---------- */
.codebox{ border:1px solid var(--line2); border-radius:var(--r-sm); overflow:hidden; background:var(--bg2); margin:18px 0 }
.codebox__bar{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  border-bottom:1px solid var(--line); background:var(--surface);
  font:600 .66rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.codebox__bar .sp{ margin-left:auto; display:flex; gap:8px }
.codebox pre{
  margin:0; padding:14px 16px; overflow-x:auto;
  font:400 .86rem/1.65 var(--font-mono); color:var(--text2); white-space:pre; tab-size:2;
}
.codebox pre.code-out{ border-top:1px dashed var(--line2); color:var(--text); background:var(--surface) }
.codebox pre.code-err{ border-top:1px dashed var(--line2); color:var(--text) }
.codebox pre.code-err::before{ content:"! "; font-weight:800 }
.c-kw{ color:var(--text); font-weight:700; font-style:normal }
.c-str{ color:var(--text2); font-style:normal; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px }
.c-num{ color:var(--text); font-style:normal }
.c-com{ color:var(--muted2); font-style:italic }
.c-fn{ color:var(--text); font-weight:600; font-style:normal }
.c-op{ color:var(--muted); font-style:normal }

/* ---------- страницы курса/урока ---------- */
.crumb{ display:flex; align-items:center; gap:8px; font:500 .78rem var(--font-mono); color:var(--muted); margin:26px 0 0; letter-spacing:.04em }
.crumb a{ color:var(--muted); text-decoration:none; border-bottom:1px dashed var(--line2) }
.crumb a:hover{ color:var(--text) }
.course-head{ display:flex; gap:20px; align-items:flex-start; margin:18px 0 8px }
.course-head .ccard__ico{ width:64px; height:64px }
.course-head .ccard__ico svg{ width:34px; height:34px }
.course-head h1{ font-size:clamp(1.6rem,3.4vw,2.5rem); font-weight:700; letter-spacing:-.02em }
.course-head .tag{ margin-top:6px }
.course-desc{ color:var(--text2); max-width:720px; margin:14px 0 0 }

.lrow{
  display:flex; align-items:center; gap:16px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:16px 18px; margin-bottom:10px; transition:border-color .2s,transform .2s var(--ease);
}
.lrow:hover{ border-color:var(--line2); transform:translateX(3px) }
.lrow__n{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border:1.5px solid var(--line2); border-radius:10px;
  font:700 .95rem var(--font-mono);
}
.lrow.done .lrow__n{ background:var(--text); color:var(--bg); border-color:var(--text) }
.lrow__t{ flex:1; min-width:0 }
.lrow__t b{ display:block; font-weight:600; font-size:.98rem; letter-spacing:-.01em }
.lrow__t span{ font:400 .8rem var(--font-mono); color:var(--muted) }
.lrow__st{ display:flex; gap:5px; flex:none }
.lrow__st i{ width:9px; height:9px; border-radius:3px; border:1.5px solid var(--line2) }
.lrow__st i.on{ background:var(--text); border-color:var(--text) }

.lesson-head h1{ font-size:clamp(1.4rem,3vw,2.1rem); font-weight:700; margin:14px 0 6px }
.lesson-goal{
  border-left:3px solid var(--text); background:var(--surface); padding:12px 18px;
  border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--text2); font-size:.95rem; margin:16px 0;
}
.theory h3{ font-size:1.16rem; margin:34px 0 10px; font-weight:650 }
.theory p{ color:var(--text2); margin:12px 0 }
.theory p b, .theory li b{ color:var(--text); font-weight:650 }
.theory code, .lrow__t code, td code, .panel code, .lesson-goal code{
  font:400 .84em var(--font-mono); background:var(--surface2);
  border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--text);
}
.theory ul{ color:var(--text2); padding-left:22px; margin:12px 0 }
.theory li{ margin:6px 0 }
.theory a{ color:var(--text); text-decoration:underline; text-decoration-style:dashed; text-underline-offset:3px }
.note,.warnx{
  border:1px solid var(--line2); border-radius:var(--r-sm); padding:14px 18px; margin:18px 0;
  font-size:.92rem; color:var(--text2); background:var(--surface);
}
.note::before{ content:"// "; font:700 .9rem var(--font-mono); color:var(--muted) }
.warnx::before{ content:"! "; font:800 .95rem var(--font-mono) }
.theory table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:.9rem }
.theory th{ text-align:left; font:600 .68rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-bottom:1.5px solid var(--line2); padding:8px 10px }
.theory td{ border-bottom:1px solid var(--line); padding:9px 10px; color:var(--text2); vertical-align:top }

/* ---------- задания ---------- */
.taskbox{ border:1.5px solid var(--line2); border-radius:var(--r); background:var(--surface); padding:clamp(18px,2.6vw,26px); margin:26px 0 }
.taskbox h3{ font-size:1.05rem; margin:0 0 6px; display:flex; align-items:center; gap:10px }
.taskbox h3 .chipx{ font:600 .62rem var(--font-mono); letter-spacing:.16em; text-transform:uppercase; border:1px solid var(--line2); border-radius:99px; padding:3px 10px; color:var(--muted) }
.taskbox .prompt{ color:var(--text2); font-size:.95rem; margin:0 0 14px }
.editor{ position:relative; border:1px solid var(--line2); border-radius:var(--r-sm); overflow:hidden; background:var(--bg2) }
.editor textarea{
  display:block; width:100%; min-height:170px; resize:vertical; border:0; outline:none;
  background:transparent; color:var(--text); padding:14px 16px;
  font:400 .88rem/1.6 var(--font-mono); tab-size:2; white-space:pre; overflow-wrap:normal; overflow-x:auto;
}
.editor__bar{ display:flex; gap:8px; align-items:center; padding:10px 12px; border-top:1px solid var(--line); background:var(--surface); flex-wrap:wrap }
.editor__bar .hintx{ font:400 .7rem var(--font-mono); color:var(--muted2); margin-left:auto }
.expect{
  font:400 .82rem/1.6 var(--font-mono); border:1px dashed var(--line2); border-radius:var(--r-sm);
  padding:10px 14px; margin:12px 0; color:var(--text2); background:var(--bg2); white-space:pre-wrap;
}
.expect b{ color:var(--muted); font:600 .66rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:4px }
.verdict{ margin:12px 0 0; font-weight:650; font-size:.95rem; display:none }
.verdict.show{ display:block }
.verdict.ok{ border:1.5px solid var(--text); border-radius:var(--r-sm); padding:11px 16px; background:var(--text); color:var(--bg) }
.verdict.bad{ border:1.5px dashed var(--line2); border-radius:var(--r-sm); padding:11px 16px; color:var(--text2) }
.hintbox{ display:none; margin-top:12px; border-left:3px solid var(--muted); padding:8px 14px; color:var(--muted); font-size:.9rem }
.hintbox.show{ display:block }
.preview-frame{ width:100%; height:220px; border:1px solid var(--line2); border-radius:var(--r-sm); background:#fff; margin-top:12px }
.checklist{ list-style:none; margin:10px 0 0; padding:0; font-size:.88rem }
.checklist li{ display:flex; gap:9px; align-items:center; color:var(--muted); margin:5px 0; font-family:var(--font-mono) }
.checklist li::before{ content:"[ ]"; font-weight:700 }
.checklist li.ok{ color:var(--text) }
.checklist li.ok::before{ content:"[x]" }

/* ---------- тест урока (виджет движка) ---------- */
.quizzone{ margin:30px 0 }
.quizzone .qhead{ display:flex; align-items:baseline; gap:12px; margin-bottom:12px; flex-wrap:wrap }
.quizzone .qhead h3{ font-size:1.05rem }
.quizzone .qhead span{ font:400 .74rem var(--font-mono); color:var(--muted2) }
.quiz-mount{ display:flex; justify-content:flex-start }
.quiz-mount .qkc-root{ max-width:100%; width:600px }

/* ---------- песочница ---------- */
.play-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 14px }
.play-tabs button{
  cursor:pointer; background:transparent; border:1px solid var(--line2); border-radius:999px;
  padding:8px 18px; font:600 .82rem var(--font-mono); letter-spacing:.04em; color:var(--muted);
  transition:all .2s;
}
.play-tabs button:hover{ color:var(--text); border-color:var(--text) }
.play-tabs button.on{ background:var(--text); color:var(--bg); border-color:var(--text) }
.play-layout{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start }
@media(max-width:900px){ .play-layout{ grid-template-columns:1fr } }
.play-out{ border:1px solid var(--line2); border-radius:var(--r-sm); background:var(--bg2); overflow:hidden }
.play-out .codebox__bar{ border-bottom:1px solid var(--line) }
.play-out pre{ margin:0; padding:14px 16px; min-height:180px; font:400 .86rem/1.6 var(--font-mono); white-space:pre-wrap; word-break:break-word; color:var(--text2) }
.play-out pre.err{ color:var(--text) }

/* ---------- прогресс ---------- */
.xp-head{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:26px 0 }
.xp-head div{ background:var(--bg2); padding:20px }
.xp-head b{ display:block; font:700 2rem/1 var(--font-d) }
.xp-head span{ font:500 .72rem var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.pcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:18px 20px; margin-bottom:12px }
.pcard .top{ display:flex; align-items:center; gap:14px; margin-bottom:12px }
.pcard .top b{ flex:1; font-size:1rem; font-weight:650 }
.pcard .top a{ font:600 .8rem var(--font-mono); color:var(--muted); text-decoration:none; border-bottom:1px dashed var(--line2) }
.pcard .top a:hover{ color:var(--text) }
.pcard .pbar{ max-width:none }
.pcard .dots{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap }
.pcard .dots i{
  width:26px; height:26px; border-radius:7px; border:1.5px solid var(--line2);
  display:grid; place-items:center; font:600 .62rem var(--font-mono); color:var(--muted2); font-style:normal;
}
.pcard .dots i.full{ background:var(--text); color:var(--bg); border-color:var(--text) }
.pcard .dots i.part{ border-color:var(--text); color:var(--text) }

/* ---------- движок ---------- */
.eng-hero{ display:flex; gap:22px; align-items:center; margin:30px 0 }
.eng-badge{
  width:96px; height:96px; flex:none; border:2px solid var(--text); border-radius:18px;
  display:grid; place-items:center; font:800 1.5rem var(--font-mono); letter-spacing:-.05em;
}
.links-row{ display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 }
.links-row a{
  text-decoration:none; border:1px solid var(--line2); border-radius:999px; padding:9px 18px;
  font:600 .84rem var(--font-mono); transition:all .2s; display:inline-flex; gap:8px; align-items:center;
}
.links-row a:hover{ border-color:var(--text); background:var(--surface2) }
.links-row a small{ color:var(--muted); font-weight:400 }

/* ---------- подвал ---------- */
footer{ position:relative; z-index:1; border-top:1px solid var(--line); background:var(--bg2); margin-top:60px }
.foot-in{ max-width:var(--maxw); margin:0 auto; padding:44px 20px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px }
.foot-in h4{ font:600 .68rem var(--font-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 14px }
.foot-in p{ color:var(--muted); font-size:.88rem; margin:0 0 10px; max-width:380px }
.foot-in ul{ list-style:none; margin:0; padding:0 }
.foot-in li{ margin:8px 0 }
.foot-in a{ color:var(--text2); text-decoration:none; font-size:.9rem; border-bottom:1px dashed transparent }
.foot-in a:hover{ border-color:var(--line2) }
.foot-bottom{ border-top:1px solid var(--line); padding:16px 20px; max-width:var(--maxw); margin:0 auto; display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap; font:400 .74rem var(--font-mono); color:var(--muted2); letter-spacing:.05em }
@media(max-width:820px){ .foot-in{ grid-template-columns:1fr } }

/* ---------- утилиты ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out),transform .6s var(--ease-out) }
.reveal.in{ opacity:1; transform:none }
.pill{
  display:inline-flex; align-items:center; gap:7px; font:600 .66rem var(--font-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line2); border-radius:999px; padding:5px 12px;
}
.pill i{ width:6px; height:6px; background:var(--text); border-radius:50% }
.lesson-nav{ display:flex; gap:10px; justify-content:space-between; margin:40px 0 10px; flex-wrap:wrap }

/* ---------- адаптив ---------- */
@media(max-width:960px){
  .nav__links{ display:none }
  .burger{ display:grid }
  .xp-chip{ display:none }
}
@media(max-width:560px){
  .nav__in{ padding:0 14px; gap:10px }
  .wrap,.narrow{ padding:0 14px }
  .brand span{ display:none }
  .hero h1{ font-size:clamp(2.2rem,11vw,3.4rem) }
  .course-head{ flex-direction:column }
  .lrow{ padding:13px }
  .lrow__st{ display:none }
  .foot-bottom{ justify-content:flex-start }
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; scroll-behavior:auto!important }
  .reveal{ opacity:1; transform:none }
}
html[data-motion="off"] *{ animation:none!important; transition:none!important }
html[data-motion="off"] .reveal{ opacity:1; transform:none }