/* Manrope 400 cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url(assets/fonts/manrope-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Manrope 400 cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url(assets/fonts/manrope-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Manrope 400 latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url(assets/fonts/manrope-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope 500 cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:url(assets/fonts/manrope-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Manrope 500 cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:url(assets/fonts/manrope-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Manrope 500 latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:url(assets/fonts/manrope-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope 600 cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url(assets/fonts/manrope-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Manrope 600 cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url(assets/fonts/manrope-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Manrope 600 latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url(assets/fonts/manrope-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope 700 cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url(assets/fonts/manrope-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Manrope 700 cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url(assets/fonts/manrope-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Manrope 700 latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url(assets/fonts/manrope-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Unbounded 500 cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:url(assets/fonts/unbounded-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Unbounded 500 cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:url(assets/fonts/unbounded-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Unbounded 500 latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:url(assets/fonts/unbounded-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Unbounded 600 cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url(assets/fonts/unbounded-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Unbounded 600 cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url(assets/fonts/unbounded-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Unbounded 600 latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url(assets/fonts/unbounded-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Unbounded 700 cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url(assets/fonts/unbounded-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Unbounded 700 cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url(assets/fonts/unbounded-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Unbounded 700 latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url(assets/fonts/unbounded-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== КРУГОЗОР v2: скролл-презентация (эксперимент) =====
   Весь визуал — чистая функция прогресса скролла (app.js),
   у ведомых элементов НЕТ css-transition. */

