/**
 * pulse.css — THE ORIGINAL NEURAL PULSE, COPIED VERBATIM
 *
 * Every rule below is lifted unmodified from protocol-memory.css as it
 * existed at commit 083147a, recovered from git. Nothing here is a
 * reinterpretation: same eleven divs, same border-side arcs, same blur
 * values, same eleven breathe keyframes, same rotation speeds and
 * directions, same dark-mode conic overrides, same spectrum-core.
 *
 * The ONLY additions are at the bottom: a mount that scales the whole
 * thing down and places it, and label positioning. The animation itself
 * is untouched.
 */

:root {
  --pulse-teal: rgba(60, 60, 60, 0.1);
  --pulse-purple: rgba(50, 50, 50, 0.075);
  --pulse-pink: rgba(40, 40, 40, 0.07);
  --spectrum-crimson: rgba(220, 38, 38, 0.3);
  --spectrum-orange: rgba(249, 115, 22, 0.28);
  --spectrum-gold: rgba(245, 158, 11, 0.28);
  --spectrum-lime: rgba(132, 204, 22, 0.26);
  --spectrum-cyan: rgba(6, 182, 212, 0.26);
  --spectrum-sky: rgba(14, 165, 233, 0.24);
  --spectrum-indigo: rgba(79, 70, 229, 0.24);
  --spectrum-purple: rgba(147, 51, 234, 0.22);
  --spectrum-magenta: rgba(236, 72, 153, 0.22);
  --spectrum-pink: rgba(244, 114, 182, 0.2);
  --spectrum-lavender: rgba(196, 181, 253, 0.18);}

/* ========================================
   FOUNDER MODE - Neural Pulse Transformation
   ======================================== */

/* Founder Mode: Light desktop neural pulse bars switch to spectrum gradient bars */
[data-mode="founder"]:not([data-theme="dark"]) .pulse-ring-0 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 90deg,
    var(--spectrum-crimson) 90deg,
    var(--spectrum-orange) 180deg,
    var(--spectrum-gold) 270deg,
    transparent 270deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 85px, black 85px, black 140px, transparent 140px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 85px, black 85px, black 140px, transparent 140px);
  opacity: 0.95;
}

[data-mode="founder"]:not([data-theme="dark"]) .pulse-ring-1 {
  border: none;
  background: conic-gradient(
    from 0deg,
    var(--spectrum-gold) 0deg,
    var(--spectrum-lime) 90deg,
    var(--spectrum-cyan) 180deg,
    transparent 180deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 190px, black 190px, black 250px, transparent 250px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 190px, black 190px, black 250px, transparent 250px);
  opacity: 0.9;
}

[data-mode="founder"]:not([data-theme="dark"]) .pulse-ring-2 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 90deg,
    var(--spectrum-cyan) 90deg,
    var(--spectrum-sky) 180deg,
    var(--spectrum-indigo) 270deg,
    transparent 270deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 250px, black 250px, black 300px, transparent 300px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 250px, black 250px, black 300px, transparent 300px);
  opacity: 0.88;
}

[data-mode="founder"]:not([data-theme="dark"]) .pulse-ring-3 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 180deg,
    var(--spectrum-lime) 180deg,
    var(--spectrum-cyan) 270deg,
    var(--spectrum-sky) 360deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 130px, black 130px, black 200px, transparent 200px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 130px, black 130px, black 200px, transparent 200px);
  opacity: 0.85;
}

[data-mode="founder"]:not([data-theme="dark"]) .pulse-ring-4 {
  border: none;
  background: conic-gradient(
    from 0deg,
    var(--spectrum-indigo) 0deg,
    var(--spectrum-purple) 90deg,
    var(--spectrum-magenta) 180deg,
    transparent 180deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 312px, black 312px, black 360px, transparent 360px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 312px, black 312px, black 360px, transparent 360px);
  opacity: 0.82;
}

[data-mode="founder"]:not([data-theme="dark"]) .pulse-ring-5 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 90deg,
    var(--spectrum-sky) 90deg,
    var(--spectrum-indigo) 180deg,
    var(--spectrum-purple) 270deg,
    transparent 270deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 382px, black 382px, black 440px, transparent 440px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 382px, black 382px, black 440px, transparent 440px);
  opacity: 0.78;
}

