@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("montserrat.woff2") format("woff2");
}
:root { color-scheme: light }
/* Layout: the mark is the page. It stands live on the right, the words sit quietly at the bottom left. */
:root {
  --bg: #eef3fb;
  --fg: #1d252c;
  --muted: #5a6573;
  --link: #2d55d6;
  --blue: #4979ff;
  --spark: #2d55d6;
  --aura: #c5d3ff;
  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #1d252c; --fg: #ffffff; --muted: #b6c0cc; --link: #a8bdff; --spark: #a8bdff; --aura: #2d55d6; color-scheme: dark }
}
:root[data-theme="dark"] { --bg: #1d252c; --fg: #ffffff; --muted: #b6c0cc; --link: #a8bdff; --spark: #a8bdff; --aura: #2d55d6; color-scheme: dark }

*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html, body { height: 100%; margin: 0 }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation }
.aura {
  position: fixed; left: 70%; top: 50%; width: min(78vmin, 760px); aspect-ratio: 1; margin: calc(min(78vmin, 760px) / -2) 0 0 calc(min(78vmin, 760px) / -2);
  border-radius: 50%; background: radial-gradient(closest-side, var(--aura), transparent); opacity: .75; pointer-events: none;
}
.still { position: fixed; left: 70%; top: 50%; height: 62vmin; transform: translate(-50%, -50%); fill: var(--blue); pointer-events: none }
.page {
  position: relative; min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 24px;
  padding-block: clamp(16px, 4vmin, 40px); padding-inline: clamp(0px, 3vw, 32px); pointer-events: none;
}
.page a { pointer-events: auto }
.logo { display: inline-block; line-height: 0 }
.logo svg { height: 36px; width: auto; display: block }
.logo .word { fill: var(--fg) }
.logo .mark { fill: var(--blue) }
.hero { align-self: end; display: grid; gap: 16px; min-width: 0 }
h1 { margin: 0; font-size: clamp(44px, 6.5vw, 96px); font-weight: 600; line-height: 1; letter-spacing: -.035em; text-wrap: balance }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px; font-weight: 500 }
.status { display: inline-flex; align-items: center; gap: 10px }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); flex: none }
#who { font-weight: 600 }
#state { min-width: 12ch; color: var(--muted); transition: opacity .25s ease }
@media (max-aspect-ratio: 105/100) {
  .aura { left: 50%; top: 36% }
  .still { left: 50%; top: 36%; height: auto; width: 76vw }
}
@media (prefers-reduced-motion: reduce) { #state { transition: none } }