/* Терминал: чёрный фон, белый текст, один красный. Страница собирается на глазах: рамка, набросок, дизайн, код, деплой. */
/* Шрифты лежат на самом сайте (лицензия SIL OFL, файлы OFL-*.txt рядом), поэтому страница никуда не обращается за ними. */
@font-face{font-family:"Unbounded";src:url("fonts/unbounded.woff") format("woff");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter.woff") format("woff");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono.woff") format("woff");font-weight:400 700;font-style:normal;font-display:swap}
:root{
  --ground:#0a0a0a;
  --surface:#141414;
  --surface-2:#1e1e1e;
  --line:#2a2a2a;
  --line-strong:#737373;
  --ink:#ffffff;
  --muted:#a3a3a3;
  --accent:#ff2a2a;
  --accent-hover:#ff4d4d;
  --paper:#ffffff;
  --pencil:#111111;
  --f-display:"Unbounded","Arial Black",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:28px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}
a{color:var(--ink)}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance}
h1{font-size:clamp(32px,5.4vw,58px);line-height:1.05;font-weight:700}
h2{font-size:clamp(26px,3.6vw,38px);line-height:1.12;font-weight:700}
h3{font-size:20px;line-height:27px;font-weight:600}
p{margin:0;max-width:64ch}
ul,ol{margin:0}
b,strong{font-weight:600}
.muted{color:var(--muted)}
.small{font-size:15px;line-height:22px}
.red{color:var(--accent)}
.lbl{font-family:var(--f-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.lbl.red{color:var(--accent)}
.mono{font-family:var(--f-mono)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stack{display:flex;flex-direction:column;gap:16px}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* кнопки и поля */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font:600 16px/1.1 var(--f-body);text-decoration:none;cursor:pointer;border:1px solid var(--line-strong);background:transparent;color:var(--ink);text-align:center}
.btn:hover{border-color:var(--accent);color:var(--ink)}
.btn.p{background:var(--accent);border-color:var(--accent);color:var(--ground)}
.btn.p:hover{background:var(--accent-hover);color:var(--ground)}
.btn.sm{min-height:40px;padding:0 16px;font-size:14px}
.btn[aria-pressed="true"].chip{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.inp{width:100%;min-height:50px;border:1px solid var(--line-strong);border-radius:8px;padding:12px 14px;font:400 16px/24px var(--f-mono);background:var(--ground);color:var(--ink)}
.inp::placeholder{color:#8a8a8a}
textarea.inp{min-height:96px;resize:vertical}
label.f{display:block;font-size:15px;line-height:22px;color:var(--muted);margin-bottom:6px}

/* рамка-видоискатель на весь экран и HUD */
.screen-vf{position:fixed;inset:12px;pointer-events:none;z-index:55}
.screen-vf i{position:absolute;width:28px;height:28px;border:0 solid var(--line-strong)}
.screen-vf i:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px}
.screen-vf i:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px}
.screen-vf i:nth-child(3){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.screen-vf i:nth-child(4){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.hud{position:fixed;left:28px;bottom:26px;z-index:56;display:flex;align-items:center;gap:10px;padding:7px 10px;background:rgba(10,10,10,.9);border:1px solid var(--line);border-radius:2px}
.hud .cells{display:flex;gap:4px}
.hud .cells span{width:22px;height:6px;border-radius:2px;background:var(--line);transition:background .3s}
.hud .cells span.on{background:var(--accent)}
.hud .pc{font:500 12px/16px var(--f-mono);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}

/* шапка */
header.top{position:sticky;top:0;z-index:40;background:rgba(10,10,10,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.logo{font:700 16px/1 var(--f-display);text-decoration:none;letter-spacing:.02em}
.nav{display:flex;gap:22px;flex-wrap:wrap;font-size:15px}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{box-shadow:0 2px 0 var(--accent)}

main{display:flex;flex-direction:column;gap:140px;padding:56px 0 170px}
.crumbs{font:500 13px/18px var(--f-mono);color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted)}

/* рамки и карточки */
.vf{position:relative}
.vf>.c{position:absolute;width:24px;height:24px;border:0 solid var(--line-strong);pointer-events:none}
.c.tl{top:-10px;left:-10px;border-top-width:2px;border-left-width:2px}
.c.tr{top:-10px;right:-10px;border-top-width:2px;border-right-width:2px}
.c.bl{bottom:-10px;left:-10px;border-bottom-width:2px;border-left-width:2px}
.c.br{bottom:-10px;right:-10px;border-bottom-width:2px;border-right-width:2px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px}
a.card{text-decoration:none;transition:border-color .2s}
a.card:hover{border-color:var(--accent);color:var(--ink)}
.head{display:flex;flex-direction:column;gap:16px;margin-bottom:40px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cardlink{display:flex;flex-direction:column;gap:10px;text-decoration:none;min-height:200px}
.cardlink .go{margin-top:auto;color:var(--accent);font-size:22px}
.cardlink:hover h3{animation:gl .36s steps(2) 1}
@keyframes gl{0%{text-shadow:-3px 0 var(--accent),3px 0 #fff;transform:translateX(-2px)}50%{text-shadow:3px 0 var(--accent),-3px 0 #fff;transform:translateX(2px);clip-path:inset(15% 0 35% 0)}100%{text-shadow:none;transform:none;clip-path:none}}
.note{border:1px dashed var(--line-strong);border-radius:8px;padding:18px 20px}
.warn{border:1px solid var(--accent);border-radius:8px;padding:18px 20px}
.next{display:flex;justify-content:space-between;align-items:center;gap:16px;text-decoration:none;padding:26px 28px}
.next .go{color:var(--accent);font-size:28px}

/* первый экран */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.hero-text{display:flex;flex-direction:column;gap:24px}
.glitch-t{text-shadow:-2px 0 rgba(255,42,42,.9),2px 0 rgba(255,255,255,.4);animation:jit 5s infinite}
@keyframes jit{0%,90%,100%{transform:none}91%{transform:translateX(-4px)}93%{transform:translateX(3px)}95%{transform:translateX(-1px)}}
.prompt{display:flex;align-items:center;gap:10px;max-width:480px;padding:8px 8px 8px 16px;border:1px solid var(--line-strong);border-radius:999px;font:400 15px/22px var(--f-mono);background:var(--surface)}
.prompt .spark{color:var(--accent);font-weight:500}
.prompt .send{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--ground);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.caret{display:inline-block;width:9px;height:17px;background:var(--accent);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cv-box{position:relative;width:100%}
.cv-box canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.eye-box{aspect-ratio:7/6}
.cv-cap{position:absolute;left:0;bottom:-34px}

/* шапка внутренней страницы */
.phead{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:center}
.phead .stack{gap:20px}
.cover-box{aspect-ratio:5/3}

/* маршрут и шаги, которые открываются по прокрутке */
.route{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;align-items:start}
.steps{list-style:none;margin:0;padding:0 0 0 30px;position:relative;display:flex;flex-direction:column;gap:14px}
.rail{position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:var(--line)}
.rail i{display:block;width:100%;height:0;background:var(--accent)}
.step{display:flex;align-items:center;gap:16px;min-height:68px;padding:10px 18px;border:1px solid var(--line);border-radius:8px;background:var(--surface);position:relative}
.step::before{content:"";position:absolute;left:-29px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--ground);border:2px solid var(--line-strong)}
.step.open::before{background:var(--accent);border-color:var(--accent)}
.num{font:700 26px/1 var(--f-display);color:var(--accent);min-width:50px}
.st{flex:1;font:600 18px/24px var(--f-body)}
a.step{text-decoration:none}
.step.locked .st{color:var(--muted);filter:blur(2.2px);font-family:var(--f-mono);font-weight:400;font-size:15px;background:repeating-linear-gradient(90deg,rgba(255,42,42,.22) 0 8px,transparent 8px 12px);border-radius:4px}
.lock{width:22px;height:22px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.lock .op{display:none}
.open .lock{stroke:var(--accent)}
.open .lock .cl{display:none}
.open .lock .op{display:inline}
.pct{display:flex;align-items:center;gap:14px;margin-top:28px}
.pct b{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;border:2px solid var(--accent);font:600 16px/1 var(--f-mono);font-variant-numeric:tabular-nums}

/* разбор на макете с курсорами */
.demo{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:56px;align-items:start;position:relative}
.phone{border:2px solid var(--line-strong);border-radius:36px;padding:22px 16px 26px;background:var(--surface);display:flex;flex-direction:column;gap:14px;min-height:440px}
.sms{background:var(--surface-2);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:22px}
.sms p{display:flex;gap:8px;align-items:flex-start}
.bubble{background:var(--surface-2);border-radius:16px;padding:12px 14px;font-size:16px;line-height:22px;max-width:92%}
.bubble.me{align-self:flex-end;background:transparent;border:1px solid var(--line-strong)}
.flag{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--ground);font:600 12px/1 var(--f-mono);transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.flag.on{transform:scale(1)}
.link{text-decoration:underline;word-break:break-all;border-radius:3px;transition:background .2s,color .2s}
.link.hot{color:var(--accent);background:rgba(255,42,42,.14)}
.fl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fl li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:var(--surface);opacity:.35;transition:opacity .3s,border-color .3s}
.fl li.on{opacity:1;border-color:var(--accent)}
.fl .fn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--ground);font:600 13px/26px var(--f-mono);text-align:center}
.fl li.todo .fn{background:var(--ink)}
.cur{position:absolute;left:0;top:0;pointer-events:none;z-index:8;display:flex;align-items:flex-start;will-change:transform}
.cur svg{width:24px;height:24px;transition:transform .12s}
.cur .pill{margin:18px 0 0 -4px;font:600 12px/1 var(--f-mono);padding:5px 9px;border-radius:999px;background:var(--ink);color:var(--ground);white-space:nowrap}
.cur.bad .pill{background:var(--accent)}
.cur.click svg{transform:scale(.75)}

/* терминал */
.term{font:400 15px/27px var(--f-mono);background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:22px 24px;min-height:200px;overflow-x:auto}
.term .k{color:var(--muted)}
.term .v{color:var(--ink)}
.term .r{color:var(--accent)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:56px;align-items:center}
.split.top{align-items:start}

/* схемы развода */
.scheme{display:flex;flex-direction:column;gap:14px}
.scheme .row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;border-top:1px solid var(--line);padding-top:12px;font-size:16px;line-height:24px}
.scheme .row>span:first-child{font:500 12px/20px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.scheme .row.do>span:first-child{color:var(--accent)}
.formula{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px}
.formula .card{flex:1 1 220px;display:flex;flex-direction:column;gap:6px}
.formula .op{align-self:center;font:700 34px/1 var(--f-display);color:var(--muted)}
.formula .card.res{border-color:var(--accent)}

/* анатомия ссылки */
.anat{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-start}
.seg{display:flex;flex-direction:column;gap:10px;padding-top:4px;cursor:default}
.seg .u{font:500 clamp(17px,2.4vw,26px)/1.2 var(--f-mono);padding-bottom:8px;border-bottom:3px solid var(--line-strong);color:var(--muted);word-break:break-all;transition:color .2s,border-color .2s}
.seg .d{font-size:15px;line-height:21px;color:var(--muted);max-width:240px}
.seg.real .u{color:var(--accent);border-color:var(--accent)}
.seg.real .d{color:var(--ink)}
.seg:hover .u{color:var(--ink);border-color:var(--ink)}
.ex{font:400 15px/22px var(--f-mono);background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:10px 12px;word-break:break-all}
.ex .bad{color:var(--accent)}

/* файлы */
.files-swap{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.fico{width:150px;height:186px;border:2px solid var(--line-strong);border-radius:6px 34px 6px 6px;display:flex;align-items:flex-end;justify-content:center;padding:14px;background:var(--surface);font:500 15px/20px var(--f-mono);text-align:center;word-break:break-all}
.fico.bad{border-color:var(--accent);color:var(--accent)}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table.t{border-collapse:collapse;width:100%;min-width:720px;font-size:16px;line-height:23px}
.t th,.t td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--line)}
.t th{font:500 12px/16px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
.t tr:last-child td{border-bottom:0}
.t td:first-child{font-family:var(--f-mono);font-size:15px}

/* история взлома */
.story{display:flex;flex-direction:column;gap:28px}
.sstep{display:grid;grid-template-columns:96px minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:stretch}
.sstep .sn{display:flex;flex-direction:column;align-items:center;gap:10px}
.sstep .sn .big{font:700 34px/1 var(--f-display);color:var(--line-strong);transition:color .3s}
.sstep .sn .bar{width:2px;flex:1;min-height:70px;background:var(--line);position:relative;overflow:hidden}
.sstep .sn .bar i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--accent);transition:height .6s}
.sstep.open .sn .big{color:var(--accent)}
.sstep.open .sn .bar i{height:100%}
.sstep .stop{border:1px solid var(--line);border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:8px;opacity:.4;transition:opacity .4s,border-color .4s}
.sstep.open .stop{opacity:1;border-color:var(--accent)}
.sstep.locked .card>*:not(.lbl){filter:blur(3px);opacity:.5}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.chain .btn{pointer-events:none}
.chain .ar{color:var(--muted);font-size:22px}

/* защита */
.path{font:400 14px/21px var(--f-mono);border:1px solid var(--line-strong);border-radius:6px;padding:9px 11px}

/* чек-лист */
.meter{height:14px;border:1px solid var(--line-strong);border-radius:7px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s}
.chk{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.chk label{display:flex;align-items:flex-start;gap:14px;min-height:48px;padding:10px 4px;cursor:pointer;font-size:17px;line-height:25px;border-bottom:1px solid var(--line)}
.chk input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:1px 0 0;border:2px solid var(--line-strong);border-radius:4px;background:transparent;cursor:pointer;display:grid;place-content:center}
.chk input:checked{background:var(--accent);border-color:var(--accent)}
.chk input:checked::after{content:"";width:6px;height:12px;border:solid var(--ground);border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
.chk input:checked+span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--accent)}
.chk a{font-size:14px;color:var(--muted);margin-left:auto;white-space:nowrap}

/* лаборатория */
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tool{display:flex;flex-direction:column;gap:14px}
.tool.wide{grid-column:1/-1}
.out{font:400 15px/26px var(--f-mono);border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--ground);min-height:52px;word-break:break-word}
.out .k{color:var(--muted)}
.out .r{color:var(--accent)}
.out .ok{color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border:1px solid var(--accent);border-radius:999px;font-size:14px;color:var(--accent)}
.tag.ok{border-color:var(--line-strong);color:var(--muted)}
.drop{border:1px dashed var(--line-strong);border-radius:8px;min-height:180px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center;padding:20px}
.drop.over{border-color:var(--accent)}
.prev{max-width:100%;max-height:220px;border-radius:6px;display:block}

/* тест */
.quiz{display:flex;flex-direction:column;gap:20px}
.qmeta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.qmsg{font:400 18px/28px var(--f-mono);background:var(--ground);border:1px solid var(--line-strong);border-radius:12px;padding:18px 20px;word-break:break-word}
.qans{display:flex;flex-wrap:wrap;gap:12px}
.verdict{border:1px solid var(--line-strong);border-radius:8px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.verdict.bad{border-color:var(--accent)}
.verdict.good{border-color:var(--ink)}
.quiz.shake{animation:shake .32s steps(2) 1}
@keyframes shake{0%{transform:translateX(-8px);filter:drop-shadow(4px 0 var(--accent))}50%{transform:translateX(8px);clip-path:inset(10% 0 20% 0)}100%{transform:none;filter:none;clip-path:none}}
.score{font:700 clamp(48px,9vw,96px)/1 var(--f-display)}

/* академия и главы */
.chcard{display:flex;flex-direction:column;gap:10px;text-decoration:none;min-height:100%}
.chcard .cv-box{aspect-ratio:16/7;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.chcard .rd{font:500 12px/16px var(--f-mono);color:var(--accent)}
.chapter{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
.toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:21px}
.toc a{color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--ink)}
.prose{display:flex;flex-direction:column;gap:18px;max-width:720px}
.prose h2{font-size:clamp(22px,2.6vw,28px);line-height:1.2;margin-top:26px}
.prose ul{padding-left:22px;display:flex;flex-direction:column;gap:8px}
.prose li::marker{color:var(--accent)}
.key{border:1px solid var(--accent);border-radius:8px;padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.tl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative;padding-top:22px}
.tl::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line-strong)}
.tl .ev{display:flex;flex-direction:column;gap:6px;position:relative}
.tl .ev::before{content:"";position:absolute;top:-19px;left:0;width:14px;height:14px;border-radius:50%;background:var(--ground);border:2px solid var(--ink)}
.tl .ev:last-child::before{background:var(--accent);border-color:var(--accent)}
.tl .yr{font:600 20px/1 var(--f-mono)}
.tl .ev:last-child .yr{color:var(--accent)}
.cq{display:flex;flex-direction:column;gap:12px;padding:20px 0;border-top:1px solid var(--line)}
.cq fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cq legend{font-weight:600;margin-bottom:8px;padding:0}
.opt{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 0;cursor:pointer;font-size:17px;line-height:24px}
.opt input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}
.cq .res{font-size:16px;line-height:23px}
.src{display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:22px}
.src a{color:var(--muted)}
.pn{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* словарь */
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.term-c{display:flex;flex-direction:column;gap:10px}
.term-c .row{font-size:15px;line-height:22px;border-top:1px solid var(--line);padding-top:10px}
.term-c .row b{font:500 11px/16px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:2px}
.term-c .row.do b{color:var(--accent)}
.term-c.hl{border-color:var(--accent)}
.skip{position:absolute;left:-9999px;top:8px;z-index:70;background:var(--accent);color:var(--ground);padding:8px 14px;border-radius:999px;font-weight:600}
.skip:focus{left:16px;color:var(--ground)}

/* подвал */
.deploy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;border-top:1px solid var(--line);padding-top:56px}
.globe-box{aspect-ratio:1/1;max-width:480px;justify-self:end}
.foot{border-top:1px solid var(--line);padding-top:32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;font-size:15px;line-height:22px}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot a{color:var(--muted)}

