/* Proxima Nova Font Family */
@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Thin.otf")
    format("opentype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Thin-Italic.otf")
    format("opentype");
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Light.otf")
    format("opentype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Light-Italic.otf")
    format("opentype");
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Light.otf")
    format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Light-Italic.otf")
    format("opentype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Regular.otf")
    format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Regular-Italic.otf")
    format("opentype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Black.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Black-Italic.otf")
    format("opentype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Semibold.otf")
    format("opentype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Semibold-Italic.otf")
    format("opentype");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Bold.otf")
    format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Bold-Italic.otf")
    format("opentype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Extrabold.otf")
    format("opentype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/super/dps/assets/fonts/proxima-nova-2/Mark-Simonson-Proxima-Nova-Extrabold-Italic.otf")
    format("opentype");
  font-weight: 800;
  font-style: italic;
}

/* Space Mono Font Family */
@font-face {
  font-family: "Space Mono";
  src: url("/super/dps/assets/fonts/space-mono/SpaceMono-Regular.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Space Mono";
  src: url("/super/dps/assets/fonts/space-mono/SpaceMono-Italic.ttf")
    format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Space Mono";
  src: url("/super/dps/assets/fonts/space-mono/SpaceMono-Bold.ttf")
    format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Space Mono";
  src: url("/super/dps/assets/fonts/space-mono/SpaceMono-BoldItalic.ttf")
    format("truetype");
  font-weight: 700;
  font-style: italic;
}

:root {
  --foreground-rgb: #000000;
  --background-color: #ffffff;
  --background-gradient: linear-gradient(91deg, rgba(179, 67, 203, 0.08) 0.98%, rgba(112, 149, 235, 0.08) 100%);
  --secondary-color: #888;

  --opacity-1: rgba(0, 0, 0, 0.01);
  --opacity-2: rgba(0, 0, 0, 0.02);
  --opacity-3: rgba(0, 0, 0, 0.03);
  --opacity-4: rgba(0, 0, 0, 0.04);
  --opacity-5: rgba(0, 0, 0, 0.05);
  --opacity-6: rgba(0, 0, 0, 0.06);
  --opacity-7: rgba(0, 0, 0, 0.07);
  --opacity-8: rgba(0, 0, 0, 0.08);
  --opacity-9: rgba(0, 0, 0, 0.09);
  --opacity-10: rgba(0, 0, 0, 0.10);
  --opacity-11: rgba(0, 0, 0, 0.11);
  --opacity-12: rgba(0, 0, 0, 0.12);

  --gradient-button-bg-color: linear-gradient(95deg, #B343CB -37.89%, #7095EB 127.94%);
  --gradient-button-border-color: rgba(255, 255, 255, 0.08);
  --primary-button-bg-color: #131315;
  --primary-button-fg-color: #ffffff;
  --primary-button-hover-color: #1a1a1c;
  --primary-button-active-color: #0a0a0b;
  --secondary-button-bg-color: transparent;
  --secondary-button-border-color: rgba(0, 0, 0, 0.24);
  --secondary-button-fg-color: #000000;
  --secondary-button-hover-bg-color: rgba(0, 0, 0, 0.05);
}

.proxima_nova {
  font-family: "Proxima Nova", sans-serif;
}

.space_mono {
  font-family: "Space Mono", sans-serif;
}

.public_sans {
  font-family: "Public Sans", sans-serif;
}

.space_grotesk {
  font-family: "Space Grotesk", sans-serif;
}

.plus_jakarta_sans {
  font-family: "Plus Jakarta", sans-serif;
}

.inter {
  font-family: "Inter", sans-serif;
}

.primary_color {
  color: var(--foreground-rgb);
}

.secondary_color {
  color: var(--secondary-color);
}

.bg_2 {
  background-color: var(--opacity-2);
}

.bg_4 {
  background-color: var(--opacity-4);
}

.bg_8 {
  background-color: var(--opacity-8);
}

.bg_gradient {
  background: var(--background-gradient);
}

.border_4 {
  border: 1px solid var(--opacity-4);
}

.border_8 {
  border: 1px solid var(--opacity-8);
}

.border_10 {
  border: 1px solid var(--opacity-10);
}

.border_12 {
  border: 1px solid var(--opacity-12);
}

.border_y {
  border-top: 1px solid var(--opacity-8);
  border-bottom: 1px solid var(--opacity-8);
}

.border_x {
  border-left: 1px solid var(--opacity-8);
  border-right: 1px solid var(--opacity-8);
}

.border_bottom {
  border-bottom: 1px solid var(--opacity-8);
}

.border_right {
  border-right: 1px solid var(--opacity-8);
}

.border_top {
  border-top: 1px solid var(--opacity-8);
}

.border_left {
  border-left: 1px solid var(--opacity-8);
}

.footer {
  padding: 40px;
}

.media_tab {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 24px;
  border: 1px solid var(--opacity-8);
  transition: background-color 0.4s ease-in-out;
}

.media_tab:hover {
  background-color: var(--opacity-6);
}

.page_number {
  display: flex;
  padding: 6px 8px;
  min-width: 36px;
  min-height: 36px;
  justify-content: center;
  align-items: center;
  color: var(--foreground-rgb);
  font-weight: 500;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.3s ease;
  border-radius: 24px;
}

.page_number:hover {
  background: var(--background-gradient);
  color: var(--foreground-rgb);
  opacity: 1;
}

.ellipsis {
  display: flex;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
  color: var(--foreground-rgb);
}

.agi_container {
  padding: 4px;
  border-radius: 12px;
  background: linear-gradient(95deg, rgba(179, 67, 203, 0.24) -37.89%, rgba(112, 149, 235, 0.24) 127.94%);
}

.agi_text {
  background: linear-gradient(95deg, #B343CB -37.89%, #7095EB 127.94%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.agi_banner {
  padding: 72px 40px;
  background: linear-gradient(90deg, rgba(179, 67, 203, 0.08) 0%, rgba(112, 149, 235, 0.08) 100%);
}

.gradient_medium,
.gradient_large {
  display: flex;
  flex-direction: row;
  border-radius: 8px;
  border: 1px solid var(--gradient-button-border-color);
  background: var(--gradient-button-bg-color);
  color: white ;
  font-family: "Proxima Nova", sans-serif;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease-in-out;
  gap: 4px;
  height: 34px;
  font-size: 14px;
}

.gradient_large {
  height: 48px;
  font-size: 18px;
  padding: 0 24px;
}

.gradient_medium {
  height: 40px;
  font-size: 16px;
  padding: 0 12px;
}

.gradient_small {
  height: 34px;
  font-size: 14px;
}

.gradient_extra_small {
  height: 26px;
  font-size: 14px;
}

.gradient_medium:disabled,
.gradient_large:disabled,
.gradient_small:disabled,
.gradient_extra_small:disabled {
  cursor: not-allowed;
  opacity: 0.2;
}

.gradient_medium:hover,
.gradient_large:hover,
.gradient_small:hover,
.gradient_extra_small:hover {
  opacity: 0.8;
}

.gradient_medium:active,
.gradient_large:active,
.gradient_small:active,
.gradient_extra_small:active {
  background: var(--gradient-button-bg-color);
}

.primary_large,
.primary_medium,
.primary_small {
  display: flex;
  flex-direction: row;
  border-radius: 8px;
  border: 1px solid var(--opacity-8);
  background: var(--primary-button-bg-color);
  color: var(--primary-button-fg-color);
  font-family: "Proxima Nova", sans-serif;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease-in-out;
}

.primary_large {
  height: 48px;
  font-size: 18px;
  padding: 0 24px;
}

.primary_medium {
  height: 40px;
  font-size: 16px;
  padding: 0 12px;
}

.primary_small {
  height: 34px;
  font-size: 14px;
}

.primary_extra_small {
  height: 26px;
  font-size: 14px;
}

.primary_large:disabled,
.primary_medium:disabled,
.primary_small:disabled,
.primary_extra_small:disabled {
  cursor: not-allowed;
  opacity: 0.2;
  background: var(--foreground-rgb);
  border: 1px solid var(--opacity-8);
  color: var(--background-color);
}

.primary_large:hover,
.primary_medium:hover,
.primary_small:hover,
.primary_extra_small:hover {
  background: var(--primary-button-hover-color);
}

.primary_large:active,
.primary_medium:active,
.primary_small:active,
.primary_extra_small:active {
  background: var(--primary-button-active-color);
}

.secondary_large,
.secondary_medium,
.secondary_small {
  display: flex;
  flex-direction: row;
  border-radius: 8px;
  box-shadow: none;
  border: 1px solid var(--opacity-8);
  background: var(--secondary-button-bg-color);
  color: var(--secondary-button-fg-color);
  font-family: "Proxima Nova", sans-serif;
  font-style: normal;
  font-weight: 400;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease-in-out;
}

.secondary_large {
  height: 48px;
  font-size: 18px;
  padding: 0 24px;
}

.secondary_medium {
  height: 40px;
  font-size: 16px;
  padding: 0 12px;
}

.secondary_small {
  height: 34px;
  font-size: 14px;
}

.secondary_extra_small {
  height: 26px;
  font-size: 14px;
}

.secondary_large:hover,
.secondary_medium:hover,
.secondary_small:hover,
.secondary_extra_small:hover {
  background: var(--secondary-button-hover-bg-color);
}

.secondary_large:active,
.secondary_medium:active,
.secondary_small:active,
.secondary_extra_small:active {
  background: var(--opacity-4);
}

.secondary_large:disabled,
.secondary_medium:disabled,
.secondary_small:disabled,
.secondary_extra_small:disabled {
  opacity: 0.32;
}