.showcase-surface--apps {
  min-height: 38rem;
  overflow: visible;
  border: 0;
  background: transparent;
}

.showcase-panel--apps {
  --apps-focus: 0;
  --apps-to-web: 0;
}

.app-product-deck {
  position: relative;
  width: 100%;
  min-height: 100%;
  overflow: visible;
  perspective: 100rem;
  isolation: isolate;
  transform: rotateX(var(--pointer-tilt-x, 0deg)) rotateY(var(--pointer-tilt-y, 0deg));
  transform-origin: 56% 48%;
  transition: transform 160ms linear;
}

.app-product-deck::before,
.app-product-deck::after {
  position: absolute;
  z-index: -3;
  content: "";
  pointer-events: none;
}

.app-product-deck::before {
  inset: 5% 2% 4% 4%;
  border: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent);
  background:
    linear-gradient(90deg, transparent 0 49.9%, color-mix(in srgb, var(--color-ink) 11%, transparent) 50%, transparent 50.1%),
    linear-gradient(0deg, transparent 0 49.9%, color-mix(in srgb, var(--color-ink) 8%, transparent) 50%, transparent 50.1%);
  opacity: calc(0.48 - (var(--apps-focus) * 0.18));
  transform: perspective(90rem) rotateX(calc(2deg - (var(--apps-focus) * 2deg)))
    rotateY(calc(-2deg + (var(--apps-focus) * 2deg)));
}

.app-product-deck::after {
  top: 1%;
  right: -5%;
  bottom: -2%;
  width: 64%;
  background:
    radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--color-violet) 32%, transparent) 0, transparent 42%),
    radial-gradient(circle at 72% 68%, color-mix(in srgb, var(--color-cyan) 21%, transparent) 0, transparent 36%);
  filter: saturate(1.15);
  opacity: calc(0.34 + (var(--apps-focus) * 0.38));
  transform: translate3d(calc(var(--apps-focus) * -4%), 0, -2rem)
    scale(calc(0.82 + (var(--apps-focus) * 0.18)));
}

.app-product-deck__axis {
  position: absolute;
  z-index: 1;
  top: 4%;
  bottom: 3%;
  left: calc(52% + (var(--apps-focus) * -3%));
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-violet) 18%, var(--color-cyan) 78%, transparent);
  box-shadow: 0 0 1.1rem color-mix(in srgb, var(--color-cyan) 28%, transparent);
  opacity: calc(0.34 + (var(--apps-focus) * 0.52));
  transform: scaleY(calc(0.58 + (var(--apps-focus) * 0.42)));
  transform-origin: 50% 50%;
}

.app-product-card {
  position: absolute;
  z-index: 3;
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transform-style: preserve-3d;
}

.app-product-card__number,
.app-product-card__title small {
  display: block;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 580;
  letter-spacing: 0.075em;
  line-height: 1.45;
  text-transform: uppercase;
}

.app-product-card__number {
  position: absolute;
  z-index: 7;
  top: -1.25rem;
  left: 0;
}

.app-product-card__visual {
  position: relative;
  display: block;
  overflow: hidden;
  filter: drop-shadow(0 2.4rem 2.5rem var(--levitation-shadow));
  transition: filter var(--duration-reveal) var(--ease-morph);
}

.app-product-card__visual::after {
  position: absolute;
  z-index: -1;
  right: 8%;
  bottom: -10%;
  left: 8%;
  height: 18%;
  background: radial-gradient(ellipse, var(--levitation-contact), transparent 72%);
  content: "";
  opacity: 0.82;
}

.app-product-card__visual img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.app-product-card__visual--screen {
  border: clamp(0.24rem, 0.45vw, 0.42rem) solid #20212a;
  border-radius: clamp(0.45rem, 0.8vw, 0.72rem);
  background: #20212a;
  box-shadow: 0 0 0 1px var(--levitation-edge);
}

.app-product-card__visual--screen img {
  border-radius: calc(clamp(0.45rem, 0.8vw, 0.72rem) - 0.24rem);
}

.app-product-card__visual--icon img {
  border-radius: 10%;
  box-shadow: 0 0 0 1px var(--levitation-edge);
}

