/*
 * Watch Crux work: one tablist drives the demo player. The selected tab's border fills over the
 * demo's real length (crux-demos.js returns it from play()), then the next demo starts.
 * Hovering or focusing the demo, the pause button, leaving the viewport or hiding the page all hold it.
 */
.cwp {
  --cwp-surface: rgba(9, 9, 11, 0.8);
  --cwp-line: #ffffff1f;
  --cwp-fg: #f6f8ff;
  --cwp-fg-2: #c5cfde;
  --cwp-fg-3: #8d97a8;
  --cwp-fill: #5c8dff;
  --cwp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.cwp-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--cwp-line);
  border-radius: 14px;
  background: var(--cwp-surface);
  box-shadow: 0 12px 32px -14px #000c, inset 0 1px 0 #ffffff0a;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.cwp-tabs { display: flex; gap: 4px; }
.cwp-tab, .cwp-pause {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cwp-fg-3);
  font: 500 14px/1 Geist, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 160ms var(--cwp-ease), background-color 160ms var(--cwp-ease);
  -webkit-tap-highlight-color: transparent;
}
.cwp-tab { padding: 0 16px 0 13px; }
.cwp-pause { width: 36px; padding: 0; }
.cwp-tab:hover, .cwp-pause:hover { color: var(--cwp-fg); background: #ffffff08; }
.cwp-tab[aria-selected="true"] { color: var(--cwp-fg); background: #ffffff0f; }
.cwp-tab:focus-visible, .cwp-pause:focus-visible { outline: 2px solid #a5d8ff; outline-offset: 2px; }
.cwp-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cwp-icon-play { fill: currentColor; stroke-width: 1.2; }
.cwp-pause .cwp-icon-play, .cwp-pause[aria-pressed="true"] .cwp-icon-pause { display: none; }
.cwp-pause[aria-pressed="true"] .cwp-icon-play { display: block; }
.cwp-divider { width: 1px; height: 18px; margin: 0 2px; background: var(--cwp-line); }

/* The timer: a 1.5px border drawn around the selected tab, clockwise from the top centre. */
.cwp-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cwp-ring path { fill: none; stroke-width: 1.5; stroke-linecap: round; opacity: 0; transition: opacity 200ms var(--cwp-ease); }
.cwp-ring-track { stroke: #ffffff1a; }
.cwp-ring-fill { stroke: var(--cwp-fill); }
.cwp-tab[aria-selected="true"] .cwp-ring path { opacity: 1; }
.cwp[data-held="true"] .cwp-tab[aria-selected="true"] .cwp-ring-fill { opacity: 0.45; }

.cwp-caption {
  min-height: 28px;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(9, 9, 11, 0.62);
  color: var(--cwp-fg-2);
  font: 400 13px/18px Geist, -apple-system, BlinkMacSystemFont, sans-serif;
  text-align: center;
  text-wrap: balance;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity 220ms var(--cwp-ease), transform 220ms var(--cwp-ease);
}
.cwp-caption.is-changing { opacity: 0; transform: translateY(3px); }

/*
 * One viewport: with the section top at the top of the screen, the heading, tabs, caption and the whole
 * demo are visible at once. The chrome above the frame is 261px (64 padding + 55 heading + 24 + 20 + 46 tabs
 * + 10 + 28 caption + 14), so the frame takes what is left, less 12px of air, and the scenes reflow to it.
 */
@media (min-width: 768px) {
  #watch.framer-19fm57d { --cwp-frame-h: clamp(360px, calc(100vh - 273px), 790px); padding-top: 64px; padding-bottom: 12px; }
  @supports (height: 100svh) { #watch.framer-19fm57d { --cwp-frame-h: clamp(360px, calc(100svh - 273px), 790px); } }
  #watch .framer-1pwif6c { gap: 24px; }
  #watch .framer-1ab51x5 { padding-top: 20px; }
  #watch .framer-jinu2t-container > div { gap: 14px; }
  #watch #crux-demo-panel { aspect-ratio: auto !important; height: var(--cwp-frame-h) !important; width: min(calc(100% - 32px), calc(var(--cwp-frame-h) * 2.2)) !important; }
}

@media (max-width: 767px) {
  .cwp { gap: 8px; padding: 0 8px; box-sizing: border-box; }
  .cwp-bar { max-width: 100%; }
  .cwp-tab { gap: 6px; padding: 0 11px; font-size: 13.5px; }
  .cwp-tab .cwp-icon { display: none; }
  .cwp-caption { max-width: 100%; border-radius: 12px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cwp-tab, .cwp-pause, .cwp-caption, .cwp-ring path { transition: none; }
  .cwp-pause, .cwp-divider { display: none; }
}