/* ── СИНДИКАТ RP · сайт (прототип) ──────────────────────────────────────
   Обычный браузер с видеокартой, но язык тот же, что у экрана загрузки:
   ночной план города, изумруд, стенсил, бумага дела. Переменные --em, --nar,
   --hj и прочие нужны и схемам из shared/css/vig.css.                    */

@font-face{font-family:"Syn Stencil";src:url(../shared/fonts/stencil.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Syn Handjet";src:url(../shared/fonts/handjet.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Syn Handjet";src:url(../shared/fonts/handjet-sb.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Syn PT";src:url(../shared/fonts/ptsans.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Syn PT";src:url(../shared/fonts/ptsans-b.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Syn Narrow";src:url(../shared/fonts/ptnarrow.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Syn Narrow";src:url(../shared/fonts/ptnarrow-b.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#050706; --bg2:#0A0E0C; --panel:rgba(6,9,8,.88);
  --ink:#EEF2EF; --ink2:#A9B4AE; --ink3:#6E7A74; --ink4:#3C4742;
  --line:#16201C; --line2:#22302A; --line3:#2E3F37;
  --em:#2ECC71; --em2:#27AE60; --em3:#1B7A44; --emA:rgba(46,204,113,.14); --emB:rgba(46,204,113,.32);
  --amb:#F1C40F; --red:#E74C3C; --stamp:#C8372B; --paper:#E3DED1;
  --stencil:"Syn Stencil",Impact,sans-serif;
  --hj:"Syn Handjet",Consolas,monospace;
  --pt:"Syn PT",Arial,sans-serif;
  --nar:"Syn Narrow","Arial Narrow",Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --cut:cubic-bezier(.7,0,.2,1);
  --gut:clamp(16px,4.2vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:17px/1.55 var(--pt);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-style:normal;color:var(--em)}
::selection{background:var(--em);color:#04120A}
:focus-visible{outline:2px solid var(--em);outline-offset:3px}

/* ── фон: карта, затемнение, зерно ───────────────────────────────────────── */
#map{position:fixed;left:0;top:0;width:100%;height:100%;display:block;z-index:0}
#shade{position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:1;transition:opacity 1.2s ease;
  background:
    radial-gradient(130% 100% at 68% 45%,rgba(5,7,6,0) 0,rgba(5,7,6,.25) 62%,rgba(5,7,6,.8) 100%),
    linear-gradient(90deg,rgba(5,7,6,.9) 0,rgba(5,7,6,.66) 32%,rgba(5,7,6,.05) 60%,rgba(5,7,6,0) 100%)}
#shade:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:var(--bg);opacity:0;transition:opacity 1s ease}
body.sec-manifest #shade:after{opacity:.55}
body.dim #shade:after{opacity:.62}
body.sec-end #shade:after{opacity:.35}
#grain{position:fixed;left:-50%;top:-50%;width:200%;height:200%;pointer-events:none;z-index:60;opacity:.055;
  animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}
  60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

main{position:relative;z-index:2}

/* ── булавка на карте ───────────────────────────────────────────────────── */
.pin{position:fixed;left:0;top:0;width:0;height:0;opacity:0;z-index:1;transition:opacity .5s ease;pointer-events:none}
.pin.on{opacity:1}
.pin-dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;background:var(--em);
  box-shadow:0 0 0 3px rgba(5,7,6,.9),0 0 18px 2px rgba(46,204,113,.55);transform:rotate(45deg)}
.pin-cross{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border:1px solid rgba(46,204,113,.5);border-radius:50%}
.pin-cross:before,.pin-cross:after{content:"";position:absolute;background:rgba(46,204,113,.5)}
.pin-cross:before{left:45px;top:-12px;width:1px;height:114px}
.pin-cross:after{top:45px;left:-12px;height:1px;width:114px}
.pin-ring{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border:2px solid var(--em);border-radius:50%;opacity:0}
.pin.on .pin-ring{animation:ping 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.pin.on .pin-ring.r2{animation-delay:1.2s}
@keyframes ping{0%{transform:scale(.15);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.pin-tag{position:absolute;left:70px;top:-30px;white-space:nowrap;padding-left:14px;border-left:2px solid var(--em)}
.pin-tag b{display:block;font:700 19px/1.1 var(--nar);letter-spacing:.14em;text-transform:uppercase}
.pin-tag span{display:block;margin-top:4px;font:15px/1.2 var(--pt);color:var(--ink2)}
.pin-tag i{display:block;margin-top:5px;font:600 15px/1 var(--hj);font-style:normal;color:var(--ink3);letter-spacing:.08em}

/* ── верхняя полоса ─────────────────────────────────────────────────────── */
#top{position:fixed;left:0;right:0;top:0;height:68px;z-index:50;display:flex;align-items:center;gap:32px;
  padding:0 var(--gut);transition:background .5s ease,border-color .5s ease,transform .6s var(--cut);
  border-bottom:1px solid transparent}
body.scrolled #top{background:rgba(5,7,6,.82);border-bottom-color:var(--line2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
body.boot #top{transform:translateY(-100%)}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-mk{width:30px;height:30px;overflow:visible}
.brand-w{font:22px/1 var(--stencil);letter-spacing:.06em}
.brand-w b{font-weight:400;color:var(--em);margin-left:7px}
#nav{display:flex;gap:4px;margin-left:12px}
#nav a{position:relative;padding:10px 14px;font:700 13px/1 var(--nar);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);
  transition:color .25s}
#nav a:after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:1px;background:var(--em);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
#nav a:hover{color:var(--ink)} #nav a:hover:after{transform:scaleX(1)}
#nav a.soon{color:var(--ink3)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:18px}
.live{display:flex;align-items:baseline;gap:6px;font:600 20px/1 var(--hj);color:var(--ink)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--em);align-self:center;box-shadow:0 0 0 0 rgba(46,204,113,.6);animation:live 2s infinite}
.live span{font-size:15px;color:var(--ink3)}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(46,204,113,.55)}70%{box-shadow:0 0 0 9px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}
.steam{display:flex;align-items:center;gap:10px;height:40px;padding:0 16px;border:1px solid var(--line3);
  font:700 12px/1 var(--nar);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);transition:border-color .25s,color .25s,background .25s}
.steam svg{width:18px;height:18px;fill:currentColor}
.steam:hover{border-color:var(--em);color:var(--ink);background:var(--emA)}

#coord{position:fixed;left:var(--gut);bottom:22px;z-index:40;display:flex;gap:18px;font:600 14px/1 var(--hj);
  letter-spacing:.08em;color:var(--ink3);pointer-events:none;transition:opacity .6s}
