/* LAYAI layer diagram. All geometry lives inside a fixed SVG viewport. */
.layai-core {
  --layai-cycle: 10800ms;
  --layai-delay: -7560ms;
  width: min(100%, 440px);
  aspect-ratio: 1;
  position: relative;
  isolation: isolate;
  pointer-events: none;
  user-select: none;
}

.layai-core__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.layai-core__plane {
  transform: translateY(var(--selected));
}

.layai-core__surface {
  fill: #14141d;
  fill-opacity: .89;
  stroke: #9394a8;
  stroke-opacity: .48;
  stroke-width: .85;
  stroke-linejoin: round;
}

.layai-core__rim {
  fill: #373442;
  fill-opacity: .5;
  stroke: #9394a8;
  stroke-opacity: .23;
  stroke-width: .7;
  stroke-linejoin: round;
}

.layai-core__data {
  color: #8e8d9e;
  opacity: .58;
}

.layai-core__trace,
.layai-core__datum {
  fill: none;
  stroke: currentColor;
  stroke-width: .8;
  stroke-opacity: .48;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.layai-core__datum {
  stroke-opacity: .65;
}

.layai-core__cell {
  fill: #181820;
  stroke: currentColor;
  stroke-width: .8;
}

.layai-core__cell--solid {
  fill: currentColor;
  fill-opacity: .36;
}

.layai-core__plane--selected .layai-core__surface {
  fill: #18171f;
  fill-opacity: .98;
  stroke-opacity: .65;
}

.layai-core__plane--selected .layai-core__data {
  color: #c0bacf;
  opacity: .85;
}

.layai-core__focus {
  opacity: 1;
}

.layai-core__focus-edge {
  fill: none;
  stroke: #b6a1d9;
  stroke-width: 1.15;
  stroke-opacity: .78;
}

.layai-core__corner {
  fill: none;
  stroke: #d0bde9;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.layai-core__signal {
  fill: #c6b2e4;
  stroke: #d7c8eb;
  stroke-width: .75;
}

.layai-core__signal-line {
  fill: none;
  stroke: #bca9db;
  stroke-width: 1;
  stroke-linecap: round;
}

.layai-core[data-animated="true"] .layai-core__plane {
  animation: layai-core-stack var(--layai-cycle) cubic-bezier(.45, 0, .18, 1) infinite;
  animation-delay: var(--layai-delay);
}

.layai-core[data-animated="true"] .layai-core__focus {
  animation: layai-core-select var(--layai-cycle) ease-in-out infinite;
  animation-delay: var(--layai-delay);
}

.layai-core[data-paused="true"] .layai-core__plane,
.layai-core[data-paused="true"] .layai-core__focus {
  animation-play-state: paused;
}

@keyframes layai-core-stack {
  0%, 18%, 100% { transform: translateY(var(--spread)); }
  42%, 55% { transform: translateY(var(--packed)); }
  69%, 84% { transform: translateY(var(--selected)); }
}

@keyframes layai-core-select {
  0%, 52%, 100% { opacity: 0; }
  69%, 84% { opacity: 1; }
}

/* A purposeful static state is also the no-JavaScript default. */
.motion-off .layai-core .layai-core__plane,
.layai-core.motion-off .layai-core__plane {
  animation: none !important;
  transform: translateY(var(--selected));
}

.motion-off .layai-core .layai-core__focus,
.layai-core.motion-off .layai-core__focus {
  animation: none !important;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .layai-core .layai-core__plane {
    animation: none !important;
    transform: translateY(var(--selected));
  }

  .layai-core .layai-core__focus {
    animation: none !important;
    opacity: 1;
  }
}