.beste-fold-stage {
  --beste-teal: #2dd4bf;
  --beste-blue: #2375b3;
  --beste-purple: #a855f7;
  --beste-pink: #ec4899;
  --beste-success: #1f8a4f;
  --beste-warning: #ff9f43;
  --beste-critical: #ff4757;
  --beste-screen: #f4f2f7;
  --beste-card: #fff;
  --beste-ink: #15141b;
  --beste-muted: #77727f;
  --beste-line: rgb(21 20 27 / 9%);
  --beste-hero-a: #0a0a0a;
  --beste-hero-b: #1c1f3a;
  position: relative;
  display: grid;
  min-height: 38rem;
  margin: 0;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.75rem, 5vw, 4rem);
  overflow: visible;
  border: 0;
  background: transparent;
  isolation: isolate;
}

:root[data-theme="dark"] .beste-fold-stage {
  --beste-screen: #12121c;
  --beste-card: #1d1d2a;
  --beste-ink: #f7f5fb;
  --beste-muted: #a7a1ad;
  --beste-line: rgb(255 255 255 / 9%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .beste-fold-stage {
    --beste-screen: #12121c;
    --beste-card: #1d1d2a;
    --beste-ink: #f7f5fb;
    --beste-muted: #a7a1ad;
    --beste-line: rgb(255 255 255 / 9%);
  }
}

.beste-fold-scene {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 100%;
  place-items: center;
  perspective: 100rem;
  perspective-origin: 50% 48%;
}

.beste-fold-device {
  --fold-source-progress: var(--scene-progress);
  --fold-source-inverse: var(--scene-inverse);
  --fold-progress: clamp(0, var(--fold-open, var(--scene-progress, 0)), 1);
  --fold-closed: calc(1 - var(--fold-progress));
  --fold-content-progress: clamp(0, calc((var(--fold-progress) - 0.45) * 2.5), 1);
  --fold-content-inverse: calc(1 - var(--fold-content-progress));
  --fold-midpoint: min(calc(var(--fold-progress) * 2), calc(var(--fold-closed) * 2));
  --fold-radius: clamp(1.2rem, 2vw, 1.85rem);
  position: relative;
  width: auto;
  max-width: 86%;
  height: min(34.75rem, calc(100svh - var(--header-height) - 9.5rem));
  aspect-ratio: 0.92 / 1;
  filter: drop-shadow(0 2.6rem 3.4rem var(--levitation-shadow));
  transform: rotateX(-1.2deg);
  transform-style: preserve-3d;
  will-change: transform;
}

.beste-fold-device__halo {
  position: absolute;
  z-index: -2;
  inset: -16%;
  background:
    radial-gradient(circle at 34% 44%, color-mix(in srgb, var(--beste-teal) 28%, transparent) 0, transparent 34%),
    radial-gradient(circle at 72% 58%, color-mix(in srgb, var(--beste-pink) 22%, transparent) 0, transparent 36%);
  opacity: calc(0.34 + (var(--fold-midpoint) * 0.28));
  pointer-events: none;
  transform: translateZ(-2rem);
}

.beste-fold-device__ground-shadow {
  position: absolute;
  z-index: -1;
  right: 7%;
  bottom: -8%;
  left: 7%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--levitation-contact) 0, transparent 72%);
  filter: blur(0.7rem);
  opacity: calc(0.52 + (var(--fold-progress) * 0.24));
  transform: translateZ(-1.5rem);
}

.beste-fold-device__body {
  position: absolute;
  inset: 0;
  color: var(--beste-ink);
  transform-style: preserve-3d;
}

.beste-fold-device__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 50%;
  transform-style: preserve-3d;
}

.beste-fold-device__panel--left {
  z-index: 5;
  left: 0;
  transform: rotateY(calc(var(--fold-closed) * 178deg));
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

.beste-fold-device__panel--right {
  z-index: 2;
  left: 50%;
  transform: translateZ(0);
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}

.beste-fold-device__face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  overflow: hidden;
  border: clamp(0.32rem, 0.55vw, 0.48rem) solid #101117;
  background: var(--beste-screen);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 12%),
    0 0 0 1px rgb(7 8 13 / 82%);
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.beste-fold-device__panel--left .beste-fold-device__face--inner {
  border-radius: var(--fold-radius) 0.34rem 0.34rem var(--fold-radius);
  border-right-width: 0.08rem;
}

