.loopwrap{position:relative;margin:34px 0 var(--loop-gap,118px)}

#loopbox{
  position:relative;border-radius:26px;overflow:hidden;
  aspect-ratio:16/9;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05) 55%,rgba(195,177,225,.09));
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.18),0 14px 34px rgba(11,7,24,.32)}

@supports not (backdrop-filter: blur(1px)){
  #loopbox{background:linear-gradient(160deg,#241C3C,#1E1834 55%,#241D3E)}
}

#loopbox #stage{position:absolute;inset:0;height:100%;width:100%;overflow:hidden;background:transparent}

html[data-variant="v"] #loopbox #veil{background:linear-gradient(to bottom,rgba(22,15,40,0) 0%,rgba(22,15,40,.6) 13%,rgba(22,15,40,.6) 87%,rgba(22,15,40,0) 100%)}

#loopbox #c{transition:opacity 200ms linear}

html[data-variant="v"] #loopbox #stage .scrim{height:64%;
  background:linear-gradient(to top,rgba(22,15,40,.94) 0%,rgba(22,15,40,.86) 26%,
    rgba(22,15,40,.66) 52%,rgba(22,15,40,.3) 78%,transparent 100%)}


.loopwrap{--tip-clear:34px}

.loopwrap #copy{
  position:absolute;z-index:6;pointer-events:none;
  left:clamp(20px,4vw,52px);right:clamp(20px,4vw,52px);
  bottom:calc(clamp(74px,12vh,116px) + var(--tip-clear));
  height:clamp(130px,17vh,160px)}

.loopwrap{--copy-scale:.68}
body:not(.stacked) .loopwrap #copy .line{
  font-size:calc(clamp(1.5rem,3.4vw,2.7rem) * var(--copy-scale))}
body:not(.stacked) .loopwrap #copy .line::before{
  inset:calc(-14px * var(--copy-scale)) calc(-20px * var(--copy-scale))
        calc(-12px * var(--copy-scale)) calc(-20px * var(--copy-scale));
  border-radius:calc(22px * var(--copy-scale))}

html[data-copy="glow"] body:not(.stacked) .loopwrap #copy .line{
  text-shadow:
    0 1px 2px rgba(11,7,24,.85),
    0 0 8px rgba(11,7,24,.8),
    0 0 20px rgba(11,7,24,.62)}
html[data-copy="glow"] body:not(.stacked) .loopwrap #copy .line::before{
  background:none;
  border:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none}
html[data-copy="glow"] body:not(.stacked) .loopwrap #copy .line em{text-shadow:none}


#railseek{position:relative;display:block;
  padding:13px 0;margin:-13px 0;                
  pointer-events:auto;cursor:pointer;touch-action:none;
  -webkit-tap-highlight-color:transparent}
#railseek:focus{outline:none}
#railseek:focus-visible{outline:3px solid var(--ring);outline-offset:5px;border-radius:10px}

@media (pointer: coarse){
  #railseek::after{content:"";position:absolute;left:0;right:0;top:50%;
    height:44px;transform:translateY(-50%)}
  .loop-toggle{touch-action:manipulation}
  .loop-toggle::after{content:"";position:absolute;left:50%;top:50%;
    width:max(44px,100%);height:44px;transform:translate(-50%,-50%)}
}

#railhead{transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
#railseek:hover #railhead,#railseek.dragging #railhead,#railseek:focus-visible #railhead{
  transform:translateY(-50%) scale(1.4);
  box-shadow:0 0 20px 4px rgba(195,177,225,.7),0 0 7px rgba(241,236,251,.95)}
#railseek.dragging #railfill{filter:brightness(1.22) saturate(1.1)}
#railfill{transition:filter .16s var(--ease)}

#railtrack i{transition:background .16s var(--ease),height .16s var(--ease),top .16s var(--ease)}
#railtrack i.passed{background:rgba(241,236,251,.92);height:11px;top:-4.5px}

#railtip{position:absolute;left:0;bottom:calc(100% - 9px);z-index:2;
  transform:translate(-50%,-2px);opacity:0;pointer-events:none;white-space:nowrap;
  padding:5px 11px;border-radius:100px;
  font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#F1ECFB;background:rgba(22,15,40,.88);border:1px solid rgba(195,177,225,.3);
  backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 6px 16px rgba(11,7,24,.34);
  transition:opacity .32s var(--ease),transform .32s var(--ease)}
#railtip.show{opacity:1;transform:translate(-50%,-8px)}
@supports not (backdrop-filter: blur(1px)){
  #railtip{background:#1B1531}
}

@media (prefers-reduced-motion:reduce){
  #railseek{pointer-events:none;cursor:default}
  #railhead,#railtrack i,#railtip,#railfill{transition:none}
  #railtip{display:none}
}



