:focus-visible { outline: 2px solid #e8c978; outline-offset: 5px; }
.motion-control,
.whisper-controls button,
.recognition button {
  min-height: 44px;
  padding: .65rem 1rem;
  border: 1px solid rgba(232, 201, 120, .4);
  border-radius: 4px;
  background: #080b16;
  color: #e8c978;
  font: inherit;
  cursor: pointer;
}
.motion-control {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 6;
  font-size: .8rem;
}
body { padding-bottom: max(5rem, env(safe-area-inset-bottom)); }
.compact-page { padding-bottom: 5rem; }
html[data-motion-paused="true"] *,
html[data-motion-paused="true"] *::before,
html[data-motion-paused="true"] *::after {
  animation-play-state: paused !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-motion="still"] .compact-reveal,
html[data-motion="still"] .recognized-text,
html[data-motion="still"] .loom-card {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="running"]) *,
  html:not([data-motion="running"]) *::before,
  html:not([data-motion="running"]) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .compact-reveal, .recognized-text, .loom-card { opacity: 1; transform: none; }
}
.whisper-controls { display: flex; flex-wrap: wrap; gap: .75rem; }
.whisper-controls[hidden] { display: none; }
.whisper-transcript { margin-top: 1.5rem; }
.whisper-transcript summary { cursor: pointer; color: #e8c978; padding: .75rem 0; }
.whisper-transcript li { margin: .8rem 0; line-height: 1.6; }