@media (max-width:980px){
  .hero,.route,.demo,.split,.deploy,.phead,.chapter{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tools{grid-template-columns:1fr}
  .sstep{grid-template-columns:64px minmax(0,1fr)}
  .sstep .stop{grid-column:2}
  .globe-box{justify-self:center}
  .toc{position:static}
  .tl{grid-template-columns:1fr;padding-top:0;padding-left:26px}
  .tl::before{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .tl .ev::before{top:4px;left:-26px}
  main{gap:120px}
}
@media (max-width:600px){
  .g2,.g3,.g4,.terms{grid-template-columns:1fr}
  .scheme .row{grid-template-columns:1fr;gap:4px}
  .hud{left:16px;bottom:16px}
  .screen-vf{inset:6px}
  .nav{gap:14px}
  header.top{position:relative}
  .top .wrap{gap:12px}
  .top .logo{order:1;font-size:11px;line-height:1.4}
  .top .logo .lg2{display:block}
  .top #calm{order:2;font-size:13px;padding:0 12px;min-height:44px}
  .top .nav{order:3;width:100%}
}

/* ЭФФЕКТ СБОРКИ: рамка, набросок на салфетке, дизайн, код, глитч-деплой */
.build{position:relative;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.build>*:not(.bf-ui){position:relative;z-index:1}
.build::before{content:"";position:absolute;inset:-18px;background:var(--paper);border-radius:10px;opacity:0;z-index:0;pointer-events:none}
.bf-ui{position:absolute;inset:0;pointer-events:none;z-index:5}
.bf-tag{position:absolute;left:0;top:-36px;font:500 12px/16px var(--f-mono);letter-spacing:.08em;color:var(--accent);opacity:0;white-space:nowrap}
.bf-corners{position:absolute;inset:-14px;opacity:0}
.bf-corners i{position:absolute;width:26px;height:26px;border:0 solid var(--accent)}
.bf-corners i:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px}
.bf-corners i:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px}
.bf-corners i:nth-child(3){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.bf-corners i:nth-child(4){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.bf-codebox{position:absolute;inset:0;background:rgba(10,10,10,.93);border:1px solid var(--line);border-radius:8px;padding:18px 20px;font:400 13px/21px var(--f-mono);white-space:pre;overflow:hidden;opacity:0}
.bf-codebox .cl-t{color:var(--accent)}
.bf-codebox .cl-x{color:var(--ink)}
.bf-codebox .cl-c{color:var(--muted)}
.bf-codebox div:last-child::after{content:"";display:inline-block;width:8px;height:15px;margin-left:3px;background:var(--accent);vertical-align:-2px}
.bf-strips{position:absolute;inset:0;overflow:hidden;opacity:0}
.bf-strips div{position:absolute;left:-2%;right:-2%;height:16px;font:500 13px/16px var(--f-mono);white-space:nowrap;overflow:hidden;color:var(--accent);letter-spacing:.05em}
.bf-strips div:nth-child(2){color:#ffffff}
.bf-strips div:nth-child(3){color:var(--line-strong)}
.build.bf-run .bf-tag{opacity:1;transition:opacity .3s}
.build.bf-pending>*:not(.bf-ui),.build.bf-frame>*:not(.bf-ui){opacity:0;visibility:hidden}
.build.bf-pending .bf-corners{opacity:1;inset:46% 46%}
.build.bf-frame .bf-corners{opacity:1;inset:-14px;transition:inset .38s cubic-bezier(.2,.9,.2,1)}
.build.bf-sketch{transform:rotate(-.6deg) scale(.985)}
.build.bf-sketch::before{opacity:1}
.build.bf-sketch :is(h1,h2,h3,p,label,legend,.lbl,.st,.num,.btn,.k,.v,.go,.fn,.flag,.link,.pill,.prompt,.send,.spark,.u,.d,.yr,.big,.path,.tag,.ex,.qmsg,.score,b,strong,li>span,td,th,.row>span,.row b){color:transparent!important;background-color:#dddddd!important;background-image:none!important;border-color:var(--pencil)!important;text-shadow:none!important;filter:none!important;border-radius:4px}
.build.bf-sketch :is(.card,.phone,.term,.step,.sms,.bubble,.fl li,.cv-box,.prompt,.btn,.inp,.out,.drop,.note,.warn,.key,.verdict,.fico,.tw,.stop,.qmsg){background:transparent!important;border:2px solid var(--pencil)!important;opacity:1!important}
.build.bf-sketch .cv-box{background:linear-gradient(to top right,transparent calc(50% - 1px),var(--pencil) calc(50% - 1px),var(--pencil) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(to top left,transparent calc(50% - 1px),var(--pencil) calc(50% - 1px),var(--pencil) calc(50% + 1px),transparent calc(50% + 1px))!important}
.build.bf-sketch :is(canvas,img,.cur,.rail,.vf>.c,.bar){visibility:hidden}
.build.bf-run *{transition:color .25s,background-color .25s,border-color .25s,opacity .25s}
.build.bf-code .bf-codebox{opacity:1}
.build.bf-glitch .bf-strips{opacity:1}
.build.bf-glitch>*:not(.bf-ui){animation:bfg .3s steps(1) 1}
@keyframes bfg{
  0%{clip-path:inset(0 0 62% 0);transform:translateX(-10px);filter:drop-shadow(5px 0 var(--accent)) drop-shadow(-5px 0 #fff)}
  20%{clip-path:inset(42% 0 18% 0);transform:translateX(12px)}
  40%{clip-path:inset(8% 0 70% 0);transform:translateX(-5px)}
  60%{clip-path:inset(70% 0 0 0);transform:translateX(7px);filter:drop-shadow(-4px 0 var(--accent))}
  80%{clip-path:inset(0 0 0 0);transform:translateX(-2px);filter:none}
  100%{clip-path:none;transform:none;filter:none}
}

/* спокойный режим и «уменьшить движение» */
html.calm *,html.calm *::before,html.calm *::after{animation:none!important;transition:none!important}
html.calm .cur,html.calm .bf-ui{display:none}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}