.vrpb,.vrpb *{box-sizing:border-box}
.vrpb{
  --vrpb-background:#171c2b;--vrpb-banner-background:#222b40;
  --vrpb-accent:#ed354f;--vrpb-button-text:#fff;--vrpb-text:#fff;--vrpb-muted:#c3cbd8;
  container-type:inline-size;display:flex;flex-wrap:wrap;isolation:isolate;
  width:100%;max-width:1100px;margin:20px auto;
  background:var(--vrpb-background);
  background:linear-gradient(115deg,var(--vrpb-background) 22%,var(--vrpb-banner-background) 88%);
  color:var(--vrpb-text);border:1px solid rgba(128,128,128,.18);border-radius:24px;
  overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow:0 12px 32px rgba(15,23,42,.13),0 2px 6px rgba(15,23,42,.06);
  transition:box-shadow .3s ease;
}
.vrpb__controls{
  display:flex;align-items:center;flex-wrap:wrap;gap:18px;
  padding:28px;flex:1 1 360px;min-width:0;
}
.vrpb .vrpb__play{
  position:relative;display:grid;place-items:center;flex:0 0 62px;
  width:62px;height:62px;min-height:62px;padding:0;border:1px solid rgba(255,255,255,.18);
  border-radius:50%;background:var(--vrpb-accent);color:var(--vrpb-button-text);
  font:23px/1 system-ui;cursor:pointer;text-align:center;
  box-shadow:0 5px 16px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.vrpb .vrpb__play .vrpb__icon{
  display:block;position:relative;width:24px;height:24px;flex:none;
  padding:0;margin:0;background:none;border:0;line-height:0;
}
.vrpb .vrpb__icon::before,.vrpb .vrpb__icon::after{
  content:"";display:block;position:absolute;margin:0;padding:0;box-sizing:border-box;
}
.vrpb .vrpb__icon::before{
  left:5px;top:1px;width:0;height:0;background:none;border:0;
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  border-left:17px solid currentColor;border-radius:0;
}
.vrpb .vrpb__icon::after{display:none}
.vrpb .vrpb__play[aria-pressed="true"] .vrpb__icon::before,
.vrpb .vrpb__play[aria-pressed="true"] .vrpb__icon::after{
  display:block;top:1px;width:6px;height:22px;border:0;
  background:currentColor;border-radius:2px;
}
.vrpb .vrpb__play[aria-pressed="true"] .vrpb__icon::before{left:3px}
.vrpb .vrpb__play[aria-pressed="true"] .vrpb__icon::after{left:15px}
.vrpb .vrpb__play[aria-pressed="true"]{box-shadow:0 0 0 5px rgba(128,128,128,.16),0 5px 16px rgba(0,0,0,.18)}
.vrpb .vrpb__play:active{transform:scale(.96)}
.vrpb__info{flex:1 1 110px;min-width:0}
.vrpb__info strong{display:block;font-size:19px;font-weight:750;letter-spacing:-.35px;line-height:1.35;color:var(--vrpb-text);overflow-wrap:anywhere}
.vrpb__status{display:block;font-size:12px;font-weight:400;line-height:1.55;color:var(--vrpb-muted);margin-top:6px}
.vrpb__volume{display:flex;flex-direction:column;gap:9px;flex:0 0 72px;color:var(--vrpb-muted);font-size:10px;font-weight:500;letter-spacing:.5px;margin:0}
.vrpb .vrpb__volume input{display:block;width:72px;min-width:0;height:18px;margin:0;padding:0;accent-color:var(--vrpb-accent);cursor:pointer;background:transparent;border:0;box-shadow:none}
.vrpb__banner{flex:1.5 1 400px;min-width:0;display:flex;align-items:center;padding:22px;background:transparent}
.vrpb__banner a{display:block;width:100%;line-height:0;border-radius:14px;transition:box-shadow .25s ease}
.vrpb .vrpb__banner img{display:block;width:100%;height:auto;max-width:100%;margin:0;border:1px solid rgba(128,128,128,.15);border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.vrpb button:focus-visible,.vrpb a:focus-visible,.vrpb input:focus-visible{outline:3px solid var(--vrpb-text);outline-offset:3px}
.vrpb audio{display:none}
@media (hover:hover){
  .vrpb:hover{box-shadow:0 16px 40px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.08)}
  .vrpb .vrpb__play:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 8px 20px rgba(0,0,0,.24)}
  .vrpb__banner a:hover{box-shadow:0 6px 20px rgba(0,0,0,.18)}
}
@container (max-width:760px){
  .vrpb__controls{flex-basis:100%;padding:22px 24px 14px;gap:16px}
  .vrpb__banner{flex-basis:100%;padding:8px 24px 24px}
}
@container (max-width:340px){
  .vrpb__controls{padding:20px 18px 12px;gap:12px}
  .vrpb .vrpb__play{flex-basis:54px;width:54px;height:54px;min-height:54px}
  .vrpb__volume{flex:1 0 100%;flex-direction:row;align-items:center;gap:14px}
  .vrpb .vrpb__volume input{flex:1;width:100%}
  .vrpb__banner{padding:8px 18px 18px}
}
@media (max-width:760px){
  .vrpb__controls{flex-basis:100%;padding:22px 24px 14px;gap:16px}
  .vrpb__banner{flex-basis:100%;padding:8px 24px 24px}
}
@media (max-width:340px){
  .vrpb__controls{padding:20px 18px 12px;gap:12px}
  .vrpb .vrpb__play{flex-basis:54px;width:54px;height:54px;min-height:54px}
  .vrpb__volume{flex:1 0 100%;flex-direction:row;align-items:center;gap:14px}
  .vrpb .vrpb__volume input{flex:1;width:100%}
  .vrpb__banner{padding:8px 18px 18px}
}
@media (prefers-reduced-motion:reduce){.vrpb,.vrpb *{transition:none!important}}

/* Keep even very narrow embeds inside their parent without clipping controls. */
.vrpb__info{flex-basis:90px}
.vrpb__info strong,.vrpb__status{overflow-wrap:anywhere}
@container (max-width:220px){
  .vrpb__controls{gap:10px;padding:14px;justify-content:center}
  .vrpb__info{flex:1 0 100%;text-align:center}
  .vrpb__volume{flex-wrap:wrap;justify-content:center}
  .vrpb .vrpb__volume input{flex:1 0 100%;width:100%}
  .vrpb__banner{padding:6px 12px 14px}
}
@media (max-width:220px){
  .vrpb__controls{gap:10px;padding:14px;justify-content:center}
  .vrpb__info{flex:1 0 100%;text-align:center}
  .vrpb__volume{flex-wrap:wrap;justify-content:center}
  .vrpb .vrpb__volume input{flex:1 0 100%;width:100%}
  .vrpb__banner{padding:6px 12px 14px}
}