/* Just the name on the dashboard's dark background. The full stop after it is the way in. */
:root {
  color-scheme: dark;
  --bg: #09090b;
  --ink: #f4f4f5;
  --blue: #5b8cff;
  --logo: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html { height: 100%; scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0; height: 100%; display: grid; place-items: center;
  background: var(--bg); color: var(--ink); font-family: var(--logo); -webkit-font-smoothing: antialiased;
}
h1 {
  margin: 0; font-weight: 700; line-height: 1; text-align: center;
  font-size: clamp(2.6rem, 11vw, 7.5rem); letter-spacing: -0.04em;
}
h1 span { color: var(--blue); }

/* Looks like ordinary punctuation. It lights up when you point at it, and is still reachable with the keyboard. */
.dot { position: relative; color: var(--blue); text-decoration: none; transition: color .2s ease, text-shadow .2s ease; }
.dot::after { content: ""; position: absolute; top: 40%; bottom: -.1em; left: 0; right: -.3em; } /* a bigger target for fingers */
.dot:hover, .dot:focus-visible { color: var(--ink); text-shadow: 0 0 .35em rgba(91, 140, 255, .7); }
.dot:focus-visible { outline: 2px solid var(--blue); outline-offset: .06em; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .dot { transition: none; } }

/* Small, quiet links along the bottom edge. */
.legal {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: .5rem;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); font: 400 12px/1 "Inter", system-ui, sans-serif; color: #55555e;
}
.legal a { color: #77777f; text-decoration: none; padding: 6px 4px; transition: color .2s ease; }
.legal a:hover, .legal a:focus-visible { color: var(--ink); }
.legal a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }