.panel-system .system-motion-story {
  --system-motion-cycle: 22s;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 1500px;
  pointer-events: none;
  isolation: isolate;
}

.panel-system .system-motion-glow {
  position: absolute;
  width: min(58vw, 860px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .7;
  filter: blur(28px);
}

.panel-system .system-motion-glow-blue {
  top: 25%;
  left: 19%;
  background: radial-gradient(circle, rgba(74, 185, 228, .36) 0%, rgba(79, 183, 226, .12) 42%, transparent 72%);
}

.panel-system .system-motion-glow-peach {
  right: 17%;
  bottom: 17%;
  background: radial-gradient(circle, rgba(255, 155, 107, .34) 0%, rgba(246, 158, 116, .1) 43%, transparent 72%);
}

.panel-system.is-active .system-motion-glow-blue {
  animation: system-motion-blue-drift var(--system-motion-cycle) ease-in-out infinite both;
}

.panel-system.is-active .system-motion-glow-peach {
  animation: system-motion-peach-drift var(--system-motion-cycle) ease-in-out infinite both;
}

.panel-system .system-motion-floor {
  position: absolute;
  left: 50%;
  bottom: -11%;
  width: min(54vw, 760px);
  height: 34%;
  opacity: .34;
  background: radial-gradient(ellipse at center, rgba(72, 95, 112, .32), rgba(104, 92, 83, .09) 42%, transparent 72%);
  filter: blur(18px);
  transform: translateX(-50%) rotateX(72deg);
}

.panel-system .system-motion-shadow {
  position: absolute;
  z-index: 0;
  top: calc(50% + min(33svh, 305px));
  left: 50%;
  width: min(25vw, 390px);
  height: 42px;
  border-radius: 50%;
  opacity: .28;
  background: rgba(57, 65, 71, .58);
  filter: blur(18px);
  transform: translate(-50%, -50%) scaleX(.72);
}

.panel-system.is-active .system-motion-shadow {
  animation: system-motion-shadow-breathe var(--system-motion-cycle) ease-in-out infinite both;
}

.panel-system .system-motion-phone-wrap {
  position: relative;
  z-index: 2;
  top: 0;
  left: 0;
  width: min(clamp(246px, 19.4vw, 330px), 40svh);
  aspect-ratio: 9 / 19.42;
  opacity: 1;
  transform: none;
  transform-style: flat;
  will-change: auto;
}

.panel-system.is-active .system-motion-phone-wrap {
  animation: system-motion-phone-drift var(--system-motion-cycle) steps(1, end) infinite both;
}

.panel-system .system-motion-phone-button {
  position: absolute;
  z-index: -1;
  left: -5px;
  width: 6px;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(#abcbd9, #f7fbfc 46%, #7799aa);
  box-shadow: -2px 1px 5px rgba(49, 77, 91, .24);
  transform: translateZ(-2px);
}

.panel-system .system-motion-phone-button-one {
  top: 16%;
  height: 6%;
}

.panel-system .system-motion-phone-button-two {
  top: 25%;
  height: 9%;
}

.panel-system .system-motion-phone-button-three {
  top: 26%;
  right: -5px;
  left: auto;
  height: 13%;
  border-radius: 0 5px 5px 0;
}

.panel-system .system-motion-phone-frame {
  position: absolute;
  inset: 0;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: clamp(34px, 2.7vw, 48px);
  background:
    linear-gradient(116deg, #f9fdff 0%, #8cc7e2 17%, #eef1ed 42%, #efd7ca 62%, #79bbd8 82%, #faffff 100%);
  box-shadow:
    -14px 11px 24px rgba(43, 148, 196, .2),
    15px 12px 28px rgba(229, 128, 80, .16),
    0 34px 68px rgba(37, 47, 54, .28),
    inset 0 0 0 1px rgba(43, 65, 76, .22),
    inset 0 0 15px rgba(255, 255, 255, .92);
}

.panel-system .system-motion-phone-frame::before {
  position: absolute;
  z-index: 0;
  inset: 3px;
  border: 2px solid rgba(74, 96, 106, .28);
  border-radius: clamp(31px, 2.5vw, 44px);
  content: "";
}

.panel-system .system-motion-phone-screen {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(29px, 2.3vw, 41px);
  color: #18191b;
  background:
    radial-gradient(circle at 92% 8%, rgba(241, 226, 255, .5), transparent 26%),
    linear-gradient(180deg, #fffefa 0%, #faf9f7 64%, #f3f1ee 100%);
  box-shadow: inset 0 0 0 1px rgba(21, 27, 31, .1);
  -webkit-font-smoothing: subpixel-antialiased;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

.panel-system .system-motion-phone-frame::after {
  position: absolute;
  z-index: 20;
  inset: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  background: linear-gradient(108deg, rgba(255, 255, 255, .36), transparent 16%, transparent 72%, rgba(255, 255, 255, .18) 84%, transparent 92%);
  mix-blend-mode: screen;
}

.panel-system .system-motion-status {
  position: relative;
  z-index: 10;
  display: grid;
  height: 25px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 4px 14px 0;
  font-size: clamp(6px, .5vw, 8px);
  font-weight: 760;
}

.panel-system .system-motion-status > i {
  width: clamp(50px, 4.2vw, 67px);
  height: clamp(15px, 1.5vw, 21px);
  border-radius: 999px;
  background: #0c0c0d;
}

.panel-system .system-motion-status-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.panel-system .system-motion-signal {
  display: flex;
  height: 8px;
  align-items: flex-end;
  gap: 1px;
}

.panel-system .system-motion-signal i {
  display: block;
  width: 1.5px;
  border-radius: 1px;
  background: #121315;
}

.panel-system .system-motion-signal i:nth-child(1) { height: 3px; }
.panel-system .system-motion-signal i:nth-child(2) { height: 5px; }
.panel-system .system-motion-signal i:nth-child(3) { height: 7px; }

.panel-system .system-motion-battery {
  position: relative;
  display: block;
  width: 11px;
  height: 6px;
  border: 1px solid #121315;
  border-radius: 2px;
}

.panel-system .system-motion-battery::before {
  position: absolute;
  inset: 1px;
  border-radius: 1px;
  content: "";
  background: #121315;
}

.panel-system .system-motion-battery::after {
  position: absolute;
  top: 1px;
  right: -3px;
  width: 1.5px;
  height: 3px;
  border-radius: 0 1px 1px 0;
  content: "";
  background: #121315;
}

.panel-system .system-motion-thread-window {
  position: absolute;
  overflow: hidden;
}

.panel-system .system-motion-thread {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, .48vw, 8px);
  padding: 10px 11px 22px;
  will-change: transform;
}

.panel-system.is-active .system-motion-thread {
  animation: system-motion-thread-scroll var(--system-motion-cycle) cubic-bezier(.5, .04, .18, 1) infinite both;
}

.panel-system .system-motion-bubble {
  max-width: 82%;
  padding: clamp(7px, .58vw, 9px) clamp(8px, .68vw, 11px);
  border: 1px solid #ebe7e1;
  border-radius: 13px 13px 13px 4px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 16px rgba(47, 40, 34, .05);
  opacity: 0;
  transform: translateY(9px) scale(.98);
  transform-origin: left bottom;
}

.panel-system .system-motion-bubble small {
  display: block;
  margin-bottom: 3px;
  color: #7658df;
  font-size: clamp(5px, .45vw, 7px);
  font-weight: 820;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.panel-system .system-motion-bubble p {
  margin: 0;
  font-size: clamp(7px, .62vw, 9.5px);
  line-height: 1.38;
}

.panel-system .system-motion-query {
  align-self: flex-end;
  max-width: 78%;
  border: 0;
  border-radius: 13px 13px 4px 13px;
  color: #fff;
  background: linear-gradient(120deg, #5b35d5, #8b4ce8);
  box-shadow: 0 7px 18px rgba(104, 55, 211, .22);
  transform-origin: right bottom;
}

.panel-system .system-motion-query p {
  width: 24ch;
  font-weight: 680;
}

.panel-system .system-motion-query-typed {
  display: block;
  width: 0;
  max-width: 24ch;
  overflow: hidden;
  white-space: nowrap;
}

.panel-system.is-active .system-motion-greeting {
  animation: system-motion-message-in var(--system-motion-cycle) ease-out infinite both;
}

.panel-system.is-active .system-motion-query {
  animation: system-motion-query-in var(--system-motion-cycle) ease-out infinite both;
}

.panel-system.is-active .system-motion-query-typed {
  animation: system-motion-query-type var(--system-motion-cycle) steps(24, end) infinite both;
}

.panel-system .system-motion-typing {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid #ebe7e1;
  border-radius: 12px 12px 12px 4px;
  opacity: 0;
  background: #fff;
  transform: translateY(7px);
}

.panel-system .system-motion-typing i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8a72df;
}

.panel-system.is-active .system-motion-typing {
  animation: system-motion-typing-in var(--system-motion-cycle) ease-in-out infinite both;
}

.panel-system.is-active .system-motion-typing i {
  animation: system-motion-typing-dot .54s ease-in-out infinite alternate;
}

.panel-system.is-active .system-motion-typing i:nth-child(2) { animation-delay: -.19s; }
.panel-system.is-active .system-motion-typing i:nth-child(3) { animation-delay: -.095s; }

.panel-system.is-active .system-motion-response {
  animation: system-motion-response-in var(--system-motion-cycle) ease-out infinite both;
}

.panel-system .system-motion-results {
  display: grid;
  gap: clamp(6px, .52vw, 8px);
}

.panel-system .system-motion-denim-card,
.panel-system .system-motion-coffee-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(41, 42, 44, .1);
  background: #fff;
  box-shadow: 0 10px 24px rgba(48, 41, 35, .1);
  opacity: 0;
}

.panel-system .system-motion-denim-card {
  display: grid;
  min-height: clamp(112px, 9.3vw, 145px);
  grid-template-columns: 45% 55%;
  border-radius: 16px;
  transform: translateY(14px) scale(.97);
}

.panel-system .system-motion-denim-image {
  position: relative;
  overflow: hidden;
  background: #f0efed;
}

.panel-system .system-motion-denim-image::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(120deg, transparent 45%, rgba(255, 255, 255, .42) 58%, transparent 70%);
  transform: translateX(-130%);
}

.panel-system.is-active .system-motion-denim-image::after {
  animation: system-motion-image-sheen var(--system-motion-cycle) ease-in-out infinite both;
}

.panel-system .system-motion-denim-image img,
.panel-system .system-motion-coffee-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transform-origin: 50% 50%;
  will-change: transform;
}

.panel-system.is-active .system-motion-denim-image img {
  animation: system-motion-result-image-drift var(--system-motion-cycle) cubic-bezier(.42, 0, .22, 1) infinite both;
}

.panel-system.is-active .system-motion-coffee-card > img {
  animation: system-motion-coffee-image-drift var(--system-motion-cycle) cubic-bezier(.42, 0, .22, 1) infinite both;
}

.panel-system .system-motion-denim-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(9px, .76vw, 12px);
}

.panel-system .system-motion-card-label {
  color: #7658df;
  font-size: clamp(5px, .45vw, 7px);
  font-weight: 820;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.panel-system .system-motion-denim-copy strong {
  margin-top: 5px;
  font-size: clamp(9px, .82vw, 12.5px);
  font-weight: 720;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.panel-system .system-motion-denim-copy p {
  margin: 4px 0 0;
  color: #77736c;
  font-size: clamp(6px, .52vw, 8px);
  line-height: 1.3;
}

.panel-system .system-motion-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  padding-top: 7px;
}

.panel-system .system-motion-card-footer b {
  font-size: clamp(8px, .68vw, 10px);
}

.panel-system .system-motion-card-footer span {
  padding: 5px 7px;
  border-radius: 999px;
  color: #fff;
  background: #17191d;
  font-size: clamp(5px, .46vw, 7px);
  font-weight: 740;
}

.panel-system.is-active .system-motion-denim-card {
  animation: system-motion-card-in var(--system-motion-cycle) cubic-bezier(.2, .75, .18, 1) infinite both;
}

.panel-system .system-motion-route {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 0 6px;
  color: #726e67;
  font-size: clamp(5px, .48vw, 7.5px);
  font-weight: 720;
  opacity: 0;
  transform: translateY(7px);
}

.panel-system .system-motion-route > span {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #17191d;
  font-size: 5px;
}

.panel-system .system-motion-route > i {
  height: 1px;
  background: linear-gradient(90deg, rgba(96, 77, 165, .25), rgba(96, 77, 165, .8));
}

.panel-system .system-motion-route > b {
  font-weight: 740;
}

.panel-system.is-active .system-motion-route {
  animation: system-motion-route-in var(--system-motion-cycle) ease-out infinite both;
}

.panel-system .system-motion-coffee-card {
  min-height: clamp(84px, 7.3vw, 112px);
  border-radius: 16px;
  transform: translateY(16px) scale(.97);
}

.panel-system .system-motion-coffee-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(22, 17, 13, .76) 0%, rgba(22, 17, 13, .48) 53%, rgba(22, 17, 13, .05) 100%);
}

