/* A complete product, in the existing Silence study sequence. */
.bike-study { grid-column: 1 / -1; min-width: 0; margin-top: 64px; }
.bike-heading { margin-bottom: 24px; }
.bike-heading h3 { font-size: 32px; line-height: 40px; font-weight: 500; }
html[lang=zh-CN] .bike-heading h3 { letter-spacing: normal; }
.bike-source { max-width: 60ch; margin-top: 8px; font-size: 16px; line-height: 26px; color: var(--muted); }
.bike-stage {
  position: relative;
  height: clamp(360px, 40vw, 520px);
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(rgb(255 255 255 / .5), rgb(255 255 255 / .5)), url('/assets/silent/sea-glass-field.png') center / cover;
}
.bike-stage canvas, .bike-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.bike-stage canvas { display: block; touch-action: pan-y; }
.bike-stage canvas:focus-visible { outline-offset: -5px; }
.bike-fallback img { width: 100%; height: 100%; object-fit: contain; }
[data-bike-ready=true] .bike-fallback { visibility: hidden; }
.bike-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 12px; min-height: 64px; }
.bike-caption > p { font-size: 12px; line-height: 18px; color: var(--muted); }
.bike-controls { display: flex; justify-content: end; flex-wrap: wrap; gap: 8px 16px; }
.bike-controls .segmented button { min-height: 44px; font-size: 14px; padding: 10px 12px; border-radius: 8px; }
.bike-controls .segmented button[aria-pressed=true] { background: var(--selected); color: var(--text); }
[data-bike-ready=false] .bike-status { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: 13px; color: var(--muted); margin-top: 8px; }
@media (max-width: 760px) {
  .bike-study { margin-top: 48px; }
  .bike-heading { display: block; margin-bottom: 20px; }
  .bike-heading h3 { font-size: 28px; line-height: 36px; }
  .bike-source { margin-top: 8px; }
  .bike-stage { height: 320px; }
  .bike-caption { flex-direction: column; align-items: start; gap: 8px; }
  .bike-controls { justify-content: start; gap: 4px 12px; }
  .bike-controls .segmented button { padding-inline: 10px; }
}