:root {
  color-scheme: dark;
  font-family: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  background: #07111c;
  color: #f5f3ec;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: #f5f3ec;
  --muted: rgba(245, 243, 236, .72);
  --red: #b84b40;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { min-height: 100svh; overflow: hidden; }
button { font: inherit; }

.stage {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background: #07111c;
}
.slideshow, .shade { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.slide {
  position: absolute;
  inset: 0;
  background-image: var(--desktop-image);
  background-size: cover;
  background-position: center 53%;
  opacity: 0;
  transform: translateX(3.5%) scale(1.025);
  transition: opacity 1.9s cubic-bezier(.22,.61,.36,1), transform 9s cubic-bezier(.2,.65,.3,1);
  will-change: opacity, transform;
}
.slide.is-active { opacity: 1; transform: translateX(-1.5%) scale(1.055); }
.shade {
  z-index: -1;
  background: linear-gradient(90deg, rgba(4, 11, 19, .43), rgba(4, 11, 19, .26) 45%, rgba(4, 11, 19, .43)),
    linear-gradient(0deg, rgba(3, 9, 15, .60), transparent 37%, rgba(3, 9, 15, .18));
}
.intro {
  width: min(760px, calc(100% - 40px));
  padding: clamp(32px, 6vw, 64px) clamp(28px, 7vw, 78px) clamp(34px, 5vw, 54px);
  text-align: center;
  border: 1px solid rgba(245, 243, 236, .22);
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(7, 17, 28, .73), rgba(8, 18, 29, .49));
  box-shadow: 0 28px 100px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(15px) saturate(115%);
  backdrop-filter: blur(15px) saturate(115%);
}
.eyebrow, .domain, .status, .motion-toggle, .frame-mark {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-weight: 400;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: rgba(245, 243, 236, .75);
  font-size: 12px;
  letter-spacing: .22em;
}
.marker { width: 6px; height: 6px; background: var(--red); transform: rotate(45deg); }
h1 {
  margin: 27px 0 15px;
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: .035em;
  text-wrap: balance;
}
.title-dash { color: #d16b5c; font-weight: 500; }
.mobile-break { display: none; }
.story { margin: 0; color: var(--muted); font-size: clamp(16px, 2vw, 19px); font-weight: 400; letter-spacing: .015em; }
.signature {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 17px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(245, 243, 236, .16);
}
.domain { color: var(--ink); font-size: 12px; letter-spacing: .16em; }
.status { color: rgba(245, 243, 236, .62); font-size: 12px; letter-spacing: .01em; }
.motion-toggle {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  color: rgba(255,255,255,.84);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  background: rgba(4, 11, 19, .32);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .13em;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.motion-toggle:hover { background: rgba(4, 11, 19, .62); }
.motion-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.motion-icon { display: flex; gap: 3px; width: 10px; height: 12px; align-items: center; }
.motion-icon i { display: block; width: 2px; height: 10px; background: var(--ink); }
.motion-toggle[aria-pressed="true"] .motion-icon i:first-child { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--ink); background: transparent; }
.motion-toggle[aria-pressed="true"] .motion-icon i:last-child { display: none; }
.frame-mark { position: absolute; left: max(26px, env(safe-area-inset-left)); bottom: max(28px, env(safe-area-inset-bottom)); color: rgba(255,255,255,.68); font-size: 11px; letter-spacing: .16em; }

@media (max-width: 600px) {
  .slide { background-image: var(--mobile-image); background-position: var(--mobile-position, center 52%); }
  .slide:nth-child(2) { --mobile-position: center 54%; }
  .slide:nth-child(5) { --mobile-position: center 55%; }
  .intro { width: calc(100% - 32px); padding: 35px 21px 30px; }
  .eyebrow { font-size: 10px; letter-spacing: .2em; }
  h1 { margin-top: 22px; font-size: clamp(27px, 8vw, 38px); letter-spacing: .015em; }
  .mobile-break { display: initial; }
  .story { max-width: 290px; margin-inline: auto; line-height: 1.6; }
  .signature { flex-direction: column; gap: 9px; margin-top: 27px; padding-top: 19px; }
  .frame-mark { bottom: max(29px, env(safe-area-inset-bottom)); }
  .motion-label { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .slide { transition: none; transform: none; }
  .slide.is-active { transform: none; }
}