:root { color-scheme: dark; }

@font-face {
  font-family: "Cascadia Mono";
  src: url("/fonts/CascadiaMono.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

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

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: "Cascadia Mono", ui-monospace, monospace;
  background: #08060d;
  color: #e8e8e8;
  text-align: center;
  padding: 2rem;
  overflow-x: hidden;
}

.art {
  font-family: "Cascadia Mono", ui-monospace, monospace;
  font-size: clamp(3px, 1.02vw, 11px);
  line-height: 1.15;
  white-space: pre;
  text-align: left;
  font-weight: 700;
  background: linear-gradient(
    120deg,
    #e8e8e8 0%, #a78bfa 50%, #e8e8e8 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  will-change: background-position;
  animation: shimmer 6s linear infinite;
}

@keyframes shimmer {
  to { background-position: -200% center; }
}

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

h1 { color: #e8e8e8; font-weight: 400; font-size: 1.15rem; max-width: 34rem; line-height: 1.6; }
p  { color: #e8e8e8; font-size: 1rem; max-width: 34rem; line-height: 1.6; }

a { color: #a78bfa; text-decoration: underline; }
a:hover { color: #c4b5fd; }

hr { border: none; border-top: 1px solid rgba(167, 139, 250, .3); width: 100%; max-width: 34rem; }

.dim { color: #7d7596; }
.label { color: #e8e8e8; }