/* Ema breathing tool — dark, on-brand, smooth. Self-contained (works standalone + embedded). */
.ema-breath {
  --b-panel: #1b1c23;
  --b-ink: #f3f4f4;
  --b-soft: rgba(243,244,244,0.55);
  --b-faint: rgba(243,244,244,0.40);
  --b-violet: #9A8DE8;
  --b-violet-s: #8E60FA;
  --b-pink: #D251BA;
  --b-line: rgba(255,255,255,0.09);
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 30px 26px 24px;
  border-radius: 28px;
  border: 1px solid var(--b-line);
  background:
    radial-gradient(circle at 22% 8%, rgba(142,96,250,0.16), transparent 40%),
    radial-gradient(circle at 82% 100%, rgba(210,81,186,0.12), transparent 42%),
    var(--b-panel);
  color: var(--b-ink);
  text-align: center;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}
.ema-breath *, .ema-breath *::before, .ema-breath *::after { box-sizing: border-box; }

/* Exercise pills */
.ema-breath-exercises { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 26px; }
.ema-breath-exercises button {
  border: 1px solid var(--b-line); background: rgba(255,255,255,0.03); color: var(--b-soft);
  font-family: inherit; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.01em;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.ema-breath-exercises button:hover { color: var(--b-ink); transform: translateY(-1px); }
.ema-breath-exercises button.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--b-violet), var(--b-pink));
  box-shadow: 0 6px 18px rgba(142,96,250,0.30);
}

/* The orb */
.ema-breath-stage { position: relative; width: 250px; height: 250px; margin: 0 auto 26px; }
.ema-breath-stage::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 232px; height: 232px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.07);
}
.ema-breath-circle {
  position: absolute; inset: 0; margin: auto; width: 210px; height: 210px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(154,141,232,0.98), rgba(210,81,186,0.55) 54%, rgba(210,81,186,0) 78%);
  transform: scale(0.42); transform-origin: center;
  transition-property: transform, box-shadow;
  transition-timing-function: cubic-bezier(.37, 0, .63, 1);
  transition-duration: 4s;
  will-change: transform;
  box-shadow: 0 0 30px 0 rgba(142,96,250,0.22);
}
.ema-breath[data-phase="inhale"] .ema-breath-circle { box-shadow: 0 0 95px 12px rgba(142,96,250,0.55); }
.ema-breath[data-phase="hold"]   .ema-breath-circle { box-shadow: 0 0 75px 6px rgba(154,141,232,0.45); }
.ema-breath[data-phase="exhale"] .ema-breath-circle { box-shadow: 0 0 38px 0 rgba(210,81,186,0.32); }

.ema-breath-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: none; }
.ema-breath-phase { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.ema-breath-count { font-size: 0.95rem; font-weight: 700; color: var(--b-faint); min-height: 1.1em; font-variant-numeric: tabular-nums; }

/* Controls */
.ema-breath-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
.ema-breath-play {
  border: 0; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 1rem; color: #fff;
  min-width: 150px; padding: 14px 30px; border-radius: 999px;
  background: linear-gradient(135deg, var(--b-violet), var(--b-pink));
  box-shadow: 0 10px 28px rgba(142,96,250,0.34);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ema-breath-play:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(142,96,250,0.42); }
.ema-breath-play.is-playing { color: var(--b-ink); background: rgba(255,255,255,0.06); box-shadow: none; border: 1px solid var(--b-line); }
.ema-breath-volume { position: relative; display: inline-flex; }
.ema-breath-vol-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--b-line); background: rgba(255,255,255,0.03); color: var(--b-soft);
  transition: color .18s ease, background .18s ease;
}
.ema-breath-vol-btn:hover { color: var(--b-ink); }
.ema-breath-vol-btn.is-muted { color: var(--b-faint); }
.ema-breath-vol-btn.is-muted .ema-mute-wave { display: none; }
.ema-breath-vol-panel {
  position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%);
  padding: 14px 16px; border-radius: 16px;
  background: var(--b-panel); border: 1px solid var(--b-line); box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}
.ema-breath-vol-panel[hidden] { display: none; }
.ema-breath-vol-panel::after {
  content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: var(--b-panel); border-right: 1px solid var(--b-line); border-bottom: 1px solid var(--b-line);
}
.ema-breath-vol-slider {
  -webkit-appearance: none; appearance: none; width: 130px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.16); outline: none; cursor: pointer; display: block;
}
.ema-breath-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--b-violet), var(--b-pink)); box-shadow: 0 2px 8px rgba(142,96,250,0.5);
}
.ema-breath-vol-slider::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--b-violet); box-shadow: 0 2px 8px rgba(142,96,250,0.5);
}

/* Footer / embed / CTA */
.ema-breath-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--b-line); padding-top: 16px; }
.ema-breath-foot-cta { flex-direction: column; gap: 14px; }
.ema-breath-foot-cta .ema-breath-cta { margin-top: 0; }
.ema-breath-brand { color: var(--b-soft); font-size: 0.82rem; font-weight: 700; text-decoration: none; transition: color .18s ease; }
.ema-breath-brand:hover { color: var(--b-ink); }
.ema-breath-brand strong { color: var(--b-violet); }
.ema-breath-embed-btn { border: 1px solid var(--b-line); background: rgba(255,255,255,0.03); color: var(--b-soft); font-family: inherit; font-weight: 800; font-size: 0.78rem; padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: color .18s ease; }
.ema-breath-embed-btn:hover { color: var(--b-ink); }

.ema-breath-embed-box { margin-top: 16px; text-align: left; }
.ema-breath-embed-box p { margin: 0 0 7px; font-size: 0.82rem; color: var(--b-soft); }
.ema-breath-embed-code { width: 100%; min-height: 88px; font-family: ui-monospace, monospace; font-size: 11px; padding: 11px; border-radius: 14px; border: 1px solid var(--b-line); resize: vertical; color: var(--b-ink); background: rgba(0,0,0,0.25); }
.ema-breath-copy { margin-top: 8px; border: 0; background: linear-gradient(135deg, var(--b-violet), var(--b-pink)); color: #fff; font-family: inherit; font-weight: 800; font-size: 0.82rem; padding: 9px 20px; border-radius: 999px; cursor: pointer; }

.ema-breath-cta { display: block; margin-top: 18px; color: var(--b-violet); font-weight: 800; font-size: 0.9rem; text-decoration: none; transition: color .18s ease; }
.ema-breath-cta:hover { color: var(--b-pink); }

/* Embed mode — dark calm backdrop, centered, blends as a branded widget on any host */
body.ema-breath-embed {
  margin: 0; padding: 16px;
  background:
    radial-gradient(circle at 18% 10%, rgba(142,96,250,0.14), transparent 34%),
    radial-gradient(circle at 84% 92%, rgba(210,81,186,0.10), transparent 30%),
    #13141a;
}
body.ema-breath-embed .ema-breath { box-shadow: 0 24px 70px rgba(0,0,0,0.45); }

@media (max-width: 380px) {
  .ema-breath-stage { width: 220px; height: 220px; }
  .ema-breath-stage::before { width: 206px; height: 206px; }
  .ema-breath-circle { width: 188px; height: 188px; }
}