.bp-breath-tool {
  --bp-breath-accent: #216869;
  background: #f7faf8;
  border: 1px solid #cfdad5;
  border-radius: 18px;
  margin: 1.5rem 0;
  padding: 1.25rem;
}

.bp-breath-tool__settings,
.bp-breath-tool__controls {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.bp-breath-tool__settings {
  margin: .75rem 0;
}

.bp-breath-tool__settings label,
.bp-breath-tool__note {
  color: #53635d;
  font-size: .9rem;
}

.bp-breath-tool__settings input {
  min-height: 40px;
  width: 4.2rem;
}

.bp-breath-tool__stage {
  display: grid;
  min-height: 12rem;
  place-items: center;
  text-align: center;
}

.bp-breath-tool__orb {
  background: #d8ebe5;
  border: 4px solid var(--bp-breath-accent);
  border-radius: 50%;
  display: grid;
  height: 9rem;
  place-items: center;
  transition: transform 1s linear;
  width: 9rem;
}

.bp-breath-tool[data-running="true"] .bp-breath-tool__orb {
  transform: scale(1.08);
}

.bp-breath-tool__phase {
  font-size: 1.35rem;
  font-weight: 750;
}

.bp-breath-tool__time {
  color: #50615a;
  font-variant-numeric: tabular-nums;
}

.bp-breath-tool button {
  background: var(--bp-breath-accent);
  border: 1px solid var(--bp-breath-accent);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 44px;
  padding: .65rem 1rem;
}

.bp-breath-tool button + button {
  background: transparent;
  color: #173d32;
}

@media (prefers-reduced-motion: reduce) {
  .bp-breath-tool__orb { transition: none; }
}