/* Курс «Вайбкодинг с OpenCode» — общий стиль.
   Дизайн-токены совпадают с курсом 30/70, чтобы оба курса выглядели родственно. */

:root{
  --bg:#fbfaf7; --panel:#ffffff; --ink:#1a1a1a; --muted:#6b6b6b;
  --line:#e6e2da; --accent:#2f5d50; --accent-soft:#eaf1ee; --code:#f4f2ed;
  --warn:#8a4b2f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.layout{display:flex; min-height:100vh; align-items:flex-start}

/* ---------- сайдбар ---------- */
.side{
  width:274px; flex:0 0 274px; position:sticky; top:0; height:100vh;
  overflow-y:auto; background:var(--panel); border-right:1px solid var(--line);
  padding:24px 14px 40px;
}
.brand{display:block; text-decoration:none; color:var(--ink); margin:0 6px 4px}
.brand b{font-size:15px; letter-spacing:.02em; display:block}
.brand span{font-size:12px; color:var(--muted)}
.side .ratio{
  margin:14px 0 18px; font-size:11.5px; color:var(--accent);
  background:var(--accent-soft); border-radius:6px; padding:7px 10px; letter-spacing:.02em;
}
.side .group-title{
  margin:18px 6px 6px; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:700;
}
.side a.nav{
  display:block; text-decoration:none; color:var(--ink); padding:7px 10px;
  border-radius:6px; font-size:14px; border-left:2px solid transparent;
}
.side a.nav small{display:block; color:var(--muted); font-size:11.5px; line-height:1.3}
.side a.nav:hover{background:#f6f4f0}
.side a.nav.active{background:var(--accent-soft); border-left-color:var(--accent); font-weight:600}
.side a.nav.active small{color:var(--accent)}

/* модуль: теория + практика */
.mod{margin:2px 0 6px}
.mod a.mod-theory{
  display:block; text-decoration:none; color:var(--ink); padding:7px 10px 3px;
  border-radius:6px 6px 0 0; font-size:14px; border-left:2px solid transparent;
}
.mod a.mod-theory .num{
  display:inline-block; min-width:22px; color:var(--muted); font-size:12px;
  font-variant-numeric:tabular-nums;
}
.mod a.mod-practice{
  display:block; text-decoration:none; color:var(--muted); font-size:11.5px;
  padding:0 10px 6px 32px; border-radius:0 0 6px 6px; border-left:2px solid transparent;
}
.mod a.mod-theory:hover,.mod a.mod-practice:hover{background:#f6f4f0}
.mod a.mod-theory.active{
  background:var(--accent-soft); border-left-color:var(--accent); font-weight:600; color:var(--accent);
}
.mod a.mod-practice.active{background:var(--accent-soft); border-left-color:var(--accent); color:var(--accent); font-weight:600}
.mod a.active .num{color:var(--accent)}
.mod a .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); opacity:.45; margin-left:6px; vertical-align:middle;
}
.side .foot{
  margin:24px 6px 0; padding-top:14px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted); line-height:1.55;
}
.side .foot a{color:var(--accent); text-decoration:none}
.side .foot a:hover{text-decoration:underline}

/* ---------- контент ---------- */
main{flex:1 1 auto; min-width:0; padding:48px 56px 90px; max-width:920px}
@media (min-width:1025px){ main{margin:0 auto} }

