@import url('/components/header.css?v=15');
@import url('/components/hero.css?v=8');
@import url('/components/brands.css?v=2');
@import url('/components/section.css?v=2');
@import url('/components/start.css?v=2');
@import url('/components/footer.css?v=7');
@import url('/pages/products.css?v=9');
@import url('/pages/price.css?v=2');
@import url('/pages/invoices.css');
@import url('/pages/ingame.css?v=14');
@import url('/pages/studio.css');
@import url('/pages/checkout.css?v=14');
@import url('/pages/discord.css?v=2');
@import url('/pages/storefront.css?v=1');
@import url('/pages/future.css?v=14');
@import url('/pages/partners.css?v=6');
@import url('/pages/missing.css?v=2');

:root,
html[data-theme='dark'] {
  color-scheme: dark;
  --page: #000000;
  --text: #f4f4f5;
  --mute: #a1a1aa;
  --line: rgba(255, 255, 255, 0.1);
  --header: rgba(14, 14, 16, 0.88);
  --header-line: rgba(255, 255, 255, 0.12);
  --header-text: #f4f4f5;
  --header-mute: rgba(244, 244, 245, 0.7);
  --header-hover: rgba(255, 255, 255, 0.08);
  --sign: #f4f4f5;
  --sign-text: #111113;
}

html[data-theme='white'] {
  color-scheme: light;
  --page: #ffffff;
  --text: #111113;
  --mute: #5c5c66;
  --line: rgba(15, 23, 42, 0.1);
  --header: rgba(255, 255, 255, 0.9);
  --header-line: rgba(15, 23, 42, 0.1);
  --header-text: #18181b;
  --header-mute: #52525b;
  --header-hover: rgba(15, 23, 42, 0.06);
  --sign: #111113;
  --sign-text: #ffffff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow-x: clip;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--page);
}

main {
  flex: 1 0 auto;
  padding: 0;
}

.sign-fill {
  border-color: transparent;
  background: linear-gradient(115deg, #163d9c, #2563eb, #38bdf8, #2563eb, #163d9c);
  background-size: 260% 260%;
  animation: sign-fill-flow 12s ease-in-out infinite;
  box-shadow: none;
  color: #ffffff;
}

.sign-fill:hover {
  filter: brightness(1.08);
  opacity: 1;
}

@keyframes sign-fill-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sign-fill {
    animation: none;
    background-position: 50% 50%;
  }
}