.beste-fold-device__panel--right .beste-fold-device__face--inner {
  border-radius: 0.34rem var(--fold-radius) var(--fold-radius) 0.34rem;
  border-left-width: 0.08rem;
}

.beste-fold-device__face--cover {
  border-radius: 0.34rem var(--fold-radius) var(--fold-radius) 0.34rem;
  background: linear-gradient(180deg, var(--beste-hero-a), var(--beste-hero-b));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 14%),
    -0.65rem 0 1.3rem rgb(0 0 0 / 35%),
    0 0 0 1px rgb(0 0 0 / 88%);
  transform: rotateY(180deg) translateZ(0.1rem);
}

.beste-fold-device__face--cover::after {
  position: absolute;
  z-index: 10;
  inset: 0;
  background: linear-gradient(108deg, transparent 26%, rgb(255 255 255 / 10%) 48%, transparent 69%);
  content: "";
  opacity: calc(0.08 + (var(--fold-midpoint) * 0.32));
  pointer-events: none;
  transform: translate3d(calc(var(--fold-progress) * 42%), 0, 0);
}

.beste-fold-device__leaf-edge {
  position: absolute;
  z-index: -1;
  top: 0.8%;
  right: -0.22rem;
  bottom: 0.8%;
  width: 0.16rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #090a0f, #737784 46%, #11131a 64%, #07080c);
  box-shadow: inset 1px 0 rgb(255 255 255 / 18%);
  transform: translateZ(-0.08rem);
}

.beste-fold-device__panel--right .beste-fold-device__leaf-edge {
  right: auto;
  left: -0.18rem;
}

.beste-fold-device__panel--left::after {
  position: absolute;
  z-index: 20;
  inset: 0 0 0 82%;
  background: linear-gradient(90deg, transparent, rgb(0 0 0 / 54%));
  content: "";
  opacity: calc(var(--fold-midpoint) * 0.82);
  pointer-events: none;
  transform: translateZ(0.16rem);
}

.beste-fold-device__hinge {
  position: absolute;
  z-index: 12;
  top: 1.1%;
  bottom: 1.1%;
  left: 50%;
  width: clamp(0.08rem, 0.28vw, 0.18rem);
  border-radius: 999px;
  background: linear-gradient(90deg, #08090d, #656976 42%, #15161d 60%, #05060a);
  box-shadow:
    -0.35rem 0 0.9rem rgb(0 0 0 / 28%),
    0.35rem 0 0.9rem rgb(0 0 0 / 28%);
  opacity: calc(0.58 + (var(--fold-progress) * 0.35));
  transform: translateX(-50%) translateZ(0.3rem);
}

.beste-fold-device__hinge span {
  position: absolute;
  inset: 8% 28%;
  border-radius: inherit;
  background: linear-gradient(transparent, rgb(255 255 255 / 36%) 16% 84%, transparent);
}

.beste-fold-device__hinge-light {
  position: absolute;
  z-index: 13;
  top: 15%;
  bottom: 15%;
  left: 50%;
  width: 0.18rem;
  border-radius: 999px;
  background: linear-gradient(transparent, #86efff 24% 76%, transparent);
  box-shadow: 0 0 0.7rem #5bd7ff, 0 0 1.4rem rgb(168 85 247 / 62%);
  opacity: calc(var(--fold-midpoint) * 0.86);
  transform: translate3d(-50%, 0, 0.42rem);
}

.beste-fold-device__screen-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.beste-fold-inner-screen {
  position: absolute;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 200%;
  height: 100%;
  overflow: hidden;
  background: var(--beste-screen);
  color: var(--beste-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: clamp(0.52rem, 0.82vw, 0.72rem);
}

.beste-fold-device__screen-clip--left .beste-fold-inner-screen {
  left: 0;
}

.beste-fold-device__screen-clip--right .beste-fold-inner-screen {
  left: -100%;
}

.beste-fold-inner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20%;
  padding: 1.15rem 1.3rem 1rem;
  background: linear-gradient(180deg, var(--beste-hero-a), var(--beste-hero-b));
  color: #fff;
  opacity: 1;
  transform: translate3d(0, calc(var(--fold-content-inverse) * -0.25rem), 0);
}

.beste-fold-inner-greeting {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.72rem;
}

.beste-fold-inner-greeting > span,
.beste-fold-inner-greeting strong,
.beste-fold-inner-greeting small {
  display: block;
}

.beste-fold-inner-greeting strong {
  font-size: 1.22em;
}

.beste-fold-inner-greeting small {
  margin-top: 0.22rem;
  color: rgb(255 255 255 / 64%);
}

.beste-fold-weather {
  display: flex;
  align-items: center;
  padding: 0.48rem 0.7rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  gap: 0.35rem;
}

.beste-fold-brand-mark {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2.35rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 26%;
  background: linear-gradient(135deg, var(--beste-teal), var(--beste-purple) 56%, var(--beste-pink));
  box-shadow: 0 0.45rem 1rem rgb(0 0 0 / 16%);
  place-items: center;
}

.beste-fold-brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.beste-fold-master-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  overflow: hidden;
}

.beste-fold-master,
.beste-fold-detail {
  min-width: 0;
  min-height: 0;
  padding: 0.95rem 1rem 0.75rem;
  overflow: hidden;
}

.beste-fold-master {
  border-right: 1px solid var(--beste-line);
  opacity: 1;
  transform: translate3d(calc(var(--fold-content-inverse) * -0.6rem), 0, 0);
}

.beste-fold-master-detail > .beste-fold-detail {
  opacity: 1;
  transform: translate3d(calc(var(--fold-content-inverse) * 0.6rem), 0, 0);
}

.beste-fold-section-kicker {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--beste-muted);
  font-size: 0.88em;
  font-weight: 720;
}

