.showcase-phone-device {
  --showcase-phone-ink: #171817;
  --showcase-phone-muted: #89847c;
  --showcase-phone-surface: #fff;
  --showcase-phone-canvas: #fbfaf7;
  --showcase-phone-border: #e8e3dc;
  --showcase-phone-accent: #7658df;
  --showcase-phone-accent-gradient: linear-gradient(105deg, #7e57f2, #8d5af1 45%, #6040d5);
  --showcase-phone-radius: 14cqw;
  container-type: inline-size;
  aspect-ratio: 9 / 19.42;
  color: var(--showcase-phone-ink);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  transform-style: preserve-3d;
}

.showcase-phone-device .showcase-phone-button {
  position: absolute;
  z-index: -1;
  left: -1.7cqw;
  width: 1.7cqw;
  border-radius: 1.4cqw 0 0 1.4cqw;
  background: linear-gradient(#abcbd9, #f7fbfc 46%, #7799aa);
  box-shadow: -.7cqw .3cqw 1.6cqw rgba(49, 77, 91, .24);
  transform: translateZ(-2px);
}

.showcase-phone-device .showcase-phone-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 2.05cqw;
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: var(--showcase-phone-radius);
  background:
    linear-gradient(112deg, #f9fdff 0%, #8cc7e2 17%, #eef1ed 42%, #efd7ca 62%, #79bbd8 82%, #faffff 100%);
  box-shadow:
    -4.7cqw 3.7cqw 8cqw rgba(43, 148, 196, .2),
    5cqw 4cqw 9.3cqw rgba(229, 128, 80, .16),
    0 11.3cqw 22.7cqw rgba(37, 47, 54, .28),
    inset 0 0 0 1px rgba(43, 65, 76, .22),
    inset 0 0 5cqw rgba(255, 255, 255, .92);
}

.showcase-phone-device .showcase-phone-frame::before {
  position: absolute;
  z-index: 0;
  inset: 1cqw;
  border: .66cqw solid rgba(74, 96, 106, .28);
  border-radius: calc(var(--showcase-phone-radius) - 1cqw);
  content: "";
  pointer-events: none;
}

.showcase-phone-device .showcase-phone-frame::after {
  content: none;
}

.showcase-phone-device .showcase-phone-screen {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--showcase-phone-radius) - 2.7cqw);
  color: var(--showcase-phone-ink);
  background: var(--showcase-phone-canvas);
  box-shadow: inset 0 0 0 1px rgba(21, 27, 31, .1);
  font-family: inherit;
}

.showcase-phone-device .showcase-phone-glass {
  position: absolute;
  z-index: 40;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .38), transparent 13%, transparent 68%, rgba(255, 255, 255, .2) 81%, transparent 91%);
  mix-blend-mode: screen;
}

.showcase-phone-device .showcase-phone-status {
  position: relative;
  z-index: 30;
  display: grid;
  width: 100%;
  height: 8.2cqw;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.5cqw 5cqw 0;
  font-size: 2.05cqw;
  font-weight: 820;
}

.showcase-phone-device .showcase-phone-island {
  display: block;
  width: 22cqw;
  height: 6.1cqw;
  border-radius: 999px;
  background: #090a09;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.showcase-phone-device .showcase-phone-status-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6cqw;
}

.showcase-phone-device .showcase-phone-signal {
  display: flex;
  height: 2.6cqw;
  align-items: flex-end;
  gap: .55cqw;
}

.showcase-phone-device .showcase-phone-signal i {
  display: block;
  width: .72cqw;
  border-radius: 1px;
  background: var(--showcase-phone-ink);
}

.showcase-phone-device .showcase-phone-signal i:nth-child(1) { height: 1.25cqw; }
.showcase-phone-device .showcase-phone-signal i:nth-child(2) { height: 1.9cqw; }
.showcase-phone-device .showcase-phone-signal i:nth-child(3) { height: 2.55cqw; }

.showcase-phone-device .showcase-phone-battery {
  position: relative;
  display: block;
  width: 4.1cqw;
  height: 2.3cqw;
  overflow: hidden;
  border: .38cqw solid var(--showcase-phone-ink);
  border-radius: .75cqw;
  background: #34c759;
  background-clip: padding-box;
}

.showcase-phone-device .showcase-phone-battery::before {
  content: none;
}

.showcase-phone-device .showcase-phone-battery::after {
  content: none;
}

.showcase-phone-device .showcase-phone-appbar {
  position: relative;
  z-index: 10;
  display: grid;
  height: 9.2cqw;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  padding: 0 4.1cqw;
  border-bottom: 1px solid var(--showcase-phone-border);
  background: rgba(251, 250, 247, .96);
  box-shadow: 0 2.5cqw 3cqw var(--showcase-phone-canvas);
  backdrop-filter: blur(12px);
}

.showcase-phone-device .intro-phone-appbar.showcase-phone-appbar {
  margin-right: -4.1cqw;
  margin-left: -4.1cqw;
}

.showcase-phone-device .showcase-phone-wordmark {
  display: block;
  width: 12cqw;
  height: auto;
  justify-self: center;
  font-size: 0;
  line-height: 0;
  filter: brightness(0);
}

