/* Desktop/browserversie: centreer de ademanimatie verticaal en benut de rechterkolom. */
@media (min-width: 761px) {
  .tool-card {
    position: relative;
  }

  /* Zelfde compacte geluidsknop als op mobiel. */
  .tool-header {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .sound-toggle {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  }

  .sound-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .sound-toggle span {
    width: 20px;
    height: 20px;
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
  }

  .sound-toggle span::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .sound-toggle input:checked + span::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm12.5 3a3.5 3.5 0 0 0-2-3.16v6.32a3.5 3.5 0 0 0 2-3.16Zm-2-8.23v2.06A7 7 0 0 1 17 12a7 7 0 0 1-3.5 6.17v2.06A9 9 0 0 0 19 12a9 9 0 0 0-5.5-8.23Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm12.5 3a3.5 3.5 0 0 0-2-3.16v6.32a3.5 3.5 0 0 0 2-3.16Zm-2-8.23v2.06A7 7 0 0 1 17 12a7 7 0 0 1-3.5 6.17v2.06A9 9 0 0 0 19 12a9 9 0 0 0-5.5-8.23Z'/%3E%3C/svg%3E");
  }

  .sound-toggle input:not(:checked) + span::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm11.7.3 1.4-1.4 2.1 2.1 2.1-2.1 1.4 1.4-2.1 2.1 2.1 2.1-1.4 1.4-2.1-2.1-2.1 2.1-1.4-1.4 2.1-2.1-2.1-2.1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm11.7.3 1.4-1.4 2.1 2.1 2.1-2.1 1.4 1.4-2.1 2.1 2.1 2.1-1.4 1.4-2.1-2.1-2.1 2.1-1.4-1.4 2.1-2.1-2.1-2.1Z'/%3E%3C/svg%3E");
  }

  .breathing-stage {
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 36px 24px !important;
    display: grid !important;
    place-items: center !important;
  }

  .ball-space {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
  }

  .breathing-ball {
    width: clamp(190px, 26vh, 250px) !important;
  }
}