#coord span:first-child:before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;background:var(--em);transform:rotate(45deg) translateY(-1px)}
body.boot #coord{opacity:0}

/* засекреченное место - красная булавка */
.pin.secret .pin-dot{background:var(--red);box-shadow:0 0 0 3px rgba(5,7,6,.9),0 0 18px 2px rgba(231,76,60,.5)}
.pin.secret .pin-ring{border-color:var(--red)}
.pin.secret .pin-cross{border-color:rgba(231,76,60,.5)}
.pin.secret .pin-cross:before,.pin.secret .pin-cross:after{background:rgba(231,76,60,.5)}
.pin.secret .pin-tag{border-left-color:var(--red)}
.pin.secret .pin-tag b{color:var(--red)}

/* полоса дел слева */
#rail{position:fixed;left:calc(var(--gut) * .32);top:50%;z-index:45;display:flex;flex-direction:column;gap:6px;
  transform:translate(-12px,-50%);opacity:0;pointer-events:none;transition:opacity .5s,transform .6s var(--ease)}
body.in-cases #rail{opacity:1;transform:translate(0,-50%);pointer-events:auto}
#rail a{position:relative;display:flex;align-items:center;gap:10px;height:26px;font:600 14px/1 var(--hj);color:var(--ink4);transition:color .25s}
#rail a:before{content:"";width:10px;height:1px;background:currentColor;transition:width .35s var(--ease)}
#rail a span{font:700 11px/1 var(--nar);letter-spacing:.2em;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .35s var(--ease);
  padding:6px 9px;background:rgba(5,7,6,.94);border:1px solid var(--line2);pointer-events:none}
#rail a:hover,#rail a.on{color:var(--em)}
#rail a.on:before{width:22px}
#rail a:hover span{opacity:1;transform:none;color:var(--ink)}

