:root {
  --px-primary: #6a00ff;
  --px-surface: #0e0e0e;
  --px-surface-2: #101010;
  --px-text: #ffffff;
  --px-text-muted: #d7d7d7;
  --px-max-width: 1440px;
  --px-mobile-width: 390px;
  --px-mobile-height: 844px;
}

body,
html {
  min-height: 100dvh;
  background: var(--px-surface);
  color: var(--px-text);
}

.page-shell {
  position: relative;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: radial-gradient(circle at 20% 20%, rgba(106, 0, 255, 0.12), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(106, 0, 255, 0.08), transparent 40%),
    linear-gradient(180deg, var(--px-surface) 0%, var(--px-surface-2) 100%);
  overflow: hidden;
}

.page-stage {
  position: relative;
  width: min(100%, var(--px-max-width));
  margin: 0 auto;
  padding: clamp(16px, 4vw, 40px);
  z-index: 1;
}

.page-stage.mobile-shell {
  max-width: min(var(--px-max-width), 100%);
  min-height: var(--px-mobile-height);
}

.page-stage > header,
.page-stage > main,
.page-stage > footer {
  position: relative;
  z-index: 1;
}

.safe-area {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

@media (max-width: 768px) {
  .page-stage {
    padding: 20px;
  }

  .page-stage.mobile-shell {
    max-width: 100%;
    min-height: 100svh;
  }
}

.px-bg-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}

.px-flash {
  mix-blend-mode: screen;
}