.loop-toggle{
  position:absolute;z-index:8;right:var(--stage-inset);
  bottom:calc(clamp(74px,12vh,116px) + var(--tip-clear));
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px 8px 12px;border-radius:100px;cursor:pointer;
  font-family:inherit;font-size:.72rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#F1ECFB;
  background:rgba(22,15,40,.62);border:1px solid rgba(195,177,225,.28);
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 16px rgba(11,7,24,.3);
  transition:transform .32s var(--ease),border-color .32s,background .32s}
.loop-toggle:hover{border-color:rgba(195,177,225,.5);background:rgba(22,15,40,.74)}
.loop-toggle:active{transform:scale(.97);transition-duration:.16s}

.loop-ico{position:relative;width:11px;height:12px;flex:none}
.loop-ico::before,.loop-ico::after{content:"";position:absolute;top:0;height:100%;
  background:#F1ECFB;transition:all .28s var(--ease)}
.loop-ico::before{left:0;width:3.4px}
.loop-ico::after{right:0;width:3.4px}
.loop-toggle[aria-pressed="true"] .loop-ico::before{
  left:1px;width:0;height:0;background:transparent;
  border-left:9px solid #F1ECFB;border-top:6px solid transparent;border-bottom:6px solid transparent}
.loop-toggle[aria-pressed="true"] .loop-ico::after{width:0;background:transparent}

.loop-toggle .lt-play{display:none}
.loop-toggle[aria-pressed="true"] .lt-pause{display:none}
.loop-toggle[aria-pressed="true"] .lt-play{display:inline}


body.static #loopbox,body.nogl #loopbox{aspect-ratio:auto}
body.static #loopbox #stage,body.nogl #loopbox #stage{
  position:relative;inset:auto;height:auto;min-height:0;overflow:visible}
body.static #loopbox #frames{padding:26px 24px 4px}
body.nogl #loopbox #nogl{padding:26px 24px;background:transparent;border:0}
body.static .loop-toggle,body.nogl .loop-toggle{display:none}
body.static .loopwrap #copy,body.nogl .loopwrap #copy{display:none}


@media (max-width:760px){
  #loopbox{aspect-ratio:4/5}
  .loop-toggle{padding:7px 12px 7px 10px;font-size:.66rem}
}

body.stacked .loopwrap #copy{
  position:relative;left:auto;right:auto;bottom:auto;
  height:104px;margin-top:18px}
body.stacked .loopwrap #copy .line{font-size:1.18rem;line-height:1.26;max-width:34ch;
  width:auto;text-shadow:none}
body.stacked .loopwrap #copy .line::before{display:none}


