/* ══════════════════════════════════════════════════════════════════
   KONSTANT — БИБЛИОТЕКА БЛОКОВ БЛОГА · СВЕТЛАЯ ТЕМА
   Единый стиль для статей, ТГ-карточек и IG-каруселей.
   Подключать: <link rel="stylesheet" href="konstant-blog.css">
   Витрина всех блоков: _kit.html
   Лайм — как акцент-фон/подсветка/кнопки; текст-акценты — глубокий зелёный (читаемый на белом).
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#ffffff; --panel:#f5f7f1; --panel2:#f0f3ea; --text:#0b0f0a;
  --muted:#525c6b; --line:#e6e9df; --acid:#c6ff4a; --acid-ink:#3f6b00; --hot:#e5484d; --blue:#2f74d0;
  --r:14px; --r-lg:18px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,-apple-system,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:840px;margin:0 auto;padding:30px 20px 90px}

/* — типографика — */
.ital{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;background:var(--acid);color:#0b0f0a;padding:0 .12em;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acid-ink)}
h1{font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(30px,6vw,50px);line-height:1.1;margin:14px 0;letter-spacing:-.015em;color:#0b0f0a}
h2{font-family:Unbounded,sans-serif;font-weight:600;font-size:clamp(22px,4vw,30px);margin:6px 0 16px;letter-spacing:-.01em}
p{font-size:18px;color:#1f2530;margin:14px 0;line-height:1.75;font-weight:500}
.lead{font-size:21px;color:#0b0f0a;line-height:1.55;font-weight:600}
strong{color:#000;font-weight:700}
.meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap;margin:20px 0 8px}
.meta span{display:flex;align-items:center;gap:7px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--acid-ink);display:inline-block}

/* — метка секции «01 — …» — */
.sec-lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:52px 0 14px;display:flex;align-items:center;gap:10px}
.sec-lbl:before{content:'';width:20px;height:2px;background:var(--acid);border-radius:2px}

/* — БЛОК: стат-плитки — */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px}
.stat b{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:26px;color:var(--acid-ink);display:block}
.stat span{font-size:12px;color:var(--muted);font-family:'IBM Plex Mono',monospace}

/* — БЛОК: путь клиента «растворяющийся след» (светлый editorial-диаграмм) —
   Линия атрибуции начинается кислотной (источник известен) и растворяется в пунктир
   к оплате (источник потерян). Смысл несут и цвет, и штрих, и подписи (не только цвет). */
.way{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 18px;margin:24px 0}
.way .head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.way .head b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;letter-spacing:-.01em}
.way .head span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted)}
.way svg{width:100%;height:auto;display:block}
.way .seg{fill:none;stroke-linecap:round;stroke-width:3}
.way .st-dot{stroke:#fff;stroke-width:3}
.way .st-name{font-family:Unbounded,sans-serif;font-weight:600;font-size:14.5px;fill:#0b0f0a}
.way .st-sub{font-family:'IBM Plex Mono',monospace;font-size:10.5px;fill:#8a93a1}
.way .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600}
.way .tag.ok{fill:var(--acid-ink)}
.way .tag.bad{fill:var(--hot)}
.way .foot{display:flex;gap:22px;flex-wrap:wrap;margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted)}
.way .foot i{display:inline-block;vertical-align:middle;margin-right:7px;border-radius:2px}
.way .foot .l1{width:22px;height:3px;background:var(--acid-ink)}
.way .foot .l2{width:22px;height:3px;background:repeating-linear-gradient(90deg,#aab3bf 0 5px,transparent 5px 9px)}
/* ── хореография следа: линия рисуется узел→узел, точки лопаются, разрывы вспыхивают ── */
.way .seg{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform .42s cubic-bezier(.3,.7,.2,1)}
.way .st-dot,.way .w-d5{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .38s cubic-bezier(.34,1.6,.4,1)}
.way [class*="w-x"]{opacity:0;transition:opacity .25s ease}
.way .st-name,.way .st-sub,.way .tag,.way .w-qm{opacity:0;transition:opacity .4s ease}
.way .foot{opacity:0;transition:opacity .5s ease}
.way.in .seg{transform:scaleX(1)}
.way.in .st-dot,.way.in .w-d5{transform:scale(1)}
.way.in [class*="w-x"],.way.in .st-name,.way.in .st-sub,.way.in .tag,.way.in .w-qm,.way.in .foot{opacity:1}
.way.in .w-d0{transition-delay:.05s}.way.in .w-n0{transition-delay:.12s}.way.in .w-t0{transition-delay:.2s}
.way.in .w-s1{transition-delay:.25s}.way.in .w-x1{transition-delay:.62s}.way.in .w-d1{transition-delay:.68s}.way.in .w-n1{transition-delay:.74s}
.way.in .w-s2{transition-delay:.78s}.way.in .w-x2{transition-delay:1.15s}.way.in .w-d2{transition-delay:1.21s}.way.in .w-n2{transition-delay:1.27s}
.way.in .w-s3{transition-delay:1.31s}.way.in .w-x3{transition-delay:1.68s}.way.in .w-d3{transition-delay:1.74s}.way.in .w-n3{transition-delay:1.8s}
.way.in .w-s4{transition-delay:1.84s}.way.in .w-x4{transition-delay:2.21s}.way.in .w-d4{transition-delay:2.27s}.way.in .w-n4{transition-delay:2.33s}
.way.in .w-s5{transition-delay:2.37s}.way.in .w-d5{transition-delay:2.74s}.way.in .w-qm{transition-delay:2.86s}.way.in .w-n5{transition-delay:2.86s}.way.in .w-t5{transition-delay:2.98s}
.way.in .foot{transition-delay:3.1s}
@media(prefers-reduced-motion:reduce){.way .seg,.way .st-dot,.way .w-d5{transform:none;transition:none}.way [class*="w-x"],.way .st-name,.way .st-sub,.way .tag,.way .w-qm,.way .foot{opacity:1;transition:none}}
.way .mob{display:none}
@media(max-width:700px){
  .way svg{display:none}
  .way .mob{display:block;position:relative;padding-left:26px;margin-top:8px}
  .way .mob:before{content:'';position:absolute;left:8px;top:6px;height:34%;width:3px;border-radius:2px;background:var(--acid-ink)}
  .way .mob:after{content:'';position:absolute;left:8px;top:calc(34% + 6px);bottom:6px;width:3px;background:repeating-linear-gradient(180deg,#aab3bf 0 6px,transparent 6px 11px)}
  .way .mob .m{position:relative;padding:9px 0}
  .way .mob .m:before{content:'';position:absolute;left:-24px;top:14px;width:11px;height:11px;border-radius:50%;background:#0b0f0a;border:2.5px solid #fff;box-shadow:0 0 0 1.5px #0b0f0a}
  .way .mob .m.a:before{background:var(--acid);box-shadow:0 0 0 1.5px #7ea826}
  .way .mob .m b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600}
  .way .mob .m span{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-top:2px}
  .way .mob .m .bad{color:var(--hot)}
  .way .mob .m .ok{color:var(--acid-ink)}
}

/* — БЛОК: callout-боль (тёмная карточка-цитата) — */
.pain{position:relative;background:#0b0f0a;border-radius:var(--r-lg);padding:26px 28px 24px;margin:24px 0;overflow:hidden}
.pain:before{content:'«';position:absolute;right:18px;top:-26px;font-family:Unbounded,sans-serif;font-weight:800;font-size:130px;color:#fff;opacity:.06;line-height:1}
.pain .t{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hot);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.pain .t:before{content:'';width:18px;height:2px;background:var(--hot);border-radius:2px}
.pain p{margin:0;font-size:18.5px;line-height:1.55;color:#e6ebf5}
.pain p b,.pain p strong{color:var(--acid);font-weight:700}

/* — БЛОК: нумерованные шаги (карточки 2×2, призрачный номер, кислотная риска) — */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 20px;overflow:hidden;transition:transform .2s,border-color .2s}
.step:hover{transform:translateY(-2px);border-color:var(--acid)}
.step:before{content:'';position:absolute;left:0;top:0;width:46px;height:4px;background:var(--acid);border-radius:0 0 4px 0}
.step .n{position:absolute;top:4px;right:14px;font-family:Unbounded,sans-serif;font-weight:800;font-size:66px;line-height:1;color:#0b0f0a;opacity:.07;background:none;width:auto;height:auto;display:block}
.step b{display:block;font-family:Unbounded,sans-serif;font-size:16.5px;font-weight:600;color:#0b0f0a;margin-bottom:8px;padding-right:52px;letter-spacing:-.01em}
.step .b{font-size:15.5px;color:#3a4150;line-height:1.65;font-weight:500}

/* — ВИДЖЕТ: ключевая мысль (takeaway) — */
.takeaway{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--acid);border-radius:var(--r-lg);padding:20px 22px;margin:22px 0}
.takeaway svg{width:26px;height:26px;flex-shrink:0;stroke:var(--acid-ink);fill:none;stroke-width:1.8;margin-top:2px}
.takeaway p{margin:0;font-size:17px;line-height:1.65;color:#1f2530}
.takeaway b,.takeaway strong{color:var(--acid-ink)}

/* — БЛОК: сравнение было→стало — */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.cmp .card{border-radius:var(--r-lg);padding:22px 20px}
.cmp .lose{background:var(--panel);border:1px solid var(--line)}
.cmp .win{background:var(--acid);border:1px solid #b6f02f}
.cmp .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cmp .win .tag{color:#3a5200}
.cmp .big{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:52px;line-height:1;margin:12px 0 6px}
.cmp .lose .big{color:var(--hot)}
.cmp .win .big{color:#0b0f0a}
.cmp .card p{margin:8px 0 0;font-size:15.5px;line-height:1.6;font-weight:500}
.cmp .lose p{color:#4a5464}
.cmp .win p{color:#1c2e08}

/* — БЛОК: мокап дашборда (светлый) — */
.mock{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:24px 0;box-shadow:0 24px 60px -30px rgba(11,15,10,.18)}
.mock .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.mock .bar i{width:10px;height:10px;border-radius:50%;background:#d3d8cc;display:inline-block}
.mock .bar .ttl{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);margin-left:8px}
.mock .bar .live{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--acid-ink);display:flex;align-items:center;gap:6px}
.mock .body{padding:16px}
.mock .row{display:grid;grid-template-columns:1.6fr .7fr .7fr 1.2fr;gap:10px;align-items:center;padding:11px 8px;border-bottom:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:13px}
.mock .row:last-child{border-bottom:none}
.mock .row.head{color:var(--muted);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.mock .cr{color:#0b0f0a}.mock .mut{color:var(--muted)}
.mock .roas{display:flex;align-items:center;gap:8px}
.mock .track{flex:1;height:7px;background:#eceee6;border-radius:4px;overflow:hidden}
.mock .fill{height:100%;border-radius:4px}
.mock .g{color:var(--acid-ink)}.mock .r{color:var(--hot)}
.mock .fill.g{background:var(--acid-ink)}.mock .fill.r{background:var(--hot)}
.cap{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);text-align:center;margin-top:-10px}

/* — БЛОК: сетка «что даёт» с иконками (кислотные плашки) — */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.cell{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;transition:transform .2s,border-color .2s}
.cell:hover{transform:translateY(-2px);border-color:var(--acid)}
.cell svg{width:40px;height:40px;stroke:#0b0f0a;fill:none;stroke-width:1.6;background:var(--acid);border-radius:11px;padding:9px;box-sizing:border-box}
.cell b{display:block;font-family:Unbounded,sans-serif;font-size:15.5px;margin:13px 0 6px;color:#0b0f0a;font-weight:600;letter-spacing:-.01em}
.cell p{margin:0;font-size:15px;color:#3a4150;line-height:1.6;font-weight:500}

/* — БЛОК: CTA-баннер — */
.cta{background:var(--panel);border:1px solid var(--acid);border-radius:20px;padding:32px 26px;margin:50px 0 0;text-align:center}
.cta h3{font-family:Unbounded,sans-serif;font-weight:600;font-size:clamp(20px,4vw,26px);margin:0 0 8px;color:#0b0f0a}
.cta p{color:var(--muted);font-size:15px;margin:0 0 20px}
.btn{display:inline-block;background:var(--acid);color:#0b0f0a;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:14px;text-decoration:none;padding:15px 28px;border-radius:12px;border:1px solid #b6f02f}
.word{font-weight:700;text-decoration:underline}

/* — БЛОК: перелинковка + футер — */
.related{margin-top:46px;border-top:1px solid var(--line);padding-top:20px}
.related .k{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--acid-ink);letter-spacing:.12em;text-transform:uppercase}
.related a{display:block;color:#2b3240;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.related a:hover{color:var(--acid-ink)}
footer{margin-top:38px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);text-align:center}
footer a{color:var(--acid-ink);text-decoration:none}

/* — IG-карусель: слайд 1080×1350 — */
.slide{width:1080px;height:1350px;padding:80px 70px;display:flex;flex-direction:column;justify-content:center;gap:26px;background:var(--bg)}
.slide .n{font-family:'IBM Plex Mono',monospace;color:var(--muted);font-size:24px;letter-spacing:.1em}
.slide h2{font-size:66px;line-height:1.05}
.slide .big{font-family:'IBM Plex Mono',monospace;font-size:150px;color:var(--acid-ink);font-weight:600;line-height:1}
.slide p{font-size:32px;color:#2b3240}

/* — ВИДЖЕТ: живой график (тёмный, рисует себя при появлении) — */
.chartw{background:#0a0d16;border:1px solid #1a2030;border-radius:var(--r-lg);padding:22px 22px 14px;margin:24px 0;overflow:hidden;box-shadow:0 30px 70px -40px rgba(11,15,10,.5)}
.chartw .t{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8b96ad;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.chartw .t b{color:var(--acid);font-size:22px;letter-spacing:0}
.chartw svg{width:100%;height:auto;display:block;margin-top:8px}
.chartw .gridl{stroke:#161d2e;stroke-width:1}
.chartw .axis{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:#5b6472}
.chartw .lbl{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;fill:var(--acid)}
.chartw .lbl.rdl{fill:#ff4d6d}
.chartw .ln{fill:none;stroke:var(--acid);stroke-width:2.6;stroke-linecap:round;filter:drop-shadow(0 0 7px rgba(198,255,74,.55))}
.chartw .ar{opacity:0}
.chartw .dt{fill:var(--acid);filter:drop-shadow(0 0 6px rgba(198,255,74,.8))}
.rv .ln{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.7s cubic-bezier(.3,.6,.2,1) .25s}
.rv.in .ln{stroke-dashoffset:0}
.rv .ar{transition:opacity .9s ease 1.3s}.rv.in .ar{opacity:.2}
.rv .dt{opacity:0;transition:opacity .4s ease 1.6s}.rv.in .dt{opacity:1}
.rv .lbl{opacity:0;transition:opacity .5s ease 1.5s}.rv.in .lbl{opacity:1}
/* бары мокапа растут при появлении; тикер живёт как в герое лендинга */
.mock .fill{width:0!important;transition:width 1.1s cubic-bezier(.2,.7,.2,1) .35s}
.mock.in .fill,.rv.in .mock .fill{width:var(--w)!important}
.wtick{display:flex;align-items:center;gap:9px;padding:11px 10px 2px;border-top:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted)}
.wtick b{width:7px;height:7px;border-radius:50%;background:var(--acid-ink);flex-shrink:0;animation:kpulse 1.6s infinite}
.wtick span{transition:opacity .4s}
@keyframes kpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* — СКРОЛЛ-АНИМАЦИИ (работают в паре с konstant-blog.js) — */
.rv{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rvk{opacity:0;transform:translateY(18px) scale(.96);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.rv.in .rvk{opacity:1;transform:none}
.chain .row .rvk{transform:translateY(10px) scale(.7)} /* пилюли цепочки лопаются по очереди */
.rv.in .chain-pop,.rv.in .chain .rvk{transform:none}
@media(prefers-reduced-motion:reduce){.rv,.rvk{opacity:1!important;transform:none!important;transition:none}}

@media(max-width:620px){
  .stats{grid-template-columns:1fr 1fr}.cmp{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}
  .mock .row{grid-template-columns:1.4fr .6fr .6fr 1fr;font-size:11px}
}

/* — UX-слой (ui-ux-pro-max): фокус, фидбек нажатий, выделение, переходы — */
::selection{background:var(--acid);color:#0b0f0a}
:focus-visible{outline:3px solid var(--acid);outline-offset:2px;border-radius:6px}
a,button{touch-action:manipulation}
.btn{transition:transform .18s ease,box-shadow .18s ease;cursor:pointer;will-change:transform}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(63,107,0,.5)}
.btn:active{transform:translateY(0) scale(.97)}
.related a{transition:color .18s ease,padding-left .18s ease}
.related a:hover{padding-left:8px}
.step,.cell{cursor:default}
@media(prefers-reduced-motion:reduce){.btn,.related a,.step,.cell{transition:none}}

@media(max-width:700px){
  .way .mob .m{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
  .way.in .mob .m{opacity:1;transform:none}
  .way.in .mob .m:nth-child(1){transition-delay:.1s}.way.in .mob .m:nth-child(2){transition-delay:.5s}
  .way.in .mob .m:nth-child(3){transition-delay:.9s}.way.in .mob .m:nth-child(4){transition-delay:1.3s}
  .way.in .mob .m:nth-child(5){transition-delay:1.7s}.way.in .mob .m:nth-child(6){transition-delay:2.1s}
}

/* — ВИДЖЕТ: 3D-колода слоёв (.deck3d) — читабельная, сама листается, глубина + свечение —
   Использовать на КАЖДОЙ странице как фирменный 3D-блок: шаги слева, живая колода справа. */
.deck3d{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:24px;overflow:hidden}
.deck3d:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#121826 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.5}
.deck3d .dhead{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px;z-index:2}
.deck3d .dhead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.deck3d .dhead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.deck3d .grid2{position:relative;display:grid;grid-template-columns:1fr 1.25fr;gap:22px;align-items:center;z-index:1}
/* шаги слева */
.deck3d .dstep{padding:12px 14px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .3s,border-color .3s;position:relative}
.deck3d .dstep b{display:block;font-family:Unbounded,sans-serif;font-size:14.5px;font-weight:600;color:#8b96ad;transition:color .3s}
.deck3d .dstep span{display:block;font-size:13px;color:#5b6472;margin-top:3px;line-height:1.5;transition:color .3s}
.deck3d .dstep .bar{height:2.5px;background:#1a2030;border-radius:2px;margin-top:9px;overflow:hidden;opacity:0;transition:opacity .3s}
.deck3d .dstep .bar i{display:block;height:100%;width:0;background:var(--acid);border-radius:2px}
.deck3d .dstep.on{background:#10141f;border-color:#232c42}
.deck3d .dstep.on b{color:var(--acid)}
.deck3d .dstep.on span{color:#aeb6c4}
.deck3d .dstep.on .bar{opacity:1}
.deck3d .dstep.on .bar i{animation:dprog var(--dur,3.2s) linear forwards}
@keyframes dprog{to{width:100%}}
/* колода справа */
.deck3d .dstage{position:relative;height:330px;perspective:1000px}
.deck3d .dcard{position:absolute;left:50%;top:52%;width:min(340px,92%);height:190px;margin-left:min(-170px,-46%);margin-top:-95px;
  border-radius:16px;background:linear-gradient(135deg,#171e2e,#0d121e);border:1.5px solid #26314a;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.8);padding:16px 18px;
  transition:transform .75s cubic-bezier(.25,.8,.25,1),opacity .6s ease,box-shadow .6s ease,border-color .6s ease;will-change:transform,opacity}
.deck3d .dcard .ttl{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.deck3d .dcard .ttl b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.deck3d .dcard .ttl i{font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:11px;color:#5b6472}
.deck3d .dcard .rw{height:9px;border-radius:5px;background:#232c42;margin-top:13px}
.deck3d .dcard .rw.a{background:var(--acid);box-shadow:0 0 12px rgba(198,255,74,.45)}
.deck3d .dcard .rw.r{background:#e5484d}
.deck3d .dcard .chip{display:inline-block;margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--acid);border:1px solid #2c3a19;background:#141c0a;border-radius:99px;padding:5px 11px}
/* позиции колоды (s0 — активная спереди) */
.deck3d .dcard.s0{transform:rotateX(calc(5deg + var(--rx,0deg))) rotateY(var(--ry,0deg)) translate3d(0,0,0) scale(1);opacity:1;border-color:var(--acid);box-shadow:0 34px 70px -22px rgba(198,255,74,.28),0 30px 60px -22px rgba(0,0,0,.8);z-index:4}
.deck3d .dcard.s1{transform:rotateX(5deg) translate3d(0,-48px,-95px) scale(.94);opacity:.7;z-index:3}
.deck3d .dcard.s2{transform:rotateX(5deg) translate3d(0,-92px,-190px) scale(.88);opacity:.45;z-index:2}
.deck3d .dcard.s3{transform:rotateX(5deg) translate3d(0,-132px,-285px) scale(.82);opacity:.22;z-index:1}
.deck3d .dcard.sout{transform:rotateX(14deg) translate3d(0,120px,90px) scale(1.04);opacity:0;z-index:5}
.deck3d .dcard.s0 .ttl b{color:var(--acid)}
@media(prefers-reduced-motion:reduce){.deck3d .dcard{transition:none}.deck3d .dstep.on .bar i{animation:none;width:100%}}
@media(max-width:760px){
  .deck3d .grid2{grid-template-columns:1fr;gap:8px}
  .deck3d .dstage{height:290px;order:-1}
  .deck3d .dcard{height:170px}
  .deck3d .dcard.s1{transform:rotateX(5deg) translate3d(0,-40px,-95px) scale(.94)}
  .deck3d .dcard.s2{transform:rotateX(5deg) translate3d(0,-76px,-190px) scale(.88)}
  .deck3d .dcard.s3{transform:rotateX(5deg) translate3d(0,-108px,-285px) scale(.82)}
}

/* — СКРОЛЛ-АНИМАЦИИ (работают в паре с konstant-blog.js) — */
.rv{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rvk{opacity:0;transform:translateY(18px) scale(.96);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.rv.in .rvk{opacity:1;transform:none}
.chain .row .rvk{transform:translateY(10px) scale(.7)} /* пилюли цепочки лопаются по очереди */
.rv.in .chain-pop,.rv.in .chain .rvk{transform:none}
@media(prefers-reduced-motion:reduce){.rv,.rvk{opacity:1!important;transform:none!important;transition:none}}

@media(max-width:620px){
  .stats{grid-template-columns:1fr 1fr}.cmp{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}
  .mock .row{grid-template-columns:1.4fr .6fr .6fr 1fr;font-size:11px}
}

/* — UX-слой (ui-ux-pro-max): фокус, фидбек нажатий, выделение, переходы — */
::selection{background:var(--acid);color:#0b0f0a}
:focus-visible{outline:3px solid var(--acid);outline-offset:2px;border-radius:6px}
a,button{touch-action:manipulation}
.btn{transition:transform .18s ease,box-shadow .18s ease;cursor:pointer;will-change:transform}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(63,107,0,.5)}
.btn:active{transform:translateY(0) scale(.97)}
.related a{transition:color .18s ease,padding-left .18s ease}
.related a:hover{padding-left:8px}
.step,.cell{cursor:default}
@media(prefers-reduced-motion:reduce){.btn,.related a,.step,.cell{transition:none}}

@media(max-width:700px){
  .way .mob .m{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
  .way.in .mob .m{opacity:1;transform:none}
  .way.in .mob .m:nth-child(1){transition-delay:.1s}.way.in .mob .m:nth-child(2){transition-delay:.5s}
  .way.in .mob .m:nth-child(3){transition-delay:.9s}.way.in .mob .m:nth-child(4){transition-delay:1.3s}
  .way.in .mob .m:nth-child(5){transition-delay:1.7s}.way.in .mob .m:nth-child(6){transition-delay:2.1s}
}

/* — ВИДЖЕТ: 3D-разрез системы (изометрический стек слоёв, живёт и наклоняется) — */
.iso3d{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:20px 22px;overflow:hidden}
.iso3d:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#121826 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.5}
.iso3d .ihead{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;z-index:3}
.iso3d .ihead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.iso3d .ihead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.iso3d .stage3{position:relative;height:430px;perspective:1100px;z-index:1}
.iso3d .scene{position:absolute;left:50%;top:56%;width:340px;height:210px;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(calc(58deg + var(--rx,0deg))) rotateZ(calc(-42deg + var(--rz,0deg)));transition:transform .25s ease-out}
.iso3d .bobwrap{position:absolute;inset:0;transform-style:preserve-3d}
.iso3d .lyr{position:absolute;inset:0;border-radius:16px;transform-style:preserve-3d;
  background:linear-gradient(135deg,rgba(23,30,46,.92),rgba(13,18,30,.94));
  border:1.5px solid #26314a;box-shadow:0 30px 50px -20px rgba(0,0,0,.75);
  opacity:0;transform:translateZ(0);transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.iso3d.in .lyr{opacity:1;transform:translateZ(var(--z))}
.iso3d.in .l1{transition-delay:.1s}.iso3d.in .l2{transition-delay:.3s}.iso3d.in .l3{transition-delay:.5s}.iso3d.in .l4{transition-delay:.7s}
.iso3d .lyr.top{background:linear-gradient(135deg,rgba(198,255,74,.95),rgba(158,214,44,.95));border-color:#d7ff7d;box-shadow:0 34px 60px -18px rgba(198,255,74,.35)}
/* контент слоя (читается сверху в изометрии) */
.iso3d .lyr .t{position:absolute;left:16px;top:12px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8b96ad}
.iso3d .lyr.top .t{color:#1c2e08}
.iso3d .lyr .rows{position:absolute;left:16px;right:16px;top:40px;display:flex;flex-direction:column;gap:10px}
.iso3d .lyr .rw{height:9px;border-radius:5px;background:#232c42}
.iso3d .lyr .rw.a{background:#c6ff4a;box-shadow:0 0 12px rgba(198,255,74,.5)}
.iso3d .lyr .rw.r{background:#e5484d}
.iso3d .lyr.top .rw{background:rgba(11,15,10,.25)}
.iso3d .lyr.top .rw.a{background:#0b0f0a;box-shadow:none}
/* подписи-выноски справа */
.iso3d .keys{position:absolute;right:22px;top:60px;display:flex;flex-direction:column;gap:26px;z-index:2}
.iso3d .keys div{display:flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8b96ad;opacity:0;transform:translateX(14px);transition:opacity .5s ease,transform .5s ease}
.iso3d.in .keys div{opacity:1;transform:none}
.iso3d.in .keys div:nth-child(1){transition-delay:.85s}.iso3d.in .keys div:nth-child(2){transition-delay:.65s}
.iso3d.in .keys div:nth-child(3){transition-delay:.45s}.iso3d.in .keys div:nth-child(4){transition-delay:.25s}
.iso3d .keys i{width:22px;height:2px;background:#3a465f;border-radius:2px}
.iso3d .keys b{color:#f4f7ff;font-weight:600}
.iso3d .keys .kacid b{color:#c6ff4a}
.iso3d .keys .kacid i{background:#c6ff4a}
/* парение (после сборки) + reduced motion */
@keyframes isobob{0%,100%{transform:translateZ(0)}50%{transform:translateZ(10px)}}
.iso3d.in .bobwrap{animation:isobob 5.5s ease-in-out 1.4s infinite}
@media(prefers-reduced-motion:reduce){.iso3d .lyr{opacity:1;transform:translateZ(var(--z));transition:none}.iso3d.in .bobwrap{animation:none}.iso3d .keys div{opacity:1;transform:none}}
@media(max-width:700px){.iso3d .stage3{height:360px}.iso3d .scene{width:250px;height:160px}.iso3d .keys{position:static;flex-direction:row;flex-wrap:wrap;gap:12px;margin-top:4px}.iso3d .keys div{transform:none}}

/* — ВИДЖЕТ: живой лид (.flow3d) — шар едет по дороге и теряет свет на разрывах, вечный цикл — */
.flow3d{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px 16px;overflow:hidden}
.flow3d .fhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px;position:relative;z-index:2}
.flow3d .fhead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.flow3d .fhead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.flow3d .fstage{position:relative;height:250px;overflow:hidden;border-radius:12px}
/* перспективный пол */
.flow3d .floor{position:absolute;left:-20%;right:-20%;bottom:-40px;height:190px;transform:perspective(500px) rotateX(58deg);transform-origin:bottom;
  background-image:linear-gradient(#141b2b 1.5px,transparent 1.5px),linear-gradient(90deg,#141b2b 1.5px,transparent 1.5px);background-size:52px 52px;opacity:.8}
/* дорога */
.flow3d .road{position:absolute;left:4%;right:4%;top:118px;height:3px;background:linear-gradient(90deg,#3f6b00,#39531f 45%,#2a3436 75%,#1d2430);border-radius:3px}
.flow3d .road:after{content:'';position:absolute;inset:-7px 0;background:linear-gradient(90deg,rgba(198,255,74,.28),rgba(198,255,74,.08) 50%,transparent);filter:blur(6px)}
/* станции */
.flow3d .stn{position:absolute;top:0;bottom:0;pointer-events:none}
.flow3d .stn i{position:absolute;left:50%;top:118px;width:11px;height:11px;border-radius:50%;background:#0b0f0a;border:2.5px solid #3a465f;transform:translate(-50%,-4px)}
.flow3d .stn.first i{background:var(--acid);border-color:#7ea826;box-shadow:0 0 14px rgba(198,255,74,.7)}
.flow3d .stn.last i{border-color:#e5484d;border-style:dashed}
.flow3d .stn b{position:absolute;left:50%;top:66px;transform:translateX(-50%);font-family:Unbounded,sans-serif;font-size:12.5px;font-weight:600;color:#dbe2f0;white-space:nowrap}
.flow3d .stn span{position:absolute;left:50%;top:146px;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:10px;color:#5b6472;white-space:nowrap}
.flow3d .stn.first b{color:var(--acid)}
.flow3d .stn.last b{color:#ff8a8f}
.flow3d .stn .qm{position:absolute;left:50%;top:114px;transform:translate(-50%,-2px);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:#e5484d;animation:qmp 1.6s ease-in-out infinite}
@keyframes qmp{0%,100%{opacity:1}50%{opacity:.35}}
/* разрывы на дороге */
.flow3d .brk{position:absolute;top:110px;width:3px;height:18px;background:var(--hot);border-radius:2px;transform:rotate(18deg);box-shadow:5px 0 0 var(--hot);opacity:.85;filter:drop-shadow(0 0 5px rgba(229,72,77,.7))}
/* сам лид: шар с хвостом, едет вечно и гаснет */
.flow3d .orb{position:absolute;top:118px;left:4%;width:16px;height:16px;margin:-6.5px 0 0 -8px;border-radius:50%;background:var(--acid);
  animation:orbrun 7s linear infinite;z-index:3}
.flow3d .orb:after{content:'';position:absolute;right:8px;top:50%;height:4px;width:74px;transform:translateY(-50%);border-radius:3px;
  background:linear-gradient(270deg,rgba(198,255,74,.85),transparent);filter:blur(1px)}
@keyframes orbrun{
  0%{left:4%;opacity:1;box-shadow:0 0 22px 6px rgba(198,255,74,.8)}
  16%{box-shadow:0 0 22px 6px rgba(198,255,74,.8)}
  18%{box-shadow:0 0 16px 4px rgba(198,255,74,.55)}
  34%{box-shadow:0 0 16px 4px rgba(198,255,74,.55)}
  36%{box-shadow:0 0 12px 3px rgba(198,255,74,.4)}
  52%{box-shadow:0 0 12px 3px rgba(198,255,74,.4)}
  54%{box-shadow:0 0 9px 2px rgba(198,255,74,.28)}
  70%{box-shadow:0 0 9px 2px rgba(198,255,74,.28)}
  72%{box-shadow:0 0 6px 1px rgba(198,255,74,.18)}
  88%{opacity:.5;box-shadow:0 0 4px 1px rgba(198,255,74,.12)}
  92%{left:96%;opacity:.25;box-shadow:0 0 3px 0 rgba(198,255,74,.08)}
  100%{left:96%;opacity:0}
}
/* вспышки на разрывах — синхронны с проездом шара (те же % от 7s) */
.flow3d .spark{position:absolute;top:118px;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--hot);opacity:0;animation:sprk 7s linear infinite;z-index:2}
@keyframes sprk{0%,15%{opacity:0;transform:scale(.4)}17%{opacity:1;transform:scale(2.6)}21%{opacity:0;transform:scale(.4)}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.flow3d .orb,.flow3d .spark,.flow3d .stn .qm{animation:none}.flow3d .orb{left:50%;opacity:.7}}
@media(max-width:700px){.flow3d .stn b{font-size:10.5px}.flow3d .stn span{display:none}.flow3d .fstage{height:210px}}

/* — ВИДЖЕТ: неоновые башни (.bars3d) — рост метрики столбами на перспективном полу — */
.bars3d{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px 18px;overflow:hidden}
.bars3d .bhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;position:relative;z-index:2}
.bars3d .bhead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.bars3d .bhead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.bars3d .bhead .big{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:600;color:var(--acid)}
.bars3d .bstage{position:relative;height:300px}
.bars3d .floor{position:absolute;left:-15%;right:-15%;bottom:-60px;height:200px;transform:perspective(520px) rotateX(60deg);transform-origin:bottom;
  background-image:linear-gradient(#141b2b 1.5px,transparent 1.5px),linear-gradient(90deg,#141b2b 1.5px,transparent 1.5px);background-size:48px 48px;opacity:.85}
.bars3d .tw{position:absolute;bottom:58px;width:44px;transform:translateX(-50%);cursor:pointer}
.bars3d .tw .col{position:relative;width:100%;height:0;border-radius:8px 8px 3px 3px;transition:height 1.1s cubic-bezier(.2,.8,.2,1),filter .2s;
  background:linear-gradient(180deg,var(--c,#c6ff4a),rgba(11,15,10,.1) 130%)}
.bars3d.in .tw .col{height:var(--h)}
.bars3d .tw .col:before{content:'';position:absolute;left:0;right:0;top:0;height:9px;border-radius:8px 8px 4px 4px;background:#fff;opacity:.55;mix-blend-mode:overlay}
.bars3d .tw .col:after{content:'';position:absolute;left:50%;top:-4px;width:26px;height:8px;transform:translateX(-50%);border-radius:50%;background:var(--c,#c6ff4a);filter:blur(7px);opacity:.9}
.bars3d .tw .refl{position:absolute;top:100%;left:0;right:0;height:46px;border-radius:3px;transform:scaleY(-1);opacity:.14;filter:blur(3px);
  background:linear-gradient(180deg,var(--c,#c6ff4a),transparent 80%)}
.bars3d .tw .val{position:absolute;bottom:calc(var(--h) + 16px);left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:var(--c,#c6ff4a);opacity:0;transition:opacity .5s ease .6s}
.bars3d.in .tw .val{opacity:1}
.bars3d .tw .wk{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#5b6472;white-space:nowrap}
.bars3d .tw:hover .col{filter:brightness(1.3) drop-shadow(0 0 14px var(--c,#c6ff4a))}
.bars3d.in .tw:nth-child(2) .col{transition-delay:.05s}.bars3d.in .tw:nth-child(3) .col{transition-delay:.18s}
.bars3d.in .tw:nth-child(4) .col{transition-delay:.31s}.bars3d.in .tw:nth-child(5) .col{transition-delay:.44s}
.bars3d.in .tw:nth-child(6) .col{transition-delay:.57s}.bars3d.in .tw:nth-child(7) .col{transition-delay:.7s}
@media(prefers-reduced-motion:reduce){.bars3d .tw .col{transition:none;height:var(--h)}.bars3d .tw .val{opacity:1;transition:none}}
@media(max-width:700px){.bars3d .tw{width:30px}.bars3d .bstage{height:250px}.bars3d .tw .val{font-size:11.5px}}
/* крайние подписи не режутся краями */
.flow3d .stn.first b,.flow3d .stn.first span{transform:translateX(-18%)}
.flow3d .stn.last b,.flow3d .stn.last span{transform:translateX(-82%)}

/* ═══ ВИДЖЕТЫ СТАТЬИ «ЗВОНКИ» (уникальные — не переиспользовать в других статьях) ═══ */

/* — календарь-сканер: квартал, вспышки ошибок, день тайного покупателя — */
.wcal{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.wcal:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#121826 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.5}
.wcal .whead{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.wcal .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.wcal .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.wcal .cwrap{position:relative}
.wcal .cgrid{position:relative;display:grid;grid-template-columns:repeat(13,1fr);gap:6px}
.wcal .d{aspect-ratio:1;border-radius:4px;background:#161d2b;position:relative}
.wcal .d.err{animation:derr 9s linear infinite}
@keyframes derr{0%,88%,100%{background:#161d2b}90%,96%{background:var(--hot);box-shadow:0 0 10px rgba(229,72,77,.6)}}
.wcal .d.mys{background:var(--acid);box-shadow:0 0 12px rgba(198,255,74,.5)}
.wcal .scan{position:absolute;top:-8px;bottom:-8px;width:2.5px;background:var(--acid);border-radius:2px;box-shadow:0 0 14px rgba(198,255,74,.8);animation:scanmv 9s linear infinite}
@keyframes scanmv{0%{left:0%}100%{left:100%}}
.wcal .leg{position:relative;display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.wcal .leg i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:7px}
.wcal .leg .l1 i{background:var(--acid)}.wcal .leg .l2 i{background:var(--hot)}.wcal .leg .l3 i{background:#161d2b;border:1px solid #26314a}
@media(prefers-reduced-motion:reduce){.wcal .scan,.wcal .d.err{animation:none}}

/* — стена звонков: сотни чёрточек, услышаны единицы — */
.wwall{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.wwall .whead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.wwall .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.wwall .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.wwall .field{display:grid;grid-template-columns:repeat(40,1fr);gap:4px}
.wwall .c{height:16px;border-radius:2px;background:#1a2233;opacity:0;animation:cin .4s ease forwards}
@keyframes cin{to{opacity:1}}
.wwall .c.heard{background:var(--acid);box-shadow:0 0 8px rgba(198,255,74,.55);animation:cin .4s ease forwards,chb 2.6s ease-in-out infinite}
@keyframes chb{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
.wwall .wfoot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8b96ad}
.wwall .wfoot b{color:var(--acid);font-weight:600}
@media(prefers-reduced-motion:reduce){.wwall .c{opacity:1;animation:none}.wwall .c.heard{animation:none}}

/* — лента транскрибации: страницы бегут, никто не читает — */
.wtape{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:0;overflow:hidden;height:280px}
.wtape .roll{position:absolute;inset:0;padding:20px 26px;animation:troll 13s linear infinite}
@keyframes troll{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
.wtape .ln{height:9px;border-radius:5px;background:#1c2536;margin:13px 0}
.wtape .ln.short{width:62%}.wtape .ln.mid{width:84%}
.wtape:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0b0f0a,transparent 22%,transparent 68%,#0b0f0a)}
.wtape .stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-7deg);z-index:2;
  font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hot);border:2.5px solid var(--hot);border-radius:10px;padding:12px 20px;background:rgba(11,15,10,.82);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.wtape .roll{animation:none}}
@media(max-width:700px){.wtape .stamp{font-size:11px;padding:10px 12px}}

/* — хитмап «почерк ошибок»: менеджеры × ошибки — */
.wmap{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.wmap .whead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.wmap .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.wmap .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.wmap table{width:100%;border-collapse:separate;border-spacing:6px}
.wmap th{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;color:#8b96ad;text-transform:uppercase;letter-spacing:.06em;padding:0 4px 4px;text-align:center}
.wmap th:first-child{text-align:left}
.wmap td.nm{font-family:Unbounded,sans-serif;font-size:13.5px;font-weight:600;color:#dbe2f0;white-space:nowrap;padding-right:8px}
.wmap td.hc{height:44px;border-radius:8px;background:#161d2b;position:relative;min-width:52px}
.wmap td.hc i{position:absolute;inset:0;border-radius:8px;background:var(--hot);opacity:0;transform:scale(.6);transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.5,.4,1)}
.wmap.in td.hc i{opacity:var(--o,0);transform:scale(1)}
.wmap.in td.hc.top i{box-shadow:0 0 16px rgba(229,72,77,.5)}
.wmap td.hc.top:after{content:'почерк';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .4s ease 1s}
.wmap.in td.hc.top:after{opacity:1}
.wmap tr:nth-child(1) td.hc i{transition-delay:.15s}.wmap tr:nth-child(2) td.hc i{transition-delay:.45s}.wmap tr:nth-child(3) td.hc i{transition-delay:.75s}
.wmap .wfoot{margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8b96ad}
.wmap .wfoot b{color:var(--acid);font-weight:600}
@media(prefers-reduced-motion:reduce){.wmap td.hc i{transition:none;opacity:var(--o,0);transform:scale(1)}}
@media(max-width:700px){.wmap td.nm{font-size:11px}.wmap th{font-size:8.5px}.wmap td.hc{min-width:0;height:36px}}

/* — спидометр 45→58 — */
.wgauge{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:26px 24px 18px;overflow:hidden;text-align:center}
.wgauge:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#121826 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.5}
.wgauge .whead{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;text-align:left}
.wgauge .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.wgauge .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.wgauge svg{position:relative;width:min(420px,86%);height:auto;display:block;margin:0 auto}
.wgauge .needle{transform-origin:210px 190px;transform:rotate(-72deg);transition:transform 1.6s cubic-bezier(.3,.9,.3,1) .3s}
.wgauge.in .needle{transform:rotate(24deg)}
.wgauge .gv{position:relative;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:44px;color:var(--acid);margin-top:-52px}
.wgauge .gs{position:relative;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8b96ad;margin:4px 0 6px}
@media(prefers-reduced-motion:reduce){.wgauge .needle{transition:none;transform:rotate(24deg)}}

/* ═══ ВИДЖЕТЫ СТАТЬИ «ДАШБОРД» (уникальные) ═══ */

/* — схлопывание: 10 кривых таблиц слетаются в один экран — */
.dcollapse{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden;min-height:360px}
.dcollapse:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#121826 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.5}
.dcollapse .whead{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px;z-index:3}
.dcollapse .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.dcollapse .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.dcollapse .stage{position:relative;height:280px}
.dcollapse .tbl{position:absolute;width:120px;height:80px;border-radius:8px;background:#131a28;border:1px solid #242e44;padding:9px;
  transition:transform 1s cubic-bezier(.5,0,.2,1),opacity .8s ease}
.dcollapse .tbl .r{height:5px;border-radius:3px;background:#2a3550;margin:5px 0}
.dcollapse .tbl .r.bad{background:#e5484d;opacity:.7}
.dcollapse.in .tbl{transform:translate(-50%,-50%) scale(.2)!important;left:50%!important;top:50%!important;opacity:0;transition-delay:.3s}
.dcollapse .screen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.5);width:300px;height:180px;border-radius:14px;
  background:linear-gradient(135deg,#0f1826,#0a0f1a);border:1.5px solid var(--acid);box-shadow:0 0 44px -8px rgba(198,255,74,.4);
  opacity:0;transition:opacity .6s ease 1.1s,transform .8s cubic-bezier(.3,.9,.3,1) 1.1s;padding:16px;z-index:2}
.dcollapse.in .screen{opacity:1;transform:translate(-50%,-50%) scale(1)}
.dcollapse .screen .st{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--acid);margin-bottom:10px}
.dcollapse .screen .r{height:8px;border-radius:5px;background:#1e2942;margin:9px 0}
.dcollapse .screen .r.a{background:var(--acid);width:64%;box-shadow:0 0 12px rgba(198,255,74,.4)}
.dcollapse .wfoot{position:relative;text-align:center;margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8b96ad;z-index:3}
@media(prefers-reduced-motion:reduce){.dcollapse .tbl{opacity:0}.dcollapse .screen{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* — утро владельца: кольцо-таймер 2 минуты + экран телефона — */
.dmorning{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:24px;overflow:hidden}
.dmorning:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#121826 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.5}
.dmorning .whead{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px;z-index:2}
.dmorning .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.dmorning .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.dmorning .grid2{position:relative;display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center;z-index:1}
.dmorning .ring{position:relative;width:180px;height:180px;margin:0 auto}
.dmorning .ring svg{transform:rotate(-90deg)}
.dmorning .ring .track{fill:none;stroke:#1c2536;stroke-width:12}
.dmorning .ring .prog{fill:none;stroke:var(--acid);stroke-width:12;stroke-linecap:round;stroke-dasharray:490;stroke-dashoffset:490;transition:stroke-dashoffset 2s linear .3s}
.dmorning.in .ring .prog{stroke-dashoffset:35}
.dmorning .ring .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dmorning .ring .lbl b{font-family:'IBM Plex Mono',monospace;font-size:38px;font-weight:600;color:var(--acid)}
.dmorning .ring .lbl span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.dmorning .feed{display:flex;flex-direction:column;gap:10px}
.dmorning .fitem{display:flex;align-items:center;gap:12px;background:#131a28;border:1px solid #242e44;border-radius:10px;padding:12px 14px;opacity:0;transform:translateX(16px);transition:opacity .5s ease,transform .5s ease}
.dmorning.in .fitem{opacity:1;transform:none}
.dmorning.in .fitem:nth-child(1){transition-delay:.4s}.dmorning.in .fitem:nth-child(2){transition-delay:.9s}.dmorning.in .fitem:nth-child(3){transition-delay:1.4s}.dmorning.in .fitem:nth-child(4){transition-delay:1.9s}
.dmorning .fitem i{width:9px;height:9px;border-radius:50%;background:var(--acid);flex-shrink:0;box-shadow:0 0 8px rgba(198,255,74,.6)}
.dmorning .fitem b{font-family:Unbounded,sans-serif;font-size:13.5px;font-weight:600;color:#dbe2f0}
.dmorning .fitem span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad;margin-left:auto}
@media(prefers-reduced-motion:reduce){.dmorning .ring .prog{stroke-dashoffset:35;transition:none}.dmorning .fitem{opacity:1;transform:none}}
@media(max-width:700px){.dmorning .grid2{grid-template-columns:1fr;gap:16px}}

/* — таймлайн «сегодня vs через неделю» — */
.dtl{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.dtl .whead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.dtl .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.dtl .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.dtl .lane{position:relative;margin:16px 0;padding-left:8px}
.dtl .lane .cap{font-family:'IBM Plex Mono',monospace;font-size:12px;margin-bottom:8px}
.dtl .lane.good .cap{color:var(--acid)}.dtl .lane.bad .cap{color:var(--hot)}
.dtl .bar{position:relative;height:14px;border-radius:8px;background:#141b29;overflow:hidden}
.dtl .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;width:0;transition:width 1.4s ease .3s}
.dtl .lane.good .bar i{background:linear-gradient(90deg,var(--acid),#8fd63f);width:8%}
.dtl.in .lane.good .bar i{width:8%}
.dtl .lane.bad .bar i{background:linear-gradient(90deg,#5a2225,var(--hot));}
.dtl.in .lane.bad .bar i{width:100%}
.dtl .bar .dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;z-index:2}
.dtl .lane.good .bar .dot{left:8%;background:var(--acid);box-shadow:0 0 12px rgba(198,255,74,.7)}
.dtl .lane.bad .bar .dot{left:100%;background:var(--hot);box-shadow:0 0 12px rgba(229,72,77,.7)}
.dtl .lane .res{font-family:'IBM Plex Mono',monospace;font-size:11.5px;margin-top:7px}
.dtl .lane.good .res{color:#8b96ad}.dtl .lane.bad .res{color:#ff8a8f}
.dtl .scale{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:10px;color:#5b6472;margin-top:6px}
@media(prefers-reduced-motion:reduce){.dtl .bar i{transition:none}.dtl .lane.bad .bar i{width:100%}}

/* — петля таргетолога: кольцо «неделя» рвётся на «2 часа» — */
.dloop{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:24px;overflow:hidden;text-align:center}
.dloop:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#121826 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.5}
.dloop .whead{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;text-align:left;z-index:2}
.dloop .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.dloop .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.dloop svg{position:relative;width:min(380px,86%);height:auto;display:block;margin:6px auto 0}
.dloop .oldloop{fill:none;stroke:#3a465f;stroke-width:6;stroke-dasharray:8 8;opacity:1;transition:opacity .5s ease}
.dloop.in .oldloop{opacity:.25}
.dloop .fast{fill:none;stroke:var(--acid);stroke-width:6;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.4s ease .6s;filter:drop-shadow(0 0 8px rgba(198,255,74,.5))}
.dloop.in .fast{stroke-dashoffset:0}
.dloop .lgt{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;fill:#5b6472}
.dloop .lgt.a{fill:var(--acid)}
@media(prefers-reduced-motion:reduce){.dloop .fast{stroke-dashoffset:0;transition:none}.dloop .oldloop{opacity:.25}}

/* ═══ ВИДЖЕТЫ СТАТЬИ «ДИЗАЙН ЧЕРЕЗ CLAUDE» (уникальные) ═══ */

/* — бриф-детектор: прилагательные гаснут, эталон вспыхивает — */
.gbrief{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.gbrief:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#121826 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.5}
.gbrief .whead{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px;z-index:2}
.gbrief .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.gbrief .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.gbrief .duo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;z-index:1}
.gbrief .pane{border-radius:12px;padding:18px 16px;min-height:170px;display:flex;flex-direction:column;gap:9px;transition:opacity 1s ease .4s,filter 1s ease .4s,box-shadow 1s ease .4s}
.gbrief .pane .pt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.gbrief .pane.words{background:#131a28;border:1px solid #242e44}
.gbrief .pane.words .pt{color:#8b96ad}
.gbrief .pane.words .w{font-family:Unbounded,sans-serif;font-size:14px;font-weight:600;color:#dbe2f0;transition:opacity .8s ease,filter .8s ease}
.gbrief.in .pane.words{opacity:.45;filter:grayscale(1)}
.gbrief.in .pane.words .w{opacity:.35;filter:blur(.6px)}
.gbrief.in .pane.words .w:nth-child(2){transition-delay:.5s}.gbrief.in .pane.words .w:nth-child(3){transition-delay:.8s}.gbrief.in .pane.words .w:nth-child(4){transition-delay:1.1s}
.gbrief .pane.words .verdict{margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--hot);opacity:0;transition:opacity .6s ease 1.5s}
.gbrief.in .pane.words .verdict{opacity:1}
.gbrief .pane.etalon{background:#10160e;border:1px solid #2b3d15}
.gbrief .pane.etalon .pt{color:var(--acid)}
.gbrief.in .pane.etalon{box-shadow:0 0 34px -8px rgba(198,255,74,.45);border-color:var(--acid)}
.gbrief .shot{border-radius:8px;background:linear-gradient(135deg,#18220f,#0d1409);border:1px solid #2b3d15;padding:10px;display:flex;flex-direction:column;gap:6px}
.gbrief .shot .ln{height:7px;border-radius:4px;background:#26331a}
.gbrief .shot .ln.a{background:var(--acid);width:56%;box-shadow:0 0 8px rgba(198,255,74,.4)}
.gbrief .pane.etalon .ask{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#cde3a4;line-height:1.55}
.gbrief .pane.etalon .verdict{margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--acid);opacity:0;transition:opacity .6s ease 1.5s}
.gbrief.in .pane.etalon .verdict{opacity:1}
@media(max-width:700px){.gbrief .duo{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.gbrief .pane,.gbrief .pane .w,.gbrief .pane .verdict{transition:none}.gbrief.in .pane.words{opacity:.45}.gbrief.in .pane.words .verdict,.gbrief.in .pane.etalon .verdict{opacity:1}}

/* — глаз ИИ: скан окна → красная метка → правка → зелёная (вечный цикл) — */
.geye{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.geye .whead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.geye .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.geye .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.geye .browser{position:relative;border-radius:12px;background:#0f1522;border:1px solid #242e44;overflow:hidden}
.geye .bbar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid #1a2233;background:#0c1119}
.geye .bbar i{width:9px;height:9px;border-radius:50%;background:#232c42}
.geye .bbar .url{margin-left:8px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#5b6472}
.geye .page{position:relative;padding:16px;display:grid;grid-template-columns:1.3fr 1fr;gap:10px;min-height:170px}
.geye .blk{border-radius:8px;background:#141b29;min-height:42px}
.geye .blk.hero{grid-column:1/-1;min-height:56px;background:linear-gradient(135deg,#141b29,#101623)}
.geye .blk.crooked{animation:gfix 9s linear infinite}
@keyframes gfix{
  0%,24%{background:#141b29;box-shadow:none;transform:translateY(6px) rotate(1.2deg)}
  28%,46%{background:#2a1518;box-shadow:0 0 0 2px var(--hot),0 0 18px rgba(229,72,77,.5);transform:translateY(6px) rotate(1.2deg)}
  54%,88%{background:#18220f;box-shadow:0 0 0 2px var(--acid),0 0 18px rgba(198,255,74,.4);transform:none}
  92%,100%{background:#141b29;box-shadow:none;transform:translateY(6px) rotate(1.2deg)}
}
.geye .scanline{position:absolute;left:0;right:0;height:44px;top:-50px;background:linear-gradient(180deg,transparent,rgba(198,255,74,.13),transparent);border-bottom:1.5px solid rgba(198,255,74,.55);animation:gscan 9s linear infinite;pointer-events:none;z-index:2}
@keyframes gscan{0%{top:-50px}22%{top:105%}23%,100%{top:105%}}
.geye .verdictbar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid #1a2233;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8b96ad}
.geye .verdictbar b{width:8px;height:8px;border-radius:50%;flex-shrink:0;animation:gdot 9s linear infinite}
@keyframes gdot{0%,24%{background:#3a465f}28%,46%{background:var(--hot);box-shadow:0 0 10px rgba(229,72,77,.7)}54%,100%{background:var(--acid);box-shadow:0 0 10px rgba(198,255,74,.7)}}
.geye .msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(prefers-reduced-motion:reduce){.geye .scanline{animation:none;display:none}.geye .blk.crooked{animation:none;background:#18220f;box-shadow:0 0 0 2px var(--acid)}}

/* — одна библиотека: свотчи меняют три экрана — */
.gtokens{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden;--tk:#c6ff4a}
.gtokens:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#121826 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.5}
.gtokens .whead{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px;z-index:2}
.gtokens .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.gtokens .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.gtokens .sw{position:relative;display:flex;gap:10px;align-items:center;margin-bottom:16px;z-index:2;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.gtokens .swb{width:30px;height:30px;border-radius:9px;border:2px solid transparent;cursor:pointer;transition:transform .2s ease,border-color .2s}
.gtokens .swb.on{border-color:#fff;transform:scale(1.12)}
.gtokens .swb:hover{transform:scale(1.12)}
.gtokens .screens{position:relative;display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:12px;z-index:1}
.gtokens .scr{border-radius:10px;background:#0f1522;border:1px solid #242e44;padding:12px;display:flex;flex-direction:column;gap:7px}
.gtokens .scr .tt{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#5b6472;margin-bottom:3px}
.gtokens .scr .ln{height:7px;border-radius:4px;background:#1c2536}
.gtokens .scr .ln.a{background:var(--tk);box-shadow:0 0 9px color-mix(in srgb,var(--tk) 55%,transparent);transition:background .5s ease,box-shadow .5s ease}
.gtokens .scr .pill{align-self:flex-start;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;color:#0b0f0a;background:var(--tk);border-radius:99px;padding:3px 10px;transition:background .5s ease}
.gtokens .wfoot{position:relative;margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8b96ad;z-index:2}
.gtokens .wfoot b{color:var(--acid);font-weight:600}
@media(max-width:700px){.gtokens .screens{grid-template-columns:1fr 1fr;} .gtokens .scr:last-child{display:none}}

/* — свод правил: чек-лист загорается сам — */
.grules{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.grules .whead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.grules .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.grules .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.grules .rl{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid #141b29;opacity:.35;transform:translateX(-8px);transition:opacity .5s ease,transform .5s ease}
.grules.in .rl{opacity:1;transform:none}
.grules.in .rl:nth-child(2){transition-delay:.25s}.grules.in .rl:nth-child(3){transition-delay:.5s}.grules.in .rl:nth-child(4){transition-delay:.75s}.grules.in .rl:nth-child(5){transition-delay:1s}.grules.in .rl:nth-child(6){transition-delay:1.25s}
.grules .box{width:20px;height:20px;border-radius:6px;border:1.5px solid #3a465f;flex-shrink:0;position:relative;transition:background .4s ease,border-color .4s ease}
.grules.in .rl .box{background:var(--acid);border-color:var(--acid);box-shadow:0 0 10px rgba(198,255,74,.5)}
.grules.in .rl:nth-child(2) .box{transition-delay:.45s}.grules.in .rl:nth-child(3) .box{transition-delay:.7s}.grules.in .rl:nth-child(4) .box{transition-delay:.95s}.grules.in .rl:nth-child(5) .box{transition-delay:1.2s}.grules.in .rl:nth-child(6) .box{transition-delay:1.45s}
.grules .box:after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #0b0f0a;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .3s ease .2s}
.grules.in .rl .box:after{transform:rotate(45deg) scale(1)}
.grules .rl b{font-family:Unbounded,sans-serif;font-size:13.5px;font-weight:600;color:#dbe2f0}
.grules .rl span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad;margin-left:auto;text-align:right}
.grules .wfoot{margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8b96ad}
.grules .wfoot b{color:var(--acid);font-weight:600}
@media(max-width:700px){.grules .rl span{display:none}}
@media(prefers-reduced-motion:reduce){.grules .rl,.grules .box,.grules .box:after{transition:none}.grules .rl{opacity:1;transform:none}}

/* ═══ ВИДЖЕТЫ СТАТЬИ «CLAUDE + CRM / ДАННЫЕ» (уникальные) ═══ */

/* — вопрос→ответ: чат с печатающимся вопросом и ответом-словами — */
.qchat{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.qchat:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#121826 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.5}
.qchat .whead{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px;z-index:2}
.qchat .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.qchat .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.qchat .thread{position:relative;display:flex;flex-direction:column;gap:12px;z-index:1;min-height:210px}
.qchat .bub{max-width:78%;border-radius:14px;padding:12px 15px;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.6}
.qchat .bub.q{align-self:flex-end;background:#1c2536;color:#dbe2f0;border-bottom-right-radius:4px}
.qchat .bub.q .tcur{display:inline-block;width:8px;height:14px;background:var(--acid);vertical-align:-2px;animation:qmp 1s steps(1) infinite}
.qchat .bub.a{align-self:flex-start;background:#10160e;border:1px solid #2b3d15;color:#cde3a4;border-bottom-left-radius:4px;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.qchat .bub.a.show{opacity:1;transform:none}
.qchat .bub.a b{color:var(--acid);font-weight:600}
.qchat .thinking{align-self:flex-start;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#5b6472;display:none;align-items:center;gap:8px}
.qchat .thinking.show{display:flex}
.qchat .thinking i{width:6px;height:6px;border-radius:50%;background:var(--acid);animation:qmp 1s ease-in-out infinite}
.qchat .thinking i:nth-child(2){animation-delay:.2s}.qchat .thinking i:nth-child(3){animation-delay:.4s}
.qchat .wfoot{position:relative;margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8b96ad;z-index:2}
.qchat .wfoot b{color:var(--acid);font-weight:600}

/* — мост-коннектор: разрыв ты↔данные, мост встаёт, сигнал бежит — */
.qbridge{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px 26px;overflow:hidden}
.qbridge .whead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.qbridge .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.qbridge .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.qbridge .scene{position:relative;display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:0}
.qbridge .endp{position:relative;border-radius:12px;background:#131a28;border:1px solid #242e44;padding:16px 14px;text-align:center;z-index:2}
.qbridge .endp b{display:block;font-family:Unbounded,sans-serif;font-size:14px;font-weight:600;color:#dbe2f0;margin-bottom:4px}
.qbridge .endp span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#8b96ad}
.qbridge .gap{position:relative;height:64px}
.qbridge .crack{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:2px;background:repeating-linear-gradient(90deg,#3a465f 0 8px,transparent 8px 16px);opacity:1;transition:opacity .6s ease .3s}
.qbridge.in .crack{opacity:.18}
.qbridge .deck{position:absolute;left:4%;right:4%;top:50%;transform:translateY(-50%) scaleX(0);transform-origin:left center;height:10px;border-radius:6px;background:linear-gradient(90deg,#2b3d15,#3f6b00);border:1px solid #2b3d15;transition:transform .9s cubic-bezier(.3,.9,.3,1) .4s}
.qbridge.in .deck{transform:translateY(-50%) scaleX(1)}
.qbridge .pulse{position:absolute;top:50%;left:4%;width:12px;height:12px;border-radius:50%;background:var(--acid);box-shadow:0 0 14px rgba(198,255,74,.8);transform:translate(-50%,-50%);opacity:0}
.qbridge.in .pulse{animation:qbrun 2.6s linear 1.4s infinite}
@keyframes qbrun{0%{left:4%;opacity:0}8%{opacity:1}46%{left:96%;opacity:1}50%{left:96%;opacity:0}54%{left:96%;opacity:1}92%{left:4%;opacity:1}100%{left:4%;opacity:0}}
.qbridge .deck .lbl{position:absolute;left:50%;top:-26px;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--acid);white-space:nowrap;opacity:0;transition:opacity .5s ease 1.2s}
.qbridge.in .deck .lbl{opacity:1}
.qbridge .wfoot{margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8b96ad;text-align:center}
.qbridge .wfoot b{color:var(--acid);font-weight:600}
@media(prefers-reduced-motion:reduce){.qbridge .deck{transform:translateY(-50%) scaleX(1);transition:none}.qbridge .pulse{animation:none;opacity:0}.qbridge .crack{opacity:.18}.qbridge .deck .lbl{opacity:1}}

/* — вертикальный трек 5 шагов с узлами (вечер подключения) — */
.qtrack{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.qtrack .whead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.qtrack .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.qtrack .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.qtrack .rail{position:relative;padding-left:34px}
.qtrack .rail:before{content:'';position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:#1c2536}
.qtrack .rail .fillline{position:absolute;left:11px;top:8px;width:2px;height:0;background:var(--acid);box-shadow:0 0 8px rgba(198,255,74,.5);transition:height 2.4s ease .3s}
.qtrack.in .rail .fillline{height:calc(100% - 16px)}
.qtrack .node{position:relative;padding:10px 0 16px}
.qtrack .node:before{content:'';position:absolute;left:-30px;top:14px;width:16px;height:16px;border-radius:50%;background:#0b0f0a;border:2px solid #3a465f;transition:border-color .4s ease,background .4s ease,box-shadow .4s ease}
.qtrack.in .node:before{border-color:var(--acid);background:var(--acid);box-shadow:0 0 10px rgba(198,255,74,.55)}
.qtrack.in .node:nth-child(2):before{transition-delay:.4s}.qtrack.in .node:nth-child(3):before{transition-delay:.9s}.qtrack.in .node:nth-child(4):before{transition-delay:1.4s}.qtrack.in .node:nth-child(5):before{transition-delay:1.9s}.qtrack.in .node:nth-child(6):before{transition-delay:2.4s}
.qtrack .node b{font-family:Unbounded,sans-serif;font-size:13.5px;font-weight:600;color:#dbe2f0;display:block}
.qtrack .node span{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8b96ad;line-height:1.6}
.qtrack .node .tm{position:absolute;right:0;top:12px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#5b6472}
@media(max-width:700px){.qtrack .node .tm{display:none}}
@media(prefers-reduced-motion:reduce){.qtrack .rail .fillline,.qtrack .node:before{transition:none}.qtrack.in .rail .fillline{height:calc(100% - 16px)}}

/* — замок доступа: интерактивный переключатель чтение/запись — */
.qlock{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.qlock:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#121826 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.5}
.qlock .whead{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:18px;z-index:2}
.qlock .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.qlock .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.qlock .panel{position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;z-index:1}
.qlock .keyhole{width:92px;height:92px;border-radius:22px;display:flex;align-items:center;justify-content:center;background:#10160e;border:1.5px solid #2b3d15;transition:background .4s ease,border-color .4s ease}
.qlock .keyhole svg{width:44px;height:44px;fill:none;stroke:var(--acid);stroke-width:1.8;transition:stroke .4s ease}
.qlock.unlocked .keyhole{background:#2a1518;border-color:#5a2225}
.qlock.unlocked .keyhole svg{stroke:var(--hot)}
.qlock .modes{display:flex;flex-direction:column;gap:10px}
.qlock .mode{display:flex;align-items:center;gap:12px;border-radius:10px;border:1px solid #242e44;background:#131a28;padding:12px 14px;cursor:pointer;transition:border-color .3s ease,background .3s ease;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#8b96ad;text-align:left}
.qlock .mode b{color:#dbe2f0;font-weight:600}
.qlock .mode .ind{width:14px;height:14px;border-radius:50%;border:2px solid #3a465f;flex-shrink:0;transition:background .3s,border-color .3s}
.qlock .mode.on{border-color:var(--acid);background:#10160e}
.qlock .mode.on .ind{background:var(--acid);border-color:var(--acid);box-shadow:0 0 8px rgba(198,255,74,.6)}
.qlock .mode.danger.on{border-color:var(--hot);background:#1d1012}
.qlock .mode.danger.on .ind{background:var(--hot);border-color:var(--hot);box-shadow:0 0 8px rgba(229,72,77,.6)}
.qlock .wfoot{position:relative;margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;z-index:2;transition:color .3s ease}
.qlock .wfoot.ok{color:#8b96ad}.qlock .wfoot.ok b{color:var(--acid)}
.qlock .wfoot.warn{color:#ff8a8f}.qlock .wfoot.warn b{color:var(--hot)}
@media(max-width:700px){.qlock .panel{grid-template-columns:1fr}.qlock .keyhole{margin:0 auto}}

/* ═══ ВИДЖЕТЫ СТАТЬИ «АВТОМАТИЗАЦИЯ» (уникальные) ═══ */

/* — календарь без выходных: неделя владельца горит вся, потом система забирает — */
.awcal{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.awcal:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#121826 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.5}
.awcal .whead{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px;z-index:2}
.awcal .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.awcal .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.awcal .lane{position:relative;margin:14px 0;z-index:1}
.awcal .lane .lt{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad;margin-bottom:8px}
.awcal .days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.awcal .day{position:relative;aspect-ratio:1/.72;border-radius:9px;background:#131a28;border:1px solid #242e44;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#5b6472;overflow:hidden}
.awcal .day i{position:absolute;inset:0;background:linear-gradient(135deg,rgba(229,72,77,.55),rgba(229,72,77,.2));opacity:0;transition:opacity .5s ease}
.awcal .lane.man .day i{transition-delay:calc(var(--d)*.18s)}
.awcal.in .lane.man .day i{opacity:1}
.awcal .lane.man .day span{position:relative;z-index:1}
.awcal.in .lane.man .day{border-color:#5a2225}
.awcal .lane.sys .day i{background:linear-gradient(135deg,rgba(198,255,74,.5),rgba(198,255,74,.16));transition-delay:calc(1.5s + var(--d)*.14s)}
.awcal.in .lane.sys .day i{opacity:1}
.awcal.in .lane.sys .day{transition:border-color .4s ease calc(1.5s + var(--d)*.14s);border-color:#2b3d15}
.awcal .lane .res{margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;opacity:0;transition:opacity .6s ease}
.awcal .lane.man .res{color:#ff8a8f;transition-delay:1.3s}
.awcal .lane.sys .res{color:var(--acid);transition-delay:2.6s}
.awcal.in .lane .res{opacity:1}
@media(prefers-reduced-motion:reduce){.awcal .day i,.awcal .lane .res{transition:none}.awcal.in .day i,.awcal.in .lane .res{opacity:1}}

/* — конвейер: три шестерни → Telegram-алерт — */
.agears{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.agears .whead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.agears .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.agears .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.agears .belt{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:center}
.agears .st{text-align:center;position:relative}
.agears .st svg{width:64px;height:64px;margin:0 auto;display:block}
.agears .st svg .g{fill:none;stroke:#3a465f;stroke-width:1.6;transform-origin:center;animation:agspin 7s linear infinite}
.agears .st:nth-child(2) svg .g{animation-direction:reverse;stroke:#59a8ff}
.agears .st:nth-child(3) svg .g{stroke:var(--acid);filter:drop-shadow(0 0 6px rgba(198,255,74,.4))}
@keyframes agspin{to{transform:rotate(360deg)}}
.agears .st b{display:block;font-family:Unbounded,sans-serif;font-size:12.5px;font-weight:600;color:#dbe2f0;margin-top:8px}
.agears .st span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#8b96ad}
.agears .st:after{content:'→';position:absolute;right:-11px;top:26px;color:#3a465f;font-size:15px}
.agears .st:nth-child(3):after{color:var(--acid)}
.agears .tg{position:relative;border-radius:12px;background:#131a28;border:1px solid #2b3d15;padding:12px 14px;max-width:210px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#dbe2f0;line-height:1.55;animation:atgpop 7s ease infinite}
@keyframes atgpop{0%,10%{transform:scale(.94);opacity:.5;border-color:#242e44}16%,90%{transform:scale(1);opacity:1;border-color:#2b3d15;box-shadow:0 0 22px -6px rgba(198,255,74,.35)}100%{transform:scale(.94);opacity:.5}}
.agears .tg .tgh{display:flex;align-items:center;gap:7px;color:var(--acid);font-weight:600;margin-bottom:6px}
.agears .tg .tgh i{width:7px;height:7px;border-radius:50%;background:var(--acid);animation:kpulse 1.6s infinite}
@media(max-width:700px){.agears .belt{grid-template-columns:1fr 1fr 1fr}.agears .tg{grid-column:1/-1;max-width:none;margin-top:8px}.agears .st:nth-child(3):after{display:none}}
@media(prefers-reduced-motion:reduce){.agears .st svg .g,.agears .tg,.agears .tg .tgh i{animation:none}}

/* — фитиль: сигнал сегодня режет фитиль, без сигнала — догорает до потери — */
.afuse{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.afuse .whead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.afuse .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.afuse .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.afuse .row{position:relative;margin:20px 0 26px}
.afuse .row .cap{font-family:'IBM Plex Mono',monospace;font-size:12px;margin-bottom:10px}
.afuse .row.cut .cap{color:var(--acid)}.afuse .row.burn .cap{color:var(--hot)}
.afuse .cord{position:relative;height:6px;border-radius:4px;background:#1c2536}
.afuse .burned{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:repeating-linear-gradient(90deg,#3a2a12 0 6px,#241a0c 6px 12px);width:0}
.afuse .spark{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#ffd166,#ff7b24 60%,transparent 75%);filter:drop-shadow(0 0 10px #ff9d3c);left:0;opacity:0}
.afuse.in .row.burn .burned{animation:afburn 5.5s linear .4s forwards}
.afuse.in .row.burn .spark{animation:afspark 5.5s linear .4s forwards}
@keyframes afburn{0%{width:0}100%{width:100%}}
@keyframes afspark{0%{left:0;opacity:1}96%{opacity:1}100%{left:100%;opacity:0}}
.afuse .boom{position:absolute;right:-6px;top:50%;transform:translate(0,-50%) scale(0);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:#fff;background:var(--hot);border-radius:8px;padding:6px 10px;white-space:nowrap}
.afuse.in .row.burn .boom{animation:afboom .5s cubic-bezier(.3,1.6,.4,1) 5.9s forwards}
@keyframes afboom{to{transform:translate(0,-50%) scale(1)}}
.afuse.in .row.cut .burned{animation:afburn 5.5s linear .4s forwards;animation-play-state:running}
.afuse.in .row.cut .burned{animation:afburncut 1.6s linear .4s forwards}
@keyframes afburncut{0%{width:0}100%{width:22%}}
.afuse.in .row.cut .spark{animation:afsparkcut 1.6s linear .4s forwards}
@keyframes afsparkcut{0%{left:0;opacity:1}94%{opacity:1}100%{left:22%;opacity:0}}
.afuse .scissors{position:absolute;left:22%;top:50%;transform:translate(-50%,-50%) scale(0);z-index:2}
.afuse .scissors span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;color:#0b0f0a;background:var(--acid);border-radius:8px;padding:6px 10px;white-space:nowrap;box-shadow:0 0 18px rgba(198,255,74,.55)}
.afuse.in .row.cut .scissors{animation:afboom .45s cubic-bezier(.3,1.6,.4,1) 2s forwards}
.afuse .wfoot{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8b96ad}
.afuse .wfoot b{color:var(--acid);font-weight:600}
@media(prefers-reduced-motion:reduce){.afuse .burned,.afuse .spark,.afuse .boom,.afuse .scissors{animation:none!important}.afuse.in .row.burn .burned{width:100%}.afuse.in .row.burn .boom{transform:translate(0,-50%) scale(1)}.afuse.in .row.cut .burned{width:22%}.afuse.in .row.cut .scissors{transform:translate(-50%,-50%) scale(1)}}

/* — передача: задачи улетают с руки владельца в автопилот — */
.ahand{position:relative;background:#0b0f0a;border-radius:var(--r-lg);margin:24px 0;padding:22px 24px;overflow:hidden}
.ahand:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#121826 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.5}
.ahand .whead{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px;z-index:2}
.ahand .whead b{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;color:#f4f7ff}
.ahand .whead span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8b96ad}
.ahand .duo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;z-index:1}
.ahand .col{border-radius:12px;padding:16px 14px;min-height:200px}
.ahand .col .ct{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.ahand .col.man{background:#131a28;border:1px solid #242e44}
.ahand .col.man .ct{color:#8b96ad}
.ahand .col.sys{background:#10160e;border:1px solid #2b3d15}
.ahand .col.sys .ct{color:var(--acid)}
.ahand .task{display:flex;align-items:center;gap:9px;border-radius:9px;padding:9px 11px;margin:8px 0;font-family:'IBM Plex Mono',monospace;font-size:11.5px}
.ahand .col.man .task{background:#1a2233;color:#8b96ad;transition:opacity .5s ease,transform .6s cubic-bezier(.5,0,.6,1)}
.ahand.in .col.man .task{opacity:0;transform:translateX(60px)}
.ahand.in .col.man .task:nth-child(2){transition-delay:.3s}.ahand.in .col.man .task:nth-child(3){transition-delay:.8s}.ahand.in .col.man .task:nth-child(4){transition-delay:1.3s}.ahand.in .col.man .task:nth-child(5){transition-delay:1.8s}
.ahand .col.sys .task{background:#18220f;color:#cde3a4;opacity:0;transform:translateX(-60px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.9,.3,1)}
.ahand.in .col.sys .task{opacity:1;transform:none}
.ahand.in .col.sys .task:nth-child(2){transition-delay:.45s}.ahand.in .col.sys .task:nth-child(3){transition-delay:.95s}.ahand.in .col.sys .task:nth-child(4){transition-delay:1.45s}.ahand.in .col.sys .task:nth-child(5){transition-delay:1.95s}
.ahand .task i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ahand .col.man .task i{background:#3a465f}
.ahand .col.sys .task i{background:var(--acid);box-shadow:0 0 7px rgba(198,255,74,.6)}
.ahand .col.man .stay{opacity:1!important;transform:none!important;background:#131a28;border:1px dashed #3a465f;color:#dbe2f0}
.ahand .wfoot{position:relative;margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8b96ad;z-index:2}
.ahand .wfoot b{color:var(--acid);font-weight:600}
@media(max-width:700px){.ahand .duo{grid-template-columns:1fr}.ahand .col{min-height:0}}
@media(prefers-reduced-motion:reduce){.ahand .task{transition:none}.ahand.in .col.man .task{opacity:.3;transform:none}.ahand.in .col.sys .task{opacity:1;transform:none}}