.hero {
  display: grid;
  position: relative;
}

.hero__content {
  align-content: space-between;
  display: grid;
  gap: var(--space-medium);
  padding: var(--space-neutral) var(--space-medium) 0;
}

.hero__top,
.hero__headline {
  margin-inline: auto;
  width: min(100%, 26em);
}

.hero__top {
  display: grid;
  gap: 1em;
  order: 1;
}

.hero__nav {
  display: none;
}

.hero__nav ul {
  display: grid;
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.525em;
  margin-top: -0.4875em;
}

.hero__nav ul li a {
  color: inherit;
  display: inline-block;
  font-weight: inherit;
  padding-block: 0.125em;
  text-decoration: none;
}

.hero__nav ul li a span {
  color: var(--color-blue);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--color-blue);
  text-decoration-thickness: var(--text-decoration-thickness);
  text-underline-offset: var(--text-underline-offset);
}

.hero__nav ul li a number-flow {
  --active-count-decoration-color: var(--color-blue);
  --active-count-decoration-line: underline;
  --active-count-decoration-thickness: var(--text-decoration-thickness);
  --active-count-underline-offset: var(--text-underline-offset);
}

.hero__tour {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  justify-content: center;
}

.hero__tour .button {
  box-shadow: var(--box-shadow-intro);
}

.hero__or {
  color: oklch(var(--oklch-ink) / 0.7);
  flex: none;
  font-size: var(--font-size-xxx-small);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  line-height: 1;
}

.hero__tour-button {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.3em;
  text-align: left;
}

.hero__tour-button figure {
  aspect-ratio: 16 / 9;
  display: grid;
  flex: none;
  font-size: var(--font-size-small);
  height: 2.6em;
  overflow: clip;
  place-items: center;
  position: relative;
}

.hero__tour-button figure img {
  aspect-ratio: 16 / 9;
  display: block;
  grid-area: 1 / 1;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.hero__tour-button figure:after {
  background-size: 0.6875em auto;
  height: 1.25em;
  width: 1.25em;
}

.hero__tour-button div {
  display: grid;
  gap: 0.1em;
}

.hero__tour-button strong {
  color: var(--color-ink);
  font-size: var(--font-size-x-small);
  font-weight: 500;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-xx-tight);
}

.hero__tour-button span {
  color: oklch(var(--oklch-ink) / 0.85);
  font-size: var(--font-size-xx-small);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-xx-tight);
}

.hero__headline {
  align-self: end;
  display: grid;
  gap: 1.05em;
  position: relative;
  text-align: center;
}

.hero__headline h1 {
  font-size: var(--font-size-xxx-large);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-tight);
  line-height: calc(var(--line-height-x-tight) - 0.05);
  margin-bottom: -0.14em;
  margin-top: -0.14em;
  text-wrap: balance;
}

.hero__headline h2 {
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  margin-bottom: -0.29em;
  margin-top: -0.29em;
  text-wrap: balance;
}

.hero__project {
  display: grid;
  margin-top: var(--space-neutral);
  padding: 0 var(--space-medium) var(--space-neutral);
}

.hero__project > svg {
  display: none;
}

.hero__browser {
  --browser-bar: rgb(255 255 255);
  --browser-edge: rgb(41 53 60 / 0.13);
  --browser-hairline: rgb(41 53 60 / 0.17);
  --browser-hover: rgb(41 53 60 / 0.08);
  --browser-ink: rgb(41 53 60);
  --browser-ink-hover: rgb(13 20 24);
  --browser-icon: rgb(109 118 123);
  --browser-line: calc(100cqi / 1088);

  border-radius: 0.3125em;
  box-shadow: var(--box-shadow-card);
  container-type: inline-size;
  display: grid;
  grid-template-rows: auto 1fr;
  margin-inline: auto;
  overflow: clip;
  position: relative;
  width: min(100%, 26em);
}

