/* learn.sibirtsev.pro - одна колонка, один путь вниз.
   Палитра наследует витрину sibirtsev.pro, типографика настроена на длинное чтение. */

:root{
  --bg:#0d0c0a; --surface:#16130d; --surface-2:#1c180f;
  --ink:#ece6d8; --ink-soft:#b9b2a2; --muted:#8b8477;
  --line:rgba(244,239,227,.10); --line-2:rgba(244,239,227,.18);
  --gold:#d9a441; --gold-soft:#e7c078; --gold-ink:#1a1407;
  --ok:#7bb26a; --no:#c2705f;
  --read:19px; --lh:1.65; --col:34rem;
  --ease:cubic-bezier(.16,1,.3,1);
}
[data-theme="light"]{
  --bg:#faf7f0; --surface:#fff; --surface-2:#f2ede1;
  --ink:#1d1a13; --ink-soft:#4a4536; --muted:#7d7565;
  --line:rgba(29,26,19,.12); --line-2:rgba(29,26,19,.2);
  --gold:#9a6d12; --gold-soft:#7c5709; --gold-ink:#fff;
  --ok:#3d7a2c; --no:#a63f2b;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font:400 var(--read)/var(--lh) -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
  padding-bottom:4rem; overflow-wrap:break-word;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
a{color:inherit}
main{padding:0 1.25rem}

/* ------------------------------------------------------------------ шапка */
.bar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem 1.25rem; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  font-size:13px; color:var(--muted); letter-spacing:.02em;
}
.bar a{text-decoration:none}
.bar-l{display:flex;gap:.5rem;align-items:baseline}
.bar-l:hover{color:var(--gold)}
.bar-r{display:flex;gap:.9rem;align-items:center}
.sep{opacity:.45}
.dim{opacity:.7}
.icon{background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;line-height:1;padding:2px}
.icon:hover{color:var(--gold)}

/* ------------------------------------------------------------------ урок */
.lesson,.map,.gate{max-width:var(--col); margin:0 auto; padding:2.2rem 0 0}
.gate{padding-top:22vh; text-align:left}

.label{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);display:block}

.recall{
  font-size:15px; line-height:1.5; color:var(--muted);
  border-left:2px solid var(--line-2); padding:.15rem 0 .15rem .85rem; margin-bottom:2rem;
}
.recall .label{margin-bottom:.2rem;color:var(--muted);opacity:.8}
.recall a{text-decoration:none;color:var(--ink-soft)}
.recall a:hover{color:var(--gold)}

h1{
  font-size:clamp(28px,6.2vw,38px); font-weight:800; letter-spacing:-.025em;
  line-height:1.14; margin-bottom:1.6rem;
}

.click{
  background:var(--surface); border-left:3px solid var(--gold);
  padding:1.15rem 1.25rem; margin-bottom:2.6rem;
}
.click .label{margin-bottom:.45rem}
.click p{font-size:clamp(19px,4.4vw,22px); font-weight:600; line-height:1.42; letter-spacing:-.012em}

.blk{margin-bottom:2.8rem}
.blk h2{
  font-size:11px; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.9rem; display:flex; align-items:center; gap:.7rem;
}
.blk h2::after{content:"";flex:1;height:1px;background:var(--line)}
.blk h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:1.9rem 0 .6rem;line-height:1.3}
.blk p{margin:0 0 1.05rem}
.blk p:last-child{margin-bottom:0}
.blk ul,.blk ol{margin:0 0 1.05rem 1.15rem}
.blk li{margin-bottom:.45rem}
.blk strong{font-weight:700;color:var(--ink)}
.blk em{font-style:italic;color:var(--ink-soft)}
.blk hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.blk a{color:var(--gold)}

