.browser[data-astro-cid-qknfnqhj] {
  margin: 0;
  border-radius: var(--radius);
  background: var(--frame);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px #1315188c;
}

.chrome[data-astro-cid-qknfnqhj] {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
}

.dots[data-astro-cid-qknfnqhj] {
  display: flex;
  gap: 6px;
}

.dots[data-astro-cid-qknfnqhj] i[data-astro-cid-qknfnqhj] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hairline);
}

.address[data-astro-cid-qknfnqhj] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .2rem var(--space-sm);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-xs);
  text-align: center;
}

img[data-astro-cid-qknfnqhj] {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}
.hero[data-astro-cid-zkhec6xw] {
  position: relative;
  min-height: var(--avail);
  display: grid;
}

.guides[data-astro-cid-zkhec6xw] {
  position: absolute;
  inset: 0;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}

.guides[data-astro-cid-zkhec6xw] i[data-astro-cid-zkhec6xw] {
  border-left: 1px solid var(--hairline);
}

.guides[data-astro-cid-zkhec6xw] i[data-astro-cid-zkhec6xw]:last-child {
  border-right: 1px solid var(--hairline);
}

.hero-inner[data-astro-cid-zkhec6xw] {
  position: relative;
  z-index: 1;
  display: grid;
  container-type: inline-size;
  align-content: safe center;
  gap: clamp(1.5rem, 7svh, 4rem);
  padding-block: clamp(1.5rem, 7svh, 4rem);
}

h1[data-astro-cid-zkhec6xw] {
  font-size: clamp(2.5rem, min(18svh, (100cqi - 2rem) / var(--fit-line, 7.3)), 10rem);
  line-height: .9;
  letter-spacing: -.055em;
  font-weight: 700;
  padding-inline: var(--space-md);
}

.rot[data-astro-cid-zkhec6xw] {
  display: grid;
}

.word[data-astro-cid-zkhec6xw] {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  transform: translateY(.3em);
  transition: opacity .38s var(--ease-out), transform .38s var(--ease-out);
}

.word[data-astro-cid-zkhec6xw][data-state="in"] {
  opacity: 1;
  transform: none;
}

.word[data-astro-cid-zkhec6xw][data-state="out"] {
  transform: translateY(-.3em);
}

.after[data-astro-cid-zkhec6xw] {
  display: block;
}

.hero-actions[data-astro-cid-zkhec6xw] .short[data-astro-cid-zkhec6xw] {
  display: none;
}

.hero-row[data-astro-cid-zkhec6xw] {
  display: grid;
  gap: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--ink);
}

.hero-row[data-astro-cid-zkhec6xw] > [data-astro-cid-zkhec6xw] {
  padding-inline: var(--space-md);
}

.hero-lead[data-astro-cid-zkhec6xw] {
  font-size: var(--text-lg);
  color: var(--slate);
  max-width: 32rem;
}

.live-label[data-astro-cid-zkhec6xw] {
  font-size: var(--text-xs);
  color: var(--anor);
}

.live[data-astro-cid-zkhec6xw] ul[data-astro-cid-zkhec6xw] {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-actions[data-astro-cid-zkhec6xw] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-content: start;
}

@media (width <= 47.99rem) {
  .guides[data-astro-cid-zkhec6xw] {
    display: none;
  }

  .hero-row[data-astro-cid-zkhec6xw] > [data-astro-cid-zkhec6xw], h1[data-astro-cid-zkhec6xw] {
    padding-inline: var(--space-xs);
  }

  .live[data-astro-cid-zkhec6xw] {
    display: none;
  }

  .hero-row[data-astro-cid-zkhec6xw] {
    gap: var(--space-lg);
  }

  .hero-lead[data-astro-cid-zkhec6xw] {
    font-size: var(--text-base);
  }

  h1[data-astro-cid-zkhec6xw] {
    font-size: clamp(2.25rem, min(9.5svh, (100cqi - 1rem) / var(--fit-word, 4.6)), 6rem);
  }

  .w2[data-astro-cid-zkhec6xw] {
    display: block;
  }

  .hero-actions[data-astro-cid-zkhec6xw] .full[data-astro-cid-zkhec6xw] {
    display: none;
  }

  .hero-actions[data-astro-cid-zkhec6xw] .short[data-astro-cid-zkhec6xw] {
    display: inline;
  }
}

