/* Compiled automatically by check, preview, dev, and push. Use complete class names. */
@import "tailwindcss";

.site {
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  transition: background-color 300ms ease, color 300ms ease;
}
.site-dark {
  background: #09090c;
  color: #f5f4f7;
}
.site-light {
  background: #f3f1ee;
  color: #17161a;
}

/* Flat surfaces for code and notes, so the glass is the only glass on the page. */
.code,
.panel {
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
}
.site-light .code,
.site-light .panel {
  background: rgb(255 255 255 / 0.7);
  box-shadow: inset 0 0 0 1px rgb(20 18 30 / 0.08);
}
.code {
  border-radius: 20px;
}
.code pre,
.code code {
  font-family: inherit;
}

.range {
  width: 100%;
  accent-color: currentColor;
}

/* The page the glass bends: drifting colour, fine lines, large type. */
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.scene-dark {
  background: #0d0c12;
}
.scene-light {
  background: #f7f4ef;
}
.scene-blob {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 9999px;
  filter: blur(42px);
  animation: scene-drift 18s ease-in-out infinite alternate;
}
.scene-blob-a {
  width: 48%;
  left: -8%;
  top: -14%;
  background: #ff4fa3;
}
.scene-blob-b {
  width: 42%;
  right: -6%;
  top: 6%;
  background: #4f7dff;
  animation-duration: 23s;
  animation-direction: alternate-reverse;
}
.scene-blob-c {
  width: 40%;
  left: 30%;
  bottom: -30%;
  background: #ffb52e;
  animation-duration: 27s;
}
.scene-light .scene-blob {
  opacity: 0.6;
}
.scene-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.5) 0 1.5px, transparent 1.5px 32px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.14) 0 1px, transparent 1px 32px);
}
.scene-light .scene-grid {
  background-image:
    repeating-linear-gradient(90deg, rgb(20 18 30 / 0.28) 0 1.5px, transparent 1.5px 32px),
    repeating-linear-gradient(0deg, rgb(20 18 30 / 0.08) 0 1px, transparent 1px 32px);
}
.scene-words {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6%;
  font-size: clamp(56px, 10vw, 128px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: rgb(255 255 255 / 0.94);
}
.scene-light .scene-words {
  color: #16141c;
}
@keyframes scene-drift {
  to {
    transform: translate(9%, 7%) scale(1.14);
  }
}

/* Menu contents fade and zoom; the glass under them materializes from script.
   The menu itself must not fade or scale, or the glass would vanish with it. */
.menu-content {
  animation: menu-content-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top right;
}
.menu-content-leaving {
  opacity: 0;
  scale: 0.97;
  transition: opacity 160ms ease, scale 160ms ease;
}
@keyframes menu-content-in {
  from {
    opacity: 0;
    scale: 0.96;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-blob,
  .menu-content {
    animation: none;
  }
}