/* ── общие куски ────────────────────────────────────────────────────────── */
.kick{display:flex;align-items:center;gap:14px;font:700 13px/1 var(--nar);letter-spacing:.26em;text-transform:uppercase;color:var(--ink2)}
.kick b{color:var(--em)}
.kick i{width:44px;height:1px;background:var(--line3)}
.btn-play{position:relative;display:inline-flex;align-items:center;gap:16px;height:60px;padding:0 26px 0 30px;overflow:hidden;
  background:var(--em);color:#03120A;font:700 16px/1 var(--nar);letter-spacing:.24em;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  transition:background .3s}
.btn-play:before{content:"";position:absolute;left:-60%;top:0;width:40%;height:100%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transform:skewX(-20deg);
  animation:sheen 4.5s ease-in-out 2.5s infinite}
@keyframes sheen{0%{left:-60%}22%{left:130%}100%{left:130%}}
.btn-play svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .35s var(--ease)}
.btn-play:hover{background:#4BE08A} .btn-play:hover svg{transform:translateX(5px)}
.btn-ghost{display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 24px;border:1px solid var(--line3);
  font:700 15px/1 var(--nar);letter-spacing:.22em;color:var(--ink);transition:border-color .3s,background .3s}
.btn-ghost svg{width:22px;height:22px;fill:currentColor}
.btn-ghost:hover{border-color:#5865F2;background:rgba(88,101,242,.12)}
.ip{display:inline-flex;align-items:center;gap:14px;height:44px;padding:0 4px 0 0;font:600 19px/1 var(--hj);letter-spacing:.06em;color:var(--ink2)}
.ip-l{font:700 11px/1 var(--nar);letter-spacing:.24em;color:var(--ink3)}
.ip b{font-weight:600;color:var(--ink)}
.ip-c{font:700 11px/1 var(--nar);letter-spacing:.22em;color:var(--em);padding:6px 8px;border:1px dashed rgba(46,204,113,.4);transition:background .2s}
.ip:hover .ip-c{background:var(--emA)}
.ip.ok .ip-c{background:var(--em);color:#03120A;border-style:solid}

/* ── 1. первый экран ────────────────────────────────────────────────────── */
#hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;padding:110px var(--gut) 120px}
.h-txt{position:relative;z-index:2;max-width:720px}
.word{display:flex;align-items:flex-start;gap:.12em;margin:26px 0 22px;font:400 clamp(64px,9.6vw,176px)/.86 var(--stencil);letter-spacing:.01em}
.word .nm{display:inline-block;white-space:nowrap}
.word .ch{display:inline-block;transform:translateY(.5em);opacity:0;filter:blur(8px);
  transition:transform 1s var(--ease),opacity .7s ease,filter .9s ease}
body.go .word .ch{transform:none;opacity:1;filter:none}
.word .rp{font-size:.34em;line-height:1;margin-top:.06em;color:transparent;-webkit-text-stroke:1.5px var(--em);
  opacity:0;transform:translateX(-14px);transition:opacity .8s ease 1.1s,transform 1s var(--ease) 1.1s}
body.go .word .rp{opacity:1;transform:none}
.h-txt .lead{max-width:560px;font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--ink2)}
.h-txt .cta{display:flex;flex-wrap:wrap;gap:14px;margin:38px 0 18px}
.h-txt .kick,.h-txt .lead,.h-txt .cta,.h-txt .ip{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform 1s var(--ease)}
body.go .h-txt .kick{opacity:1;transform:none;transition-delay:.1s}
body.go .h-txt .lead{opacity:1;transform:none;transition-delay:1.25s}
body.go .h-txt .cta{opacity:1;transform:none;transition-delay:1.45s}
body.go .h-txt .ip{opacity:1;transform:none;transition-delay:1.6s}
.kick .caret{display:inline-block;width:.55em;height:1em;margin-left:2px;background:var(--em);vertical-align:-.15em;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

.h-emb{position:relative;justify-self:center;width:min(40vw,60vh,600px);margin-top:-40px;aspect-ratio:1/1;z-index:1}
.h-emb canvas{position:absolute;left:-13.6%;top:-13.6%;width:127.2%;height:127.2%;cursor:pointer}
.h-emb:before{content:"";position:absolute;left:-20%;top:-20%;width:140%;height:140%;
  background:radial-gradient(closest-side,rgba(46,204,113,.16),rgba(46,204,113,.05) 50%,rgba(46,204,113,0));
  opacity:0;transition:opacity 2s ease 1.5s}
body.go .h-emb:before{opacity:1}
.h-ring{position:absolute;left:-6%;top:-6%;width:112%;height:112%;overflow:visible;opacity:0;transition:opacity 1.5s ease 2.2s}
body.go .h-ring{opacity:1}
.h-ring text{font:700 12.5px var(--nar);letter-spacing:.42em;fill:var(--ink3)}
.rg-a{animation:spin 90s linear infinite;transform-origin:0 0}
.rg-b{animation:spin 140s linear infinite reverse;transform-origin:0 0}
.rg-b line{stroke:var(--line3)} .rg-b line.L{stroke:var(--em);stroke-opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}

/* полоса «сейчас в городе» по низу первого экрана */
.h-now{position:absolute;left:var(--gut);right:var(--gut);bottom:84px;z-index:3;display:flex;align-items:stretch;
  border-top:1px solid var(--line2);
  opacity:0;transform:translateY(20px);transition:opacity .9s ease 1.9s,transform 1s var(--ease) 1.9s}
body.go .h-now{opacity:1;transform:none}
.hn-h{display:flex;align-items:flex-start;gap:12px;padding:16px 28px 0 0;font:700 11.5px/1.35 var(--nar);letter-spacing:.24em;color:var(--ink2)}
.demo{padding:3px 6px;border:1px solid rgba(241,196,15,.45);color:var(--amb);font-size:10px;line-height:1;letter-spacing:.2em}
.hn-c{position:relative;min-width:150px;padding:16px 28px 0;border-left:1px solid var(--line2)}
.hn-c span{display:block;font:700 11px/1 var(--nar);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.hn-c b{display:block;margin-top:9px;font:600 24px/1 var(--hj);color:var(--ink);letter-spacing:.03em;white-space:nowrap}
.hn-c b.ok{color:var(--em)} .hn-c em{color:var(--ink)}
.hn-bar{height:3px;margin-top:9px;background:var(--line2);overflow:hidden}
.hn-bar i{display:block;height:100%;width:0;background:var(--em);transition:width 1.6s var(--ease) 2.4s}

.h-scroll{margin-left:auto;align-self:center;display:flex;align-items:center;gap:14px;padding-top:16px;
  font:700 11px/1 var(--nar);letter-spacing:.34em;color:var(--ink3)}
.h-scroll i{position:relative;width:1px;height:38px;background:var(--line2);overflow:hidden}
.h-scroll i:after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--em);animation:drip 2s var(--cut) infinite}
@keyframes drip{to{top:100%}}

.ticker{position:relative;z-index:2;margin-top:-58px;height:58px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
  background:rgba(5,7,6,.78);overflow:hidden;display:flex;align-items:center}
.tk-in{display:flex;white-space:nowrap;animation:tick 60s linear infinite}
.tk-in span{display:inline-flex;align-items:center;gap:22px;padding-right:22px;font:400 22px/1 var(--stencil);letter-spacing:.08em;color:var(--ink4)}
.tk-in span b{font-weight:400;color:var(--ink2)}
.tk-in span i{width:8px;height:8px;background:var(--em);transform:rotate(45deg);opacity:.7}
@keyframes tick{to{transform:translateX(-50%)}}

/* ── 2. манифест ───────────────────────────────────────────────────────── */
#manifest{min-height:150vh;padding:22vh var(--gut) 20vh;display:flex;flex-direction:column;justify-content:flex-start}
#manifest .mf-k{position:sticky;top:30vh}
.mf-k{display:flex;align-items:center;gap:14px;font:700 13px/1 var(--nar);letter-spacing:.26em;color:var(--ink2)}
.mf-k b{color:var(--em)} .mf-k i{width:44px;height:1px;background:var(--line3)}
.mf{position:sticky;top:calc(30vh + 40px);max-width:1180px;font:700 clamp(30px,3.7vw,62px)/1.16 var(--nar);letter-spacing:-.005em;text-transform:none}
.mf .w{color:var(--ink);opacity:.13;transition:opacity .35s ease,color .35s ease}
.mf .w.on{opacity:1}
.mf em .w.on{color:var(--em)}

/* ── 3. дела ─────────────────────────────────────────────────────────────── */
.case{position:relative;height:220vh}
.c-stick{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(24px,4vw,72px);
  padding:96px var(--gut) 56px}
.c-txt{position:relative;z-index:2}
.c-tab{display:inline-flex;align-items:stretch;margin-bottom:26px;font:700 12.5px/1 var(--nar);letter-spacing:.24em;
  opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .8s var(--ease)}
.c-tab b{padding:9px 12px;background:var(--paper);color:#1A1D1B}
.c-tab span{padding:9px 14px;border:1px solid var(--line3);border-left:0;color:var(--ink2)}
.c-loc{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:-8px 0 22px;padding-left:22px;position:relative;
  opacity:0;transform:translateY(10px);transition:opacity .6s ease .15s,transform .8s var(--ease) .15s}
.c-loc i{position:absolute;left:3px;top:5px;width:9px;height:9px;background:var(--em);transform:rotate(45deg);box-shadow:0 0 10px rgba(46,204,113,.6)}
.c-loc b{font:700 13px/1.2 var(--nar);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.c-loc span{font-size:14px;color:var(--ink3)}
.c-loc em{font:600 15px/1 var(--hj);letter-spacing:.06em;color:var(--em)}
.c-loc.secret i{background:var(--red);box-shadow:0 0 10px rgba(231,76,60,.6)}
.c-loc.secret em{color:var(--red)}
.case.a .c-loc{opacity:1;transform:none}
.c-ttl{font:400 clamp(46px,6.2vw,112px)/1 var(--stencil);letter-spacing:.01em;margin-bottom:28px}
.c-ttl .ch{display:inline-block;opacity:0;transform:translateY(.4em) rotate(4deg);transition:opacity .5s ease,transform .8s var(--ease)}
.c-ttl .sp{display:inline-block;width:.32em}
.c-ttl .wd{display:inline-block;white-space:nowrap}
.c-lead{max-width:540px;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--ink2);
  opacity:0;transform:translateY(16px);transition:opacity .7s ease .25s,transform .9s var(--ease) .25s}
.c-facts{display:flex;gap:clamp(18px,2.4vw,40px);margin-top:34px;list-style:none}
.c-facts li{flex:1;max-width:180px;padding-top:14px;border-top:1px solid var(--line3);
  opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .8s var(--ease)}
.c-facts b{display:block;font:600 clamp(34px,3.2vw,52px)/1 var(--hj);color:var(--em)}
.c-facts b small{font-size:.45em;margin-left:4px;color:var(--ink2)}
.c-facts span{display:block;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--ink3)}
.case.a .c-tab,.case.a .c-lead{opacity:1;transform:none}
.case.a .c-ttl .ch{opacity:1;transform:none}
.case.b .c-facts li{opacity:1;transform:none}
.case.b .c-facts li:nth-child(2){transition-delay:.1s} .case.b .c-facts li:nth-child(3){transition-delay:.2s}

.c-fig{position:relative;z-index:2;width:100%;max-width:880px;justify-self:end;
  opacity:0;transform:translateY(60px) scale(.97);transition:opacity .8s ease,transform 1.1s var(--ease)}
.case.b .c-fig{opacity:1;transform:none}
.c-fig .vig-in{position:relative;width:100%;aspect-ratio:730/530;background:var(--panel);border:1px solid var(--line2);overflow:hidden}
.c-fig .vig-in:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px)}
.c-fig .vig-in>svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}
.c-fig .cn{position:absolute;width:16px;height:16px;border:0 solid var(--em)}
.c-fig .cn.a{left:-5px;top:-5px;border-left-width:2px;border-top-width:2px}
.c-fig .cn.b{right:-5px;top:-5px;border-right-width:2px;border-top-width:2px}
.c-fig .cn.c{left:-5px;bottom:31px;border-left-width:2px;border-bottom-width:2px}
.c-fig .cn.d{right:-5px;bottom:31px;border-right-width:2px;border-bottom-width:2px}
.c-fig figcaption{display:flex;align-items:baseline;gap:12px;height:36px;padding-top:12px;font-size:14px;color:var(--ink3)}
.c-fig figcaption b{font:700 12.5px/1 var(--nar);letter-spacing:.24em;color:var(--em)}
.c-fig .replay{margin-left:auto;font:700 11.5px/1 var(--nar);letter-spacing:.22em;color:var(--ink3);transition:color .2s}
.c-fig .replay:hover{color:var(--em)}

