/* A quiet frame lets the recording carry the movement. */
.hero .stage {
  border: 1px solid rgba(76, 60, 136, .18);
  border-radius: 22px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 30px 80px -30px rgba(43, 29, 91, .3), 0 2px 8px rgba(43, 29, 91, .06);
  overflow: hidden;
}
.hero .stage .well { border-radius: 15px; overflow: hidden; }
.demo-caption {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 20px; text-align: left;
  background: #fff; color: #1b172b;
}
.demo-caption strong { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
.demo-caption span span { display: block; margin-top: 4px; font-size: 11px; color: #777180; }
.demo-toggle {
  flex-shrink: 0; border: 1px solid #ded9ed; border-radius: 100px;
  background: #f8f6fc; color: #50418e; padding: 10px 16px;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .18s, border-color .18s;
}
.demo-toggle:hover { background: #ece7fa; border-color: #b5a7df; }
.demo-toggle:focus-visible, .tabbar button:focus-visible { outline: 3px solid #8c79e7; outline-offset: 3px; }
[data-paused="true"] * { animation-play-state: paused !important; }
.tabshow { border-radius: 22px; box-shadow: 0 24px 70px -40px rgba(44, 25, 87, .28); }
.tabbar { padding: 12px; gap: 5px; background: #f5f3f9; }
.tabbar [role="tab"] { border-radius: 10px; transition: background .2s, color .2s, box-shadow .2s; }
.tabbar [aria-selected="true"] { background: #fff; color: #5141be; box-shadow: 0 2px 7px #27144a12; }
.pane-fig { overflow: hidden; }
.pane-fig .demo-caption { border-top: 1px solid #eeeaf5; }
.pane-copy { padding-top: 32px; padding-bottom: 34px; }
@media (max-width: 600px) {
  .hero .stage { padding: 4px; border-radius: 15px; }
  .demo-caption { padding: 13px 12px; gap: 8px; }
  .demo-caption strong { font-size: 12px; }
  .demo-caption span span { font-size: 10px; }
  .demo-toggle { padding: 9px 11px; font-size: 11px; }
  .tabbar { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-toggle, .tabbar [role="tab"] { transition: none; }
}
.tabbar { background: #211d37; }
.tabbar button[aria-selected="true"] { background: #fff; color: #5141be; }
.tabbar button[aria-selected="true"] .ti { color: #5141be; }
.tabbar button[aria-selected="true"]::after { display: none; }
.pane-fig .demo-caption { border-radius: 0 0 12px 12px; flex-wrap: wrap; }