/* «Обо мне» (ki-ri.ru/about/): переключатель полушарий, терминал и карта метро. Подключается только на /about/ поверх site.css.
   Макет — diag/design/previews/about-hemispheres-about.html. Режим задаёт main.ab[data-mode]: hum — светлая карта метро
   (по умолчанию и без JS), tech — тёмный терминал; тёмной становится только область страницы, шапка и подвал платформы светлые.
   Inline-стилей нет (CSP style-src 'self'): то, что в макете было style="…", здесь классы. Состояния «живой» страницы —
   под html.js (его ставит about.js), без JS видны схема и все карточки станций. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url(../fonts/JetBrainsMono-variable.woff2) format('woff2')}
.ab{--mono:'JetBrains Mono',ui-monospace,monospace;--sans:'Onest',system-ui,sans-serif;
  --infra:#0b6e4f;--deliv:#2f6feb;--prod:#4f46e5;--ai:#0e7490;--neon:#3ddc97;--amber:#ffc560;
  --bg:#f6f9f7;--ink:#18231f;--ink2:#3e4b45;--mut:#5b6b64;--line:#dbe5df;--card:#fff;--hair:rgba(24,35,31,.08);--acc:var(--infra);
  font:16px/1.5 var(--sans);color:var(--ink);transition:background .5s,color .5s}
.ab[data-mode="tech"]{--bg:#0b100d;--ink:#e3ece7;--ink2:#b9c9c0;--mut:#7d9488;--line:#223029;--card:#121a16;--hair:rgba(255,255,255,.06);
  --acc:var(--neon);color-scheme:dark;background:var(--bg)}
.ab section{margin-top:0}
.ab .pf-cap.ghost{color:#18231f}
.line-bg-infra{background:var(--infra)}.line-bg-deliv{background:var(--deliv)}.line-bg-prod{background:var(--prod)}.line-bg-ai{background:var(--ai)}
.stroke-infra{stroke:var(--infra)}.stroke-deliv{stroke:var(--deliv)}.stroke-prod{stroke:var(--prod)}.stroke-ai{stroke:var(--ai)}
.line-infra{color:var(--infra)}.line-deliv{color:var(--deliv)}.line-prod{color:var(--prod)}.line-ai{color:var(--ai)}

/* ПЕРЕКЛЮЧАТЕЛЬ-ПОЛУШАРИЯ */
.chooser{display:grid;grid-template-columns:1fr minmax(300px,440px) 1fr;align-items:center;gap:24px;padding:40px 0 28px}
.side-l{text-align:right}.side-r{text-align:left}
.chooser h1{grid-column:1/-1;text-align:center;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em;line-height:1.1;text-wrap:balance;margin:0}
.chooser h1 span{color:var(--mut);font-weight:500}
.opt{background:none;border:0;color:inherit;cursor:pointer;display:inline-grid;gap:6px;padding:10px;border-radius:14px;transition:opacity .3s;font:inherit;text-align:inherit}
.opt .k{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.opt .t{font-size:clamp(22px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1}
.opt .d{font-size:14px;color:var(--mut);max-width:240px}
.side-l .opt{justify-items:end}.side-l .d{text-align:right}
#o-tech .t{font-family:var(--mono);font-weight:700}
#o-tech .t::before{content:"> ";color:var(--neon)}
#o-hum .t::after{content:" ●";color:var(--deliv);font-size:.6em;vertical-align:.2em}
.opt[aria-checked="false"]{opacity:.6}
.opt:hover{opacity:1}
.opt:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.brain{width:100%;height:auto;display:block;overflow:visible}
.hemi{cursor:pointer;outline:none}
.hemi .shell{stroke-width:3;transition:fill .4s,stroke .4s}
.hemi .art{transition:opacity .4s}
#h-tech .shell{fill:#0f1814;stroke:var(--neon)}
#h-hum .shell{fill:#fff;stroke:var(--ink)}
#h-tech[aria-checked="false"] .shell,#h-hum[aria-checked="false"] .shell{fill:transparent;stroke:var(--mut);stroke-dasharray:6 6}
.hemi[aria-checked="false"] .art{opacity:.18}
.hemi:hover .art,.hemi:focus-visible .art{opacity:1}
.hemi:focus-visible .shell{stroke-width:5}
.trace{fill:none;stroke:var(--neon);stroke-width:2}
.node{fill:var(--neon)}
.chip{fill:#0f1814;stroke:var(--neon);stroke-width:2}
.chip-t{font:12px var(--mono);fill:var(--neon)}
.curve{fill:none;stroke-width:6;stroke-linecap:round}
.stop{fill:#fff;stroke:#18231f;stroke-width:3}.stop-on{fill:#fff;stroke:#18231f;stroke-width:3}
.neck{fill:none;stroke:var(--mut);stroke-width:3;stroke-linecap:round}
.spark{fill:var(--neon);opacity:0}
.spark-a{offset-path:path('M194,95 H130 V70 H70 V120 H30')}
.spark-b{offset-path:path('M194,160 H120 V200 H60');animation-delay:1.2s}
.ab[data-mode="tech"] .spark{animation:sp 2.4s infinite}
@keyframes sp{0%{opacity:0;offset-distance:0%}10%{opacity:1}90%{opacity:1}100%{opacity:0;offset-distance:100%}}
/* явный тумблер под мозгом: ползунок едет к выбранному режиму */
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(520px,100%);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px;box-shadow:0 10px 30px -18px rgba(24,35,31,.35)}
.seg .thumb{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--ink);transition:transform .45s cubic-bezier(.6,-0.2,.3,1.3)}
.ab[data-mode="hum"] .seg .thumb{transform:translateX(100%)}
.seg button{position:relative;z-index:1;display:grid;justify-items:center;gap:1px;background:none;border:0;border-radius:999px;padding:11px 14px;cursor:pointer;color:var(--ink);transition:color .3s;font:inherit}
.seg button b{font:700 17px var(--sans);letter-spacing:-.01em}
.seg button small{font-size:12.5px;color:var(--mut);transition:color .3s}
.seg #s-tech b{font-family:var(--mono)}
.seg #s-tech b::before{content:"> ";color:var(--neon)}
.seg #s-hum b::before{content:"● ";color:var(--deliv)}
.seg button[aria-checked="true"]{color:var(--bg)}
.seg button[aria-checked="true"] small{color:var(--bg);opacity:.7}
.seg button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* подсказка «нажмите» на невыбранном полушарии — до первого выбора */
.hint{opacity:0;pointer-events:none;transition:opacity .3s}
.ab:not(.chosen) .hemi[aria-checked="false"] .hint{opacity:1}
.hint .ring{fill:none;stroke:var(--acc);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:ring 1.8s ease-out infinite}
.hint .dot{fill:var(--acc)}
.hint rect{fill:var(--ink)}.hint text{font:700 13px var(--sans);fill:var(--bg)}
@keyframes ring{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.6);opacity:0}}
.footnote{text-align:center;font-size:12.5px;color:var(--mut);margin:14px 0 8px}
/* без JS переключать нечем: остаётся заголовок, дальше — карта метро */
html:not(.js) .chooser>:not(h1){display:none}
html:not(.js) .chooser h1 span{display:none}
html:not(.js) .chooser{padding-bottom:8px}
html:not(.js) .dock,html:not(.js) .dock-sentinel,html:not(.js) .footnote{display:none}

