:root {
  --ink: #f3eef0;
  --ink-dim: #a89eb2;
  --rule: rgba(255, 255, 255, 0.7);
  --pad: 1.6vw;
  --loop: 20s;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: #07060d;
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

/* ---------- раскладка: верх — спикеры, низ — тезисы | вопросы ---------- */
.stage {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr 1fr;
}

/* секции разделены белыми линиями */
.speakers {
  display: grid;
  grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
  min-height: 0;
  border-bottom: 1px solid var(--rule);
}
.spk + .spk,
.panel + .panel { border-left: 1px solid var(--rule); }

.panel,
.spk {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  overflow: hidden;
}

.spk h3,
.panel h2 {
  margin: 0 0 .9vw;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  flex: none;
}
.panel h2 { font-size: 1.25vw; color: var(--ink-dim); }
.spk h3 { font-size: var(--name-size, 1.5vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Реплики прижаты к низу, старые уходят вверх под затухание. */
.spk .lines {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .7vw;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}
.spk .lines p {
  margin: 0;
  flex: none;
  font-size: var(--text-size, 1.6vw);
  line-height: 1.35;
  font-weight: 500;
  color: var(--ink-dim);
  transition: color .6s;
}
.spk .lines p:last-child { color: var(--ink); }

.bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

/* Новые сверху, лишнее уходит вниз под затухание. */
.items {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1vw;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 20%);
  mask-image: linear-gradient(to top, transparent 0, #000 20%);
}
.items li {
  flex: none;
  font-size: 1.75vw;
  line-height: 1.3;
  font-weight: 600;
  padding-left: 1.2vw;
  border-left: 3px solid rgba(255, 255, 255, 0.35);
}
.items li small {
  display: block;
  margin-top: .3vw;
  font-size: .95vw;
  font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: .02em;
}

.enter { animation: enter .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.conn {
  position: fixed;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  font-size: 12px;
  color: var(--ink-dim);
}

/* ---------- плавающий градиентный фон (из макета MecentaMedia, бесшовный луп 20s) ---------- */
@property --lx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ly { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ls { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --lo { syntax: "<number>"; inherits: false; initial-value: 1; }

@keyframes light-opacity { from { --lo: calc(1 - var(--ao)); } to { --lo: 1; } }
@keyframes light-x { from { --lx: calc(var(--ax) * -1); } to { --lx: var(--ax); } }
@keyframes light-y { from { --ly: calc(var(--ay) * -1); } to { --ly: var(--ay); } }
@keyframes light-scale { from { --ls: calc(1 - var(--as)); } to { --ls: calc(1 + var(--as)); } }

.screen-lights {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.050), transparent 16.1%),
    #2b2030;
}
.screen-light { position: absolute; }

.screen-light--crimson {
  left: -17.06%; top: -12.60%; width: 97.82%; height: 130.72%;
  background: radial-gradient(closest-side, rgba(161, 0, 39, 1.000) 0%, rgba(161, 0, 39, 0.905) 20%, rgba(161, 0, 39, 0.655) 40%, rgba(161, 0, 39, 0.345) 60%, rgba(161, 0, 39, 0.095) 80%, rgba(161, 0, 39, 0.000) 100%);
}
.screen-light--cool {
  left: -15.14%; top: -20.25%; width: 40.28%; height: 65.86%;
  background: radial-gradient(closest-side, rgba(45, 52, 78, 0.829) 0%, rgba(45, 52, 78, 0.750) 20%, rgba(45, 52, 78, 0.543) 40%, rgba(45, 52, 78, 0.286) 60%, rgba(45, 52, 78, 0.079) 80%, rgba(45, 52, 78, 0.000) 100%);
}
.screen-light--warm {
  left: -2.70%; top: -89.31%; width: 65.90%; height: 229.06%;
  background: radial-gradient(closest-side, rgba(128, 118, 100, 0.152) 0%, rgba(128, 118, 100, 0.137) 20%, rgba(128, 118, 100, 0.099) 40%, rgba(128, 118, 100, 0.052) 60%, rgba(128, 118, 100, 0.014) 80%, rgba(128, 118, 100, 0.000) 100%);
}
.screen-light--purple {
  left: -27.85%; top: -7.13%; width: 109.14%; height: 294.27%;
  background: radial-gradient(closest-side, rgba(85, 21, 77, 0.585) 0%, rgba(85, 21, 77, 0.529) 20%, rgba(85, 21, 77, 0.383) 40%, rgba(85, 21, 77, 0.202) 60%, rgba(85, 21, 77, 0.056) 80%, rgba(85, 21, 77, 0.000) 100%);
}

.screen-light {
  --ao: 0; --no: 2; --po: 0;
  translate: var(--lx) var(--ly);
  scale: var(--ls);
  animation:
    light-x calc(var(--loop) / var(--nx)) cubic-bezier(0.37, 0, 0.63, 1) calc(var(--loop) * var(--px)) infinite alternate,
    light-y calc(var(--loop) / var(--ny)) cubic-bezier(0.37, 0, 0.63, 1) calc(var(--loop) * var(--py)) infinite alternate,
    light-scale calc(var(--loop) / var(--ns)) cubic-bezier(0.37, 0, 0.63, 1) calc(var(--loop) * var(--ps)) infinite alternate,
    light-opacity calc(var(--loop) / var(--no)) cubic-bezier(0.37, 0, 0.63, 1) calc(var(--loop) * var(--po)) infinite alternate;
  will-change: translate, scale;
}

.screen-light--crimson { --ax: 7vw; --ay: 5vw; --as: 0.14; --nx: 2; --ny: 4; --ns: 2; --px: 0; --py: -0.11; --ps: -0.3; }
.screen-light--cool { --ax: 9vw; --ay: 7vw; --as: 0.22; --nx: 4; --ny: 2; --ns: 4; --px: -0.2; --py: -0.37; --ps: -0.05; }
.screen-light--warm { --ax: 11vw; --ay: 6vw; --as: 0.2; --nx: 2; --ny: 6; --ns: 4; --px: -0.45; --py: -0.08; --ps: -0.6; }
.screen-light--purple { --ax: 9vw; --ay: 6vw; --as: 0.18; --nx: 4; --ny: 2; --ns: 2; --px: -0.7; --py: -0.25; --ps: -0.15; }

.screen-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.screen-blob { opacity: var(--lo); mix-blend-mode: screen; border-radius: 50%; }
.screen-blob--rose {
  left: -15vw; top: -17vw; width: 92vw; height: 92vw;
  background: radial-gradient(closest-side, rgba(255, 36, 96, 0.386) 0%, rgba(255, 36, 96, 0.371) 10%, rgba(255, 36, 96, 0.328) 20%, rgba(255, 36, 96, 0.267) 30%, rgba(255, 36, 96, 0.200) 40%, rgba(255, 36, 96, 0.138) 50%, rgba(255, 36, 96, 0.086) 60%, rgba(255, 36, 96, 0.048) 70%, rgba(255, 36, 96, 0.023) 80%, rgba(255, 36, 96, 0.008) 90%, rgba(255, 36, 96, 0.000) 100%);
  --ax: 24vw; --ay: 12vw; --as: 0.3; --ao: 0.55;
  --nx: 2; --ny: 4; --ns: 4; --no: 2;
  --px: -0.05; --py: -0.3; --ps: -0.5; --po: -0.2;
}
.screen-blob--violet {
  left: 25vw; top: -29vw; width: 84vw; height: 84vw;
  background: radial-gradient(closest-side, rgba(150, 60, 255, 0.331) 0%, rgba(150, 60, 255, 0.318) 10%, rgba(150, 60, 255, 0.281) 20%, rgba(150, 60, 255, 0.229) 30%, rgba(150, 60, 255, 0.172) 40%, rgba(150, 60, 255, 0.118) 50%, rgba(150, 60, 255, 0.074) 60%, rgba(150, 60, 255, 0.041) 70%, rgba(150, 60, 255, 0.020) 80%, rgba(150, 60, 255, 0.007) 90%, rgba(150, 60, 255, 0.000) 100%);
  --ax: 22vw; --ay: 14vw; --as: 0.28; --ao: 0.6;
  --nx: 4; --ny: 2; --ns: 2; --no: 4;
  --px: -0.4; --py: -0.15; --ps: -0.1; --po: -0.65;
}
.screen-blob--blue {
  left: 38vw; top: 2vw; width: 80vw; height: 80vw;
  background: radial-gradient(closest-side, rgba(40, 90, 255, 0.313) 0%, rgba(40, 90, 255, 0.300) 10%, rgba(40, 90, 255, 0.266) 20%, rgba(40, 90, 255, 0.216) 30%, rgba(40, 90, 255, 0.162) 40%, rgba(40, 90, 255, 0.111) 50%, rgba(40, 90, 255, 0.070) 60%, rgba(40, 90, 255, 0.039) 70%, rgba(40, 90, 255, 0.019) 80%, rgba(40, 90, 255, 0.007) 90%, rgba(40, 90, 255, 0.000) 100%);
  --ax: 20vw; --ay: 13vw; --as: 0.3; --ao: 0.6;
  --nx: 2; --ny: 6; --ns: 4; --no: 2;
  --px: -0.75; --py: -0.45; --ps: -0.35; --po: -0.9;
}
.screen-blob--amber {
  left: 10vw; top: 14vw; width: 64vw; height: 64vw;
  background: radial-gradient(closest-side, rgba(255, 140, 50, 0.221) 0%, rgba(255, 140, 50, 0.212) 10%, rgba(255, 140, 50, 0.188) 20%, rgba(255, 140, 50, 0.153) 30%, rgba(255, 140, 50, 0.114) 40%, rgba(255, 140, 50, 0.079) 50%, rgba(255, 140, 50, 0.049) 60%, rgba(255, 140, 50, 0.028) 70%, rgba(255, 140, 50, 0.013) 80%, rgba(255, 140, 50, 0.005) 90%, rgba(255, 140, 50, 0.000) 100%);
  --ax: 26vw; --ay: 10vw; --as: 0.35; --ao: 0.7;
  --nx: 4; --ny: 4; --ns: 2; --no: 4;
  --px: -0.6; --py: -0.85; --ps: -0.7; --po: -0.3;
}

@media (prefers-reduced-motion: reduce) {
  .screen-light, .enter { animation: none; }
}