/* «Вижу разницу» — оформление, вторая версия.
   Язык плакатов: сплошные насыщенные цветовые поля, картины в фигурных
   вырезах и внутри букв, огромный шрифт, никаких тонких линеек и рамок.
   Цвет секции задают переменные --bg (фон), --fg (текст) и --ac (акцент) —
   у каждого стиля свои (content/stories). */

:root {
  --ink: #15110e;
  --paper: #efe6d3;
  --cream: #f7f1e4;
  --good: #1f8a4c;
  --bad: #d23a22;

  --serif: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
  --sans: 'Tenor Sans', 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mega: 'Dela Gothic One', 'Golos Text', Impact, sans-serif;

  --gutter: clamp(16px, 3.2vw, 44px);
  --maxw: 1640px;
  --top-h: 66px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.45, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --bg: var(--paper);
  --fg: var(--ink);
  --ac: #2b4bd8;
  color-scheme: light;
}

/* ───────────── База ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none; /* у Tenor Sans одно начертание — без поддельного жирного */
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 0; text-decoration: none; }
.skip:focus { top: 12px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* Секция = сплошное цветовое поле */
.sec { position: relative; background: var(--bg); color: var(--fg); }
.pad { padding-top: clamp(80px, 10vw, 160px); padding-bottom: clamp(80px, 10vw, 160px); }
.pad-sm { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 20px 56px; align-items: end; margin-bottom: clamp(32px, 4.5vw, 72px); }
.sec-head .lead { max-width: 36em; }

/* ───────────── Шрифт ───────────── */
.cap, .t0, .t1, .t2, .t3, .t4 {
  font-family: var(--serif);
  font-stretch: 62.5%;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.t0, .t1, .t2, .t3, .t4 { overflow-wrap: anywhere; } /* слово длиннее строки переносится, а не раздвигает страницу */
.t0 { font-size: clamp(64px, 12vw, 230px); line-height: 0.82; }
.t1 { font-size: clamp(52px, 8.4vw, 156px); }
.t2 { font-size: clamp(40px, 5.6vw, 100px); }
.t3 { font-size: clamp(30px, 3.6vw, 62px); line-height: 0.92; }
.t4 { font-size: clamp(24px, 2.3vw, 38px); line-height: 0.95; }
.it {
  font-family: var(--serif);
  font-style: italic;
  font-stretch: 75%;
  font-weight: 400;
  line-height: 1.04;
  text-wrap: balance;
}
.lead { font-size: clamp(18px, 1.45vw, 23px); line-height: 1.45; text-wrap: pretty; }
.label {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.2;
}
.muted { opacity: 0.72; }
.num { font-variant-numeric: tabular-nums; }
.hl { color: var(--ac); }

/* ───────────── Кнопки ───────────── */
/* «Билет в музей»: полукруглые вырезы по бокам, перфорация перед стрелкой,
   узкая антиква капителью. При наведении билет чуть поворачивается. */
.btn {
  --n: 11px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 16px 28px 13px;
  border: 0;
  border-radius: 0;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--serif);
  font-stretch: 62.5%;
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  -webkit-mask: radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  transition: transform 500ms var(--spring), background-color 250ms var(--ease), color 250ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: rotate(-2deg) translateY(-3px); }
.btn:active { transform: rotate(-1deg) translateY(0); }
.btn i { font-style: italic; font-stretch: 75%; font-weight: 400; padding-left: 18px; background: radial-gradient(circle, currentColor 1.4px, transparent 1.6px) left center / 2px 7px repeat-y; opacity: 0.95; }
.btn--plain i, .btn--plain::after { display: none; }
.btn--ac { background: var(--ac); color: var(--ac-ink, var(--fg)); }
.btn--light { background: var(--cream); color: var(--ink); }
/* второстепенная — светлый билет на тон темнее фона */
.btn--soft { background: color-mix(in srgb, var(--fg) 15%, transparent); color: var(--fg); }
.btn--soft:hover { background: color-mix(in srgb, var(--fg) 24%, transparent); }
.btn--sm { --n: 8px; font-size: 18px; padding: 12px 20px 10px; gap: 12px; }
.btn--sm i { padding-left: 12px; }
.btn[disabled] { opacity: 0.4; cursor: default; transform: none; }
.btns { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }

/* Второстепенное действие — не кнопка, а курсивная ссылка со стрелкой */
.alink {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 0 5px;
  border: 0;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 2px;
  color: inherit;
  font-family: var(--serif);
  font-style: italic;
  font-stretch: 75%;
  font-weight: 400;
  font-size: clamp(21px, 1.7vw, 27px);
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  justify-self: start;
  align-self: start;
  transition: background-size 400ms var(--ease-out);
}
.alink:hover { background-size: 0% 2px; background-position: 100% 100%; }
.alink i { font-style: normal; display: inline-block; transition: transform 400ms var(--ease-out); }
.alink:hover i { transform: translate(4px, -2px); }

/* Теги-ссылки: та же узкая антиква, маленькие прямоугольники */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 7px;
  border: 0;
  border-radius: 0;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--serif);
  font-stretch: 62.5%;
  font-weight: 500;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
  white-space: nowrap;
}
.chip:hover { background: var(--ac); color: var(--ac-ink, var(--fg)); }
.chip.on { background: var(--ac); color: var(--ac-ink, var(--fg)); }
.chip i { width: 12px; height: 12px; border-radius: 50%; background: var(--c, currentColor); }

.link { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.link:hover { text-decoration-thickness: 3px; }

/* ───────────── Шапка ───────────── */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  height: var(--top-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gutter);
  color: var(--hfg, var(--ink));
  transition: transform 460ms var(--ease-out), color 300ms var(--ease);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.top.hide { transform: translateY(-110%); }
.top.hide:focus-within { transform: none; }
.top::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hbg, var(--paper)); opacity: 0; transition: opacity 300ms var(--ease), background-color 300ms var(--ease); }
.top.solid::before { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--mega); font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; height: 44px; }
.brand__mark { position: relative; width: 32px; height: 20px; flex: none; }
.brand__mark i { position: absolute; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; }
.brand__mark i:last-child { left: 12px; background: currentColor; transition: transform 500ms var(--spring); }
.brand:hover .brand__mark i:last-child { transform: translateX(-6px); }
.top__nav { display: flex; align-items: center; gap: 22px; height: 44px; }
.top__nav a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  font-family: var(--serif);
  font-stretch: 62.5%;
  font-size: 22px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 8px) / 0% 3px;
  transition: background-size 380ms var(--ease-out);
}
.top__nav a:hover, .top__nav a.on { background-size: 100% 3px; }
/* сколько стилей изучено: подпись словом слева и кружок с числом */
.ring { display: inline-flex; align-items: center; gap: 8px; height: 40px; position: relative; }
.ring__t { font-size: 12px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; white-space: nowrap; }
.ring__c { position: relative; display: grid; place-items: center; width: 40px; height: 40px; }
.ring svg { width: 34px; height: 34px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.5; }
.ring .rb { stroke: color-mix(in srgb, var(--hfg, var(--ink)) 20%, transparent); }
.ring .rf { stroke: var(--hfg, var(--ink)); stroke-linecap: round; transition: stroke-dashoffset 900ms var(--ease-out); }
.ring b { position: absolute; font-size: 12px; font-weight: 700; }

/* ───────────── Шторка перехода и курсор ───────────── */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: var(--cbg, var(--ink));
  color: var(--cfg, var(--paper));
  clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%));
  visibility: hidden;
}
.curtain.in { visibility: visible; clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); transition: clip-path 620ms cubic-bezier(0.7, 0, 0.2, 1); }
.curtain.hold { visibility: visible; clip-path: inset(0 0 0 0); }
.curtain.out { visibility: visible; clip-path: inset(0 0 100% 0); transition: clip-path 640ms cubic-bezier(0.7, 0, 0.2, 1); }
.curtain__t { font-family: var(--serif); font-stretch: 62.5%; text-transform: uppercase; font-size: clamp(30px, 11vw, 200px); overflow-wrap: anywhere; hyphens: auto; line-height: 0.85; text-align: center; padding: 0 20px; opacity: 0; transform: translateY(30px); transition: opacity 300ms var(--ease), transform 600ms var(--ease-out); }
.curtain.in .curtain__t, .curtain.hold .curtain__t { opacity: 1; transform: none; transition-delay: 160ms; }
.curtain.out .curtain__t { opacity: 0; transform: translateY(-40px); transition-duration: 300ms; transition-delay: 0ms; }

/* ───────────── Загрузка, ошибки ───────────── */
main { display: block; outline: none; }
.boot { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--paper); }
.boot__m { position: relative; width: 64px; height: 40px; }
.boot__m i { position: absolute; top: 0; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); }
.boot__m i:last-child { left: 24px; background: var(--ink); animation: bootm 1.2s var(--ease) infinite alternate; }
@keyframes bootm { to { transform: translateX(-24px); } }
.fail { min-height: 90svh; display: grid; place-content: center; justify-items: start; gap: 22px; padding: 140px var(--gutter) 80px; }
.noscript { padding: 120px 20px; text-align: center; }

