:root {
  color-scheme: dark;
}

.zx-bg {
  position: fixed;
  inset: 0;
  z-index: -50;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg, var(--zx-bg-0), var(--zx-bg-1) 55%, #05060b);
  --zx-spot-x: 50%;
  --zx-spot-y: 22%;
  --zx-spot-opacity: 0.56;
}

.zx-bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(900px 560px at var(--zx-spot-x) var(--zx-spot-y), rgba(0, 122, 255, 0.22), transparent 62%),
    radial-gradient(920px 520px at 12% 0%, rgba(88, 86, 214, 0.14), transparent 62%),
    radial-gradient(900px 560px at 100% 30%, rgba(90, 200, 250, 0.10), transparent 62%),
    radial-gradient(900px 600px at 40% 110%, rgba(52, 199, 89, 0.06), transparent 62%);
  filter: blur(58px) saturate(1.02);
  opacity: var(--zx-spot-opacity);
  transform: translate3d(0, 0, 0);
}

.zx-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(800px 520px at 50% 0%, rgba(0, 122, 255, 0.08), transparent 60%);
  background-size: 64px 64px, 64px 64px, auto;
  opacity: 0.06;
  mask-image: radial-gradient(circle at 50% 0%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 72%);
}

.zx-vignette {
  position: fixed;
  inset: 0;
  z-index: -40;
  pointer-events: none;
  background: radial-gradient(circle at 50% 30%, transparent 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.55) 100%);
}

.zx-glass {
  background: var(--zx-surface);
  border: 1px solid var(--zx-border-soft);
  backdrop-filter: blur(14px);
}

.zx-card {
  background: var(--zx-surface-2);
  border: 1px solid var(--zx-border);
  backdrop-filter: blur(10px);
}

.zx-gradient-border {
  position: relative;
}

.zx-gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(0, 122, 255, 0.65),
    rgba(90, 200, 250, 0.40),
    rgba(88, 86, 214, 0.40)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.78;
}

.zx-muted {
  color: var(--zx-text-muted);
}

.zx-subtle {
  color: var(--zx-text-subtle);
}

.zx-focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.35);
}

.zx-phone {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.zx-screen {
  position: absolute;
  inset: 0;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.zx-screen-active {
  transform: translateY(0);
  z-index: 10;
}

.zx-screen-preloading {
  transform: translateY(100%);
  z-index: 5;
}

.zx-screen-played {
  transform: translateY(-100%);
  z-index: 5;
}

@keyframes zx-floaty {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -14px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.zx-floaty {
  animation: zx-floaty 7s ease-in-out infinite;
}

.zx-shimmer {
  position: relative;
  overflow: hidden;
}

.zx-shimmer::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: translateX(-120%);
  opacity: 0.55;
  pointer-events: none;
  animation: zx-shimmer 2.6s ease-in-out infinite;
  animation-play-state: paused;
}

.zx-shimmer:hover::after {
  animation-play-state: running;
}

@keyframes zx-shimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

summary::-webkit-details-marker {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .zx-screen {
    transition: none;
  }
  .zx-floaty,
  .zx-shimmer::after {
    animation: none;
  }
}