.bridge-demo.live-tilt {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  --glow-x: 50%;
  --glow-y: 50%;
  isolation: isolate;
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transform-style: preserve-3d;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
  will-change: transform;
}

.bridge-demo.live-tilt.is-live,
.bridge-demo.live-tilt:focus-within {
  --lift: -7px;
  border-color: #c9ef63;
  box-shadow: 0 28px 70px #123f4030, 0 0 0 2px #d7ef8499;
}

.live-tilt-glow {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), #d7ef8444, transparent 34%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.bridge-demo.is-live .live-tilt-glow,
.bridge-demo:focus-within .live-tilt-glow { opacity: 1; }
.bridge-demo > :not(.live-tilt-glow) { position: relative; z-index: 1; }

.bridge-demo .demo-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 14px);
  transition: transform 260ms ease;
}

.bridge-demo .demo-tabs button {
  min-width: 0;
  padding: 5px;
  border: 1px solid transparent;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  text-align: left;
  line-height: 1.18;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.bridge-demo .demo-tabs button:hover,
.bridge-demo .demo-tabs button:focus-visible {
  transform: translateY(-2px);
  border-color: #c9ef63;
  box-shadow: 0 6px 14px #123f4026;
}

.bridge-demo .demo-tabs button[aria-selected="true"] {
  background: #123f40;
  box-shadow: 0 0 0 1px #d7ef84, 0 7px 16px #123f4033;
}

.demo-thumb {
  width: 42px;
  height: 32px;
  overflow: hidden;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #c9d8d2;
}

.demo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.bridge-demo .demo-tabs button > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bridge-demo .demo-stage,
.bridge-demo .demo-video-stage {
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 22px);
  transition: transform 260ms ease;
}

.bridge-demo .demo-stage img,
.bridge-demo .demo-video-stage video {
  object-fit: contain;
  background: #fff;
}

.bridge-demo.is-playing:after { animation-duration: 17.5s; }

@media (max-width: 1100px) {
  .bridge-demo .demo-tabs button { grid-template-columns: 34px minmax(0, 1fr); font-size: 10px; }
  .demo-thumb { width: 34px; height: 28px; }
}

@media (max-width: 760px) {
  .bridge-demo .demo-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bridge-demo .demo-tabs button { grid-template-columns: 48px minmax(0, 1fr); font-size: 10px; }
  .bridge-demo .demo-tabs button > span:last-child { font-size: 10px; line-height: 1.15; }
  .demo-thumb { width: 48px; height: 34px; }
  .bridge-demo.live-tilt { transform: none; will-change: auto; }
  .bridge-demo.live-tilt.is-touched { border-color: #c9ef63; box-shadow: 0 18px 45px #123f4022, 0 0 0 2px #d7ef8466; }
}

@media (prefers-reduced-motion: reduce) {
  .bridge-demo.live-tilt,
  .bridge-demo .demo-tabs,
  .bridge-demo .demo-stage,
  .bridge-demo .demo-video-stage { transform: none; transition: none; }
  .bridge-demo .demo-tabs button:hover,
  .bridge-demo .demo-tabs button:focus-visible { transform: none; }
  .live-tilt-glow { display: none; }
}