:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: #161616;
  background: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow-x: clip; }
main { display: grid; place-items: center; padding: 64px 24px; text-align: center; }
h1 { margin: 0; font-size: clamp(48px, 13vw, 240px); font-weight: 700; line-height: .98; letter-spacing: -.055em; }
.scramble-title { position: relative; }
.title-original { display: inline-block; }
.title-animation { position: absolute; top: 0; left: 50%; width: max-content; white-space: nowrap; pointer-events: none; transform: translateX(-50%); }
.is-scrambling .title-original { opacity: 0; }
.intro p { margin: 24px 0 0; font-size: clamp(18px, 2.1666667vw, 40px); line-height: 1.55; color: rgb(22 22 22 / 70%); }
.intro strong { font-weight: 700; }
.coming-soon { font-size: calc(clamp(18px, 2.1666667vw, 40px) - 3px); }
.interactive-word { display: inline-block; white-space: nowrap; }
.interactive-letter { display: inline-block; color: inherit; transition: transform 250ms ease; }
.interactive-accessible-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .interactive-letter { transition: none; }
}
footer { padding: 24px; text-align: center; font-size: 14px; line-height: 1.7; color: #161616; }
a { color: inherit; text-decoration-color: #D366AC; text-underline-offset: .2em; transition: transform 250ms ease; }
a:focus-visible { outline: 2px solid #161616; outline-offset: 4px; border-radius: 2px; }
a:hover { text-decoration-thickness: 2px; transform: scale(1.05); }

.accent { color: #D366AC; }
.footer-item { display: inline-block; }

body { isolation: isolate; }
.background, .grain { position: fixed; inset: 0; pointer-events: none; }
.background {
  z-index: -2;
  background: radial-gradient(ellipse at 20% 30%, #bfdbfe68, transparent 45%),
    radial-gradient(ellipse at 75% 25%, #e9d5ff68, transparent 45%),
    radial-gradient(ellipse at 65% 75%, #fecdd368, transparent 45%),
    radial-gradient(ellipse at 20% 80%, #bbf7d068, transparent 45%),
    radial-gradient(ellipse at 50% 50%, #e0e7ff68, transparent 45%), #FAFBFD;
}
.background canvas { display: block; width: 100%; height: 100%; opacity: .7452; }
.background.is-ready { background: #FAFBFD; }
.grain { z-index: -1; opacity: .035; background: url('/grain.svg') repeat; }