d-ab{display:block}.d-ab{border-top:.1rem solid var(--d-line)}.d-ab__clip{display:grid;grid-template-columns:6.4rem minmax(0,1fr) auto;grid-template-areas:"play name switch" "bar bar bar";align-items:center;gap:1.2rem 2rem;padding:2rem .6rem;border-bottom:.1rem solid var(--d-line)}.d-ab__play{all:unset;grid-area:play;display:grid;place-items:center;width:6.4rem;height:6.4rem;border-radius:50%;background:var(--d-ink);color:var(--d-black);cursor:pointer;transition:transform .15s}.d-ab__play:hover{transform:scale(1.05)}.d-ab__play:focus-visible,.d-ab__toggle:focus-visible{outline:.2rem solid var(--d-ink);outline-offset:.3rem}.d-ab__play svg{width:2.4rem;height:2.4rem}.d-ab .d-i-pause,.d-ab__clip.is-playing .d-i-play{display:none}.d-ab__clip.is-playing .d-i-pause{display:block}.d-ab__name{grid-area:name;min-width:0}[class*=section-vsb-] .d-ab__title{margin:0;font:800 clamp(2rem,2vw,2.6rem)/1.15 var(--d-body);text-transform:none;letter-spacing:-.01em;color:var(--d-ink)}.d-ab__detail{margin:.4rem 0 0;color:var(--d-mute);font-size:1.4rem}.d-ab__switch{grid-area:switch;display:flex;align-items:center;gap:1.2rem;font:800 1.4rem/1 var(--d-body);text-transform:uppercase;letter-spacing:.08em}.d-ab__side{color:var(--d-mute);transition:color .15s}.d-ab__clip[data-side=before] .d-ab__side[data-for=before],.d-ab__clip[data-side=after] .d-ab__side[data-for=after]{color:var(--d-ink)}.d-ab__toggle{all:unset;position:relative;width:6.4rem;height:3.4rem;border-radius:3.4rem;background:#3a3a37;cursor:pointer;transition:background-color .15s}.d-ab__knob{position:absolute;top:.4rem;left:.4rem;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--d-ink);transition:transform .15s}.d-ab__toggle[aria-checked=true]{background:var(--d-yellow)}.d-ab__toggle[aria-checked=true] .d-ab__knob{transform:translate(3rem);background:var(--d-black)}.d-ab__bar{grid-area:bar;height:.4rem;background:#2f2f2c}.d-ab__bar span{display:block;height:100%;width:calc(var(--progress, 0) * 100%);background:var(--d-ink)}.d-ab__note{margin:2rem 0 0;color:var(--d-mute);font-size:1.5rem;max-width:70ch}@media screen and (max-width:749px){.d-ab__clip{grid-template-columns:5.2rem minmax(0,1fr);grid-template-areas:"play name" "switch switch" "bar bar";gap:1.2rem 1.4rem}.d-ab__play{width:5.2rem;height:5.2rem}.d-ab__switch{justify-content:flex-start}}@media(prefers-reduced-motion:reduce){.d-ab__play,.d-ab__toggle,.d-ab__knob,.d-ab__side{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/68/assets/vsb-ab-player.css.map */