@media (prefers-color-scheme: light){
  :where(html:not([data-scheme])) #loopbox{
    background:linear-gradient(160deg,rgba(255,255,255,.68),rgba(255,255,255,.42) 55%,rgba(236,228,250,.52));
    border-color:rgba(255,255,255,.78);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(94,75,139,.06),0 14px 34px rgba(94,75,139,.14)}
  @supports not (backdrop-filter: blur(1px)){
    :where(html:not([data-scheme])) #loopbox{background:linear-gradient(160deg,#FBF8FF,#F4EFFB 55%,#EFE7F9)}
  }
  :where(html:not([data-scheme])) .loop-toggle{color:#3C3157;background:rgba(255,255,255,.8);
    border-color:rgba(94,75,139,.2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 6px 16px rgba(94,75,139,.16)}
  :where(html:not([data-scheme])) .loop-toggle:hover{border-color:rgba(94,75,139,.4);background:rgba(255,255,255,.9)}
  :where(html:not([data-scheme])) .loop-ico::before,:where(html:not([data-scheme])) .loop-ico::after{background:#3C3157}
  :where(html:not([data-scheme])) .loop-toggle[aria-pressed="true"] .loop-ico::before{border-left-color:#3C3157}
  @supports not (backdrop-filter: blur(1px)){
    :where(html:not([data-scheme])) .loop-toggle{background:#F7F2FD}
  }
  :where(html:not([data-scheme])) #railtip{color:#2E2640;background:rgba(255,255,255,.9);
    border-color:rgba(94,75,139,.2);box-shadow:0 6px 16px rgba(94,75,139,.18)}
  @supports not (backdrop-filter: blur(1px)){
    :where(html:not([data-scheme])) #railtip{background:#F7F2FD}
  }
  :where(html:not([data-scheme])) #railseek:hover #railhead,:where(html:not([data-scheme])) #railseek.dragging #railhead,:where(html:not([data-scheme])) #railseek:focus-visible #railhead{
    box-shadow:0 0 18px 4px rgba(94,75,139,.45),0 0 6px rgba(94,75,139,.6)}
  :where(html:not([data-scheme])) #railtrack i.passed{background:rgba(94,75,139,.85)}

  html[data-copy="glow"]:where(:not([data-scheme])) body:not(.stacked) .loopwrap #copy .line{
    text-shadow:
      0 1px 0 rgba(255,255,255,.8),
      0 0 8px rgba(251,248,255,.92),
      0 0 20px rgba(251,248,255,.78)}
  html[data-copy="glow"]:where(:not([data-scheme])) body:not(.stacked) .loopwrap #copy .line::before{
    background:none;
    border:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:none}
  html[data-copy="glow"]:where(:not([data-scheme])) body:not(.stacked) .loopwrap #copy .line em{text-shadow:inherit}

  html:not([data-variant="v"]):where(:not([data-scheme])) body.stacked .loopwrap #copy .line{color:var(--ink)}
  html[data-variant="v"]:where(:not([data-scheme])) body.stacked .loopwrap #copy .line{color:var(--ink)}

  html[data-variant="v"]:where(:not([data-scheme])) #loopbox #veil{background:linear-gradient(to bottom,rgba(35,25,62,0) 0%,rgba(35,25,62,.56) 13%,rgba(35,25,62,.56) 87%,rgba(35,25,62,0) 100%)}
  html[data-variant="v"]:where(:not([data-scheme])) #loopbox #stage .scrim{height:74%;
    background:linear-gradient(to top,rgba(22,15,40,.96) 0%,rgba(22,15,40,.92) 24%,
      rgba(22,15,40,.8) 48%,rgba(22,15,40,.52) 72%,transparent 100%)}
}
  :where(html[data-scheme="light"]) #loopbox{
    background:linear-gradient(160deg,rgba(255,255,255,.68),rgba(255,255,255,.42) 55%,rgba(236,228,250,.52));
    border-color:rgba(255,255,255,.78);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(94,75,139,.06),0 14px 34px rgba(94,75,139,.14)}
  @supports not (backdrop-filter: blur(1px)){
    :where(html[data-scheme="light"]) #loopbox{background:linear-gradient(160deg,#FBF8FF,#F4EFFB 55%,#EFE7F9)}
  }
  :where(html[data-scheme="light"]) .loop-toggle{color:#3C3157;background:rgba(255,255,255,.8);
    border-color:rgba(94,75,139,.2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 6px 16px rgba(94,75,139,.16)}
  :where(html[data-scheme="light"]) .loop-toggle:hover{border-color:rgba(94,75,139,.4);background:rgba(255,255,255,.9)}
  :where(html[data-scheme="light"]) .loop-ico::before,:where(html[data-scheme="light"]) .loop-ico::after{background:#3C3157}
  :where(html[data-scheme="light"]) .loop-toggle[aria-pressed="true"] .loop-ico::before{border-left-color:#3C3157}
  @supports not (backdrop-filter: blur(1px)){
    :where(html[data-scheme="light"]) .loop-toggle{background:#F7F2FD}
  }
  :where(html[data-scheme="light"]) #railtip{color:#2E2640;background:rgba(255,255,255,.9);
    border-color:rgba(94,75,139,.2);box-shadow:0 6px 16px rgba(94,75,139,.18)}
  @supports not (backdrop-filter: blur(1px)){
    :where(html[data-scheme="light"]) #railtip{background:#F7F2FD}
  }
  :where(html[data-scheme="light"]) #railseek:hover #railhead,:where(html[data-scheme="light"]) #railseek.dragging #railhead,:where(html[data-scheme="light"]) #railseek:focus-visible #railhead{
    box-shadow:0 0 18px 4px rgba(94,75,139,.45),0 0 6px rgba(94,75,139,.6)}
  :where(html[data-scheme="light"]) #railtrack i.passed{background:rgba(94,75,139,.85)}

  html[data-copy="glow"]:where([data-scheme="light"]) body:not(.stacked) .loopwrap #copy .line{
    text-shadow:
      0 1px 0 rgba(255,255,255,.8),
      0 0 8px rgba(251,248,255,.92),
      0 0 20px rgba(251,248,255,.78)}
  html[data-copy="glow"]:where([data-scheme="light"]) body:not(.stacked) .loopwrap #copy .line::before{
    background:none;
    border:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:none}
  html[data-copy="glow"]:where([data-scheme="light"]) body:not(.stacked) .loopwrap #copy .line em{text-shadow:inherit}

  html:not([data-variant="v"]):where([data-scheme="light"]) body.stacked .loopwrap #copy .line{color:var(--ink)}
  html[data-variant="v"]:where([data-scheme="light"]) body.stacked .loopwrap #copy .line{color:var(--ink)}

  html[data-variant="v"]:where([data-scheme="light"]) #loopbox #veil{background:linear-gradient(to bottom,rgba(35,25,62,0) 0%,rgba(35,25,62,.56) 13%,rgba(35,25,62,.56) 87%,rgba(35,25,62,0) 100%)}
  html[data-variant="v"]:where([data-scheme="light"]) #loopbox #stage .scrim{height:74%;
    background:linear-gradient(to top,rgba(22,15,40,.96) 0%,rgba(22,15,40,.92) 24%,
      rgba(22,15,40,.8) 48%,rgba(22,15,40,.52) 72%,transparent 100%)}



@media (prefers-reduced-motion:reduce){
  #loopbox #c{transition:none}
}