@media (width >= 48rem) and (width <= 63.99rem) {
  .hero-row[data-astro-cid-zkhec6xw] {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-lg);
  }

  .hero-lead[data-astro-cid-zkhec6xw] {
    grid-row: span 2;
  }

  .hero-actions[data-astro-cid-zkhec6xw] .btn-ghost[data-astro-cid-zkhec6xw] {
    display: none;
  }
}

@media (width >= 64rem) {
  .hero-row[data-astro-cid-zkhec6xw] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .hero-lead[data-astro-cid-zkhec6xw] {
    grid-column: span 2;
  }

  .hero-actions[data-astro-cid-zkhec6xw] {
    flex-direction: column;
    align-items: flex-start;
  }
}

.flood[data-astro-cid-zkhec6xw] {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--anor);
  pointer-events: none;
}

@keyframes flood {
  from {
    clip-path: circle(0px at var(--cx, 50%) var(--cy, 60%));
  }

  to {
    clip-path: circle(var(--r1, 150vmax) at var(--cx, 50%) var(--cy, 60%));
  }
}

.work[data-astro-cid-zkhec6xw] {
  background: var(--anor);
  color: var(--on-anor);
  padding-block: var(--space-section) var(--space-2xl);
}

.work-head[data-astro-cid-zkhec6xw] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
  margin-bottom: var(--space-xl);
}

.work-head[data-astro-cid-zkhec6xw] h2[data-astro-cid-zkhec6xw] {
  font-size: var(--text-4xl);
  line-height: .92;
  letter-spacing: -.05em;
  font-weight: 700;
}

.work-side[data-astro-cid-zkhec6xw] {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.work-note[data-astro-cid-zkhec6xw] {
  color: var(--on-anor-muted);
}

.arrows[data-astro-cid-zkhec6xw] {
  display: flex;
  gap: var(--space-xs);
}

.arrow-btn[data-astro-cid-zkhec6xw] {
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  border: 1.5px solid #ffffff80;
  background: none;
  color: var(--on-anor);
  font: inherit;
  font-size: var(--text-lg);
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}

.arrow-btn[data-astro-cid-zkhec6xw]:hover {
  background: var(--paper);
  color: var(--anor);
}

.work[data-astro-cid-zkhec6xw] [data-astro-cid-zkhec6xw]:focus-visible {
  outline-color: var(--paper);
}

.track[data-astro-cid-zkhec6xw] {
  display: flex;
  gap: var(--space-lg);
  margin: 0;
  padding: var(--space-xs) var(--gutter) var(--space-lg);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.track[data-astro-cid-zkhec6xw]::-webkit-scrollbar {
  display: none;
}

.card[data-astro-cid-zkhec6xw] {
  flex: 0 0 min(86vw, 30rem);
  scroll-snap-align: start;
  display: grid;
  gap: var(--space-lg);
  align-content: start;
}

.card-end[data-astro-cid-zkhec6xw] {
  flex-basis: min(80vw, 24rem);
}

.shot[data-astro-cid-zkhec6xw] {
  position: relative;
  margin-bottom: var(--space-sm);
}

.phone[data-astro-cid-zkhec6xw] {
  position: absolute;
  right: -2%;
  bottom: -8%;
  width: 26%;
  border: 4px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--ink);
  box-shadow: 0 24px 40px -20px #13151899;
}

.phone[data-astro-cid-zkhec6xw] img[data-astro-cid-zkhec6xw] {
  width: 100%;
  aspect-ratio: 390 / 780;
  object-fit: cover;
  object-position: top;
}

.copy[data-astro-cid-zkhec6xw] {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
  align-content: start;
}

.count[data-astro-cid-zkhec6xw] {
  font-size: var(--text-xs);
  color: var(--on-anor-muted);
}

.copy[data-astro-cid-zkhec6xw] h3[data-astro-cid-zkhec6xw] {
  font-size: var(--text-2xl);
  letter-spacing: -.035em;
}

.kind[data-astro-cid-zkhec6xw] {
  color: var(--on-anor-muted);
  font-weight: 550;
}

.tier[data-astro-cid-zkhec6xw] {
  padding-left: var(--space-sm);
  border-left: 2px solid var(--on-anor);
  font-size: var(--text-sm);
}

.copy[data-astro-cid-zkhec6xw] .btn[data-astro-cid-zkhec6xw] {
  margin-top: var(--space-xs);
}

.dot[data-astro-cid-zkhec6xw].on-red {
  background: var(--paper);
}

.ghost[data-astro-cid-zkhec6xw] {
  display: grid;
  grid-template-rows: auto 1fr;
  aspect-ratio: 16 / 10;
  border: 2px dashed #fff9;
  border-radius: var(--radius);
}

.ghost-bar[data-astro-cid-zkhec6xw] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 2px dashed #fff9;
  font-size: var(--text-xs);
}

