/* Ролик анализа: логический холст 1120×630 (на телефоне 400×720) масштабируется под ширину; всё движение задаёт js/reel.js. */
.reel { --W: 1120; --H: 630; --k: 1; position: relative; max-width: 1180px; margin: 28px auto 0; padding: 0 var(--gutter); }
.reel.is-portrait { --W: 400; --H: 720; }
.rl-box { position: relative; width: calc(var(--W) * var(--k) * 1px); height: calc(var(--H) * var(--k) * 1px); margin: 0 auto; }
.rl-cv {
  position: absolute; left: 0; top: 0; width: calc(var(--W) * 1px); height: calc(var(--H) * 1px);
  transform: scale(var(--k)); transform-origin: 0 0;
  border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 0%, #2a2c5c 0%, #17183a 55%, #101128 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 30px 80px -20px rgba(8,8,30,.75), 0 0 120px -30px rgba(145,141,246,.45);
  color: #fff; font-size: 15px; letter-spacing: -0.015em; contain: layout paint;
  --mu: #a9a8d6; --ln: rgba(255,255,255,.11); --pn: rgba(255,255,255,.055); --pn2: rgba(255,255,255,.09);
  --lv: #a7a3ff; --mt: #4ade80; --am: #ffb224; --em: #ff5c33;
  user-select: none; -webkit-user-select: none;
}
.rl-cv * { box-sizing: border-box; }
.rl-cv p { margin: 0; }
.rl-cv svg { overflow: visible; }