[data-mode="founder"]:not([data-theme="dark"]) .pulse-ring-6 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 180deg,
    var(--spectrum-magenta) 180deg,
    var(--spectrum-pink) 270deg,
    var(--spectrum-lavender) 360deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 468px, black 468px, black 520px, transparent 520px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 468px, black 468px, black 520px, transparent 520px);
  opacity: 0.75;
}

[data-mode="founder"]:not([data-theme="dark"]) .pulse-ring-7 {
  border: none;
  background: conic-gradient(
    from 0deg,
    var(--spectrum-purple) 0deg,
    var(--spectrum-magenta) 90deg,
    var(--spectrum-pink) 180deg,
    transparent 180deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 554px, black 554px, black 600px, transparent 600px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 554px, black 554px, black 600px, transparent 600px);
  opacity: 0.72;
}

[data-mode="founder"]:not([data-theme="dark"]) .pulse-ring-8 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 90deg,
    var(--spectrum-pink) 90deg,
    var(--spectrum-lavender) 180deg,
    var(--spectrum-crimson) 270deg,
    transparent 270deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 640px, black 640px, black 690px, transparent 690px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 640px, black 640px, black 690px, transparent 690px);
  opacity: 0.68;
}

[data-mode="founder"]:not([data-theme="dark"]) .pulse-ring-9 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 180deg,
    var(--spectrum-orange) 180deg,
    var(--spectrum-gold) 270deg,
    var(--spectrum-lime) 360deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 736px, black 736px, black 780px, transparent 780px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 736px, black 736px, black 780px, transparent 780px);
  opacity: 0.65;
}

[data-mode="founder"]:not([data-theme="dark"]) .pulse-ring-10 {
  border: none;
  background: conic-gradient(
    from 0deg,
    var(--spectrum-lavender) 0deg,
    var(--spectrum-crimson) 90deg,
    var(--spectrum-orange) 180deg,
    transparent 180deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 846px, black 846px, black 870px, transparent 870px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 846px, black 846px, black 870px, transparent 870px);
  opacity: 0.6;
}

/* ========================================
   NEURAL PULSE ANIMATION
   ======================================== */

/* Pulse container - sits behind everything */
.cognitive-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

/* Individual pulse rings */
.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border-style: solid;
  transform-origin: center center;
  mix-blend-mode: screen;
}

/* Ring 0: Pink Core - Brightest center, counter-clockwise */
.pulse-ring-0 {
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  border-width: 55px;
  border-color: transparent transparent transparent var(--pulse-pink);
  animation: rotate-ccw 22s linear infinite,
    pulse-breathe-0 16s ease-in-out infinite;
  filter: blur(6px);
}

/* Ring 1: Teal - Slow clockwise */
.pulse-ring-1 {
  width: 500px;
  height: 500px;
  margin: -250px 0 0 -250px;
  border-width: 60px;
  border-color: transparent var(--pulse-teal) transparent transparent;
  animation: rotate-cw 15s linear infinite,
    pulse-breathe-1 10s ease-in-out infinite;
  filter: blur(8px);
}

/* Ring 2: Purple - Slow counter-clockwise */
.pulse-ring-2 {
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  border-width: 50px;
  border-color: var(--pulse-purple) transparent transparent transparent;
  animation: rotate-ccw 18s linear infinite,
    pulse-breathe-2 12s ease-in-out infinite;
  filter: blur(10px);
}

/* Ring 3: Pink - Clockwise, offset phase */
.pulse-ring-3 {
  width: 400px;
  height: 400px;
  margin: -200px 0 0 -200px;
  border-width: 70px;
  border-color: transparent transparent var(--pulse-pink) transparent;
  animation: rotate-cw 20s linear infinite,
    pulse-breathe-3 14s ease-in-out infinite;
  filter: blur(12px);
  animation-delay: -5s;
}

/* Ring 4: Teal Outer - Counter-clockwise, first outer expansion */
.pulse-ring-4 {
  width: 720px;
  height: 720px;
  margin: -360px 0 0 -360px;
  border-width: 48px;
  border-color: var(--pulse-teal) transparent transparent transparent;
  animation: rotate-ccw 16s linear infinite,
    pulse-breathe-4 13s ease-in-out infinite;
  filter: blur(14px);
  animation-delay: -2s;
}

