.gestureTiming { margin: 44px 0 52px; }
.gestureTiming > p { max-width: 72ch; }
.gestureTiming figure { margin: 24px 0 0; }
.gestureTimingArtwork { background: #f5f7f3; border-radius: 16px; overflow: hidden; }
.gestureTimingPosterHeading { background: #193940; color: white; padding: 28px; }
.gestureTiming .gestureTimingPosterHeading p { margin: 0; color: #fff; }
.gestureTiming .gestureTimingPosterHeading p:first-child { color: #ffb29b; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.gestureTiming .gestureTimingPosterHeading h3 { margin: 16px 0; color: #fff; font-size: clamp(28px, 4vw, 44px); line-height: 1.12; }
.gestureTiming .gestureTimingPosterHeading h3 span { color: #ffb29b; }
.gestureTimingPanels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.gestureTimingPanels > svg { display: block; width: 100%; height: auto; }
.gestureTimingTakeaway { margin: 0 28px; padding: 22px 0; border-top: 1px solid #c6d4d1; color: #193940; }
.gestureTimingTakeaway p { margin: 10px 0 0; }
.gestureTimerEnds { margin: 44px 0; }
.gestureTimerComparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gestureTimerComparison > div { padding: 22px; border-radius: 14px; background: #edf3f1; }
.gestureTimerComparison h3 { margin: 0 0 12px; color: #193940; }
.gestureTimerComparison p { margin: 0; }
.gestureTimingControls { padding: 20px; background: #edf3f1; border-radius: 12px; margin-top: 16px; color: #193940; }
.gestureTimingActions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.gestureTimingActions button { min-height: 44px; padding: 10px 18px; border: 1px solid #b8cac5; border-radius: 999px; background: white; color: #193940; font: inherit; font-weight: 650; cursor: pointer; }
.gestureTimingActions button:hover { background: #dce9e5; }
.gestureTimingActions [data-timing-play] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 104px; }
[data-timing-play] svg { width: 16px; height: 16px; }
[data-timing-play] .axisPauseIcon,
[data-timing-play][aria-pressed="true"] .axisPlayIcon { display: none; }
[data-timing-play][aria-pressed="true"] .axisPauseIcon { display: block; }
.gestureTimingActions button:focus-visible, .gestureTimingControls input:focus-visible { outline: 3px solid #16648b; outline-offset: 3px; }
.gestureTimingActions a { color: #16648b; font-size: 15px; text-underline-offset: 3px; }
.gestureTimingControls label { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.gestureTimingControls input { flex: 1; min-width: 60px; accent-color: #16648b; }
.gestureTimingControls output { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.gestureTimingControls p { margin: 12px 0 0; font-size: 15px; min-height: 3.2em; }
.gestureTiming figcaption { margin-top: 14px; font-size: 15px; color: #476066; line-height: 1.6; max-width: 72ch; }
@media (max-width: 600px) {
  .gestureTimingPanels, .gestureTimerComparison { grid-template-columns: minmax(0, 1fr); }
  .gestureTimingPanels { gap: 28px; padding: 12px; }
  .gestureTimingPosterHeading { padding: 22px; }
  .gestureTimingTakeaway { margin: 0 22px; }
  .gestureTimingControls { padding: 14px; }
  .gestureTimingControls label { gap: 8px; }
}