/* Keep scrolling voice controls below the fixed navigation on phones/tablets. */
@media (max-width: 768px) {
  .voice-info-wrapper { z-index: auto; }
  .controls-group { display: contents; }
  .controls-group .changelog-button,
  .controls-group .theme-toggle {
    -webkit-appearance: none;
    appearance: none;
    position: fixed;
    top: 20px;
    z-index: 10001;
    background: rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .controls-group .theme-toggle { right: 20px; }
  body.dark-mode .controls-group .changelog-button,
  body.dark-mode .controls-group .theme-toggle {
    background: rgba(255, 255, 255, .1);
  }
  /* The mobile settings panel is portaled to body when opened. */
  body > .info-panel-container { z-index: 10002; }
}

/* Release the entrance animation's composited layer after its last frame.
   Retaining the transform via `both` can leave Safari's backdrop stale. */
@media (max-width: 768px) {
  body.fonts-loaded .controls-group .changelog-button,
  body.fonts-loaded .controls-group .theme-toggle {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
    animation-fill-mode: backwards;
  }
}

@media(max-width:768px){body.modal-open .controls-group .changelog-button,body.modal-open .controls-group .theme-toggle{filter:blur(5px);opacity:.5}}