/* ───────────── Фигурные вырезы ───────────── */
.shape { position: relative; display: block; overflow: hidden; background-color: var(--tone, rgba(0, 0, 0, 0.12)); }
.shape > img, .shape > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shape > img { opacity: 0; transition: opacity 600ms var(--ease); }
.shape > img.is-loaded { opacity: 1; }
.shape > canvas.live { opacity: 0; transition: opacity 900ms var(--ease); }
.shape.is-live > canvas.live { opacity: 1; }
.shape-arch { clip-path: inset(0 round 9999px 9999px 0 0); }
.shape-oval { clip-path: ellipse(50% 50% at 50% 50%); }
.shape-circle { clip-path: circle(50% at 50% 50%); }
.shape-rect, .shape-square { border-radius: 0; }
.shape-pediment { clip-path: polygon(0 16%, 50% 0, 100% 16%, 100% 100%, 0 100%); }
.shape-lancet { clip-path: url(#cp-lancet); }
.shape-scallop { clip-path: url(#cp-scallop); }
.shape-star { clip-path: url(#cp-star); }
.shape-jag { clip-path: polygon(0 9%, 11% 0, 22% 7%, 34% 1%, 47% 8%, 59% 0, 71% 7%, 84% 1%, 100% 6%, 96% 28%, 100% 50%, 95% 74%, 100% 100%, 82% 96%, 64% 100%, 46% 95%, 28% 100%, 10% 96%, 0 100%, 4% 72%, 0 47%, 5% 24%); }
.shape-facet { clip-path: polygon(18% 0, 80% 3%, 100% 24%, 94% 76%, 72% 100%, 24% 98%, 0 72%, 5% 20%); }
.shape-drip { clip-path: url(#cp-drip); }

/* ───────────── Картина целиком (img с цветом-заглушкой) ───────────── */
.art { position: relative; display: block; overflow: hidden; background: var(--tone, rgba(0, 0, 0, 0.1)); }
.art img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms var(--ease); }
.art.fit img { object-fit: contain; }
.art img.is-loaded { opacity: 1; }
.art.is-broken img { opacity: 0; }
.art__broken { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 12px; text-align: center; font-size: 13px; color: #fff; background: rgba(0, 0, 0, 0.35); }

/* Подпись под картиной */
.cred { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; margin-top: 12px; font-size: 14px; line-height: 1.35; }
.cred b { font-weight: 700; }
.cred em { font-style: italic; font-family: var(--serif); font-stretch: 75%; font-size: 18px; }
.srcb { padding: 0; border: 0; background: none; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; opacity: 0.65; text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.srcb:hover { opacity: 1; }

/* ───────────── Буквы-окна с картинами (как в плакатах) ───────────── */
.mega {
  font-family: var(--mega);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.84;
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
}
.mega-fill {
  background-color: color-mix(in srgb, var(--fg) 38%, transparent); /* запасной цвет букв, если картина не загрузилась */
  background-image: var(--img);
  background-size: var(--bs, cover);
  background-position: var(--bp, 50% 40%);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.mega__row { display: block; width: max-content; max-width: none; }
.mega.ready .mega__row { visibility: visible; }

/* ───────────── Пульт: ручки и полоски ───────────── */
.knobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.knob { display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; min-width: 0; }
.knob__dial {
  --ks: clamp(84px, 8.6vw, 148px);
  position: relative;
  width: var(--ks);
  height: var(--ks);
  border-radius: 50%;
  background: var(--kbg, var(--fg));
  color: var(--kfg, var(--bg));
  box-shadow: inset 0 calc(var(--ks) * -0.05) 0 rgba(0, 0, 0, 0.2), 0 18px 30px -18px rgba(0, 0, 0, 0.55);
}
/* Деления — точки по краю внутри ручки */
.knob__ticks { position: absolute; inset: 0; pointer-events: none; }
.knob__ticks i { position: absolute; left: 50%; top: 0; width: calc(var(--ks) * 0.06); height: 50%; margin-left: calc(var(--ks) * -0.03); transform-origin: 50% 100%; transform: rotate(var(--r)); }
.knob__ticks i::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--ks) * 0.07); aspect-ratio: 1; border-radius: 50%; background: currentColor; opacity: 0.22; transition: opacity 300ms; }
.knob__ticks i.on::before { opacity: 1; }
.knob__ptr { position: absolute; inset: 0; transform: rotate(var(--a, -120deg)); transition: transform 1000ms var(--spring); }
.knob__ptr::after { content: ''; position: absolute; left: 50%; top: 19%; width: calc(var(--ks) * 0.075); height: 27%; margin-left: calc(var(--ks) * -0.0375); border-radius: 99px; background: currentColor; }
.knob__n { font-family: var(--serif); font-stretch: 62.5%; text-transform: uppercase; font-size: clamp(22px, 2vw, 34px); line-height: 0.9; margin-top: 4px; }
.knob__v { font-size: 14px; line-height: 1.3; min-height: 2.6em; max-width: 17ch; opacity: 0.85; }
.knob__s { display: none; font-size: 12px; line-height: 1.2; max-width: 12ch; opacity: 0.85; }
.knob.changed .knob__dial { animation: kpulse 1.3s var(--ease-out); }
@keyframes kpulse { 0% { box-shadow: 0 0 0 0 var(--ac), inset 0 -6px 0 rgba(0, 0, 0, 0.2); } 70% { box-shadow: 0 0 0 18px transparent, inset 0 -6px 0 rgba(0, 0, 0, 0.2); } }
/* повёрнутая ручка — подчёркнутое название (как в шпаргалке), без плашки */
.knob__n { padding: 3px 2px 4px; transition: font-weight 400ms var(--ease); }
.knob.changed .knob__n { font-weight: 700; } /* повёрнутая ручка — жирным (у заголовочного шрифта жирное начертание есть) */
.knob--drag .knob__dial { cursor: grab; touch-action: none; } /* только эти ручки крутятся пальцем; по остальным страница листается */
.knob--drag .knob__dial:active { cursor: grabbing; }
.knob--drag .knob__dial:focus-visible { outline-offset: 10px; border-radius: 50%; }

/* Полоски-«отпечаток» стиля: свет, мазок, цвет, форма */
.bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: end; height: 58px; padding-bottom: 16px; box-sizing: content-box; }
.bars span { position: relative; display: block; height: calc(12% + var(--v) * 22%); border-radius: 5px 5px 2px 2px; background: currentColor; transition: height 800ms var(--spring); }
.bars span::after { content: attr(data-k); position: absolute; left: -4px; right: -4px; top: calc(100% + 4px); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-align: center; opacity: 0.75; text-transform: uppercase; }
.bars--lg { height: 120px; gap: 10px; padding-bottom: 22px; }
.bars--lg span::after { font-size: 12px; top: calc(100% + 6px); }

/* ───────────── Главная: первый экран ───────────── */
.hero { min-height: 100svh; padding: calc(var(--top-h) + 14px) var(--gutter) 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
/* Safari на телефоне рисует страницу и под своими панелями, а когда прячет их, экран становится выше.
   Первый экран — на самую большую высоту, чтобы снизу не выглядывал следующий блок; кнопки при этом
   остаются в пределах малой высоты и не уходят под панель браузера. На компьютере разница — ноль. */
@supports (height: 100lvh) {
  .hero { min-height: 100lvh; padding-bottom: calc(100lvh - 100svh); }
}
.hero__letters { align-self: center; user-select: none; position: relative; }
.hero__letters .mega__row { display: flex; align-items: baseline; }
.hero__l {
  display: inline-block;
  text-decoration: none;
  background-color: color-mix(in srgb, var(--fg) 38%, transparent);
  background-image: var(--img);
  background-size: var(--bs, cover);
  background-position: var(--bp, 50% 40%);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: transform 600ms var(--spring);
  transform-origin: 50% 80%;
}
.hero__letters.go .hero__l { animation: letterIn 1000ms var(--ease-out) both; animation-delay: calc(var(--i) * 50ms + 80ms); }
.hero__l:hover { transform: translateY(-0.05em) rotate(-3deg) scale(1.04); }
.hero__l { position: relative; pointer-events: none; } /* текст буквы выше строки и перехватывал касания у соседней — нажимается только рамка */
.hero__l::before { content: ''; position: absolute; inset: 0; pointer-events: auto; }
@keyframes letterIn { from { opacity: 0; transform: translateY(0.35em) scale(0.92); } to { opacity: 1; transform: none; } }
.hero__sp { display: inline-block; width: 0.28em; }
.hero__mega--sm, .hero__say--sm { display: none; }
.hero__row2 { position: relative; }
.hero__mega { line-height: 0.8; letter-spacing: -0.03em; }
.hero__mega .mega__row { width: max-content; }
.hero { grid-template-columns: minmax(0, 1fr); }
.hero__letters { min-width: 0; }
.hero--museum .hero__tip { background: var(--fg); color: var(--bg); }
.hero__say { position: absolute; left: calc(100% + 0.22em); top: 50%; transform: translateY(-46%); width: 6.2em; font-family: var(--serif); font-size: 0.24em; line-height: 0.98; text-transform: none; letter-spacing: 0; white-space: normal; color: var(--fg); -webkit-text-fill-color: currentColor; }
.hero__letters.go .hero__say { animation: popin 900ms var(--ease-out) both; animation-delay: 700ms; }
.hero__tip { position: absolute; z-index: 3; pointer-events: none; padding: 10px 16px 11px; border-radius: 0; background: var(--ink); color: var(--paper); font-size: 14px; line-height: 1.3; white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); opacity: 0; transition: opacity 200ms; }
.hero__tip.on { opacity: 1; }
.hero__tip b { display: block; font-family: var(--serif); font-stretch: 62.5%; font-weight: 400; text-transform: uppercase; font-size: 26px; line-height: 0.9; margin-bottom: 2px; }
.hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding: clamp(18px, 2.4vw, 34px) 0 clamp(24px, 3vw, 40px); }
.hero__h { font-size: clamp(30px, 3.2vw, 54px); }
.hero__sub { max-width: 34em; font-size: clamp(16px, 1.25vw, 19px); }
.hero__count { display: grid; justify-items: end; text-align: right; gap: 4px; }
.hero__count b { font-family: var(--serif); font-stretch: 62.5%; font-weight: 300; font-size: clamp(64px, 7vw, 128px); line-height: 0.78; }
.hero__count span { font-size: 13px; font-weight: 600; max-width: 16ch; }
.scrollcue { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.scrollcue i { width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 2.5px currentColor; position: relative; }
.scrollcue i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: currentColor; animation: cue 1.6s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(11px); opacity: 0; } 100% { opacity: 0; } }

/* ───────────── Главная: как устроен пульт ───────────── */
.how__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(40px, 4.4vw, 72px) clamp(20px, 2.4vw, 40px); }
/* четыре ручки — столбцы прямо на бумаге, без фона-карточки */
.how__card { display: grid; gap: 16px; align-content: start; }
.how__pair { position: relative; width: 100%; aspect-ratio: 1; margin-top: 26px; background: rgba(0, 0, 0, 0.2); touch-action: pan-y; cursor: ew-resize; }
.how__pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.how__pair img + img { clip-path: inset(0 0 0 var(--p, 50%)); }
.how__pair::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--p, 50%); width: 4px; margin-left: -2px; background: #fff; }
.how__h { position: absolute; z-index: 2; left: var(--p, 50%); top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 8px 18px -8px rgba(0, 0, 0, 0.6); pointer-events: none; }
.how__h::after { content: ''; position: absolute; left: 50%; top: 4px; width: 3px; height: 9px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); transform-origin: 50% 11px; transform: rotate(calc((var(--pn, 0.5) - 0.5) * 240deg)); }
/* подписи концов шкалы — над картиной, как имена над шторкой «С чем легко перепутать» */
.how__pair b { position: absolute; bottom: calc(100% + 8px); font-family: var(--sans); font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; opacity: 0.75; } /* концы шкалы — мелкой меткой, не заголовком */
.how__pair b:first-of-type { left: 0; }
.how__pair b:last-of-type { right: 0; }
.how__pair b:first-of-type::before { content: '← '; }
.how__pair b:last-of-type::after { content: ' →'; }
.how__name { font-family: var(--serif); font-stretch: 62.5%; text-transform: uppercase; font-size: clamp(34px, 3vw, 52px); line-height: 0.85; }
.how__card p { font-size: 15px; line-height: 1.45; margin: 0; }
/* Пять положений ручки и какие стили на каждом */
.how__scale { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.how__scale li { display: flex; align-items: baseline; gap: 7px; font-size: 14px; line-height: 1.25; }
.how__scale li b { flex: none; min-width: 0.6em; font-family: var(--serif); font-stretch: 62.5%; font-weight: 400; font-size: 19px; line-height: 1; color: var(--ac); }
.how__scale em { font-style: normal; }
/* «Одно слово на каждый стиль» — тёмная полоса во всю ширину, закрывает секцию снизу
   (нижний отступ равен отступу .pad, поэтому полоса встык со следующим блоком) */
.how__word { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 28px 56px; align-items: center; margin: clamp(64px, 8vw, 128px) calc(var(--gutter) * -1) calc(clamp(80px, 10vw, 160px) * -1); padding: clamp(48px, 6vw, 96px) var(--gutter); background: var(--fg); color: var(--bg); }
.how__word p:not(.t3):not(.label) { font-size: 16px; line-height: 1.45; }
.how__word .t3 { font-size: clamp(30px, 2.8vw, 48px); }
.how__words { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; }
.how__words a { display: grid; gap: 2px; text-decoration: none; }
.how__words span { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, currentColor 62%, transparent); }
/* порядковый номер стиля — чтобы фраза из двенадцати слов читалась по порядку */
.how__words span i { font-style: normal; font-family: var(--serif); font-stretch: 62.5%; font-size: 22px; line-height: 0.8; letter-spacing: 0; color: #E8B04B; }
.how__words b { font-family: var(--serif); font-style: italic; font-stretch: 75%; font-weight: 400; font-size: clamp(28px, 2.6vw, 42px); line-height: 1; transition: transform 400ms var(--ease-out); }
.how__words a:hover b { transform: translateX(6px); }

/* ───────────── Главная: 600 лет за 12 поворотов ───────────── */
.run { position: relative; }
.run__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  transition: background-color 800ms var(--ease), color 800ms var(--ease);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0 clamp(20px, 3vw, 56px);
  padding: calc(var(--top-h) + 6px) var(--gutter) 0;
}
.run__left { display: grid; align-content: center; gap: clamp(12px, 1.6vw, 22px); min-width: 0; position: relative; }
.run__step { display: flex; align-items: baseline; gap: 14px; font-size: 14px; font-weight: 700; }
.run__step b { font-family: var(--serif); font-stretch: 62.5%; font-weight: 300; font-size: clamp(40px, 3.8vw, 68px); line-height: 0.8; }
.run__name { font-size: clamp(54px, 7.2vw, 132px); line-height: 0.84; }
.run__name .ch { display: inline-block; animation: chIn 700ms var(--ease-out) both; animation-delay: calc(var(--i) * 28ms); }
@keyframes chIn { from { opacity: 0; transform: translateY(0.4em) rotate(4deg); } }
.run__quip { display: grid; gap: 12px; max-width: 34em; min-height: 9.5em; align-content: start; }
.run__prev { font-size: 15px; opacity: 0.75; }
.run__prev b { font-weight: 700; }
.run__me { font-size: clamp(24px, 2.3vw, 40px); }
.run__stars { font-size: clamp(15px, 1.2vw, 19px); font-weight: 600; }
.run__stars span { opacity: 0.6; font-weight: 500; }
.run__more { justify-self: start; }
.run__name .row { display: block; white-space: nowrap; }
.run__prev img { display: inline-block; vertical-align: middle; height: 2.6em; width: auto; border-radius: 0; margin: -0.4em 0.5em -0.4em 0; }
.run__right { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: center; justify-items: center; gap: clamp(10px, 1.6vw, 20px); min-height: 0; padding-bottom: 6px; }
.run__art { position: relative; width: 100%; height: 100%; min-height: 0; }
.run__art .shape { position: absolute; left: 50%; top: 50%; height: min(94%, 62svh); aspect-ratio: var(--r, 0.8); max-width: 100%; transform: translate(-50%, -50%); transition: opacity 650ms var(--ease), transform 1000ms var(--ease-out), clip-path 0s; }
.run__art .shape.leave { opacity: 0; transform: translate(-50%, -54%) scale(0.86) rotate(-5deg); }
.run__art .shape.enter { opacity: 0; transform: translate(-50%, -46%) scale(1.1) rotate(4deg); }
.run__panel { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; }
.run__panel .knobs { gap: 8px; }
.run__panel .knob__dial { --ks: clamp(52px, 5vw, 86px); }
.run__panel .knob__n { font-size: clamp(16px, 1.3vw, 22px); }
.run__panel .knob__v { font-size: 12px; min-height: 2.5em; }
.run__word { position: relative; text-align: right; min-width: 7ch; cursor: help; outline-offset: 6px; }
.run__word span { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.run__word b { display: block; font-family: var(--serif); font-style: italic; font-stretch: 75%; font-weight: 400; font-size: clamp(34px, 3.4vw, 60px); line-height: 0.95; }
.run__why { position: absolute; right: 0; bottom: calc(100% + 12px); width: 300px; margin: 0; padding: 14px 16px; background: var(--fg); color: var(--bg); font-size: 14px; line-height: 1.4; text-align: left; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 250ms var(--ease), transform 400ms var(--ease-out); z-index: 3; }
.run__why i { font-family: var(--serif); font-size: 1.1em; }
.run__word:hover .run__why, .run__word:focus .run__why { opacity: 1; transform: none; }
.run__bar { grid-column: 1 / -1; padding: 18px 0 14px; opacity: 0.75; }
.run__track { position: relative; height: 4px; border-radius: 2px; background: color-mix(in srgb, currentColor 18%, transparent); }
.run__seg { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: currentColor; transition: left 900ms var(--ease-out), width 900ms var(--ease-out); }
.run__years { position: relative; height: 14px; margin-top: 8px; font-size: 11px; font-weight: 600; opacity: 0.6; }
.run__years span { position: absolute; transform: translateX(-50%); }
.run__years span:first-child { transform: none; }
.run__years span:last-child { transform: translateX(-100%); }
.run__skip { position: absolute; right: var(--gutter); top: calc(var(--top-h) + 10px); z-index: 2; }
.run__hint { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); }

/* ───────────── Шпаргалка ───────────── */
.cheat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: clamp(380px, 31vw, 520px);
  padding: 18px 18px 20px;
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
}
.tile__top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; }
.tile__art { position: relative; height: clamp(170px, 15vw, 240px); margin-top: 12px; display: grid; justify-items: end; align-items: start; transition: transform 800ms var(--ease-out); transform-origin: 80% 50%; }
.tile:hover .tile__art { transform: scale(1.07) rotate(-2deg); }
.tile__art .shape { height: 100%; max-width: 100%; aspect-ratio: var(--r, 0.8); }
.tile__name { font-family: var(--serif); font-stretch: 62.5%; text-transform: uppercase; font-size: clamp(36px, 13cqw, 66px); line-height: 0.84; margin: 0; align-self: end; hyphens: manual; }
.tile__word { font-family: var(--serif); font-style: italic; font-stretch: 75%; font-size: clamp(24px, 8cqw, 36px); line-height: 1; margin-top: 2px; }
.tile__body { grid-row: 3; display: grid; gap: 6px; margin-top: 14px; }
.tile__stars { font-size: 13px; line-height: 1.35; font-weight: 600; margin: 4px 0 6px; }
/* пульт на карточке — словами, столбиком */
.mini { display: grid; gap: 5px; }
.mini__k { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mini__n { flex: none; width: 4.2em; font-family: var(--serif); font-stretch: 62.5%; font-weight: 400; text-transform: uppercase; font-size: 17px; line-height: 1; opacity: 0.5; }
.mini__v { font-size: 13px; line-height: 1.2; opacity: 0.5; }
.mini__a { font-style: normal; font-family: var(--serif); font-size: 17px; line-height: 1; }
.mini__k.ch .mini__n, .mini__k.ch .mini__v { opacity: 1; }
/* повёрнутая ручка: подчёркнуто и со стрелкой */
.mini__k.turned .mini__v { font-weight: 700; font-synthesis: weight; } /* что повернул стиль — жирным; у Tenor Sans одно начертание, жирное дорисовывает браузер */

.cheat__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* «Это карта, а не учебник»: тёмная полоса во всю ширину под шпаргалкой */
.mapnote { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px clamp(32px, 5vw, 96px); align-items: start; padding: clamp(56px, 7vw, 112px) var(--gutter); background: var(--bg); color: var(--fg); }
.mapnote__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px) clamp(24px, 3vw, 56px); }
.mapnote__list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; }
.mapnote__list b { font-family: var(--serif); font-stretch: 62.5%; font-weight: 300; font-size: 60px; line-height: 0.78; color: var(--ac); }
.sec:has(> .mapnote:last-child) { padding-bottom: 0; } /* полоса закрывает секцию — без пустого поля под ней */