.beste-fold-home-card {
  display: grid;
  padding: 0.82rem;
  border: 1px solid var(--beste-line);
  border-radius: 1rem;
  background: var(--beste-card);
  box-shadow: 0 0.55rem 1rem rgb(0 0 0 / 8%);
  gap: 0.65rem;
}

.beste-fold-master > .beste-fold-home-card[data-fold-home-card] {
  transform: translate3d(calc(var(--fold-content-inverse) * 0.45rem), calc(var(--fold-content-inverse) * -0.2rem), 0);
}

.beste-fold-home-card--tram {
  margin-top: 0.6rem;
  opacity: calc(0.55 + (var(--fold-content-progress) * 0.45));
  transform: translate3d(0, calc(var(--fold-content-inverse) * 0.45rem), 0);
}

.beste-fold-home-card > header,
.beste-fold-detail-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  gap: 0.6rem;
}

.beste-fold-home-card > header span:nth-child(2),
.beste-fold-home-card > header strong,
.beste-fold-home-card > header small,
.beste-fold-detail-header span:nth-child(2),
.beste-fold-detail-header strong,
.beste-fold-detail-header small {
  display: block;
  min-width: 0;
}

.beste-fold-home-card > header strong,
.beste-fold-detail-header strong {
  overflow: hidden;
  font-size: 1.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beste-fold-home-card > header small,
.beste-fold-detail-header small {
  margin-top: 0.15rem;
  overflow: hidden;
  color: var(--beste-muted);
  font-size: 0.78em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beste-fold-home-card > header i {
  color: var(--beste-muted);
  font-size: 1.3em;
  font-style: normal;
}

.beste-fold-line-badge {
  display: grid;
  min-width: 2.6rem;
  min-height: 1.85rem;
  padding-inline: 0.48rem;
  border-radius: 0.62rem;
  color: #fff;
  font-size: 0.82em;
  font-weight: 820;
  line-height: 1;
  place-items: center;
}

.beste-fold-line-badge--s12 {
  background: linear-gradient(135deg, var(--beste-teal), var(--beste-blue));
}

.beste-fold-line-badge--tram {
  background: linear-gradient(135deg, var(--beste-purple), var(--beste-pink));
}

.beste-fold-departure {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.6rem;
}

.beste-fold-departure > span,
.beste-fold-departure strong,
.beste-fold-departure small,
.beste-fold-departure em {
  display: block;
}

.beste-fold-departure > span:last-child {
  text-align: right;
}

.beste-fold-departure strong {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 1.75em;
  letter-spacing: -0.06em;
}

.beste-fold-departure small {
  margin-top: 0.08rem;
  color: var(--beste-muted);
  font-size: 0.76em;
}

.beste-fold-departure em {
  width: max-content;
  margin-left: auto;
  padding: 0.25rem 0.48rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--beste-warning) 15%, transparent);
  color: var(--beste-warning);
  font-size: 0.72em;
  font-style: normal;
  font-weight: 760;
}

