/* Экран «Каналы» (.p0-stage--channels) и приём «Разбор источника» (.p0-channels-parse*),
   который используют ещё «Приток» и «Разбор встречи». Подключается после
   frontend-demo/styles/presentation0.css. */

/* --- Приём «Разбор источника» -------------------------------------------------
   Разметка — pages/presentation0/channels/parse.rs. Экран на своём бите
   выставляет предку --parse: p0-channels-parse и --parse-sweep: p0-channels-parse-sweep,
   начало разбора — --parse-at. Шаг задаёт на себе, откуда он появляется
   (--parse-from-*) и когда (--parse-step-at). Без этих переменных (другие биты,
   уменьшенное движение, снимки) виден законченный разбор. Свойства шага
   не наследуются, чтобы вложенные шаги не получали чужие значения. */

@property --parse-from-t { syntax: "*"; inherits: false; }
@property --parse-from-o { syntax: "*"; inherits: false; }
@property --parse-from-dash { syntax: "*"; inherits: false; }
@property --parse-step-at { syntax: "*"; inherits: false; }
@property --parse-step-dur { syntax: "*"; inherits: false; }
@property --parse-sweep-from { syntax: "*"; inherits: false; }
@property --parse-sweep-to { syntax: "*"; inherits: false; }
@property --parse-sweep-at { syntax: "*"; inherits: false; }
@property --parse-sweep-dur { syntax: "*"; inherits: false; }

@keyframes p0-channels-parse {
  from {
    opacity: var(--parse-from-o, 0);
    transform: var(--parse-from-t, none);
    stroke-dashoffset: var(--parse-from-dash, 0);
  }
}
@keyframes p0-channels-parse-sweep {
  from { opacity: 1; transform: var(--parse-sweep-from, translateX(-50%)); }
  85% { opacity: 1; }
  to { opacity: 0; transform: var(--parse-sweep-to, translateX(50%)); }
}
:is(.p0-channels-parse__source, .p0-channels-parse__arrow, .p0-channels-parse__chip, .p0-channels-parse__lock,
  .p0-channels-parse__edges, .p0-channels-parse__nodes, .p0-channels-parse__step) {
  animation: var(--parse, none) var(--parse-step-dur, .5s) var(--ease-out)
    calc(var(--parse-at, 0s) + var(--parse-step-at, 0s)) both;
}
.p0-channels-parse__source { --parse-from-t: translateX(calc(-2 * var(--su))); --parse-step-dur: .45s; }
.p0-channels-parse__arrow { --parse-from-t: scaleX(0); --parse-step-at: .8s; --parse-step-dur: .4s; }
.p0-channels-parse__chip {
  --parse-from-t: translateX(calc(-3 * var(--su))) scale(.5);
  --parse-step-at: calc(.9s + var(--k, 0) * .22s);
}
.p0-channels-parse__lock { --parse-from-t: scale(2.2); --parse-step-at: 1.35s; --parse-step-dur: .45s; }
.p0-channels-parse__edges { --parse-from-dash: 100; --parse-from-o: 1; --parse-step-at: 1.5s; --parse-step-dur: .6s; }
.p0-channels-parse__nodes { --parse-from-t: scale(0); --parse-step-at: 1.75s; --parse-step-dur: .45s; }

