:root {
  --accent: #00FFDE;
  --accent-2: #7F96DA;
  --accent-3: #8FB0FF;
  --danger: #FF918D;
  --ink: #EEEEEE;
  --muted: #9A9A9A;
  --panel: #141414;
  --line: #262626;
  --bg: #000000;
  --chart-pink: #C98FA8;
  --chart-sand: #D9D4A0;
  --chart-grey: #8A8A8A;
  --amber: #E8B14D;
  --font-sans: 'Barlow', Arial, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow: hidden;
  overscroll-behavior: none;
}

button {
  font-family: inherit;
}

[hidden] {
  display: none !important;
}

.shine {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 18%, var(--accent-3) 34%, var(--accent) 50%, var(--accent) 68%, #B6FFF4 84%, var(--accent) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shine 9s linear infinite;
  padding-right: .12em;
  margin-right: -.12em;
}

@keyframes shine {
  from { background-position: 0% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shine {
    animation: none;
  }
}