/* ───────────── Собери стиль ───────────── */
.play { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.play__console { display: grid; gap: 28px; }
.play__result { display: grid; gap: 14px; justify-items: center; text-align: center; }
.play__art { width: 100%; height: min(54svh, 560px); position: relative; }
.play__art .shape { position: absolute; left: 50%; top: 50%; height: 100%; max-width: 100%; aspect-ratio: var(--r, 0.8); transform: translate(-50%, -50%); transition: opacity 500ms var(--ease), transform 800ms var(--ease-out); }
.play__art .shape.leave { opacity: 0; transform: translate(-50%, -50%) scale(0.9) rotate(-4deg); }
.play__art .shape.enter { opacity: 0; transform: translate(-50%, -50%) scale(1.08) rotate(3deg); }
/* название найденного стиля: «Постимпрессионизм» на телефоне помещается в ширину экрана */
.play__name { font-size: clamp(32px, 5vw, 88px); max-width: 100%; -webkit-hyphens: auto; hyphens: auto; }
.play__match { font-size: 15px; font-weight: 700; }
.play__note { font-size: 16px; max-width: 40ch; }

/* ───────────── Шторка «до/после» ───────────── */
.ba { position: relative; width: 100%; aspect-ratio: var(--r, 1.5); overflow: hidden; border-radius: 0; background: var(--ink); touch-action: pan-y; user-select: none; cursor: ew-resize; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__b { clip-path: inset(0 0 0 var(--p, 50%)); }
.ba__h { position: absolute; top: 0; bottom: 0; left: var(--p, 50%); width: 4px; margin-left: -2px; background: #fff; }
.ba__h::before { content: ''; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 10px 20px -8px rgba(0, 0, 0, 0.6); }
.ba__h::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 10px; margin: -13px 0 0 -1.5px; border-radius: 2px; background: var(--ink); transform-origin: 50% 13px; transform: rotate(calc((var(--pn, 0.5) - 0.5) * 240deg)); }
.ba__tag { position: absolute; bottom: 14px; padding: 10px 14px 7px; font-family: var(--serif); font-stretch: 62.5%; font-weight: 500; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6); font-size: clamp(18px, 1.6vw, 26px); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; pointer-events: none; }
.ba__tag--a { left: 14px; background: var(--ca, var(--paper)); color: var(--cfa, var(--ink)); }
.ba__tag--b { right: 14px; background: var(--cb, var(--paper)); color: var(--cfb, var(--ink)); }

/* ───────────── Сравни соседей ───────────── */
.pairbox { display: grid; gap: 22px; }
/* имена стилей — над шторкой, а не плашками на картине */
.pairbox .ba { overflow: visible; margin-top: clamp(38px, 3.2vw, 52px); }
.pairbox .ba__tag { top: auto; bottom: calc(100% + 12px); padding: 0; background: none; color: inherit; box-shadow: none; font-weight: 400; font-size: clamp(20px, 2vw, 32px); white-space: nowrap; }
.pairbox .ba__tag--a { left: 0; }
.pairbox .ba__tag--b { right: 0; }
.pairbox .ba__tag--a::before { content: '← '; }
.pairbox .ba__tag--b::after { content: ' →'; }
.pairbox__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: center; }
.pairbox__foot p { margin: 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; max-width: 52em; }
.pairbox__foot .btn { justify-self: start; }
/* пары — вкладки словами: активная подчёркнута, остальные приглушены */
.paircards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 28px; margin-top: clamp(32px, 3.4vw, 52px); }
.paircard { display: grid; gap: 14px; align-content: start; padding: 0; border: 0; background: none; color: var(--fg); text-align: left; cursor: pointer; opacity: 0.55; transition: opacity 250ms var(--ease), transform 400ms var(--spring); }
.paircard:hover { opacity: 0.85; transform: translateY(-3px); }
.paircard.on { opacity: 1; }
.paircard__arts { display: flex; }
.paircard__arts i { width: 54px; height: 54px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 3px var(--bg); }
.paircard__arts i + i { margin-left: -16px; }
.paircard__t { font-family: var(--serif); font-stretch: 62.5%; text-transform: uppercase; font-size: clamp(18px, 1.45vw, 24px); line-height: 1.25; text-decoration: underline transparent; text-decoration-thickness: 3px; text-underline-offset: 5px; transition: text-decoration-color 250ms var(--ease); }
.paircard.on .paircard__t { text-decoration-color: currentColor; }