.panel-system .system-motion-coffee-copy {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  display: flex;
  width: 65%;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  color: #fff;
}

.panel-system .system-motion-coffee-copy .system-motion-card-label {
  color: #e9d9ff;
}

.panel-system .system-motion-coffee-copy strong {
  margin-top: 4px;
  font-size: clamp(10px, .86vw, 13px);
  line-height: 1.12;
}

.panel-system .system-motion-coffee-copy p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(6px, .5vw, 8px);
}

.panel-system .system-motion-coffee-arrow {
  position: absolute;
  z-index: 3;
  right: 11px;
  bottom: 11px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 50%;
  color: #fff;
  background: rgba(20, 15, 12, .22);
  font-size: 10px;
  backdrop-filter: blur(8px);
}

.panel-system.is-active .system-motion-coffee-arrow {
  animation: system-motion-coffee-arrow-press var(--system-motion-cycle) cubic-bezier(.2, .72, .2, 1) infinite both;
}

.panel-system .system-motion-coffee-tap {
  position: absolute;
  z-index: 5;
  right: 1.6cqw;
  bottom: 1.6cqw;
  display: grid;
  width: 11cqw;
  height: 11cqw;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  opacity: 0;
  background: rgba(118, 88, 223, .82);
  box-shadow: 0 0 0 0 rgba(118, 88, 223, .54), 0 2cqw 5cqw rgba(28, 19, 58, .24);
  transform: scale(1.35);
  backdrop-filter: blur(8px);
}

