.bsds-breath{
  --bsds-breath-ink: #153b40;
  --bsds-breath-sage: #a9bdae;
  --bsds-breath-sage-light: #e7eee9;
  --bsds-breath-ring: #dce7df;
  --bsds-breath-border: #d8e1dc;
  width: 100%; max-width: 100%; color: var(--bsds-breath-ink);
  text-align: center; box-sizing: border-box; font-family: inherit;
}
.bsds-breath *, .bsds-breath *::before, .bsds-breath *::after{ box-sizing: border-box; }
.bsds-breath__stage{ position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; isolation: isolate; }
.bsds-breath__halo{ position: absolute; width: 98%; aspect-ratio: 1; border-radius: 50%; background: var(--bsds-breath-sage-light); opacity: .78; }
.bsds-breath__orb{ position: absolute; width: 71%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c6d5c8, var(--bsds-breath-sage)); border: 24px solid var(--bsds-breath-ring); transform: scale(.78); transition: transform 0s linear; will-change: transform; }
.bsds-breath__readout{ position: relative; z-index: 1; width: 70%; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.bsds-breath__phase{ font-size: clamp(18px, 4vw, 29px); line-height: 1.25; font-weight: 650; }
.bsds-breath__seconds{ font-size: clamp(14px, 2.5vw, 19px); line-height: 1.4; }
.bsds-breath__controls{ display: flex; align-items: start; justify-content: center; gap: clamp(18px, 6vw, 62px); margin: 16px 0 0; }
.bsds-breath__control{ display: flex; flex-direction: column; align-items: center; gap: 9px; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--bsds-breath-ink) !important; font: inherit; font-size: 15px; cursor: pointer; padding: 0; min-width: 70px; }
.bsds-breath__icon{ display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid var(--bsds-breath-border); border-radius: 50%; background: #fff; font-size: 27px; line-height: 1; transition: background .2s ease; }
.bsds-breath__control--primary .bsds-breath__icon{ background: var(--bsds-breath-ink); color: #fff; border-color: var(--bsds-breath-ink); }
.bsds-breath__control:hover:not(:disabled) .bsds-breath__icon{ filter: brightness(.94); }
.bsds-breath__control:focus-visible{ outline: 3px solid var(--bsds-breath-ink); outline-offset: 5px; border-radius: 8px; }
.bsds-breath__control:disabled{ opacity: .4; cursor: not-allowed; }
.bsds-breath__status{ font-size: 14px; line-height: 1.5; margin: 26px 0 0; color: var(--bsds-breath-ink); }
@media (max-width: 480px){.bsds-breath__orb{ border-width: 16px; }
.bsds-breath__icon{ width: 56px; height: 56px; }
.bsds-breath__controls{ gap: 16px; }
.bsds-breath__control{ min-width: 64px; }}
@media (prefers-reduced-motion: reduce){.bsds-breath__orb{ transition: none !important; }}