.showcase-phone-device .showcase-phone-dock {
  position: absolute;
  z-index: 12;
  inset: auto 3.6cqw 3.5cqw;
  display: grid;
  height: 12cqw;
  grid-template-columns: minmax(0, 1fr) 7.8cqw 7.8cqw;
  align-items: center;
  gap: 1cqw;
  padding: .9cqw 1.2cqw .9cqw 3cqw;
  border: 1px solid rgba(219, 214, 205, .9);
  border-radius: 999px;
  color: #76736f;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 .8cqw 2.4cqw rgba(55, 45, 36, .1), 0 3cqw 7cqw rgba(55, 45, 36, .11);
  backdrop-filter: blur(15px);
}

.showcase-phone-device .showcase-phone-dock-copy {
  min-width: 0;
  overflow: visible;
  color: #77746f;
  font-size: 3.9cqw;
  font-weight: 450;
  letter-spacing: -.025em;
  line-height: 1.25;
  white-space: nowrap;
}

.showcase-phone-device .showcase-phone-dock-mic,
.showcase-phone-device .showcase-phone-dock-action {
  display: grid;
  width: 7.8cqw;
  height: 7.8cqw;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 .8cqw 2.7cqw rgba(49, 47, 43, .12);
}

.showcase-phone-device .showcase-phone-dock-mic {
  color: #171817;
}

.showcase-phone-device .showcase-phone-dock-mic svg {
  width: 4.6cqw;
  height: 4.6cqw;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.showcase-phone-device .showcase-phone-dock-action {
  border: 1px solid rgba(150, 148, 143, .25);
  color: #999792;
}

.showcase-phone-device .showcase-phone-dock-action svg {
  width: 4.4cqw;
  height: 4.4cqw;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.showcase-phone-device :is(.intro-phone-try-on-button, .system-motion-query) {
  background: var(--showcase-phone-accent-gradient);
}

.showcase-phone-device :is(.intro-phone-pick-card, .intro-phone-availability, .system-motion-denim-card, .system-motion-coffee-card) {
  border-color: var(--showcase-phone-border);
  background-color: var(--showcase-phone-surface);
}

.showcase-phone-device :is(.system-motion-bubble, .system-motion-denim-card, .system-motion-coffee-card) {
  border-radius: 4.8cqw;
}

.showcase-phone-device :is(.intro-phone-product-copy > small, .system-motion-card-label, .system-motion-bubble small) {
  color: var(--showcase-phone-accent);
}

.showcase-phone-device .system-motion-thread-window {
  inset: 18.2cqw 0 15cqw;
}

.showcase-phone-device .system-motion-thread {
  gap: 2.2cqw;
  padding: 3.3cqw 3.6cqw 7cqw;
}

.showcase-phone-device .system-motion-bubble {
  padding: 2.8cqw 3.2cqw;
  border-color: var(--showcase-phone-border);
  box-shadow: 0 2cqw 5.3cqw rgba(47, 40, 34, .05);
}

.showcase-phone-device .system-motion-bubble small {
  margin-bottom: 1cqw;
  font-size: 1.75cqw;
}

.showcase-phone-device .system-motion-bubble p {
  font-size: 2.75cqw;
  line-height: 1.38;
}

.showcase-phone-device .system-motion-typing {
  gap: 1cqw;
  padding: 2.6cqw 3.2cqw;
  border-color: var(--showcase-phone-border);
  border-radius: 4.8cqw 4.8cqw 4.8cqw 1.5cqw;
}

.showcase-phone-device .system-motion-typing i {
  width: 1.3cqw;
  height: 1.3cqw;
}

.showcase-phone-device .system-motion-results {
  gap: 2.2cqw;
}

.showcase-phone-device .system-motion-denim-card {
  min-height: 45cqw;
}

.showcase-phone-device .system-motion-denim-copy {
  padding: 3.4cqw;
}

.showcase-phone-device .system-motion-card-label {
  font-size: 1.75cqw;
}

.showcase-phone-device .system-motion-denim-copy strong {
  margin-top: 1.5cqw;
  font-size: 3.2cqw;
}

.showcase-phone-device .system-motion-denim-copy p {
  margin-top: 1.2cqw;
  font-size: 2cqw;
}

.showcase-phone-device .system-motion-card-footer {
  gap: 2cqw;
  padding-top: 2.2cqw;
}

.showcase-phone-device .system-motion-card-footer b {
  font-size: 2.6cqw;
}

.showcase-phone-device .system-motion-card-footer span {
  padding: 1.5cqw 2.2cqw;
  font-size: 1.7cqw;
}

.showcase-phone-device .system-motion-route {
  gap: 2.2cqw;
  padding: 0 2cqw;
  font-size: 1.8cqw;
}

.showcase-phone-device .system-motion-route > span {
  width: 5cqw;
  height: 5cqw;
  font-size: 1.6cqw;
}

.showcase-phone-device .system-motion-coffee-card {
  min-height: 35cqw;
}

.showcase-phone-device .system-motion-coffee-copy {
  padding: 3.6cqw;
}

.showcase-phone-device .system-motion-coffee-copy strong {
  margin-top: 1.2cqw;
  font-size: 3.2cqw;
}

.showcase-phone-device .system-motion-coffee-copy p {
  margin-top: 1.2cqw;
  font-size: 2cqw;
}

.showcase-phone-device .system-motion-coffee-arrow {
  right: 3.4cqw;
  bottom: 3.4cqw;
  width: 7cqw;
  height: 7cqw;
  font-size: 3cqw;
}