/* ───────────── Тизеры ───────────── */
.teaser { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.teaser__text { display: grid; gap: 22px; justify-items: start; }
/* готовые пары и примеры на странице «Сравнить» — вкладки словами, активная подчёркнута */
.pairs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 26px; }
.pairs .chip { padding: 0 0 6px; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 3px; color: inherit; font-size: clamp(19px, 1.5vw, 24px); white-space: normal; opacity: 0.55; transition: opacity 250ms var(--ease), background-size 400ms var(--ease-out); }
.pairs .chip:hover { background-color: transparent; color: inherit; opacity: 0.85; }
.pairs .chip.on { background-color: transparent; color: inherit; opacity: 1; background-size: 100% 3px; }
/* Тест: коллаж из фрагментов картин в фигурах стилей */
.quizposter { position: relative; min-height: 112svh; overflow: hidden; display: grid; align-items: center; }
.qp__collage { position: absolute; inset: 0; }
.qc { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: translateY(var(--py, 0px)) rotate(var(--rot)); transition: transform 700ms var(--spring); z-index: 1; }
.qc .shape { width: 100%; height: auto; }
.qc { filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.35)); }
.qc:hover { transform: translateY(calc(var(--py, 0px) - 10px)) rotate(0deg) scale(1.06); z-index: 3; }
.qc i { position: absolute; right: -10px; top: -10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-family: var(--serif); font-style: normal; font-size: 26px; line-height: 1; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5); }
.qp__text { position: relative; z-index: 2; display: grid; gap: 26px; justify-items: start; max-width: min(46vw, 760px); padding: clamp(80px, 10vw, 160px) var(--gutter); }
.qp__text .t0 { font-size: clamp(64px, 9.5vw, 190px); }
.qp__text .lead { max-width: 30em; }
/* ───────────── Страница стиля ───────────── */
.sh { min-height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(var(--top-h) + 8px) var(--gutter) clamp(20px, 2.4vw, 32px); overflow: hidden; position: relative; }
.sh__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; font-weight: 700; flex-wrap: wrap; }
.sh__top a { text-decoration: none; }
.sh__name { align-self: center; position: relative; padding: 2vh 0; }
.sh__name .mega-fill { will-change: background-position; }
.sh__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px 40px; align-items: end; }
.sh__art { height: clamp(220px, 36svh, 420px); display: grid; justify-items: center; align-items: end; will-change: transform; }
.sh__art .shape { height: 100%; max-width: 30vw; aspect-ratio: var(--r); cursor: zoom-in; }
.sh__art { filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.35)); }
.sh__shape { font-size: 13px; max-width: 26ch; opacity: 0.75; }
.sh__tag { font-size: clamp(26px, 2.6vw, 46px); max-width: 24ch; }
.sh__meta { display: grid; justify-items: end; text-align: right; gap: 6px; font-size: 14px; font-weight: 600; }
.sh__meta b { font-family: var(--serif); font-stretch: 62.5%; font-weight: 300; font-size: clamp(48px, 5.4vw, 100px); line-height: 0.8; }

.set { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
/* Как появился стиль: было → стало */
.evo { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(200px, 0.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: end; }
.evo__side { margin: 0; display: grid; gap: 18px; }
.evo__art { height: clamp(220px, 34vw, 460px); display: grid; align-items: end; justify-items: start; }
.evo__side--me .evo__art { height: clamp(260px, 42vw, 580px); }
.evo__art .shape { height: 100%; max-width: 100%; aspect-ratio: var(--r); cursor: zoom-in; }
.evo__side:not(.evo__side--me) { opacity: 0.86; }
.evo__side:not(.evo__side--me) .evo__art .shape { filter: saturate(0.85); }
.evo__tag { display: inline-block; justify-self: start; padding: 9px 12px 7px; font-family: var(--serif); font-stretch: 62.5%; font-weight: 500; font-size: 20px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.evo__q { margin: 10px 0 0; font-size: clamp(22px, 2vw, 32px); line-height: 1.1; }
.evo__side--me .evo__q { font-size: clamp(28px, 2.8vw, 46px); }
.evo__mid { align-self: center; display: grid; gap: 14px; justify-items: start; }
.evo__arrow { font-family: var(--serif); font-size: clamp(64px, 7vw, 120px); line-height: 0.7; color: var(--act, var(--ac)); }
.evo__ch { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.evo__ch li { display: grid; gap: 2px; font-size: 15px; line-height: 1.3; }
.evo__ch b { font-family: var(--serif); font-stretch: 62.5%; font-weight: 400; text-transform: uppercase; font-size: 22px; line-height: 1; }
.evo__ch em { font-style: normal; font-weight: 700; font-synthesis: weight; }
.evo__none { font-size: 16px; line-height: 1.4; max-width: 22ch; }
.set__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 28px 48px; align-items: center; }
.set__dlg { display: grid; gap: 16px; align-content: start; }
.bubble { position: relative; max-width: 30em; padding: 18px 22px; border-radius: 0 0 0 0; background: color-mix(in srgb, var(--fg) 10%, transparent); font-size: 17px; line-height: 1.4; }
.bubble > b { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; opacity: 0.75; }
.bubble__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; }
.bubble__row .art { width: 76px; height: 96px; border-radius: 0; }
.bubble--me { justify-self: end; border-radius: 0 0 0 0; background: var(--fg); color: var(--bg); font-family: var(--serif); font-style: italic; font-stretch: 75%; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.08; }
.bubble--me > b { font-family: var(--sans); font-style: normal; }
.bubble__att { display: block; width: 120px; margin-top: 12px; border-radius: 0; }
.set__turn { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.45; max-width: 40ch; }
.set__word { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.set__word b { font-family: var(--serif); font-style: italic; font-stretch: 75%; font-weight: 400; font-size: clamp(54px, 6vw, 110px); line-height: 0.85; }
/* пояснение «ручки как у Возрождения» — строка с тире, без цветной плашки */
.set__same { position: relative; max-width: 52em; padding: 0 0 0 30px; border-radius: 0; background: none; color: inherit; font-size: 17px; line-height: 1.45; }
.set__same::before { content: '—'; position: absolute; left: 0; top: 0; color: var(--act, var(--ac)); }

.brief { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.brief__art { height: min(80svh, 860px); position: relative; }
.brief__art .shape { position: absolute; left: 50%; top: 50%; height: 100%; max-width: 100%; aspect-ratio: var(--r); transform: translate(-50%, -50%); }
.brief__text { display: grid; gap: 24px; align-content: center; }
.brief__stars { display: flex; flex-wrap: wrap; gap: 8px; }
/* Приметы стиля: номер и короткое объяснение */
.signs { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.signs li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.signs b { font-family: var(--serif); font-stretch: 62.5%; font-weight: 300; font-size: 48px; line-height: 0.8; color: var(--act, var(--ac)); }
.signs em { display: block; font-style: normal; font-family: var(--serif); font-stretch: 62.5%; text-transform: uppercase; font-size: 24px; line-height: 1; margin-bottom: 6px; }
.signs span { font-size: 16px; line-height: 1.45; }

/* Камера по картине */
.tour { position: relative; }
.tour__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #0f0d0b; color: var(--cream); display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); padding: calc(var(--top-h) + 10px) var(--gutter) 26px; gap: clamp(20px, 3vw, 48px); }
.tour__text { position: relative; min-width: 0; }
.tour__head { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; z-index: 2; }
/* сколько улик — точками, текущая крупнее и в цвет стиля */
.tour__dots { display: flex; gap: 10px; align-items: center; }
.tour__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); transition: background-color 300ms var(--ease), transform 300ms var(--spring); }
.tour__dots i.on { background: var(--ac); transform: scale(1.45); }
.clue { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% - 24px)); opacity: 0; transition: opacity 220ms var(--ease), transform 400ms var(--ease); pointer-events: none; display: grid; gap: 16px; }
.clue.on { opacity: 1; transform: translateY(-50%); pointer-events: auto; transition: opacity 500ms var(--ease) 240ms, transform 800ms var(--ease-out) 240ms; }
.clue__n { font-family: var(--serif); font-stretch: 62.5%; font-weight: 300; font-size: clamp(64px, 7vw, 130px); line-height: 0.72; color: var(--ac); }
.clue__t { font-size: clamp(34px, 3.4vw, 62px); }
.clue__p { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; max-width: 34em; opacity: 0.92; }
.clue__vs { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 0; border-radius: 0; background: none; max-width: 34em; }
.clue__vs i { width: 96px; height: 96px; border-radius: 50%; background-color: #222; background-repeat: no-repeat; }
.clue__vs p { margin: 0; font-size: 15px; line-height: 1.4; }
.clue__vs b { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; margin-bottom: 4px; }
.tour__frame { position: relative; min-height: 0; }
.tour__view { position: absolute; overflow: hidden; border-radius: 0; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9); background: #000; }
.tour__cam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
.tour__cam img, .tour__cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tour__cam .hi { opacity: 0; transition: opacity 500ms var(--ease); }
.tour__cam .hi.is-loaded { opacity: 1; }
.tour__vig { position: absolute; inset: 0; pointer-events: none; transition: opacity 500ms; }
.tour__ring { position: absolute; border-radius: 50%; box-shadow: 0 0 0 4px var(--ac), 0 0 0 9999px rgba(0, 0, 0, 0.35); pointer-events: none; transform: translate(-50%, -50%); transition: opacity 400ms var(--ease); }
.skel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.skel * { fill: none; stroke: var(--ac); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6)); }
.skel .dot { fill: var(--ac); stroke: none; }
.tour__sk { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 12px; transform: translateY(24px); opacity: 0; transition: opacity 400ms var(--ease), transform 600ms var(--ease-out); }
.tour__sk.on { opacity: 1; transform: none; }
.tour__sk p { font-size: clamp(20px, 1.7vw, 28px); line-height: 1.25; margin: 0; }
.tour__live { position: absolute; right: 12px; bottom: 12px; z-index: 3; }

