@font-face { font-family: "TikTok Sans"; font-weight: 400; font-display: swap; src: url(/fonts/tiktoksans-400-cyrillic.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TikTok Sans"; font-weight: 400; font-display: swap; src: url(/fonts/tiktoksans-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TikTok Sans"; font-weight: 500; font-display: swap; src: url(/fonts/tiktoksans-500-cyrillic.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TikTok Sans"; font-weight: 500; font-display: swap; src: url(/fonts/tiktoksans-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TikTok Sans"; font-weight: 800; font-display: swap; src: url(/fonts/tiktoksans-800-cyrillic.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TikTok Sans"; font-weight: 800; font-display: swap; src: url(/fonts/tiktoksans-800-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Стиль канала BSN (решение автора 23.10): чёрный, асфальт с зерном, графит, акцент пурпур. Строго, без мультяшности. */
:root {
  --bg: #09090a; --asph: #151517; --asph2: #1c1c1f; --graph: #2a2a2f; --deep: #0f0f11;
  --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.13);
  --ink: #f3f2ef; --sub: #a09fa6; --dim: #66656d;
  --pur: #9b2fb5; --pur-hi: #c97be0; --pur-deep: #3b1144; --pur-press: #82259a;
  --pad: 20px; --safe-top: max(env(safe-area-inset-top), var(--tg-content-safe-area-inset-top, 0px));
  --ease: cubic-bezier(.2, .8, .2, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); color: var(--ink); overflow-x: hidden; overscroll-behavior-x: none; }
body.locked { overflow: hidden; }
body { font: 400 16px/1.5 "TikTok Sans", system-ui, sans-serif; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; background: var(--grain); opacity: .035; pointer-events: none; z-index: 100; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
img { display: block; max-width: 100%; }
b, strong { font-weight: 800; }
svg { flex: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.boot { height: 100vh; display: grid; place-items: center; }
.boot img { width: 72px; height: 72px; border-radius: 50%; animation: pulse 1.1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .4; transform: scale(.96) } to { opacity: 1; transform: none } }

.screen { max-width: 520px; margin: 0 auto; padding: calc(var(--safe-top) + 14px) var(--pad) 128px; animation: enter .4s var(--ease); overflow-x: clip; }
.player, .reader, .deck, .card { overflow-x: hidden; }
.deck { touch-action: pan-y; }
@keyframes enter { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* Типографика */
.eyebrow { font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sub); }
.display { font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: .94; }
.display .d { color: var(--dim); }
.h1 { font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase; letter-spacing: -.01em; margin: 22px 0 8px; }
.lead { color: var(--sub); font-size: 16px; line-height: 1.5; }

/* Шапка */
.top { display: flex; align-items: center; gap: 10px; height: 44px; }
.top .logo { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line2); object-fit: cover; }
.top .wm { font-weight: 800; font-size: 17px; letter-spacing: .06em; }
.top .wm span { color: var(--dim); }
.rank { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 99px;
  border: 1px solid var(--line2); background: rgba(255,255,255,.02); font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.rank i { width: 6px; height: 6px; border-radius: 50%; background: var(--pur-hi); }
.me { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--graph); border: 1px solid var(--line2);
  display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.me img { width: 100%; height: 100%; object-fit: cover; }

/* Кнопки */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 20px; border-radius: 16px;
  font-weight: 800; font-size: 16px; letter-spacing: .01em; text-align: center; text-decoration: none; transition: transform .15s var(--ease), background .2s; }
.btn:active { transform: scale(.98); }
.btn-main { background: var(--pur); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 30px -18px rgba(155,47,181,.9); }
.btn-main:active { background: var(--pur-press); }
.btn-paper { background: var(--ink); color: #0b0b0c; }
.btn-ghost { border: 1px solid var(--line2); color: var(--ink); }
.btn-soft { background: var(--asph2); color: var(--ink); border: 1px solid var(--line); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn .ar { margin-left: auto; width: 36px; height: 36px; border-radius: 11px; background: rgba(0,0,0,.22); display: grid; place-items: center; }
.btn.split { justify-content: flex-start; padding: 0 10px 0 20px; }
.btn-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.linkbtn { display: block; margin: 14px auto 0; color: var(--sub); font-weight: 500; font-size: 15px; text-align: center; }
.linkbtn u { text-decoration-color: var(--dim); text-underline-offset: 4px; }

/* Панель-асфальт: общая поверхность */
.slab { position: relative; background: linear-gradient(160deg, #1d1d20 0%, #141416 55%, #111113 100%); border: 1px solid var(--line2);
  border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); overflow: hidden; isolation: isolate; }
.slab::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .07; mix-blend-mode: overlay; z-index: -1; pointer-events: none; }

/* Герой главной */
.hero { position: relative; margin: 18px 0 8px; padding-top: 6px; isolation: isolate; }
.hero::before { content: ""; position: absolute; right: -70px; bottom: 40px; width: 340px; height: 380px; z-index: -2;
  background: radial-gradient(closest-side, rgba(155,47,181,.32), rgba(155,47,181,.08) 55%, transparent); }
.hero .display { font-size: 46px; margin: 12px 0 0; }
.hrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 6px; }
.hrow .fig { height: 232px; width: auto; margin-right: -6px; filter: grayscale(.85) contrast(1.12) brightness(.92);
  -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.hrow > div:first-child { flex: 1; min-width: 0; }
.hero .meta { display: flex; gap: 20px; }
.hero .meta div { font-size: 13px; color: var(--sub); }
.hero .meta b { display: block; font-size: 22px; color: var(--ink); line-height: 1.1; }
.hero .cta { margin-top: 14px; }
.segs2 { display: flex; gap: 4px; margin: 16px 0 22px; }
.segs2 i { flex: 1; height: 3px; border-radius: 2px; background: var(--graph); }
.segs2 i.on { background: var(--pur-hi); }

/* Путь: панели в 3D под углом, змейкой */
.blockhead { margin: 46px 0 18px; }
.blockhead .row { display: flex; align-items: center; justify-content: space-between; }
.blockhead .bt { font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; margin-top: 8px; letter-spacing: -.01em; }
.blockhead .bs { color: var(--sub); font-size: 14px; margin-top: 8px; }
.blockhead .eyebrow svg { vertical-align: -2px; margin-right: 6px; }
.blockhead.locked .bt { color: var(--sub); }
.path { display: grid; gap: 22px; padding: 4px 0; }
.pp { position: relative; width: 84%; perspective: 760px; }
.pp.r { margin-left: auto; }
.pp.cur { width: 78%; margin-top: 22px; }
.panel { --ry: 15deg; --rx: 7deg; display: grid; grid-template-columns: 44px 1fr 22px; align-items: center; gap: 14px; width: 100%; padding: 15px 14px 15px 15px;
  transform: rotateY(var(--ry)) rotateX(var(--rx)); transform-origin: 50% 50%; transition: transform .6s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 #27272b, 0 2px 0 #222226, 0 3px 0 #1f1f22, 0 4px 0 #1b1b1e, 0 5px 0 #18181b, 0 6px 0 #151517,
    0 30px 34px -18px rgba(0,0,0,.95); }
.pp.r .panel { --ry: -15deg; }
.panel:active { transform: rotateY(var(--ry)) rotateX(var(--rx)) translateY(3px); }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 38%); pointer-events: none; }
.panel .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--deep); border: 1px solid var(--line2); display: grid; place-items: center; color: var(--ink); }
.panel .no { font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sub); }
.panel .tt { display: block; font-weight: 800; font-size: 16px; line-height: 1.22; margin-top: 3px; }
.panel .st { color: var(--dim); display: grid; place-items: center; }
.panel.done .ic { background: var(--pur-deep); border-color: rgba(201,123,224,.35); color: var(--pur-hi); }
.panel.done .st { color: var(--pur-hi); }
.panel.lock .tt { color: #c9c8ce; }
.panel.lock .ic { color: var(--sub); }
.panel.soon { opacity: .55; }
.panel.cur { background: linear-gradient(150deg, #b043cb 0%, #8a2aa3 48%, #5e1a72 100%); border-color: rgba(255,255,255,.22); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 #5a1a6c, 0 2px 0 #521863, 0 3px 0 #4a165a, 0 4px 0 #421450, 0 5px 0 #3a1147, 0 6px 0 #320f3d,
    0 30px 40px -16px rgba(155,47,181,.55); }
.panel.cur .ic { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.2); color: #fff; }
.panel.cur .no { color: rgba(255,255,255,.75); }
.panel.cur .st { color: #fff; }
.pp .mascot { position: absolute; bottom: -4px; height: 112px; width: auto; pointer-events: none; filter: grayscale(.85) contrast(1.1) brightness(.95) drop-shadow(0 10px 12px rgba(0,0,0,.6)); }
.pp.l .mascot { left: calc(100% + 4px); }
.pp.r .mascot { right: calc(100% + 4px); transform: scaleX(-1); }
.pp .here { position: absolute; top: -26px; font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pur-hi); }
.pp.l .here { left: 4px; } .pp.r .here { right: 4px; }
.pathend { margin: 48px 0 0; padding: 22px; text-align: center; }
.pathend .t { font-weight: 800; font-size: 20px; text-transform: uppercase; }
.pathend p { color: var(--sub); margin: 8px 0 16px; }

/* Нижняя навигация */
.tabs { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 12px);
  width: min(492px, calc(100% - 28px)); height: 64px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 6px;
  background: rgba(17,17,19,.78); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--line2); border-radius: 22px; box-shadow: 0 20px 40px -12px rgba(0,0,0,.8); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #77767d; font-weight: 500; font-size: 11px; letter-spacing: .02em; text-align: center; }
.tab.on { color: var(--ink); }
.tab.on svg { color: var(--pur-hi); }

/* Статьи */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 16px calc(var(--pad) * -1) 6px; padding: 0 var(--pad); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line2); color: var(--sub); font-weight: 500; font-size: 14px; }
.chip.on { background: var(--ink); color: #0b0b0c; border-color: var(--ink); font-weight: 800; }
.feat { display: block; width: 100%; margin: 18px 0 10px; perspective: 900px; }
.feat .slab { padding: 22px 20px 20px; min-height: 250px; transform: rotateX(6deg) rotateY(-6deg); transform-origin: 50% 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 0 #222226, 0 4px 0 #1b1b1e, 0 6px 0 #151517, 0 40px 40px -24px rgba(0,0,0,.95); }
.feat .slab::after { content: ""; position: absolute; right: -50px; bottom: -70px; width: 260px; height: 260px; z-index: -1;
  background: radial-gradient(closest-side, rgba(155,47,181,.35), transparent); }
.feat .fic { width: 50px; height: 50px; border-radius: 14px; background: var(--pur); display: grid; place-items: center; color: #fff; margin-bottom: 18px; }
.feat .ft { font-weight: 800; font-size: 26px; line-height: 1.05; text-transform: uppercase; letter-spacing: -.01em; }
.feat p { color: var(--sub); margin-top: 10px; font-size: 15px; }
.feat .fm { display: flex; gap: 14px; margin-top: 16px; font-size: 13px; color: var(--sub); align-items: center; }
.arts { display: grid; gap: 10px; margin-top: 14px; }
.art { display: grid; grid-template-columns: 44px 1fr; gap: 14px; width: 100%; padding: 16px 16px 16px 14px; align-items: start; }
.art .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--deep); border: 1px solid var(--line2); display: grid; place-items: center; }
.art .at { font-weight: 800; font-size: 16px; line-height: 1.25; margin-top: 4px; }
.art p { color: var(--sub); font-size: 14px; line-height: 1.45; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art .am { display: flex; gap: 12px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--dim); }
.free { color: var(--pur-hi); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.lk { display: inline-flex; align-items: center; gap: 5px; }
.read .at { color: var(--sub); }

/* Материалы */
.tiles { display: grid; gap: 10px; margin-top: 18px; }
.tile { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 16px; }
.tile .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--deep); border: 1px solid var(--line2); display: grid; place-items: center; }
.tile .t { font-weight: 800; font-size: 17px; }
.tile .s { color: var(--sub); font-size: 14px; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line2); font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); white-space: nowrap; }
.tag.pur { background: var(--pur); border-color: var(--pur); color: #fff; }
.mhead { display: flex; gap: 14px; align-items: center; margin: 6px 0 18px; }
.mhead .ic { width: 52px; height: 52px; border-radius: 15px; background: var(--pur); display: grid; place-items: center; color: #fff; }
.mhead h2 { font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1.05; }
.mhead p { color: var(--sub); font-size: 14px; margin-top: 4px; }
.mi { padding: 18px 16px; margin-bottom: 10px; }
.mi .mtag { display: flex; align-items: center; gap: 6px; color: var(--sub); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.mi .mtitle { font-weight: 800; font-size: 19px; line-height: 1.2; margin: 6px 0 8px; }
.mi .mdesc, .mi .mtext { color: var(--sub); font-size: 15px; margin-bottom: 12px; white-space: pre-line; }
.mi.locked { opacity: .82; }
.mblk { background: var(--deep); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 10px 0; }
.mblk .ml { font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--pur-hi); margin-bottom: 8px; }
.mblk .mt { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; color: #dddce0; }
.mblk.cmd .mt { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.mblk .btn { min-height: 46px; margin-top: 12px; font-size: 15px; }
.mlink { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; padding: 0 14px; margin-top: 8px; border-radius: 14px;
  border: 1px solid var(--line2); font-weight: 800; font-size: 15px; }
.mlink span { color: var(--pur-hi); }

/* Пропуск: чёрная карта с наклоном */
.pass-stage { perspective: 1000px; margin: 22px 0 8px; padding: 6px 0 18px; }
.pass { --gx: 30%; --gy: 20%; position: relative; aspect-ratio: 1.586; border-radius: 22px; padding: 20px; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #222226 0%, #0d0d0f 46%, #19191c 100%); border: 1px solid rgba(255,255,255,.12);
  transform: rotateX(8deg) rotateY(-8deg); transition: transform .25s ease-out;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 #1d1d20, 0 4px 0 #161618, 0 50px 50px -26px rgba(0,0,0,.95), 0 30px 60px -30px rgba(155,47,181,.5); }
.pass::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .09; mix-blend-mode: overlay; z-index: -1; }
.pass::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.16), transparent 45%); }
.pass .oni { position: absolute; right: -40px; top: 50%; width: 76%; transform: translateY(-50%); mix-blend-mode: screen; opacity: .16; z-index: -1; border-radius: 50%; }
.pass .r1 { display: flex; align-items: center; justify-content: space-between; }
.pass .wm { font-weight: 800; font-size: 15px; letter-spacing: .08em; }
.pass .wm span { color: var(--dim); }
.pass .kind { font-weight: 800; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--sub); border: 1px solid var(--line2); border-radius: 99px; padding: 5px 10px; }
.pass .kind.in { color: #fff; background: var(--pur); border-color: var(--pur); }
.pass .rk { position: absolute; left: 20px; top: 34%; }
.pass .rk b { display: block; font-size: clamp(30px, 10vw, 40px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.pass .rk span { color: var(--sub); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.pass .r3 { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pass .nm { font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass .no { font-weight: 800; font-size: 15px; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.pass .sm { display: block; color: var(--dim); font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px; }
.rows { margin-top: 18px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line2); background: var(--asph); }
.rowi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.rowi:last-child { border-bottom: 0; }
.rowi .t { font-weight: 800; font-size: 15px; }
.rowi .s { color: var(--sub); font-size: 13px; }
.rowi .end { margin-left: auto; color: var(--sub); font-weight: 800; font-size: 14px; display: flex; align-items: center; }
.rowi .end.pur { color: var(--pur-hi); }
.lbl { display: flex; justify-content: space-between; align-items: center; margin: 30px 0 12px; }
.ladder { display: grid; gap: 0; border-left: 1px solid var(--line2); margin-left: 8px; }
.lv { position: relative; display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0 11px 22px; }
.lv::before { content: ""; position: absolute; left: -5px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--dim); }
.lv .n { font-weight: 800; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.lv .s { font-size: 13px; color: var(--dim); text-align: right; }
.lv.got .n { color: var(--ink); }
.lv.got::before { background: var(--pur-hi); border-color: var(--pur-hi); }
.lv.now .n { color: var(--pur-hi); }
.lv.og .n { color: var(--ink); }
.lv.og::before { background: var(--ink); border-color: var(--ink); }

/* Нижний лист */
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.66); animation: fade .25s; }
.sheet-card { position: absolute; left: 0; right: 0; bottom: 0; max-height: 94vh; overflow: auto; overscroll-behavior: contain; background: #0e0e10;
  border-top: 1px solid var(--line2); border-radius: 26px 26px 0 0; padding: 10px var(--pad) calc(env(safe-area-inset-bottom) + 28px); animation: up .32s var(--ease); }
.sheet-body { max-width: 520px; margin: 0 auto; }
.sheet-grip { width: 40px; height: 4px; border-radius: 99px; background: var(--graph); margin: 0 auto 14px; }
.sheet.closing .sheet-card { animation: down .22s ease-in forwards; }
.sheet.closing .sheet-bg { animation: fade .22s reverse forwards; }
.sheet h2 { font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; letter-spacing: -.01em; margin: 10px 0 12px; }
.sheet h3 { font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .01em; margin: 30px 0 12px; }
.sheet p { color: var(--sub); margin-bottom: 12px; }
.sheet p b { color: var(--ink); }
.sheet .stack { display: grid; gap: 10px; margin-top: 16px; }
@keyframes fade { from { opacity: 0 } }
@keyframes up { from { transform: translateY(40px); opacity: 0 } }
@keyframes down { to { transform: translateY(100%) } }

.chan { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; margin-top: 12px; }
.chan img, .chan .av2 { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.chan .av2 { display: grid; place-items: center; background: var(--pur-deep); color: var(--pur-hi); }
.chan .t { font-weight: 800; font-size: 16px; }
.chan .s { color: var(--sub); font-size: 13px; }
.chan .go { margin-left: auto; color: var(--sub); }

/* Экран вступления */
.join .jstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 6px; }
.join .js { padding: 14px 12px; }
.join .js b { display: block; font-size: 26px; line-height: 1; }
.join .js span { color: var(--sub); font-size: 12px; }
.chk { list-style: none; display: grid; gap: 12px; }
.chk li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.yes { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--pur-deep); color: var(--pur-hi); display: grid; place-items: center; margin-top: 1px; }
.yes svg { width: 14px; height: 14px; }
.nope { flex: none; display: inline-block; width: 12px; height: 2px; background: var(--dim); }
.box { padding: 16px; margin-top: 18px; }
.box .bt { font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--pur-hi); margin-bottom: 6px; }
.box p { margin: 0; font-size: 15px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gi { padding: 14px; }
.gi .gic { color: var(--pur-hi); margin-bottom: 10px; }
.gi .gt { font-weight: 800; font-size: 15px; line-height: 1.2; }
.gi .gs { color: var(--sub); font-size: 13px; margin-top: 4px; }
.steps { display: grid; gap: 8px; }
.steps .st { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 14px; }
.steps .sic { width: 40px; height: 40px; border-radius: 12px; background: var(--deep); border: 1px solid var(--line2); display: grid; place-items: center; }
.steps .st.fin .sic { background: var(--pur); border-color: var(--pur); color: #fff; }
.steps .stt { font-weight: 800; font-size: 15px; }
.steps .sts { color: var(--sub); font-size: 13px; }
.cmpw { overflow-x: auto; border: 1px solid var(--line2); border-radius: 16px; }
.cmp { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp th, .cmp td { padding: 12px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp th { font-weight: 800; font-size: 12px; color: var(--sub); }
.cmp td:first-child, .cmp th:first-child { text-align: left; padding-left: 14px; color: var(--sub); }
.cmp tr:last-child td { border-bottom: 0; }
.cmp .best { color: var(--ink); background: rgba(155,47,181,.1); }
.cmp .yes { margin: 0 auto; }
.tariffs { display: grid; gap: 14px; perspective: 1000px; }
.tariff { padding: 20px 18px 18px; }
.tariff .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tariff .tn { font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); }
.tariff .tp { font-weight: 800; font-size: 36px; line-height: 1; margin: 14px 0 4px; letter-spacing: -.01em; }
.tariff .tnote { color: var(--sub); font-size: 13px; }
.tariff .td { color: #d6d5da; font-size: 15px; margin: 12px 0 16px; }
.tariff.best { border-color: rgba(201,123,224,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 0 #1b1b1e, 0 4px 0 #151517, 0 30px 36px -24px rgba(155,47,181,.35); }
.tariff.best .tn { color: var(--pur-hi); }
.tariff .old { display: block; font-weight: 500; font-size: 18px; color: var(--sub); margin-bottom: 8px;
  text-decoration: line-through; text-decoration-color: var(--pur-hi); text-decoration-thickness: 2px; }
/* «Навсегда + разбор»: та же пурпурная плита, но глубже, с кантом и бликом */
.tariff.lux { transform: rotateX(4deg); padding: 24px 20px 20px; overflow: hidden; border: 1px solid transparent;
  background: linear-gradient(155deg, #3d1749 0%, #241029 46%, #150c18 100%) padding-box,
              linear-gradient(140deg, #f0c9fa 0%, #9b2fb5 38%, #2a1131 66%, #c97be0 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 #3d1749, 0 4px 0 #2a1131, 0 6px 0 #1d0b22, 0 46px 52px -24px rgba(155,47,181,.8); }
.tariff.lux::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%; transform: rotate(18deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); animation: sheen 5s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.tariff.lux .tn { color: #ecc4f7; }
.tariff.lux .tp { font-size: 46px; }
.tariff.lux .tnote { color: #b9a3c0; }
.tariff.lux .td { color: #ece3ef; }
.tag.lux { background: #f3e4f8; border-color: #f3e4f8; color: #2a1131; }
.btn-lux { background: linear-gradient(180deg, #b84fd3 0%, #8a26a3 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 20px 34px -16px rgba(184,79,211,.95); }
.btn-lux:active { filter: brightness(.9); }
.cmp .lux { color: var(--ink); background: rgba(201,123,224,.16); }
.tsteps { margin: -4px 0 16px; border-top: 1px solid rgba(240,201,250,.18); }
.tsteps summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 48px; font-weight: 800; font-size: 15px; color: #ecc4f7; cursor: pointer; }
.tsteps summary::-webkit-details-marker { display: none; }
.tsteps summary svg { transition: transform .25s var(--ease); }
.tsteps[open] summary svg { transform: rotate(180deg); }
.tsteps .ts { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px;
  background: rgba(10,6,12,.45); border: 1px solid rgba(240,201,250,.1); color: #ecc4f7; }
.tsteps .ts svg { flex: none; margin-top: 1px; }
.tsteps .ts b { display: block; font-weight: 800; font-size: 15px; color: #fff; }
.tsteps .ts span { display: block; font-size: 14px; color: #c9bccd; margin-top: 2px; }
.tsteps .ts.res { margin-top: 14px; background: rgba(155,47,181,.22); border-color: rgba(240,201,250,.45); }
.tsteps .ts.res::before { content: ""; position: absolute; left: 50%; top: -12px; width: 1px; height: 10px; background: rgba(240,201,250,.45); }
@media (prefers-reduced-motion: reduce) { .tariff.lux::after { animation: none; display: none; } }
.pnote { color: var(--sub); font-size: 14px; text-align: center; margin: 16px 0 0; }
.tlink { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--dim); font-weight: 500; }
.chips2 { display: flex; flex-wrap: wrap; gap: 8px; }
.chip2 { min-height: 40px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line2); font-size: 14px; font-weight: 500; text-align: left; }

/* Плеер урока карточками */
.player::after, .reader::after { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: var(--wm, none); }
.player { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; animation: enter .3s var(--ease); }
.player-top { padding: calc(var(--safe-top) + 12px) var(--pad) 8px; max-width: 560px; width: 100%; margin: 0 auto; }
.segs { display: flex; gap: 3px; }
.segs i { flex: 1; height: 3px; border-radius: 2px; background: var(--graph); transition: background .3s; }
.segs i.on { background: var(--pur-hi); }
.player-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; color: var(--sub); font-weight: 500; font-size: 14px; }
.player-meta button { color: var(--sub); font-weight: 500; font-size: 14px; padding: 6px 0 6px 12px; }
.player-meta .mode { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.deck { position: relative; flex: 1; overflow: hidden; max-width: 560px; width: 100%; margin: 0 auto; }
.card { position: absolute; inset: 0; overflow-y: auto; padding: 12px var(--pad) 40px; transition: transform .38s var(--ease), opacity .3s; overscroll-behavior: contain; }
.card.prev { transform: translateX(-30%); opacity: 0; pointer-events: none; }
.card.next { transform: translateX(30%); opacity: 0; pointer-events: none; }
.player-bottom { padding: 10px var(--pad) calc(env(safe-area-inset-bottom) + 16px); max-width: 560px; width: 100%; margin: 0 auto; }

.lcover { position: relative; min-height: 100%; padding-top: 10px; isolation: isolate; }
.lcover::before { content: ""; position: absolute; right: -80px; bottom: 30px; width: 360px; height: 420px; z-index: -2;
  background: radial-gradient(closest-side, rgba(155,47,181,.26), transparent); }
.lcover .display { font-size: 44px; margin: 14px 0 16px; max-width: 86%; text-wrap: balance; }
.lcover .pitch { color: var(--sub); font-size: 17px; line-height: 1.5; max-width: 80%; }
.lcover .facts { display: flex; gap: 20px; margin-top: 22px; }
.lcover .facts div { font-size: 13px; color: var(--sub); }
.lcover .facts b { display: block; font-size: 20px; color: var(--ink); }
.lcover .fig { position: absolute; right: -10px; bottom: 0; height: 280px; z-index: -1; filter: grayscale(.85) contrast(1.12) brightness(.9);
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.lcover .hint { position: absolute; left: 0; bottom: 12px; color: var(--dim); font-size: 13px; max-width: 50%; }

.donec { text-align: left; padding-top: 30px; }
.donec .big { width: 76px; height: 76px; border-radius: 22px; background: var(--pur); display: grid; place-items: center; color: #fff; margin-bottom: 26px;
  box-shadow: 0 24px 40px -18px rgba(155,47,181,.8); }
.donec .display { font-size: 40px; }
.donec p { color: var(--sub); margin-top: 12px; font-size: 16px; }
.donec .rk { margin-top: 26px; padding: 18px; }
.donec .rk .n { font-weight: 800; font-size: 24px; letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; }
.donec .rk .bar { height: 4px; border-radius: 2px; background: var(--graph); margin-top: 14px; overflow: hidden; }
.donec .rk .bar u { display: block; height: 100%; background: var(--pur-hi); }
.donec .rk .s { color: var(--sub); font-size: 13px; margin-top: 8px; }

/* Статья: читается прокруткой */
.reader { position: fixed; inset: 0; z-index: 45; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; animation: enter .3s var(--ease); }
.rbar { position: sticky; top: 0; z-index: 3; background: rgba(9,9,10,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.rbar .in { max-width: 680px; margin: 0 auto; padding: calc(var(--safe-top) + 8px) var(--pad) 8px; display: flex; align-items: center; gap: 12px; min-height: 52px; }
.rbar .x { color: var(--sub); font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.rbar .tt { flex: 1; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s; }
.rbar.scrolled .tt { opacity: 1; }
.rbar .prog { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--pur-hi); width: 0; }
.article { max-width: 680px; margin: 0 auto; padding: 22px var(--pad) calc(env(safe-area-inset-bottom) + 40px); }
.ahead { padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.ahead .display { font-size: 34px; line-height: 1; margin: 12px 0 14px; text-wrap: balance; }
.ahead .am { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--sub); font-size: 13px; }
.aend { margin-top: 34px; display: grid; gap: 10px; }
.aend .more { margin-top: 26px; }

.toast { position: fixed; left: 50%; top: calc(var(--safe-top) + 14px); transform: translateX(-50%); z-index: 60; background: var(--ink); color: #0b0b0c;
  font-weight: 800; font-size: 15px; padding: 12px 18px; border-radius: 14px; box-shadow: 0 16px 30px -12px rgba(0,0,0,.8); animation: up .3s var(--ease); max-width: calc(100% - 32px); text-align: center; }
.skel { border-radius: 18px; background: linear-gradient(90deg, var(--asph) 0%, var(--asph2) 50%, var(--asph) 100%); background-size: 200% 100%; animation: sh 1.2s linear infinite; }
@keyframes sh { to { background-position: -200% 0 } }