.app-product-card__title {
  position: absolute;
  z-index: 6;
  display: block;
  min-width: max-content;
}

.app-product-card__title strong {
  display: block;
  font-size: clamp(1.2rem, 2.25vw, 2.6rem);
  font-stretch: 84%;
  font-variation-settings: "wdth" 84, "wght" 690;
  font-weight: 690;
  letter-spacing: -0.026em;
  line-height: 0.92;
}

.app-product-card__title small {
  margin-top: 0.55rem;
}

.app-product-card:hover .app-product-card__visual,
.app-product-card:focus-visible .app-product-card__visual {
  filter: drop-shadow(0 2.4rem 2.5rem var(--levitation-shadow))
    drop-shadow(0 0 1.35rem color-mix(in srgb, var(--color-cyan) 45%, transparent));
}

.app-product-card:focus-visible {
  outline: 0;
}

.app-product-card:focus-visible .app-product-card__title strong {
  text-decoration: underline;
  text-decoration-color: var(--color-focus);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}

.app-product-card--launchpad {
  top: 8%;
  left: 0;
  width: min(52%, 39rem);
  transform: translate3d(
      0,
      calc(var(--apps-focus) * -5%),
      0
    )
    rotateY(calc(-7deg + (var(--apps-focus) * 5deg)))
    scale(calc(1 - (var(--apps-focus) * 0.28)));
  transform-origin: 0 0;
}

.app-product-card--launchpad .app-product-card__visual {
  clip-path: inset(
    calc(var(--apps-focus) * 4%)
    calc(var(--apps-focus) * 36%)
    calc(var(--apps-focus) * 34%)
    0
    round 0.65rem
  );
}

.app-product-card--launchpad .app-product-card__title {
  bottom: -1rem;
  left: 2%;
  transform: translateY(100%);
}

.app-product-card--hr {
  z-index: 8;
  top: 7%;
  left: 48%;
  width: min(50%, 42rem);
  height: 84%;
  clip-path: inset(0 0 0 calc(var(--apps-to-web) * 100%) round 1.2rem);
  transform: translate3d(
      calc(((1 - var(--apps-focus)) * 28%) + (var(--apps-to-web) * 100vw)),
      calc((1 - var(--apps-focus)) * -19%),
      3rem
    )
    rotateY(calc((1 - var(--apps-focus)) * 10deg))
    scale(calc(0.58 + (var(--apps-focus) * 0.42)))
    scaleX(calc(1 + (var(--apps-to-web) * 0.78)))
    scaleY(calc(1 + (var(--apps-to-web) * 0.19)));
  transform-origin: 100% 50%;
}

.app-product-card--hr .app-product-card__number {
  top: 0.9rem;
  left: 1.1rem;
  color: color-mix(in srgb, var(--color-ink) 72%, var(--color-violet));
  transform: translate3d(calc((1 - var(--apps-focus)) * -1rem), calc((1 - var(--apps-focus)) * -2.2rem), 0);
}

.app-product-card--hr .app-product-card__visual {
  width: 100%;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--color-violet) 58%, var(--color-ink));
  border-radius: clamp(0.9rem, 1.5vw, 1.35rem);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 92%, var(--color-violet)), var(--color-surface)),
    var(--color-surface);
  box-shadow:
    0 3.8rem 6rem -3.2rem var(--levitation-shadow),
    0 0 0 1px color-mix(in srgb, var(--color-cyan) 14%, transparent);
  clip-path: inset(
    calc((1 - var(--apps-focus)) * 63%)
    calc((1 - var(--apps-focus)) * 58%)
    0
    0
    round clamp(0.9rem, 1.5vw, 1.35rem)
  );
}

.app-product-card--hr .app-product-card__visual > img {
  position: absolute;
  top: calc(1rem + (var(--apps-focus) * 0.8rem));
  left: calc(1rem + (var(--apps-focus) * 0.8rem));
  width: clamp(5.5rem, 20%, 8.25rem);
  border-radius: 10%;
  transform: translate3d(
      calc((1 - var(--apps-focus)) * -0.4rem),
      calc((1 - var(--apps-focus)) * -0.4rem),
      0
    )
    scale(calc(1.15 - (var(--apps-focus) * 0.15)));
  transform-origin: 0 0;
}