pre{
  background:var(--surface-2); border:1px solid var(--line); border-radius:3px;
  padding:.85rem 1rem; margin:0 0 1.05rem; overflow-x:auto;
  font:400 14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
code{font:400 .88em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
p code,li code{background:var(--surface-2);padding:.12em .4em;border-radius:2px}

blockquote{border-left:2px solid var(--line-2);padding-left:1rem;color:var(--ink-soft);margin:0 0 1.05rem}
table{width:100%;border-collapse:collapse;margin:0 0 1.05rem;font-size:16px}
th,td{border-bottom:1px solid var(--line);padding:.5rem .6rem;text-align:left;vertical-align:top}
th{font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

.done-if{
  background:var(--surface); border-left:3px solid var(--ok);
  padding:.85rem 1rem; margin:1.4rem 0 0;
}

/* ------------------------------------------------------------------ проверка */
.quiz .q{font-weight:600;margin-bottom:1.1rem}
.opts{display:flex;flex-direction:column;gap:.55rem}
.opt{
  text-align:left; font:inherit; font-size:17px; line-height:1.45; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:3px;
  padding:.8rem 1rem; cursor:pointer; transition:border-color .18s var(--ease), background .18s var(--ease);
}
.opt:hover:not(.answered){border-color:var(--line-2)}
.opt.answered{cursor:default}
.opt.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--surface))}
.opt.wrong{border-color:var(--no);background:color-mix(in srgb,var(--no) 12%,var(--surface))}
.opt.faded{opacity:.42}
.opt{display:flex;gap:.9rem;align-items:flex-start;justify-content:space-between}
.opt .mark{flex:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding-top:.3rem}
.opt.right .mark{color:var(--ok)} .opt.wrong .mark{color:var(--no)}
.explain{margin-top:1.2rem;border-left:2px solid var(--line-2);padding-left:1rem;font-size:17px;color:var(--ink-soft)}
.explain .label{margin-bottom:.35rem}

/* ------------------------------------------------------------------ свод */
.svod{background:var(--surface);padding:1.2rem 1.25rem}
.svod h2{margin-bottom:.8rem}
.copy{
  margin-top:1rem; font:inherit; font-size:14px; color:var(--muted);
  background:none; border:1px solid var(--line-2); border-radius:2px;
  padding:.5rem .9rem; cursor:pointer; transition:.18s var(--ease);
}
.copy:hover{border-color:var(--gold);color:var(--gold)}
.copy.ok{border-color:var(--ok);color:var(--ok)}

/* ------------------------------------------------------------------ низ урока */
.foot{margin-top:3.4rem;padding-top:2rem;border-top:1px solid var(--line);text-align:center}
.state-done{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ok);margin-bottom:1rem}
.go{
  display:inline-flex; align-items:center; gap:.6rem; justify-content:center;
  background:var(--gold); color:var(--gold-ink); font:inherit; font-size:17px; font-weight:700;
  border:0; border-radius:2px; padding:1rem 1.9rem; cursor:pointer; text-decoration:none;
  transition:transform .22s var(--ease), background .22s var(--ease);
}
.go:hover{background:var(--gold-soft);transform:translateY(-2px)}
.go .arw{transition:transform .22s var(--ease)}
.go:hover .arw{transform:translateX(4px)}
.skip{display:block;margin-top:1.1rem;font-size:14px;color:var(--muted);text-decoration:none}
.skip:hover{color:var(--ink-soft)}
.help{margin-top:2rem;font-size:13px;color:var(--muted)}
.help a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.help a:hover{color:var(--gold)}

/* ------------------------------------------------------------------ карта */
.map h1{margin-bottom:1.4rem}
.continue{margin-bottom:2.6rem}
.modules{list-style:none}
.mod{border-top:1px solid var(--line);padding:1.15rem 0}
.mod-head{display:flex;align-items:center;gap:.7rem;font-size:16px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);flex:none}
.mod.is-yellow .dot{background:var(--gold)}
.mod.is-green .dot{background:var(--ok)}
.mod-head .no{font-size:12px;color:var(--muted);letter-spacing:.08em}
.mod-head .ttl{font-weight:700;letter-spacing:-.01em}
.mod-head .cnt{margin-left:auto;font-size:12px;color:var(--muted)}
.ls{list-style:none;margin:.7rem 0 0 1.4rem}
.ls li a{display:flex;gap:.75rem;padding:.3rem 0;font-size:16px;color:var(--ink-soft);text-decoration:none;line-height:1.45}
.ls li a:hover{color:var(--gold)}
.ls li .n{color:var(--muted);font-size:13px;flex:none;padding-top:.15rem}
.ls li.done a{color:var(--muted)}
.ls li.done .n{color:var(--gold)}
.legend{margin-top:2rem;font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center}
.legend span.k+*{white-space:nowrap}
.legend em{font-style:normal;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.k{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.k-none{background:var(--line-2)} .k-yellow{background:var(--gold)} .k-green{background:var(--ok)}

/* ------------------------------------------------------------------ ворота */
.gate .lead{font-size:19px;color:var(--ink-soft);margin:.9rem 0 2rem;line-height:1.5}
.gate h1{margin-bottom:0}
.gate .label{margin-bottom:1rem}
.gate .fine{margin-top:1.6rem;font-size:14px;color:var(--muted)}
.gate code{background:var(--surface-2);padding:.1em .4em;border-radius:2px}

@media (max-width:480px){
  :root{--read:18px}
  main{padding:0 1rem}
  .lesson,.map,.gate{padding-top:1.6rem}
  .foot .go{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}