:root {
  color-scheme: dark;
  --bg: #071713;
  --bg-strong: #0b211b;
  --ink: #f3fbf7;
  --muted: #a9bbb5;
  --accent: #11c884;
  --accent-dark: #63e6a0;
  --accent-strong: #00916f;
  --accent-stronger: #105243;
  --accent-soft: #0e5f4d;
  --accent-contrast: #ffffff;
  --focus-ring: rgba(99, 230, 160, 0.46);
  --panel: #102b24;
  --panel-strong: #16362e;
  --header: #102b24;
  --chat-bg: #0c2a22;
  --stroke: rgba(194, 239, 221, 0.18);
  --glass: rgba(16, 43, 36, 0.96);
  --glass-strong: rgba(22, 54, 46, 0.98);
  --glass-border: rgba(194, 239, 221, 0.18);
  --shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.34);
  --liquid-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.34), inset 0 0.0625rem 0 rgba(255, 255, 255, 0.08);
  --radius: 0.5rem;
  --font-head: "Manrope", sans-serif;
  --font-body: "Manrope", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  width: 100%;
  overflow: hidden;
}

html {
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(88% 74% at 10% 0%, rgba(0, 145, 111, 0.28), transparent 48%),
    radial-gradient(72% 68% at 88% 12%, rgba(11, 85, 95, 0.2), transparent 52%),
    linear-gradient(145deg, #020807 0%, #082019 50%, #03110d 100%);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  animation: backgroundDrift 22s ease-in-out infinite alternate;
  height: 100vh;
  overflow: hidden;
}

.bg-grid {
  position: fixed;
  inset: 0;
  contain: paint;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16) 0.0625rem, transparent 0.0625rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0.0625rem, transparent 0.0625rem);
  background-size: 4.5rem 4.5rem;
  animation: gridDrift 34s linear infinite;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 78%);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

body .bg-grid {
  background-image:
    linear-gradient(rgba(99, 230, 160, 0.13) 0.0625rem, transparent 0.0625rem),
    linear-gradient(90deg, rgba(99, 230, 160, 0.08) 0.0625rem, transparent 0.0625rem);
  opacity: 0.16;
}

@keyframes backgroundDrift {
  from {
    filter: saturate(1) brightness(1);
  }

  to {
    filter: saturate(1.08) brightness(1.04);
  }
}

@keyframes gridDrift {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 9rem 4.5rem;
  }
}

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 119, 129, 0.55) transparent;
  -webkit-tap-highlight-color: transparent;
}

*::-webkit-scrollbar {
  width: 0.625rem;
  height: 0.625rem;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(102, 119, 129, 0.45);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(102, 119, 129, 0.7);
}

body * {
  scrollbar-color: rgba(163, 190, 184, 0.56) transparent;
}

body *::-webkit-scrollbar-thumb {
  background: rgba(163, 190, 184, 0.42);
}

body *::-webkit-scrollbar-thumb:hover {
  background: rgba(183, 212, 205, 0.64);
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 0.125rem solid var(--focus-ring);
  outline-offset: 0.15rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}