.app-product-card__focus-grid {
  position: absolute;
  z-index: 1;
  inset: 1rem 1rem 1rem 27%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(0.45rem, 0.8vw, 0.75rem);
  opacity: var(--apps-focus);
  transform: translate3d(calc((1 - var(--apps-focus)) * 3rem), 0, 0);
}

.app-product-card__focus-grid i {
  border: 1px solid color-mix(in srgb, var(--color-ink) 13%, transparent);
  border-radius: 0.6rem;
  background:
    linear-gradient(90deg, var(--color-violet) 0 18%, transparent 18% 100%),
    color-mix(in srgb, var(--color-ground) 48%, transparent);
  box-shadow: inset 0 0 1.3rem color-mix(in srgb, var(--color-violet) 6%, transparent);
  transform: translate3d(calc((1 - var(--apps-focus)) * 1.6rem), 0, 0)
    scaleX(calc(0.45 + (var(--apps-focus) * 0.55)));
  transform-origin: 0 50%;
}

.app-product-card__focus-grid i:nth-child(2n) {
  background:
    linear-gradient(90deg, var(--color-cyan) 0 24%, transparent 24% 100%),
    color-mix(in srgb, var(--color-ground) 48%, transparent);
  transform: translate3d(calc((1 - var(--apps-focus)) * 2.4rem), 0, 0)
    scaleX(calc(0.34 + (var(--apps-focus) * 0.66)));
}

.app-product-card--hr .app-product-card__title {
  bottom: 1.25rem;
  left: 1.35rem;
  color: var(--color-ink);
  transform: translate3d(calc((1 - var(--apps-focus)) * -0.85rem), calc((1 - var(--apps-focus)) * 4.6rem), 0);
}

.app-product-card--hr .app-product-card__title strong {
  font-size: clamp(1.55rem, 3.4vw, 4rem);
  font-stretch: 82%;
  font-variation-settings: "wdth" 82, "wght" 720;
  letter-spacing: -0.025em;
  line-height: 0.9;
}

.app-product-card--companion,
.app-product-card--transit {
  bottom: 1%;
  width: clamp(6.8rem, 13vw, 10.25rem);
  transform-origin: 50% 100%;
}

.app-product-card--companion {
  left: 39%;
  transform: translate3d(calc(var(--apps-focus) * -47%), calc(var(--apps-focus) * 8%), 1rem)
    rotateZ(calc(-4deg + (var(--apps-focus) * 4deg)))
    scale(calc(1 - (var(--apps-focus) * 0.22)));
}

.app-product-card.app-product-card--transit {
  z-index: 9;
  right: 0;
  transform: translate3d(calc(var(--apps-focus) * -4%), calc(var(--apps-focus) * 13%), 1rem)
    rotateZ(calc(5deg - (var(--apps-focus) * 5deg)))
    scale(calc(1 - (var(--apps-focus) * 0.2)));
}

.app-product-card--companion .app-product-card__visual,
.app-product-card--transit .app-product-card__visual {
  clip-path: inset(0 0 calc(var(--apps-focus) * 42%) 0 round 10%);
}

.app-product-card--companion .app-product-card__title {
  right: calc(100% + 0.9rem);
  bottom: 6%;
  text-align: right;
}

.app-product-card--transit .app-product-card__title {
  right: 0;
  bottom: calc(100% + 0.8rem);
  text-align: right;
}

.app-product-card__icon--dark {
  display: none !important;
}

:root[data-theme="dark"] .app-product-card__icon--light {
  display: none !important;
}

:root[data-theme="dark"] .app-product-card__icon--dark {
  display: block !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-product-card__icon--light {
    display: none !important;
  }

  :root:not([data-theme="light"]) .app-product-card__icon--dark {
    display: block !important;
  }
}