.panel-system .system-motion-coffee-tap i {
  display: block;
  width: 3cqw;
  height: 3cqw;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(19, 14, 11, .26);
}

.panel-system.is-active .system-motion-coffee-card {
  animation: system-motion-coffee-in var(--system-motion-cycle) cubic-bezier(.2, .75, .18, 1) infinite both;
}

.panel-system.is-active .system-motion-coffee-tap {
  animation: system-motion-coffee-tap var(--system-motion-cycle) cubic-bezier(.16, .8, .22, 1) infinite both;
}

.panel-system.is-active .system-motion-thread-window {
  animation: system-motion-thread-window-out var(--system-motion-cycle) cubic-bezier(.4, 0, .2, 1) infinite both;
}

.panel-system .system-motion-phone-wrap .system-motion-bubble small,
.panel-system .system-motion-phone-wrap .system-motion-card-label {
  font-size: clamp(5px, 2.25cqw, 8px);
  font-weight: 860;
  letter-spacing: .06em;
}

.panel-system .system-motion-phone-wrap .system-motion-bubble p {
  font-size: clamp(6px, 3.15cqw, 10.5px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.32;
}

.panel-system .system-motion-phone-wrap .system-motion-query p {
  font-weight: 720;
}

.panel-system .system-motion-phone-wrap .system-motion-denim-copy strong,
.panel-system .system-motion-phone-wrap .system-motion-coffee-copy strong {
  font-size: clamp(6.5px, 3.5cqw, 11.5px);
  font-weight: 770;
  letter-spacing: -.025em;
}

.panel-system .system-motion-phone-wrap .system-motion-denim-copy p,
.panel-system .system-motion-phone-wrap .system-motion-coffee-copy p {
  font-size: clamp(5px, 2.45cqw, 8px);
  font-weight: 590;
}

.panel-system .system-motion-phone-wrap .system-motion-card-footer b {
  font-size: clamp(5.5px, 2.8cqw, 9.25px);
}

.panel-system .system-motion-phone-wrap .system-motion-card-footer span,
.panel-system .system-motion-phone-wrap .system-motion-route {
  font-size: clamp(4.5px, 2.2cqw, 7.25px);
}

.panel-system .system-motion-cafe-view {
  position: absolute;
  z-index: 8;
  inset: 18.2cqw 0 15cqw;
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  overflow: hidden;
  padding: 3.2cqw 3.6cqw 5.5cqw;
  clip-path: inset(50% 50% 50% 50% round 4.8cqw);
  opacity: 1;
  background: transparent;
  transform: translate3d(0, 26cqw, 0) scale(.8);
  transform-origin: 50% 38%;
  will-change: clip-path, transform;
}

.panel-system.is-active .system-motion-cafe-view {
  animation: system-motion-cafe-view-in var(--system-motion-cycle) cubic-bezier(.2, .72, .18, 1) infinite both;
}

.panel-system .system-motion-cafe-hero {
  position: relative;
  flex: 0 0 50cqw;
  overflow: hidden;
  border-radius: 4.8cqw;
  background: #241a14;
  box-shadow: 0 4cqw 9cqw rgba(44, 34, 26, .16);
  opacity: 1;
  transform: translateY(12cqw) scale(.82);
  transform-origin: 50% 70%;
}

.panel-system .system-motion-cafe-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(24, 17, 12, .74), rgba(24, 17, 12, .32) 62%, rgba(24, 17, 12, .04));
}