/* фон */
.rl-bg { position: absolute; inset: 0; z-index: 0; }
.rl-orb { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
.rl-orb.o1 { left: -120px; top: -160px; background: radial-gradient(circle, #6d63ff 0%, transparent 65%); }
.rl-orb.o2 { right: -160px; bottom: -220px; background: radial-gradient(circle, #d6409f 0%, transparent 65%); opacity: .35; }
.rl-orb.o3 { left: 40%; top: 30%; width: 420px; height: 420px; background: radial-gradient(circle, #2c78fc 0%, transparent 65%); opacity: .25; }
.rl-grid { position: absolute; inset: -40px; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 80%); mask: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 80%); will-change: transform; }
.rl-dust i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .35; animation: rl-drift var(--d, 9s) linear infinite; animation-delay: var(--dl, 0s); }
@keyframes rl-drift { from { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: var(--op, .4); } 85% { opacity: var(--op, .4); } to { transform: translate3d(var(--dx, 20px), -120px, 0); opacity: 0; } }
.rl-vig { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(110% 80% at 50% 50%, transparent 60%, rgba(5,5,20,.55) 100%); }
.reel.is-paused .rl-cv *, .reel.is-idle .rl-cv * { animation-play-state: paused !important; }

.rl-cam { position: absolute; inset: 0; z-index: 1; will-change: transform; }
.rl-sc { position: absolute; inset: 0; }
.rl-sc > * { position: absolute; }

/* общие детали */
.rl-n { font-variant-numeric: tabular-nums; }
.rl-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--lv); border-radius: 1px; animation: rl-blink 1s steps(2, start) infinite; }
@keyframes rl-blink { to { visibility: hidden; } }
.rl-burst { width: 0; height: 0; }
.rl-burst i { position: absolute; left: -1.5px; top: 0; width: 3px; height: 26px; border-radius: 3px; background: linear-gradient(var(--lv), transparent); transform-origin: 50% 0; }
.pan { background: var(--pn); border: 1px solid var(--ln); border-radius: 18px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* HUD */
.hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hud > * { position: absolute; top: 22px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--ln); font-size: 13px; color: #e6e5ff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hud-url { left: 24px; font-weight: 500; }
.hud-url i { width: 8px; height: 8px; border-radius: 50%; background: var(--mt); box-shadow: 0 0 10px var(--mt); }
.hud-t { right: 24px; color: var(--mu); }
.hud-t b { color: #fff; font-weight: 600; min-width: 34px; text-align: right; }
.hud-t i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(167,163,255,.3); border-top-color: var(--lv); animation: rl-spin .8s linear infinite; }
.hud-t.is-done i { border-color: var(--mt); animation: none; background: var(--mt); box-shadow: 0 0 10px var(--mt); width: 8px; height: 8px; }
@keyframes rl-spin { to { transform: rotate(360deg); } }

/* 0. адрес */
.s0-k { left: 0; right: 0; top: 214px; text-align: center; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--mu); }
.s0-field { left: 270px; top: 262px; width: 580px; height: 72px; display: flex; align-items: center; padding: 0 10px 0 26px; border-radius: 999px; background: rgba(255,255,255,.96); color: #181925; font-size: 22px; box-shadow: 0 0 0 6px rgba(167,163,255,.18), 0 20px 50px -10px rgba(109,99,255,.6); }
.s0-pre { color: #a3a3b5; }
.s0-url { font-weight: 500; }
.s0-btn { margin-left: auto; height: 52px; padding: 0 26px; display: flex; align-items: center; border-radius: 999px; background: #918df6; color: #fff; font-size: 17px; font-weight: 500; box-shadow: 0 6px 18px -4px rgba(145,141,246,.8); }
.s0-burst { left: 0; top: 0; }
.s0-burst i:nth-child(even) { height: 16px; width: 2px; left: -1px; background: linear-gradient(#fff, transparent); }
.s0-hand { left: 0; top: 0; width: 48px; height: 48px; margin: -3px 0 0 -17px; transform-origin: 17px 3px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); z-index: 2; }
.s0-hand path { fill: none; stroke: #181925; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s0-hand path.f { fill: #fff; }

/* 1. обход */
.s1-links { left: 0; top: 0; width: 100%; height: 100%; }
.s1-links path { fill: none; stroke: url(#rl-lg); stroke: rgba(167,163,255,.55); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.s1-dots i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--lv); box-shadow: 0 0 12px 2px rgba(167,163,255,.7); }
.s1-dots i:nth-child(3n) { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; opacity: .8; }
.pg { width: 190px; height: 128px; }
.pg-in { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: min-content; align-content: start; gap: 7px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.95); box-shadow: 0 14px 40px -12px rgba(0,0,0,.6); overflow: hidden; }
.pg .k { display: block; height: 8px; border-radius: 4px; background: #e6e6ef; grid-column: 1 / -1; }
.pg .k.t { width: 55%; height: 9px; background: #d4d4e2; }
.pg .k.nav { height: 10px; background: linear-gradient(90deg, #d4d4e2 30%, transparent 30%, transparent 60%, #e6e6ef 60%); }
.pg .k.hero { height: 46px; border-radius: 8px; background: linear-gradient(120deg, #c9c6ff, #eeedfe); }
.pg .k.l1 { width: 80%; } .pg .k.l2 { width: 60%; }
.pg .k.btn { width: 34%; height: 14px; border-radius: 7px; background: #918df6; }
.pg .k.c3 { grid-column: auto; height: 42px; border-radius: 6px; }
.pg .k.row { height: 9px; }
.pg .k.row:nth-child(odd) { background: #efeff6; }
.pg .k.im { grid-column: auto; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #dcdcf0, #f1f1f8); }
.pg .k.map { height: 52px; border-radius: 8px; background: radial-gradient(circle at 60% 45%, #918df6 0 5px, transparent 6px), repeating-linear-gradient(35deg, #e3f0e3 0 10px, #edf6ed 10px 20px); }
.pg.more .pg-in { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border: 1.5px dashed rgba(167,163,255,.45); box-shadow: none; }
.pg.more b { font-size: 30px; font-weight: 600; color: var(--lv); letter-spacing: -0.03em; }
.pg-p { position: absolute; left: 2px; top: calc(100% + 8px); font-size: 13px; color: var(--mu); white-space: nowrap; }
.pg-scan { position: absolute; left: -6px; right: -6px; top: 0; height: 3px; border-radius: 3px; background: var(--lv); box-shadow: 0 0 18px 4px rgba(167,163,255,.85), 0 0 60px 10px rgba(109,99,255,.4); }
.pg.home { left: 445px; top: 150px; width: 230px; height: 158px; }
.pg.home .pg-in { box-shadow: 0 0 0 4px rgba(167,163,255,.25), 0 24px 60px -12px rgba(109,99,255,.7); }
.pg.c1 { left: 110px; top: 70px; } .pg.c2 { left: 110px; top: 300px; }
.pg.c3 { left: 820px; top: 70px; } .pg.c4 { left: 820px; top: 300px; }
.pg.c5 { left: 465px; top: 372px; width: 190px; height: 92px; }
.s1-count { left: 0; right: 0; top: 520px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.s1-count b { font-size: 64px; line-height: 1; font-weight: 650; letter-spacing: -0.05em; }
.s1-count span { font-size: 14px; line-height: 1.25; color: var(--mu); }
.s1-type { font-style: normal; margin-left: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.5); color: var(--mt); font-size: 15px; font-weight: 500; box-shadow: 0 0 24px -4px rgba(74,222,128,.55); }

/* 2. страницы */
.gauge { left: 110px; top: 110px; width: 340px; height: 380px; }
.g-svg { position: absolute; left: 20px; top: 0; width: 300px; height: 300px; }
.g-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 22; stroke-linecap: round; }
.g-z { fill: none; stroke-width: 22; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.g-ok { stroke: var(--mt); } .g-mid { stroke: var(--am); } .g-bad { stroke: var(--em); filter: drop-shadow(0 0 calc(var(--gl, 0) * 14px) rgba(255,92,51,.9)); }
.g-ticks line { stroke: rgba(255,255,255,.35); stroke-width: 2; stroke-linecap: round; }
.g-needle { left: 168px; top: 40px; width: 4px; height: 112px; transform-origin: 50% 100%; }
.g-needle i { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(#fff, rgba(255,255,255,.6)); box-shadow: 0 0 14px rgba(255,255,255,.7); }
.g-hub { left: 156px; top: 138px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.12); }
.g-val { left: 0; right: 0; top: 196px; text-align: center; }
.g-val b { display: block; font-size: 60px; line-height: 1; font-weight: 650; letter-spacing: -0.05em; color: #fff; text-shadow: 0 0 calc(var(--gl, 0) * 30px) rgba(255,92,51,.9); }
.g-val span { font-size: 14px; color: var(--mu); }
.g-lab { left: 0; right: 0; top: 302px; text-align: center; font-size: 17px; font-weight: 500; }
.g-norm { left: 0; right: 0; top: 330px; text-align: center; font-size: 13px; color: var(--mu); }
.cks { left: 520px; top: 132px; width: 490px; display: flex; flex-direction: column; gap: 12px; }
.cks > * { position: relative; }
.ck { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 18px; border-radius: 16px; background: var(--pn); border: 1px solid var(--ln); }
.ck-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.ck-ic svg { width: 20px; height: 20px; }
.ck-ic path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ck-ic.no { background: rgba(255,92,51,.16); box-shadow: 0 0 0 1px rgba(255,92,51,.4); } .ck-ic.no path { stroke: var(--em); }
.ck-ic.ok { background: rgba(74,222,128,.16); box-shadow: 0 0 0 1px rgba(74,222,128,.4); } .ck-ic.ok path { stroke: var(--mt); }
.ck-p { font-weight: 500; font-size: 16px; white-space: nowrap; }
.ck em { margin-left: auto; font-style: normal; font-size: 14px; color: #ffb39e; white-space: nowrap; }
.ck em.ok { color: var(--mt); }
.ck.m1, .ck.m2 { --fl: 0; box-shadow: inset 0 0 0 1px rgba(255,92,51, calc(var(--fl) * .9)), 0 0 calc(var(--fl) * 30px) rgba(255,92,51,.35); }
.s2-sum { left: 520px; top: 432px; display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 22px; border-radius: 999px; background: rgba(255,92,51,.12); border: 1px solid rgba(255,92,51,.45); }
.s2-sum b { font-size: 34px; font-weight: 650; letter-spacing: -0.04em; color: #fff; min-width: 22px; text-align: center; }
.s2-sum span { font-size: 14px; color: #ffc9b8; }
.s2-sum span:first-child { color: #fff; font-weight: 500; font-size: 15px; }

/* 3. спрос */
.s3-cloud { left: 0; top: 0; width: 100%; height: 100%; }
.s3-cloud i { position: absolute; font-style: normal; white-space: nowrap; padding: 5px 11px; border-radius: 999px; font-size: 12px; color: #d7d6ff; background: rgba(167,163,255,.1); border: 1px solid rgba(167,163,255,.22); }
.sbox { left: 290px; top: 70px; width: 540px; height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-radius: 16px; background: rgba(255,255,255,.95); color: #181925; font-size: 18px; box-shadow: 0 20px 50px -14px rgba(0,0,0,.6); }
.sbox svg { width: 22px; height: 22px; flex: none; fill: none; stroke: #918df6; stroke-width: 2.2; stroke-linecap: round; }
.sbox em { margin-left: auto; font-style: normal; font-size: 12px; color: #9a9aae; white-space: nowrap; }
.sbox .rl-caret { background: #918df6; }
.dqs { left: 190px; top: 150px; width: 740px; display: flex; flex-direction: column; gap: 8px; }
.dqs > * { position: relative; }
.dq { display: grid; grid-template-columns: 290px 1fr 96px; align-items: center; gap: 18px; height: 50px; padding: 0 20px; border-radius: 14px; background: var(--pn); border: 1px solid var(--ln); }
.dq-q { font-size: 16px; font-weight: 500; white-space: nowrap; }
.dq-bar { display: block; height: 14px; border-radius: 7px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; }
.dq-bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * var(--p, 0)); border-radius: 7px; background: linear-gradient(90deg, #6d63ff, #a7a3ff); box-shadow: 0 0 16px rgba(167,163,255,.7); }
.dq b { text-align: right; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
.s3-tot { left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.s3-tot b { font-size: 168px; line-height: .95; font-weight: 650; letter-spacing: -0.055em; background: linear-gradient(180deg, #fff 30%, #b9b6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s3-tot span { font-size: 22px; line-height: 1.3; color: var(--mu); }

/* 4. позиции */
.pt { left: 110px; top: 96px; width: 560px; }
.pt > * { position: relative; }
.pt-h, .pt-r { display: grid; grid-template-columns: 1fr 96px 96px; align-items: center; gap: 12px; }
.pt-h { height: 40px; padding: 0 20px; font-size: 13px; color: var(--mu); }
.se { display: flex; align-items: center; justify-content: center; gap: 6px; }
.se i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; }
.se > svg { width: 22px; height: 22px; }
.se .go { background: #fff; width: 22px; height: 22px; } .se .go svg { width: 14px; height: 14px; }
.sh > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.sh-ya { width: 20px; height: 20px; }
.pt-r { height: 64px; padding: 0 20px; margin-top: 9px; border-radius: 16px; background: var(--pn); border: 1px solid var(--ln); }
.pt-q { font-size: 16px; font-weight: 500; white-space: nowrap; }
.pt-r b { height: 46px; display: grid; place-items: center; border-radius: 12px; font-size: 22px; font-weight: 650; letter-spacing: -0.03em; backface-visibility: hidden; }
.pt-r b.t10 { background: rgba(74,222,128,.16); color: var(--mt); box-shadow: inset 0 0 0 1px rgba(74,222,128,.5), 0 0 24px -6px rgba(74,222,128,.6); }
.pt-r b.t20 { background: rgba(255,178,36,.14); color: var(--am); box-shadow: inset 0 0 0 1px rgba(255,178,36,.45); }
.pt-r b.no { background: rgba(255,255,255,.05); color: #8a89b3; font-size: 14px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--ln); }
.m52 { left: 730px; top: 170px; width: 290px; }
.m52-h { font-size: 13px; color: var(--mu); margin-bottom: 14px !important; }
.m52-g { display: grid; grid-template-columns: repeat(13, 14px); gap: 8px; }
.m52-g i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.14); }
.m52-g i.on { background: var(--mt); box-shadow: 0 0 12px 2px rgba(74,222,128,.75); }
.m52-t { margin-top: 26px !important; font-size: 18px; color: var(--mu); }
.m52-t b { font-size: 64px; line-height: 1; font-weight: 650; letter-spacing: -0.05em; color: #fff; display: inline-block; margin: 0 4px; vertical-align: -0.12em; }

/* 5. конкуренты */
.sh { left: 230px; top: 48px; width: 660px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--mu); }
.sh-q { padding: 8px 16px; border-radius: 999px; background: rgba(167,163,255,.16); border: 1px solid rgba(167,163,255,.45); color: #fff; font-size: 16px; font-weight: 500; }
.sl { left: 230px; top: 104px; width: 660px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sl > li { position: relative; display: grid; grid-template-columns: 30px 22px 170px 1fr 90px; align-items: center; gap: 12px; height: 52px; padding: 0 18px; border-radius: 15px; background: var(--pn); border: 1px solid var(--ln); }
.sl-n { font-size: 14px; color: var(--mu); font-weight: 600; }
.fav { width: 22px; height: 22px; border-radius: 7px; background: var(--c); box-shadow: 0 0 14px -2px var(--c); }
.sl-d { font-size: 16px; font-weight: 500; }
.sl-bar { display: block; height: 10px; border-radius: 5px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; }
.sl-bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * var(--p, 0)); border-radius: 5px; background: rgba(255,255,255,.55); }
.sl em { font-style: normal; text-align: right; font-size: 14px; color: var(--mu); }
.sl em b { color: #fff; font-size: 16px; }
.sl > li.sl-gap { display: flex; height: 36px; gap: 6px; background: none; border: 1px dashed rgba(255,255,255,.16); padding-left: 60px; }
.sl-gap i { width: 5px; height: 5px; border-radius: 50%; background: var(--mu); }
.sl-gap span { margin-left: 10px; font-size: 14px; color: var(--mu); }
.sl > li.you { background: rgba(167,163,255,.16); border-color: rgba(167,163,255,.7); box-shadow: 0 0 40px -6px rgba(145,141,246,.75); }
.sl > li.you .sl-n { color: var(--lv); }
.sl > li.you .sl-bar::after { background: var(--lv); }
.s5-up { left: 906px; top: 124px; height: 290px; width: 200px; }  /* top и height ставит reel.js по строкам списка */
.s5-br { position: absolute; left: 0; top: 0; width: 24px; height: 100%; }
.s5-br path { fill: none; stroke: var(--em); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.s5-up p { position: absolute; left: 36px; top: calc(50% - 46px); display: flex; flex-direction: column; }
.s5-up b { font-size: 64px; line-height: 1; font-weight: 650; letter-spacing: -0.05em; color: #ff8a6b; text-shadow: 0 0 30px rgba(255,92,51,.6); }
.s5-up span { font-size: 14px; line-height: 1.3; color: var(--mu); }

/* 6. итог */
.dn { left: 110px; top: 96px; width: 300px; height: 420px; }
.dn-svg { position: absolute; left: 20px; top: 0; width: 260px; height: 260px; transform: rotate(-90deg); }
.dn-t { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 26; }
.dn-s { fill: none; stroke-width: 26; }
.dn-s.c { stroke: var(--em); filter: drop-shadow(0 0 8px rgba(255,92,51,.7)); } .dn-s.i { stroke: var(--am); } .dn-s.m { stroke: #8f8cc9; }
.dn-c { left: 20px; top: 0; width: 260px; height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dn-c b { font-size: 72px; line-height: 1; font-weight: 650; letter-spacing: -0.05em; }
.dn-c span { font-size: 14px; color: var(--mu); }
.dn-l { left: 20px; top: 290px; width: 260px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.dn-l li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.dn-l i { width: 12px; height: 12px; border-radius: 4px; }
.dn-l .c { background: var(--em); } .dn-l .i { background: var(--am); } .dn-l .m { background: #8f8cc9; }
.gp { left: 470px; top: 96px; width: 540px; padding: 22px 26px; border-radius: 20px; background: linear-gradient(135deg, rgba(145,141,246,.32), rgba(145,141,246,.08)); border: 1px solid rgba(167,163,255,.6); box-shadow: 0 0 calc(20px + var(--gl, 0) * 40px) -8px rgba(145,141,246,.9); }
.gp-l { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: #d7d6ff; }
.gp-l svg { width: 16px; height: 16px; color: #fff; }
.gp-q { margin-top: 8px !important; font-size: 28px; font-weight: 650; letter-spacing: -0.035em; }
.gp-m { margin-top: 8px !important; display: flex; gap: 18px; font-size: 15px; color: #d7d6ff; }
.gp-m b { color: #fff; }
.pl { left: 470px; top: 266px; width: 540px; padding: 20px 26px 22px; border-radius: 20px; background: var(--pn); border: 1px solid var(--ln); }
.pl-h { font-size: 18px; font-weight: 600; margin-bottom: 12px !important; }
.pl-h span { font-weight: 400; font-size: 14px; color: var(--mu); margin-left: 6px; }
.pl ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pl li { position: relative; display: flex; align-items: center; gap: 14px; height: 44px; }
.pl li i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 600; background: #918df6; box-shadow: 0 0 16px -2px rgba(145,141,246,.9); }
.pl li span { font-size: 16px; font-weight: 500; white-space: nowrap; }
.pl li em { margin-left: auto; font-style: normal; font-size: 13px; color: var(--mu); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ln); white-space: nowrap; }

/* 7. в работу */
.wy { top: 96px; width: 440px; height: 380px; padding: 24px; border-radius: 22px; background: var(--pn); border: 1px solid var(--ln); }
.wy > * { position: relative; }
.w1 { left: 100px; } .w2 { left: 580px; }
.wy-h { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; letter-spacing: -0.025em; }
.wy-h i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(167,163,255,.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(167,163,255,.45); }
.wy-h svg { width: 20px; height: 20px; }
.rl-doc { margin-top: 18px; height: 210px; padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,.95); color: #181925; }
.doc-t { font-size: 15px; font-weight: 600; min-height: 22px; }
.doc-k { margin-top: 12px !important; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #9a9aae; }
.ln { display: block; height: 8px; margin-top: 8px; border-radius: 4px; width: var(--w); background: #e6e6ef; }
.wy-b { display: inline-flex; align-items: center; margin-top: 18px; height: 46px; padding: 0 22px; border-radius: 999px; background: #918df6; font-size: 15px; font-weight: 500; box-shadow: 0 8px 22px -6px rgba(145,141,246,.9); }
.pr { margin-top: 18px; height: 210px; padding: 18px 20px; border-radius: 14px; background: rgba(10,10,30,.55); border: 1px solid var(--ln); font: 400 15px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0; color: #e7e6ff; }
.pr-t { white-space: pre-wrap; }
.wy-ai { margin-top: 18px; display: flex; gap: 10px; }
.ai { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; background: rgba(255,255,255,.95); color: #181925; font-size: 15px; font-weight: 500; }
.ai svg { width: 20px; height: 20px; }
.fin { left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(50% 50% at 50% 50%, rgba(16,17,40,.92) 0%, rgba(16,17,40,.7) 60%, rgba(16,17,40,0) 100%); }
.fin > * { position: relative; }
.fin-ic { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #a7a3ff, #6d63ff); box-shadow: 0 0 0 10px rgba(145,141,246,.18), 0 20px 60px -10px rgba(109,99,255,.9); }
.fin-ic svg { width: 46px; height: 46px; }
.fin-ic path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fin-ring { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -96px 0 0 -48px; border-radius: 50%; border: 2px solid var(--lv); }
.fin-burst { position: absolute; left: 50%; top: 50%; margin-top: -48px; }
.fin-h { margin-top: 26px !important; font-size: 44px; font-weight: 650; letter-spacing: -0.045em; }
.fin-s { margin-top: 6px !important; font-size: 16px; color: var(--mu); }

/* управление под холстом */
.rl-ctl { display: flex; align-items: center; gap: 14px; max-width: 1120px; margin: 18px auto 0; }
.rl-play { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s; }
.rl-play:hover { background: rgba(255,255,255,.16); }
.rl-play:active { transform: scale(.94); }
.rl-play svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rl-play .i-pl { fill: currentColor; stroke: none; }
.rl-play .i-pl, .rl-play .i-re { display: none; }
.reel.is-paused .rl-play .i-pa, .reel.is-end .rl-play .i-pa { display: none; }
.reel.is-paused:not(.is-end) .rl-play .i-pl { display: block; }
.reel.is-end .rl-play .i-re { display: block; }
.rl-rail { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.rl-rail button { width: 100%; padding: 10px 0 0; border: 0; background: none; color: rgba(255,255,255,.55); font-size: 12px; text-align: left; cursor: pointer; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s; }
.rl-rail button::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); }
.rl-rail button::after { content: ''; position: absolute; left: 0; top: 0; height: 4px; border-radius: 2px; width: calc(var(--p, 0) * 100%); background: var(--lavender); box-shadow: 0 0 10px rgba(145,141,246,.8); }
.rl-rail button.is-on { color: #fff; }
.rl-rail button:hover { color: #fff; }
.rl-cap { max-width: 620px; min-height: 110px; margin: 26px auto 0; text-align: center; color: #fff; }
.rl-cap .over { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #a9a8d6; }
.rl-cap h3 { margin: 0 0 6px; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.rl-cap .txt { margin: 0; font-size: 15px; color: #c9c8e6; }
.rl-cap .w { display: inline-block; opacity: 0; transform: translateY(12px); filter: blur(4px); animation: rl-word .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 28ms); }
@keyframes rl-word { to { opacity: 1; transform: none; filter: none; } }
.rl-cta { display: table; margin: 4px auto 0; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1); }
.reel.is-end .rl-cta { opacity: 1; transform: none; pointer-events: auto; }
body:not(.is-dark) .rl-cap, body:not(.is-dark) .rl-play { color: var(--carbon); }
body:not(.is-dark) .rl-cap .over, body:not(.is-dark) .rl-cap .txt { color: var(--graphite); }
body:not(.is-dark) .rl-rail button { color: var(--ash); }
body:not(.is-dark) .rl-rail button.is-on { color: var(--carbon); }
body:not(.is-dark) .rl-rail button::before { background: var(--fog); }
body:not(.is-dark) .rl-play { border-color: var(--fog); background: var(--paper); }

/* ---------- телефон: холст 400×720 ---------- */
.is-portrait .rl-cv { border-radius: 22px; font-size: 14px; }
.is-portrait .hud > * { top: 14px; height: 30px; padding: 0 11px; font-size: 12px; }
.is-portrait .hud-url { left: 14px; } .is-portrait .hud-t { right: 14px; }
.is-portrait .hud-l { display: none; }
.is-portrait .s0-k { top: 278px; }
.is-portrait .s0-field { left: 16px; top: 316px; width: 368px; height: 60px; padding: 0 7px 0 18px; font-size: 17px; }
.is-portrait .s0-pre { display: none; }
.is-portrait .s0-btn { height: 46px; padding: 0 16px; font-size: 15px; }
.is-portrait .pg { width: 150px; height: 102px; }
.is-portrait .pg-in { padding: 9px; gap: 5px; }
.is-portrait .pg .k.c3 { height: 32px; } .is-portrait .pg .k.im { height: 22px; } .is-portrait .pg .k.map { height: 40px; }
.is-portrait .pg-p { font-size: 12px; top: calc(100% + 5px); }
.is-portrait .pg.home { left: 100px; top: 74px; width: 200px; height: 138px; }
.is-portrait .pg.home .k.hero { height: 38px; }
.is-portrait .pg.c1 { left: 24px; top: 262px; } .is-portrait .pg.c2 { left: 226px; top: 262px; }
.is-portrait .pg.c3 { left: 24px; top: 410px; } .is-portrait .pg.c4 { left: 226px; top: 410px; }
.is-portrait .pg.c5 { left: 150px; top: 548px; width: 100px; height: 64px; }
.is-portrait .pg.c5 b { font-size: 22px; }
.is-portrait .pg.c5 .pg-p { display: none; }
.is-portrait .s1-count { top: 634px; gap: 10px; }
.is-portrait .s1-count b { font-size: 44px; }
.is-portrait .s1-count span { font-size: 12px; }
.is-portrait .s1-type { font-size: 13px; padding: 6px 12px; margin-left: 4px; }
.is-portrait .gauge { left: 50px; top: 56px; width: 300px; height: 330px; transform-origin: 50% 0; }
.is-portrait .g-svg { left: 0; }
.is-portrait .g-needle { left: 148px; } .is-portrait .g-hub { left: 136px; }
.is-portrait .g-val b { font-size: 52px; }
.is-portrait .g-lab { top: 290px; font-size: 15px; } .is-portrait .g-norm { top: 314px; }
.is-portrait .cks { left: 16px; top: 400px; width: 368px; gap: 8px; }
.is-portrait .ck { height: 50px; padding: 0 12px; gap: 10px; border-radius: 13px; }
.is-portrait .ck-ic { width: 24px; height: 24px; } .is-portrait .ck-ic svg { width: 16px; height: 16px; }
.is-portrait .ck-p { font-size: 14px; } .is-portrait .ck em { font-size: 12px; }
.is-portrait .s2-sum { left: 16px; right: 16px; top: 636px; height: 50px; justify-content: center; padding: 0 16px; }
.is-portrait .s2-sum b { font-size: 28px; }
.is-portrait .s2-sum span { font-size: 13px; }
.is-portrait .sbox { left: 16px; top: 66px; width: 368px; height: 52px; font-size: 15px; padding: 0 14px; gap: 9px; }
.is-portrait .sbox em { display: none; }
.is-portrait .dqs { left: 16px; top: 136px; width: 368px; gap: 7px; }
.is-portrait .dq { grid-template-columns: 1fr 76px; grid-template-rows: auto auto; height: 62px; padding: 8px 14px; gap: 6px 12px; align-content: center; }
.is-portrait .dq-q { grid-column: 1 / -1; font-size: 14px; }
.is-portrait .dq b { font-size: 17px; }
.is-portrait .s3-tot b { font-size: 92px; }
.is-portrait .s3-tot span { font-size: 17px; max-width: 300px; text-wrap: balance; }
.is-portrait .pt { left: 16px; top: 64px; width: 368px; }
.is-portrait .pt-h, .is-portrait .pt-r { grid-template-columns: 1fr 64px 64px; gap: 8px; }
.is-portrait .pt-h { padding: 0 12px; font-size: 12px; }
.is-portrait .se i { width: 18px; height: 18px; }
.is-portrait .pt-r { height: 56px; padding: 0 12px; margin-top: 8px; }
.is-portrait .pt-q { font-size: 13px; white-space: normal; line-height: 1.25; }
.is-portrait .pt-r b { height: 40px; font-size: 18px; }
.is-portrait .pt-r b.no { font-size: 12px; }
.is-portrait .m52 { left: 54px; top: 452px; width: 300px; text-align: center; }
.is-portrait .m52-g { grid-template-columns: repeat(13, 14px); gap: 8px; justify-content: center; }
.is-portrait .m52-t { margin-top: 16px !important; }
.is-portrait .m52-t b { font-size: 54px; }
.is-portrait .sh { left: 16px; top: 64px; width: 368px; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13px; }
.is-portrait .sh-q { font-size: 15px; }
.is-portrait .sl { left: 16px; top: 136px; width: 368px; gap: 7px; }
.is-portrait .sl > li { grid-template-columns: 24px 18px 1fr 54px; height: 48px; padding: 0 12px; gap: 9px; }
.is-portrait .sl-bar { display: none; }
.is-portrait .fav { width: 18px; height: 18px; border-radius: 6px; }
.is-portrait .sl-d { font-size: 14px; }
.is-portrait .sl em { font-size: 12px; } .is-portrait .sl em b { font-size: 14px; }
.is-portrait .sl > li.sl-gap { height: 32px; padding-left: 48px; }
.is-portrait .s5-up { left: 16px; top: 462px; width: 368px; height: 120px; }
.is-portrait .s5-br { display: none; }
.is-portrait .s5-up p { left: 0; right: 0; top: 0; flex-direction: row; align-items: center; justify-content: center; gap: 14px; }
.is-portrait .s5-up b { font-size: 60px; }
.is-portrait .dn { left: 16px; top: 62px; width: 368px; height: 190px; }
.is-portrait .dn-svg, .is-portrait .dn-c { left: 0; width: 180px; height: 180px; }
.is-portrait .dn-c b { font-size: 50px; } .is-portrait .dn-c span { font-size: 12px; }
.is-portrait .dn-l { left: 204px; top: 48px; width: 160px; } .is-portrait .dn-l li { font-size: 14px; }
.is-portrait .gp { left: 16px; top: 270px; width: 368px; padding: 16px 18px; }
.is-portrait .gp-l { font-size: 11px; } .is-portrait .gp-q { font-size: 22px; }
.is-portrait .gp-m { font-size: 13px; gap: 12px; }
.is-portrait .pl { left: 16px; top: 418px; width: 368px; padding: 16px 16px; }
.is-portrait .pl-h { font-size: 16px; margin-bottom: 8px !important; }
.is-portrait .pl li { height: 52px; gap: 10px; }
.is-portrait .pl li i { width: 26px; height: 26px; font-size: 13px; }
.is-portrait .pl li span { font-size: 13.5px; white-space: normal; line-height: 1.3; }
.is-portrait .pl li em { font-size: 11px; padding: 3px 8px; }
.is-portrait .wy { left: 16px; width: 368px; height: 300px; padding: 18px; }
.is-portrait .w1 { top: 62px; } .is-portrait .w2 { top: 378px; }
.is-portrait .wy-h { font-size: 17px; } .is-portrait .wy-h i { width: 34px; height: 34px; }
.is-portrait .rl-doc, .is-portrait .pr { margin-top: 14px; height: 150px; padding: 14px 16px; }
.is-portrait .pr { font-size: 13px; }
.is-portrait .doc-k { margin-top: 8px !important; }
.is-portrait .rl-doc .ln:nth-of-type(n+4) { display: none; }
.is-portrait .wy-b, .is-portrait .ai { margin-top: 14px; height: 42px; font-size: 14px; }
.is-portrait .wy-ai { margin-top: 14px; } .is-portrait .wy-ai .ai { margin-top: 0; }
.is-portrait .fin-h { font-size: 34px; } .is-portrait .fin-s { font-size: 14px; }
@media (max-width: 760px) {
  .reel { padding: 0 16px; margin-top: 20px; }
  .rl-ctl { gap: 10px; margin-top: 14px; }
  .rl-rail { gap: 4px; }
  .rl-rail button { font-size: 0; padding-top: 4px; height: 18px; }
  .rl-cap { min-height: 120px; margin-top: 16px; }
  .rl-cap h3 { font-size: 20px; }
}
.hud-l2 { display: none; }
.hud-t.is-done .hud-l { display: none; }
.hud-t.is-done .hud-l2 { display: inline; color: var(--mt); }
.s1-dots { left: 0; top: 0; }
.gauge > *, .dn > * { position: absolute; }
/* финал: плитки сцен для быстрого перехода */
.fin-t { margin-top: 34px; display: grid; grid-template-columns: repeat(7, 128px); gap: 10px; }
.ft { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: 84px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--ln); background: rgba(255,255,255,.06); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s, translate .25s cubic-bezier(.2,.8,.2,1); }
.ft:hover { translate: 0 -4px; background: rgba(167,163,255,.16); border-color: rgba(167,163,255,.7); box-shadow: 0 12px 30px -10px rgba(109,99,255,.8); }
.ft:active { translate: 0 -1px; }
.ft-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: rgba(167,163,255,.22); box-shadow: inset 0 0 0 1px rgba(167,163,255,.5); }
.ft:hover .ft-n { background: #918df6; box-shadow: 0 0 14px -2px rgba(145,141,246,.9); }
.ft b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.is-portrait .fin-t { margin-top: 26px; grid-template-columns: repeat(2, 168px); gap: 8px; }
.is-portrait .ft { height: 50px; padding: 0 12px; border-radius: 13px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
.is-portrait .ft:last-child { grid-column: 1 / -1; width: 168px; justify-self: center; }
.is-portrait .fin-ic { width: 76px; height: 76px; } .is-portrait .fin-ic svg { width: 36px; height: 36px; }
.is-portrait .fin-h { margin-top: 16px !important; }