/* Ring 5: Purple Outer - Clockwise, second outer expansion */
.pulse-ring-5 {
  width: 880px;
  height: 880px;
  margin: -440px 0 0 -440px;
  border-width: 58px;
  border-color: transparent var(--pulse-purple) transparent transparent;
  animation: rotate-cw 25s linear infinite,
    pulse-breathe-5 17s ease-in-out infinite;
  filter: blur(16px);
  animation-delay: -7s;
}

/* Ring 6: Pink Outer - Counter-clockwise, maximum perimeter */
.pulse-ring-6 {
  width: 1040px;
  height: 1040px;
  margin: -520px 0 0 -520px;
  border-width: 52px;
  border-color: transparent transparent transparent var(--pulse-pink);
  animation: rotate-ccw 28s linear infinite,
    pulse-breathe-6 19s ease-in-out infinite;
  filter: blur(18px);
  animation-delay: -10s;
}

/* Ring 7: Teal Far Outer - STATIC (performance optimization) */
.pulse-ring-7 {
  width: 1200px;
  height: 1200px;
  margin: -600px 0 0 -600px;
  border-width: 46px;
  border-color: var(--pulse-teal) transparent transparent transparent;
  animation: pulse-breathe-7 21s ease-in-out infinite; /* Breathe only, no rotation */
  filter: blur(20px);
  animation-delay: -3s;
  opacity: 0.7; /* Slightly reduced as static ambient glow */
}

/* Ring 8: Purple Far Outer - STATIC (performance optimization) */
.pulse-ring-8 {
  width: 1380px;
  height: 1380px;
  margin: -690px 0 0 -690px;
  border-width: 50px;
  border-color: transparent var(--pulse-purple) transparent transparent;
  animation: pulse-breathe-8 23s ease-in-out infinite; /* Breathe only, no rotation */
  filter: blur(22px);
  animation-delay: -12s;
  opacity: 0.65; /* Slightly reduced as static ambient glow */
}

/* Ring 9: Pink Near Perimeter - STATIC (performance optimization) */
.pulse-ring-9 {
  width: 1560px;
  height: 1560px;
  margin: -780px 0 0 -780px;
  border-width: 44px;
  border-color: transparent transparent var(--pulse-pink) transparent;
  animation: pulse-breathe-9 25s ease-in-out infinite; /* Breathe only, no rotation */
  filter: blur(24px);
  animation-delay: -8s;
  opacity: 0.6; /* Slightly reduced as static ambient glow */
}

/* Ring 10: Teal Maximum Fill - STATIC (performance optimization) */
.pulse-ring-10 {
  width: 1740px;
  height: 1740px;
  margin: -870px 0 0 -870px;
  border-width: 48px;
  border-color: transparent transparent transparent var(--pulse-teal);
  animation: pulse-breathe-10 27s ease-in-out infinite; /* Breathe only, no rotation */
  filter: blur(26px);
  animation-delay: -15s;
  opacity: 0.55; /* Slightly reduced as static ambient glow */
}

/* Rotation keyframes */
@keyframes rotate-cw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-ccw {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* Breathing/pulsing keyframes */

/* Ring 0: Bright core with strong pulse */
@keyframes pulse-breathe-0 {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg) scale(1.2);
    opacity: 0.95;
  }
}

@keyframes pulse-breathe-1 {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: rotate(180deg) scale(1.15);
    opacity: 1;
  }
}

@keyframes pulse-breathe-2 {
  0%,
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: rotate(180deg) scale(0.95);
    opacity: 1;
  }
}

@keyframes pulse-breathe-3 {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: rotate(180deg) scale(1.1);
    opacity: 1;
  }
}

/* Ring 4: First outer expansion - gentle breathe */
@keyframes pulse-breathe-4 {
  0%,
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 0.75;
  }
  50% {
    transform: rotate(180deg) scale(1.08);
    opacity: 0.9;
  }
}

/* Ring 5: Second outer expansion - subtle breathe */
@keyframes pulse-breathe-5 {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: rotate(180deg) scale(1.05);
    opacity: 0.85;
  }
}

/* Ring 6: Maximum perimeter - very subtle breathe */
@keyframes pulse-breathe-6 {
  0%,
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 0.65;
  }
  50% {
    transform: rotate(180deg) scale(1.03);
    opacity: 0.8;
  }
}