.panel-system .system-motion-cafe-hero > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transform-origin: 50% 50%;
  will-change: transform;
}

.panel-system.is-active .system-motion-cafe-hero {
  animation: system-motion-cafe-hero-expand var(--system-motion-cycle) cubic-bezier(.16, .82, .18, 1) infinite both;
}

.panel-system.is-active .system-motion-cafe-hero > img {
  animation: system-motion-cafe-hero-image-drift var(--system-motion-cycle) cubic-bezier(.42, 0, .22, 1) infinite both;
}

.panel-system .system-motion-cafe-hero-copy {
  position: absolute;
  z-index: 2;
  right: 28cqw;
  bottom: 4.2cqw;
  left: 4.2cqw;
  display: flex;
  flex-direction: column;
  color: #fff;
}

.panel-system .system-motion-cafe-hero-copy > span {
  color: #e8d9ff;
  font-size: clamp(5px, 2.2cqw, 7.25px);
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.panel-system .system-motion-cafe-hero-copy strong {
  margin-top: 1.3cqw;
  font-size: clamp(8px, 4.1cqw, 13.5px);
  font-weight: 780;
  letter-spacing: -.035em;
  line-height: 1.04;
}

.panel-system .system-motion-cafe-hero-copy p {
  margin: 1.4cqw 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(5px, 2.45cqw, 8px);
  font-weight: 620;
}

.panel-system .system-motion-cafe-status {
  position: absolute;
  z-index: 2;
  top: 3.6cqw;
  right: 3.6cqw;
  padding: 1.3cqw 2.3cqw;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  color: #fff;
  background: rgba(20, 16, 13, .28);
  font-size: clamp(4.5px, 2.15cqw, 7px);
  font-weight: 760;
  backdrop-filter: blur(10px);
}

.panel-system .system-motion-cafe-section {
  flex: 0 0 auto;
  opacity: 0;
  transform: translateY(7cqw);
}

.panel-system .system-motion-cafe-section > header {
  display: flex;
  height: 6cqw;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3cqw;
}

.panel-system .system-motion-cafe-section > header strong {
  font-size: clamp(6px, 3.05cqw, 10px);
  font-weight: 800;
  letter-spacing: -.025em;
}

.panel-system .system-motion-cafe-section > header span {
  color: #8a8279;
  font-size: clamp(4.5px, 2.15cqw, 7px);
  font-weight: 650;
}

.panel-system.is-active .system-motion-cafe-featured {
  animation: system-motion-cafe-featured-in var(--system-motion-cycle) cubic-bezier(.2, .74, .2, 1) infinite both;
}

.panel-system .system-motion-cafe-rail-window {
  overflow: hidden;
  margin-right: -3.6cqw;
}

.panel-system .system-motion-cafe-rail {
  display: grid;
  width: max-content;
  grid-auto-columns: 35cqw;
  grid-auto-flow: column;
  gap: 2.4cqw;
}

.panel-system.is-active .system-motion-cafe-rail {
  animation: system-motion-cafe-rail-drift var(--system-motion-cycle) cubic-bezier(.42, 0, .22, 1) infinite both;
}

.panel-system .system-motion-cafe-rail-card,
.panel-system .system-motion-cafe-grid > article {
  overflow: hidden;
  border: 1px solid var(--showcase-phone-border, #e8e3dc);
  border-radius: 3.6cqw;
  background: #fff;
  box-shadow: 0 2.4cqw 5cqw rgba(54, 46, 38, .07);
}

.panel-system .system-motion-cafe-rail-card {
  height: 27cqw;
}

.panel-system .system-motion-cafe-rail-card img {
  display: block;
  width: 100%;
  height: 17.5cqw;
  object-fit: cover;
  transform: scale(1.04);
  transform-origin: 50% 50%;
  will-change: transform;
}

.panel-system .system-motion-cafe-rail-card div,
.panel-system .system-motion-cafe-grid article div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4cqw;
  padding: 2.1cqw 2.3cqw;
}

.panel-system .system-motion-cafe-rail-card strong,
.panel-system .system-motion-cafe-grid article strong {
  overflow: hidden;
  font-size: clamp(5px, 2.4cqw, 8px);
  font-weight: 760;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-system .system-motion-cafe-rail-card span,
.panel-system .system-motion-cafe-grid article span {
  color: #7658df;
  font-size: clamp(4.5px, 2.15cqw, 7px);
  font-weight: 800;
}

.panel-system.is-active .system-motion-cafe-menu {
  animation: system-motion-cafe-menu-in var(--system-motion-cycle) cubic-bezier(.2, .74, .2, 1) infinite both;
}

.panel-system .system-motion-cafe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.2cqw;
}

.panel-system .system-motion-cafe-grid > article {
  min-width: 0;
  height: 23.5cqw;
}

.panel-system .system-motion-cafe-grid article img {
  display: block;
  width: 100%;
  height: 15.5cqw;
  object-fit: cover;
  transform: scale(1.04);
  transform-origin: 50% 50%;
  will-change: transform;
}

.panel-system .system-motion-cafe-grid article div {
  padding: 1.7cqw 2cqw;
}

.panel-system.is-active .system-motion-cafe-nearby {
  animation: system-motion-cafe-nearby-in var(--system-motion-cycle) cubic-bezier(.2, .74, .2, 1) infinite both;
}

.panel-system .system-motion-cafe-nearby-window {
  overflow: hidden;
  margin-right: -3.6cqw;
}

.panel-system .system-motion-cafe-nearby-rail {
  display: grid;
  width: max-content;
  grid-auto-columns: 44cqw;
  grid-auto-flow: column;
  gap: 2.4cqw;
}

.panel-system.is-active .system-motion-cafe-nearby-rail {
  animation: system-motion-cafe-nearby-drift var(--system-motion-cycle) cubic-bezier(.42, 0, .22, 1) infinite both;
}

.panel-system .system-motion-cafe-nearby-card {
  display: grid;
  height: 20cqw;
  grid-template-columns: 17cqw minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--showcase-phone-border, #e8e3dc);
  border-radius: 3.6cqw;
  background: #fff;
  box-shadow: 0 2.4cqw 5cqw rgba(54, 46, 38, .07);
}

.panel-system .system-motion-cafe-nearby-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transform-origin: 50% 50%;
  will-change: transform;
}