.ghost-bar[data-astro-cid-zkhec6xw] i[data-astro-cid-zkhec6xw] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #fff9;
}

.ghost-bar[data-astro-cid-zkhec6xw] span[data-astro-cid-zkhec6xw] {
  margin-left: var(--space-sm);
  color: var(--on-anor-muted);
}

.ghost-body[data-astro-cid-zkhec6xw] {
  display: grid;
  place-items: center;
  font-size: var(--text-3xl);
  font-weight: 300;
  color: var(--on-anor-muted);
}

.progress[data-astro-cid-zkhec6xw] {
  display: none;
}

.head[data-astro-cid-zkhec6xw] {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.head[data-astro-cid-zkhec6xw].split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
}

.bento[data-astro-cid-zkhec6xw] {
  display: grid;
  gap: var(--space-md);
}

.tile[data-astro-cid-zkhec6xw] {
  display: grid;
  align-content: end;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border-radius: var(--radius);
  overflow: hidden;
}

.tile[data-astro-cid-zkhec6xw] h3[data-astro-cid-zkhec6xw] {
  font-size: var(--text-xl);
}

.art[data-astro-cid-zkhec6xw] {
  display: grid;
  place-items: center;
  min-height: 12rem;
  margin-bottom: var(--space-md);
}

.t-phone[data-astro-cid-zkhec6xw] {
  background: var(--frame);
}

.t-phone[data-astro-cid-zkhec6xw] .desc[data-astro-cid-zkhec6xw], .t-link[data-astro-cid-zkhec6xw] .desc[data-astro-cid-zkhec6xw] {
  color: var(--slate);
}

.t-tg[data-astro-cid-zkhec6xw] {
  background: var(--ink);
  color: var(--paper);
}

.t-tg[data-astro-cid-zkhec6xw] .desc[data-astro-cid-zkhec6xw] {
  color: var(--on-ink-muted);
}

.t-link[data-astro-cid-zkhec6xw] {
  border: 1px solid var(--hairline);
}

.t-keep[data-astro-cid-zkhec6xw] {
  background: var(--anor);
  color: var(--on-anor);
}

.t-keep[data-astro-cid-zkhec6xw] .desc[data-astro-cid-zkhec6xw] {
  color: var(--on-anor-muted);
}

@media (width >= 56rem) {
  .bento[data-astro-cid-zkhec6xw] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .t-phone[data-astro-cid-zkhec6xw] {
    grid-row: span 2;
  }

  .t-tg[data-astro-cid-zkhec6xw] {
    grid-column: span 2;
  }

  .t-phone[data-astro-cid-zkhec6xw] .art[data-astro-cid-zkhec6xw] {
    min-height: 26rem;
  }
}

.mini-phone[data-astro-cid-zkhec6xw] {
  display: grid;
  grid-template-rows: auto 5.5rem auto auto 1fr;
  gap: .55rem;
  width: 10.5rem;
  aspect-ratio: 9 / 18.5;
  padding: 1rem .75rem;
  border: 3px solid var(--ink);
  border-radius: 1.6rem;
  background: var(--paper);
}

.mini-phone[data-astro-cid-zkhec6xw] i[data-astro-cid-zkhec6xw] {
  display: block;
  border-radius: 999px;
  background: var(--hairline);
}

.mp-bar[data-astro-cid-zkhec6xw] {
  width: 40%;
  height: .4rem;
  justify-self: center;
}

.mini-phone[data-astro-cid-zkhec6xw] .mp-img[data-astro-cid-zkhec6xw] {
  border-radius: .6rem;
}

.mp-line[data-astro-cid-zkhec6xw] {
  height: .45rem;
}

.mp-line[data-astro-cid-zkhec6xw].short {
  width: 60%;
}

.mini-phone[data-astro-cid-zkhec6xw] .mp-btn[data-astro-cid-zkhec6xw] {
  align-self: end;
  padding: .4rem;
  background: var(--anor);
  color: var(--on-anor);
  font-style: normal;
  font-size: .75rem;
  font-weight: 600;
  text-align: center;
}

