.heard-cloud-spinner{display:inline-block;flex:0 0 auto;width:12px;height:12px;margin-inline:6px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;color:var(--lab-accent,#68cb94);animation:heard-cloud-spin .8s linear infinite;pointer-events:none;vertical-align:middle}
.heard-cloud-spinner[hidden],.heard-next-sample[hidden],.heard-configuration-lock-notice[hidden]{display:none!important}
/* The idle header indicator keeps exactly the same space as the active one. */
html body #application>header>.heard-cloud-spinner{flex:0 0 12px;box-sizing:content-box}
html body #application>header>.heard-cloud-spinner[hidden]{display:inline-block!important;visibility:hidden;animation:none}
@keyframes heard-cloud-spin{to{transform:rotate(360deg)}}
.heard-next-sample{height:3px;width:100%;overflow:hidden;border-radius:var(--lab-control-radius,3px);background:var(--lab-border-soft,#34483b);margin:5px 0}
.heard-next-sample>i{display:block;height:100%;width:100%;background:var(--lab-accent,#68cb94);transition:width .1s linear}
.heard-sample-now{color:var(--lab-accent,#68cb94)!important;flex-shrink:0}
.heard-sample-now svg{display:block;width:19px;height:19px;fill:currentColor}
.heard-sample-now:disabled{opacity:.45;cursor:default}
.heard-sample-now:focus-visible{outline:2px solid var(--lab-accent,#68cb94);outline-offset:2px}
.heard-configuration-lock-notice{position:sticky;top:0;z-index:3;font-size:11px;line-height:1.4;margin:0 0 10px;padding:8px 10px;border:1px solid var(--lab-border,#456351);border-radius:var(--lab-control-radius,8px);background:var(--lab-selected,#244f3b);color:var(--lab-text,#e7f3eb);overflow-wrap:anywhere}
#shareResult{scroll-margin-block:16px}
@media(prefers-reduced-motion:reduce){.heard-cloud-spinner{animation-duration:2s}.heard-next-sample>i{transition:none}}
@media(max-width:420px){#application>header{flex-wrap:wrap}#application>header nav{flex-wrap:wrap}}

/* Center icon-only controls independently of theme padding and text baselines. */
html body button.round,
html body button.header-listen,
html body button.share-link-copy,
html body #application>header nav button:is(.round,.header-listen),
html body dialog button.round{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;line-height:1!important;text-indent:0!important;letter-spacing:0!important;
}
html body button:is(.round,.header-listen,.share-link-copy)>svg{
  display:block;flex:0 0 auto;margin:0!important;vertical-align:middle;
}
html body button:is(.round,.header-listen)>.stop-icon{
  display:block;line-height:1!important;margin:0!important;letter-spacing:0!important;
}
html body .heard-more-action-icon{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex-shrink:0;line-height:1;
}
html body .heard-more-action-icon>svg{display:block;margin:0!important;flex-shrink:0}