.capw-player{
  --capw-bg:#12161c;
  --capw-bg2:#0f1318;
  --capw-border:rgba(255,255,255,.08);
  --capw-text:#e5e7eb;
  --capw-muted:#aab3c2;
  --capw-accent:#f59e0b;
  background: linear-gradient(180deg,var(--capw-bg),var(--capw-bg2));
  border:1px solid var(--capw-border);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  margin:12px 0;
  color:var(--capw-text);
  max-width: 100%;
}
.capw-top{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.capw-play{
  width:42px;height:42px;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--capw-accent) 40%, transparent);
  background: color-mix(in srgb, var(--capw-accent) 12%, #131820);
  color:#ffd28a; cursor:pointer;
  display:grid; place-items:center;
  padding:0; line-height:1;
}
.capw-play:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.capw-icon{ font-size:14px; }
.capw-title{ font-weight:700; font-size:14px; line-height:1.2; }
.capw-subtitle{ color:var(--capw-muted); font-size:12px; margin-top:2px; }
.capw-time{ color:var(--capw-muted); font-size:12px; white-space:nowrap; }

.capw-wave-wrap{ outline:none; cursor:pointer; }
.capw-wave{
  position:relative;
  height:78px;
  border-radius:12px;
  border:1px solid var(--capw-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    radial-gradient(circle at 15% 20%, rgba(245,158,11,.06), transparent 50%);
  padding:10px;
  display:flex;
  align-items:flex-end;
  gap:3px;
  overflow:hidden;
}
.capw-bar{
  display:block;
  width: calc((100% - 3px*47)/48);
  min-width: 2px;
  border-radius:3px;
  background: rgba(255,255,255,.22);
  position:relative;
  z-index:1;
  transition: background-color .12s ease, opacity .12s ease;
}
.capw-progress{
  position:absolute; inset:0 auto 0 0;
  width:0%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--capw-accent) 28%, transparent), color-mix(in srgb, var(--capw-accent) 10%, transparent));
  z-index:0;
  pointer-events:none;
}
.capw-scrub{
  position:absolute; top:8px; bottom:8px; left:0%;
  width:2px; background: color-mix(in srgb, var(--capw-accent) 75%, white 10%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--capw-accent) 18%, transparent);
  border-radius:99px;
  pointer-events:none;
}
.capw-player.is-playing .capw-bar{
  animation: capwPulse 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i,0) * 22ms);
}
@keyframes capwPulse{
  0%,100%{ opacity:.9; }
  50%{ opacity:.65; }
}
.capw-player .capw-bar.capw-played{
  background: color-mix(in srgb, var(--capw-accent) 85%, white 8%);
}
.capw-wave-wrap:focus-visible .capw-wave{
  outline: 2px solid color-mix(in srgb, var(--capw-accent) 45%, transparent);
  outline-offset: 2px;
}
@media (max-width:640px){
  .capw-top{ grid-template-columns:auto 1fr; }
  .capw-time{ grid-column:1 / -1; justify-self:end; margin-top:-6px; }
  .capw-wave{ height:72px; }
}


/* v0.1.2 animated live bars */
.capw-wave{
  align-items:flex-end;
}
.capw-bar{
  transform-origin: center bottom;
  will-change: transform, opacity;
}

/* Base idle subtle movement */
.capw-player .capw-bar{
  animation: capwIdleFloat 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i,0) * 36ms);
}
.capw-player .capw-bar:nth-child(3n){ animation-duration: 3.1s; }
.capw-player .capw-bar:nth-child(4n){ animation-duration: 2.5s; }

@keyframes capwIdleFloat{
  0%,100%{ transform: scaleY(.94); opacity: .9; }
  50%{ transform: scaleY(1.02); opacity: .98; }
}

/* Playing mode gets a stronger equalizer motion */
.capw-player.is-playing .capw-bar{
  animation-name: capwEqDance, capwGlowPulse;
  animation-duration: 900ms, 1400ms;
  animation-timing-function: cubic-bezier(.42,0,.25,1), ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-delay: calc(var(--i,0) * 23ms), calc(var(--i,0) * 17ms);
}

@keyframes capwEqDance{
  0%   { transform: scaleY(.45); }
  12%  { transform: scaleY(.92); }
  24%  { transform: scaleY(.62); }
  38%  { transform: scaleY(1.10); }
  52%  { transform: scaleY(.70); }
  66%  { transform: scaleY(1.22); }
  82%  { transform: scaleY(.58); }
  100% { transform: scaleY(.88); }
}

@keyframes capwGlowPulse{
  0%,100%{ opacity:.82; }
  50%{ opacity:1; }
}

.capw-player .capw-bar.capw-played{
  box-shadow: 0 0 0 1px rgba(245,158,11,.08), 0 0 12px rgba(245,158,11,.12);
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce){
  .capw-player .capw-bar,
  .capw-player.is-playing .capw-bar{
    animation: none !important;
    transform: none !important;
  }
}


/* v0.1.3 real audio-reactive support */
.capw-player.capw-reactive-ready .capw-bar{
  transition: transform 70ms linear, opacity 90ms linear, background-color .12s ease;
}
.capw-player.capw-reactive-ready.is-playing .capw-bar{
  animation: none !important; /* disable fake EQ animation when real analyser is active */
}
.capw-player.capw-reactive-ready .capw-bar{
  transform: scaleY(var(--capw-scale, .9));
}
.capw-player.capw-reactive-off .capw-subtitle::after{
  content: " • visual mode";
  opacity: .75;
}