.bubble[data-astro-cid-zkhec6xw] {
  display: grid;
  gap: .15rem;
  width: min(100%, 17rem);
  padding: .85rem 1rem .6rem;
  border-radius: 1.1rem 1.1rem 1.1rem .3rem;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-sm);
  transform: rotate(-2deg);
}

.b-from[data-astro-cid-zkhec6xw] {
  font-size: var(--text-xs);
  color: var(--anor);
}

.b-title[data-astro-cid-zkhec6xw] {
  font-weight: 650;
  font-size: var(--text-base);
}

.b-time[data-astro-cid-zkhec6xw] {
  justify-self: end;
  font-size: .7rem;
  color: var(--slate);
}

.preview[data-astro-cid-zkhec6xw] {
  display: grid;
  width: min(100%, 15rem);
  border: 1px solid var(--hairline);
  border-radius: .9rem;
  overflow: hidden;
  background: var(--frame);
  font-size: var(--text-sm);
}

.pv-img[data-astro-cid-zkhec6xw] {
  display: grid;
  place-items: center;
  aspect-ratio: 1.91;
  background: var(--anor);
  color: var(--on-anor);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -.03em;
}

.pv-title[data-astro-cid-zkhec6xw] {
  padding: .55rem .8rem 0;
  font-weight: 650;
}

.pv-url[data-astro-cid-zkhec6xw] {
  padding: 0 .8rem .65rem;
  font-size: var(--text-xs);
  color: var(--slate);
}

.receipt[data-astro-cid-zkhec6xw] {
  display: grid;
  gap: .6rem;
  width: min(100%, 16rem);
  margin: 0;
  font-size: var(--text-sm);
}

.receipt[data-astro-cid-zkhec6xw] div[data-astro-cid-zkhec6xw] {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.receipt[data-astro-cid-zkhec6xw] dt[data-astro-cid-zkhec6xw] {
  display: flex;
  flex: 1;
  gap: .5rem;
}

.receipt[data-astro-cid-zkhec6xw] dt[data-astro-cid-zkhec6xw]:after {
  content: "";
  flex: 1;
  border-bottom: 2px dotted #ffffff8c;
}

.receipt[data-astro-cid-zkhec6xw] dd[data-astro-cid-zkhec6xw] {
  margin: 0;
  font-weight: 700;
}

.steps-wrap[data-astro-cid-zkhec6xw] {
  position: relative;
}

.steps-line[data-astro-cid-zkhec6xw] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--hairline);
}

.steps-line[data-astro-cid-zkhec6xw] span[data-astro-cid-zkhec6xw] {
  display: block;
  height: 100%;
  background: var(--anor);
  transform-origin: 0;
}

.steps[data-astro-cid-zkhec6xw] {
  display: grid;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps[data-astro-cid-zkhec6xw] li[data-astro-cid-zkhec6xw] {
  position: relative;
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding-top: var(--space-xl);
}

.steps[data-astro-cid-zkhec6xw] li[data-astro-cid-zkhec6xw]:before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--anor);
}

.steps[data-astro-cid-zkhec6xw] h3[data-astro-cid-zkhec6xw] {
  font-size: var(--text-lg);
}

.step-n[data-astro-cid-zkhec6xw] {
  font-size: var(--text-xs);
  color: var(--anor);
}

@media (width >= 48rem) {
  .steps[data-astro-cid-zkhec6xw] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

@media (width <= 47.99rem) {
  .steps-line[data-astro-cid-zkhec6xw] {
    width: 2px;
    height: 100%;
    left: 5px;
  }

  .steps-line[data-astro-cid-zkhec6xw] span[data-astro-cid-zkhec6xw] {
    width: 100%;
    transform-origin: top;
  }

  .steps[data-astro-cid-zkhec6xw] li[data-astro-cid-zkhec6xw] {
    padding: 0 0 0 var(--space-xl);
  }

  .steps[data-astro-cid-zkhec6xw] li[data-astro-cid-zkhec6xw]:before {
    top: .35em;
    left: 0;
  }
}

.prices[data-astro-cid-zkhec6xw] {
  padding-top: 0;
}

.rows[data-astro-cid-zkhec6xw] {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.rows[data-astro-cid-zkhec6xw] li[data-astro-cid-zkhec6xw] {
  border-bottom: 1px solid var(--hairline);
}

.rows[data-astro-cid-zkhec6xw] a[data-astro-cid-zkhec6xw] {
  display: grid;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-lg);
  padding: var(--space-lg) var(--space-md);
  text-decoration: none;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}

.r-name[data-astro-cid-zkhec6xw] {
  font-size: var(--text-xl);
  font-weight: 650;
  letter-spacing: -.02em;
}

.r-sum[data-astro-cid-zkhec6xw] {
  color: var(--slate);
}

.r-price[data-astro-cid-zkhec6xw] {
  margin-top: var(--space-xs);
  font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--anor);
  white-space: nowrap;
}

