/* Local trial: uses the user's installed font, without copying font files.
   Before public deployment, connect the licensed Adobe Fonts web project. */
@font-face {
  font-family: "P5 Aktiv Local";
  src: local("Aktiv Grotesk Regular"), local("AktivGrotesk-Regular");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --color-page: #151515;
  --color-type: #e5e2da;
  --color-control: #8b8984;
  --color-control-active: #252525;
  --grain-opacity: .05;
  --font-word: "P5 Aktiv Local", "aktiv-grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-size-word: clamp(34px, calc(34px + 46 * (100vw - 402px) / 1038), 80px);
  --font-weight-word: 400;
  --line-height-word: 1.1;
  --letter-spacing-word: -.02em;
  --page-pad: clamp(16px, 5.5vw, 80px);
  --content-max: 1280px;
  --word-offset-y: -3svh;
  --control-inset: clamp(16px, 2.2vw, 32px);
  --control-size: 44px;
  --control-pad: 12px;
  --control-icon: 20px;
  --control-stroke: 1.2;
  --focus-offset: 2px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--color-page); }
.splash {
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--page-pad);
}
.grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  image-rendering: pixelated;
}
.word-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
  min-width: 0;
  transform: translateY(var(--word-offset-y));
}
.word {
  display: block;
  flex: 0 0 auto;
  color: var(--color-type);
  font-family: var(--font-word);
  font-size: var(--font-size-word);
  font-style: normal;
  font-weight: var(--font-weight-word);
  font-synthesis: none;
  letter-spacing: var(--letter-spacing-word);
  line-height: var(--line-height-word);
  white-space: nowrap;
  transform: scale(var(--word-scale, 1));
  transform-origin: center;
}
.pause {
  position: absolute;
  right: var(--control-inset);
  bottom: var(--control-inset);
  display: grid;
  place-items: center;
  width: var(--control-size);
  height: var(--control-size);
  border: 0;
  border-radius: 50%;
  padding: var(--control-pad);
  background: none;
  color: var(--color-control);
  cursor: pointer;
}
.pause:hover, .pause:focus-visible { color: var(--color-type); }
.pause:active { background: var(--color-control-active); }
.pause:focus-visible { outline: 1px solid currentColor; outline-offset: var(--focus-offset); }
.pause svg { width: var(--control-icon); height: var(--control-icon); fill: none; stroke: currentColor; stroke-width: var(--control-stroke); }
.pause .play-icon { display: none; }
.pause[aria-pressed="true"] .pause-icon { display: none; }
.pause[aria-pressed="true"] .play-icon { display: block; }