/* Canopy sound: a small jewel in the page flow, never an overlay.
   Root integration keeps the existing data-sound-play / data-sound-mute hooks.
   Equalizer requires playing + unmuted + an audible media state. */
.canopy-sound[hidden] { display: none !important; }
.canopy-sound {
  --sound-ink: #193b2e;
  --sound-muted: #56645a;
  --sound-face: #153c2e;
  --sound-face-top: #295444;
  --sound-face-bottom: #102b22;
  --sound-type: #f5f2e9;
  --sound-rim: #a1b475;
  --sound-jewel: #d0df8c;
  --sound-metal: #b78b64;
  --sound-halo: 173, 199, 104;
  --sound-focus: #985d3b;
  --sound-muted-face: rgba(25, 59, 46, .035);
  --sound-muted-border: rgba(25, 59, 46, .27);
  color: var(--sound-ink);
  position: relative;
  isolation: isolate;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-block: 25px 0;
  padding: 0;
  background: none;
  border: 0;
  font: 300 13px/1.4 'Space Grotesk', Arial, sans-serif;
}
.canopy-sound--markets {
  --sound-ink: #eef3f3;
  --sound-muted: #b8c9c3;
  --sound-face: #192b36;
  --sound-face-top: #314a4e;
  --sound-face-bottom: #13232f;
  --sound-type: #eef3f3;
  --sound-rim: #8cbaa6;
  --sound-jewel: #c4ecd7;
  --sound-metal: #829fa2;
  --sound-halo: 142, 216, 179;
  --sound-focus: #b8d5c5;
  --sound-muted-face: rgba(184, 213, 197, .045);
  --sound-muted-border: rgba(184, 213, 197, .3);
}
.canopy-sound *, .canopy-sound *::before, .canopy-sound *::after { box-sizing: border-box; }
.canopy-sound__title {
  display: block;
  margin: 0 0 11px 2px;
  color: var(--sound-muted);
  font: 400 8px/1.4 'IBM Plex Mono', 'Courier New', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.canopy-sound__buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; }
.canopy-sound button {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  touch-action: manipulation;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 48px;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  user-select: none;
  transition: background-color .25s, border-color .25s, box-shadow .3s, transform .25s;
}
.canopy-sound [data-sound-play] {
  gap: 10px;
  min-width: 193px;
  padding: 0 15px 0 9px;
  color: var(--sound-type);
  background: linear-gradient(146deg, var(--sound-face-top) 0%, var(--sound-face) 37%, var(--sound-face-bottom) 100%);
  border: 1px solid var(--sound-rim);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -2px 2px rgba(0, 0, 0, .18),
    0 4px 9px rgba(9, 29, 22, .09), 0 0 19px rgba(var(--sound-halo), .19);
}
/* The glow stays within the control's geometry; no large layer sits on content. */
.canopy-sound [data-sound-play]::before {
  content: '';
  position: absolute;
  inset: 6px 4px 2px;
  z-index: -1;
  border-radius: 15px;
  background: rgba(var(--sound-halo), .36);
  filter: blur(14px);
  opacity: .48;
  transform: translateY(4px);
  pointer-events: none;
  animation: canopy-jewel-bloom 7s ease-in-out infinite;
}
.canopy-sound [data-sound-play]::after {
  content: '';
  position: absolute;
  left: 17px;
  right: 17px;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 4%, rgba(255, 255, 255, .62) 36%, rgba(var(--sound-halo), .12) 66%, transparent);
  opacity: .75;
}
.canopy-sound [data-sound-play]:hover {
  border-color: var(--sound-jewel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .19), inset 0 -2px 2px rgba(0, 0, 0, .18),
    0 5px 12px rgba(9, 29, 22, .1), 0 0 24px rgba(var(--sound-halo), .34);
  transform: translateY(-1px);
}
.canopy-sound [data-sound-play]:active { transform: translateY(1px); }
.canopy-sound__label { white-space: nowrap; position: relative; z-index: 1; letter-spacing: -.01em; }
.canopy-sound__jewel { display: block; flex: 0 0 30px; width: 30px; height: 34px; overflow: visible; color: var(--sound-jewel); }
.canopy-sound__facet-shell { fill: var(--sound-metal); fill-opacity: .21; stroke: var(--sound-metal); stroke-width: .7; }
.canopy-sound__facet-left { fill: currentColor; fill-opacity: .08; }
.canopy-sound__facet-right { fill: currentColor; fill-opacity: .17; }
.canopy-sound__facet-top { fill: currentColor; fill-opacity: .24; }
.canopy-sound__facet-line { fill: none; stroke: currentColor; stroke-opacity: .36; stroke-width: .55; }
.canopy-sound__play-symbol, .canopy-sound__pause-symbol { fill: currentColor; }
.canopy-sound__pause-symbol { display: none; }
.canopy-sound[data-state="playing"] .canopy-sound__play-symbol { display: none; }
.canopy-sound[data-state="playing"] .canopy-sound__pause-symbol { display: block; }
/* Five individual, slow-moving sparkles. They are decorative, never interactive. */
.canopy-sound__sparkles { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--sound-jewel); }
.canopy-sound__sparkle { fill: currentColor; opacity: .2; transform-box: fill-box; transform-origin: center; animation: canopy-sparkle-drift 8s ease-in-out infinite; }
.canopy-sound__sparkle--2 { animation-duration: 10.4s; animation-delay: -4.1s; opacity: .3; }
.canopy-sound__sparkle--3 { animation-duration: 9.3s; animation-delay: -6.8s; opacity: .18; }
.canopy-sound__sparkle--4 { animation-duration: 11.2s; animation-delay: -2.8s; opacity: .34; }
.canopy-sound__sparkle--5 { animation-duration: 12.7s; animation-delay: -9.2s; opacity: .18; }
.canopy-sound__meter { display: inline-flex; flex: 0 0 21px; width: 21px; height: 19px; gap: 2px; align-items: center; justify-content: center; margin-left: 2px; }
.canopy-sound__bar { width: 2px; height: 12px; border-radius: 2px; background: var(--sound-jewel); transform: scaleY(.26); opacity: .55; transform-origin: center; }
.canopy-sound__bar:nth-child(2), .canopy-sound__bar:nth-child(4) { height: 17px; }
.canopy-sound__bar:nth-child(3) { height: 19px; }
/* No default bar animation. Idle, starting, paused, ended, error, muted and
   buffering states must all remain still. This one selector opts into motion. */
