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

.ema-noise-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--n-faint); margin-bottom: 12px; }
.ema-noise-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 24px; }
.ema-noise-types button {
  border: 1px solid var(--n-line); background: rgba(255,255,255,0.03); color: var(--n-soft);
  font-family: inherit; font-weight: 800; font-size: 0.82rem; padding: 13px 6px; border-radius: 14px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.ema-noise-types button:hover { color: var(--n-ink); transform: translateY(-1px); }
.ema-noise-types button .dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,0.14); }
.ema-noise-types button.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--n-violet), var(--n-pink)); box-shadow: 0 6px 18px rgba(142,96,250,0.30);
}

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

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

.ema-noise-timers { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 6px; }
.ema-noise-timers button { border: 1px solid var(--n-line); background: rgba(255,255,255,0.03); color: var(--n-soft); font-family: inherit; font-weight: 800; font-size: 0.78rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.ema-noise-timers button:hover { color: var(--n-ink); }
.ema-noise-timers button.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--n-violet), var(--n-pink)); }
.ema-noise-remaining { min-height: 1.2em; font-size: 0.9rem; font-weight: 800; color: var(--n-faint); font-variant-numeric: tabular-nums; margin-bottom: 14px; }

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