.c-num{position:absolute;right:var(--gut);top:84px;z-index:1;font:400 clamp(120px,16vw,260px)/1 var(--stencil);
  color:transparent;-webkit-text-stroke:1px rgba(46,204,113,.13);pointer-events:none;
  transform:translateY(calc(var(--p,0) * -120px))}
.c-prog{position:absolute;left:var(--gut);right:var(--gut);bottom:9px;height:1px;background:var(--line);z-index:2}
.c-prog i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--em)}

/* полоса дел слева занимает ~75 px: на широком экране текст дела начинается правее неё */
@media (min-width:1101px){.c-stick{padding-left:max(var(--gut),112px)}}

/* ── 4. опись ─────────────────────────────────────────────────────────────── */
#index{position:relative;padding:22vh var(--gut) 16vh;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,90px)}
.ix-h{position:sticky;top:120px;align-self:start}
.ix-t{margin:24px 0 18px;font:400 clamp(44px,5.4vw,96px)/.9 var(--stencil)}
.ix-l{color:var(--ink3);font-size:15px}
.ix{list-style:none;border-top:1px solid var(--line2);background:rgba(5,7,6,.55)}
.ix li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:18px;
  padding:22px 18px 22px 8px;border-bottom:1px solid var(--line2);cursor:default;overflow:hidden;
  opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .8s var(--ease),background .3s}
.ix li.in{opacity:1;transform:none}
.ix li:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--em);transform:scaleY(0);transition:transform .35s var(--ease)}
.ix li:hover{background:rgba(46,204,113,.06)}
.ix li:hover:before{transform:scaleY(1)}
.ix .n{font:600 26px/1 var(--hj);color:var(--ink4);transition:color .3s}
.ix li:hover .n{color:var(--em)}
.ix .t{font:400 clamp(22px,2vw,32px)/1 var(--stencil);letter-spacing:.02em}
.ix .k{display:block;margin-top:8px;font:700 11.5px/1 var(--nar);letter-spacing:.24em;color:var(--ink3)}
.ix .d{display:block;max-height:0;overflow:hidden;font-size:14.5px;line-height:1.5;color:var(--ink2);
  transition:max-height .5s var(--ease),margin .5s var(--ease);max-width:620px}
.ix li:hover .d{max-height:120px;margin-top:12px}
.ix .xy{font:600 14px/1 var(--hj);letter-spacing:.06em;color:var(--ink4);text-align:right;white-space:nowrap;transition:color .3s}
.ix li:hover .xy{color:var(--ink2)}