:root{
  --bg:#0e1116;
  --bg-2:#141821;
  --ink:#f4f5f7;
  --muted:#9aa0aa;
  --line:#23252d;
  --gold:#e9b949;
  --radius:14px;
  --font-display:"Unbounded","Manrope",sans-serif;
  --font-text:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* без attachment:fixed — на мобилках он вызывает вспышки при скролле;
     все сцены одного размера, градиент и так совпадает пиксель-в-пиксель */
  --backdrop:
    radial-gradient(120% 90% at 50% -10%, #161b24 0%, var(--bg) 60%),
    var(--bg);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body{ height:100%; overflow:hidden; }
body{
  margin:0;
  background:var(--backdrop);
  color:var(--ink);
  font-family:var(--font-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.scroller{
  position:fixed;
  inset:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.scroller::-webkit-scrollbar{ display:none; }
.track{ height:6000vh; }

.stage{
  position:fixed;
  left:0; right:0; bottom:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
  pointer-events:none;
}
.scene{
  position:absolute;
  inset:0;
  background:var(--backdrop);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(16px, 3vh, 30px);
  padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  text-align:center;
  contain:layout style paint;   /* изоляция отрисовки: сцены не «просвечивают» */
}
.ph{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(16px, 3vh, 30px);
  padding:20px;
  text-align:center;
  opacity:0;
}
.col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(9px, 1.8vh, 18px);
}
.sp{ margin-top:clamp(12px, 2.6vh, 26px); }

/* биты: тексты сменяют друг друга в фиксированной зоне — куч не бывает */
.beats{
  position:relative;
  width:100%;
  height:clamp(120px, 20vh, 190px);
  flex:0 0 auto;
}
.beats--tall{ height:clamp(180px, 34vh, 300px); }
.beats--low{ height:clamp(84px, 15vh, 140px); }
.beat{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(9px, 1.8vh, 18px);
  opacity:0;
}
.mech{
  position:absolute;
  left:0; right:0;
  bottom:clamp(30px, 8vh, 80px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* ---------- типографика ---------- */
.ln{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(17px, 2.6vw, 32px);
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0;
  opacity:0;
  text-wrap:balance;
}
.ln--big{ font-size:clamp(24px, 4.4vw, 52px); font-weight:600; line-height:1.2; }
/* «приглушённые» строки — тоже белые: серый в битовой разбивке читался
   как грязь; иерархию держат размер и вес */
.ln--muted{ color:var(--ink); font-weight:400; }
.ln--sm{ font-size:clamp(14px, 1.9vw, 21px); }
.t-gold{ color:var(--gold); }
/* слово на весь экран */
.mega{
  font-family:var(--font-display);
  font-weight:700;
  font-size:min(8vw, 13vh);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0;
  white-space:nowrap;
  opacity:0;
}
/* длинные mega («Так спроектировано.») при 8vw вылезают за экран */
.mega--long{ font-size:min(6.6vw, 11.5vh); }
/* бренд-надпись на всю ширину экрана (С9) */
.mega--brand{
  font-size:min(10.7vw, 17vh);
  letter-spacing:-.01em;
}

/* ---------- С1 ---------- */
.clock{
  position:absolute;
  top:clamp(18px, 5vh, 48px);
  right:clamp(18px, 5vw, 56px);
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(17px, 2.4vw, 26px);
  color:var(--ink);
  margin:0;
  opacity:0;
}

/* ---------- С2 ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:8px;
  width:min(86vw, 540px);
  flex:0 0 auto;
}
.gcard{
  aspect-ratio:16/9;
  border-radius:6px;
  background:linear-gradient(135deg, #232631, #14161d);
  border:1px solid var(--line);
  opacity:0;
}
.brk{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(10px, 2.4vh, 24px);
  background:var(--backdrop);
  opacity:0;
}

/* ---------- С3 ---------- */
.sess{
  position:relative;
  width:min(80vw, 520px);
  height:2px;
  background:rgba(244,245,247,.14);
  margin-bottom:clamp(10px, 2.4vh, 22px);
  flex:0 0 auto;
}
.sess .mark{
  position:absolute;
  top:50%;
  width:8px; height:8px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#5f6673;
  opacity:0;
}

/* ---------- С4: серое колесо ---------- */
.s4cap{
  position:absolute;
  top:clamp(26px, 7vh, 70px);
  left:0; right:0;
}
.gring{
  position:relative;
  width:min(56vmin, 380px);
  aspect-ratio:1;
  flex:0 0 auto;
}
.gring__rim{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px dashed #454c5a;
}
.gring .glab{
  position:absolute;
  transform:translate(-50%,-50%);
  font-family:var(--font-text);
  font-weight:600;
  font-size:clamp(11px, 1.6vw, 14px);
  color:#8b93a3;
  white-space:nowrap;
  background:var(--bg);
  border:1px solid #343a47;
  border-radius:999px;
  padding:5px 12px;
  opacity:0;
}
.s4col{ position:relative; z-index:2; }

/* ---------- С5 ---------- */
.hdr{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.upd-feed{
  width:min(88vw, 430px);
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
}
.upd-feed__title{
  margin:0 0 12px;   /* зазор до списка: зона растворения не наезжает на заголовок */
  font-family:var(--font-text);
  font-size:clamp(14px, 2vw, 17px);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
  opacity:0;
}
.upd-feed__list{
  display:flex;
  flex-direction:column;
  gap:6px;
  /* окно обрезки расширено запасом со всех сторон (paddings + компенсирующие
     отрицательные margins): scale+glow подсвеченных ключей — в том числе
     первого (у верха) и последнего (у низа) — не достают до линии обрезки;
     вертикальная маска мягко растворяет края — куски карточек в запасе
     тают, а не наезжают на заголовок */
  height:calc(clamp(220px, 32vh, 284px) + 56px);
  overflow:hidden;
  padding:28px 32px;
  margin:-28px -32px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.upd-note{
  flex:0 0 auto;
  min-height:52px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  opacity:0;
}
.upd-note__title{
  margin:0;
  font-family:var(--font-text);
  font-size:10px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.upd-note__text{
  margin:0;
  font-family:var(--font-text);
  font-weight:500;
  font-size:clamp(12px, 1.9vw, 14px);
  line-height:1.3;
  color:#b6bcc7;
}
/* ключевые пункты истории: считываются мгновенно даже на пролёте,
   а при ручном изучении выделяются в общем списке */
.upd-note--key{
  background:#1a2030;
  border-color:#3f4658;
  min-height:58px;
}
.upd-note--key .upd-note__title{ color:var(--gold); }
.upd-note--key .upd-note__text{
  font-weight:700;
  font-size:clamp(15px, 2.3vw, 18px);
  color:var(--ink);
}
.q-line{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(18px, 2.8vw, 28px);
  color:var(--gold);
  margin:0;
  opacity:0;
}

/* ---------- С6 ---------- */
.rcpt-slot{
  position:relative;
  width:min(84vw, 360px);
  height:clamp(210px, 28vh, 250px);
  flex:0 0 auto;
}
.rcpt{
  position:absolute;
  inset:0;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:left;
  opacity:0;
}
.rcpt__total{
  margin:0;
  font-family:var(--font-text);
  font-weight:700;
  font-size:clamp(16px, 2.4vw, 20px);
  color:var(--ink);
  border-bottom:1px dashed #3a3f4d;
  padding-bottom:10px;
}
.rcpt__total em{ font-style:normal; color:var(--gold); }
.rcpt__rows{ display:flex; flex-direction:column; gap:6px; }
.rcpt__row{
  margin:0;
  font-family:var(--font-text);
  font-size:clamp(14px, 2vw, 16px);
  color:var(--muted);
  opacity:0;
}

/* ---------- заморожено: серое колесо (пока без места в потоке) ---------- */
.s4{ display:none; }

/* ---------- С7 (v3): абсолютная хореография ---------- */
.s7cap{
  position:absolute;
  left:20px; right:20px;
  top:31%;
}
.s7 .vid{
  position:absolute;
  left:calc(50% - min(39vw, 180px));
  top:24%;
}
.s7flow{
  position:absolute;
  left:50%;
  top:54%;
  translate:-50% 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px, 2vh, 18px);
}
.s7head{
  position:absolute;
  bottom:calc(100% + clamp(16px, 3.5vh, 36px));
  left:50%;
  translate:-50% 0;
  width:max-content;
  max-width:92vw;
}
/* зоны текстов у линии: ближний к линии край зафиксирован — отступ
   от линии у всех фраз одинаковый (= gap), многострочные растут наружу */
.s7pairzone{
  position:relative;
  width:min(92vw, 640px);
}
.s7pairzone--top{ height:1.5em; }
.s7pairzone--bot{ height:2.8em; }
.s7pair{
  position:absolute;
  left:0; right:0;
  opacity:0;
}
.s7pairzone--top .s7pair{ bottom:0; }
.s7pairzone--bot .s7pair{ top:0; }
.s7pair--muted{ font-weight:400; }
.s7 .frm{ margin-top:0; }             /* отступы от линии сверху и снизу = gap, одинаковые */
.s7 .frm__seg{ width:clamp(56px, 9vw, 116px); }
/* жёлтая формула встаёт на место ушедших подписей под линией;
   контейнер всегда виден — фразы ведут спаны */
.s7gold{
  position:absolute;
  left:50%;
  top:0;
  translate:-50% 0;
  width:max-content;
  white-space:nowrap;
  opacity:1;
}
.s7gold span{ display:inline-block; opacity:0; }

/* ---------- С7 ---------- */
.vid{
  position:relative;
  width:min(78vw, 360px);
  flex:0 0 auto;
}
.vid__thumb{
  display:block;
  aspect-ratio:16/9;
  border-radius:12px;
  background:radial-gradient(120% 130% at 25% 0%, #262a35 0%, #14161d 60%, #0d0e13 100%);
  border:1px solid var(--line);
}
.chip{
  position:absolute;
  font-family:var(--font-text);
  font-weight:700;
  font-size:clamp(10px, 1.5vw, 12px);
  letter-spacing:.05em;
  color:#ffd28a;
  background:#3d2a31;
  border:1px solid #59323b;
  border-radius:999px;
  padding:5px 10px;
}
.c1{ left:6%; top:10%; }
.c2{ right:5%; top:26%; }
.c3{ left:14%; bottom:16%; }
.c4{ right:8%; bottom:6%; }
.frm{
  display:flex;
  align-items:center;
  gap:0;
  margin-top:clamp(6px, 1.4vh, 12px);
}
.frm__dot{
  width:12px; height:12px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px rgba(233,185,73,.5);
  opacity:0;
}
.frm__seg{
  width:clamp(34px, 6vw, 72px);
  height:1.5px;
  background:rgba(233,185,73,.55);
  transform:scaleX(0);
  transform-origin:left center;
}

/* ---------- С8 ---------- */
.crown{
  position:relative;
  width:min(42vmin, 270px);
  aspect-ratio:1;
}
.crown__ring{
  position:absolute; inset:0;
  border:1.5px solid var(--gold);
  border-radius:50%;
}
.crown__year{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(30px, 8vmin, 52px);
  color:var(--ink);
}
.mini-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(12px, 2vw, 20px);
  width:min(94vw, 860px);
}
.mini-card{
  position:relative;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:left;
  opacity:0;
}
.mini-card--faded{ filter:saturate(.65); }
/* стикеры-комменты: клеятся поверх устаревших карточек вторым проходом,
   стиль — как чипы «подпишись»/«бусти» */
.stk{
  position:absolute;
  top:10px;
  right:-8px;
  z-index:2;
  font-family:var(--font-text);
  font-weight:700;
  font-size:clamp(10px, 1.5vw, 12px);
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  color:#ffd28a;
  background:#3d2a31;
  border:1px solid #59323b;
  border-radius:999px;
  padding:5px 10px;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  opacity:0;
}
.mini-card:nth-child(1) .stk{ rotate:-7deg; }
.mini-card:nth-child(2) .stk{ rotate:5deg; top:auto; bottom:26%; left:-10px; right:auto; }
.mini-card:nth-child(3) .stk{ rotate:-4deg; top:24%; }
.mini-card__thumb{
  aspect-ratio:16/9;
  border-radius:6px;
  background:linear-gradient(135deg, #232631, #12141a);
}
.mini-card--bright .mini-card__thumb{
  background:linear-gradient(135deg, #2b3244, #182031);
  box-shadow:0 0 0 1px rgba(233,185,73,.22) inset;
}
.mini-card__title{
  font-family:var(--font-text);
  font-weight:600;
  font-size:clamp(14px, 1.9vw, 18px);
  line-height:1.3;
  color:var(--ink);
  margin:0;
}
.thesis{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(8px, 1.6vh, 16px);
}

/* ---------- С10 ---------- */
/* CTA-экран: полноэкранный, без кольца */
.ct{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px, 3vh, 26px);
  padding:0 20px;
  opacity:0;
}
/* кликабельные призывы: сцены под pointer-events:none — включаем точечно */
.ct-a{
  display:block;
  pointer-events:auto;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.22em;
  text-decoration-color:rgba(233,185,73,.4);
}
@media (hover:hover){
  .ct-a:hover{ text-decoration-color:var(--gold); }
}
.oring{
  position:relative;
  width:min(86vmin, 560px);
  aspect-ratio:1;
  flex:0 0 auto;
}
.oring svg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  transform:rotate(-90deg);
}
.oring__arc{
  stroke:var(--gold);
  stroke-width:1.5px;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
.oring.is-flash svg{ filter:drop-shadow(0 0 18px rgba(233,185,73,.55)); }
.oring__nodes .onode{
  position:absolute;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px rgba(233,185,73,.5);
  transform:translate(-50%,-50%);
  opacity:0;
}
.donate{
  position:absolute;
  left:24%;
  top:-3%;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(17px, 2.6vw, 26px);
  margin:0;
  opacity:0;
}
.oring__center{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:66%;
}
.blk{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(8px, 1.6vh, 15px);
  opacity:0;
}
/* фразы цепочки сменяются строго в центре кольца — не гуляют по высоте */
.blk-chain{ height:8em; }
.blk-chain .ln{
  position:absolute;
  left:0; right:0;
  top:50%;
  translate:0 -50%;
}
.kz{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(26px, 7vmin, 54px);
  letter-spacing:.02em;
  color:var(--ink);
}
.fin{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(14px, 3vh, 28px);
  opacity:0;
  pointer-events:none;   /* без фона: кольцо на глазах сжимается в точку имени */
}
.fin-name{
  margin:0;
  width:100%;
  font-family:var(--font-display);
  font-weight:700;
  font-size:min(10.7vw, 17vh);
  letter-spacing:-.01em;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
  text-align:center;
}

/* ---------- точка-герой ---------- */
.hero{
  position:absolute;
  left:0; top:0;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 18px rgba(233,185,73,.6);
  transform:translate(-50%,-50%);
  z-index:6;
  will-change:transform, opacity;
}

/* ---------- переход-кольцо ---------- */
.ring{
  position:absolute;
  left:0; top:0;
  width:0; height:0;
  border-radius:50%;
  border:1.5px solid var(--gold);
  pointer-events:none;
  opacity:0;
  z-index:5;
}

/* ---------- линия пути ---------- */
.path-progress{
  position:fixed;
  bottom:env(safe-area-inset-bottom, 0px);
  right:0;
  height:100vh;
  height:100svh;
  width:3px;
  background:rgba(244,245,247,.08);
  pointer-events:none;
  z-index:10;
}
.path-progress__trail{
  position:absolute;
  left:0; right:0; top:0;
  height:0;
  border-radius:0 0 2px 2px;
  background:linear-gradient(180deg, rgba(233,185,73,.35), var(--gold));
  box-shadow:0 0 10px rgba(233,185,73,.5);
}

/* ---------- подсказка ---------- */
.scroll-hint{
  position:fixed;
  left:50%;
  bottom:max(18px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  pointer-events:none;
  z-index:10;
}
.scroll-hint__cap{
  font-family:var(--font-text);
  font-size:14px;
  color:var(--muted);
}
.scroll-hint__arrow{
  width:20px; height:20px;
  position:relative;
  animation:hint-bob 1.7s ease-in-out infinite;
}
.scroll-hint__arrow::before{
  content:"";
  position:absolute;
  inset:3px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
}
@keyframes hint-bob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(7px); }
}

/* ---------- плеер ---------- */
.playctl{
  position:fixed;
  right:calc(50vw - 48px);
  bottom:calc(50vh - 48px);
  bottom:calc(50svh - 48px);
  width:96px; height:96px;
  appearance:none;
  background:rgba(14,17,22,.55);
  border:1.5px solid var(--gold);
  border-radius:50%;
  cursor:pointer;
  z-index:20;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 34px rgba(233,185,73,.22);
  transition:right .6s cubic-bezier(.22,.61,.36,1), bottom .6s cubic-bezier(.22,.61,.36,1),
             width .6s cubic-bezier(.22,.61,.36,1), height .6s cubic-bezier(.22,.61,.36,1),
             box-shadow .6s ease;
}
@media (hover:hover){ .playctl:hover{ box-shadow:0 0 40px rgba(233,185,73,.4); } }
.playctl.is-docked{
  right:max(14px, env(safe-area-inset-right));
  bottom:max(14px, env(safe-area-inset-bottom));
  width:46px; height:46px;
  box-shadow:0 0 16px rgba(233,185,73,.25);
}
.pi-tri{
  width:0; height:0;
  border-style:solid;
  border-width:26% 0 26% 44%;
  border-width:25px 0 25px 42px;
  border-color:transparent transparent transparent var(--gold);
  margin-left:10px;
  transition:border-width .6s cubic-bezier(.22,.61,.36,1), margin .6s ease;
}
.playctl.is-docked .pi-tri{
  border-width:11px 0 11px 18px;
  margin-left:4px;
}
.pi-bars{ display:none; gap:7px; }
.pi-bars i{
  display:block;
  width:6px; height:22px;
  border-radius:2px;
  background:var(--gold);
}
.playctl.is-playing .pi-tri{ display:none; }
.playctl.is-playing .pi-bars{ display:flex; }

/* скорость: вертикальный ползунок ×1…×3 (лог-шкала, снизу вверх) */
.speedbar{
  position:fixed;
  left:max(14px, env(safe-area-inset-left));
  bottom:max(14px, env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  z-index:20;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer;
}
.speedbar__cap{
  font-family:var(--font-display);
  font-weight:600;
  font-size:12px;
  color:var(--muted);
}
.speedbar__track{
  position:relative;
  width:26px;                       /* широкая зона хвата вокруг тонкой линии */
  height:clamp(110px, 18vh, 170px);
}
.speedbar__track::before{
  content:"";
  position:absolute;
  left:50%; top:0; bottom:0;
  width:3px;
  translate:-50% 0;
  border-radius:2px;
  background:rgba(244,245,247,.14);
}
.speedbar__fill{
  position:absolute;
  left:50%; bottom:0;
  width:3px;
  translate:-50% 0;
  border-radius:2px;
  background:linear-gradient(0deg, rgba(233,185,73,.35), var(--gold));
  box-shadow:0 0 8px rgba(233,185,73,.35);
}
.speedbar__knob{
  position:absolute;
  left:50%;
  width:12px; height:12px;
  translate:-50% 50%;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px rgba(233,185,73,.55);
}
.speedbar__val{
  position:absolute;
  left:calc(100% + 4px);
  translate:0 50%;
  font-family:var(--font-display);
  font-weight:600;
  font-size:12px;
  color:var(--gold);
  white-space:nowrap;
}

.noscript{ color:var(--ink); text-align:center; padding-top:40vh; }

/* ---------- мобильные и низкие окна ---------- */
@media (max-width:480px){
  .grid{ grid-template-columns:repeat(4, 1fr); width:min(86vw, 340px); }
  .mega{ white-space:normal; font-size:min(8.4vw, 9vh); line-height:1.14; }
  .mega--long{ white-space:nowrap; font-size:min(6.9vw, 8vh); }
  .s7 .vid{ left:calc(50% - 39vw); }
  .s7flow{ top:52%; }
  .s7pairzone--top{ height:1.5em; }
  .s7pairzone--bot{ height:3.6em; }
  .s7gold{ font-size:15px; }
  .mini-cards{ grid-template-columns:1fr; gap:10px; width:min(94vw, 420px); }
  .mini-card{ flex-direction:row; align-items:center; gap:12px; }
  .mini-card__thumb{ width:124px; flex:0 0 auto; }
  .mini-card__title{ font-size:15px; }
  .oring{ width:min(96vmin, 560px); }
  .oring__center{ width:72%; }
}
@media (max-height:640px){
  .s7 .vid{ top:20%; }
  .s7flow{ top:56%; }
  .rcpt{ gap:8px; }
  .rcpt__row{ font-size:13px; }
  .ln{ font-size:clamp(13px, 3.2vh, 24px); }
  .ln--big{ font-size:clamp(16px, 4.6vh, 36px); }
  .ln--sm{ font-size:clamp(11px, 2.5vh, 17px); }
  .upd-feed__list{ height:256px; gap:4px; }   /* 200 + запас обрезки 56 */
  .upd-note{ min-height:44px; padding:6px 12px; }
  .crown{ width:min(34vh, 230px); }
  .gring{ width:min(46vh, 340px); }
  .mini-cards{ width:min(94vw, 640px); }
  .mini-card{ padding:10px; }
  .oring{ width:min(80vmin, 78vh, 520px); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
}