/* Луч: полоса света по центру слоя; слой сдвигается на половину своей ширины. */
.p0-channels-parse__beam {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent 43%, #e6cd9a00 45%, #f5e6c4d9 50%, #e6cd9a00 55%, transparent 57%);
  transform: translateX(50%);
  animation: var(--parse-sweep, none) var(--parse-sweep-dur, .9s) linear
    calc(var(--parse-at, 0s) + var(--parse-sweep-at, .3s)) both;
}
.p0-channels-parse__source {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: calc(.5 * var(--su));
  height: 100%;
  min-width: 0;
  padding: 0 calc(1.9 * var(--su)) 0 calc(.35 * var(--su));
  border: 1px solid #e6cd9a33;
  border-radius: calc(.7 * var(--su));
  background: linear-gradient(110deg, #22302fe6, #111918f0);
  box-shadow: inset 0 1px #f3e6c914;
}
.p0-channels-parse__glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(1.5 * var(--su));
  height: calc(1.5 * var(--su));
  border-radius: calc(.5 * var(--su));
  background: #e6cd9a1a;
  color: #e6cd9a;
  transition: width .8s var(--ease-out), height .8s var(--ease-out);
}
.p0-channels-parse__glyph .ui-icon { width: 64%; height: 64%; }
.p0-channels-parse__body { display: grid; min-width: 0; line-height: 1.15; }
.p0-channels-parse__body b {
  overflow: hidden;
  font-size: calc(.76 * var(--su));
  font-weight: 560;
  color: #f1ede4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.p0-channels-parse__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 0;
  opacity: 0;
  font-size: calc(.66 * var(--su));
  color: #a6b3af;
  transition: max-height .8s var(--ease-out), opacity .6s var(--ease);
}
.p0-channels-parse__lock {
  position: absolute;
  z-index: 3;
  right: calc(.4 * var(--su));
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: calc(1.2 * var(--su));
  height: calc(1.2 * var(--su));
  border-radius: 50%;
  background: #e6cd9a24;
  color: #e6cd9a;
}
.p0-channels-parse__lock .ui-icon { width: 72%; height: 72%; }
.p0-channels-parse__arrow { position: relative; height: 1px; background: linear-gradient(90deg, #e6cd9a22, #e6cd9a); transform-origin: left; }
.p0-channels-parse__arrow::after { content: ""; position: absolute; right: 0; top: -3px; border: 3px solid transparent; border-left-color: #e6cd9a; border-right: 0; }
.p0-channels-parse__chips { display: flex; flex-wrap: wrap; gap: calc(.3 * var(--su)); min-width: 0; margin: 0; padding: 0; list-style: none; }
.p0-channels-parse__chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  min-width: 0;
  padding: .16em .6em .16em .3em;
  border: 1px solid rgba(var(--entity-rgb), .5);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(var(--entity-rgb), .2), #0e1615e6 70%);
  font-size: calc(.68 * var(--su));
  line-height: 1.25;
  color: #eef1ee;
  white-space: nowrap;
}
.p0-channels-parse__chip .entity-icon { flex: none; font-size: 1.05em; }
.p0-channels-parse__graph { width: 100%; height: calc(3 * var(--su)); overflow: visible; }
.p0-channels-parse__edges { stroke: #e6cd9a99; stroke-width: .35; stroke-dasharray: 100; stroke-dashoffset: 0; }
.p0-channels-parse__nodes { fill: #7ee1c8; transform-box: fill-box; transform-origin: 15% 50%; }
.p0-channels-parse__hub { fill: #e6cd9a; }

/* --- Фон ------------------------------------------------------------------------ */

.p0-channels-backdrop__rings {
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(ellipse at 32% 44%, transparent 0 4.6vmax, #e6cd9a0c 4.6vmax calc(4.6vmax + 1px));
  mask-image: radial-gradient(ellipse at 32% 44%, #000 18%, transparent 68%);
}

/* --- Кольцо каналов -------------------------------------------------------------
   Хост кольца принимает эстафету outer-orbit (FLIP по transform), поэтому сам
   двигается только свойством translate: на бите «Кольцо каналов» он в центре. */

.p0-channels-ring { position: absolute; z-index: 2; pointer-events: none; transition: translate 1.2s var(--ease-out); }
.p0-channels-core {
  position: absolute;
  z-index: 4;
  display: grid;
  justify-items: center;
  align-content: start;
  pointer-events: none;
  transition: translate 1.2s var(--ease-out);
}
.p0-stage--channels[data-beat="0"] :is(.p0-channels-ring, .p0-channels-core) { translate: calc(20 * var(--su)) 0; }
.p0-channels-ring__surface { position: absolute; inset: 0; }
.p0-channels-ring__surface > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.p0-channels-ring__line { stroke: #e6cd9a5c; stroke-width: .1; stroke-dasharray: 100; stroke-dashoffset: 0; }
.p0-channels-ring__inner { stroke: #b7a2f540; stroke-width: .08; stroke-dasharray: .5 .7; transition: stroke .8s; }
.p0-channels-ring__ticks { stroke: #cab68d5c; stroke-width: .08; }
.p0-channels-route { stroke: #e6cd9a26; stroke-width: .08; stroke-dasharray: .6 .5; }
.p0-channels-packet { fill: #f1dfb6; offset-rotate: 0deg; animation: p0-channels-fly 3s cubic-bezier(.45, .05, .55, .95) infinite; }
@keyframes p0-channels-fly {
  0% { offset-distance: 0%; opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
/* Источник на паузе: новых пакетов нет, плитка гаснет, история остаётся. */
.p0-channels-packet[data-paused] { opacity: 0; animation-play-state: paused; }
.p0-stage--channels[data-beat="0"] .p0-channels-packet[data-paused] { opacity: 1; animation-play-state: running; }
.p0-stage--channels:is([data-beat="1"], [data-beat="2"]) .p0-channels-packet { display: none; }

.p0-channels-tiles { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.p0-channels-tile {
  position: absolute;
  width: calc(11.4 * var(--su));
  height: calc(4.2 * var(--su));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  column-gap: calc(.45 * var(--su));
  row-gap: calc(.12 * var(--su));
  padding: 0 calc(.55 * var(--su));
  border: 1px solid #e6cd9a3a;
  border-radius: calc(.8 * var(--su));
  background: linear-gradient(135deg, #22302fee, #111918f5);
  box-shadow: inset 0 1px #f3e6c914, 0 calc(.4 * var(--su)) calc(1.2 * var(--su)) #04070766;
  transition: opacity .8s var(--ease), filter .8s var(--ease);
}
.p0-channels-tile__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: calc(1.9 * var(--su));
  height: calc(1.9 * var(--su));
  border-radius: calc(.55 * var(--su));
  background: #e6cd9a1a;
  color: #e6cd9a;
}
.p0-channels-tile__icon .ui-icon { width: 62%; height: 62%; }
.p0-channels-tile b {
  overflow: hidden;
  font-size: calc(.76 * var(--su));
  font-weight: 580;
  line-height: 1.1;
  color: #f3efe6;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.p0-channels-tile small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: calc(.56 * var(--su));
  line-height: 1.2;
  color: #a3b0ac;
}
.p0-channels-tile__tag {
  position: absolute;
  right: calc(.5 * var(--su));
  top: calc(-.7 * var(--su));
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .08em .55em;
  border: 1px solid #b7a2f566;
  border-radius: 999px;
  background: #111918;
  font: 500 calc(.5 * var(--su))/1.4 var(--mono);
  letter-spacing: .06em;
  color: #c9bdf7;
  white-space: nowrap;
}
.p0-channels-tile__tag .ui-icon { width: 1.15em; height: 1.15em; color: #e6cd9a; }
.p0-channels-tile__paused { color: #f0a95a; }
.p0-channels-tile[data-paused] { opacity: .4; filter: grayscale(.85); }
.p0-channels-tile[data-paused] .p0-channels-tile__sim { display: none; }
.p0-stage--channels:not([data-beat="3"]) .p0-channels-tile[data-paused] .p0-channels-tile__sim { display: inline; }
.p0-stage--channels:not([data-beat="3"]) .p0-channels-tile__paused { display: none; }
.p0-stage--channels[data-beat="3"] .p0-channels-tile[data-paused] { transition-delay: 1.6s; }
.p0-stage--channels[data-beat="0"] .p0-channels-tile { opacity: 1; filter: none; animation: p0-channels-tile-in .7s var(--ease-out) calc(.3s + var(--k) * 70ms) both; }
.p0-stage--channels[data-beat="1"] .p0-channels-tile { opacity: .5; filter: none; }
.p0-stage--channels[data-beat="2"] .p0-channels-tile { opacity: .26; filter: none; }
@keyframes p0-channels-tile-in { from { opacity: 0; scale: .6; } }
.p0-stage--channels[data-beat="0"] .p0-channels-ring__line { animation: p0-channels-draw 1.6s var(--ease-out) .2s both; }
@keyframes p0-channels-draw { from { stroke-dashoffset: 100; } }

/* Бит «Необычные входы»: пакет конвейера идёт из плитки его группы в ядро. */
.p0-channels-link { opacity: 0; stroke: #f1d9a3; stroke-width: .16; stroke-dasharray: 100; stroke-dashoffset: 0; }
.p0-channels-link-packet { display: none; fill: #f5e6c4; offset-rotate: 0deg; }
.p0-stage--channels[data-beat="1"] .p0-channels-link { opacity: .7; animation: p0-channels-draw .7s var(--ease-out) calc(var(--p) * 2.25s + .2s) both; }
.p0-stage--channels[data-beat="1"] .p0-channels-link-packet {
  display: inline;
  animation: p0-channels-link-fly .8s ease-in calc(var(--p) * 2.25s + .2s) both;
}
@keyframes p0-channels-link-fly {
  0% { offset-distance: 0%; opacity: 0; }
  20% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* --- Созвездие устройств ---------------------------------------------------------- */

.p0-channels-sats { position: absolute; inset: 0; }
.p0-channels-sat {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: calc(.15 * var(--su));
  translate: -50% calc(-1.15 * var(--su));
  transition: opacity .7s var(--ease), scale .7s var(--ease-out);
}
.p0-channels-sat__icon {
  display: grid;
  place-items: center;
  width: calc(2.3 * var(--su));
  height: calc(2.3 * var(--su));
  border: 1px solid #b7a2f588;
  border-radius: 50%;
  background: radial-gradient(circle, #2a2748, #121a1a 70%);
  color: #d8cffb;
  box-shadow: 0 0 calc(1 * var(--su)) #b7a2f533;
}
.p0-channels-sat[data-explicit] .p0-channels-sat__icon { border-color: #e6cd9aaa; color: #f1dfb6; }
.p0-channels-sat__icon .ui-icon { width: 56%; height: 56%; }
.p0-channels-sat__name {
  padding: 0 .4em;
  border-radius: 999px;
  background: #0d1414cc;
  font: 500 calc(.56 * var(--su))/1.4 var(--mono);
  letter-spacing: .05em;
  color: #cfc6f5;
  white-space: nowrap;
}
.p0-stage--channels:is([data-beat="0"], [data-beat="1"]) .p0-channels-sat { opacity: 0; scale: .4; }
.p0-stage--channels[data-beat="2"] .p0-channels-sat { animation: p0-channels-sat-in .6s var(--ease-out) calc(.3s + var(--d) * .25s) both; }
.p0-stage--channels[data-beat="2"] .p0-channels-ring__inner { stroke: #b7a2f5aa; }
@keyframes p0-channels-sat-in { from { opacity: 0; scale: .4; } }
.p0-channels-pulse { fill: none; stroke: #b7a2f5; stroke-width: .12; opacity: 0; transform-box: fill-box; transform-origin: center; }
.p0-channels-signal { display: none; fill: #d8cffb; offset-rotate: 0deg; }
.p0-stage--channels[data-beat="2"] .p0-channels-pulse { animation: p0-channels-pulse 2.4s ease-out calc(1s + var(--d) * .34s) infinite; }
.p0-stage--channels[data-beat="2"] .p0-channels-signal { display: inline; animation: p0-channels-fly 2.2s linear infinite; }
@keyframes p0-channels-pulse {
  from { opacity: .9; transform: scale(.7); }
  to { opacity: 0; transform: scale(2.3); }
}

/* --- Ядро ----------------------------------------------------------------------- */

.p0-channels-core__caption {
  margin: 0;
  height: calc(.9 * var(--su));
  font: 500 calc(.62 * var(--su))/calc(.9 * var(--su)) var(--mono);
  letter-spacing: .22em;
  color: #dcc699;
}
.p0-channels-core__prism { width: calc(8.1 * var(--su)); }
.p0-channels-core__prism > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.p0-channels-prism__face { stroke: #efe0c1aa; stroke-width: .5; }
.p0-channels-prism__facets { stroke: #f3e6c966; stroke-width: .35; }
.p0-channels-prism__heart { fill: #f5e6c4; filter: drop-shadow(0 0 3px #e6cd9a); animation: cs-breathe 2.6s ease-in-out infinite; }
.p0-channels-prism__rotor { stroke: #e4c992; stroke-width: .7; transform-origin: 0 0; animation: cs-orbit 12s linear infinite; }
.p0-channels-prism__rotor--reverse { stroke: #9c91fa; animation-direction: reverse; animation-duration: 9s; }

/* --- Правая колонка: входы, устройства, согласия ----------------------------------- */

.p0-channels-heading {
  margin: 0 0 calc(.55 * var(--su));
  font: 500 calc(.74 * var(--su))/1.2 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #cdb98f;
}
.p0-channels-inputs {
  position: absolute;
  z-index: 5;
  left: calc(60 * var(--su));
  top: calc(4.3 * var(--su));
  width: calc(37 * var(--su));
  transition: opacity .7s var(--ease);
}
.p0-channels-inputs__list { display: grid; gap: calc(.25 * var(--su)); margin: 0; padding: 0; list-style: none; }
.p0-channels-inputs .p0-channels-parse {
  --parse-at: calc(var(--p) * 2.25s + .9s);
  display: grid;
  grid-template-columns: calc(12.2 * var(--su)) calc(.9 * var(--su)) minmax(0, 1fr) 0px;
  align-items: center;
  column-gap: calc(.45 * var(--su));
  height: calc(2.05 * var(--su));
  transition: height .8s var(--ease-out), grid-template-columns .8s var(--ease-out);
}
.p0-channels-inputs .p0-channels-parse__chips { flex-wrap: nowrap; overflow: hidden; mask-image: linear-gradient(90deg, #000 88%, transparent); }
.p0-channels-inputs .p0-channels-parse__chip { flex: none; font-size: calc(.62 * var(--su)); }
.p0-channels-inputs .p0-channels-parse__graph { opacity: 0; transition: opacity .5s; }
.p0-stage--channels[data-beat="1"] .p0-channels-inputs { --parse: p0-channels-parse; --parse-sweep: p0-channels-parse-sweep; }
.p0-stage--channels[data-beat="1"] .p0-channels-inputs .p0-channels-parse {
  grid-template-columns: calc(14.5 * var(--su)) calc(1.1 * var(--su)) minmax(0, 1fr) calc(3 * var(--su));
  height: calc(4.1 * var(--su));
}
.p0-stage--channels[data-beat="1"] .p0-channels-inputs .p0-channels-parse__glyph { width: calc(2.1 * var(--su)); height: calc(2.1 * var(--su)); }
.p0-stage--channels[data-beat="1"] .p0-channels-inputs .p0-channels-parse__text { max-height: 2.5em; opacity: 1; }
.p0-stage--channels[data-beat="1"] .p0-channels-inputs .p0-channels-parse__chips { flex-wrap: wrap; mask-image: none; }
.p0-stage--channels[data-beat="1"] .p0-channels-inputs .p0-channels-parse__chip { font-size: calc(.68 * var(--su)); }
.p0-stage--channels[data-beat="1"] .p0-channels-inputs .p0-channels-parse__graph { opacity: 1; }
.p0-stage--channels[data-beat="0"] .p0-channels-inputs { opacity: 0; }

.p0-channels-slot {
  position: absolute;
  z-index: 5;
  left: calc(60 * var(--su));
  top: calc(25.2 * var(--su));
  width: calc(37 * var(--su));
  height: calc(16.4 * var(--su));
  padding: calc(.8 * var(--su)) calc(1 * var(--su));
  border: 1px solid #e6cd9a2b;
  border-radius: calc(1 * var(--su));
  background: linear-gradient(150deg, #192423e6, #0d1414f0);
  box-shadow: inset 0 1px #f3e6c914;
  transition: opacity .7s var(--ease), translate .7s var(--ease-out);
}
.p0-channels-slot ul { display: grid; margin: 0; padding: 0; list-style: none; }
.p0-channels-devices { opacity: 0; translate: 0 calc(1 * var(--su)); }
.p0-stage--channels[data-beat="2"] .p0-channels-devices { opacity: 1; translate: none; }
.p0-stage--channels:not([data-beat="3"]) .p0-channels-consent { opacity: 0; translate: 0 calc(1 * var(--su)); }
.p0-channels-devices ul { gap: calc(.22 * var(--su)); }
.p0-channels-devices li {
  display: grid;
  grid-template-columns: calc(1.5 * var(--su)) calc(6.4 * var(--su)) minmax(0, 1fr);
  align-items: center;
  column-gap: calc(.5 * var(--su));
  min-height: calc(1.66 * var(--su));
  font-size: calc(.74 * var(--su));
  color: #c9d0cd;
}
.p0-channels-devices__icon { display: grid; place-items: center; color: #d8cffb; }
.p0-channels-devices__icon .ui-icon { width: 100%; height: calc(1.3 * var(--su)); }
.p0-channels-devices b { font-weight: 580; color: #f1ede4; }
.p0-channels-devices__signal { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.p0-channels-devices__explicit {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font: 500 calc(.56 * var(--su)) var(--mono);
  font-style: normal;
  letter-spacing: .05em;
  color: #e6cd9a;
}
.p0-channels-devices__explicit .ui-icon { width: 1.1em; height: 1.1em; }
.p0-stage--channels[data-beat="2"] .p0-channels-devices li { animation: p0-channels-rise .5s var(--ease-out) calc(.4s + var(--d) * .25s) both; }
@keyframes p0-channels-rise { from { opacity: 0; translate: 0 calc(.8 * var(--su)); } }

.p0-channels-consent ul { gap: calc(.45 * var(--su)); }
.p0-channels-consent li {
  display: grid;
  grid-template-columns: calc(1.5 * var(--su)) auto minmax(0, 1fr);
  align-items: center;
  column-gap: calc(.55 * var(--su));
  row-gap: calc(.15 * var(--su));
  font-size: calc(.78 * var(--su));
}
.p0-channels-consent__icon { grid-row: span 2; align-self: start; display: grid; place-items: center; color: #e6cd9a; }
.p0-channels-consent__icon .ui-icon { width: 100%; height: calc(1.3 * var(--su)); }
.p0-channels-consent__source { font-weight: 580; color: #f1ede4; white-space: nowrap; }
.p0-channels-consent__flip { display: flex; align-items: center; gap: .4em; min-width: 0; white-space: nowrap; }
.p0-channels-consent__action {
  padding: .1em .6em;
  border: 1px solid #e6cd9a55;
  border-radius: 999px;
  color: #d9c9a4;
  font-size: .9em;
  opacity: .55;
}
.p0-channels-consent__result {
  padding: .1em .65em;
  border-radius: 999px;
  background: #7ee1c826;
  border: 1px solid #7ee1c880;
  color: #d9f5ec;
  font-size: .9em;
  font-weight: 560;
}
.p0-channels-consent__result::before { content: "→ "; color: #7ee1c8; }
.p0-channels-consent li > .p0-stage-badge { grid-column: 2 / -1; justify-self: start; font-size: calc(.56 * var(--su)); }
.p0-channels-consent__note { grid-column: 2 / -1; font-size: calc(.62 * var(--su)); line-height: 1.25; color: #93a19d; }
.p0-stage--channels[data-beat="3"] .p0-channels-consent li { animation: p0-channels-rise .5s var(--ease-out) calc(.3s + var(--c) * .4s) both; }
.p0-stage--channels[data-beat="3"] .p0-channels-consent__action { animation: p0-channels-undim .5s var(--ease) calc(1.1s + var(--c) * .4s) both; }
.p0-stage--channels[data-beat="3"] .p0-channels-consent__result { animation: p0-channels-pop .5s var(--ease-out) calc(1.3s + var(--c) * .4s) both; }
@keyframes p0-channels-undim { from { opacity: 1; } }
@keyframes p0-channels-pop { from { opacity: 0; transform: scale(.6); } }

.p0-channels-legend {
  position: absolute;
  z-index: 6;
  left: calc(84 * var(--su));
  top: calc(42.8 * var(--su));
  width: calc(13 * var(--su));
  display: grid;
  gap: calc(.3 * var(--su));
  margin: 0;
  font: 500 calc(.58 * var(--su))/1.3 var(--mono);
  letter-spacing: .04em;
  color: #93a19d;
}
.p0-channels-legend span { display: flex; align-items: center; gap: .4em; }
.p0-channels-legend .ui-icon { flex: none; width: 1.2em; height: 1.2em; color: #e6cd9a; }