.panel-system .system-motion-cafe-rail-card:nth-child(even) img,
.panel-system .system-motion-cafe-grid article:nth-child(even) img,
.panel-system .system-motion-cafe-nearby-card:nth-child(even) img {
  --system-motion-image-pan: 1.6%;
  --system-motion-image-pan-return: -.8%;
  transform-origin: 72% 46%;
}

.panel-system .system-motion-cafe-rail-card:nth-child(odd) img,
.panel-system .system-motion-cafe-grid article:nth-child(odd) img,
.panel-system .system-motion-cafe-nearby-card:nth-child(odd) img {
  --system-motion-image-pan: -1.6%;
  --system-motion-image-pan-return: .8%;
  transform-origin: 28% 52%;
}

.panel-system.is-active .system-motion-cafe-rail-card img,
.panel-system.is-active .system-motion-cafe-grid article img,
.panel-system.is-active .system-motion-cafe-nearby-card img {
  animation: system-motion-cafe-product-image-drift var(--system-motion-cycle) cubic-bezier(.42, 0, .22, 1) infinite both;
}

.panel-system .system-motion-cafe-nearby-card div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 1.5cqw;
  padding: 2.2cqw;
}

.panel-system .system-motion-cafe-nearby-card strong {
  overflow: hidden;
  font-size: clamp(5px, 2.45cqw, 8px);
  font-weight: 780;
  letter-spacing: -.02em;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-system .system-motion-cafe-nearby-card span {
  color: #7658df;
  font-size: clamp(4.5px, 2.1cqw, 7px);
  font-weight: 760;
}

@keyframes system-motion-result-image-drift {
  0%, 32%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
  44%, 52% { transform: translate3d(-1.5%, -.6%, 0) scale(1.09); }
  64%, 94% { transform: translate3d(1.2%, .4%, 0) scale(1.06); }
}

@keyframes system-motion-phone-drift {
  0%, 100% { top: 0; left: 0; }
  8% { top: -1px; left: 0; }
  16% { top: -2px; left: 0; }
  24% { top: -3px; left: 1px; }
  32% { top: -4px; left: 1px; }
  40% { top: -5px; left: 2px; }
  48% { top: -4px; left: 2px; }
  56% { top: -3px; left: 1px; }
  64% { top: -2px; left: 0; }
  72% { top: -1px; left: -1px; }
  80% { top: 0; left: -2px; }
  88% { top: -1px; left: -1px; }
  96% { top: 0; left: 0; }
}

@keyframes system-motion-coffee-image-drift {
  0%, 46%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
  54%, 59% { transform: translate3d(-1.6%, -.5%, 0) scale(1.09); }
  64%, 94% { transform: translate3d(1.4%, -.8%, 0) scale(1.11); }
}

@keyframes system-motion-message-in {
  0%, 64%, 94%, 100% { opacity: 1; transform: translateY(0) scale(1); }
  66%, 92% { opacity: 0; transform: translateY(-3px) scale(1); }
}

@keyframes system-motion-query-in {
  0%, 4.7%, 66%, 100% { opacity: 0; transform: translateY(9px) scale(.98); }
  6%, 64% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes system-motion-query-type {
  0%, 5.3% { width: 0; }
  12%, 100% { width: 24ch; }
}

@keyframes system-motion-typing-in {
  0%, 12.7%, 100% { opacity: 0; transform: translateY(7px); }
  14.7%, 18% { opacity: 1; transform: translateY(0); }
  19.3% { opacity: 0; transform: translateY(-3px); }
}

@keyframes system-motion-typing-dot {
  from { opacity: .3; transform: translateY(1px); }
  to { opacity: 1; transform: translateY(-1px); }
}

@keyframes system-motion-response-in {
  0%, 17.3%, 100% { opacity: 0; transform: translateY(9px) scale(.98); }
  20.7%, 64% { opacity: 1; transform: translateY(0) scale(1); }
  66% { opacity: 0; transform: translateY(-3px) scale(1); }
}

@keyframes system-motion-thread-scroll {
  0%, 19.3% { transform: translateY(0); }
  23.3%, 42% { transform: translateY(-18px); }
  48%, 64% { transform: translateY(clamp(-122px, -7.6vw, -82px)); }
  66%, 92% { transform: translateY(-132px); }
  94%, 100% { transform: translateY(0); }
}

@keyframes system-motion-card-in {
  0%, 33%, 100% { opacity: 0; transform: translateY(14px) scale(.97); }
  38%, 64% { opacity: 1; transform: translateY(0) scale(1); }
  66% { opacity: 0; transform: translateY(-5px) scale(.99); }
}

@keyframes system-motion-image-sheen {
  0%, 40% { transform: translateX(-130%); }
  54%, 100% { transform: translateX(150%); }
}

@keyframes system-motion-route-in {
  0%, 40%, 100% { opacity: 0; transform: translateY(7px); }
  45%, 64% { opacity: 1; transform: translateY(0); }
  66% { opacity: 0; transform: translateY(-3px); }
}

@keyframes system-motion-coffee-in {
  0%, 46%, 100% { opacity: 0; transform: translateY(16px) scale(.97); }
  51%, 59% { opacity: 1; transform: translateY(0) scale(1); }
  61% { opacity: 1; transform: translateY(0) scale(.975); }
  63% { opacity: 1; transform: translateY(-1px) scale(1.025); }
  66% { opacity: 0; transform: translateY(-5px) scale(1.14); }
}

@keyframes system-motion-coffee-tap {
  0%, 56%, 100% { opacity: 0; box-shadow: 0 0 0 0 rgba(118, 88, 223, .54); transform: scale(1.35); }
  58% { opacity: 1; box-shadow: 0 0 0 0 rgba(118, 88, 223, .54); transform: scale(1); }
  61% { opacity: 1; box-shadow: 0 0 0 3.6cqw rgba(118, 88, 223, 0); transform: scale(.76); }
  63% { opacity: 0; box-shadow: 0 0 0 4.4cqw rgba(118, 88, 223, 0); transform: scale(.7); }
}

@keyframes system-motion-coffee-arrow-press {
  0%, 56%, 66%, 100% { background: rgba(20, 15, 12, .22); transform: scale(1); }
  58% { background: rgba(118, 88, 223, .94); transform: scale(1.16); }
  61% { background: rgba(118, 88, 223, .98); transform: scale(.82); }
  63% { background: rgba(118, 88, 223, .94); transform: scale(1.06); }
}

@keyframes system-motion-thread-window-out {
  0%, 62% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  66%, 92% { opacity: 0; transform: translate3d(0, -3cqw, 0) scale(.97); }
  94% { opacity: 1; transform: translate3d(104%, 0, 0) scale(1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes system-motion-cafe-view-in {
  0%, 61% {
    clip-path: inset(50% 50% 50% 50% round 4.8cqw);
    transform: translate3d(0, 26cqw, 0) scale(.8);
  }
  63% {
    clip-path: inset(47% 3.6cqw 24% round 4.8cqw);
    transform: translate3d(0, 20cqw, 0) scale(.82);
  }
  69%, 94% {
    clip-path: inset(0 round 0);
    transform: translate3d(0, 0, 0) scale(1);
  }
  98%, 100% {
    clip-path: inset(0 round 0);
    transform: translate3d(-108%, 0, 0) scale(.985);
  }
}

@keyframes system-motion-cafe-hero-expand {
  0%, 61% { transform: translateY(12cqw) scale(.82); }
  63% { transform: translateY(10cqw) scale(.84); }
  69%, 94% { transform: translateY(0) scale(1); }
  98%, 100% { transform: translateX(-24cqw) scale(.98); }
}

@keyframes system-motion-cafe-hero-image-drift {
  0%, 61%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
  70% { transform: translate3d(1.6%, .7%, 0) scale(1.08); }
  84% { transform: translate3d(-1.4%, -.8%, 0) scale(1.12); }
  94% { transform: translate3d(.8%, -.4%, 0) scale(1.09); }
}

@keyframes system-motion-cafe-featured-in {
  0%, 68%, 100% { opacity: 0; transform: translateY(7cqw); }
  73%, 94% { opacity: 1; transform: translateY(0); }
  97% { opacity: 0; transform: translateX(-18cqw); }
}

@keyframes system-motion-cafe-menu-in {
  0%, 73%, 100% { opacity: 0; transform: translateY(7cqw); }
  78%, 94% { opacity: 1; transform: translateY(0); }
  97% { opacity: 0; transform: translateX(-14cqw); }
}

@keyframes system-motion-cafe-rail-drift {
  0%, 75% { transform: translate3d(0, 0, 0); }
  88%, 94% { transform: translate3d(-24cqw, 0, 0); }
  98%, 100% { transform: translate3d(-30cqw, 0, 0); }
}

@keyframes system-motion-cafe-nearby-in {
  0%, 76%, 100% { opacity: 0; transform: translateY(7cqw); }
  81%, 94% { opacity: 1; transform: translateY(0); }
  98% { opacity: 0; transform: translateX(-12cqw); }
}

@keyframes system-motion-cafe-nearby-drift {
  0%, 81% { transform: translate3d(0, 0, 0); }
  94%, 100% { transform: translate3d(-20cqw, 0, 0); }
}

@keyframes system-motion-cafe-product-image-drift {
  0%, 72%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
  84% { transform: translate3d(var(--system-motion-image-pan, -1.6%), -.6%, 0) scale(1.1); }
  94% { transform: translate3d(var(--system-motion-image-pan-return, .8%), .5%, 0) scale(1.07); }
}

@keyframes system-motion-shadow-breathe {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(.64); }
  9%, 91% { opacity: .27; transform: translate(-50%, -50%) scaleX(.8); }
  54% { opacity: .21; transform: translate(-50%, -50%) scaleX(.7); }
}

@keyframes system-motion-blue-drift {
  0%, 100% { opacity: .55; transform: translate(-4%, 2%) scale(.94); }
  48% { opacity: .82; transform: translate(7%, -5%) scale(1.08); }
}

@keyframes system-motion-peach-drift {
  0%, 100% { opacity: .7; transform: translate(5%, -2%) scale(1.04); }
  52% { opacity: .48; transform: translate(-8%, 6%) scale(.92); }
}

@media (max-width: 1180px) {
  .panel-system .system-motion-phone-wrap {
    width: min(31vw, 38svh);
  }

  .panel-system .system-motion-glow {
    width: min(72vw, 690px);
  }

}

@media (max-width: 700px) {
  .panel-system .system-motion-story {
    place-items: center;
  }

  .panel-system .system-motion-phone-wrap {
    width: min(68vw, 39svh);
    opacity: 1;
  }

  .panel-system .system-motion-glow {
    width: 112vw;
  }

  .panel-system .system-motion-glow-blue {
    left: -20%;
  }

  .panel-system .system-motion-glow-peach {
    right: -24%;
  }

  .panel-system .system-motion-shadow {
    width: 48vw;
  }
}

@media (max-height: 650px) {
  .panel-system .system-motion-phone-wrap {
    width: min(25vw, 34svh);
  }

}

@media (max-width: 700px) and (orientation: portrait) {
  .panel-system .system-motion-story {
    place-items: start center;
    padding-top: 54px;
  }

  .panel-system .system-motion-phone-wrap {
    width: auto;
    height: min(43svh, 370px);
  }

  .panel-system .system-heading {
    top: calc(68px + min(43svh, 370px));
    transform: translateX(24px);
  }

  .panel-system.is-active .system-heading {
    transform: translateX(0);
  }

  .panel-system .signal-list {
    top: calc(204px + min(43svh, 370px));
    translate: -50% 0;
  }
}

@media (max-width: 700px) and (max-height: 720px) and (orientation: portrait) {
  .panel-system .system-motion-story {
    padding-top: 48px;
  }

  .panel-system .system-motion-phone-wrap {
    height: 39svh;
  }

  .panel-system .system-heading {
    top: calc(58px + 39svh);
  }

  .panel-system .signal-list {
    top: calc(174px + 39svh);
  }

  .panel-system .signal-list li {
    min-height: 38px;
  }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .panel-system .system-motion-story {
    place-items: start end;
    padding: 50px 14px 0 0;
  }

  .panel-system .system-motion-phone-wrap {
    width: auto;
    height: min(68svh, 285px);
  }

  .panel-system .system-heading {
    top: 66px;
    right: auto;
    left: var(--pad);
    width: 64vw;
    text-align: left;
    transform: translateX(24px);
  }

  .panel-system.is-active .system-heading {
    transform: translateX(0);
  }

  .panel-system .system-heading .panel-label {
    justify-content: flex-start;
    margin-bottom: 7px;
  }

  .panel-system .system-heading h2 {
    font-size: clamp(23px, 3.8vw, 28px);
  }

  .panel-system .system-description {
    max-width: 60vw;
    margin-top: 8px;
    font-size: 9.5px;
    line-height: 1.35;
  }

  .panel-system .signal-list {
    top: 216px;
    right: auto;
    left: var(--pad);
    width: 64vw;
    translate: 0 0;
  }

  .panel-system .signal-list li {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    min-height: 28px;
  }

  .panel-system .signal-list li div {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
  }

  .panel-system .signal-list strong {
    font-size: 11.5px;
  }

  .panel-system .signal-list p {
    font-size: 8.5px;
    line-height: 1.15;
  }

  .panel-system .scene-note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-system .system-motion-glow,
  .panel-system .system-motion-shadow,
  .panel-system .system-motion-phone-wrap,
  .panel-system .system-motion-thread-window,
  .panel-system .system-motion-thread,
  .panel-system .system-motion-bubble,
  .panel-system .system-motion-typing,
  .panel-system .system-motion-typing i,
  .panel-system .system-motion-denim-image::after,
  .panel-system .system-motion-denim-image img,
  .panel-system .system-motion-denim-card,
  .panel-system .system-motion-route,
  .panel-system .system-motion-coffee-card,
  .panel-system .system-motion-coffee-card > img,
  .panel-system .system-motion-coffee-arrow,
  .panel-system .system-motion-coffee-tap,
  .panel-system .system-motion-cafe-view,
  .panel-system .system-motion-cafe-hero,
  .panel-system .system-motion-cafe-hero > img,
  .panel-system .system-motion-cafe-section,
  .panel-system .system-motion-cafe-rail,
  .panel-system .system-motion-cafe-rail-card img,
  .panel-system .system-motion-cafe-grid article img,
  .panel-system .system-motion-cafe-nearby-card img,
  .panel-system .system-motion-cafe-nearby-rail,
  .panel-system .system-motion-query-typed {
    animation: none !important;
  }

  .panel-system .system-motion-phone-wrap {
    top: 0;
    left: 0;
    opacity: 1;
    transform: none;
  }

  .panel-system .system-motion-thread {
    transform: translateY(clamp(-122px, -7.6vw, -82px));
  }

  .panel-system .system-motion-thread-window {
    opacity: 0;
  }

  .panel-system .system-motion-cafe-view {
    clip-path: none;
    opacity: 1;
    transform: none;
  }

  .panel-system .system-motion-cafe-hero,
  .panel-system .system-motion-cafe-section {
    opacity: 1;
    transform: none;
  }

  .panel-system .system-motion-cafe-rail,
  .panel-system .system-motion-cafe-nearby-rail {
    transform: none;
  }

  .panel-system .system-motion-denim-image img,
  .panel-system .system-motion-coffee-card > img,
  .panel-system .system-motion-cafe-hero > img,
  .panel-system .system-motion-cafe-rail-card img,
  .panel-system .system-motion-cafe-grid article img,
  .panel-system .system-motion-cafe-nearby-card img {
    transform: none;
  }

  .panel-system .system-motion-query-typed {
    width: 24ch;
  }

  .panel-system .system-motion-coffee-tap {
    display: none;
  }

  .panel-system .system-motion-greeting,
  .panel-system .system-motion-query,
  .panel-system .system-motion-response,
  .panel-system .system-motion-denim-card,
  .panel-system .system-motion-route,
  .panel-system .system-motion-coffee-card {
    opacity: 1;
    transform: none;
  }

  .panel-system .system-motion-typing {
    display: none;
  }
}