@font-face {
  font-family: "General Sans";
  src: url("/fonts/general-sans/general-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/fonts/general-sans/general-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/fonts/general-sans/general-sans-600.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Variable";
  src: url("/fonts/fraunces/fraunces-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Variable";
  src: url("/fonts/fraunces/fraunces-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Variable";
  src: url("/fonts/fraunces/fraunces-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces/fraunces-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces/fraunces-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces/fraunces-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.ls-site-theme {
  --background: oklch(.095 .028 302);
  --foreground: oklch(.985 .009 305);
  --surface: oklch(.137 .044 298);
  --surface-elevated: oklch(.176 .057 296);
  --card: oklch(.148 .046 297);
  --card-foreground: oklch(.985 .009 305);
  --muted: oklch(.198 .044 297);
  --muted-foreground: oklch(.775 .038 304);
  --border: oklch(.84 .11 310 / 16%);
  --input: oklch(.84 .11 310 / 20%);
  --brand-purple: #7517f3;
  --brand-pink: #ff4ced;
  --brand-lilac: oklch(.78 .18 320);
  --public-route-rule: rgb(235 214 241 / .14);
  --public-route-rule-strong: rgb(235 214 241 / .22);
  --public-route-panel: rgb(15 6 23 / .62);
  --public-route-panel-raised: rgb(22 8 32 / .78);
  --public-route-panel-soft: rgb(13 5 20 / .46);
  --public-route-copy: rgb(237 221 242 / .72);
  --public-route-shadow: 0 30px 84px -66px rgb(0 0 0 / .94);
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: clip;
  background-color: #07030d;
  color: var(--foreground);
  font-family: "General Sans", Inter, system-ui, sans-serif;
}
.ls-site-theme::after {
  position: fixed;
  z-index: 40;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .035;
  background-image:
    radial-gradient(circle at 18% 24%, rgb(255 255 255 / .85) 0 .45px, transparent .7px),
    radial-gradient(circle at 72% 68%, rgb(255 255 255 / .65) 0 .4px, transparent .7px);
  background-position: 0 0, 3px 5px;
  background-size: 9px 11px, 13px 15px;
}
.ls-site-ambient {
  position: fixed;
  z-index: -1;
  inset: 0;
  contain: strict;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(ellipse at 8% -3%, rgb(255 76 237 / .14), transparent 34%),
    radial-gradient(ellipse at 98% 24%, rgb(117 23 243 / .16), transparent 38%),
    radial-gradient(ellipse at 44% 96%, rgb(71 44 240 / .07), transparent 44%),
    linear-gradient(180deg, #12051c 0%, #07030d 42%, #090410 100%);
}
.ls-site-theme .ls-surface {
  border: 1px solid var(--public-route-rule);
  border-radius: clamp(1.15rem, 2.5vw, 1.75rem);
  background: var(--public-route-panel);
  box-shadow: var(--public-route-shadow);
}
.ls-site-theme .ls-btn {
  min-height: 3.25rem;
  border-radius: 999px;
  color: #fff;
  background-color: var(--brand-purple);
  background-image:
    linear-gradient(rgb(14 8 33 / .36), rgb(14 8 33 / .36)),
    linear-gradient(120deg, #ff4ced 0%, #7517f3 55%, #472cf0 100%);
  box-shadow: 0 10px 32px -14px rgb(117 23 243 / .65);
  font-family: "General Sans", Inter, system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.ls-site-theme .ls-btn:hover:not(:disabled) {
  transform: scale(1.03);
  box-shadow: 0 12px 36px -12px rgb(117 23 243 / .7);
}
.ls-site-theme .ls-btn:focus-visible {
  outline: 2px solid var(--brand-lilac);
  outline-offset: 3px;
}
@media (max-width: 639px) {
  .ls-site-theme .ls-surface { border-radius: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-site-theme .ls-btn { transition: none; }
  .ls-site-theme .ls-btn:hover:not(:disabled) { transform: none; }
}