/* ── 5. финал ────────────────────────────────────────────────────────────── */
#end{position:relative;overflow:hidden;padding:20vh var(--gut) 40px;background:linear-gradient(180deg,rgba(5,7,6,0),rgba(5,7,6,.9) 45%)}
.en-main{position:relative;max-width:1100px}
.en-t{font:400 clamp(72px,12vw,220px)/1.02 var(--stencil);letter-spacing:.01em}
#end .cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:44px}
.stamp{position:absolute;left:min(56vw,640px);top:-10px;padding:12px 22px 10px;border:4px double var(--stamp);color:var(--stamp);
  text-align:center;transform:rotate(-11deg) scale(2.4);opacity:0;mix-blend-mode:screen;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 30% 40%,#000 55%,rgba(0,0,0,.55) 75%,#000 90%);
          mask-image:radial-gradient(circle at 30% 40%,#000 55%,rgba(0,0,0,.55) 75%,#000 90%)}
.stamp b{display:block;font:400 clamp(30px,3.4vw,52px)/1 var(--stencil);letter-spacing:.08em}
.stamp span{display:block;margin-top:6px;font:700 13px/1 var(--nar);letter-spacing:.4em}
.stamp.hit{animation:stamp .42s cubic-bezier(.5,0,.75,0) forwards}
@keyframes stamp{0%{transform:rotate(-11deg) scale(2.4);opacity:0}70%{opacity:.95}100%{transform:rotate(-11deg) scale(1);opacity:.9}}
.en-main.shake{animation:shake .35s ease .4s}
@keyframes shake{25%{transform:translate(2px,1px)}50%{transform:translate(-2px,-1px)}75%{transform:translate(1px,-1px)}}
.en-cols{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:40px;margin-top:16vh;padding-top:34px;border-top:1px solid var(--line2)}
.en-cols h3{margin-bottom:16px;font:700 12px/1 var(--nar);letter-spacing:.26em;text-transform:uppercase;color:var(--ink3)}
.en-cols a,.en-cols span{display:block;padding:5px 0;font-size:15px;color:var(--ink2);transition:color .2s}
.en-cols a:hover{color:var(--em)}
.en-cols .soon:after{content:"скоро";margin-left:8px;font:700 10px/1 var(--nar);letter-spacing:.18em;color:var(--ink4);text-transform:uppercase}
.en-foot{display:flex;justify-content:space-between;gap:20px;margin-top:60px;font-size:13px;color:var(--ink4)}

/* ── узкий экран ─────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  #nav{display:none}
  #rail{display:none}
  .h-scroll,.hn-c:nth-child(5){display:none}
}
@media (max-width:900px){
  #top{height:60px;gap:14px}
  .steam span{display:none} .steam{padding:0 11px}
  #hero{grid-template-columns:minmax(0,1fr);padding-top:96px;padding-bottom:110px}
  .kick{flex-wrap:wrap;gap:8px 12px;letter-spacing:.2em}
  .word{font-size:clamp(46px,15vw,96px)}
  .live{display:none}
  .pin-tag{display:none} /* текст дела едет под булавкой - на телефоне только прицел */
  .hn-c b{font-size:18px}
  .h-emb{order:-1;width:min(64vw,360px);margin-bottom:6px}
  .word{margin-top:18px}
  .h-now{position:relative;left:auto;right:auto;bottom:auto;grid-column:1;flex-wrap:wrap;margin-top:40px}
  .hn-h{width:100%;padding-right:0}
  .hn-c{min-width:0;flex:1;padding:14px 14px 0}
  .hn-c:nth-child(2){border-left:0;padding-left:0}
  .hn-c b{font-size:20px}
  .hn-c:nth-child(4){display:none}
  #coord{display:none}
  #manifest{min-height:auto;padding:16vh var(--gut)}
  #manifest .mf-k,.mf{position:static}
  .mf{margin-top:28px}
  .case{height:auto}
  .c-stick{position:relative;height:auto;grid-template-columns:minmax(0,1fr);padding:12vh var(--gut) 8vh;overflow:visible}
  .c-facts{flex-wrap:wrap}
  .c-num{top:7vh}
  .c-prog{display:none}
  #index{grid-template-columns:minmax(0,1fr)}
  .ix-h{position:static}
  .ix li{grid-template-columns:44px minmax(0,1fr)}
  .ix .xy{display:none}
  .ix .d{max-height:none;margin-top:10px}
  .stamp{left:auto;right:0;top:-60px}
  .en-cols{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
}

/* ── 4б. донат ─────────────────────────────────────────────────────────────── */
#donate{position:relative;padding:18vh var(--gut) 14vh;--gold:#E8C766;--gold2:#B8912E;
  background:linear-gradient(180deg,rgba(5,7,6,0),rgba(5,7,6,.86) 14%,rgba(5,7,6,.86) 86%,rgba(5,7,6,0))}
.dn-head{max-width:880px}
.dn-head .kick b{color:var(--gold)}
.dn-t{margin:24px 0 18px;font:400 clamp(44px,5.4vw,96px)/1 var(--stencil)}
.dn-l{max-width:720px;font-size:clamp(16px,1.2vw,19px);line-height:1.6;color:var(--ink2)}
.dn-l b{color:var(--ink)} .dn-l em{color:var(--gold)}
kbd{display:inline-block;padding:1px 7px;border:1px solid var(--line3);border-bottom-width:3px;border-radius:4px;font:600 .9em/1.3 var(--hj);color:var(--ink);background:#0A100D}
.dn-vip{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,70px);margin-top:56px;align-items:start}
.dn-left{position:sticky;top:110px}
.dn-card{perspective:1100px;max-width:520px}
.dn-cardin{position:relative;border-radius:4.2%/6.8%;overflow:hidden;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);
  box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(232,199,102,.25),0 0 60px rgba(232,199,102,.12)}
.dn-cardin img{display:block;width:100%;height:auto}
.dn-sheen{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,rgba(255,255,255,0) calc(var(--sx,30%) - 18%),rgba(255,236,180,.42) var(--sx,30%),rgba(255,255,255,0) calc(var(--sx,30%) + 18%))}
.dn-card.idle .dn-cardin{animation:dnfloat 6s ease-in-out infinite}
@keyframes dnfloat{50%{transform:rotateX(4deg) rotateY(-8deg) translateY(-6px)}}
.dn-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:28px}
.dn-price span{width:100%;font:700 12px/1 var(--nar);letter-spacing:.26em;color:var(--gold)}
.dn-price b{font:600 clamp(48px,4.4vw,72px)/1 var(--hj);color:var(--ink)}
.dn-price b small{font-size:.38em;margin-left:8px;color:var(--gold)}
.dn-price em{font-style:normal;font-size:15px;color:var(--ink3)}
.dn-perks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dn-perks li{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;row-gap:4px;padding:16px 16px 16px 14px;
  border:1px solid var(--line2);background:rgba(10,14,12,.7);transition:border-color .25s,background .25s,transform .35s var(--ease)}