/* Кнопка «оживить» */
.live-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: 0; background: #0f0d0b; color: #f7f1e4; font-size: 13px; font-weight: 700; cursor: pointer; }
.live-btn i { width: 18px; height: 18px; border-radius: 50%; background: #fff; position: relative; }
.live-btn i::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #000; }
.live-btn.on i { background: var(--ac, #ff6a3d); animation: livep 1.6s var(--ease) infinite; }
.live-btn.on i::after { background: #fff; }
@keyframes livep { 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15); } }
.livewrap { position: relative; }
.livewrap canvas.live { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms var(--ease); pointer-events: none; }
.livewrap.is-live canvas.live { opacity: 1; }

/* Художники */
.artists { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 29vw); gap: clamp(28px, 3vw, 52px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 14px; scroll-padding: 0 var(--gutter); scrollbar-width: none; cursor: grab; }
.artists::-webkit-scrollbar { display: none; }
.artists.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
/* художник — столбец на цветном поле: картина, имя, факт; без фона-карточки */
.ap { scroll-snap-align: start; position: relative; display: grid; grid-template-rows: auto auto auto 1fr; gap: 14px; padding: 0; border-radius: 0; background: none; color: inherit; }
.ap__art { height: 300px; position: relative; }
.ap__art .shape { position: absolute; left: 50%; top: 50%; height: 100%; max-width: 100%; aspect-ratio: var(--r); transform: translate(-50%, -50%); cursor: zoom-in; transition: transform 700ms var(--ease-out); }
.ap:hover .ap__art .shape { transform: translate(-50%, -50%) scale(1.04); }
.ap__name { font-size: clamp(34px, 2.8vw, 48px); }
.ap__years { font-size: 14px; font-weight: 700; opacity: 0.7; margin-top: 6px; }
.ap__fact { font-size: 16px; line-height: 1.45; margin: 0; }
.ap__trait { align-self: end; justify-self: start; padding: 0; border-radius: 0; background: none; color: inherit; font-family: var(--serif); font-style: italic; font-stretch: 75%; font-weight: 400; font-size: clamp(21px, 1.6vw, 26px); line-height: 1.1; }
.ap__trait::before { content: '— '; }
.ap__copy { height: 300px; display: grid; place-content: center; justify-items: center; text-align: center; border-radius: 0; background: var(--fg); color: var(--bg); padding: 16px; }
.ap__copy b { font-family: var(--serif); font-stretch: 62.5%; font-weight: 300; font-size: 120px; line-height: 0.8; }
.ap__copy span { font-size: 13px; font-weight: 600; max-width: 22ch; margin-top: 10px; }
.drag-hint { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; opacity: 0.75; }

/* Факты */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
/* факт — фрагмент картины и текст прямо на поле секции, без фона-карточки */
.fact { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 20px; padding: 0; border-radius: 0; background: none; }
.fact__lens { position: relative; width: 100%; aspect-ratio: 1.25; border-radius: 0; background-color: rgba(0, 0, 0, 0.2); background-repeat: no-repeat; overflow: hidden; cursor: zoom-in; border: 0; padding: 0; }
/* номер — в сплошном круге: читается и на светлом фрагменте */
.fact__lens b { position: absolute; left: 12px; top: 12px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-family: var(--serif); font-stretch: 62.5%; font-weight: 400; font-size: 32px; line-height: 1; }
.fact p { font-size: 18px; line-height: 1.45; margin: 0; }

/* Не перепутай */
.cf__tabs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; margin-bottom: 30px; }
.ttab { padding: 0 0 6px; border: 0; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 3px; color: inherit; font-family: var(--serif); font-stretch: 62.5%; font-weight: 400; text-transform: uppercase; font-size: clamp(24px, 2.2vw, 36px); line-height: 1; opacity: 0.5; cursor: pointer; transition: opacity 250ms var(--ease), background-size 400ms var(--ease-out); }
.ttab:hover { opacity: 0.85; }
.ttab.on { opacity: 1; background-size: 100% 3px; }
.cf__visual { display: grid; gap: 12px; min-width: 0; }
/* имена над шторкой; если вдвоём не помещаются (узкий телефон, длинные названия) — второе уходит на строку ниже, вправо */
.cf__names { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-family: var(--serif); font-stretch: 62.5%; text-transform: uppercase; font-size: clamp(20px, 1.7vw, 28px); line-height: 1; }
.cf__names span:last-child { margin-left: auto; }
.cf__creds { display: grid; gap: 2px; }
.ba--arch { clip-path: inset(0 round 9999px 9999px 0 0); }
.cf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.cf__text { display: grid; gap: 20px; }
.cf__tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cf__tips li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.4; }
.cf__tips li::before { content: '—'; position: absolute; left: 0; color: var(--act, var(--ac)); }
.cf__diff { display: grid; gap: 10px; }
.cf__row { display: grid; grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; }
.cf__row > b { font-family: var(--serif); font-stretch: 62.5%; text-transform: uppercase; font-size: 22px; font-weight: 400; line-height: 1; white-space: nowrap; }
.cf__head b { font-size: 16px; letter-spacing: 0.04em; opacity: 0.8; white-space: normal; -webkit-hyphens: auto; hyphens: auto; } /* «Постимпрессионизм» в узкой колонке переносится по слогам, а не вылезает за экран */
.cf__row.diff > b::after { content: ' ≠'; color: var(--act, var(--ac)); }
.cf__cell { display: grid; gap: 6px; }
.cf__cell small { font-size: 13px; line-height: 1.2; }
.cf__cell.b { opacity: 0.7; }
.dots { display: inline-flex; gap: 6px; align-items: center; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.22; transition: opacity 300ms, transform 300ms var(--spring); }
.dots i.on { opacity: 1; transform: scale(1.35); }