.beste-fold-departure--compact strong {
  font-size: 1.35em;
}

.beste-fold-mini-trend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding-top: 0.55rem;
  border-top: 1px solid var(--beste-line);
  gap: 0.5rem;
}

.beste-fold-mini-trend svg {
  width: 100%;
  height: 2.05rem;
}

.beste-fold-mini-trend path {
  fill: none;
  stroke: var(--beste-teal);
  stroke-width: 2.3;
  vector-effect: non-scaling-stroke;
}

.beste-fold-mini-trend span,
.beste-fold-mini-trend strong,
.beste-fold-mini-trend small {
  display: block;
}

.beste-fold-mini-trend strong {
  font-size: 0.9em;
}

.beste-fold-mini-trend small {
  color: var(--beste-muted);
  font-size: 0.7em;
}

.beste-fold-detail-header {
  margin-bottom: 0.62rem;
}

.beste-fold-live-status,
.beste-fold-punctuality {
  padding: 0.68rem;
  border: 1px solid var(--beste-line);
  border-radius: 0.9rem;
  background: var(--beste-card);
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 6%);
}

.beste-fold-live-status > header,
.beste-fold-punctuality > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.6rem;
}

.beste-fold-live-status > header span,
.beste-fold-live-status > header strong,
.beste-fold-live-status > header small,
.beste-fold-punctuality > header span,
.beste-fold-punctuality > header strong,
.beste-fold-punctuality > header small {
  display: block;
}

.beste-fold-live-status > header small,
.beste-fold-punctuality > header small {
  margin-top: 0.12rem;
  color: var(--beste-muted);
  font-size: 0.72em;
}

.beste-fold-live-status > header i {
  width: 0.58rem;
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--beste-teal) 28%, transparent);
  border-top-color: var(--beste-teal);
  border-radius: 50%;
  transform: rotate(calc(var(--fold-content-progress) * 280deg));
}

.beste-fold-live-row {
  display: grid;
  grid-template-columns: 3.2rem auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 2.55rem;
  margin-top: 0.36rem;
  padding-top: 0.36rem;
  border-top: 1px solid var(--beste-line);
  gap: 0.42rem;
}

.beste-fold-live-row span,
.beste-fold-live-row strong,
.beste-fold-live-row small {
  display: block;
}

.beste-fold-live-row strong {
  font-size: 0.8em;
}

.beste-fold-live-row small {
  color: var(--beste-muted);
  font-size: 0.66em;
}

.beste-fold-live-row s {
  text-decoration-color: var(--beste-muted);
  text-decoration-thickness: 0.08em;
}

.beste-fold-live-row b {
  color: var(--beste-muted);
  font-weight: 500;
}

.beste-fold-live-row em {
  padding: 0.22rem 0.38rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--beste-warning) 15%, transparent);
  color: var(--beste-warning);
  font-size: 0.66em;
  font-style: normal;
  font-weight: 760;
}

.beste-fold-live-row em.is-on-time {
  background: color-mix(in srgb, var(--beste-success) 15%, transparent);
  color: var(--beste-success);
}

.beste-fold-punctuality {
  margin-top: 0.55rem;
}

.beste-fold-periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.45rem;
  gap: 0.35rem;
}

.beste-fold-periods span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  border-radius: 0.42rem;
  background: color-mix(in srgb, var(--beste-ink) 7%, transparent);
  font-size: 0.68em;
  font-weight: 720;
  gap: 0.26rem;
}

.beste-fold-periods span.is-current {
  background: var(--beste-teal);
  color: #071310;
}

.beste-fold-period__lock {
  position: relative;
  display: block;
  width: 0.55rem;
  height: 0.44rem;
  margin-top: 0.13rem;
  border-radius: 0.1rem;
  background: currentcolor;
}

.beste-fold-period__lock::before {
  position: absolute;
  width: 0.32rem;
  height: 0.3rem;
  inset: -0.29rem 0 auto;
  margin-inline: auto;
  border: 0.09rem solid currentcolor;
  border-bottom: 0;
  border-radius: 0.3rem 0.3rem 0 0;
  content: "";
}

