/* ===================================================================
   Лабораторные онлайн — дизайн-система, часть 1: токены, база, каркас
   Светлая тема по умолчанию; тёмная — по системной настройке или
   переключателю (html[data-theme="dark"|"light"]).
   =================================================================== */
:root{
  --font:"Inter","SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#f4f5f8;--surface:#fff;--surface-2:#f8f9fb;--surface-3:#eef0f4;
  --text:#14171f;--text-2:#3f4653;--muted:#5b616e;--line:#e3e6ec;--line-2:#d3d8e0;
  --accent:#3b5bdb;--accent-2:#2f4bc4;--accent-soft:#e8edff;--accent-ink:#2540b8;
  --ok:#15803d;--ok-soft:#dcfce7;--warn:#b45309;--warn-soft:#fef3c7;--bad:#b91c1c;--bad-soft:#fee2e2;
  /* Задания CTF: свой цвет, не акцент курса — жанр работы другой, и это должно читаться сразу. */
  --ctf:#9a3412;--ctf-soft:#ffedd5;--ctf-ink:#7c2d12;
  --info:#0369a1;--info-soft:#e0f2fe;--violet:#6d28d9;--violet-soft:#ede9fe;
  --code-bg:#0f172a;--code-fg:#e2e8f0;--code-inline:#eef1f5;
  --r-sm:6px;--r:10px;--r-lg:14px;
  --sh-sm:0 1px 2px rgba(16,24,40,.05);--sh:0 1px 3px rgba(16,24,40,.07),0 1px 2px rgba(16,24,40,.04);--sh-lg:0 10px 30px rgba(16,24,40,.12);
  --ring:0 0 0 3px rgba(59,91,219,.22);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0e1117;--surface:#161b24;--surface-2:#1b212c;--surface-3:#212936;
  --text:#e7eaf0;--text-2:#c3c9d4;--muted:#8a93a3;--line:#283040;--line-2:#34405a;
  --accent:#8aa0ff;--accent-2:#a5b6ff;--accent-soft:#1e2a52;--accent-ink:#c2cdff;
  --ok:#4ade80;--ok-soft:#10301d;--warn:#fbbf24;--warn-soft:#3a2a08;--bad:#f87171;--bad-soft:#3b1414;
  --ctf:#fb923c;--ctf-soft:#3a1e0a;--ctf-ink:#fdba74;
  --info:#38bdf8;--info-soft:#0c2a3a;--violet:#a78bfa;--violet-soft:#241a45;
  --code-bg:#0b1020;--code-fg:#e2e8f0;--code-inline:#252c3a;
  --sh-sm:0 1px 2px rgba(0,0,0,.4);--sh:0 1px 3px rgba(0,0,0,.5);--sh-lg:0 10px 30px rgba(0,0,0,.6);
  --ring:0 0 0 3px rgba(138,160,255,.3);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1117;--surface:#161b24;--surface-2:#1b212c;--surface-3:#212936;
    --text:#e7eaf0;--text-2:#c3c9d4;--muted:#8a93a3;--line:#283040;--line-2:#34405a;
    --accent:#8aa0ff;--accent-2:#a5b6ff;--accent-soft:#1e2a52;--accent-ink:#c2cdff;
    --ok:#4ade80;--ok-soft:#10301d;--warn:#fbbf24;--warn-soft:#3a2a08;--bad:#f87171;--bad-soft:#3b1414;
    --ctf:#fb923c;--ctf-soft:#3a1e0a;--ctf-ink:#fdba74;
  --ctf:#fb923c;--ctf-soft:#3a1e0a;--ctf-ink:#fdba74;
    --info:#38bdf8;--info-soft:#0c2a3a;--violet:#a78bfa;--violet-soft:#241a45;
    --code-bg:#0b1020;--code-fg:#e2e8f0;--code-inline:#252c3a;
    --sh-sm:0 1px 2px rgba(0,0,0,.4);--sh:0 1px 3px rgba(0,0,0,.5);--sh-lg:0 10px 30px rgba(0,0,0,.6);
    --ring:0 0 0 3px rgba(138,160,255,.3);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* Лабораторная — рабочий экран: материал, терминал и задачи рядом. На широком мониторе колонка
   в 1180 px оставляла треть экрана пустой, а терминалу не хватало места (правка по скриншоту автора). */
.wrap-wide{max-width:min(1840px,96vw)}
main{padding:24px 20px 56px;min-height:60vh}
/* .wrap (класс) сильнее селектора main: вертикальные отступы задаём явно, иначе заголовок прилипает к шапке */
main.wrap{padding-top:24px;padding-bottom:56px}
@media (max-width:640px){main.wrap{padding-top:16px;padding-bottom:40px}h1{font-size:22px}.page-head{margin-bottom:10px}}
h1{font-size:28px;line-height:1.2;letter-spacing:-.01em;margin:0 0 16px;font-weight:700}
h2{font-size:19px;line-height:1.3;margin:0 0 12px;font-weight:650}
h3{font-size:15.5px;margin:18px 0 8px;font-weight:650}
.lead{font-size:16.5px;color:var(--text-2);margin:0 0 12px}
.muted{color:var(--muted)}.small{font-size:13px}.nowrap{white-space:nowrap}
.text-warn{color:var(--bad)}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:var(--r-sm);z-index:100}.skip:focus{left:8px}

/* Шапка */
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;flex-wrap:wrap}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.side-h{font-size:15.5px;margin:18px 0 8px;font-weight:650}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}