/* Проверь глаз */
.quick { display: grid; gap: 24px; }
.quick__q { font-size: clamp(34px, 3.6vw, 64px); }
.quick__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 2vw, 28px); }
.qp { position: relative; padding: 0; border: 0; background: none; cursor: pointer; display: grid; gap: 10px; text-align: left; color: inherit; }
/* рамка картины = сама картина (по её пропорциям), без пустых полей: буква ложится на угол, зелёная/красная обводка — точно по краю */
.qp { --qh: min(52svh, 520px); justify-items: start; }
.qp .art { width: min(100%, calc(var(--qh) * var(--r))); height: auto; aspect-ratio: var(--r) !important; background: var(--tone); }
.qp .art img { object-fit: contain; }
.qp__l { position: absolute; left: 14px; top: 14px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-weight: 700; font-size: 18px; transition: transform 400ms var(--spring); }
.qp:hover:not([disabled]) .qp__l { transform: scale(1.14); }
.qp.ok .art { box-shadow: 0 0 0 6px var(--good); }
.qp.no .art { box-shadow: 0 0 0 6px var(--bad); animation: shake 420ms var(--ease); }
.qp[disabled] { cursor: default; }
.qp__cap { font-size: 14px; line-height: 1.35; opacity: 0; transition: opacity 400ms; }
.qp[disabled] .qp__cap { opacity: 0.85; }
/* объяснение после ответа — строка с тире крупным текстом, без плашки */
.quick__why { position: relative; max-width: 44em; padding: 0 0 0 30px; border-radius: 0; background: none; color: inherit; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; animation: popin 420ms var(--ease-out); }
.quick__why::before { content: '—'; position: absolute; left: 0; top: 0; color: var(--act, var(--ac)); }
.quick__nav { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.quick__dots { display: flex; gap: 6px; }
.quick__dots i { width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 20%, transparent); }
.quick__dots i.ok { background: var(--good); }
.quick__dots i.no { background: var(--bad); }
.quick__dots i.now { box-shadow: 0 0 0 3px var(--fg); }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
@keyframes popin { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

/* Запомни */
/* «Запомни» — прямо на цветном поле стиля, без светлой панели внутри */
.memo { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: 0; border-radius: 0; background: none; color: inherit; }
.memo__art { height: min(58svh, 580px); position: relative; }
.memo__art .shape { position: absolute; left: 50%; top: 50%; height: 100%; max-width: 100%; aspect-ratio: var(--r); transform: translate(-50%, -50%); }
.memo__body { display: grid; gap: 20px; }
.memo__eq { font-size: clamp(30px, 3.3vw, 58px); }
.memo .bars { max-width: 360px; }

/* Следующий стиль */
.next { display: block; text-decoration: none; padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(50px, 6vw, 90px); overflow: hidden; position: relative; }
.next__l { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; font-weight: 700; }
.next .mega { margin-top: 16px; transition: transform 900ms var(--ease-out); }
.next:hover .mega { transform: translateX(1.5%); }
.next__q { margin-top: 20px; font-size: clamp(22px, 2vw, 34px); max-width: 30ch; }

/* ───────────── Интерактивы «Попробуй сам» ───────────── */
.lab { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.lab__text { display: grid; gap: 18px; align-content: start; }
.lab__stage { position: relative; display: grid; place-items: center; min-height: 0; }
/* подсказка опыта — строка с тире, без плашки */
.lab__msg { position: relative; padding: 0 0 0 30px; border-radius: 0; background: none; color: inherit; font-size: 18px; line-height: 1.45; animation: popin 420ms var(--ease-out); }
.lab__msg::before { content: '—'; position: absolute; left: 0; top: 0; color: var(--act, var(--ac)); }
.lab__ctl { display: grid; gap: 6px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
.range:focus-visible { outline: none; }
.range::-webkit-slider-runnable-track { height: 12px; border-radius: 0; background: color-mix(in srgb, var(--fg) 22%, transparent); }
.range::-moz-range-track { height: 12px; border-radius: 0; background: color-mix(in srgb, var(--fg) 22%, transparent); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 36px; margin-top: -12px; border-radius: 50%; background: var(--fg); border: 6px solid var(--bg); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5); }
.range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--fg); border: 6px solid var(--bg); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--ac); }
.range__ends { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 700; }
.lab__img { position: relative; overflow: hidden; border-radius: 0; width: min(100%, calc(82svh * var(--ar, 1))); margin-inline: auto; background: rgba(0, 0, 0, 0.2); } /* высокая картина целиком помещается в экран */
.lab__img > img, .lab__img > canvas { display: block; width: 100%; height: 100%; }
/* опыт «по шагам»: подлинные картины друг на друге, видна одна; целиком, без обрезки */
.steps > img { position: absolute; inset: 0; object-fit: contain; opacity: 0; transition: opacity 500ms var(--ease); }
.steps > img.on { opacity: 1; }
.lab__ba { width: 100%; }
.persp { position: relative; width: 100%; touch-action: pan-y; user-select: none; }
.persp .persp__h { touch-action: none; }
.persp svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.persp line { stroke: var(--ac); stroke-width: 2.5; vector-effect: non-scaling-stroke; transition: stroke 300ms; }
.persp.ok line { stroke: #fff; }
.persp__h { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 5px #fff, 0 0 0 3px rgba(0, 0, 0, 0.3); cursor: grab; touch-action: none; padding: 0; }
.persp__h::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; }
.persp__h:active { cursor: grabbing; }
.persp.ok .persp__h { background: var(--good); animation: popin 500ms var(--spring); }
.seek { position: relative; cursor: crosshair; }
.seek__ring { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0 4px #fff, 0 0 0 3px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%) scale(0.2); opacity: 0; animation: ringin 600ms var(--spring) forwards; pointer-events: none; }
@keyframes ringin { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.seek__miss { position: absolute; padding: 6px 12px; border-radius: 0; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 13px; font-weight: 600; transform: translate(-50%, -150%); pointer-events: none; animation: popin 300ms var(--ease-out); white-space: nowrap; }
/* что искать — строками с кружком: пустой — ещё не найдено, полный — найдено */
.seek__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.seek__list li { position: relative; padding: 0 0 0 30px; border-radius: 0; background: none; font-size: 16px; line-height: 1.35; opacity: 0.7; transition: opacity 300ms; }
.seek__list li::before { content: ''; position: absolute; left: 0; top: 0.2em; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; transition: background-color 300ms; }
.seek__list li b { display: block; font-family: var(--serif); font-stretch: 62.5%; font-weight: 400; text-transform: uppercase; font-size: 22px; line-height: 1; }
.seek__list li span { display: none; }
.seek__list li.found { opacity: 1; }
.seek__list li.found::before { background: var(--act, var(--ac)); box-shadow: none; }
.seek__list li.found span { display: block; margin-top: 4px; opacity: 0.85; }
.lens { position: absolute; width: 190px; height: 190px; border-radius: 50%; box-shadow: inset 0 0 0 5px #fff, 0 16px 40px -12px rgba(0, 0, 0, 0.6); background-repeat: no-repeat; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; transition: opacity 200ms; z-index: 3; }
.lens.on { opacity: 1; }
.dots-art { touch-action: pan-y; }
/* выбор в опытах — вкладками словами: активная подчёркнута */
.moods { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.moods .chip { padding: 0 0 6px; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 3px; color: inherit; font-size: clamp(21px, 1.7vw, 26px); opacity: 0.55; transition: opacity 250ms var(--ease), background-size 400ms var(--ease-out); }
.moods .chip:hover { background-color: transparent; color: inherit; opacity: 0.85; }
.moods .chip.on { background-color: transparent; color: inherit; opacity: 1; background-size: 100% 3px; }
.corpse { display: grid; grid-template-rows: 1fr 1.15fr 1fr; width: min(100%, 420px); aspect-ratio: 0.6; border-radius: 0; overflow: hidden; background: #000; gap: 4px; }
.corpse button { position: relative; padding: 0; border: 0; overflow: hidden; cursor: pointer; background: #111; }
.corpse .strip { position: absolute; inset: 0; background-repeat: no-repeat; transition: transform 500ms var(--ease-out), opacity 300ms; }
.corpse button.spin .strip { animation: stripspin 520ms var(--ease-out); }
@keyframes stripspin { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-40%); opacity: 0; } 55% { transform: translateY(40%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.corpse__cap { display: grid; gap: 6px; font-size: 14px; }
.corpse__cap div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
.corpse__cap b { opacity: 0.7; font-weight: 700; }
.scale-stage { position: relative; width: 100%; height: min(64svh, 620px); overflow: hidden; border-radius: 0; background: #0c0c0c; }
.scale-stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; max-width: none; }
.life { position: relative; width: 100%; height: min(58svh, 540px); display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 3vw, 40px); padding: 0 0 30px; }
.life__p { position: relative; background-size: cover; background-position: center; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); transition: width 800ms var(--ease-out), height 800ms var(--ease-out); flex: none; }
.life__h { height: 0; transition: height 800ms var(--ease-out); flex: none; }
.life__h svg { height: 100%; width: auto; display: block; }
.life__floor { position: absolute; left: 0; right: 0; bottom: 28px; height: 4px; border-radius: 2px; background: currentColor; opacity: 0.3; }
.life__dims { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); font-size: 12px; font-weight: 700; white-space: nowrap; }
.shards { position: relative; width: min(100%, calc(82svh * var(--ar, 1))); margin-inline: auto; overflow: hidden; border-radius: 0; background: #222; }
.shards canvas { display: block; width: 100%; height: 100%; }

/* ───────────── Увеличение (лайтбокс) ───────────── */
.lb { position: fixed; inset: 0; z-index: 120; background: #0d0b09; color: var(--cream); display: grid; grid-template-columns: minmax(0, 1fr) 380px; animation: fadein 260ms var(--ease); }
.lb.closing { animation: fadeout 200ms var(--ease) forwards; }
@keyframes fadein { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
.lb__stage { position: relative; overflow: hidden; touch-action: none; cursor: grab; }
.lb__stage.dragging { cursor: grabbing; }
.lb__canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.lb__canvas.fly { transition: transform 900ms var(--ease-out); }
.lb__canvas img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.lb__canvas img.hi { opacity: 0; transition: opacity 400ms; }
.lb__canvas img.hi.is-loaded { opacity: 1; }
.lb__spots { position: absolute; inset: 0; pointer-events: none; }
.lbs { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--ac, #fff); color: var(--ac-ink, #111); font-weight: 700; font-size: 14px; cursor: pointer; pointer-events: auto; box-shadow: 0 0 0 3px #fff, 0 8px 20px -6px rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 300ms, transform 300ms var(--spring); padding: 0; }
.lb.spots .lbs { opacity: 1; }
.lbs.on { transform: translate(-50%, -50%) scale(1.2); background: #fff; color: #111; }
.lb__panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 18px; padding: 22px; overflow-y: auto; background: #171411; }
.lb__close { justify-self: end; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 22px; cursor: pointer; }
.lb__close:hover { background: rgba(255, 255, 255, 0.24); }
.lb__title { font-family: var(--serif); font-stretch: 62.5%; text-transform: uppercase; font-size: 40px; line-height: 0.9; margin: 0 0 8px; }
.lb__meta { font-size: 14px; opacity: 0.75; }
/* подсказки в увеличении — строки без серых плашек; выбранная — одна светлая */
.lb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.lb__list button { width: 100%; text-align: left; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 0; border: 0; background: none; color: inherit; cursor: pointer; opacity: 0.8; transition: background-color 160ms var(--ease), opacity 160ms var(--ease); }
.lb__list button:hover { opacity: 1; }
.lb__list button.on { background: var(--cream); color: #111; opacity: 1; }
.lb__list i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ac, #fff); color: var(--ac-ink, #111); font-weight: 700; font-size: 13px; }
.lb__list b { display: block; font-weight: 700; margin-bottom: 4px; }
.lb__list span { font-size: 14px; line-height: 1.45; opacity: 0.85; }
.lb__tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lb__tools button { height: 42px; padding: 0 16px; border-radius: 0; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600; cursor: pointer; }
.lb__tools button:hover { background: rgba(255, 255, 255, 0.24); }
.lb__tools button.on { background: #fff; color: #111; }
.lb__lvl { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 0; background: rgba(0, 0, 0, 0.6); font-size: 12px; font-weight: 700; }
.lb__help { font-size: 13px; opacity: 0.6; }

/* ───────────── Окна, уведомления ───────────── */
.modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px; background: rgba(21, 17, 14, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadein 220ms var(--ease); }
.modal.closing { animation: fadeout 180ms var(--ease) forwards; }
.modal__card { position: relative; width: min(600px, 100%); max-height: calc(100svh - 40px); overflow-y: auto; padding: 30px; border-radius: 0; background: var(--cream); color: var(--ink); animation: popin 380ms var(--ease-out); }
.modal__card--wide { width: min(860px, 100%); }
.modal__close { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.08); font-size: 20px; cursor: pointer; }
.modal__close:hover { background: rgba(0, 0, 0, 0.16); }
.modal h2 { font-family: var(--serif); font-stretch: 62.5%; text-transform: uppercase; font-weight: 400; font-size: clamp(36px, 3.6vw, 52px); line-height: 0.9; margin: 0 0 16px; padding-right: 48px; }
.srcl { display: grid; margin: 0; font-size: 15px; }
.srcl div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 10px 0; }
.srcl div + div { box-shadow: none; } /* без линеек между строками — хватает воздуха */
.srcl dt { opacity: 0.65; font-size: 13px; padding-top: 2px; }
.srcl dd { margin: 0; overflow-wrap: anywhere; }
.micro { font-size: 13px; opacity: 0.75; }
.share-img { width: 100%; height: auto; border-radius: 0; margin: 4px 0 18px; box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.5); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 140; transform: translate(-50%, 200%); opacity: 0; padding: 14px 22px; border-radius: 0; background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 600; transition: transform 420ms var(--ease-out), opacity 300ms var(--ease); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.on { transform: translate(-50%, 0); opacity: 1; }

/* ───────────── Появление при прокрутке ───────────── */
.rv { opacity: 0; transform: translateY(44px); transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }
.rv-mask { clip-path: inset(100% 0 0 0); transition: clip-path 1300ms var(--ease-out); transition-delay: calc(var(--d, 0) * 100ms); }
.rv-mask.in { clip-path: inset(0 0 0 0); }
.rv-scale { transform: scale(0.84); opacity: 0; transition: transform 1200ms var(--ease-out), opacity 700ms var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.rv-scale.in { transform: none; opacity: 1; }
.lines .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines .ln > span { max-width: 100%; display: inline-block; transform: translateY(110%); transition: transform 1100ms var(--ease-out); transition-delay: calc(var(--d, 0) * 110ms + 80ms); }
.lines.in .ln > span { transform: none; }

/* ───────────── Список стилей (страница «Стили») ───────────── */
.stl { display: grid; }
.stl a { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: clamp(14px, 1.6vw, 22px) var(--gutter); background: var(--bg); color: var(--fg); text-decoration: none; overflow: hidden; }
.stl__n { font-family: var(--serif); font-stretch: 62.5%; font-weight: 300; font-size: 44px; line-height: 0.8; }
.stl__name { font-family: var(--serif); font-stretch: 62.5%; text-transform: uppercase; font-size: clamp(44px, 6vw, 110px); line-height: 0.85; transition: transform 600ms var(--ease-out); }
.stl a:hover .stl__name { transform: translateX(16px); }
.stl__meta { text-align: right; font-size: 14px; font-weight: 600; }
.stl__meta b { display: block; font-family: var(--serif); font-style: italic; font-stretch: 75%; font-weight: 400; font-size: clamp(22px, 2vw, 34px); line-height: 1; }
.stl__peek { position: absolute; right: 22%; top: 50%; width: clamp(120px, 14vw, 220px); aspect-ratio: var(--r); transform: translate(0, -50%) rotate(-6deg) scale(0.6); opacity: 0; transition: transform 600ms var(--spring), opacity 300ms; pointer-events: none; z-index: 2; }
.stl a:hover .stl__peek { opacity: 1; transform: translate(0, -50%) rotate(-4deg) scale(1); }

/* ───────────── Сравнение ───────────── */
.cmp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 24px 48px; align-items: end; }
/* выбор стилей — крупное слово с подчёркиванием и кружком цвета стиля, без цветной плашки */
.cmp-pick { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.sel { position: relative; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; }
.sel::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--sbg, var(--fg)); box-shadow: inset 0 0 0 2px var(--sfg, var(--bg)); }
.sel select { -webkit-appearance: none; appearance: none; height: 48px; padding: 6px 30px 2px 0; border: 0; border-radius: 0; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 3px; color: inherit; font-family: var(--serif); font-stretch: 62.5%; font-weight: 400; font-size: clamp(26px, 2.3vw, 38px); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; }
.sel::after { content: '↓'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: inherit; pointer-events: none; font-size: 20px; }
.cmp-pick .alink { align-self: center; }
.cmp2 { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.cmp2__side { position: relative; padding: clamp(22px, 3vw, 44px) var(--gutter); background: var(--bg); color: var(--fg); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; min-height: 92svh; }
.cmp2__art { position: relative; min-height: 0; display: grid; place-items: center; }
.cmp2__art .shape { width: 100%; max-height: 66svh; aspect-ratio: var(--r); cursor: zoom-in; }
.cmp2__art .shape-wide { width: auto; height: min(66svh, 100%); max-width: 100%; }
.cmp2__art .art { width: 100%; max-height: 64svh; cursor: zoom-in; box-shadow: 0 40px 60px -40px rgba(0, 0, 0, 0.6); }
.cmp2__name { font-size: clamp(34px, 4.4vw, 84px); -webkit-hyphens: auto; hyphens: auto; }
.cmp2__vs { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--serif); font-style: italic; font-size: 34px; }
/* шесть параметров — таблица без цветных плашек: стили подписаны один раз, в первой строке, кружком своего цвета */
.params { display: grid; gap: clamp(22px, 2.4vw, 34px); }
.param { display: grid; grid-template-columns: minmax(130px, 0.45fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px clamp(20px, 2.6vw, 44px); align-items: start; }
.param > b { display: grid; align-items: start; font-family: var(--serif); font-stretch: 62.5%; font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 2.6vw, 44px); line-height: 0.9; }
.param > div { padding: 0; border-radius: 0; background: none; color: inherit; font-size: 17px; line-height: 1.45; }
.param .param__k { display: none; }
.param:first-child .param__k { display: block; position: relative; padding-left: 25px; margin-bottom: 12px; font-family: var(--serif); font-stretch: 62.5%; font-weight: 400; font-size: 20px; letter-spacing: 0.02em; -webkit-hyphens: auto; hyphens: auto; }
.param:first-child .param__k::before { content: ''; position: absolute; left: 0; top: 0.1em; width: 16px; height: 16px; border-radius: 50%; background: var(--pb); box-shadow: inset 0 0 0 2px var(--pf); }
.param__m { display: flex; gap: 3px; margin-bottom: 10px; }
.param__m i { width: 22px; height: 8px; border-radius: 4px; background: currentColor; opacity: 0.25; }
.param__m i.on { opacity: 1; }

/* ───────────── Тест ───────────── */
/* боковые поля даёт .wrap внутри — без второго отступа, чтобы край совпадал с шапкой */
.quiz { min-height: 100svh; padding: calc(var(--top-h) + 24px) 0 70px; }
.qi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 32px 64px; align-items: start; }
/* режим — две строки с кружком-переключателем, без плашек */
.modes { display: grid; gap: 20px; }
.mode { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 0; border-radius: 0; background: none; cursor: pointer; opacity: 0.72; transition: opacity 200ms var(--ease); }
.mode:hover { opacity: 0.85; }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode__dot { width: 26px; height: 26px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 2px currentColor; position: relative; margin-top: 0; }
.mode__dot::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--fg); transform: scale(0); transition: transform 300ms var(--spring); }
.mode:has(input:checked) { opacity: 1; }
.mode:has(input:checked) .mode__dot::after { transform: scale(1); }
.mode:has(input:focus-visible) { outline: 3px solid var(--fg); outline-offset: 6px; }
.mode b { display: block; font-family: var(--serif); font-stretch: 62.5%; font-weight: 400; text-transform: uppercase; font-size: 26px; line-height: 1; margin-bottom: 6px; }
.mode span { font-size: 15px; opacity: 0.92; }
.history { margin-top: 30px; display: grid; gap: 8px; font-size: 15px; }
.history > div { display: flex; justify-content: space-between; gap: 12px; padding: 0; border-radius: 0; background: none; }
.q { display: grid; gap: 22px; }
/* прогресс — десять точек: пройденные зелёные и красные, текущая крупнее */
.q__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.q__bar i { width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 18%, transparent); position: relative; overflow: hidden; transition: transform 300ms var(--spring); }
.q__bar i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--fg); transform: scale(0); transition: transform 500ms var(--spring); }
.q__bar i.ok::after { transform: none; background: var(--good); }
.q__bar i.no::after { transform: none; background: var(--bad); }
.q__bar i.now { transform: scale(1.35); }
.q__bar i.now::after { transform: none; }
.q__head { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; font-weight: 700; flex-wrap: wrap; }
.q__prompt { font-size: clamp(38px, 4.4vw, 78px); max-width: 22ch; line-height: 0.98; } /* у «Й» и «Ё» значок над буквой не налезает на строку выше */
.qi .t1 { line-height: 0.98; }
.qp__text .t0 { line-height: 0.92; }
.q__sub { font-size: 16px; opacity: 0.8; margin-top: -8px; }
.q__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.q__media { display: grid; place-items: center; position: sticky; top: calc(var(--top-h) + 10px); }
.q__media .art { max-height: 68svh; width: auto; max-width: 100%; aspect-ratio: var(--r); border-radius: 0; cursor: zoom-in; }
/* варианты ответа — строки с буквой в круге, без плашек; после ответа красится круг и текст */
.q__opts { display: grid; gap: 6px; }
.opt { display: grid; grid-template-columns: 44px minmax(0, 1fr) 30px; gap: 16px; align-items: center; width: 100%; min-height: 60px; padding: 8px 0; border: 0; border-radius: 0; background: none; text-align: left; font-size: 19px; line-height: 1.3; cursor: pointer; transition: transform 300ms var(--ease-out), opacity 300ms, color 200ms; color: inherit; }
.opt:hover:not([disabled]) { transform: translateX(6px); }
.opt__l { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-weight: 700; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.opt__l { transition: transform 300ms var(--spring); }
.opt:hover:not([disabled]) .opt__l { transform: scale(1.1); }
.opt__m { font-size: 22px; font-weight: 700; opacity: 0; transform: scale(0.3); transition: opacity 300ms, transform 500ms var(--spring); }
.opt small { display: block; font-size: 14px; opacity: 0.8; margin-top: 4px; }
.opt.ok { color: var(--good); }
.opt.ok .opt__l { background: var(--good); color: #fff; }
.opt.ok .opt__m, .opt.no .opt__m { opacity: 1; transform: none; }
.opt.no { color: var(--bad); animation: shake 420ms var(--ease); }
.opt.no .opt__l { background: var(--bad); color: #fff; }
.opt.out { opacity: 0.35; }
.opt[disabled] { cursor: default; }
.q__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); align-items: end; }
/* «найди картину» — сами картины без подложек; после ответа красятся кружок с буквой и подпись, остальные бледнеют */
.qpick { position: relative; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; display: grid; gap: 10px; text-align: left; transition: transform 300ms var(--ease-out); color: inherit; }
.qpick:hover:not([disabled]) { transform: translateY(-4px); }
.qpick { --qh: clamp(180px, 30vw, 380px); justify-items: start; }
.qpick .art { border-radius: 0; width: min(100%, calc(var(--qh) * var(--r))); height: auto; aspect-ratio: var(--r) !important; background: var(--tone); }
.qpick .art img { object-fit: contain; }
.qpick__l { position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-weight: 700; z-index: 2; }
.qpick__c { font-size: 13px; line-height: 1.35; }
.qpick.ok .qpick__l { background: var(--good); color: #fff; }
.qpick.no .qpick__l { background: var(--bad); color: #fff; }
.qpick.ok .qpick__c { color: var(--good); }
.qpick.no .qpick__c { color: var(--bad); }
.qpick.out { opacity: 0.4; }
.qpick[disabled] { cursor: default; }
/* подсказки в тесте — подчёркнутые слова, а не тёмные плашки */
.q__tools { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 26px; margin-top: 16px; }
.q__tools .chip { padding: 0 0 5px; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 2px; color: inherit; font-size: 20px; transition: opacity 200ms var(--ease); }
.q__tools .chip:hover { background-color: transparent; color: inherit; opacity: 0.7; }
.q__tools .chip[disabled] { opacity: 0.35; background-size: 0% 2px; cursor: default; }
.hintbox { display: grid; gap: 12px; padding: 0; border-radius: 0; background: none; font-size: 17px; animation: popin 420ms var(--ease-out); }
.hintbox > span { position: relative; padding-left: 30px; }
.hintbox > span::before { content: '—'; position: absolute; left: 0; color: var(--ac); }
.hintbox:not(:has(> span)) { position: relative; padding-left: 30px; }
.hintbox:not(:has(> span))::before { content: '—'; position: absolute; left: 0; color: var(--ac); }
.hintbox i { display: block; width: 100%; aspect-ratio: 2.2; border-radius: 0; background-repeat: no-repeat; }
.reveal { display: grid; gap: 14px; padding: 22px; border-radius: 0; background: var(--fg); color: var(--bg); animation: popin 480ms var(--ease-out); }
.reveal__v { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-stretch: 62.5%; text-transform: uppercase; font-size: clamp(34px, 3vw, 48px); line-height: 0.9; }
.reveal__v i { font-style: normal; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans); font-size: 20px; color: #fff; flex: none; }
.reveal.ok .reveal__v i { background: var(--good); }
.reveal.no .reveal__v i { background: var(--bad); }
.reveal__w { font-size: 15px; opacity: 0.85; }
.reveal__t { font-size: 17px; line-height: 1.5; margin: 0; }
.reveal__lens { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; }
.reveal__lens button { width: 110px; height: 110px; border-radius: 50%; border: 0; background-repeat: no-repeat; cursor: zoom-in; padding: 0; }
.reveal__lens p { margin: 0; font-size: 14px; opacity: 0.85; }
.burst { position: fixed; z-index: 145; pointer-events: none; width: 0; height: 0; }
.burst i { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--c); animation: burst 900ms var(--ease-out) forwards; }
@keyframes burst { from { transform: translate(-50%, -50%) scale(0.4); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); opacity: 0; } }
.res { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px 64px; align-items: center; }
/* вердикт бывает одним длинным словом («настраивается») — меньше кегль и перенос по слогам вместо выезда за край */
.res h1.t1 { font-size: clamp(44px, 5.6vw, 104px); -webkit-hyphens: auto; hyphens: auto; }
.score { position: relative; width: min(100%, 440px); aspect-ratio: 1; }
.score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score__bg { fill: none; stroke: color-mix(in srgb, var(--fg) 14%, transparent); stroke-width: 7; }
.score__fg { fill: none; stroke: var(--fg); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1600ms var(--ease-out); }
.score__in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.score__n { font-family: var(--serif); font-stretch: 62.5%; font-weight: 300; font-size: clamp(130px, 15vw, 220px); line-height: 0.8; }
.cells { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; max-width: 620px; }
.cells span { position: relative; aspect-ratio: 1; border-radius: 0; overflow: hidden; background: var(--tone); opacity: 0; transform: translateY(12px) scale(0.85); animation: cellin 600ms var(--ease-out) forwards; animation-delay: calc(var(--k) * 70ms + 300ms); }
.cells img { width: 100%; height: 100%; object-fit: cover; }
.cells i { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; }
.cells .ok i { background: var(--good); }
.cells .no i { background: var(--bad); }
.cells .no img { filter: grayscale(0.7); }
@keyframes cellin { to { opacity: 1; transform: none; } }
/* разбор ошибок — картина и текст столбцом, без плашек; отделены воздухом */
.mist { display: grid; gap: clamp(32px, 3.4vw, 52px); }
.mk { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 0; border-radius: 0; background: none; }
.mk .art { border-radius: 0; aspect-ratio: var(--r); cursor: zoom-in; }
.mk h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.mk p { font-size: 15px; line-height: 1.5; }
.mk s { color: var(--bad); }
.mk .okw { color: var(--good); font-weight: 700; }
/* «что стоит повторить» — названия стилей ссылками с подчёркиванием, без тёмных плашек */
.repeat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.repeat .chip { padding: 0 0 5px; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 2px; color: inherit; font-size: clamp(20px, 1.6vw, 24px); transition: background-size 400ms var(--ease-out); }
.repeat .chip:hover { background-color: transparent; color: inherit; background-size: 0% 2px; background-position: 100% 100%; }

/* ───────────── О проекте ───────────── */
/* четыре темы — столбцами на бумаге, без бежевых карточек */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 4vw, 64px) clamp(28px, 4vw, 72px); }
.about__card { padding: 0; border-radius: 0; background: none; }
.about__card h3 { font-family: var(--serif); font-stretch: 62.5%; text-transform: uppercase; font-weight: 400; font-size: 38px; line-height: 0.9; margin: 0 0 14px; }
.about__card p, .about__card li { font-size: 16px; line-height: 1.5; }
.about__card ul { margin: 0; padding-left: 20px; }

/* ───────────── Подвал ─────────────
   Тише и плотнее блоков страницы, чтобы читался как подвал: мелкий текст,
   подписи-метки, ссылки без подчёркивания. Буквы с картиной — подпись сайта
   одной строкой, под ними последняя строка с годом. */
.foot { background: #0E0C0A; color: var(--paper); padding: clamp(56px, 6vw, 96px) var(--gutter) clamp(18px, 2vw, 26px); overflow: hidden; font-size: 14px; line-height: 1.55; }
.foot__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr); gap: 32px clamp(24px, 3vw, 56px); }
.foot__brand .brand { height: auto; }
.foot__brand p { margin-top: 12px; max-width: 16em; opacity: 0.6; }
.foot h4 { margin: 0 0 12px; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.55; }
.foot p { margin: 0; opacity: 0.8; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot ul a { text-decoration: none; opacity: 0.85; transition: opacity 200ms var(--ease); }
.foot ul a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.foot__art { max-width: var(--maxw); margin: clamp(56px, 6vw, 96px) auto 0; }
.foot__art .mega { background-size: 135% auto; animation: footdrift 46s ease-in-out infinite alternate; }
@keyframes footdrift { from { background-position: 18% 22%; } to { background-position: 82% 78%; } }
.foot__bottom { max-width: var(--maxw); margin: clamp(14px, 1.6vw, 22px) auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 12px; opacity: 0.5; }

/* ───────────── Адаптивность ───────────── */
@media (max-width: 1100px) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cheat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: none; align-items: center; }
  .lb { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .lb__panel { max-height: 50svh; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; overflow-y: auto; overscroll-behavior: contain; } /* панель листается целиком — подсказки и кнопки не налезают друг на друга */
  .lb__panel > * { flex: none; }
  .lb__close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; z-index: 3; background: rgba(0, 0, 0, 0.6); } /* крестик не уезжает с панелью */
}
@media (max-width: 860px) {
  :root { --top-h: 60px; }
  body { font-size: 16px; }
  .top__nav { gap: 14px; }
  .top__nav a { font-size: 19px; }
  .ring { display: none; }
  .sec-head, .set, .brief, .lab, .cf, .memo, .teaser, .poster-test, .play, .cmp-head, .qi, .res, .about__grid, .q__body, .how__word, .evo, .set__row { grid-template-columns: minmax(0, 1fr); }
  .evo__arrow { transform: rotate(90deg); justify-self: center; }
  .hero__foot { grid-template-columns: minmax(0, 1fr); }
  .quizposter { min-height: 0; display: block; }
  .mapnote, .mapnote__list { grid-template-columns: minmax(0, 1fr); }
  .how__words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paircards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pairbox__foot { grid-template-columns: minmax(0, 1fr); }
  .qp__collage { position: relative; inset: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; align-items: center; padding: calc(var(--top-h) + 24px) var(--gutter) 0; }
  /* на узком экране коллаж над текстом: сжимаем раскладку, чтобы фрагменты не уходили за край и не наезжали на заголовок */
  .qc { position: relative; left: auto; top: auto; width: auto; transform: rotate(var(--rot)); }
  .qc:hover { transform: rotate(0deg) scale(1.04); }
  .qc:nth-child(even) { display: none; } /* шесть стилей через один: от Возрождения до абстракции */
  .qc i { width: 30px; height: 30px; right: -6px; top: -6px; font-size: 19px; }
  .qp__text { max-width: none; padding-top: 24px; }
  .hero__count { justify-items: start; text-align: left; }
  .run__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding-top: calc(var(--top-h) + 6px); padding-bottom: 6px; gap: 14px; }
  .run__left { grid-row: 1; align-content: start; gap: 8px; }
  .run__right { grid-row: 2; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding: 0; }
  .run__bar { grid-row: 3; padding: 4px 0 8px; }
  .run__me { font-size: 17px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* реплика стиля — коротко, в две строки */
  .run__years { font-size: 12px; opacity: 0.85; }
  .run__left .run__stars { display: block; margin: 0; font-size: 14px; } /* имена художников — одной строкой */
  .run__word { display: flex; align-items: baseline; justify-content: center; gap: 10px; text-align: center; min-width: 0; }
  .run__word b { font-size: 26px; }
  .run__why { display: none; }
  .run__name { font-size: clamp(42px, 12vw, 64px); }
  .run__quip { min-height: 0; gap: 4px; }
  .run__prev, .run__stars { display: none; }
  .run__art .shape { height: min(96%, 44svh); }
  .run__panel .knob__v { display: none; }
  /* вместо длинной подписи — короткое положение по шкале, чтобы было понятно, что значит поворот */
  .run__panel .knob__s { display: block; min-height: 2.4em; }
  .run__panel .knob__n { margin-top: 2px; font-size: 14px; }
  .run__panel { grid-template-columns: minmax(0, 1fr); }
  /* «Пропустить» нужен и на телефоне: лента длинная */
  .run__skip { top: calc(var(--top-h) + 4px); font-size: 18px; }
  .tour { height: calc((var(--n, 4) + 2) * 62svh) !important; } /* на телефоне камера доезжает до улики быстрее */
  .run { height: calc(var(--n, 12) * 50svh + 70svh) !important; } /* «600 лет»: полэкрана прокрутки на стиль */
  .run__skip { padding: 10px 0 10px 14px; }
  .foot ul { gap: 0; }
  .foot ul a { display: inline-block; padding-block: 11px; } /* ссылки подвала — под палец */
  .tour__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.3fr) minmax(0, 0.7fr); padding: calc(var(--top-h) + 4px) 14px 14px; gap: 12px; }
  .tour__frame { grid-row: 1; }
  .tour__text { grid-row: 2; }
  .tour__head { position: relative; margin-bottom: 8px; }
  .clue { top: 44px; transform: translateY(20px); gap: 8px; }
  .clue.on { transform: none; }
  .clue__n { font-size: 46px; }
  .clue__t { font-size: 28px; }
  .clue__p { font-size: 15px; }
  .clue__vs { display: none; }
  .tour__sk p { font-size: 18px; }
  .knobs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .run__panel .knobs { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; }
  .cmp2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* обе картины рядом — шторка ближе к началу страницы */
  .cmp2__side { min-height: 0; padding: 16px 12px; gap: 10px; }
  .cmp2__name { font-size: clamp(22px, 6.4vw, 40px); }
  .cmp2__art .art, .cmp2__art .shape { max-height: 34svh; }
  .cmp2__vs { display: none; }
  .param { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .param > b { grid-column: 1 / -1; }
  .q__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q__media { position: static; }
  .mk { grid-template-columns: 90px minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .artists { grid-auto-columns: 82vw; }
  .fact { grid-template-columns: minmax(0, 1fr); }
  .stl a { grid-template-columns: 44px minmax(0, 1fr); }
  .stl__meta { grid-column: 2; text-align: left; }
  .stl__n { font-size: 32px; }
  .stl__peek { display: none; }
  .brief__art { height: 60svh; }
  .memo__art { height: 44svh; }
  .sh__foot { grid-template-columns: minmax(0, 1fr); }
  .sh__art { height: 34svh; justify-items: start; }
  .sh__art .shape { max-width: 70vw; }
  .sh__meta { justify-items: start; text-align: left; }
}
@media (max-width: 600px) {
  .hero__mega--lg { display: none; }
  .hero__mega--sm { display: block; }
  .hero__say--sm { display: block; position: static; transform: none; width: auto; margin-top: 14px; font-size: clamp(24px, 7vw, 32px); }
}
@media (max-width: 560px) {
  .q__media .art { max-height: 30svh; } /* картина вопроса поменьше — варианты ответа видны без прокрутки; крупно — «Рассмотреть» */
  .q__prompt { font-size: clamp(28px, 8vw, 36px); }
  .q__body { gap: 14px; }
  .play, .play__console { gap: 18px; }
  .play .knobs { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; }
  .play .knob__dial { --ks: 68px; }
  .play .knob__n { font-size: 16px; }
  .play__art { height: 30svh; }
  .cmp-pick > .label { display: none; }
  .q__body--sign .q__media .art, .q__body--distinguish .q__media .art { max-height: 22svh; } /* у этих вопросов длинные варианты — картине меньше места */
  .q__body--knobs .q__media .knobs { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; }
  .q__body--knobs .q__media .knob__dial { --ks: 62px; }
  .q__body--knobs .q__media .knob__n { font-size: 15px; }
  .cmp-head .lead { display: none; } /* «Сравнить»: заголовок понятен сам — шторка ближе */
  .pairs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px; } /* пары и примеры — лентой вбок */
  .pairs::-webkit-scrollbar { display: none; }
  .pairs .chip { flex: none; white-space: nowrap; }
  .q__opts { gap: 2px; }
  .opt { grid-template-columns: 36px minmax(0, 1fr) 24px; gap: 12px; min-height: 46px; padding: 3px 0; font-size: 16px; line-height: 1.25; }
  .opt small { font-size: 13px; margin-top: 2px; }
  .opt__l { width: 36px; height: 36px; }
  .mode > span:not(.mode__dot) > span { display: none; } /* режимы теста — одними названиями, «Начать» на первом экране */
  .mode b { margin-bottom: 0; }
  .cheat { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80vw; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } /* шпаргалка — лентой вбок, а не 12 экранов вниз */
  .cheat::-webkit-scrollbar { display: none; }
  .tile { scroll-snap-align: start; }
  .mini__v, .tile__stars, .cf__cell small { font-size: 14px; }
  .tour__live { font-size: 15px; }
  .t1, .t2, .q__prompt { hyphens: auto; }
  .sel select { max-width: calc(100vw - 2 * var(--gutter) - 40px); }
  .btn { --n: 9px; font-size: 19px; padding: 13px 20px 11px; gap: 12px; }
  .btn i { padding-left: 12px; }
  .how__grid { grid-template-columns: minmax(0, 1fr); }
  /* двенадцать слов — сплошной фразой, длинные названия стилей не вылезают из полосы */
  .how__words { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .how__words span { font-size: 11px; letter-spacing: 0.02em; gap: 8px; }
  .how__words span i { font-size: 18px; }
  /* пары соседей — списком: кружки картин слева, название справа, без переносов посреди слова */
  .paircards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .paircard { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .pairbox .ba__tag { font-size: 15px; }
  /* «Все стили»: «Постимпрессионизм» помещается целиком, а не обрезается краем строки */
  .stl a { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .stl__name { font-size: min(44px, 7.9vw); -webkit-hyphens: auto; hyphens: auto; }
  .qp { --qh: 34svh; }
  .brand span:last-child { display: none; }
  .tile { min-height: 0; }
  .cf__row { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } /* «ФОРМА ≠» не налезает на точки */
  .cf__row > b { font-size: 18px; }
  .cf__head b { font-size: 13px; letter-spacing: 0.02em; } /* «Импрессионизм», «Абстракционизм» в колонке целиком; переносится только «Постимпрессионизм» */
}

@media (prefers-reduced-motion: reduce) {
  /* переходы выключены совсем, а не «1 мс»: иначе подгонка огромных букв (fitMega и др.)
     ставит размер и тут же меряет старый — буквы пропадают или вылезают за экран */
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
  .rv, .rv-mask, .rv-scale, .lines .ln > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ───────────── А что дальше? (после двенадцати стилей, pages/dalshe.js) ─────────────
   Чёрный «музейный» фон, как на первом экране. Четыре обычные ручки пульта
   крутятся при прокрутке, потом разлетаются; ниже — спокойный список
   направлений без рамок и плашек. */
.after { overflow-x: clip; } /* разлетевшиеся ручки не должны раздвигать страницу вбок */
.after__intro { display: grid; gap: 18px; justify-items: start; }
.after__intro .label { color: var(--ac); }
.after__knobs { margin-top: clamp(8px, 2vw, 32px); }
.after__knobs .knob__dial { --ks: clamp(104px, 11vw, 190px); }
.after__knobs .knob__ptr { transition: none; } /* стрелку ведёт прокрутка — без пружины */
.after__list { list-style: none; margin: clamp(64px, 8vw, 140px) 0 0; padding: 0; display: grid; gap: clamp(36px, 4vw, 64px); max-width: 1240px; }
.after__list li { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr); gap: 10px clamp(24px, 4vw, 72px); align-items: baseline; }
.after__y { font-family: var(--serif); font-stretch: 62.5%; font-size: clamp(26px, 2.5vw, 42px); line-height: 0.95; color: var(--ac); }
.after__name { font-family: var(--serif); font-stretch: 62.5%; font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3.2vw, 54px); line-height: 0.92; text-wrap: balance; }
.after__who { margin: 12px 0 8px; font-size: 15px; opacity: 0.7; }
.after__what { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; max-width: 40em; }
.after__note { margin-top: clamp(64px, 7vw, 120px); max-width: 48em; font-size: 15px; line-height: 1.5; opacity: 0.72; }
.after__go { margin-top: 32px; }
.after--page { padding-top: calc(var(--top-h) + clamp(40px, 6vw, 96px)); }
@media (max-width: 860px) {
  .after__list li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (max-width: 400px) {
  .btn { white-space: normal; }
}
@media (max-width: 420px) {
  .how__words { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .how__words a { grid-template-columns: 11.2rem minmax(0, 1fr); align-items: baseline; gap: 10px; }
  .how__words b { font-size: 26px; }
}
@media (max-width: 360px) {
  .how__words b { font-size: 23px; }
}
@media (max-width: 360px) {
  .sel select { font-size: 22px; }
}
/* Сенсорные экраны: у мелких ссылок и кнопок — невидимая зона касания не меньше 40 px */
@media (pointer: coarse) {
  .alink, .link, .sh__top a { position: relative; }
  .alink::after, .link::after, .sh__top a::after { content: ''; position: absolute; inset: -10px -6px; }
  .srcb { padding-block: 12px; }
  .ttab { min-height: 44px; }
  .pairs .chip { padding-top: 12px; }
}