/* Ema meditation timer — dark, on-brand. Self-contained (standalone + embed). */
.ema-timer {
  --t-panel: #1b1c23; --t-ink: #f3f4f4; --t-soft: rgba(243,244,244,0.55); --t-faint: rgba(243,244,244,0.40);
  --t-violet: #9A8DE8; --t-violet-s: #8E60FA; --t-pink: #D251BA; --t-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(--t-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(--t-panel);
  color: var(--t-ink); text-align: center; box-sizing: border-box;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.ema-timer *, .ema-timer *::before, .ema-timer *::after { box-sizing: border-box; }

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

.ema-timer-stage { position: relative; width: 286px; max-width: 100%; aspect-ratio: 1 / 1; height: auto; margin: 0 auto 26px; }
.ema-timer-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.ema-timer-ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 8; }
.ema-timer-ring-fg { fill: none; stroke: url(#emaTimerGrad); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .35s linear; }
.ema-timer-time { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ema-timer[data-state] .ema-timer-time { color: var(--t-ink); }

.ema-timer-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
.ema-timer-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(--t-violet), var(--t-pink)); box-shadow: 0 10px 28px rgba(142,96,250,0.34);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ema-timer-play:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(142,96,250,0.42); }
.ema-timer-play.is-playing { color: var(--t-ink); background: rgba(255,255,255,0.06); box-shadow: none; border: 1px solid var(--t-line); }

.ema-timer-volume { position: relative; display: inline-flex; }
.ema-timer-vol-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; cursor: pointer; border: 1px solid var(--t-line); background: rgba(255,255,255,0.03); color: var(--t-soft); transition: color .18s ease; }
.ema-timer-vol-btn:hover { color: var(--t-ink); }
.ema-timer-vol-panel { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); padding: 14px 16px; border-radius: 16px; background: var(--t-panel); border: 1px solid var(--t-line); box-shadow: 0 12px 36px rgba(0,0,0,0.45); }
.ema-timer-vol-panel[hidden] { display: none; }
.ema-timer-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-timer-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(--t-violet), var(--t-pink)); }
.ema-timer-vol-slider::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; border: 0; cursor: pointer; background: var(--t-violet); }

.ema-timer-footer { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; flex-direction: column; border-top: 1px solid var(--t-line); padding-top: 16px; }
.ema-timer-cta { display: block; color: var(--t-violet); font-weight: 800; font-size: 0.9rem; text-decoration: none; transition: color .18s ease; }
.ema-timer-cta:hover { color: var(--t-pink); }
.ema-timer-brand { color: var(--t-soft); font-size: 0.82rem; font-weight: 700; text-decoration: none; }
.ema-timer-brand strong { color: var(--t-violet); }
.ema-timer-embed-btn { border: 1px solid var(--t-line); background: rgba(255,255,255,0.03); color: var(--t-soft); font-family: inherit; font-weight: 800; font-size: 0.78rem; padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.ema-timer-embed-box { margin-top: 16px; text-align: left; }
.ema-timer-embed-box[hidden] { display: none; }
.ema-timer-embed-box p { margin: 0 0 7px; font-size: 0.82rem; color: var(--t-soft); }
.ema-timer-embed-code { width: 100%; min-height: 70px; font-family: ui-monospace, monospace; font-size: 11px; padding: 11px; border-radius: 14px; border: 1px solid var(--t-line); resize: vertical; color: var(--t-ink); background: rgba(0,0,0,0.25); }
.ema-timer-copy { margin-top: 8px; border: 0; background: linear-gradient(135deg, var(--t-violet), var(--t-pink)); color: #fff; font-family: inherit; font-weight: 800; font-size: 0.82rem; padding: 9px 20px; border-radius: 999px; cursor: pointer; }

body.ema-tool-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; }