@font-face{font-family:'Rubik';font-style:italic;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-cyrillic-ext-italic.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Rubik';font-style:italic;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-cyrillic-italic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Rubik';font-style:italic;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-latin-ext-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rubik';font-style:italic;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-latin-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-arabic-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-cyrillic-ext-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-cyrillic-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-latin-ext-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-latin-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-cyrillic-ext-italic.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-cyrillic-italic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin-ext-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-cyrillic-ext-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-cyrillic-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin-ext-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  --bg: 255 15% 8%;
  --text: 0 0% 100%;
  --text1: 253 45% 90%;
  --text2: 253 45% 80%;
  --text3: 253 13% 60%;

  --color1: 231 100% 72%;
  --color2: 352 99% 73%;

  --selection: 231 100% 72%;

  --knp-hover: 282 28% 16%;

  --color: 288 100% 56%;
  --blobs-hue: 288;
}

html.dark {
  --bg: 255 15% 8%;
  --text: 0 0% 100%;
  --text1: 253 45% 90%;
  --text2: 253 45% 80%;
  --text3: 253 13% 60%;
}

html.light {
  --bg: 291 100% 97%;
  --text: 0 0% 0%;
  --text1: 253 3% 40%;
  --text2: 253 3% 60%;
  --text3: 253 3% 75%;
}

html.system {
  --bg: 255 15% 8%;
  --text: 0 0% 100%;
  --text1: 253 45% 90%;
  --text2: 253 45% 80%;
  --text3: 253 13% 60%;
}

@media (prefers-color-scheme: light) {
  html.system {
    --bg: 291 100% 97%;
    --text: 0 0% 0%;
  --text1: 253 3% 40%;
  --text2: 253 3% 60%;
  --text3: 253 3% 75%;
  }
}

::selection {
  background: hsl(var(--selection) / 0.5);
  color: hsl(var(--text));
}

:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus,
:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #1a1221 inset !important;
  -webkit-text-fill-color: #fff !important;
  color: hsl(var(--text)) !important;
  caret-color: hsl(var(--text)) !important;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--second-color);
}

::-webkit-scrollbar-thumb {
  background-color: hsl(var(--text));
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--text));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--second-color) var(--main-color);
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: hsl(var(--text));
  background: hsl(var(--bg));
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  position: relative;
  opacity: 0;
  transition: none;
}

body:not(.loaded) * {
  transition: none !important;
}

body.loaded {
  opacity: 1;
  transition: opacity 0s, color 0.7s ease, background-color 0.7s ease, border 0.7s ease;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

img {
  user-select: none;
  -webkit-user-drag: none;
}

svg {
  stroke-width: 2.5;
  width: 24px;
  height: 24px;
}

dialog {
  display: block;
}

.gradient {
  background: linear-gradient(90deg, hsl(var(--color1)), hsl(var(--color2)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.knp {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, hsl(var(--color1)), hsl(var(--color2)));
  color: hsl(0, 0%, 100%);
  border-radius: 10rem;
  padding: 0.125rem;
  font-weight: 600;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.knp-text {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: hsl(255, 15%, 8%);
  text-align: center;
  border-radius: 10rem;
  padding: 0.4rem 0.8rem;
  overflow: hidden;
  gap: 0.2rem;
  width: 100%;
  transition: all 0.3s ease;
}

.knp-text * {
  user-select: none !important;
}

.knp-text:hover {
  background: hsl(var(--knp-hover));
}

button {
  padding: 0;
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.page {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 8%;
  max-width: 86rem;
}

main {
  padding: 7rem 0;
  min-height: 100dvh;
  overflow-y: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

body .blobs {
  opacity: 0;
}

body.loaded .blobs {
  opacity: 1;
}

.blobs {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.75s ease;
}

.blob {
  position: absolute;
  background: hsl(var(--color, 288 100% 56%));
  border-radius: 50%;
  filter: blur(80px);
  animation: float var(--duration) var(--delay) infinite ease-in-out;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

@keyframes float {
  0%, 100% {
    transform: translate(var(--move-x, 30px), var(--move-y, -30px)) scale(1.1);
  }
  50% {
    transform: translate(calc(var(--move-x, 30px) * -1), calc(var(--move-y, -30px) * -0.5)) scale(0.9);
  }
}

@keyframes entrance {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.blobs.pulsing {
  animation: bg-pulse 4s ease-in-out infinite;
}

@keyframes bg-pulse {

  0%,
  100% {
    background-color: hsl(var(--color) / 0.01);
  }

  50% {
    background-color: hsl(var(--color) / 0.03);
  }
}

.blobs.glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, hsl(var(--color) / 0.1) 0%, hsl(var(--color) / 0.05) 50%, transparent 100%);
  animation: bg-glow 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes bg-glow {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.7;
  }
}

.blobs.glow .blob {
  box-shadow: 0 0 30px hsl(var(--color));
}

.blobs.fade::before {
  content: '';
  position: absolute;
  inset: 0;
  background: hsl(var(--color) / 0.025);
  pointer-events: none;
}

.blobs.aurora::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, hsl(var(--color) / 0.1), hsl(calc(var(--color-hue) + 60), 100%, 56% / 0.1), hsl(calc(var(--color-hue) + 120), 100%, 56% / 0.1));
  animation: aurora 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes aurora {
  0% {
    filter: hue-rotate(0deg) brightness(1);
  }

  50% {
    filter: hue-rotate(180deg) brightness(1.2);
  }

  100% {
    filter: hue-rotate(360deg) brightness(1);
  }
}

.blobs.fade-out {
  opacity: 0 !important;
  filter: blur(2px);
}

.blobs.fade-in {
  opacity: 1 !important;
  filter: blur(0);
}

main.no-transitions * {
  transition: none !important;
  animation: none !important;
}

main.no-transitions .blobs,
main.no-transitions .blobs * {
  transition: inherit !important;
  animation: inherit !important;
}

.popup-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(1px) brightness(66%);
  background: hsl(var(--bg) / 0.5);
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
}

.popup-container.active {
  opacity: 1;
  pointer-events: all;
}

.popup-container.active .popup {
  transform: translateY(0) scale(1);
}

.popup {
  background: hsl(var(--text) / 0.025);
  border: 1px solid hsl(var(--text) / 0.15);
  border-radius: 2rem;
  position: relative;
  box-sizing: border-box;
  width: 90vw;
  max-width: 1024px;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: none;  backdrop-filter: blur(8px);
  -ms-overflow-style: none;
  transform: translateY(20px) scale(0.95);
  transition: color 0.4s ease, background-color 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
  will-change: transform, opacity;
}

.popup .popup-close {
  position: sticky;
  top: 1rem;
  right: 1rem;
  z-index: 16;
  background: hsl(0, 0%, 0%, 0.3);
  border: 1px solid hsl(291, 100%, 97%, 0.15);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
  margin-top: -3rem;
}

.popup .popup-close svg {
  stroke: white;
}

.popup .popup-close:hover {
  background: hsl(0, 0%, 0%, 0.5);
}

.popup-content {
  color: hsl(var(--text));
}