a{color:#FF7A1F}a:hover{color:#FFA35C}
*{box-sizing:border-box}
.h{font-family:Unbounded,sans-serif;text-transform:uppercase;letter-spacing:.02em;font-weight:800}
.m{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.cut{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.cs{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.lbl{font:600 11px 'JetBrains Mono',monospace;color:#93A1BC;text-transform:uppercase;letter-spacing:.14em}
.grid{background-image:linear-gradient(rgba(45,212,230,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,230,.05) 1px,transparent 1px);background-size:48px 48px}
.scan{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.vig{background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%)}
.glitch{text-shadow:3px 0 rgba(255,84,104,.55),-3px 0 rgba(45,212,230,.55)}
.stripe{background:repeating-linear-gradient(-45deg,#FF7A1F 0 8px,#0A0D14 8px 16px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:68px;padding:0 36px;font:900 17px Unbounded,sans-serif;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border:0;cursor:pointer}
.bp{background:#FF7A1F;color:#0A0D14;box-shadow:0 0 32px rgba(255,122,31,.35)}.bp:hover{background:#FF9447;color:#0A0D14}
.bs{background:rgba(10,13,20,.7);color:#E9EEF8;box-shadow:inset 0 0 0 1px #5A6786}.bs:hover{color:#fff;background:rgba(27,36,54,.9)}
.rc{position:relative;display:flex;flex-direction:column;background:#0E1320;box-shadow:inset 0 0 0 1px #26324A;transition:transform .12s,box-shadow .12s}
.rc:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px #FF7A1F}
.ci{height:140px;position:relative;overflow:hidden;border-bottom:1px solid #26324A;background-color:#0B101B;background-image:linear-gradient(rgba(45,212,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,230,.07) 1px,transparent 1px);background-size:20px 20px}
.ci svg{display:block;width:100%;height:100%}
.num{position:absolute;right:14px;top:8px;font-size:44px;font-weight:900;-webkit-text-stroke:1.5px rgba(233,238,248,.45);color:transparent}
.cb{flex:1;padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}
.tag{align-self:flex-start;margin-top:auto;font:600 11px 'JetBrains Mono',monospace;padding:4px 8px;background:#151C2B;color:#B7C2D6;letter-spacing:.06em}
.pop{animation:pop .3s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes pop{from{transform:scale(.88);opacity:0}}
.mp{min-height:44px;padding:0 16px;border:0;cursor:pointer;font:700 12px Unbounded,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.mpoff{background:rgba(10,13,20,.75);color:#B7C2D6;box-shadow:inset 0 0 0 1px #3A4866}.mpoff:hover{color:#fff;box-shadow:inset 0 0 0 1px #93A1BC}
.mpon{background:#FF7A1F;color:#0A0D14}
.rc{position:relative;display:flex;flex-direction:column;background:#0E1320;box-shadow:inset 0 0 0 1px #26324A;transition:transform .12s,box-shadow .12s;text-decoration:none;color:#E9EEF8}
.rc:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px #FF7A1F;color:#E9EEF8}
.ci{height:150px;position:relative;overflow:hidden;border-bottom:1px solid #26324A;background-color:#0B101B;background-image:linear-gradient(rgba(45,212,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,230,.07) 1px,transparent 1px);background-size:20px 20px}
.bar{height:4px;background:#1E2840}
/* --- каркас сайта --- */
.shell{min-height:100vh;display:flex;flex-wrap:wrap;font-family:Inter,sans-serif;color:#E9EEF8;background:#06080D}
.side{flex:1 0 232px;background:#0C1019;border-right:1px solid #26324A;padding:20px 12px;display:flex;flex-direction:column;gap:28px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#E9EEF8;padding:0 10px}
.brand:hover{color:#E9EEF8}
.nav{display:flex;flex-direction:column;gap:2px;font-size:14px}
.nav-top{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;color:#93A1BC;text-decoration:none}
.nav-top:hover{color:#E9EEF8}
.nav-top.cur{color:#E9EEF8;font-weight:600}
.nav-top.on{color:#FFB27A;background:#1F1712;box-shadow:inset 2px 0 0 #FF7A1F;font-weight:600}
.nav-subs{display:flex;flex-direction:column;gap:2px;margin:0 0 6px 19px;padding-left:12px;border-left:1px solid #26324A}
.nav-sub{display:flex;align-items:center;min-height:40px;padding:0 10px;color:#93A1BC;text-decoration:none}
.nav-sub:hover{color:#E9EEF8}
.nav-sub.on{color:#FFB27A;background:#1F1712;box-shadow:inset 2px 0 0 #FF7A1F;font-weight:600}
.me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 10px 0;border-top:1px solid #26324A;font-size:14px}
.me-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-out{font-size:12px;color:#93A1BC;text-decoration:none}
.me-out:hover{color:#FF7A1F}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;padding:14px 20px;background:#111724;color:#E9EEF8;box-shadow:inset 0 0 0 1px #FF7A1F;font:600 14px Inter,sans-serif;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);max-width:calc(100% - 32px);text-align:center}
.btn:focus-visible,.mp:focus-visible,.nav a:focus-visible,.me a:focus-visible{outline:2px solid #2DD4E6;outline-offset:2px}
@media (max-width:820px){.side{flex-basis:100%;border-right:0;border-bottom:1px solid #26324A}.me{margin-top:0}}
@media (prefers-reduced-motion:reduce){.pop{animation:none}.rc{transition:none}}
@media (max-width:820px){.shell>main{flex:1 1 100%!important;width:100%}}
@media (max-width:520px){.shell main h1.h{font-size:38px!important}.shell main .btn{min-height:56px;padding:0 18px;font-size:13px;width:100%}.shell main section{padding-left:16px!important;padding-right:16px!important}}
/* --- анимации фона героя --- */
.gdrift{animation:gdrift 6s linear infinite}
@keyframes gdrift{to{transform:translate(48px,48px)}}
.sweep{position:absolute;left:50%;top:32%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 300deg,rgba(255,122,31,.10) 345deg,rgba(255,122,31,.22) 360deg);border-radius:50%;animation:spin 7s linear infinite;mix-blend-mode:screen}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{margin-top:-12px}}
.spin,.spin-r{transform-box:view-box;transform-origin:50% 50%}
.spin{animation:spin 5s linear infinite}
.spin-r{animation:spin 40s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.35);opacity:.55}}
.flow{animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-20}}
.breathe{transform-box:fill-box;transform-origin:center;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);opacity:.7}}
.draw{stroke-dasharray:100;animation:draw 4s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:100}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
.blink{animation:blink 2.4s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.25}}
/* --- кнопки: блик, подъём, свечение --- */
.btn{position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.2,.9,.3,1.3),box-shadow .2s,background .2s,color .2s}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none;transition:left 0s}
.btn:hover::after{left:130%;transition:left .6s ease}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{transition:transform .2s}
.btn:hover svg{transform:scale(1.2)}
.bp:hover{box-shadow:0 0 48px rgba(255,122,31,.75),0 10px 30px rgba(255,122,31,.35)}
.bs:hover{box-shadow:inset 0 0 0 1px #2DD4E6,0 0 32px rgba(45,212,230,.35)}
.bs::after{background:linear-gradient(100deg,transparent,rgba(45,212,230,.35),transparent)}
@media (prefers-reduced-motion:reduce){.gdrift,.sweep,.float,.spin,.spin-r,.pulse,.flow,.breathe,.draw,.blink{animation:none}.btn,.btn::after,.btn svg{transition:none}}
/* --- гранаты: дым --- */
.smokes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.smokes i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;background:radial-gradient(circle,rgba(201,210,227,.10),rgba(45,212,230,.04) 40%,transparent 70%);filter:blur(8px);animation:smoke 18s ease-in-out infinite}
.smokes i:nth-child(1){left:-12%;top:10%}
.smokes i:nth-child(2){right:-14%;top:-10%;animation-delay:-5s;animation-duration:22s}
.smokes i:nth-child(3){left:30%;top:45%;animation-delay:-9s;animation-duration:20s}
.smokes i:nth-child(4){right:10%;top:35%;animation-delay:-13s;animation-duration:24s}
@keyframes smoke{0%,100%{transform:translate(0,0) scale(1);opacity:.7}50%{transform:translate(6vmax,-4vmax) scale(1.25);opacity:1}}
.bloom{transform-box:fill-box;transform-origin:center;animation:bloom 3.6s ease-out infinite}
@keyframes bloom{0%,40%{transform:scale(.1);opacity:0}58%{transform:scale(1.05);opacity:1}88%{transform:scale(1);opacity:1}100%{transform:scale(1.1);opacity:0}}
/* --- про: перемотка демки --- */
.scrub{position:absolute;top:0;bottom:0;left:0;width:2px;pointer-events:none;background:linear-gradient(180deg,transparent,#FF5468 30%,#2DD4E6 70%,transparent);box-shadow:0 0 24px 6px rgba(255,84,104,.35);animation:scrub 4s linear infinite;opacity:.7}
.scrub::before{content:"";position:absolute;top:0;bottom:0;right:2px;width:180px;background:linear-gradient(90deg,transparent,rgba(255,84,104,.07))}
@keyframes scrub{from{left:-2%}to{left:102%}}
.draw{animation-duration:4s}
.kill{opacity:0;transform-box:fill-box;transform-origin:center;animation:kill 4s ease-out infinite}
.k1{animation-name:kill1}.k2{animation-name:kill2}.k3{animation-name:kill3}
@keyframes kill1{0%,18%{opacity:0;transform:scale(2.2)}22%,80%{opacity:1;transform:scale(1)}90%,100%{opacity:0}}
@keyframes kill2{0%,30%{opacity:0;transform:scale(2.2)}34%,80%{opacity:1;transform:scale(1)}90%,100%{opacity:0}}
@keyframes kill3{0%,42%{opacity:0;transform:scale(2.2)}46%,80%{opacity:1;transform:scale(1)}90%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.smokes i,.bloom,.scrub,.kill{animation:none}.kill{opacity:1}.scrub{display:none}}
/* --- сайдбар закреплён, профиль внизу экрана --- */
.side{position:sticky;top:0;align-self:flex-start;height:100vh;height:100dvh;overflow-y:auto}
@media (max-width:820px){.side{position:static;height:auto;overflow:visible}}
.live{color:#34D399;display:inline-block;animation:live 1.4s ease-in-out infinite;text-shadow:0 0 8px rgba(52,211,153,.8)}
@keyframes live{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.live{animation:none}}