/* верхняя навигация: выход из курса + переключение курсов */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center;
  gap:8px; flex-wrap:wrap; margin:-24px 0 24px; padding:11px 0;
  background:var(--bg); border-bottom:1px solid var(--line); font-size:13.5px;
}
.topbar a{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent}
.topbar a:hover{border-bottom-color:var(--accent)}
.topbar .home{font-weight:650}
.topbar .sep{color:#c9c3b8}
.topbar .here{color:var(--muted)}
.topbar .spacer{flex:1 1 auto}
.topbar .switch{
  font-size:12.5px; color:var(--muted); background:var(--panel);
  border:1px solid var(--line); padding:5px 12px; border-radius:999px;
  transition:color .15s, border-color .15s;
}
.topbar .switch:hover{color:var(--accent); border-color:var(--accent)}
.topbar .share{
  font:inherit; font-size:12.5px; color:var(--muted); background:var(--panel);
  border:1px solid var(--line); padding:5px 12px; border-radius:999px; cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.topbar .share:hover{color:var(--accent); border-color:var(--accent)}
.topbar .share.copied{color:#fff; background:var(--accent); border-color:var(--accent)}
/* кнопки мобильного меню — на десктопе скрыты */
.navtoggle,.navclose,.scrim{display:none}
article h1{
  font-size:29px; line-height:1.25; margin:0 0 10px; letter-spacing:-.01em;
  padding-bottom:16px; border-bottom:2px solid var(--accent);
}
article h2{font-size:21px; margin:40px 0 12px; padding-top:8px; letter-spacing:-.005em; scroll-margin-top:16px}
article h2.section{
  font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);
  margin:34px 0 14px; padding:0 0 8px; border-bottom:1px solid var(--line);
}
article h3{font-size:16.5px; margin:26px 0 8px; color:var(--accent)}
article h4{font-size:15px; margin:20px 0 6px}
article h5{font-size:14px; margin:16px 0 6px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
article p{margin:10px 0}
article ul,article ol{margin:10px 0 10px 22px; padding:0}
article li{margin:5px 0}
article li::marker{color:var(--muted)}
article a{color:var(--accent); text-decoration:none; border-bottom:1px solid #c8d8d2}
article a:hover{border-bottom-color:var(--accent)}
article strong{font-weight:650}
article hr{border:0; border-top:1px solid var(--line); margin:34px 0}
article blockquote{
  margin:16px 0; padding:2px 0 2px 16px; border-left:3px solid var(--accent);
  color:#3d3d3d; background:#f7f5f1;
}
article blockquote p{margin:8px 0}

/* таблицы */
.table-wrap{overflow-x:auto; margin:18px 0}
article table{
  width:100%; border-collapse:collapse; font-size:14px;
  background:var(--panel); border:1px solid var(--line);
}
article th,article td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
article th{background:#f4f2ed; font-weight:650; font-size:13px; letter-spacing:.01em; white-space:nowrap}
article tbody tr:last-child td{border-bottom:none}
article tbody tr:hover{background:#fbfaf7}

/* код */
article code{
  font-family:"SF Mono",ui-monospace,Consolas,"Liberation Mono",monospace;
  font-size:13px; background:var(--code); padding:2px 5px; border-radius:4px;
}
article pre{
  background:#22201d; color:#eae6df; padding:16px 18px; border-radius:8px;
  overflow-x:auto; font-size:13px; line-height:1.55; margin:16px 0;
}
article pre code{background:none; padding:0; color:inherit; font-size:12.5px}

/* чек-лист */
article li.task{list-style:none; margin-left:-20px; padding-left:26px; position:relative; cursor:pointer}
article li.task .cb{position:absolute; left:0; top:5px; width:14px; height:14px; border:1.5px solid #b9b3a8; border-radius:3px; display:inline-block}
article li.task.done .cb{background:var(--accent); border-color:var(--accent)}
article li.task.done .cb:after{
  content:""; position:absolute; left:4px; top:0.5px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
article li.task.done{color:var(--muted)}
article .cb{display:inline-block; width:13px; height:13px; border:1.5px solid #b9b3a8;
  border-radius:3px; position:relative; vertical-align:-2px; cursor:pointer}
article .cb.done{background:var(--accent); border-color:var(--accent)}
article .cb.done:after{
  content:""; position:absolute; left:3.5px; top:0; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* навигация снизу */
.pager{display:flex; justify-content:space-between; gap:16px; margin-top:52px;
  padding-top:22px; border-top:1px solid var(--line); font-size:14px}
.pager a{text-decoration:none; color:var(--accent)}
.pager a:hover{border-bottom:1px solid var(--accent)}
.pager .next{margin-left:auto; text-align:right}

/* полоса прогресса по чек-листу страницы */
.progress{
  position:relative; background:var(--accent-soft); border-radius:8px;
  padding:9px 13px; margin:18px 0 26px; font-size:13px; color:var(--accent); overflow:hidden;
}
.progress span{position:relative; z-index:1}
.progress i{position:absolute; left:0; top:0; bottom:0; background:#cfe0d8; display:block; transition:width .2s ease}

/* ссылка на практику/теорию сверху страницы модуля */
.crosslink{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 24px}
.crosslink a{
  display:inline-block; text-decoration:none; font-size:13.5px; padding:7px 14px;
  border-radius:999px; border:1px solid #cddbd5; color:var(--accent); background:var(--panel);
  transition:background .15s, border-color .15s;
}
.crosslink a:hover{background:var(--accent-soft); border-color:var(--accent)}
.crosslink a.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.crosslink a.primary:hover{background:#274e43; border-color:#274e43}

@media (max-width:1024px){
  .layout{display:block}
  main{padding:0 16px 64px; max-width:none}

  /* сайдбар превращается в выезжающее меню */
  .side{
    position:fixed; top:0; left:0; bottom:0; z-index:60;
    width:min(88vw,320px); height:100dvh; flex:none;
    border-right:1px solid var(--line); border-bottom:none;
    padding:18px 14px 40px; overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:none;
  }
  .side.open{transform:none; box-shadow:0 14px 44px rgba(0,0,0,.24)}
  .side .brand{padding-right:44px}
  .side .foot{display:block}
  .scrim{
    display:block; position:fixed; inset:0; z-index:55; background:rgba(20,18,16,.42);
    opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  .scrim.show{opacity:1; pointer-events:auto}
  body.nav-open{overflow:hidden}
  .navtoggle{
    display:inline-flex; align-items:center; gap:6px; flex:none;
    font:inherit; font-size:12.5px; line-height:1; color:var(--accent);
    background:var(--panel); border:1px solid var(--line); border-radius:999px;
    padding:6px 11px; cursor:pointer;
  }
  .navtoggle:hover{border-color:var(--accent)}
  .navtoggle .bars{font-size:13px; line-height:1}
  .navclose{
    display:flex; position:absolute; top:14px; right:12px; align-items:center;
    justify-content:center; width:30px; height:30px; font-size:20px; line-height:1;
    color:var(--muted); background:var(--panel); border:1px solid var(--line);
    border-radius:50%; cursor:pointer;
  }
  .navclose:hover{color:var(--accent); border-color:var(--accent)}

  /* верхняя панель — одна компактная строка */
  .topbar{
    margin:0 -16px 18px; padding:9px 16px; flex-wrap:nowrap; gap:6px;
    font-size:13px;
  }
  .topbar .home{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
  .topbar .here,.topbar .sep{display:none}
  .topbar .switch,.topbar .share{padding:5px 10px; font-size:12px; flex:none}
  .topbar [data-narrow="hide"]{display:none}

  article h1{font-size:23px}
  article h2{font-size:19px}
  article th{white-space:normal}
  /* таблицы прокручиваются по горизонтали вместо сжатия в нечитаемое */
  article table{min-width:440px}
  article pre{padding:14px 15px; font-size:12px}
  .pager{flex-direction:column; align-items:stretch; gap:10px}
  .pager .next{text-align:left; margin-left:0}
}
@media (max-width:420px){
  .topbar .home{font-size:12.5px}
  .topbar .switch,.topbar .share{padding:5px 9px}
  .navtoggle{padding:6px 9px}
  .navtoggle .lbl{display:none}
}
@media print{
  .side,.pager,.crosslink,.progress,.topbar,.scrim{display:none}
  main{padding:0; max-width:none}
  body{background:#fff}
  article pre{background:#f4f2ed; color:#1a1a1a; border:1px solid var(--line)}
  article a{border-bottom:none}
}