.voice-player{
  --vp-accent:var(--blue,#9fafbe);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:min(100%,720px);
  margin:clamp(1.8rem,3.5vw,3rem) 0 1rem;
  padding:clamp(1.2rem,2.6vw,1.8rem);
  border:1px solid rgba(255,255,255,.14);
  border-radius:1.35rem;
  background:
    radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--vp-accent) 34%,transparent),transparent 32%),
    linear-gradient(135deg,#302e2f 0%,#242223 100%);
  color:#fffdfb;
  box-shadow:0 22px 55px rgba(47,45,46,.18);
}
.voice-player::after{
  content:"";
  position:absolute;
  width:12rem;
  aspect-ratio:1;
  right:-7rem;
  bottom:-8rem;
  border:1px solid color-mix(in srgb,var(--vp-accent) 45%,transparent);
  border-radius:50%;
  box-shadow:0 0 0 2.8rem color-mix(in srgb,var(--vp-accent) 7%,transparent),0 0 0 5.5rem color-mix(in srgb,var(--vp-accent) 4%,transparent);
  z-index:-1;
}
.vp-topline{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.15rem}
.vp-kicker{font:700 .72rem/1.4 var(--sans,"Plus Jakarta Sans",sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#ded8d3}
.vp-state{display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;padding:.38rem .65rem;border:1px solid rgba(255,255,255,.17);border-radius:99px;font:600 .7rem/1 var(--sans,"Plus Jakarta Sans",sans-serif);color:#f0ebe7;background:rgba(255,255,255,.06)}
.vp-state::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--vp-accent);box-shadow:0 0 0 .22rem color-mix(in srgb,var(--vp-accent) 16%,transparent)}
.vp-intro{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center}
.vp-play{width:3.9rem;height:3.9rem;border:0!important;border-radius:50%;display:grid;place-items:center;padding:0;background:var(--vp-accent)!important;color:#242223!important;box-shadow:0 10px 28px color-mix(in srgb,var(--vp-accent) 22%,transparent);transition:transform .25s ease,box-shadow .25s ease}
.vp-play:not(:disabled):hover{transform:scale(1.06);box-shadow:0 14px 34px color-mix(in srgb,var(--vp-accent) 36%,transparent)}
.vp-play:disabled{cursor:default;opacity:.78}
.vp-play svg{width:1.1rem;height:1.1rem;margin-left:.15rem;fill:currentColor}
.vp-copy h2{margin:0!important;font-family:var(--serif,"Instrument Serif",serif)!important;font-size:clamp(1.75rem,3.2vw,2.55rem)!important;font-weight:400!important;line-height:1.02!important;letter-spacing:-.025em!important;color:#fffdfb!important}
.vp-topic{margin:.35rem 0 0!important;font:500 .78rem/1.5 var(--sans,"Plus Jakarta Sans",sans-serif)!important;color:#cfc8c3!important}
.vp-wave{height:2.45rem;display:flex;align-items:center;gap:.22rem;margin:1.25rem 0 .65rem;overflow:hidden}
.vp-wave i{display:block;width:.18rem;height:var(--bar,35%);border-radius:99px;background:linear-gradient(to top,var(--vp-accent),#fffdfb);opacity:.72;transform-origin:center}
.vp-wave i:nth-child(4n+1){--bar:30%}.vp-wave i:nth-child(4n+2){--bar:72%}.vp-wave i:nth-child(4n+3){--bar:48%}.vp-wave i:nth-child(4n){--bar:90%}
.voice-player[data-ready="false"] .vp-wave i{animation:vp-preview 2.8s ease-in-out infinite alternate;animation-delay:calc(var(--n,1)*-.08s)}
.voice-player.is-playing .vp-wave i{animation:vp-playing .7s ease-in-out infinite alternate;animation-delay:calc(var(--n,1)*-.045s)}
.vp-timeline{display:grid;grid-template-columns:2.8rem 1fr 2.8rem;gap:.7rem;align-items:center;font:500 .7rem/1 var(--sans,"Plus Jakarta Sans",sans-serif);color:#cfc8c3}
.vp-timeline span:last-child{text-align:right}
.vp-seek{width:100%;height:3px;margin:0;accent-color:var(--vp-accent)}
.vp-seek:disabled{opacity:.42}
.vp-tools{display:flex;align-items:center;gap:.55rem;margin-top:1rem}
.vp-skip{min-width:3.3rem;height:2rem!important;width:auto!important;padding:0 .6rem!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:99px!important;background:rgba(255,255,255,.04)!important;color:#e7e1dd!important;font:600 .7rem/1 var(--sans,"Plus Jakarta Sans",sans-serif)!important}
.vp-tools label{margin-left:auto;display:flex;align-items:center;gap:.5rem;font:600 .7rem/1 var(--sans,"Plus Jakarta Sans",sans-serif);color:#cfc8c3}
.vp-tools select{min-height:2rem;padding:.25rem 1.7rem .25rem .6rem;border:1px solid rgba(255,255,255,.18);border-radius:99px;background:#312f30;color:#fffdfb;font-size:.72rem}
.vp-status{margin:.75rem 0 0!important;font:500 .72rem/1.4 var(--sans,"Plus Jakarta Sans",sans-serif)!important;color:color-mix(in srgb,var(--vp-accent) 78%,white)!important}
@keyframes vp-preview{from{transform:scaleY(.55);opacity:.38}to{transform:scaleY(1);opacity:.78}}
@keyframes vp-playing{from{transform:scaleY(.35)}to{transform:scaleY(1.08)}}
@media(max-width:640px){
  .voice-player{margin-top:1.5rem;padding:1.1rem;border-radius:1rem}
  .vp-topline{align-items:flex-start}
  .vp-kicker{font-size:.65rem;max-width:12rem}
  .vp-intro{gap:.8rem}
  .vp-play{width:3.35rem;height:3.35rem}
  .vp-wave{gap:.16rem}
  .vp-wave i{width:.14rem}
}
@media(prefers-reduced-motion:reduce){
  .voice-player .vp-wave i{animation:none!important}
  .vp-play{transition:none}
}