.sab,.sab *,.sab *:before,.sab *:after{box-sizing:border-box}.sab{--g:linear-gradient(95deg,#d72631 0%,#b3357a 18%,#6d3bb5 34%,#2563c9 52%,#2f9e8f 70%,#8aa12b 85%,#e0b020 100%);--g-soft:linear-gradient(120deg,#fdecef 0%,#eef0fb 42%,#e9f4f0 64%,#fbf3e2 100%);--ink:#2a2330;--radius:30px;margin:28px 0;font-family:inherit;display:flex}.sab--left{justify-content:flex-start}.sab--center{justify-content:center}.sab--right{justify-content:flex-end}.sab__audio{display:none}.sab__shell{width:100%;max-width:640px;border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 44px -16px rgba(60,30,90,.45),0 4px 12px rgba(0,0,0,.08);background:#fff}.sab__bar{position:relative;width:100%;display:flex;align-items:center;gap:16px;padding:16px 24px;border:0;cursor:pointer;background:var(--g);background-size:160% 100%;background-position:0 50%;text-align:left;-webkit-tap-highlight-color:transparent;transition:background-position 6s linear,filter .25s ease;overflow:hidden}.sab__bar:hover{filter:saturate(1.08) brightness(1.03)}.sab.is-open .sab__bar{animation:sab-flow 14s linear infinite}@keyframes sab-flow{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}.sab__bar:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}.sab__bar:hover:after{animation:sab-sheen 1.1s ease}@keyframes sab-sheen{to{transform:translateX(120%)}}.sab__play{position:relative;flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center}.sab__play:before{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,255,255,.92)}.sab.is-playing .sab__play:before{animation:sab-ring 2.4s ease-in-out infinite}@keyframes sab-ring{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 0 6px rgba(255,255,255,.16)}}.sab__ico{position:absolute;width:26px;height:26px;color:#fff;display:grid;place-items:center;transition:opacity .3s ease,transform .3s ease}.sab__ico svg{width:100%;height:100%}.sab__ico--play{opacity:1;transform:scale(1);margin-left:2px}.sab__ico--pause{opacity:0;transform:scale(.6)}.sab.is-playing .sab__ico--play{opacity:0;transform:scale(.6)}.sab.is-playing .sab__ico--pause{opacity:1;transform:scale(1)}.sab__titles{position:relative;flex:1 1 auto;min-width:0;min-height:1.5em;align-self:center}.sab__t{position:absolute;left:0;right:0;top:50%;color:#fff;font-weight:800;font-size:clamp(18px, 3.7vw, 27px);line-height:1.5;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.12);transform:translateY(-50%);transition:opacity .35s ease,transform .35s ease}.sab__t--play{opacity:0;transform:translateY(calc(-50% + 8px))}.sab.is-open .sab__t--default{opacity:0;transform:translateY(calc(-50% - 8px))}.sab.is-open .sab__t--play{opacity:1;transform:translateY(-50%)}.sab__wave{flex:0 0 auto;display:flex;align-items:center;gap:2px;height:30px;padding-left:6px;transition:opacity .4s ease,transform .45s ease,filter .4s ease}.sab__wave i{display:block;width:3px;height:var(--h);border-radius:3px;background:rgba(255,255,255,.95);animation:sab-mini 1.3s ease-in-out infinite;animation-delay:var(--d);transform-origin:center}@keyframes sab-mini{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.25)}}.sab.is-open .sab__wave{opacity:0;transform:translateX(18px) scale(.6);filter:blur(2px)}.sab__panelwrap{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s cubic-bezier(.22,.61,.36,1),opacity .45s ease}.sab.is-open .sab__panelwrap{grid-template-rows:1fr;opacity:1}.sab__panel{overflow:hidden;min-height:0;background:var(--g-soft);padding:22px 24px 16px}.sab__progress{display:flex;align-items:center;gap:14px}.sab__time{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;flex:0 0 auto}.sab__track{position:relative;flex:1 1 auto;height:8px;border-radius:8px;cursor:pointer;background:var(--g);background-size:100% 100%;outline:none}.sab__track:before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.62)}.sab__buffer,.sab__fill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit}.sab__buffer{width:0;background:rgba(255,255,255,.3)}.sab__fill{width:0;background:var(--g);background-size:640px 100%}.sab__knob{position:absolute;top:50%;left:0;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.28);transform:translate(-50%,-50%);transition:transform .12s ease}.sab__track:hover .sab__knob,.sab__track:focus-visible .sab__knob{transform:translate(-50%,-50%) scale(1.18)}.sab__mid{display:flex;align-items:center;gap:18px;margin-top:18px}.sab__controls{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px;background:rgba(255,255,255,.78);border-radius:999px;box-shadow:0 6px 18px -8px rgba(120,60,140,.4);backdrop-filter:blur(4px)}.sab__ctrl{border:0;background:0 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit;color:var(--ink);transition:transform .15s ease,filter .15s ease;-webkit-tap-highlight-color:transparent}.sab__ctrl:hover{filter:brightness(1.05)}.sab__ctrl:active{transform:scale(.92)}.sab__skip{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#d72631;transition:background .15s ease}.sab__rew:hover .sab__skip,.sab__fwd:hover .sab__skip{background:rgba(215,38,49,.1)}.sab__skip svg{width:40px;height:40px;display:block}.sab__speed{padding:9px 16px;border-radius:999px;background:linear-gradient(120deg,#f3c8dd,#e7c4ef);color:#8a2b63;font-weight:700;font-size:14px}.sab__speed svg{width:18px;height:18px}.sab__speed b{font-weight:800}.sab__viz{flex:1 1 auto;width:100%;height:96px;display:block;opacity:0;transform:scaleY(.4);transform-origin:bottom;transition:opacity .5s ease .15s,transform .55s cubic-bezier(.22,.61,.36,1) .15s}.sab.is-open .sab__viz{opacity:1;transform:scaleY(1)}.sab__footer{display:flex;align-items:center;gap:14px;margin-top:12px}.sab__rule{flex:1 1 auto;height:1.5px;background:rgba(70,40,80,.28);border-radius:2px}.sab__credit{flex:0 0 auto;font-size:14px;font-weight:700;color:#46283f;display:inline-flex;align-items:center;gap:5px}.sab__credit a{color:inherit;text-decoration:none;border-bottom:1.5px solid transparent;transition:border-color .15s ease}.sab__credit a:hover{border-bottom-color:currentColor}.sab__heart{color:#e23744;animation:sab-beat 1.6s ease-in-out infinite}@keyframes sab-beat{0%,100%{transform:scale(1)}25%{transform:scale(1.22)}40%{transform:scale(1)}}@media (max-width:600px){.sab__bar{padding:14px 18px;gap:12px}.sab__play{width:46px;height:46px}.sab__ico{width:22px;height:22px}.sab__wave{height:24px}.sab__panel{padding:18px 16px 14px}.sab__mid{flex-direction:column;align-items:stretch;gap:14px}.sab__controls{width:100%;justify-content:space-between}.sab__viz{height:84px}}@media (max-width:460px){.sab__bar{padding:12px 14px;gap:10px}.sab__play{width:42px;height:42px}.sab__play:before{border-width:2.5px}.sab__ico{width:19px;height:19px}.sab__progress{gap:10px}.sab__time{font-size:12px}.sab__controls{gap:4px;padding:6px}.sab__skip{width:40px;height:40px}.sab__skip svg{width:36px;height:36px}.sab__speed{padding:8px 12px;font-size:13px}.sab__viz{height:72px}.sab__footer{gap:10px}.sab__credit{font-size:13px}}@media (max-width:430px){.sab__wave{display:none}}@media (max-width:360px){.sab__speed svg{display:none}.sab__speed{padding:8px 10px;font-size:12px}.sab__skip{width:36px;height:36px}.sab__skip svg{width:33px;height:33px}.sab__viz{height:64px}}@media (prefers-reduced-motion:reduce){.sab__bar,.sab.is-open .sab__bar{animation:none}.sab__wave i{animation:none;transform:scaleY(.9)}.sab__heart{animation:none}.sab.is-playing .sab__play:before{animation:none}}