.beste-fold-detail-chart {
  height: 4rem;
  margin-top: 0.32rem;
}

.beste-fold-detail-chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.beste-fold-delay-bars rect {
  fill: var(--beste-warning);
  opacity: calc(0.28 + (var(--fold-content-progress) * 0.62));
  transform: scaleY(var(--fold-content-progress));
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.beste-fold-delay-bars rect[data-delay-band="success"] {
  fill: var(--beste-success);
}

.beste-fold-delay-bars rect[data-delay-band="warning"] {
  fill: var(--beste-warning);
}

.beste-fold-mini-trend .beste-fold-trend-line {
  fill: none;
  stroke: var(--beste-teal);
  stroke-dasharray: 410;
  stroke-dashoffset: calc(410 * var(--fold-content-inverse));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.beste-fold-root-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 3.25rem;
  border-top: 1px solid var(--beste-line);
  background: color-mix(in srgb, var(--beste-card) 94%, transparent);
  opacity: 1;
  transform: translate3d(0, calc(var(--fold-content-inverse) * 0.4rem), 0);
}

.beste-fold-root-tabs span {
  display: grid;
  align-content: center;
  color: var(--beste-muted);
  font-size: 0.74em;
  font-weight: 660;
  gap: 0.08rem;
  place-items: center;
  transform: translate3d(0, calc(var(--fold-content-inverse) * 0.2rem), 0);
}

.beste-fold-root-tabs span:nth-child(2) { transform: translate3d(0, calc(var(--fold-content-inverse) * 0.3rem), 0); }
.beste-fold-root-tabs span:nth-child(3) { transform: translate3d(0, calc(var(--fold-content-inverse) * 0.4rem), 0); }
.beste-fold-root-tabs span:nth-child(4) { transform: translate3d(0, calc(var(--fold-content-inverse) * 0.5rem), 0); }

.beste-fold-root-tabs span.is-current {
  color: var(--beste-teal);
}

.beste-fold-root-tabs i {
  font-size: 1.35em;
  font-style: normal;
  line-height: 1;
}

.beste-fold-root-tabs b {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25%;
  height: 0.16rem;
  background: var(--beste-teal);
  opacity: var(--fold-content-progress);
  transform: translate3d(0, 0, 0);
}

.beste-fold-cover-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 0.9rem 0.72rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--beste-hero-a), var(--beste-hero-b));
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: clamp(0.56rem, 0.9vw, 0.75rem);
}

.beste-fold-cover-ui > header {
  display: flex;
  align-items: center;
  margin-bottom: 1.05rem;
  gap: 0.68rem;
}

.beste-fold-cover-ui > header span:last-child,
.beste-fold-cover-ui > header strong,
.beste-fold-cover-ui > header small {
  display: block;
}

.beste-fold-cover-ui > header strong {
  font-size: 1.12em;
}

.beste-fold-cover-ui > header small {
  max-width: 12rem;
  margin-top: 0.16rem;
  color: rgb(255 255 255 / 62%);
  font-size: 0.76em;
}

.beste-fold-cover-ui .beste-fold-section-kicker {
  color: rgb(255 255 255 / 58%);
}

.beste-fold-cover-ui .beste-fold-home-card {
  background: rgb(255 255 255 / 96%);
  color: #15141b;
  transform: translate3d(calc(var(--fold-progress) * -0.7rem), calc(var(--fold-progress) * 0.22rem), 0);
}

.beste-fold-cover-ui > nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: auto -0.9rem -0.72rem;
  min-height: 3rem;
  border-top: 1px solid rgb(255 255 255 / 10%);
  background: rgb(8 9 14 / 62%);
}

.beste-fold-cover-ui > nav span {
  display: grid;
  color: rgb(255 255 255 / 48%);
  font-size: 0.64em;
  font-weight: 660;
  place-items: center;
}

.beste-fold-cover-ui > nav span.is-current {
  color: var(--beste-teal);
}

.beste-fold-caption {
  position: absolute;
  z-index: 10;
  inset: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 560;
  letter-spacing: 0.055em;
  pointer-events: none;
  text-transform: uppercase;
}

.beste-fold-caption span,
.beste-fold-caption strong {
  position: absolute;
  line-height: 1.3;
  text-wrap: balance;
}