@media (min-width: 48.0625rem) and (min-height: 42rem) and (prefers-reduced-motion: no-preference) {
  .has-showcase-motion .showcase-panel[data-motion-mode="apps"] .showcase-surface--apps {
    min-height: 36rem;
    opacity: 1;
    transform: none;
  }

  .has-horizontal-continuum .showcase-panel[data-motion-mode="apps"][data-continuum-current] .app-product-deck,
  .has-horizontal-continuum .showcase-panel[data-motion-mode="apps"][data-continuum-current] .app-product-card,
  .has-horizontal-continuum .showcase-panel[data-motion-mode="apps"][data-continuum-current] .app-product-card__visual,
  .has-horizontal-continuum .showcase-panel[data-motion-mode="apps"][data-continuum-current] .app-product-card__focus-grid {
    will-change: clip-path, opacity, transform;
  }
}

@media (max-width: 64rem) {
  .app-product-card--launchpad {
    width: 54%;
  }

  .app-product-card--hr {
    left: 46%;
    width: 54%;
  }

  .app-product-card__title strong {
    font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  }
}

@media (max-width: 48rem) {
  .showcase-surface--apps {
    min-height: 44rem;
  }

  .app-product-deck {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 17rem 12rem 10rem;
    min-height: 44rem;
    gap: 1.6rem 1rem;
    transform: none;
  }

  .app-product-deck::before {
    inset: 2% 0 1%;
    transform: none;
  }

  .app-product-deck::after {
    inset: 0 -5% 0 15%;
    width: auto;
  }

  .app-product-deck__axis {
    display: none;
  }

  .app-product-card,
  .app-product-card--hr {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    clip-path: none;
    opacity: 1;
    transform: none;
  }

  .app-product-card--launchpad {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 94%;
    align-self: center;
  }

  .app-product-card--launchpad .app-product-card__visual {
    clip-path: none;
  }

  .app-product-card--launchpad .app-product-card__title {
    right: 0;
    bottom: -0.75rem;
    left: auto;
    text-align: right;
  }

  .app-product-card--hr {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .app-product-card--hr .app-product-card__visual {
    height: 12rem;
    clip-path: none;
  }

  .app-product-card--hr .app-product-card__number {
    top: 0.75rem;
    transform: none;
  }

  .app-product-card--hr .app-product-card__title {
    bottom: 1rem;
    transform: none;
  }

  .app-product-card--companion,
  .app-product-card--transit {
    grid-row: 3;
    width: min(56%, 7.5rem);
    align-self: center;
  }

  .app-product-card--companion {
    grid-column: 1;
    justify-self: start;
  }

  .app-product-card--transit {
    grid-column: 2;
    justify-self: end;
  }

  .app-product-card--companion .app-product-card__visual,
  .app-product-card--transit .app-product-card__visual {
    clip-path: none;
  }

  .app-product-card--companion .app-product-card__title,
  .app-product-card--transit .app-product-card__title {
    top: 50%;
    right: auto;
    bottom: auto;
    left: calc(100% + 0.65rem);
    text-align: left;
    transform: translateY(-50%);
  }

  .app-product-card--transit .app-product-card__title {
    right: calc(100% + 0.65rem);
    left: auto;
    text-align: right;
  }
}

@media (max-width: 34rem) {
  .showcase-surface--apps,
  .app-product-deck {
    min-height: 40rem;
  }

  .app-product-deck {
    grid-template-rows: 15rem 11rem 9rem;
  }

  .app-product-card--launchpad {
    width: 100%;
  }

  .app-product-card--hr .app-product-card__visual {
    height: 11rem;
  }

  .app-product-card--companion,
  .app-product-card--transit {
    width: min(48%, 6.2rem);
  }

  .app-product-card__title strong {
    font-size: 0.94rem;
  }

  .app-product-card__title small,
  .app-product-card__number {
    font-size: 0.52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-product-deck,
  .app-product-deck::before,
  .app-product-deck::after,
  .app-product-card,
  .app-product-card__visual,
  .app-product-card__focus-grid {
    opacity: 1;
    transform: none !important;
  }

  .app-product-card,
  .app-product-card__visual {
    clip-path: none !important;
  }
}