/* Ring 7: Far outer - gentle fade breathe */
@keyframes pulse-breathe-7 {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: rotate(180deg) scale(1.02);
    opacity: 0.75;
  }
}

/* Ring 8: Further outer - soft breathe */
@keyframes pulse-breathe-8 {
  0%,
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 0.55;
  }
  50% {
    transform: rotate(180deg) scale(1.015);
    opacity: 0.7;
  }
}

/* Ring 9: Near perimeter - subtle fade */
@keyframes pulse-breathe-9 {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: rotate(180deg) scale(1.01);
    opacity: 0.65;
  }
}

/* Ring 10: Maximum fill - whisper breathe */
@keyframes pulse-breathe-10 {
  0%,
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 0.45;
  }
  50% {
    transform: rotate(180deg) scale(1.005);
    opacity: 0.6;
  }
}

/* ========================================
   SPECTRUM CORE - Neural Origin Point
   ======================================== */

/* The heart/anchor of the neural pulse - Light mode: subtle gray, Dark mode: spectrum colors */
.spectrum-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  /* Light mode desktop: Subtle gray to match bars */
  background: radial-gradient(
    circle at center,
    rgba(50, 50, 50, 0.15) 0%,
    rgba(50, 50, 50, 0.15) 50%,
    transparent 100%
  );
  filter: blur(10px);
  animation: core-pulse 10s ease-in-out infinite; /* No color cycling in light mode */
  z-index: 10; /* Above rings */
  pointer-events: none;
}

/* Spectrum color cycling animation - flows through all 11 colors */
@keyframes spectrum-cycle {
  0% { background: radial-gradient(circle, var(--spectrum-crimson) 0%, var(--spectrum-crimson) 50%, transparent 100%); }
  9% { background: radial-gradient(circle, var(--spectrum-orange) 0%, var(--spectrum-orange) 50%, transparent 100%); }
  18% { background: radial-gradient(circle, var(--spectrum-gold) 0%, var(--spectrum-gold) 50%, transparent 100%); }
  27% { background: radial-gradient(circle, var(--spectrum-lime) 0%, var(--spectrum-lime) 50%, transparent 100%); }
  36% { background: radial-gradient(circle, var(--spectrum-cyan) 0%, var(--spectrum-cyan) 50%, transparent 100%); }
  45% { background: radial-gradient(circle, var(--spectrum-sky) 0%, var(--spectrum-sky) 50%, transparent 100%); }
  54% { background: radial-gradient(circle, var(--spectrum-indigo) 0%, var(--spectrum-indigo) 50%, transparent 100%); }
  63% { background: radial-gradient(circle, var(--spectrum-purple) 0%, var(--spectrum-purple) 50%, transparent 100%); }
  72% { background: radial-gradient(circle, var(--spectrum-magenta) 0%, var(--spectrum-magenta) 50%, transparent 100%); }
  81% { background: radial-gradient(circle, var(--spectrum-pink) 0%, var(--spectrum-pink) 50%, transparent 100%); }
  90% { background: radial-gradient(circle, var(--spectrum-lavender) 0%, var(--spectrum-lavender) 50%, transparent 100%); }
  100% { background: radial-gradient(circle, var(--spectrum-crimson) 0%, var(--spectrum-crimson) 50%, transparent 100%); }
}

/* Gentle pulse/breathe animation */
@keyframes core-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

/* Dark mode: Boost core visibility and intensity with spectrum colors */
[data-theme="dark"] .spectrum-core {
  background: radial-gradient(
    circle at center,
    var(--spectrum-crimson) 0%,
    var(--spectrum-crimson) 50%,
    transparent 100%
  );
  opacity: 1;
  filter: blur(14px);
  animation: spectrum-cycle 33s linear infinite, core-pulse 10s ease-in-out infinite;
}

/* Neural Pulse Dark Mode - GRADIENT BARS (Multi-color gradient WITHIN each rotating bar) */
/* Each bar is a 1/4 or 1/2 segment with 3-4 colors flowing through it! */

[data-theme="dark"] .pulse-ring-0 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 90deg,
    var(--spectrum-crimson) 90deg,
    var(--spectrum-orange) 180deg,
    var(--spectrum-gold) 270deg,
    transparent 270deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 85px, black 85px, black 140px, transparent 140px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 85px, black 85px, black 140px, transparent 140px);
  opacity: 0.95; /* Brightest - hot core */
}

