@charset "UTF-8";
@layer reset {
  html {
    color-scheme: light dark;
    font: clamp(1rem, 1rem + 0.5vw, 2rem)/1.4 system-ui, sans-serif;
    tab-size: 2;
    hanging-punctuation: first allow-end last;
    word-break: break-word;
    font-family: "Source Sans Pro", Calibri, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  }
  body {
    margin: 0;
    padding: 2rem;
  }
  @media (width < 500px) {
    body {
      padding: 1rem;
    }
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  h1,
  h2 {
    font-weight: 900;
    letter-spacing: -0.02rem;
  }
  h1,
  h2,
  h3 {
    line-height: 1.1;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
    margin-block-start: 0;
  }
  p,
  li,
  dd {
    text-wrap: pretty;
    max-inline-size: 88ch;
  }
  a {
    color: oklch(68% 0.17 228deg);
    text-underline-offset: 2px;
  }
  a:not(:is(:hover, :focus)) {
    text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    inset-block-end: -0.25em;
  }
  sup {
    inset-block-start: -0.5em;
  }
  ul,
  ol,
  dl {
    margin: 0;
    padding: 0;
    list-style: inside;
  }
  ul ul,
  ul ol,
  ul dl,
  ol ul,
  ol ol,
  ol dl,
  dl ul,
  dl ol,
  dl dl {
    padding-inline-start: 2ch;
  }
  img,
  video,
  iframe {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    border-style: none;
  }
  figure {
    inline-size: fit-content;
    margin-inline: auto;
  }
  figcaption {
    contain: inline-size;
    font-size: 90%;
  }
  input,
  select,
  textarea,
  button {
    font: inherit;
    /* FUTURE: appearance: base; */
  }
  label {
    display: block;
  }
  input:not(:where([type=submit],
  [type=checkbox],
  [type=radio],
  [type=button],
  [type=reset])) {
    inline-size: 100%;
  }
  button,
  input:where([type=submit],
  [type=reset],
  [type=button]) {
    background: CanvasText;
    color: Canvas;
    border: 1px solid transparent;
  }
  textarea {
    field-sizing: content;
    min-block-size: 5lh;
    inline-size: 100%;
    max-inline-size: 100%;
  }
  pre,
  code,
  kbd,
  samp {
    font-family: ui-monospace, SFMono-Regular, monospace;
  }
  svg {
    fill: currentColor;
  }
  [aria-disabled=true i],
  [disabled] {
    cursor: not-allowed;
  }
  [hidden] {
    display: none !important;
  }
  [disabled],
  label:has(input[disabled]) {
    opacity: 0.5;
  }
  [disabled] [disabled],
  label:has(input[disabled]) [disabled] {
    opacity: 1;
  }
  pre {
    white-space: pre-wrap;
    background: CanvasText;
    color: Canvas;
    padding: 1.5rem;
  }
  hr {
    border-style: solid;
    border-width: 1px 0 0;
    color: inherit;
    height: 0;
    overflow: visible;
    margin-block: 2.5rem;
  }
  :target {
    scroll-margin: 3rlh;
  }
  table {
    caption-side: bottom;
    border-collapse: collapse;
  }
  table td {
    font-size: 90%;
  }
  table td,
  table th {
    word-break: normal;
    border: 1px solid gray;
    padding: 0.5rem;
  }
  [role=region][aria-labelledby][tabindex] {
    overflow: auto;
  }
  caption {
    font-size: 90%;
  }
  .screenreader-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  :focus-visible {
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
    html {
      interpolate-size: allow-keywords;
    }
    html:focus-within {
      scroll-behavior: smooth;
    }
  }
}
.t-uppercase {
  text-transform: uppercase;
}

.u-center {
  text-align: center;
}

/* Faux outline for older browsers */
.t-outline {
  color: white; /* Unfortunately you can't use transparent here … */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Real outline for modern browsers */
@supports (text-stroke: 2px black) or (-webkit-text-stroke: 2px black) {
  .t-outline {
    color: transparent;
    -webkit-text-stroke: 4px white;
    text-stroke: 2px white;
    text-shadow: none;
    position: relative;
    user-select: none;
    background-color: transparent;
    filter: brightness(200%);
  }
  .t-outline.c-blue {
    -webkit-text-stroke: 4px #00a1de;
    text-stroke: 4px #00a1de;
  }
  .t-outline.c-purple {
    -webkit-text-stroke: 4px #bb29bb;
    text-stroke: 4px #bb29bb;
  }
  .t-outline:before {
    content: attr(data-text);
    position: absolute;
    color: transparent;
    filter: blur(0.04em);
    mix-blend-mode: difference;
  }
}
.neon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0 20px;
  font-size: 6em;
  color: #fff;
  text-shadow: 0 0 20px #d1a4e3;
}

.neon:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 20px;
  z-index: -1;
  color: #d1a4e3;
  filter: blur(15px);
}

.neon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #d1a4e3;
  z-index: -2;
  opacity: 0.5;
  filter: blur(40px);
}

body {
  background: linear-gradient(to top left, darkblue, #142636) 50% 50%/100% 100% no-repeat;
  margin: 0;
  padding: 0;
}

.splash-placeholder {
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
}