@font-face {
  font-family: 'TWK Lausanne';
  src: url('/fonts/TWKLausanne-550.woff2') format('woff2');
  font-style: normal;
  font-weight: 550;
  font-display: swap;
}
:root {
  color-scheme: light;
  --canvas: #fff;
  --ink: #000;
  --accent: #4d7de6;
  --tracking-display: -0.015em;
}
* { box-sizing: border-box; }
html { background: var(--canvas); color: var(--ink); }
body { margin: 0; isolation: isolate; }
.ambient-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.brand {
  position: absolute;
  top: clamp(16px, 3vw, 44px);
  left: clamp(16px, 3vw, 44px);
}
.brand img { display: block; width: 80px; height: 73px; }
main {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 96px);
}
h1 {
  margin: 0;
  width: 100%;
  font-family: 'TWK Lausanne', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(34.96px, 5.888vw, 103.04px);
  font-weight: 550;
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  text-align: center;
}
h1 > .line {
  display: block;
  white-space: nowrap;
  animation: reveal 350ms ease-out both;
}
h1 > .line + .line { margin-top: 0.1em; }
h1 > .line:nth-child(1) { animation-delay: 100ms; }
h1 > .line:nth-child(2) { animation-delay: 190ms; }
h1 > .line:nth-child(3) { animation-delay: 280ms; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.word-slot {
  position: relative;
  display: inline-grid;
  vertical-align: baseline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  cursor: pointer;
}
.word-slot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 2px;
}
.word-measure { visibility: hidden; }
.word-window {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.word {
  position: absolute;
  inset: 0;
  text-align: center;
  opacity: 0;
}
.word:first-child { opacity: 1; }
@media (max-width: 600px) {
  h1 { font-size: clamp(18.4px, 7.176vw, 43.056px); }
}
@media (prefers-reduced-motion: reduce) {
  h1 > .line { animation: none; }
  .word-slot { cursor: default; }
}