@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/site/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/site/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn text";
  src: url("/static/fonts/site/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: optional;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: optional;
}
@font-face {
  font-family: "Vazirmatn fallback";
  src: local("Segoe UI"), local("SegoeUI"), local("Tahoma"),
    local("Noto Sans Arabic"), local("NotoSansArabic-Regular"),
    local("Noto Sans Arabic UI"), local("NotoSansArabicUI-Regular"),
    local("Noto Naskh Arabic"), local("NotoNaskhArabic-Regular"),
    local("Noto Naskh Arabic UI"), local("NotoNaskhArabicUI-Regular"),
    local("Geeza Pro"), local("GeezaPro"), local("Arial"), local("ArialMT");
  ascent-override: 102.54%;
  descent-override: 53.71%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Vazirmatn fallback narrow";
  src: local("DejaVu Sans"), local("DejaVuSans");
  size-adjust: 88%;
  ascent-override: 116.52%;
  descent-override: 61.03%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Wordmark fallback";
  src: local("Consolas"), local("Menlo-Regular"), local("Menlo"),
    local("DejaVu Sans Mono"), local("DejaVuSansMono"), local("Roboto Mono"),
    local("Droid Sans Mono"), local("Courier New"), local("CourierNewPSMT");
  ascent-override: 107%;
  descent-override: 37.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jost";
  src: url("/static/fonts/Jost-Wordmark.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
:root {
  --bg: oklch(0.1448 0 0);
  --fg: oklch(0.97 0 0);
  --muted: oklch(0.725 0 0);
  --faint: oklch(0.6 0 0);
  --raised: oklch(0.221 0 0);
  --hover: oklch(0.256 0 0);
  --border-lit: oklch(0.53 0 0);
  --line: oklch(0.34 0 0);
  --silver: #c8ccd0;
  --gold: #ffd700;
  --metal-ink: oklch(0.13 0 0);
  --glint: #fff4be;
  --halo: #ffb81c;
  --font-fa: "Vazirmatn", "Vazirmatn fallback", "Vazirmatn fallback narrow", system-ui, sans-serif;
  --font-la: "IBM Plex Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --metal-shift: 900ms;
  --loop: 4s;
  --m: clamp(20px, 5vw, 72px);
  --band: clamp(100px, 14vw, 200px);
  --g: clamp(32px, 4vw, 72px);
  --row: clamp(28px, 6vh, 72px);
  --button: 0px;
  --run: 56px;
  --t-lead: clamp(38px, 10px + 9.4vw, 52px);
  --t-sub: clamp(16px, 9.6px + 2vw, 18px);
  --t-small: 15px;
  color-scheme: dark;
}
@media (min-width: 640px) {
  :root {
    --t-lead: clamp(52px, 28px + 3.1vw, 76px);
    --t-sub: clamp(18px, 14px + 0.5vw, 21.5px);
    --t-small: clamp(15.5px, 14px + 0.15vw, 16.5px);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-fa);
  font-size: 16px;
  line-height: 1.9;
  --brand: clamp(22px, 15px + 1.2vw, 32px);
}
a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 6px;
}
::selection { background: var(--gold); color: var(--metal-ink); }
.lead .gold::selection { -webkit-text-fill-color: var(--metal-ink); }
.top {
  height: calc(var(--brand) + 58px);
  padding: 24px var(--m) 0;
  direction: ltr;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--brand) * 0.42);
  height: calc(var(--brand) * 1.1 + 8px);
  color: var(--silver);
  text-decoration: none;
}
.brand svg {
  width: calc(var(--brand) * 1.1);
  height: calc(var(--brand) * 1.1);
  margin-left: calc((17px - var(--brand) * 1.1) * 0.139);
  flex: none;
}
.brand svg path {
  vector-effect: non-scaling-stroke;
  stroke-width: calc(var(--brand) * 0.064);
}
.wordmark,
.name {
  --font-la: "IBM Plex Mono", "Wordmark fallback", ui-monospace, monospace;
  font-family: "Jost", var(--font-la);
  font-weight: 500;
  direction: ltr;
}
.wordmark {
  display: inline-block;
  width: 2.66em;
  font-size: var(--brand);
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  color: var(--fg);
}
main { flex: 1; }
.hero {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "lead" "sub" "more" "crossing" "get";
  padding: clamp(16px, 5vh, 104px) var(--m) clamp(32px, 6vh, 88px);
  overflow-x: clip;
}
.lead {
  grid-area: lead;
  position: relative;
  z-index: 1;
  width: min(100%, 6.4em);
  min-height: 2.6em;
  margin: 0;
  margin-inline-start: -0.06em;
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}
.gold { color: var(--gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lead .gold {
    background: linear-gradient(180deg, var(--glint) 31%,
      color-mix(in oklch, var(--glint) 40%, var(--gold)) 42%, var(--gold) 57%, var(--gold) 70%,
      color-mix(in oklch, var(--gold) 65%, var(--halo)) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.lead .gold {
  filter: drop-shadow(0 0 max(1.5px, 0.04em) color-mix(in oklch, var(--halo) 55%, transparent))
    drop-shadow(0 0 0.3em color-mix(in oklch, var(--halo) 28%, transparent));
}
.sub,
.more {
  position: relative;
  z-index: 1;
  text-wrap: pretty;
}
.sub > span,
.more > span { display: block; }
.kept { white-space: nowrap; }
.more > span + span { width: min(100%, 16em); }
.sub {
  grid-area: sub;
  width: min(100%, 18.5em);
  min-height: calc(4 * 1.8em);
  margin: calc(0.38 * var(--t-lead)) 0 0;
  color: var(--muted);
  font-size: min(var(--t-sub), (100vw - 2 * var(--m)) / 17.3);
  line-height: 1.8;
}
.more {
  grid-area: more;
  width: min(100%, 19.6em);
  min-height: calc(4 * 1.8em);
  margin: 10px 0 0;
  color: var(--faint);
  font-size: min(var(--t-small), (100vw - 2 * var(--m)) / 20.1);
  line-height: 1.8;
}
.crossing {
  --name: min(max(84px, 21vw), 150px, 100vw / 2.7);
  grid-area: crossing;
  position: relative;
  height: var(--band);
  margin: 22px calc(-1 * var(--m)) 22px;
}
.name {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--m);
  display: flex;
  align-items: center;
  width: calc(2.55em + 2px);
  margin: 0;
  padding-left: 2px;
  font-size: var(--name);
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--silver);
}
@supports (-webkit-text-stroke: 1px) {
  .name {
    color: transparent;
    -webkit-text-stroke: 1.25px oklch(0.578 0.0044 248);
  }
}
.route {
  --node: 0px;
  --split: calc(var(--m) + 2px + 1.24 * var(--name));
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.route.wide { display: none; }
.defs { position: absolute; width: 0; height: 0; }
.layer,
.runs { position: absolute; inset: 0; }
.runs { overflow: hidden; }
.lane {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lane.l { left: 0; width: calc(var(--split) - var(--node) / 2); }
.lane.r { right: 0; width: calc(100% - var(--split) - var(--node) / 2); }
.glow {
  position: absolute;
  top: -22%;
  bottom: -22%;
  left: calc(var(--split) - 44%);
  width: 88%;
  animation: rise 1.2s var(--ease-out) 1.1s backwards;
}
.glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in oklch, var(--halo) 10%, transparent) 0%,
    color-mix(in oklch, var(--halo) 5.5%, transparent) 30%,
    color-mix(in oklch, var(--halo) 2.2%, transparent) 60%,
    color-mix(in oklch, var(--halo) 0.7%, transparent) 82%,
    transparent 100%);
  animation: breathe calc(2 * var(--loop)) var(--ease-in-out) infinite alternate;
}
.halo { stroke-width: 7px; transition: stroke var(--metal-shift) var(--ease-in-out), opacity var(--metal-shift) var(--ease-in-out); }
.h-gold { stroke: var(--halo); opacity: 0.17; }
.h-silver { stroke: var(--halo); opacity: 0; }
.core { stroke-width: 1.5px; transition: stroke var(--metal-shift) var(--ease-in-out); }
.c-gold { stroke: var(--gold); }
.c-silver { stroke: var(--silver); }
.thread { stroke-width: 1.25px; }
.route stop { transition: stop-color var(--metal-shift) var(--ease-in-out); }
.node { stroke-width: 5px; stroke: var(--silver); transition: stroke var(--metal-shift) var(--ease-in-out); }
.n-vasl { stroke: var(--gold); }
.turn {
  transform-origin: 50% 50%;
  animation: turn var(--loop) var(--ease-in-out) infinite alternate;
}
.t2 { animation-delay: calc(-0.5 * var(--loop)); }
.w-gold,
.w-silver { stroke-width: 1px; transition: stroke var(--metal-shift) var(--ease-in-out); }
.w-gold { stroke: var(--gold); opacity: 0.62; }
.w-silver { stroke: var(--silver); opacity: 0.5; }
.window {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 150%;
  -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 calc(33.3333% - var(--run)),
    #000 calc(33.3333% - var(--run) / 2), transparent 33.3333%);
  mask-image: repeating-linear-gradient(90deg, transparent 0 calc(33.3333% - var(--run)),
    #000 calc(33.3333% - var(--run) / 2), transparent 33.3333%);
  animation: slide var(--loop) linear infinite reverse;
}
.pane {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% / 1.5);
  animation: counter var(--loop) linear infinite reverse;
}
.r-silver,
.r-silver .pane { animation-delay: calc(-0.5 * var(--loop)); }
.run { stroke: var(--glint); stroke-width: 2.4px; transition: stroke var(--metal-shift) var(--ease-in-out), opacity var(--metal-shift) var(--ease-in-out); }
.run.soft { stroke-width: 9px; opacity: 0.22; }
.r-silver .run { stroke: #ffffff; opacity: 0.8; }
.r-silver .run.soft { opacity: 0.12; }
.sweep {
  position: absolute;
  inset: -4px 0;
  overflow: hidden;
}
.sweep i {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: calc(100% + 180px);
  background: linear-gradient(to left, var(--bg) calc(100% - 180px), transparent);
  transform: translateX(100%);
  animation: sweep 1.7s var(--ease-in-out) 0.25s backwards;
}
.sweep i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 150px;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in oklch, var(--glint) 95%, transparent) 0,
    color-mix(in oklch, var(--halo) 38%, transparent) 22%,
    transparent 68%);
  opacity: 0;
  animation: spark 1.7s linear 0.25s backwards;
}
.get {
  grid-area: get;
  position: relative;
  z-index: 1;
}
.download {
  --w: 100vw;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 0 24px;
  border-radius: 12px;
  background:
    radial-gradient(56px 34px at 0 50%, color-mix(in oklch, var(--silver) 80%, transparent), transparent),
    radial-gradient(56px 34px at 100% 50%, color-mix(in oklch, var(--silver) 80%, transparent), transparent),
    linear-gradient(180deg, oklch(0.52 0 0), oklch(0.32 0 0) 48%, oklch(0.36 0 0));
  color: var(--fg);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-spring);
}
@supports (width: 1cqi) {
  .download { --w: calc(100cqi + 2 * var(--m)); }
}
.download::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  border-radius: inherit;
  box-shadow: 0 0 30px -6px color-mix(in oklch, var(--gold) 50%, transparent);
  opacity: 0;
  transition: opacity var(--metal-shift) var(--ease-in-out);
}
.rim,
.glass,
.ports {
  position: absolute;
  pointer-events: none;
}
.rim {
  inset: 0;
  z-index: -3;
  border-radius: inherit;
  overflow: hidden;
  transition: opacity var(--t-base) var(--ease-in-out);
}
.rim::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72px 40px at 0 50%, var(--gold), transparent),
    radial-gradient(72px 40px at 100% 50%, var(--gold), transparent),
    linear-gradient(180deg, color-mix(in oklch, var(--gold) 78%, transparent),
      color-mix(in oklch, var(--gold) 42%, transparent) 50%, color-mix(in oklch, var(--gold) 52%, transparent));
  opacity: 0;
  transition: opacity var(--metal-shift) var(--ease-in-out);
}
.flow,
.wash {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + var(--m) - var(--w));
  width: calc(1.5 * var(--w));
  animation: slide var(--loop) linear infinite reverse, rise 0.8s var(--ease-out) 1s backwards;
  transition: opacity var(--t-base) var(--ease-in-out);
}
.late { animation-delay: calc(-0.5 * var(--loop)), 1s; }
.flow {
  background: repeating-linear-gradient(90deg, transparent 0 calc(33.3333% - var(--run)),
    var(--glint) calc(33.3333% - var(--run) / 2), transparent 33.3333%);
}
.flow.late {
  background: repeating-linear-gradient(90deg, transparent 0 calc(33.3333% - var(--run)),
    #fff calc(33.3333% - var(--run) / 2), transparent 33.3333%);
  opacity: 0.8;
}
.glass {
  inset: 1px;
  z-index: -2;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(180deg, oklch(0.228 0 0), oklch(0.176 0 0));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06), inset 0 -1px 0 oklch(0 0 0 / 0.3);
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(0.262 0 0), oklch(0.2 0 0));
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-in-out);
}
.wash {
  left: calc(100% + 1px + var(--m) - var(--w));
  background: repeating-linear-gradient(90deg, transparent 0 calc(33.3333% - 1.75 * var(--run)),
    color-mix(in oklch, var(--glint) 46%, transparent) calc(33.3333% - var(--run) / 2), transparent 33.3333%);
  -webkit-mask-image: linear-gradient(180deg, #000, rgb(0 0 0 / 0.3) 5px, transparent 14px,
    transparent calc(100% - 14px), rgb(0 0 0 / 0.3) calc(100% - 5px), #000);
  mask-image: linear-gradient(180deg, #000, rgb(0 0 0 / 0.3) 5px, transparent 14px,
    transparent calc(100% - 14px), rgb(0 0 0 / 0.3) calc(100% - 5px), #000);
  opacity: 0.8;
}
.wash.late { opacity: 0.6; }
.pass {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -32%;
  width: 32%;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--glint) 9%, transparent) 45%,
    color-mix(in oklch, var(--glint) 17%, transparent) 62%, transparent);
  transform: translateX(0) skewX(-16deg);
  transition: transform 0s;
}
.ports {
  display: none;
  top: 50%;
  left: -3px;
  right: -3px;
  height: 6px;
  margin-top: -3px;
  z-index: -1;
  transition: transform var(--t-fast) var(--ease-spring);
}
.ports::before,
.ports::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 3px at 3px 50%, var(--silver) 2.4px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 3px) 50%, var(--silver) 2.4px, transparent 3px);
}
.ports::after {
  background:
    radial-gradient(circle 3px at 3px 50%, var(--gold) 2.4px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 3px) 50%, var(--gold) 2.4px, transparent 3px);
  opacity: 0;
  transition: opacity var(--metal-shift) var(--ease-in-out);
}
.download .icon { flex: none; order: 1; width: 28px; height: 28px; }
.seat {
  position: relative;
  order: 1;
  display: flex;
  flex: none;
}
.seat::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--gold) 15%, transparent),
    color-mix(in oklch, var(--gold) 5%, transparent) 55%, transparent);
  opacity: 0.85;
  transition: opacity var(--metal-shift) var(--ease-in-out);
}
.download:focus-visible::before,
.download:focus-visible .rim::before,
.download:focus-visible .ports::after,
.download:focus-visible .glass::before,
.download:focus-visible .flow.late,
.download:focus-visible .wash,
.download:focus-visible .seat::before { opacity: 1; }
@media (hover: hover) {
  .download:hover::before,
  .download:hover .rim::before,
  .download:hover .ports::after,
  .download:hover .glass::before,
  .download:hover .flow.late,
  .download:hover .wash,
  .download:hover .seat::before { opacity: 1; }
  .download:hover .pass {
    transform: translateX(440%) skewX(-16deg);
    transition: transform 1.1s var(--ease-in-out);
  }
}
.download:active {
  transform: scale(0.98);
  transition-duration: 60ms;
}
.download:active::before,
.download:active .glass::before { opacity: 0; transition-duration: 60ms; }
.download:active .rim,
.download:active .wash { opacity: 0.45; transition-duration: 60ms; }
.download:active .ports {
  transform: scale(calc(1 / 0.98));
  transition-duration: 60ms;
}
.download:focus-visible { outline-color: var(--gold); }
.facts {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.download + .facts {
  container-type: inline-size;
  margin: 14px -10px 0;
  text-align: center;
}
.facts span { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.sep {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-inline: 0.45em;
  vertical-align: -0.12em;
  background: linear-gradient(180deg, transparent, var(--border-lit) 28%, var(--border-lit) 72%, transparent);
}
@container (max-width: 22.5em) {
  .facts span { display: block; }
  .sep { display: none; }
}
.empty .facts { margin: 0; padding-inline-start: 2px; font-size: 15.5px; line-height: 1.9; text-wrap: balance; }
.hero:has(.download:focus-visible) .c-silver,
.hero:has(.download:focus-visible) .w-silver,
.hero:has(.download:focus-visible) .node { stroke: var(--gold); }
.hero:has(.download:focus-visible) .h-silver { opacity: 0.17; }
.hero:has(.download:focus-visible) .h-gold { opacity: 0.26; }
.hero:has(.download:focus-visible) .r-silver .run { stroke: var(--glint); opacity: 1; }
.hero:has(.download:focus-visible) .r-silver .run.soft { opacity: 0.22; }
.hero:has(.download:focus-visible) .route stop { stop-color: var(--gold); }
@media (hover: hover) {
  .hero:has(.download:hover) .c-silver,
  .hero:has(.download:hover) .w-silver,
  .hero:has(.download:hover) .node { stroke: var(--gold); }
  .hero:has(.download:hover) .h-silver { opacity: 0.17; }
  .hero:has(.download:hover) .h-gold { opacity: 0.26; }
  .hero:has(.download:hover) .r-silver .run { stroke: var(--glint); opacity: 1; }
  .hero:has(.download:hover) .r-silver .run.soft { opacity: 0.22; }
  .hero:has(.download:hover) .route stop { stop-color: var(--gold); }
}
@media (max-width: 639.98px) {
  .late { display: none; }
}
@media (min-width: 960px) {
  .download {
    min-height: 64px;
    font-size: 19px;
    background:
      radial-gradient(22px 22px at 0 50%, color-mix(in oklch, var(--silver) 85%, transparent), transparent),
      radial-gradient(22px 22px at 100% 50%, color-mix(in oklch, var(--silver) 85%, transparent), transparent),
      radial-gradient(60px 60px at 0 50%, color-mix(in oklch, var(--gold) 72%, transparent), transparent),
      radial-gradient(60px 60px at 100% 50%, color-mix(in oklch, var(--gold) 72%, transparent), transparent),
      linear-gradient(180deg, oklch(0.52 0 0), oklch(0.32 0 0) 48%, oklch(0.36 0 0));
  }
  .flow,
  .wash { left: calc(50% - var(--w) / 2); }
  .ports { display: block; }
  .download + .facts { margin-inline: calc(-0.5 * var(--g)); }
  .empty .facts { padding-inline: 16px; }
}
@media (forced-colors: active) {
  .download { border: 2px solid ButtonText; }
  .download::before,
  .seat::before,
  .rim,
  .glass,
  .ports { display: none; }
  .download:focus-visible { outline-color: Highlight; }
  .sep { background: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .flow,
  .wash,
  .pass { display: none; }
  .download:active,
  .download:active .ports { transform: none; }
}
.bottom {
  padding: 18px var(--m) 26px;
  border-top: 1px solid var(--raised);
  font-size: 14px;
  line-height: 1.7;
}
.bottom a {
  display: inline-block;
  padding: 4px 0;
  color: var(--faint);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-in-out);
}
@media (hover: hover) {
  .bottom a:hover { color: var(--silver); text-decoration: underline; text-underline-offset: 6px; }
}
.bottom a:active { color: var(--fg); }
.sub,
.more { animation: arrive 0.7s var(--ease-out) 0.15s backwards; }
.get { animation: arrive 0.7s var(--ease-out) 0.3s backwards; }
@keyframes arrive { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; } }
@keyframes breathe { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes turn { from { transform: scaleY(1); } to { transform: scaleY(-1); } }
@keyframes slide { to { transform: translateX(-33.3333%); } }
@keyframes counter { to { transform: translateX(50%); } }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes spark { 0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@media (min-width: 640px) {
  :root { --run: 80px; }
  .route.wide { display: block; }
  .route.narrow { display: none; }
  .sub { width: min(100%, 29.8em); min-height: calc(2 * 1.8em); }
  .sub > span + span { display: inline; }
  .more { width: min(100%, 33.4em); min-height: calc(2 * 1.8em); }
  .more > span + span { width: auto; }
  .crossing { --name: clamp(84px, 19vw, 170px); }
  .get { justify-self: start; width: min(100%, 400px); }
}
@media (min-width: 960px) {
  :root {
    --button: clamp(280px, 22vw, 340px);
    --band: clamp(150px, 12vw, 210px);
    --run: 96px;
  }
  body { font-size: 17px; }
  .hero {
    grid-template-columns: minmax(0, 1fr) var(--button) minmax(0, 1fr);
    grid-template-areas: "lead lead art" "sub sub art" "more more art" ". get crossing";
    column-gap: var(--g);
  }
  .crossing {
    --name: clamp(84px, 11vw, 230px);
    margin: var(--row) 0 0;
    margin-inline-end: calc(-1 * var(--m));
  }
  .route {
    --node: calc(var(--button) + 4px);
    --split: 50%;
    right: auto;
    width: calc(200% + 2 * var(--g) + var(--button));
  }
  .n-vasl { display: none; }
  .get {
    justify-self: stretch;
    width: auto;
    margin-top: var(--row);
    padding-top: calc(var(--band) / 2 - 32px);
  }
  .empty .get { padding-top: calc(var(--band) / 2 - 29px); }
}
@supports (width: 1cqi) {
  @media (min-width: 960px) {
    .crossing { --name: min(230px, (100cqi - var(--button) - 2 * var(--g)) / 2 / 2.9); }
  }
}
.lost { display: block; }
.lost .name {
  position: static;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  font-family: var(--font-la);
  font-size: clamp(84px, 16vw, 200px);
  letter-spacing: 0;
  text-align: left;
}
.lost .intro { margin: 12px 0 0; color: var(--muted); font-size: 18px; }
.terms {
  --gutter: 26px;
  container-type: inline-size;
  position: relative;
  max-width: calc(31em + var(--gutter) + 2 * var(--m));
  padding: clamp(24px, 6vh, 72px) var(--m) clamp(40px, 7vh, 88px);
  padding-inline-start: calc(var(--m) + var(--gutter));
  font-size: 16.5px;
  line-height: 1.9;
}
.terms::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--m) + 3px);
  top: calc(clamp(24px, 6vh, 72px) + 0.85em);
  bottom: clamp(40px, 7vh, 88px);
  width: 1px;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--gold) 60%, transparent),
    var(--line) 140px, var(--line) 88%, transparent);
  transform-origin: top;
  animation: draw-down 1.4s var(--ease-out) 0.1s backwards;
}
.terms h1 {
  position: relative;
  margin: 0 0 clamp(24px, 4vh, 40px);
  font-size: max(30px, 0.6 * var(--t-lead));
  font-weight: 500;
  line-height: 1.4;
  text-wrap: balance;
}
@supports (width: 1cqi) {
  .terms h1 {
    white-space: nowrap;
    font-size: min(max(30px, 0.6 * var(--t-lead)), 100cqi / 10.6);
  }
}
.terms h1::before,
.terms h2::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.terms h1::before {
  inset-inline-start: calc(-1 * var(--gutter));
  top: calc(0.7em - 3.5px);
  background: var(--gold);
  box-shadow: 0 0 12px 1px color-mix(in oklch, var(--gold) 45%, transparent);
}
.terms h2::before {
  inset-inline-start: calc(-1 * var(--gutter));
  top: calc(1em - 3.5px);
  background: var(--bg);
  box-shadow: 0 0 0 1.5px var(--silver);
}
.terms h2 {
  position: relative;
  margin: clamp(36px, 6vh, 56px) 0 8px;
  color: var(--silver);
  font-size: max(17.5px, var(--t-sub));
  font-weight: 500;
  line-height: 2;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .terms h2 { font-size: max(19px, var(--t-sub)); }
}
.part:first-of-type h2 { margin-top: 0; }
.terms p,
.terms li {
  color: var(--muted);
  font-family: "Vazirmatn text", "Vazirmatn fallback", "Vazirmatn fallback narrow", system-ui, sans-serif;
  text-wrap: pretty;
}
.terms p { margin: 0 0 1.1em; }
.terms ul { margin: 0 0 1.1em; padding: 0; list-style: none; }
.terms li {
  position: relative;
  margin: 0 0 0.7em;
  padding-inline-start: 1.25em;
}
.terms li:last-child { margin-bottom: 0; }
.terms li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.2em;
  top: calc(0.95em - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-lit);
}
.reading .bottom {
  padding-block: 26px 40px;
  padding-inline-start: calc(var(--m) + 26px);
}
.reading .bottom a.back {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--border-lit);
  border-radius: 11px;
  color: var(--fg);
  font-size: 16px;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-in-out), border-color var(--t-fast) var(--ease-in-out);
}
@media (hover: hover) {
  .reading .bottom a.back:hover { background: var(--raised); border-color: var(--silver); text-decoration: none; }
}
.reading .bottom a.back:active { background: var(--hover); }
.reading .bottom a.back:focus-visible { border-radius: 11px; }
@keyframes draw-down { from { transform: scaleY(0); } }
@media (min-width: 960px) {
  .terms,
  .reading .bottom {
    --head: clamp(150px, 12vw, 190px);
    --gutter: clamp(40px, 4.5vw, 64px);
    display: grid;
    grid-template-columns: var(--head) var(--gutter) minmax(0, 30em) minmax(0, 1fr);
    padding-inline: var(--m);
    font-size: 17.5px;
  }
  .terms {
    grid-template-rows: auto auto auto;
    max-width: none;
    padding-block: clamp(32px, 8vh, 104px) clamp(48px, 9vh, 112px);
  }
  .terms::before { display: none; }
  .terms h1 {
    grid-column: 3 / 5;
    margin-bottom: clamp(40px, 7vh, 72px);
  }
  .terms h1::before { inset-inline-start: calc(-0.5 * var(--gutter) - 3.5px); }
  .terms h1::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(-0.5 * var(--gutter) - 0.5px);
    top: 0.7em;
    bottom: calc(-1 * clamp(40px, 7vh, 72px) - 20px);
    width: 1px;
    background: linear-gradient(to bottom, color-mix(in oklch, var(--gold) 60%, transparent), var(--line) 90%);
    transform-origin: top;
    animation: draw-down 0.9s var(--ease-out) 0.1s backwards;
  }
  .part {
    position: relative;
    grid-column: 1 / 5;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
  }
  .part + .part { margin-top: clamp(24px, 4vh, 40px); }
  .part > * { grid-column: 3; }
  .part > h2 {
    grid-column: 1;
    grid-row: 1 / span 9;
    position: sticky;
    top: 28px;
    margin: 0;
    line-height: 1.75;
    text-align: end;
  }
  .terms h2::before {
    inset-inline-start: auto;
    inset-inline-end: calc(-0.5 * var(--gutter) - 3.5px);
    top: calc(0.875em - 3.5px);
  }
  .part::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--head) + var(--gutter) / 2 - 0.5px);
    top: 20px;
    bottom: calc(-1 * clamp(24px, 4vh, 40px) - 20px);
    width: 1px;
    background: var(--line);
    transform-origin: top;
    animation: draw-down 1.2s var(--ease-out) 0.5s backwards;
  }
  .part:last-of-type::before {
    bottom: 0;
    background: linear-gradient(to bottom, var(--line) 60%, transparent);
  }
  .reading .bottom { padding-block: 26px 40px; }
  .reading .bottom .back { grid-column: 3; justify-self: start; }
}
@media (forced-colors: active) {
  .name { color: CanvasText; -webkit-text-stroke: 0; }
  .lead .gold { background: none; -webkit-text-fill-color: currentColor; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0s !important;
  }
  .sweep, .runs { display: none; }
}
.art { display: none; }
@media (min-width: 960px) {
  .art {
    grid-area: art;
    display: block;
    position: relative;
    min-height: 0;
    margin-inline-end: calc(-1 * var(--m));
    pointer-events: none;
  }
}
body.home .art { container-type: inline-size; }
body.home .motes {
  position: absolute;
  inset: 0;
  animation: arrive 0.9s var(--ease-out) 0.25s backwards;
}
body.home .motes .mote { transition: rotate calc(2 * var(--metal-shift)) var(--ease-in-out); }
body.home .hero:has(.download:focus-visible) .motes .mote { rotate: var(--lean); }
body.home .hero:has(.download:focus-visible) .motes .mote::before { opacity: var(--a); }
@media (hover: hover) {
  body.home .hero:has(.download:hover) .motes .mote { rotate: var(--lean); }
  body.home .hero:has(.download:hover) .motes .mote::before { opacity: var(--a); }
}
body.home .mote {
  --x: 0.5;
  --y: 0.5;
  --v: 0;
  --p: 0;
  --d: 0;
  --r0: 0deg;
  --c: 0deg;
  --ty: -50%;
  --cx: 0;
  --o: 1;
  --k: 1;
  --s: 26px;
  --a: 0.85;
  --lean: 2.5deg;
  --l: calc(100cqw + var(--g) - 2px);
  --dx: calc(var(--l) * var(--v));
  --r: var(--r0);
  --q: calc(var(--l) * 0.0804);
  --dl: calc(-16s * var(--p));
  --core: #fff;
  --tint: var(--silver);
  --haze: var(--silver);
  position: absolute;
  left: calc(var(--l) * var(--x));
  top: 0;
  bottom: calc(-1 * (var(--row) + var(--band) * var(--y)));
  width: 0;
  transform-origin: 0 100%;
  translate: calc(var(--dx) * var(--cx));
  transform: translateY(var(--ty)) rotate(var(--r)) scale(var(--k));
  opacity: var(--o);
  animation: y3 16s linear var(--dl) infinite, x3 16s linear var(--dl) infinite;
}
@supports (rotate: atan2(1px, 1px)) {
  body.home .mote {
    --r: atan2(calc(var(--band) * var(--d) * 25), calc(var(--l) * 6));
    --q: calc(var(--l) * 0.0804 / cos(var(--r)));
  }
}
body.home .mote::after,
body.home .motes .mote:not(.g)::before {
  content: "";
  position: absolute;
  left: calc(var(--s) / -2);
  bottom: calc(var(--s) / -2);
  width: var(--s);
  height: var(--s);
  background: radial-gradient(closest-side, var(--core) 0 9%,
    color-mix(in oklch, var(--tint) 88%, transparent) 17%,
    color-mix(in oklch, var(--haze) 30%, transparent) 30%,
    color-mix(in oklch, var(--haze) 10%, transparent) 50%,
    color-mix(in oklch, var(--haze) 3%, transparent) 75%, transparent);
}
body.home .mote::after { opacity: var(--a); }
body.home .motes .mote::before {
  --core: var(--glint);
  --tint: var(--gold);
  --haze: var(--halo);
  z-index: 1;
  opacity: 0;
  transition: opacity var(--metal-shift) var(--ease-in-out);
}
body.home .z1 { top: 10%; --s: 11px; --a: 0.42; --lean: 0.75deg; animation-name: y1, x1; }
body.home .z2 { top: 4%; --s: 19px; --a: 0.68; --lean: 1.5deg; animation-name: y2, x2; }
body.home .s { --core: var(--silver); --tint: var(--silver); }
body.home .g { --s: 32px; --core: var(--glint); --tint: var(--gold); --haze: var(--halo); }
body.home .z5 { --a: 0.95; animation-name: y5, x5; }
body.home .i {
  top: auto;
  height: 34%;
  opacity: 0;
  --a: 1;
  --tint: var(--glint);
  --haze: var(--glint);
  animation: y0 2.4s linear var(--dl) backwards, x0 2.4s linear var(--dl) backwards;
}
body.home .b { display: none; }
@media (max-width: 959.98px) {
  body.home .hero { position: relative; }
  body.home .art {
    --name: min(max(84px, 21vw), 150px, 100vw / 2.7);
    display: block;
    position: absolute;
    grid-area: crossing;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    container-type: normal;
    pointer-events: none;
  }
  body.home .motes { display: none; }
  body.home .b {
    --yn: 0.5;
    --dn: 0;
    --yw: 0.5;
    --dw: 0;
    --y: var(--yn);
    --d: var(--dn);
    --l: calc(var(--m) + 2px + 1.24 * var(--name));
    --dl: calc(-12s * var(--p));
    --s: 20px;
    display: block;
    left: calc(var(--l) * var(--x) - var(--m));
    top: 24px;
    bottom: auto;
    height: calc(var(--band) * var(--y) - 2px);
    animation: y4 12s linear var(--dl) infinite, x4 12s linear var(--dl) infinite;
  }
  body.home .b.r {
    --l: calc(100cqw + var(--m) - 2px - 1.24 * var(--name));
    left: calc(1.24 * var(--name) + 2px + var(--l) * var(--x));
  }
}
@media (min-width: 640px) and (max-width: 959.98px) {
  body.home .art { --name: clamp(84px, 19vw, 170px); }
  body.home .b { --y: var(--yw); --d: var(--dw); }
}
@media (forced-colors: active) {
  body.home .art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .hero:has(.download:focus-visible) .motes .mote,
  body.home .hero:has(.download:hover) .motes .mote { rotate: none; }
}
@keyframes y1{0%{transform:translateY(-100%) scale(.6);opacity:0}30%{transform:translateY(-82%) scale(.9);opacity:.06}40%{transform:translateY(-76%) scale(1);opacity:.316}55%{transform:translateY(-67%) scale(.95);opacity:.7}78%{transform:translateY(-53.2%) scale(.873);opacity:.8}95%{transform:translateY(-43%) scale(.817);opacity:0}to{transform:translateY(-40%) scale(.8);opacity:0}}
@keyframes x1{0%{translate:var(--dx);animation-timing-function:cubic-bezier(.55,0,.9,.85)}to{translate:0}}
@keyframes y2{0%{transform:translateY(-100%) rotate(var(--r)) translateX(0px) scale(.5);opacity:0}23.62%{transform:translateY(-73%) rotate(var(--r)) translateX(0px) scale(.95);opacity:.05}26.25%{transform:translateY(-70%) rotate(var(--r)) translateX(0px) scale(1);opacity:.098}48.13%{transform:translateY(-45%) rotate(var(--r)) translateX(0px) scale(1);opacity:.5}74.38%{transform:translateY(-15%) rotate(var(--r)) translateX(0px) scale(1);opacity:.9}78.75%{transform:translateY(-10%) rotate(var(--r)) translateX(0px) scale(1);opacity:.933}87.5%{transform:translateY(0%) rotate(var(--r)) translateX(0px) scale(.85);opacity:1}89.1%{transform:translateY(0%) rotate(calc(var(--r) + var(--c) * .4)) translateX(4.8px) scale(2.8,.5);opacity:1}91.5%,to{transform:translateY(0%) rotate(calc(var(--r) + var(--c) * 1)) translateX(12px) scale(3.2,.3);opacity:0}}
@keyframes x2{0%{translate:var(--dx);animation-timing-function:cubic-bezier(.55,0,.9,.85)}87.5%,to{translate:0}}
@keyframes y3{0%{transform:translateY(-100%) rotate(var(--r)) translateX(0px) scale(.5);opacity:0}15.19%{transform:translateY(-73%) rotate(var(--r)) translateX(0px) scale(.95);opacity:.05}16.88%{transform:translateY(-70%) rotate(var(--r)) translateX(0px) scale(1);opacity:.098}30.94%{transform:translateY(-45%) rotate(var(--r)) translateX(0px) scale(1);opacity:.5}47.81%{transform:translateY(-15%) rotate(var(--r)) translateX(0px) scale(1);opacity:.9}50.62%{transform:translateY(-10%) rotate(var(--r)) translateX(0px) scale(1);opacity:.933}56.25%{transform:translateY(0%) rotate(var(--r)) translateX(0px) scale(.85);opacity:1}56.88%{transform:translateY(0%) rotate(calc(var(--r) + var(--c) * .4)) translateX(calc(var(--q) * .4)) scale(2.8,.5);opacity:1}57.81%,to{transform:translateY(0%) rotate(calc(var(--r) + var(--c) * 1)) translateX(var(--q)) scale(3.2,.3);opacity:0}}
@keyframes x3{0%{translate:var(--dx);animation-timing-function:cubic-bezier(.55,0,.9,.85)}56.25%,to{translate:0}}
@keyframes y5{0%{transform:translateY(-100%) rotate(var(--r)) translateX(0px) scale(.5);opacity:0}16.88%{transform:translateY(-70%) rotate(var(--r)) translateX(0px) scale(1);opacity:0}40.5%{transform:translateY(-28%) rotate(var(--r)) translateX(0px) scale(1);opacity:0}45%{transform:translateY(-20%) rotate(var(--r)) translateX(0px) scale(1);opacity:.6}50.62%{transform:translateY(-10%) rotate(var(--r)) translateX(0px) scale(1);opacity:.95}56.25%{transform:translateY(0%) rotate(var(--r)) translateX(0px) scale(.85);opacity:1}56.88%{transform:translateY(0%) rotate(calc(var(--r) + var(--c) * .4)) translateX(calc(var(--q) * .4)) scale(2.8,.5);opacity:1}57.81%,to{transform:translateY(0%) rotate(calc(var(--r) + var(--c) * 1)) translateX(var(--q)) scale(3.2,.3);opacity:0}}
@keyframes x5{0%,25.31%{translate:var(--dx);animation-timing-function:cubic-bezier(.55,0,.9,.85)}56.25%,to{translate:0}}
@keyframes y0{0%{transform:translateY(-100%) rotate(var(--r)) translateX(0px) scale(.6);opacity:0}17.5%{transform:translateY(-75%) rotate(var(--r)) translateX(0px) scale(.933);opacity:1}21%{transform:translateY(-70%) rotate(var(--r)) translateX(0px) scale(1);opacity:1}63%{transform:translateY(-10%) rotate(var(--r)) translateX(0px) scale(1);opacity:1}70%{transform:translateY(0%) rotate(var(--r)) translateX(0px) scale(.85);opacity:1}74.17%{transform:translateY(0%) rotate(calc(var(--r) + var(--c) * .4)) translateX(calc(var(--q) * .4)) scale(2.8,.5);opacity:1}80.42%,to{transform:translateY(0%) rotate(calc(var(--r) + var(--c) * 1)) translateX(var(--q)) scale(3.2,.3);opacity:0}}
@keyframes x0{0%{translate:var(--dx);animation-timing-function:cubic-bezier(.55,0,.9,.85)}70%,to{translate:0}}
@keyframes y4{0%{transform:translateY(-100%) rotate(var(--r)) translateX(0px) scale(.7);opacity:0}6%{transform:translateY(-70%) rotate(var(--r)) translateX(0px) scale(.925);opacity:.5}8%{transform:translateY(-60%) rotate(var(--r)) translateX(0px) scale(1);opacity:.588}14%{transform:translateY(-30%) rotate(var(--r)) translateX(0px) scale(1);opacity:.85}18%{transform:translateY(-10%) rotate(var(--r)) translateX(0px) scale(1);opacity:.95}20%{transform:translateY(0%) rotate(var(--r)) translateX(0px) scale(.85);opacity:1}22%{transform:translateY(0%) rotate(calc(var(--r) + var(--c) * .4)) translateX(3.2px) scale(2.8,.5);opacity:1}25%,to{transform:translateY(0%) rotate(calc(var(--r) + var(--c) * 1)) translateX(8px) scale(3.2,.3);opacity:0}}
@keyframes x4{0%{translate:var(--dx);animation-timing-function:cubic-bezier(.55,0,.9,.85)}20%,to{translate:0}}
:root { --sv: 1vh; }
@supports (height: 1svh) {
  :root { --sv: 1svh; }
}
@media (max-width: 639.98px) {
  .top {
    height: clamp(56px, 10 * var(--sv) - 10px, 80px);
    padding-top: clamp(14px, 4 * var(--sv) - 4px, 24px);
  }
  .hero {
    --cross: clamp(10px, 6 * var(--sv) - 22px, 22px);
    padding-top: clamp(8px, 12 * var(--sv) - 64px, 48px);
  }
  .crossing { margin: var(--cross) calc(-1 * var(--m)); }
  body.home .b { top: calc(var(--cross) + 2px); }
}
@media (min-width: 960px) and (max-height: 820px) {
  :root { --row: clamp(24px, 4vh, 72px); }
  .hero {
    padding-top: clamp(16px, 3vh, 104px);
    padding-bottom: clamp(12px, 2.5vh, 32px);
  }
  .bottom { padding-block: 12px 16px; }
}
@media (max-width: 259.98px) {
  .sub { font-size: 15px; }
  .more { font-size: 14px; min-height: calc(5 * 1.8em); }
  .kept { white-space: normal; }
}
.download,
.brand,
.bottom a { -webkit-tap-highlight-color: rgb(255 215 0 / 0.14); }
.bottom a:not(.back) { padding-block: 10px; margin-block: -6px; }
.brand { transition: color var(--t-fast) var(--ease-in-out); }
@media (hover: hover) {
  .brand:hover { color: var(--fg); }
}
.brand:active { color: var(--fg); }
@media (forced-colors: active) {
  .route,
  .route.wide,
  .route.narrow { display: none; }
  :focus-visible { outline-color: Highlight; }
}
@media (min-width: 960px) {
  body.home .art::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(closest-side at 40% 44%,
      color-mix(in oklch, var(--halo) 2.6%, transparent),
      color-mix(in oklch, var(--halo) 1.5%, transparent) 40%,
      color-mix(in oklch, var(--halo) 0.5%, transparent) 72%,
      transparent);
  }
}
body.home .z6,
body.home .z7 {
  --t0: 0%;
  --t1: 50%;
  --dl: calc(-32s * var(--p));
  top: var(--t0);
  bottom: var(--t1);
  animation: y6 32s linear var(--dl) infinite, x6 32s linear var(--dl) infinite;
}
body.home .z6 { --s: 6px; --a: 0.18; --lean: 0.4deg; }
body.home .z7 { --s: 8px; --a: 0.26; --lean: 0.6deg; }
@keyframes y6{0%{transform:translateY(-100%) scale(.8);opacity:0}12.4%{transform:translateY(-80%) scale(.88);opacity:.6}31%{transform:translateY(-50%) scale(1);opacity:1}49.6%{transform:translateY(-20%) scale(.94);opacity:.7}62%,to{transform:translateY(0%) scale(.9);opacity:0}}
@keyframes x6{0%{translate:var(--dx);animation-timing-function:cubic-bezier(.55,0,.9,.85)}62%,to{translate:0}}
body {
  background:
    radial-gradient(ellipse 75% 70% at 52% 46%, transparent 58%, oklch(0 0 0 / 0.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22 viewBox=%220 0 180 180%22%3E%3Cfilter id=%22g%22 filterUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%22180%22 height=%22180%22 color-interpolation-filters=%22sRGB%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.8%22 numOctaves=%222%22 seed=%227%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0%22/%3E%3CfeComponentTransfer%3E%3CfeFuncA type=%22table%22 tableValues=%220 0 0 0 0 0 .008 .02 .03 .036 .036%22/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23g)%22/%3E%3C/svg%3E") 0 0 / 180px 180px,
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22 viewBox=%220 0 180 180%22%3E%3Cfilter id=%22g%22 filterUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%22180%22 height=%22180%22 color-interpolation-filters=%22sRGB%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.8%22 numOctaves=%222%22 seed=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0%22/%3E%3CfeComponentTransfer%3E%3CfeFuncA type=%22table%22 tableValues=%220 0 0 .03 .06 .09 .11 .12 .12 .12 .12%22/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23g)%22/%3E%3C/svg%3E") 90px 90px / 180px 180px,
    var(--bg);
}
@media (min-resolution: 2dppx) {
  body { background-size: auto, 90px 90px, 90px 90px, auto; }
}
body.reading {
  background:
    linear-gradient(90deg, oklch(0 0 0 / 0.35), transparent 18% 82%, oklch(0 0 0 / 0.35)),
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22 viewBox=%220 0 180 180%22%3E%3Cfilter id=%22g%22 filterUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%22180%22 height=%22180%22 color-interpolation-filters=%22sRGB%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.8%22 numOctaves=%222%22 seed=%227%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0%22/%3E%3CfeComponentTransfer%3E%3CfeFuncA type=%22table%22 tableValues=%220 0 0 0 0 0 .008 .02 .03 .036 .036%22/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23g)%22/%3E%3C/svg%3E") 0 0 / 180px 180px,
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22 viewBox=%220 0 180 180%22%3E%3Cfilter id=%22g%22 filterUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%22180%22 height=%22180%22 color-interpolation-filters=%22sRGB%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.8%22 numOctaves=%222%22 seed=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0%22/%3E%3CfeComponentTransfer%3E%3CfeFuncA type=%22table%22 tableValues=%220 0 0 .03 .06 .09 .11 .12 .12 .12 .12%22/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23g)%22/%3E%3C/svg%3E") 90px 90px / 180px 180px,
    var(--bg);
}
@media (min-resolution: 2dppx) {
  body.reading { background-size: auto, 90px 90px, 90px 90px, auto; }
}
@media (forced-colors: active), (prefers-contrast: more) {
  html,
  body,
  body.reading { background-image: none; }
}
:root {
  --cycle: calc(4 * var(--loop));
  --beat: 0s;
}
.beat,
.beam,
.lead .bloom { display: none; }
@supports (width: 1cqi) and ((mask-image: none) or (-webkit-mask-image: none)) {
  .beat {
    --w: calc(100cqi + 2 * var(--m));
    --lane: calc(var(--m) + 2px + 1.24 * var(--name));
    --node: 0px;
    --track: max(var(--lane), 0.3875 * var(--w));
    --bleed: 16px;
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  @media (min-width: 960px) {
    .beat {
      --lane: calc(50cqi + var(--m) - var(--button) / 2 - 2px);
      --node: calc(var(--button) + 4px);
    }
  }
  .beat .track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--lane) - var(--track));
    width: var(--track);
    animation: beat-track var(--cycle) linear var(--beat) infinite;
  }
  .beat .slit {
    position: absolute;
    top: calc(-1 * var(--bleed));
    bottom: calc(-1 * var(--bleed));
    right: 0;
    overflow: hidden;
  }
  .beat .pane {
    position: absolute;
    top: var(--bleed);
    bottom: var(--bleed);
    right: 0;
    width: var(--track);
    animation: beat-pane var(--cycle) linear var(--beat) infinite;
  }
  .beat .way {
    position: absolute;
    top: 0;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .beat .way.l { left: calc(var(--track) - var(--lane)); width: var(--lane); }
  .beat .way.r { left: var(--track); width: calc(var(--w) - var(--lane)); }
  .beat .way.n { display: block; }
  .beat .way.w { display: none; }
  @media (min-width: 640px) {
    .beat .way.n { display: none; }
    .beat .way.w { display: block; }
  }
  @media (min-width: 960px) {
    .beat .track.gold .way.r { display: none; }
  }
  .beat .comet {
    width: calc(2.6 * var(--run));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgb(0 0 0 / 0.12) 30%, rgb(0 0 0 / 0.45) 70%,
      #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgb(0 0 0 / 0.12) 30%, rgb(0 0 0 / 0.45) 70%,
      #000 94%, transparent 100%);
  }
  .beat .cb { stroke: var(--halo); stroke-width: 14px; opacity: 0.24; }
  .beat .cc { stroke: var(--glint); stroke-width: 3.5px; opacity: 0.95; }
  .beat .letters {
    font-size: var(--name);
    width: 1.1em;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgb(0 0 0 / 0.18) 35%, rgb(0 0 0 / 0.6) 72%,
      #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgb(0 0 0 / 0.18) 35%, rgb(0 0 0 / 0.6) 72%,
      #000 90%, transparent 100%);
  }
  .beat .letters i {
    --font-la: "IBM Plex Mono", "Wordmark fallback", ui-monospace, monospace;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--track) - var(--lane) + var(--m));
    display: flex;
    align-items: center;
    width: calc(2.55em + 2px);
    padding-left: 2px;
    font-family: "Jost", var(--font-la);
    font-weight: 500;
    font-size: inherit;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
    direction: ltr;
    filter: drop-shadow(0 0 0.04em color-mix(in oklch, var(--halo) 60%, transparent));
  }
  .beat .letters i::before {
    content: "VASL";
    color: transparent;
    -webkit-text-stroke: 1.25px var(--gold);
  }
  .beat .onward { visibility: hidden; }
  @media (min-width: 960px) {
    .beat .onward { visibility: visible; }
  }
  .beat .track.on {
    left: calc(var(--lane) + var(--node));
    animation-name: beat-on;
  }
  .beat .track.on .pane { animation-name: beat-on-pane; }
  .beat .track.on .way.r { left: 0; width: calc(var(--w) - var(--lane) - var(--node)); }
  .beam {
    display: block;
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -32%;
    width: 32%;
    background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--glint) 9%, transparent) 45%,
      color-mix(in oklch, var(--glint) 17%, transparent) 62%, transparent);
    transform: translateX(0) skewX(-16deg);
    animation: beat-beam var(--cycle) linear var(--beat) infinite;
    transition: opacity var(--t-base) var(--ease-in-out);
  }
  .download:focus-visible .beam { opacity: 0; }
  @media (hover: hover) {
    .download:hover .beam { opacity: 0; }
  }
  .lead .bloom {
    display: block;
    position: absolute;
    z-index: -1;
    inset-inline-start: -0.35em;
    top: 1.15em;
    width: 2.75em;
    height: 1.6em;
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%,
      color-mix(in oklch, var(--halo) 11%, transparent),
      color-mix(in oklch, var(--halo) 5%, transparent) 40%,
      color-mix(in oklch, var(--halo) 1.5%, transparent) 70%,
      transparent);
    opacity: 0;
    animation: beat-bloom var(--cycle) linear var(--beat) infinite;
  }
}
@supports not (-webkit-text-stroke: 1px) {
  .beat .letters { display: none; }
}
.glow::before { animation-delay: -4.7s; }
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .beat,
  .beam,
  .lead .bloom { display: none; }
}
@media (max-width: 279.98px) {
  .lead .bloom { display: none; }
}
@keyframes beat-track{0%{transform:translateX(-100%);opacity:0}2.325%{transform:translateX(-88%);opacity:1}19.375%{transform:translateX(0%)}36.812%{transform:translateX(90%);opacity:1}46.5%,to{transform:translateX(140%);opacity:0}}
@keyframes beat-pane{0%{transform:translateX(100%)}2.325%{transform:translateX(88%)}19.375%{transform:translateX(0%)}36.812%{transform:translateX(-90%)}46.5%,to{transform:translateX(-140%)}}
@keyframes beat-on{0%{transform:translateX(-100%);opacity:0}21.875%{transform:translateX(-100%);opacity:0}22.592%{transform:translateX(-96.3%);opacity:.7}27.688%{transform:translateX(-70%);opacity:.7}36.406%,to{transform:translateX(-25%);opacity:0}}
@keyframes beat-on-pane{0%{transform:translateX(100%)}21.875%{transform:translateX(100%)}22.592%{transform:translateX(96.3%)}27.688%{transform:translateX(70%)}36.406%,to{transform:translateX(25%)}}
@keyframes beat-beam{0%{transform:translateX(0%) skewX(-16deg);animation-timing-function:cubic-bezier(.65,0,.35,1)}17.5%{transform:translateX(0%) skewX(-16deg);animation-timing-function:cubic-bezier(.65,0,.35,1)}24.375%,to{transform:translateX(440%) skewX(-16deg)}}
@keyframes beat-bloom{0%{opacity:0;animation-timing-function:cubic-bezier(.65,0,.35,1)}13.125%{opacity:0;animation-timing-function:cubic-bezier(.65,0,.35,1)}20.625%{opacity:1}23.125%{opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}39.375%,to{opacity:0}}
@supports (width: 1cqi) and ((mask-image: none) or (-webkit-mask-image: none)) {
  .beat .track.twin {
    animation: twin-track calc(3 * var(--cycle)) linear var(--beat) infinite;
  }
  .beat .track.twin .pane {
    animation: twin-pane calc(3 * var(--cycle)) linear var(--beat) infinite;
  }
  @media (min-width: 960px) {
    .beat .track.twin .way.r { display: none; }
  }
  .beat .twin .slit { opacity: 0.6; }
  .beat .twin .cc { stroke: #fff; stroke-width: 3px; opacity: 0.8; }
  .beat .twin .cb { stroke: var(--silver); stroke-width: 12px; opacity: 0.12; }
  .hero:has(.download:focus-visible) .beat .twin .cc { stroke: var(--glint); }
  @media (hover: hover) {
    .hero:has(.download:hover) .beat .twin .cc { stroke: var(--glint); }
  }
}
@keyframes twin-track{0%{transform:translateX(-100%);opacity:0}.775%{transform:translateX(-88%);opacity:1}6.458%{transform:translateX(0%)}12.271%{transform:translateX(90%);opacity:1}15.5%{transform:translateX(140%);opacity:0}33.333%{transform:translateX(-100%);opacity:0}34.108%{transform:translateX(-88%);opacity:1}37.208%{transform:translateX(-40%);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}38.875%{transform:translateX(-28%);opacity:0}66.667%{transform:translateX(-100%);opacity:0}67.442%{transform:translateX(-88%);opacity:1}73.125%{transform:translateX(0%)}78.938%{transform:translateX(90%);opacity:1}82.167%,to{transform:translateX(140%);opacity:0}}
@keyframes twin-pane{0%{transform:translateX(100%)}.775%{transform:translateX(88%)}6.458%{transform:translateX(0%)}12.271%{transform:translateX(-90%)}15.5%{transform:translateX(-140%)}33.333%{transform:translateX(100%)}34.108%{transform:translateX(88%)}37.208%{transform:translateX(40%);animation-timing-function:cubic-bezier(.22,1,.36,1)}38.875%{transform:translateX(28%)}66.667%{transform:translateX(100%)}67.442%{transform:translateX(88%)}73.125%{transform:translateX(0%)}78.938%{transform:translateX(-90%)}82.167%,to{transform:translateX(-140%)}}
.bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
}
.bottom .copy {
  margin-right: auto;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (min-width: 960px) {
  .reading .bottom { gap: 0; }
  .reading .bottom .copy {
    grid-column: 4;
    justify-self: end;
    align-self: center;
  }
}
@media (forced-colors: active) {
  .bottom .copy { color: CanvasText; }
}
.sub,
.more,
.get { animation: none; }
:root {
  --k: clamp(1px, 1px + (min(100vw, 177.78vh) - 1920px) * 0.0003125, 1.25px);
  --side: 0px;
  --m: clamp(20px, 5vw, 72 * var(--k));
  --g: clamp(32px, 4vw, 72 * var(--k));
}
body { --brand: clamp(22px, 15px + 1.2vw, 32 * var(--k)); }
@media (min-width: 640px) {
  :root {
    --t-lead: clamp(52px, 28px + 3.1vw, 76 * var(--k));
    --t-sub: clamp(18px, 14px + 0.5vw, 21.5 * var(--k));
    --t-small: clamp(15.5px, 14px + 0.15vw, 16.5 * var(--k));
  }
}
@media (min-width: 960px) {
  :root {
    --button: clamp(280px, 22vw, 340 * var(--k));
    --band: clamp(150px, 12vw, 210 * var(--k));
    --run: calc(96 * var(--k));
  }
  .download { min-height: calc(64 * var(--k)); font-size: calc(19 * var(--k)); }
  .get { padding-top: calc(var(--band) / 2 - 32 * var(--k)); }
  .empty .get { padding-top: calc(var(--band) / 2 - 29 * var(--k)); }
  .facts,
  .bottom { font-size: calc(14 * var(--k)); }
  .bottom .copy { font-size: calc(13 * var(--k)); }
}
@supports (width: 1cqi) {
  @media (min-width: 960px) {
    .crossing { --name: min(230 * var(--k), (100cqi - var(--button) - 2 * var(--g)) / 2 / 2.9); }
  }
}
@media (min-aspect-ratio: 2/1) and (min-width: 2200px) {
  :root { --side: calc((100vw - 177.78vh) / 2); }
  .top,
  body.home .hero,
  body.home .bottom { padding-inline: calc(var(--side) + var(--m)); }
  .reading .bottom { padding-inline-end: calc(var(--side) + var(--m)); }
  body.home .crossing::before,
  body.home .crossing::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    margin-top: -0.5px;
    width: var(--side);
    pointer-events: none;
  }
  body.home .crossing::before {
    left: calc(-1 * var(--side));
    background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--silver) 45%, transparent));
    animation: rise 0.6s var(--ease-out) 0.25s backwards;
  }
  body.home .crossing::after {
    left: calc(200% + 2 * var(--g) + var(--button));
    background: linear-gradient(90deg, color-mix(in oklch, var(--silver) 45%, transparent), transparent);
    animation: rise 0.6s var(--ease-out) 1.8s backwards;
  }
  body.home .route stop:first-child { stop-opacity: 0.45; }
}
@media (min-width: 960px), (min-width: 640px) and (min-height: 900px) {
  body.home main {
    display: flex;
    flex-direction: column;
  }
  body.home main::before,
  body.home main::after { content: ""; }
  body.home main::before { flex: 2 1 0; }
  body.home main::after { flex: 3 1 0; }
}
@media (min-width: 640px) and (max-width: 959.98px) and (min-height: 900px) {
  :root { --band: clamp(140px, 20vw, 200px); }
}
@media (min-width: 1920px) {
  .terms,
  .reading .bottom {
    --head: clamp(150px, 12vw, 190 * var(--k));
    --gutter: clamp(40px, 4.5vw, 64 * var(--k));
    font-size: calc(17.5 * var(--k));
    padding-inline-start: max(var(--m), var(--side) + 0.4 * (100vw - 2 * var(--side)) - var(--head) - var(--gutter) - 15em);
  }
}
@media (forced-colors: active) {
  body.home .crossing::before,
  body.home .crossing::after { display: none; }
}
@media (max-width: 639.98px) and (max-height: 700px) {
  .hero { grid-template-areas: "lead" "sub" "crossing" "get" "more"; }
  .more { margin-top: 22px; animation-delay: 0.45s; }
}