.echo-page { margin: 0; min-height: 100svh; background: var(--demo-bg); -webkit-text-size-adjust: 100%; }
.echo-workspace {
  box-sizing: border-box;
  display: grid;
  gap: 16px;
  max-width: 960px;
  margin-inline: auto;
  padding: calc(var(--demo-header-height) + 16px) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.echo-intro { margin: 0 0 4px; max-width: 52ch; font-size: 20px; line-height: 1.5; }
.echo-workspace .demo-panel-content { overflow: visible; }
.echo-source { align-self: start; }
.echo-workspace p { line-height: 1.6; }
#source-state { color: var(--demo-muted); font-size: 13px; text-align: right; }
.echo-transport > button { flex: 1; font-size: 16px; }
.echo-workspace button { -webkit-user-select: none; user-select: none; }
.echo-workspace button:active:not(:disabled) { opacity: .75; }
#test-sound { border-color: var(--demo-accent); }
#status { min-height: 3.2em; margin-block: 16px; }
#status[data-error="true"] { color: #ffb9a7; }
.echo-meter-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; color: var(--demo-muted); }
#output-meter { width: 100%; height: 18px; accent-color: var(--demo-accent); }
.echo-microphone { margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--demo-line); }
.echo-ack { padding-block: 8px; }
#use-microphone { width: 100%; margin-top: 8px; }
.echo-presets { margin-top: 16px; }
.echo-presets > button { flex: 1; }
.echo-controls .demo-field { margin-block: 20px; }
.echo-controls .demo-field > label { display: flex; justify-content: space-between; gap: 12px; color: var(--demo-text); font-size: 16px; }
.echo-controls output { white-space: nowrap; }
.echo-tempo { align-items: center; }
#tempo { flex: 1; min-width: 120px; color: var(--demo-muted); }
.echo-footnote { margin: 0; color: var(--demo-muted); font-size: 14px; }
@media (min-width: 760px) {
  .echo-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; }
  .echo-intro, .echo-footnote, .echo-workspace > noscript { grid-column: 1 / -1; }
  .echo-source { position: sticky; top: calc(var(--demo-header-height) + 16px); }
}
@media (max-width: 759px) {
  .echo-workspace { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  #stop:not(:disabled) {
    position: fixed;
    z-index: 110;
    bottom: max(12px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
    min-width: 120px;
    min-height: 48px;
    background: var(--demo-text);
    color: var(--demo-bg);
    border-color: var(--demo-text);
  }
}