.hero__browser:after {
  border: var(--browser-line) solid var(--browser-edge);
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.hero__browser-bar {
  --bpx: calc(100cqi / 744);
  --bar-dot: round(calc(12 * var(--bpx)), 2px);
  --bar-pill: round(calc(30 * var(--bpx)), 2px);

  align-items: center;
  background: var(--browser-bar);
  border-block: var(--browser-line) solid var(--browser-edge);
  border-top-color: transparent;
  display: grid;
  gap: calc(12 * var(--bpx));
  grid-template-columns: auto auto 1fr;
  padding: round(calc(8 * var(--bpx)), 1px);
  user-select: none;
}

.hero__browser-dots {
  display: flex;
  gap: calc(8 * var(--bpx));
  grid-area: 1 / 1;
  padding-inline: calc((var(--bar-pill) - var(--bar-dot)) / 2) calc(4 * var(--bpx));
}

.hero__browser-dots i {
  background: rgb(237 106 94);
  border-radius: 50%;
  height: var(--bar-dot);
  width: var(--bar-dot);
}

.hero__browser-dots i:nth-child(2) {
  background: rgb(245 191 79);
}

.hero__browser-dots i:nth-child(3) {
  background: rgb(97 197 84);
}

.hero__browser-bar svg {
  fill: none;
  flex: none;
  height: calc(15 * var(--bpx));
  stroke: var(--browser-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  width: calc(15 * var(--bpx));
}

.hero__browser-pill {
  align-items: center;
  border: var(--browser-line) solid var(--browser-hairline);
  border-radius: calc(var(--bar-pill) / 2);
  box-shadow: 0 calc(1 * var(--bpx)) calc(2 * var(--bpx)) rgb(0 0 0 / 0.02);
  display: flex;
  height: var(--bar-pill);
}

.hero__browser-nav {
  grid-area: 1 / 2;
}

.hero__browser-nav i {
  --min: 1px;
  --width: max(var(--browser-line), var(--min));

  align-self: stretch;
  background: var(--browser-hairline);
  margin-block: calc(7 * var(--bpx));
  margin-inline-end: calc(var(--browser-line) - var(--width));
  width: var(--width);
}

@media(min-resolution: 2x) {

  .hero__browser-nav i {
    --min: 0.5px;
  }

}

@media(min-resolution: 3x) {

  .hero__browser-nav i {
    --min: calc(1px / 3);
  }

}

.hero__browser-back,
.hero__browser-forward {
  align-self: stretch;
  display: grid;
  place-items: center;
  width: calc(30 * var(--bpx));
}

.hero__browser-back {
  background: none;
  border: 0;
  border-radius: calc(var(--bar-pill) / 2) 0 0 calc(var(--bar-pill) / 2);
  isolation: isolate;
  padding: 0;
  position: relative;
}

.hero__browser-back:before {
  aspect-ratio: 1;
  background: var(--browser-hover);
  border-radius: 50%;
  content: "";
  height: round(calc(var(--bar-pill) * 0.75), 2px);
  inset: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  transition: opacity var(--transition), scale var(--transition);
  transition-timing-function: ease, cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: -1;
}

.hero__browser-nav svg {
  height: calc(23 * var(--bpx));
  opacity: 0.3;
  stroke-width: 1.25;
  transition: opacity var(--transition), stroke var(--transition), scale var(--transition);
  transition-timing-function: ease, ease, cubic-bezier(0.34, 1.2, 0.64, 1);
  width: calc(23 * var(--bpx));
}

.hero__browser-back:enabled {
  cursor: pointer;
}

.hero__browser-back:enabled svg {
  opacity: 1;
  stroke: var(--browser-ink);
}

@media(hover: hover) {

  .hero__browser-back:enabled:hover:before {
    opacity: 1;
  }

  .hero__browser-back:enabled:hover svg {
    stroke: var(--browser-ink-hover);
  }

}

.hero__browser-back:focus-visible {
  outline: none;
}

.hero__browser-back:focus-visible:before {
  box-shadow: 0 0 0 1px var(--browser-ink);
  opacity: 1;
}

.hero__browser-back:focus-visible svg {
  stroke: var(--browser-ink-hover);
}

.hero__browser-back:enabled:active:before,
.hero__browser-back:enabled:active svg {
  scale: 0.88;
}

.hero__browser-url {
  gap: calc(6 * var(--bpx));
  grid-area: 1 / 1 / 2 / -1;
  justify-self: center;
  padding-inline: calc(11 * var(--bpx)) calc(8 * var(--bpx));
  width: min(100%, calc(400 * var(--bpx)));
}

.hero__browser-url span {
  color: var(--browser-ink);
  flex: 1;
  font-size: calc(13 * var(--bpx));
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

@media(prefers-color-scheme: dark) {

  .hero__browser {
    --browser-bar: rgb(27 41 48);
    --browser-edge: rgb(225 229 232 / 0.22);
    --browser-hairline: rgb(225 229 232 / 0.2);
    --browser-hover: rgb(225 229 232 / 0.12);
    --browser-ink: rgb(225 229 232);
    --browser-ink-hover: rgb(255 255 255);
    --browser-icon: rgb(168 175 179);
  }

}

.hero__project .project__screen {
  background: var(--app-canvas);
}

.hero__more {
  display: grid;
  font-size: var(--font-size-xxx-small);
  padding-inline: var(--space-medium);
  text-align: center;
}

.hero__more p {
  --open: 0;

  font-size: var(--font-size-xx-large);
  font-weight: 400;
  justify-self: center;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  margin-bottom: -0.392em;
  margin-top: -0.54em;
  position: relative;
  text-wrap: pretty;
  width: max-content;
}

.hero__more p a {
  padding-block: 0.75em;
}

.hero__more p:has(a:focus-visible) {
  --open: 1;
}

.hero__sticker {
  display: block;
  pointer-events: none;
  position: absolute;
  rotate: calc(var(--tilt) + var(--away) * var(--spin) * var(--open));
  top: 50%;
  transition:
    rotate var(--transition-slow),
    translate var(--transition-slow)
  ;
  transition-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1);
  translate:
    calc(var(--away) * var(--push) * var(--open))
    calc(-50% + var(--rise) + var(--drift) * var(--open))
  ;
  width: var(--size);
}

.hero__sticker picture {
  display: contents;
}

.hero__sticker img,
.hero__sticker::before,
.hero__sticker::after {
  background: var(--color-white);
  border: 0.1em solid var(--color-white);
  box-shadow:
    0 0.03em 0.1em oklch(var(--oklch-black) / 0.12),
    0 0.2em 0.5em -0.2em oklch(var(--oklch-black) / 0.16)
  ;
}

.hero__sticker img {
  display: block;
  height: auto;
  position: relative;
  width: 100%;
}

.hero__sticker::before,
.hero__sticker::after {
  box-shadow:
    0 0.02em 0.08em oklch(var(--oklch-black) / 0.08),
    0 0.15em 0.4em -0.2em oklch(var(--oklch-black) / 0.1)
  ;
  content: "";
  inset: 0;
  position: absolute;
  rotate: calc(var(--card-r) * (1 + (var(--fan) - 1) * var(--open)));
  transform-origin: var(--card-o) 100%;
  transition:
    rotate var(--transition-slow),
    translate var(--transition-slow)
  ;
  transition-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1);
  translate: calc(var(--card-x) * (1 + (var(--fan) - 1) * var(--open))) 0;
  z-index: -1;
}

.hero__sticker::before {
  --card-o: var(--b1-o);
  --card-r: var(--b1-r);
  --card-x: var(--b1-x);
}

.hero__sticker::after {
  --card-o: var(--b2-o);
  --card-r: var(--b2-r);
  --card-x: var(--b2-x);
}

.hero__sticker--left {
  --away: -1;

  right: calc(100% + var(--offset));
}

.hero__sticker--right {
  --away: 1;

  left: calc(100% + var(--offset));
}

.hero__sticker--front {
  --drift: 0.25em;
  --offset: 0.85em;
  --push: 0.3em;
  --rise: 0.1em;
  --spin: 4deg;
}

.hero__sticker--back {
  --offset: 2.35em;
  --spin: 6deg;
}

.hero__sticker--left.hero__sticker--back {
  --b1-o: 60%;
  --b1-r: -6deg;
  --b1-x: -0.08em;
  --b2-o: 35%;
  --b2-r: 5deg;
  --b2-x: 0.1em;
  --drift: -0.05em;
  --fan: 1.3;
  --push: 0.45em;
  --rise: -0.3em;
  --size: 2.45em;
  --tilt: -11deg;
}

.hero__sticker--left.hero__sticker--front {
  --b1-o: 40%;
  --b1-r: 7deg;
  --b1-x: 0.12em;
  --b2-o: 70%;
  --b2-r: -4deg;
  --b2-x: -0.06em;
  --fan: 1.2;
  --size: 3.1em;
  --tilt: -4deg;
}

.hero__sticker--right.hero__sticker--back {
  --b1-o: 45%;
  --b1-r: 5deg;
  --b1-x: 0.08em;
  --b2-o: 55%;
  --b2-r: -9deg;
  --b2-x: -0.12em;
  --drift: -0.15em;
  --fan: 1.25;
  --push: 0.35em;
  --rise: -0.25em;
  --size: 2.6em;
  --tilt: 10deg;
}

.hero__sticker--right.hero__sticker--front {
  --b1-o: 65%;
  --b1-r: -8deg;
  --b1-x: -0.1em;
  --b2-o: 30%;
  --b2-r: 4deg;
  --b2-x: 0.05em;
  --fan: 1.35;
  --size: 3em;
  --tilt: 3deg;
}

@media(hover: hover) {

  .hero__nav ul li a span {
    transition:
      color var(--transition),
      text-decoration-color var(--transition)
    ;
  }

  .hero__nav ul li a:focus span,
  .hero__nav ul li a:hover span {
    color: var(--color-ink);
    text-decoration-color: var(--color-ink);
  }

  .hero__nav ul li a:focus number-flow,
  .hero__nav ul li a:hover number-flow {
    --active-count-decoration-color: var(--color-ink);
  }

  .hero__more p:has(a:hover) {
    --open: 1;
  }

}

@media(prefers-reduced-motion: reduce) {

  .hero__sticker,
  .hero__sticker::before,
  .hero__sticker::after {
    transition: none;
  }

}

@media(max-width: 24.9375em) {

  .hero__or {
    display: none;
  }

}

@media(min-width: 64em) {

  .hero {
    grid-template-columns: 1fr 1fr;
  }

  .hero__content {
    align-content: center;
    gap: var(--space-neutral);
    grid-column: 2;
    grid-row: 1;
    grid-template-rows: auto auto;
    padding: var(--space-medium) var(--space-medium) var(--space-neutral) var(--space-neutral);
  }

  .hero__nav {
    display: block;
  }

  .hero__top {
    grid-row: 1;
    order: 0;
  }

  .hero__top,
  .hero__headline {
    margin-inline: initial;
    width: auto;
  }

  .hero__headline {
    grid-row: 2;
    text-align: left;
  }

  .hero__tour {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .hero__tour .button {
    flex: none;
  }

  .hero__content :is(.hero__tour .button, .hero__or) {
    display: none;
  }

  .hero__project {
    align-content: start;
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
    padding: var(--space-medium) 0 var(--space-neutral) var(--space-medium);
  }

  .hero__browser {
    margin-inline: initial;
    width: auto;
  }

  .hero__more {
    grid-column: 1;
    grid-row: 2;
    padding: 0 0 0 var(--space-medium);
  }

}