.beste-fold-caption span {
  top: 0.55rem;
  left: clamp(-1.15rem, -1.4vw, -0.3rem);
  max-width: 22rem;
  opacity: calc(0.46 + (var(--fold-progress) * 0.38));
  transform: translate3d(calc(var(--fold-closed) * -2.2rem), calc(var(--fold-closed) * 0.7rem), 0);
}

.beste-fold-caption strong {
  top: 0.55rem;
  right: clamp(-1.1rem, -1.4vw, -0.25rem);
  max-width: 19rem;
  text-align: right;
  transform: translate3d(calc(var(--fold-closed) * 2.2rem), calc(var(--fold-closed) * 0.7rem), 0);
}

.showcase-horizontal-rail[data-continuum-from="android"][data-continuum-to="android"] .continuum-frame {
  opacity: 0;
}

.showcase-horizontal-rail[data-continuum-from="android"][data-continuum-to="android"] .continuum-seam {
  opacity: 0.24;
}

.showcase-horizontal-rail[data-continuum-from="android"][data-continuum-to="android"] .continuum-seam::after {
  opacity: 0;
}

:root[data-theme="dark"] .showcase-horizontal-rail[data-continuum-from="android"][data-continuum-to="android"] .continuum-seam {
  opacity: 0.34;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .showcase-horizontal-rail[data-continuum-from="android"][data-continuum-to="android"] .continuum-seam {
    opacity: 0.34;
  }
}

@media (min-width: 48.0625rem) and (min-height: 42rem) and (prefers-reduced-motion: no-preference) {
  .has-showcase-motion .showcase-panel--android {
    min-height: clamp(64rem, 154svh, 92rem);
  }

  .has-showcase-motion .showcase-panel--android .beste-fold-stage {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 64rem) {
  .beste-fold-device {
    max-width: 90%;
  }

  .beste-fold-master,
  .beste-fold-detail {
    padding-inline: 0.72rem;
  }
}

@media (max-width: 48rem) {
  .beste-fold-stage {
    min-height: 31rem;
    padding-block: 2.25rem 2.8rem;
  }

  .beste-fold-device {
    width: min(27.5rem, 96%);
    max-width: none;
    height: auto;
  }

  .beste-fold-inner-screen {
    font-size: clamp(0.46rem, 1.4vw, 0.62rem);
  }

  .beste-fold-inner-header {
    padding: 0.78rem;
  }

  .beste-fold-master,
  .beste-fold-detail {
    padding: 0.6rem;
  }

  .beste-fold-live-row:nth-child(3),
  .beste-fold-weather,
  .beste-fold-mini-trend {
    display: none;
  }

  .beste-fold-caption span {
    top: 0;
    left: 0;
  }

  .beste-fold-caption strong {
    top: 1.35rem;
    right: 0;
  }
}

@media (max-width: 34rem) {
  .beste-fold-master-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .beste-fold-device {
    width: 96%;
    height: auto;
  }

  .beste-fold-detail-chart,
  .beste-fold-periods span:nth-child(3),
  .beste-fold-inner-greeting small,
  .beste-fold-cover-ui > header small {
    display: none;
  }

  .beste-fold-periods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .beste-fold-cover-ui {
    padding: 0.72rem 0.55rem 0.5rem;
  }

  .beste-fold-caption strong {
    display: none;
  }

  .beste-fold-caption span {
    max-width: 100%;
  }
}

@media (max-height: 41.999rem) {
  .beste-fold-stage {
    min-height: 22rem;
    padding-block: 1rem 1.5rem;
  }

  .beste-fold-inner-screen,
  .beste-fold-cover-ui {
    font-size: 0.48rem;
  }

  .beste-fold-detail-chart {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .beste-fold-device {
    --fold-open: 1;
    --fold-progress: 1;
    --fold-content-progress: 1;
    --fold-content-inverse: 0;
    transform: none;
  }

  .beste-fold-device__panel--left,
  .beste-fold-device__panel--right {
    transform: none;
  }

  .beste-fold-device__face--cover {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .beste-fold-inner-header,
  .beste-fold-master,
  .beste-fold-detail,
  .beste-fold-root-tabs,
  .beste-fold-root-tabs span,
  .beste-fold-home-card,
  .beste-fold-trend-line,
  .beste-fold-delay-bars rect,
  .beste-fold-caption span,
  .beste-fold-caption strong {
    opacity: 1;
    transform: none;
  }
}