.dn-perks li:hover{border-color:rgba(232,199,102,.55);background:rgba(232,199,102,.05);transform:translateY(-2px)}
.dn-perks svg{grid-row:span 2;width:30px;height:30px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dn-perks b{font:700 13px/1.2 var(--nar);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.dn-perks span{font-size:14px;line-height:1.45;color:var(--ink3)}
.dn-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:64px}
.dn-it{position:relative;padding:22px 20px 20px;border:1px solid var(--line2);background:rgba(10,14,12,.7)}
.dn-it:before{content:"";position:absolute;left:-1px;top:-1px;width:28px;height:2px;background:var(--gold)}
.dn-it span{display:block;font:700 11.5px/1 var(--nar);letter-spacing:.22em;color:var(--ink2)}
.dn-it b{display:block;margin-top:14px;font:600 40px/1 var(--hj);color:var(--ink)}
.dn-it b small{font-size:.42em;margin-left:6px;color:var(--gold)}
.dn-it em{display:block;margin-top:6px;font:700 11px/1 var(--nar);letter-spacing:.18em;color:var(--gold);font-style:normal;text-transform:uppercase}
.dn-it p{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink3)}
.dn-how{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;margin-top:56px;padding-top:34px;border-top:1px solid var(--line2)}
.dn-how ol{list-style:none;display:flex;flex-wrap:wrap;gap:12px 40px}
.dn-how li{display:grid;grid-template-columns:auto auto;column-gap:12px;align-items:baseline}
.dn-how li b{grid-row:span 2;font:600 34px/1 var(--hj);color:var(--gold)}
.dn-how li span{font:700 14px/1.2 var(--nar);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.dn-how li em{font-style:normal;font:600 15px/1.3 var(--hj);color:var(--ink3)}
.dn-how .cta{display:flex;flex-wrap:wrap;gap:14px}
.dn-how .btn-ghost{border-color:rgba(88,101,242,.6)}
.dn-how .btn-ghost.dn-cab{border-color:rgba(232,199,102,.6);color:#E8C766}
@media (max-width:1000px){
  .dn-vip{grid-template-columns:minmax(0,1fr)}
  .dn-left{position:static}
  .dn-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .dn-perks,.dn-list{grid-template-columns:minmax(0,1fr)}
}

/* всплывающая подсказка «скоро» (js/links.js) */
.toast{position:fixed;left:50%;bottom:34px;z-index:80;max-width:min(560px,calc(100vw - 32px));padding:14px 20px;border:1px solid var(--line3);border-left:3px solid var(--em);background:rgba(5,7,6,.95);font-size:15px;color:var(--ink);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── вход через Steam и личный кабинет (js/cabinet.js) ───────────────────── */
.steam.in{gap:9px;padding:0 12px 0 5px;border-color:rgba(232,199,102,.45);color:var(--ink)}
.steam.in img{width:30px;height:30px;border-radius:3px;display:block}
.steam.in .nm{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.12em}
.steam.in .sc{font:600 15px/1 var(--hj);letter-spacing:.04em;color:#E8C766;text-transform:none}
.cab{position:fixed;left:0;top:0;right:0;bottom:0;z-index:90;pointer-events:none}
.cab-bg{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(3,5,4,.6);opacity:0;transition:opacity .35s;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cab-p{position:absolute;right:0;top:0;bottom:0;width:min(460px,100vw);overflow-y:auto;padding:34px 32px 28px;
  background:linear-gradient(180deg,#0B100D,#070A08);border-left:1px solid var(--line2);box-shadow:-30px 0 60px rgba(0,0,0,.5);
  transform:translateX(100%);transition:transform .45s var(--ease)}
.cab.on{pointer-events:auto}
.cab.on .cab-bg{opacity:1}
.cab.on .cab-p{transform:none}
body.cab-open{overflow:hidden}
.cab-x{position:absolute;right:18px;top:18px;width:36px;height:36px;border:1px solid var(--line2);color:var(--ink2);font-size:15px}
.cab-x:hover{border-color:var(--em);color:var(--ink)}
.cab-u{display:flex;align-items:center;gap:14px;margin-top:26px}
.cab-av{width:64px;height:64px;border-radius:4px;box-shadow:0 0 0 1px var(--line3)}
.cab-n{display:block;font:700 20px/1.15 var(--nar);letter-spacing:.06em}
.cab-sid{display:block;margin-top:5px;font:600 13px/1 var(--hj);color:var(--ink3);letter-spacing:.04em}
.cab-bal{position:relative;margin-top:24px;padding:20px 20px 18px;border:1px solid rgba(232,199,102,.35);
  background:linear-gradient(135deg,rgba(232,199,102,.10),rgba(232,199,102,.02) 60%)}
.cab-bal span{display:block;font:700 11px/1 var(--nar);letter-spacing:.24em;color:#E8C766}
.cab-bal b{display:flex;align-items:baseline;gap:8px;margin-top:10px;font:600 48px/1 var(--hj);color:var(--ink)}
.cab-bal b em{font-style:normal}
.cab-bal small{font-size:18px;color:#E8C766}
.cab-bal i{display:block;margin-top:8px;font-style:normal;font-size:13px;color:var(--ink3)}
.cab-top{margin-top:26px}
.cab-l{display:flex;justify-content:space-between;align-items:baseline;font:700 12px/1 var(--nar);letter-spacing:.24em;color:var(--ink2)}
.cab-l em{font-style:normal;font:600 13px/1 var(--hj);letter-spacing:.04em;color:var(--ink3)}
.cab-q{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:12px}
.cab-q button{position:relative;height:44px;border:1px solid var(--line2);background:rgba(10,14,12,.8);font:600 16px/1 var(--hj);color:var(--ink2);transition:border-color .2s,color .2s,background .2s}
.cab-q button small{position:absolute;left:0;right:0;bottom:3px;font:700 8px/1 var(--nar);letter-spacing:.16em;color:#E8C766}
.cab-q button:hover{border-color:var(--line3);color:var(--ink)}
.cab-q button.on{border-color:var(--em);color:var(--ink);background:rgba(46,204,113,.1)}
.cab-in{display:flex;align-items:center;gap:12px;margin-top:10px;padding:0 14px;height:52px;border:1px solid var(--line3);background:#070A08}
.cab-in input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:0;font:600 24px/1 var(--hj);color:var(--ink)}
.cab-in input::-webkit-inner-spin-button{opacity:.3}
.cab-in span{font:600 14px/1 var(--hj);color:var(--ink3);white-space:nowrap}
.cab-in span b{color:var(--ink2);font-weight:600}
.cab-in:focus-within{border-color:var(--em)}
.cab-pay{width:100%;justify-content:center;margin-top:14px}
.cab-pay.busy{opacity:.6;pointer-events:none}
.cab-err{min-height:18px;margin-top:10px;font-size:13.5px;color:#FF8A70}
.cab-note{margin-top:4px;font-size:13px;line-height:1.55;color:var(--ink3)}
.cab-note em{color:#E8C766}
.cab-f{display:flex;justify-content:space-between;align-items:center;margin-top:26px;padding-top:18px;border-top:1px solid var(--line2)}
.cab-f a{font:700 12px/1 var(--nar);letter-spacing:.18em;text-transform:uppercase;color:var(--em)}
.cab-out{font:700 12px/1 var(--nar);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.cab-out:hover{color:#FF8A70}
@media (max-width:900px){.steam.in .nm,.steam.in .sc{display:none}.steam.in{padding:0 4px}}

/* ── телефон: меню, нижняя панель, схема во весь экран (js/mobile.js) ────── */
#burger,#menu,#dock,#viewer,.bigview{display:none}
html{-webkit-tap-highlight-color:transparent}
@media (max-width:1100px){
  /* две отдельные иконки: «три полоски» и «крестик» - одна прячется целиком, без превращения полосок
     (на части телефонов поворот полосок оставлял их видными за крестиком) */
  #burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:6px;border:1px solid var(--line3);background:#050706}
  #burger svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:square}
  #burger .ic-x{display:none}
  body.menu-on #burger .ic-burg{display:none}
  body.menu-on #burger .ic-x{display:block}
  #menu{display:block;position:fixed;inset:0;z-index:45;background:rgba(5,7,6,.97);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;overflow-y:auto;overscroll-behavior:contain}
  body.menu-on #menu{opacity:1;visibility:visible;transition:opacity .3s}
  body.menu-on{overflow:hidden}
  .mn-in{display:flex;flex-direction:column;min-height:100%;padding:calc(84px + env(safe-area-inset-top)) var(--gut) calc(28px + env(safe-area-inset-bottom))}
  .mn-in>a{display:flex;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--line2);font:400 clamp(26px,8vw,40px)/1.05 var(--stencil);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);
    transform:translateY(14px);opacity:0;transition:transform .5s var(--ease),opacity .4s,color .2s}
  .mn-in>a b{font:700 12px/1 var(--nar);letter-spacing:.2em;color:var(--em)}
  .mn-in>a:active{color:var(--em)}
  body.menu-on .mn-in>a{transform:none;opacity:1}
  body.menu-on .mn-in>a:nth-child(2){transition-delay:.04s} body.menu-on .mn-in>a:nth-child(3){transition-delay:.08s}
  body.menu-on .mn-in>a:nth-child(4){transition-delay:.12s} body.menu-on .mn-in>a:nth-child(5){transition-delay:.16s}
  body.menu-on .mn-in>a:nth-child(6){transition-delay:.2s}
  .mn-foot{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:28px}
  .mn-dc{display:flex;align-items:center;justify-content:center;gap:12px;height:56px;background:#5865F2;color:#fff;font:700 14px/1 var(--nar);letter-spacing:.2em}
  .mn-dc svg{width:22px;height:22px;fill:#fff}
  .mn-foot .ip{width:100%;justify-content:space-between}
}
@media (max-width:900px){
  #top{padding-top:env(safe-area-inset-top);height:calc(60px + env(safe-area-inset-top))}
  /* схема от края до края: на 375 px это +12 % размера, подписи крупнее */
  .c-fig{width:auto;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut))}
  .c-fig .vig-in{border-left:0;border-right:0}
  .c-fig .cn{display:none}
  .c-fig figcaption{flex-wrap:wrap;height:auto;padding:12px var(--gut) 0;row-gap:10px}
  .c-fig figcaption span{flex:1 1 60%}
  .c-fig .replay{min-height:40px}
  .bigview{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--emB);color:var(--em);font:700 11.5px/1 var(--nar);letter-spacing:.2em}
  .bigview svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
  /* нижняя панель */
  #dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:8px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background:#050706;border-top:1px solid var(--line2);transform:translateY(110%);transition:transform .45s var(--ease)}
  body.dock-on #dock{transform:none}
  body.menu-on #dock,body.viewer-on #dock{transform:translateY(110%)}
  #dock>*{height:48px;display:flex;align-items:center;justify-content:center}
  #dockIp{flex:1;flex-direction:column;gap:5px;border:1px solid var(--line3);text-align:center}
  #dockIp .d1{font:700 10px/1 var(--nar);letter-spacing:.24em;color:var(--ink3)}
  #dockIp .d2,#dockIp .d3{font:700 13px/1 var(--nar);letter-spacing:.18em;color:var(--em)}
  #dockIp .d3,#dockIp.ok .d2{display:none} #dockIp.ok .d3{display:block}
  .dk-dc{width:56px;background:#5865F2} .dk-dc svg{width:24px;height:24px;fill:#fff}
  .dk-dn{padding:0 18px;background:var(--em);color:#04120A;font:700 13px/1 var(--nar);letter-spacing:.2em}
  #end{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  /* схема во весь экран: телефон стоит - схема лежит боком; щипок и двойной тап */
  #viewer{display:block;position:fixed;inset:0;z-index:90;background:#020403;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;touch-action:none;overflow:hidden}
  body.viewer-on #viewer{opacity:1;visibility:visible;transition:opacity .3s}
  body.viewer-on{overflow:hidden}
  .vw-bar{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;gap:12px;height:calc(54px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 10px 0 var(--gut);background:linear-gradient(#020403,rgba(2,4,3,0))}
  .vw-cap{flex:1;font-size:13px;line-height:1.3;color:var(--ink3);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .vw-x{width:44px;height:44px;border:1px solid var(--line3);color:var(--ink);font-size:18px}
  .vw-zoom{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .18s ease-out}
  .vw-rot{position:absolute;left:50%;top:calc(50% + 20px)}
  #viewer.side .vw-rot{top:calc(50% + 18px)}
  .vw-rot .vig-in{position:relative;width:100%;height:100%;background:var(--panel);border:1px solid var(--line2);overflow:hidden}
  .vw-rot .vig-in>svg{position:absolute;left:0;top:0;width:100%;height:100%}
  .vw-hint{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));text-align:center;font:700 10.5px/1 var(--nar);letter-spacing:.2em;color:var(--ink4);text-transform:uppercase;transition:opacity .3s}
  #viewer.zoomed .vw-hint{opacity:0}
  /* сенсорный экран: размытие под шапкой дорого при прокрутке - сплошной фон */
  body.scrolled #top{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,7,6,.96)}
}
@media (max-width:900px) and (orientation:landscape){
  #viewer.side .vw-rot{top:50%}
}

/* ── заставка (site.js splash): знак крупно по центру, остальное ждёт посадки жетона ── */
body.splash{overflow:hidden}
body.splash .ticker,body.splash #rail,body.splash #dock,body.splash .h-now{visibility:hidden}
body.splash .h-emb{z-index:20}
body.splash .h-emb canvas{cursor:default}
.splash-hint{display:none}
body.splash .splash-hint{display:block;position:fixed;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom));z-index:21;text-align:center;
  font:700 10.5px/1 var(--nar);letter-spacing:.3em;text-transform:uppercase;color:var(--ink4);opacity:0;animation:splashHint .6s ease 1.4s forwards}
body.splash-out .splash-hint{opacity:0!important;animation:none;transition:opacity .2s}
@keyframes splashHint{to{opacity:1}}

/* «Сейчас в городе» вживую (site.js demoNow -> /api/status) */
.demo.is-live{border-color:rgba(46,204,113,.5);color:var(--em);display:inline-flex;align-items:center;gap:6px}
.demo.is-live:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--em);box-shadow:0 0 8px var(--em);animation:livePulse 1.6s ease-in-out infinite}
.demo.is-off{border-color:rgba(231,76,60,.5);color:var(--red)}
.hn-c b.bad{color:var(--red)}
@keyframes livePulse{50%{opacity:.25}}

/* ── досье жителя в кабинете (js/cabinet.js dossier) ── */
.cab-p{width:min(560px,100vw)}
.dos-note{margin-top:18px;font-size:13.5px;line-height:1.5;color:var(--ink3)}
.dos-h{margin-top:26px;padding-top:20px;border-top:1px solid var(--line2)}
.dos-h>span{display:block;font:700 11px/1 var(--nar);letter-spacing:.26em;color:var(--em)}
.dos-h>b{display:block;margin-top:9px;font:400 30px/1.05 var(--stencil);letter-spacing:.02em;color:var(--ink)}
.dos-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dos-tags i{padding:4px 8px;border:1px solid var(--line3);font:700 10.5px/1 var(--nar);letter-spacing:.18em;font-style:normal;color:var(--ink2)}
.dos-tags .tg-g{border-color:rgba(46,204,113,.5);color:var(--em)}
.dos-tags .tg-v{border-color:rgba(232,199,102,.55);color:#E8C766}
.dos-m{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:16px;background:var(--line2);border:1px solid var(--line2)}
.dos-m>div{padding:14px 14px 12px;background:var(--bg2)}
.dos-m span,.dos-s span,.dos-sum span,.dos-ob span{display:block;font:700 10.5px/1 var(--nar);letter-spacing:.2em;color:var(--ink3)}
.dos-m b{display:block;margin-top:8px;font:600 22px/1 var(--hj);color:var(--ink);white-space:nowrap}
.dos-m em{display:block;margin-top:5px;font-style:normal;font-size:12px;color:var(--ink3)}
.dos-sum{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border:1px solid var(--line2);border-top:0}
.dos-sum b{font:600 20px/1 var(--hj);color:var(--em)}
.dos-s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.dos-s b{display:block;margin-top:7px;font:600 16px/1.1 var(--hj);color:var(--ink2)}
.cab-dos+.cab-bal{margin-top:22px}
.dos-card{margin-top:18px;padding:16px;border:1px solid var(--line2);background:rgba(10,14,12,.6)}
.dos-t{display:block;margin-bottom:12px;font:700 11px/1 var(--nar);letter-spacing:.24em;color:var(--ink2)}
.dos-pass{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0;font-size:14px}
.dos-pass dt{color:var(--ink3)} .dos-pass dd{margin:0;color:var(--ink);font-family:var(--hj);font-size:15px}
.dos-p{font-size:14px;color:var(--ink3)}
.dos-sk{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dos-sk li{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:baseline}
.dos-sk b{font:700 12.5px/1 var(--nar);letter-spacing:.14em;color:var(--ink)}
.dos-sk em{font-style:normal;font-size:12.5px;color:var(--ink3)}
.dos-sk i{grid-column:1/-1;height:4px;background:var(--line2)} .dos-sk u{display:block;height:100%}
.dos-cars{display:flex;flex-wrap:wrap;gap:6px}
.dos-cars i{padding:5px 9px;border:1px solid var(--line3);font:600 12px/1 var(--hj);font-style:normal;color:var(--ink2);letter-spacing:.04em}
.dos-ob{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dos-ob b{display:block;margin-top:6px;font:600 16px/1 var(--hj);color:var(--ink2)}
.dos-ob .bad b{color:var(--red)} .dos-ob .warn b{color:var(--amb)}
.dos-u{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dos-u a,.dos-u button{display:flex;align-items:center;justify-content:center;height:42px;border:1px solid var(--line3);font:700 12px/1 var(--nar);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.dos-u a:first-child{background:var(--em);border-color:var(--em);color:#04120A}
.dos-u a:hover,.dos-u button:hover{border-color:var(--em);color:var(--ink)} .dos-u a:first-child:hover{color:#04120A}
@media (max-width:480px){ .dos-s{grid-template-columns:1fr 1fr} .dos-m b{font-size:19px} }