/* ===== ВИД «ТЕРМИНАЛ» (.vt) ===== */
.view[hidden]{display:none!important}
.vt .window{background:#0f1512;border:1px solid #24322b;border-radius:16px;box-shadow:0 40px 90px -40px rgba(61,220,151,.25);overflow:hidden;display:grid;grid-template-columns:280px 1fr;min-height:600px}
.vt .bar{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:12px 16px;background:#161f1b;border-bottom:1px solid #222d27}
.vt .bar i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.vt .bar i:nth-child(2){background:#febc2e}.vt .bar i:nth-child(3){background:#28c840}
.vt .bar span{flex:1;text-align:center;font:12px var(--mono);color:#6f877b;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt .side{border-right:1px solid #222d27;padding:22px;color:#d6e4dc;font:12.5px var(--mono);display:flex;flex-direction:column;gap:18px}
.vt .ph{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#0b0f0d}
.vt .ph::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),linear-gradient(180deg,rgba(61,220,151,.18),rgba(61,220,151,.05));transition:opacity .6s}
.vt .kv{display:grid;gap:7px}
.vt .kv div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #26332c;padding-bottom:6px}
.vt .kv dt{color:#6f877b}.vt .kv dd{text-align:right}
.vt .ok{color:var(--neon)}
.vt .res{display:grid;gap:8px}
.vt .res label{display:flex;justify-content:space-between;color:#6f877b}
.vt .meter{height:6px;border-radius:3px;background:#1d2823;overflow:hidden}
.vt .meter b{display:block;height:100%;background:var(--neon)}
.vt .m92{width:92%}.vt .m80{width:80%}.vt .m56{width:56%}
.vt .term{padding:22px 26px 18px;font:14px/1.65 var(--mono);color:#d6e4dc;display:flex;flex-direction:column;min-width:0}
.vt #out{flex:1;overflow:auto;max-height:540px;padding-right:6px}
.vt .l{white-space:pre-wrap;word-break:break-word}
.vt .pr{color:var(--neon)}.vt .pr b{color:#8ab8ff;font-weight:500}
.vt .m{color:#6f877b}.vt .a{color:var(--amber)}.vt .g{color:var(--neon)}.vt .bl{color:#8ab8ff}.vt .w{color:#fff;font-weight:700}
.vt .big{font:700 clamp(22px,3vw,34px)/1.15 var(--sans);color:#fff;letter-spacing:-.02em;margin:6px 0 4px}
.vt .row{display:grid;grid-template-columns:150px 1fr;gap:14px}
.vt .hb{display:inline-block;height:10px;background:var(--neon);border-radius:2px;vertical-align:middle;margin-right:8px}
.vt .hb-22{width:264px}.vt .hb-20{width:240px}.vt .hb-18{width:216px}.vt .hb-12{width:144px}
.vt .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.vt .chips .or{font:12.5px var(--mono);color:#6f877b;margin-right:2px}
.vt .chips button{font:500 13px var(--mono);color:#d6e4dc;background:#18221d;border:1px solid #2a3831;border-radius:8px;padding:7px 12px;cursor:pointer}
.vt .chips button:hover,.vt .chips button:focus-visible{border-color:var(--neon);color:var(--neon);outline:none}
/* строка ввода — отдельная панель сразу после вывода (ТЗ about-cmdline-photo): рамка, блочный курсор и «призрак» с примерами */
.vt .input{display:flex;gap:10px;align-items:center;margin-top:14px;padding:12px 14px;background:#121b16;border:1px solid #2f4238;border-radius:12px;cursor:text;transition:border-color .2s,box-shadow .2s}
.vt .input .pr{white-space:nowrap}
.vt .input:focus-within{border-color:var(--neon);box-shadow:0 0 0 3px rgba(61,220,151,.16),0 0 28px -6px rgba(61,220,151,.45)}
.vt .field{position:relative;flex:1;min-width:0;display:flex}
.vt .field input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:15px var(--mono);caret-color:var(--neon)}
.vt .ghost{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;font:15px var(--mono);color:#5d7a6c;white-space:nowrap;overflow:hidden}
.vt .field input:not(:placeholder-shown)+.ghost{display:none}
.vt .blk{display:inline-block;width:.6em;height:1.15em;margin-left:1px;background:var(--neon);animation:blink 1s steps(1) infinite}
.vt .input:focus-within .blk{animation-duration:.8s}
.vt .enter{font:11.5px var(--mono);color:#6f877b;border:1px solid #2f4238;border-radius:6px;padding:3px 7px;white-space:nowrap}
.vt .input.attn{animation:attn 1.4s ease-out 2}
@keyframes attn{0%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}100%{box-shadow:0 0 0 14px rgba(61,220,151,0)}}
.vt .cur{display:inline-block;width:8px;height:16px;background:var(--neon);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.vt>.hint{opacity:1;pointer-events:auto;margin:14px 0 0;color:var(--mut);font-size:13px;text-align:center}

/* ===== ВИД «МЕТРО» (.vh) ===== */
.vh .intro{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:end;padding:0 0 24px;overflow:visible}
.vh .intro h2{font-size:clamp(28px,3.6vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:800;margin:0}
.vh .intro p{color:var(--mut);font-size:17px;margin-top:6px;max-width:640px}
.vh .map-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:22px 22px 8px;box-shadow:0 30px 60px -40px rgba(24,35,31,.3)}
.vh .map-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:4px 6px 8px}
.vh .map-head h3{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0}
.vh .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--ink2)}
.vh .legend span{display:flex;align-items:center;gap:7px}
.vh .legend i{width:22px;height:6px;border-radius:3px}
.vh .scroll{overflow-x:auto}
.vh .map{display:block;min-width:900px;width:100%;height:auto}
.vh .ln{fill:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.vh .draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:dr 1.6s cubic-bezier(.6,0,.2,1) forwards}
.vh .d2{animation-delay:.5s}.vh .d3{animation-delay:.9s}.vh .d4{animation-delay:1.3s}
@keyframes dr{to{stroke-dashoffset:0}}
.vh .st{cursor:pointer;outline:none}
.vh .st circle,.vh .st rect{fill:#fff;stroke:#18231f;stroke-width:4;transition:transform .2s;transform-box:fill-box;transform-origin:center}
.vh .st:hover circle,.vh .st:hover rect,.vh .st:focus-visible circle,.vh .st:focus-visible rect{transform:scale(1.25)}
.vh .st.on circle,.vh .st.on rect{fill:#18231f}
.vh .st text{font:600 14px var(--sans);fill:#18231f}
.vh .st text.y{font:500 12px var(--sans);fill:#5b6b64}
.vh .st text.now{font-weight:800}
.vh .here-bg{fill:var(--ai)}
.vh .here{font:700 11px var(--sans);fill:#fff;letter-spacing:.06em}
.vh .st circle.pulse{fill:var(--ai);stroke:none;opacity:.25;animation:pu 2s infinite}
@keyframes pu{0%{transform:scale(.6);opacity:.4}100%{transform:scale(1.6);opacity:0}}
.vh .details{display:grid;gap:20px;margin-top:20px}
.vh .detail{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;padding:28px;border-radius:22px;background:#fff;border:1px solid var(--line);min-height:200px}
.vh .d-line{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:5px 12px 5px 6px;border-radius:999px;background:var(--bg)}
.vh .d-line i{width:16px;height:16px;border-radius:50%;border:4px solid currentColor;background:#fff}
.vh .d-line span{color:#18231f}
.vh .detail h4{font-size:clamp(24px,3vw,34px);letter-spacing:-.025em;margin:12px 0 4px;line-height:1.1}
.vh .detail .role{color:var(--mut)}
.vh .detail ul{list-style:none;display:grid;gap:10px;align-content:start}
.vh .detail li{display:grid;grid-template-columns:1fr;gap:14px;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--line)}
.vh .detail li:last-child{border-bottom:0}
.vh .detail li b{font-size:20px;letter-spacing:-.02em}
.vh .detail li span{color:var(--ink2)}
.vh .d-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.vh .logo-s{height:28px;object-fit:contain;max-width:120px}
.vh .story{margin-top:16px;font-size:17.5px;line-height:1.6;color:#18231f;max-width:60ch;padding-left:16px;border-left:3px solid var(--line);text-wrap:pretty}
.vh .got{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin-bottom:12px}
/* с JS открыта одна карточка (выбранная станция), без JS — все списком */
html.js .vh .detail:not(.on){display:none}
html.js .vh .detail.on{min-height:200px}
.vh .detail.fade{animation:fd .35s ease}
@keyframes fd{from{opacity:0;transform:translateY(6px)}}
.vh .signs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:40px 0 0}
.vh .sign{display:flex;gap:14px;align-items:center;background:#18231f;color:#fff;border-radius:18px;padding:20px}
.vh .sign i{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 17px var(--sans);font-style:normal}
.vh .sign b{display:block;font-size:22px;letter-spacing:-.02em;line-height:1.1}
.vh .sign span{font-size:13px;color:#b6c3bd}
.vh .lines{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.vh .lines a{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 18px 24px;overflow:hidden}
.vh .lines a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c)}
.vh .lines b{display:block;font-size:17px}.vh .lines span{font-size:14px;color:var(--mut)}
.vh h3.sec{font-size:clamp(24px,2.8vw,34px);letter-spacing:-.03em;margin:56px 0 0}

.ab .end{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin:72px 0 0;padding:36px 0 52px;border-top:1px solid var(--hair)}
.end small{display:block;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.end a.big{font-size:clamp(26px,4vw,46px);font-weight:800;letter-spacing:-.03em}
.ab[data-mode="tech"] .end a.big{font-family:var(--mono);font-weight:700}
.end a.big:hover{color:var(--acc)}
.end-btns{display:flex;gap:10px;flex-wrap:wrap}
.end .k-tech,.ab[data-mode="tech"] .end .k-hum{display:none}
.ab[data-mode="tech"] .end .k-tech{display:block}

/* тёмная область доходит вплотную до светлого подвала платформы (иначе виден зазор от .site-footer{margin-top}) */
body:has(.ab[data-mode="tech"]) .site-footer{margin-top:0}

/* ===== доработка 2: терминал — чип скачивания, «выключение», matrix ===== */
.vt{position:relative}.vt .term{position:relative}
.vt .window{transform-origin:center}
.vt .chips button.dl{border-color:var(--amber);color:var(--amber)}
.vt .window.off{animation:crt .7s cubic-bezier(.7,0,.3,1) forwards}
@keyframes crt{0%{transform:scale(1,1);filter:brightness(1)}55%{transform:scale(1,.006);filter:brightness(3)}100%{transform:scale(0,.006);filter:brightness(6);opacity:0}}
.vt .bye{position:absolute;inset:0 0 40px;display:grid;place-items:center;align-content:center;gap:16px;font:15px var(--mono);color:var(--ink);text-align:center}
.vt .bye div{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.vt .bye button{font:600 14px var(--mono);color:#d6e4dc;background:#18221d;border:1px solid #2a3831;border-radius:8px;padding:9px 14px;cursor:pointer}
.vt .bye button:hover,.vt .bye button:focus-visible{border-color:var(--neon);color:var(--neon);outline:none}
.vt .mx{position:absolute;inset:0;width:100%;height:100%;border-radius:0 0 16px 0;pointer-events:none}

/* ===== доработка 2: карта — фото на конечной, «Ваша компания», слой «Масштаб управления» ===== */
.vh .st.me .ring{fill:#fff;stroke:var(--ai);stroke-width:6}
.vh .st.me.on .ring{fill:#fff;stroke-width:9}
.vh .st.me:hover .ring,.vh .st.me:focus-visible .ring{transform:none;stroke-width:9}
.vh .future{fill:none;stroke:var(--ai);stroke-width:8;stroke-linecap:round;stroke-dasharray:2 16;opacity:.7}
.vh .st.next .q{fill:#fff;stroke:var(--ai);stroke-width:4;stroke-dasharray:6 5}
.vh .st.next.on .q{fill:var(--ai);stroke-dasharray:none}
.vh .st.next .qm{font:800 20px var(--sans);fill:var(--ai)}
.vh .st.next.on .qm{fill:#fff}
.vh .st .tb rect{fill:#18231f;stroke:none;transform:none}
.vh .st .tb text{font:700 12px var(--sans);fill:#fff}
.vh .st .tb.ai rect{fill:var(--ai)}
.vh .map .rib{fill:none;stroke:#18231f;stroke-linecap:round;opacity:0;transition:opacity .4s}
.vh .map .tb{opacity:0;transition:opacity .4s}
.vh .map.mgmt .ln,.vh .map.mgmt .future{opacity:.15;transition:opacity .4s}
.vh .map.mgmt .rib{opacity:.9}.vh .map.mgmt .tb{opacity:1}.vh .map.mgmt text.y{opacity:0}
.vh .layer{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px;margin-left:14px;vertical-align:middle}
.vh .layer button{font:600 13px var(--sans);border:0;background:none;color:var(--ink2);padding:6px 14px;border-radius:999px;cursor:pointer}
.vh .layer button[aria-pressed="true"]{background:#18231f;color:#fff}
.vh .mg-hint{display:none;font-size:13px;color:var(--mut);margin:0 6px 4px}
.vh .mg-sum{display:none;margin:16px 6px 6px;font-size:15px;color:var(--ink2)}.vh .mg-sum b{color:#18231f}
.vh .map-card.mgmt .mg-hint,.vh .map-card.mgmt .mg-sum{display:block}
html:not(.js) .vh .layer{display:none}
.vh .next-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.vh .next-cta a{font-weight:600;font-size:14px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff}
.vh .next-cta a.solid{background:#18231f;color:#fff;border-color:#18231f}

/* билет с резюме */
.vh .ticket{display:grid;grid-template-columns:1fr auto;margin:20px 0 0;border-radius:22px;background:#fff;border:1px solid var(--line);overflow:hidden;position:relative}
.vh .ticket::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,var(--infra),var(--deliv) 35%,var(--prod) 70%,var(--ai))}
.vh .t-main{padding:28px 28px 24px;display:grid;gap:6px}
.vh .t-k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.vh .t-main b{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.025em;line-height:1.1}
.vh .t-main span{color:var(--ink2)}
.vh .t-route{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:13px;color:var(--mut);flex-wrap:wrap}
.vh .t-route i{width:10px;height:10px;border-radius:50%;border:3px solid currentColor}
.vh .t-stub{position:relative;display:grid;place-items:center;align-content:center;gap:8px;padding:24px 34px;border-left:2px dashed var(--line);background:var(--bg);transition:transform .35s cubic-bezier(.3,1.4,.5,1);transform-origin:left center}
.vh .t-stub::before,.vh .t-stub::after{content:"";position:absolute;left:-13px;width:24px;height:24px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.vh .t-stub::before{top:-13px}.vh .t-stub::after{bottom:-13px}
.vh .ticket:hover .t-stub{transform:rotate(3deg) translateX(4px)}
.vh .t-stub a{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;background:#18231f;color:#fff;border-radius:999px;padding:12px 22px}
.vh .t-stub a:hover{background:var(--ai)}
.vh .t-stub small{font-size:12px;color:var(--mut)}
@media (max-width:720px){.vh .ticket{grid-template-columns:1fr}.vh .t-stub{border-left:0;border-top:2px dashed var(--line)}.vh .t-stub::before{left:-13px;top:-13px}.vh .t-stub::after{left:auto;right:-13px;top:-13px;bottom:auto}.vh .ticket:hover .t-stub{transform:none}}

/* круговая заливка при смене режима (View Transitions API) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:reveal .7s cubic-bezier(.7,0,.2,1)}
@keyframes reveal{from{clip-path:circle(0 at var(--x,50%) var(--y,30%))}to{clip-path:circle(150vmax at var(--x,50%) var(--y,30%))}}

@media (max-width:900px){.chooser{grid-template-columns:1fr 1fr;gap:12px}.brain-wrap{grid-column:1/-1;grid-row:2;max-width:360px;margin:0 auto;width:100%}.side-l,.side-r{grid-row:3}.side-l{text-align:left}.side-l .opt{justify-items:start}.side-l .d{text-align:left}
  .vt #out{max-height:none;overflow:visible;padding-right:0}
  .vt .window{grid-template-columns:1fr}.vt .side{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid #222d27}.vt .ph{width:100px}.vt .kv{flex:1;min-width:190px}.vt .res{width:100%}.vt .row{grid-template-columns:1fr;gap:0}
  .vh .detail{grid-template-columns:1fr}.vh .signs,.vh .lines{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.ab .wrap{padding:0 16px}.vt .term{padding:16px}.vt .enter{display:none}.vt .input{padding:11px 12px}.vt #out .ascl{font-size:5.6px}
  .vh .intro{grid-template-columns:1fr;justify-items:center;text-align:center;padding-top:70px}.vh .signs,.vh .lines{grid-template-columns:1fr}.vh .map-card{padding:16px 10px 4px}.side-l,.side-r{display:none}
  .vt .hb-22{width:min(264px,60vw)}.vt .hb-20{width:min(240px,55vw)}.vt .hb-18{width:min(216px,50vw)}.vt .hb-12{width:min(144px,33vw)}.vh .detail{padding:20px}}
@media (prefers-reduced-motion:reduce){.vt .blk,.vt .input.attn{animation:none}.vt .window.off{animation:none;visibility:hidden}.hint .ring{animation:none}.seg .thumb{transition:none}::view-transition-new(root){animation:none}.vt .cur,.vh .draw,.vh .st circle.pulse,.ab[data-mode="tech"] .spark{animation:none}.vh .draw{stroke-dashoffset:0}.vh .detail.fade{animation:none}.ab{transition:none}}

/* Переключатель-«док»: на месте — крупный, при прокрутке сжимается в пилюлю и прилипает к верху (about.js ставит .stuck) */
.chooser{padding-bottom:20px}
.dock-sentinel{height:1px;margin-bottom:-1px}
.dock{position:sticky;top:calc(var(--pf-header-h) + env(safe-area-inset-top,0px) + 12px);z-index:30;display:flex;justify-content:center;pointer-events:none}
.dock .seg{pointer-events:auto;transition:width .35s cubic-bezier(.3,.7,.2,1),padding .35s,box-shadow .35s,background-color .35s}
.dock .seg button{transition:color .3s,padding .35s}
.dock .seg b{transition:font-size .35s}
.dock .seg small{max-height:20px;overflow:hidden;transition:max-height .3s,opacity .2s,color .3s}
.dock .seg .thumb{transition:transform .45s cubic-bezier(.6,-0.2,.3,1.3),top .35s,bottom .35s,left .35s,width .35s}
.dock.stuck .seg{width:min(300px,100%);padding:4px;background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 14px 34px -14px rgba(0,0,0,.45)}
.dock.stuck .seg .thumb{top:4px;bottom:4px;left:4px;width:calc(50% - 4px)}
.dock.stuck .seg button{padding:7px 10px}
.dock.stuck .seg b{font-size:15px}
.dock.stuck .seg small{max-height:0;opacity:0}
.vt .input input{scroll-margin-top:72px}
@media (prefers-reduced-motion:reduce){.dock .seg,.dock .seg *{transition:none!important}}

/* ASCII-фото в панели: портрет собран из символов (их строит сервер); наведение/фокус/клик — символы гаснут, проступает фото */
.vt .ph img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.vt .ph .asc{position:absolute;inset:0;margin:0;display:grid;place-content:center;font-family:var(--mono);font-size:var(--asc-fs,7px);line-height:1;color:var(--neon);text-shadow:0 0 6px rgba(61,220,151,.5);white-space:pre;overflow:hidden}
.vt .ph{cursor:pointer;outline:none}
.vt .ph:focus-visible{box-shadow:0 0 0 2px var(--neon)}
.vt .ph.on img{opacity:1}.vt .ph.on::after{opacity:0}
.vt .asc-tip{position:absolute;left:8px;bottom:8px;z-index:2;white-space:nowrap;font:10.5px var(--mono);color:#6f877b;background:rgba(10,15,12,.8);padding:2px 6px;border-radius:4px;transition:opacity .3s}
.vt .ph.on .asc-tip{opacity:0}
.vt #out .ascl{color:var(--neon);font-size:8.5px;line-height:1;white-space:pre;letter-spacing:0}

/* Пропуск на ленточке (гуманитарий): висит и качается (about.js), тянется мышью/пальцем, по клику переворачивается.
   Без JS виден лицевая сторона; оборот скрыт и недоступен с клавиатуры (visibility, переключается на середине переворота) */
.badge-wrap{position:relative;width:180px;height:300px;touch-action:none;user-select:none}
.badge-wrap .sway{position:absolute;inset:0;transform-origin:90px -60px}
.badge-wrap .strap{position:absolute;left:78px;top:-60px;width:24px;height:96px;background:repeating-linear-gradient(135deg,var(--infra) 0 10px,#0a5a3f 10px 20px);border-radius:3px}
.badge-wrap .strap::after{content:"ki-ri.ru · ki-ri.ru";position:absolute;inset:0;writing-mode:vertical-rl;font:700 9px var(--mono);color:#fff;opacity:.85;display:grid;place-items:center;letter-spacing:.1em}
.badge{position:absolute;left:0;top:30px;width:180px;height:256px;perspective:900px;cursor:grab;outline:none}
.badge:active{cursor:grabbing}
.badge:focus-visible .b-front,.badge:focus-visible .b-back{outline:2px solid var(--acc);outline-offset:3px}
.b-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.badge.flip .b-in{transform:rotateY(180deg)}
.b-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 22px 40px -22px rgba(24,35,31,.55);display:flex;flex-direction:column;align-items:center;padding:26px 14px 14px;text-align:center;overflow:hidden}
.b-front::before{content:"";position:absolute;left:0;right:0;top:0;height:64px;background:linear-gradient(90deg,var(--infra),var(--deliv),var(--prod),var(--ai))}
.b-face .clip{position:absolute;top:8px;left:50%;width:44px;height:10px;margin-left:-22px;border-radius:6px;background:#dfe7e2;box-shadow:inset 0 1px 2px rgba(0,0,0,.25);z-index:2}
.b-face .org{position:relative;z-index:1;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:8px}
.b-back .org{color:var(--mut)}
.vh .intro .b-front img{position:relative;z-index:1;width:92px;height:92px;border-radius:12px;object-fit:cover;border:3px solid #fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.b-front b{font-size:16px;margin-top:10px;letter-spacing:-.01em}
.b-front .role{font-size:12px;color:var(--mut)}
.b-front .acc{margin-top:8px;font:700 9.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#b42318;border:1.5px solid #b42318;border-radius:6px;padding:3px 6px}
.b-front .code{margin-top:auto;width:120px;height:16px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px)}
.b-back{transform:rotateY(180deg);justify-content:center;gap:10px;visibility:hidden;transition:visibility 0s linear .3s}
.badge.flip .b-back{visibility:visible}
.vh .intro .b-back p{font-size:13px;line-height:1.4;color:var(--ink);margin:0}
.b-back .bb{display:block;width:100%;padding:9px 10px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:13px;text-decoration:none}
.b-back .bb.lt{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.b-tip{position:absolute;left:0;right:0;bottom:-8px;text-align:center;font-size:11.5px;color:var(--mut)}
@media (prefers-reduced-motion:reduce){.vt .ph img,.vt .ph::after,.vt .asc-tip,.b-in,.b-back{transition:none}}