.canopy-sound[data-state="playing"][data-muted="false"][data-audible="true"] .canopy-sound__bar {
  animation: canopy-equalizer .98s ease-in-out infinite alternate;
  opacity: .94;
}
.canopy-sound[data-state="playing"] .canopy-sound__bar:nth-child(2) { animation-duration: .79s; animation-delay: -.39s; }
.canopy-sound[data-state="playing"] .canopy-sound__bar:nth-child(3) { animation-duration: 1.17s; animation-delay: -.61s; }
.canopy-sound[data-state="playing"] .canopy-sound__bar:nth-child(4) { animation-duration: .88s; animation-delay: -.22s; }
.canopy-sound[data-state="playing"] .canopy-sound__bar:nth-child(5) { animation-duration: 1.08s; animation-delay: -.47s; }
.canopy-sound [data-sound-mute] {
  gap: 7px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--sound-ink);
  background: var(--sound-muted-face);
  border: 1px solid var(--sound-muted-border);
  border-radius: 10px;
  font-size: 11px;
}
.canopy-sound [data-sound-mute] svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.canopy-sound [data-sound-mute]:hover { border-color: var(--sound-ink); }
.canopy-sound [data-sound-mute][aria-pressed="true"] { border-color: var(--sound-ink); background: var(--sound-ink); color: var(--sound-face-bottom); }
.canopy-sound:not(.canopy-sound--markets) [data-sound-mute][aria-pressed="true"] { color: var(--sound-type); }
.canopy-sound__mute-slash { display: none; }
.canopy-sound [aria-pressed="true"] .canopy-sound__mute-waves { display: none; }
.canopy-sound [aria-pressed="true"] .canopy-sound__mute-slash { display: block; }
.canopy-sound button:focus-visible { outline: 2px solid var(--sound-focus); outline-offset: 5px; }
.canopy-sound__status { display: block; max-width: 34ch; margin-top: 11px; color: var(--sound-muted); font-size: 11px; line-height: 1.6; }
.canopy-sound__status:empty { display: none; }
@keyframes canopy-jewel-bloom { 0%, 100% { opacity: .4; } 50% { opacity: .66; } }
@keyframes canopy-sparkle-drift { 0%, 100% { opacity: .17; transform: translate(0, 1px) scale(.8); } 50% { opacity: .58; transform: translate(1px, -2px) scale(1.04); } }
@keyframes canopy-equalizer { 0% { transform: scaleY(.25); } 28% { transform: scaleY(.63); } 61% { transform: scaleY(.38); } 100% { transform: scaleY(.94); } }
@media (max-width: 420px) {
  .canopy-sound__buttons { gap: 10px; }
  .canopy-sound [data-sound-mute] { width: 44px; padding: 0; }
  .canopy-sound__mute-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .canopy-sound *, .canopy-sound *::before, .canopy-sound *::after { animation: none !important; transition: none !important; }
  .canopy-sound[data-state="playing"][data-muted="false"][data-audible="true"] .canopy-sound__bar { transform: scaleY(.62); }
}
@media (forced-colors: active) {
  .canopy-sound [data-sound-play], .canopy-sound [data-sound-mute] { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; box-shadow: none; }
  .canopy-sound [data-sound-play]::before, .canopy-sound [data-sound-play]::after, .canopy-sound__sparkles { display: none; }
  .canopy-sound__jewel { color: ButtonText; }
  .canopy-sound__bar { background: ButtonText; }
  .canopy-sound [data-sound-mute][aria-pressed="true"] { color: HighlightText !important; background: Highlight; border: 2px solid Highlight; }
  .canopy-sound button:focus-visible { outline-color: Highlight; }
}