:root {
  --bg: #0a0a0a;
  --fg: #ededed;
  --dim: #a3a3a3;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--bg); color: var(--fg); font-family: var(--mono); }
body { overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.final {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.75rem; padding: 2rem 1.5rem; text-align: center;
}
.mark { font-size: clamp(2.25rem, 10vw, 6.5rem); font-weight: 800; letter-spacing: .18em; padding-left: .18em; }
.tagline {
  color: var(--dim); font-size: .8rem; letter-spacing: .32em; padding-left: .32em; text-transform: uppercase;
  text-shadow: 0 0 6px var(--bg), 0 0 12px var(--bg), 0 0 18px var(--bg);
}
.cta {
  position: fixed; z-index: 2;
  right: max(1rem, calc(env(safe-area-inset-right) + .5rem));
  bottom: max(1rem, calc(env(safe-area-inset-bottom) + .5rem));
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: .5rem .6rem;
  color: #8f8f8f; font: inherit; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .55em;
  text-decoration-color: rgba(237, 237, 237, .22);
  text-shadow: 0 0 6px var(--bg), 0 0 12px var(--bg);
  transition: color .25s, text-decoration-color .25s, opacity .9s ease;
}
.cta:hover, .cta:focus-visible { color: var(--fg); text-decoration-color: rgba(237, 237, 237, .8); }
.cta:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }

/* JS on: the ASCII canvas draws the wordmark; the HTML block is placed under it and fades in. */
.js .final {
  position: fixed; left: 0; right: 0; top: var(--top, 62%); min-height: 0; padding: 0 1.5rem;
  justify-content: flex-start; gap: 1.5rem;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .9s ease, transform .9s ease;
}
.js .cta { opacity: 0; visibility: hidden; }
.js.ready .final { opacity: 1; visibility: visible; transform: none; }
.js.ready .cta { opacity: 1; visibility: visible; }
.js .mark {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .js .final, .cta { transition: none; transform: none; }
}