[data-theme="dark"] .pulse-ring-1 {
  border: none;
  background: conic-gradient(
    from 0deg,
    var(--spectrum-gold) 0deg,
    var(--spectrum-lime) 90deg,
    var(--spectrum-cyan) 180deg,
    transparent 180deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 190px, black 190px, black 250px, transparent 250px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 190px, black 190px, black 250px, transparent 250px);
  opacity: 0.9;
}

[data-theme="dark"] .pulse-ring-2 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 90deg,
    var(--spectrum-cyan) 90deg,
    var(--spectrum-sky) 180deg,
    var(--spectrum-indigo) 270deg,
    transparent 270deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 250px, black 250px, black 300px, transparent 300px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 250px, black 250px, black 300px, transparent 300px);
  opacity: 0.88;
}

[data-theme="dark"] .pulse-ring-3 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 180deg,
    var(--spectrum-lime) 180deg,
    var(--spectrum-cyan) 270deg,
    var(--spectrum-sky) 360deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 130px, black 130px, black 200px, transparent 200px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 130px, black 130px, black 200px, transparent 200px);
  opacity: 0.85;
}

[data-theme="dark"] .pulse-ring-4 {
  border: none;
  background: conic-gradient(
    from 0deg,
    var(--spectrum-indigo) 0deg,
    var(--spectrum-purple) 90deg,
    var(--spectrum-magenta) 180deg,
    transparent 180deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 312px, black 312px, black 360px, transparent 360px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 312px, black 312px, black 360px, transparent 360px);
  opacity: 0.82;
}

[data-theme="dark"] .pulse-ring-5 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 90deg,
    var(--spectrum-sky) 90deg,
    var(--spectrum-indigo) 180deg,
    var(--spectrum-purple) 270deg,
    transparent 270deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 382px, black 382px, black 440px, transparent 440px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 382px, black 382px, black 440px, transparent 440px);
  opacity: 0.78;
}

[data-theme="dark"] .pulse-ring-6 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 180deg,
    var(--spectrum-magenta) 180deg,
    var(--spectrum-pink) 270deg,
    var(--spectrum-lavender) 360deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 468px, black 468px, black 520px, transparent 520px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 468px, black 468px, black 520px, transparent 520px);
  opacity: 0.75;
}

[data-theme="dark"] .pulse-ring-7 {
  border: none;
  background: conic-gradient(
    from 0deg,
    var(--spectrum-purple) 0deg,
    var(--spectrum-magenta) 90deg,
    var(--spectrum-pink) 180deg,
    transparent 180deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 554px, black 554px, black 600px, transparent 600px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 554px, black 554px, black 600px, transparent 600px);
  opacity: 0.72;
}

[data-theme="dark"] .pulse-ring-8 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 90deg,
    var(--spectrum-pink) 90deg,
    var(--spectrum-lavender) 180deg,
    var(--spectrum-crimson) 270deg,
    transparent 270deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 640px, black 640px, black 690px, transparent 690px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 640px, black 640px, black 690px, transparent 690px);
  opacity: 0.68;
}

[data-theme="dark"] .pulse-ring-9 {
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 180deg,
    var(--spectrum-orange) 180deg,
    var(--spectrum-gold) 270deg,
    var(--spectrum-lime) 360deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 736px, black 736px, black 780px, transparent 780px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 736px, black 736px, black 780px, transparent 780px);
  opacity: 0.65;
}

[data-theme="dark"] .pulse-ring-10 {
  border: none;
  background: conic-gradient(
    from 0deg,
    var(--spectrum-lavender) 0deg,
    var(--spectrum-crimson) 90deg,
    var(--spectrum-orange) 180deg,
    transparent 180deg
  );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0, transparent 846px, black 846px, black 870px, transparent 870px);
  mask-image: radial-gradient(circle at center, transparent 0, transparent 846px, black 846px, black 870px, transparent 870px);
  opacity: 0.6; /* Softest - gentle perimeter fade */
}

/* ---------- MOUNT: the only thing added. Scales and places the field. ---------- */
.pulse-field {
  position: relative;
  width: 40rem;
  max-width: 100%;
  aspect-ratio: 1;
  overflow: visible;
}
.pulse-mount {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 800px;
  margin: -400px 0 0 -400px;
  transform: scale(0.52);
  transform-origin: center center;
  pointer-events: none;
}