.xv{position:relative;max-width:1100px;margin:clamp(28px,3.5vw,48px) auto 0;padding:0;}
.xv-box{position:relative;aspect-ratio:16/9;background:#0A1526;border-radius:24px;overflow:hidden;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9);}
.xv.is-tall .xv-box{aspect-ratio:4/5;}
.xv-v{display:block;width:100%;height:100%;object-fit:cover;background:#0A1526;}

.xv{max-width:1180px;}
.xv-box,.xv.is-tall .xv-box{aspect-ratio:auto;border:clamp(8px,1.1vw,14px) solid var(--navy);border-radius:22px;background:var(--navy);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9);}
.on-navy .xv-box,.band .xv-box{box-shadow:0 0 0 3px var(--cream),0 30px 60px -40px rgba(0,0,0,.9);}
.xv-v{height:auto;aspect-ratio:16/9;border-radius:9px;}
.xv.is-tall .xv-v{aspect-ratio:4/5;}

.xv-btn{position:absolute;right:14px;bottom:14px;z-index:2;width:48px;height:48px;padding:0;display:grid;place-items:center;
  border-radius:50%;border:2px solid rgba(255,255,255,.9);background:rgba(0,10,24,.74);color:#fff;cursor:pointer;
  transition:background-color .2s var(--m-ease,ease),transform .2s var(--m-ease,ease);}
.xv-btn:hover{background:var(--navy);transform:scale(1.06);}
.xv-btn:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:50%;}
.xv-btn svg{width:18px;height:18px;display:block;}
.xv-btn .xv-play{display:none;}
.xv-btn[aria-pressed="true"] .xv-play{display:block;}
.xv-btn[aria-pressed="true"] .xv-pause{display:none;}
html:not(.js) .xv-btn{display:none;}

.xv-cap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;}

@media (max-width:639px){
  .xv-box,.xv.is-tall .xv-box{border-radius:16px;}
  .xv-btn{right:10px;bottom:10px;}
}

.band--xv{padding-block:clamp(36px,5vw,64px);}
.xv-pop{max-width:440px;margin-top:0;}
.xv-pop.is-tall{max-width:300px;}
.xv-pop .xv-btn{display:none;}
.xv-open{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:0;border:0;border-radius:9px;
  background:rgba(0,10,24,.28);cursor:pointer;transition:background-color .25s var(--m-ease,ease);}
.xv-open:hover{background:rgba(0,10,24,.12);}
.xv-open:focus-visible{outline:3px solid var(--lime);outline-offset:4px;}
.xv-open span{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px 0 8px;border-radius:999px;
  background:var(--navy);color:var(--cream);font:600 1rem/1 "Instrument Sans",system-ui,sans-serif;border:2px solid var(--cream);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7);transition:transform .25s var(--m-ease,ease);}
.xv-open:hover span{transform:scale(1.06);}
.xv-open i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--navy);}
.xv-open svg{width:13px;height:13px;margin-left:2px;display:block;}
.xv-dlg{width:min(1180px,94vw);max-width:none;padding:0;border:0;background:transparent;overflow:visible;}
.xv-dlg.is-tall{width:min(94vw,calc(86vh * .8),640px);}
.xv-dlg::backdrop{background:rgba(0,10,24,.88);}

.xv-dlg .xv-slot{background:transparent;}
.xv-dlg .xv-v{width:100%;max-height:86vh;border-radius:12px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9);}
.xv-x{position:absolute;top:-58px;right:0;width:48px;height:48px;border-radius:50%;border:2px solid var(--cream);
  background:var(--navy);color:var(--cream);font:400 28px/1 system-ui,sans-serif;cursor:pointer;}
.xv-x:focus-visible{outline:3px solid var(--lime);outline-offset:3px;}
@media (max-width:639px){ .xv-x{top:-56px;} }

.xv-band{--bz:clamp(8px,1.1vw,14px);--hh:clamp(84px,17vw,250px);--hw:calc(var(--hh) * 1.07);position:relative;
  margin-top:clamp(28px,3.5vw,48px);max-width:min(880px,100%,calc(100vw - 2 * var(--hw) - 32px));}
.xv-band.is-tall{max-width:min(360px,100%,calc(100vw - 2 * var(--hw) - 32px));}
.xv-band .xv-box{z-index:1;}

.xv-band{--ring:3px;}
.xv-hago{position:absolute;z-index:2;height:var(--hh);width:calc(var(--hh) * var(--ar,.75));max-width:none;pointer-events:none;bottom:9%;}
.xv-hago-body{filter:drop-shadow(var(--ring) 0 0 #F8F5E6) drop-shadow(calc(var(--ring) * -1) 0 0 #F8F5E6)
  drop-shadow(0 var(--ring) 0 #F8F5E6) drop-shadow(0 calc(var(--ring) * -1) 0 #F8F5E6);}
.xv-hago-right .xv-hago{left:calc(100% + var(--ring) - var(--hh) * var(--ar,.75) * var(--f,0));}
.xv-hago-left .xv-hago{right:calc(100% + var(--ring) - var(--hh) * var(--ar,.75) * var(--f,0));}
.xv-hago-right .xv-hago-body{clip-path:inset(-8px -8px -8px calc(var(--f,0) * 100%));}
.xv-hago-right .xv-hago-hand{clip-path:inset(0 calc((1 - var(--f,0)) * 100%) 0 0);}
.xv-hago-left .xv-hago-body{clip-path:inset(-8px calc(var(--f,0) * 100%) -8px -8px);}
.xv-hago-left .xv-hago-hand{clip-path:inset(0 0 0 calc((1 - var(--f,0)) * 100%));}
.xv-pop.is-playing .xv-open{background:transparent;place-items:end end;padding:14px;}
.xv-pop.is-playing .xv-open span{min-height:40px;padding:0 16px 0 6px;font-size:.9rem;}
.xv-pop.is-playing .xv-open i{width:28px;height:28px;}

@media (max-width:639px){
  .xv-band{--hh:70px;max-width:min(880px,100%,calc(100vw - 2 * var(--hw) - 12px));}
  .xv-band.is-tall{max-width:min(360px,100%,calc(100vw - 2 * var(--hw) - 12px));}
}

.xv-dlg.is-tall .xv-v{aspect-ratio:4/5;width:100%;height:auto;max-height:none;object-fit:contain;background:#0A1526;}
.xv-dlg.is-tall{width:min(94vw,calc((100svh - 140px) * .8),640px);}
.xv-band .xv-box > .xv-v{visibility:hidden;}

.on-navy .xv.is-tall .xv-box,.band .xv.is-tall .xv-box{box-shadow:0 0 0 3px var(--cream),0 30px 60px -40px rgba(0,0,0,.9);}
@media (max-width:639px){
  .xv-band,.xv-band.is-tall,.xv-pop.is-tall{max-width:min(440px,100%);}
  .xv-band .xv-hago{display:none;}
}