.demo-native-controls{display:flex;align-items:center;gap:16px;margin:12px 16px;padding:12px 14px;border:1px solid var(--color-primary-lighter);border-radius:6px;background:var(--color-primary)}.demo-native-controls__intro{flex:0 0 auto}.demo-native-controls__intro strong,.demo-native-controls__intro span{display:block}.demo-native-controls__intro span{color:var(--color-secondary-darker);font-size:.75rem}.demo-native-controls__moments{display:flex;gap:6px;min-width:0;overflow-x:auto}.demo-native-controls__moments .badge{flex:0 0 auto;background:var(--color-secondary-dark);color:var(--color-secondary-darker)}.demo-native-controls__moments .badge span,.demo-native-controls__moments .badge small{display:block}.demo-native-controls__moments .badge.active{border-color:var(--color-accent);background:var(--color-accent-dark);color:var(--color-accent)}.demo-native-controls__moments small{font-size:.7rem;opacity:.75}@media(max-width:800px){.demo-native-controls{align-items:stretch;flex-direction:column;margin-inline:8px}}
.demo-live-nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:12px 16px 0;padding:10px 14px;border:1px solid var(--color-primary-lighter);border-radius:6px;background:var(--color-primary)}.demo-live-nav__back{text-decoration:none}.demo-live-nav__badge{padding:3px 8px;border-radius:999px;background:var(--color-secondary-dark);color:var(--color-secondary-darker);font-size:.72rem;font-weight:600}.demo-live-nav__cta{display:flex;align-items:center;gap:10px;margin-left:auto;color:var(--color-secondary-darker);font-size:.85rem}.demo-live-nav__cta .badge{text-decoration:none;white-space:nowrap}@media(max-width:800px){.demo-live-nav{margin-inline:8px}.demo-live-nav__cta{margin-left:0;width:100%;justify-content:space-between}}