.r-price[data-astro-cid-zkhec6xw] small[data-astro-cid-zkhec6xw] {
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.cur[data-astro-cid-zkhec6xw] {
  font-family: var(--font-sans);
}

.r-arrow[data-astro-cid-zkhec6xw] {
  display: none;
}

.rows[data-astro-cid-zkhec6xw] a[data-astro-cid-zkhec6xw]:hover {
  background: var(--anor);
  color: var(--on-anor);
}

.rows[data-astro-cid-zkhec6xw] a[data-astro-cid-zkhec6xw]:hover .r-sum[data-astro-cid-zkhec6xw], .rows[data-astro-cid-zkhec6xw] a[data-astro-cid-zkhec6xw]:hover .r-price[data-astro-cid-zkhec6xw] {
  color: var(--on-anor);
}

@media (width >= 48rem) {
  .rows[data-astro-cid-zkhec6xw] a[data-astro-cid-zkhec6xw] {
    grid-template-columns: 1fr auto 2rem;
  }

  .r-sum[data-astro-cid-zkhec6xw] {
    grid-row: 2;
  }

  .r-price[data-astro-cid-zkhec6xw] {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    margin-top: 0;
  }

  .r-arrow[data-astro-cid-zkhec6xw] {
    grid-row: 1 / span 2;
    grid-column: 3;
    align-self: center;
  }
}

@media (width >= 64rem) {
  .rows[data-astro-cid-zkhec6xw] a[data-astro-cid-zkhec6xw] {
    grid-template-columns: 12rem 1fr auto 2rem;
  }

  .r-sum[data-astro-cid-zkhec6xw], .r-price[data-astro-cid-zkhec6xw], .r-arrow[data-astro-cid-zkhec6xw] {
    grid-row: auto;
    grid-column: auto;
  }
}

@media (width >= 48rem) {
  .r-arrow[data-astro-cid-zkhec6xw] {
    display: block;
    font-size: var(--text-xl);
    transition: transform var(--dur-ui) var(--ease-out);
  }

  .rows[data-astro-cid-zkhec6xw] a[data-astro-cid-zkhec6xw]:hover .r-arrow[data-astro-cid-zkhec6xw] {
    transform: translateX(4px);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (height >= 38rem) {
    .stage[data-astro-cid-zkhec6xw] {
      height: calc(var(--avail) + 75svh);
      view-timeline: --stage block;
      view-timeline-inset: var(--header-h) 0;
    }

    .hero[data-astro-cid-zkhec6xw] {
      position: sticky;
      top: var(--header-h);
      height: var(--avail);
      overflow: clip;
    }

    .flood[data-astro-cid-zkhec6xw] {
      display: block;
      animation: cubic-bezier(.55, 0, .85, .35) both flood;
      animation-timeline: --stage;
      animation-range: contain contain 92%;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .steps-line[data-astro-cid-zkhec6xw] span[data-astro-cid-zkhec6xw] {
      animation: linear both draw-x;
      animation-timeline: view();
      animation-range: cover 20% cover 55%;
    }

    .art[data-astro-cid-zkhec6xw] > [data-astro-cid-zkhec6xw] {
      animation: none;
      animation-timeline: view();
      animation-range: entry cover 40%;
    }

    .mini-phone[data-astro-cid-zkhec6xw] {
      animation-name: phone-up;
    }

    .bubble[data-astro-cid-zkhec6xw] {
      animation-name: message-in;
    }

    .preview[data-astro-cid-zkhec6xw] {
      animation-name: card-pop;
    }

    .receipt[data-astro-cid-zkhec6xw] {
      animation-name: print;
    }

    @keyframes draw-x {
      from {
        transform: scaleX(0);
      }
    }

    @keyframes draw-y {
      from {
        transform: scaleY(0);
      }
    }

    @keyframes phone-up {
      from {
        transform: translateY(3rem) rotate(-8deg);
      }

      to {
        transform: none;
      }
    }

    @keyframes message-in {
      from {
        opacity: 0;
        transform: translate(-2rem, 2.5rem) rotate(6deg) scale(.9);
      }

      to {
        transform: rotate(-2deg);
      }
    }

    @keyframes card-pop {
      from {
        opacity: 0;
        transform: scale(.8) rotate(3deg);
      }
    }

    @keyframes print {
      from {
        clip-path: inset(0 0 100%);
        transform: translateY(-1rem);
      }

      to {
        clip-path: inset(0 0 -1rem);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) and (width <= 47.99rem) {
    .steps-line[data-astro-cid-zkhec6xw] span[data-astro-cid-zkhec6xw] {
      animation-name: draw-y;
    }
  }

  @media (prefers-reduced-motion: no-preference) and (height >= 38rem) {
    .work[data-astro-cid-zkhec6xw] {
      --pad: var(--gutter);
      --gap: 1.25rem;
      --card-w: max(14rem, min(100vw - 2 * var(--pad) - 3.5rem, (var(--avail) - 27rem) * 1.6));
      --end-w: calc(var(--card-w) * .85);
      --travel: calc(2 * var(--pad) + 2 * var(--card-w) + var(--end-w) + 2 * var(--gap) - 100vw);
      height: calc(var(--avail) + var(--travel));
      padding: 0;
      view-timeline: --work block;
      view-timeline-inset: var(--header-h) 0;
    }

    .work-pin[data-astro-cid-zkhec6xw] {
      position: sticky;
      top: var(--header-h);
      height: var(--avail);
      overflow: clip;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto 1fr auto;
      padding-block: var(--space-lg) var(--space-md);
    }

    .work-head[data-astro-cid-zkhec6xw] {
      margin-bottom: 0;
    }

    .arrows[data-astro-cid-zkhec6xw] {
      display: none;
    }

    .track[data-astro-cid-zkhec6xw] {
      width: calc(var(--travel) + 100vw);
      gap: var(--gap);
      align-items: center;
      padding: 0 var(--pad);
      overflow: visible;
      scroll-snap-type: none;
      animation: linear both slide;
      animation-timeline: --work;
      animation-range: contain;
    }

    .card[data-astro-cid-zkhec6xw] {
      flex: 0 0 var(--card-w);
    }

    .card-end[data-astro-cid-zkhec6xw] {
      flex-basis: var(--end-w);
    }

    .progress[data-astro-cid-zkhec6xw] {
      display: block;
      height: 2px;
      background: #ffffff40;
    }

    .progress[data-astro-cid-zkhec6xw] span[data-astro-cid-zkhec6xw] {
      display: block;
      height: 100%;
      background: var(--on-anor);
      transform-origin: 0;
      animation: linear both draw-x;
      animation-timeline: --work;
      animation-range: contain;
    }

    @keyframes slide {
      to {
        transform: translateX(calc(-1 * var(--travel)));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) and (height >= 38rem) and (width <= 63.99rem) {
    .more[data-astro-cid-zkhec6xw] {
      display: none;
    }

    .card-end[data-astro-cid-zkhec6xw] .ghost[data-astro-cid-zkhec6xw] {
      aspect-ratio: 16 / 9;
    }

    .work-head[data-astro-cid-zkhec6xw] h2[data-astro-cid-zkhec6xw] {
      font-size: var(--text-3xl);
    }
  }

  @media (prefers-reduced-motion: no-preference) and (height >= 38rem) and (width >= 64rem) {
    .work[data-astro-cid-zkhec6xw] {
      --pad: max(var(--gutter), (100vw - var(--wrap)) / 2);
      --text-w: 17rem;
      --shot-w: min((var(--avail) - 15rem) * 1.6, 100vw - 2 * var(--pad) - var(--text-w) - 9rem);
      --card-w: calc(var(--shot-w) + var(--text-w) + 3rem);
      --end-w: calc(var(--shot-w) * .55);
      --gap: 6rem;
    }

    .work-pin[data-astro-cid-zkhec6xw] {
      padding-block: var(--space-xl) var(--space-lg);
    }

    .card[data-astro-cid-zkhec6xw] {
      grid-template-columns: var(--shot-w) var(--text-w);
      gap: 3rem;
      align-items: center;
    }

    .card-end[data-astro-cid-zkhec6xw] {
      grid-template-columns: 1fr;
    }

    .shot[data-astro-cid-zkhec6xw] {
      margin-bottom: 0;
    }

    .phone[data-astro-cid-zkhec6xw] {
      right: -5%;
      bottom: -9%;
      width: 22%;
      border-width: 5px;
      border-radius: 20px;
    }
  }
}