.loading :is(.bar, .rail-wrap, .note){visibility:hidden}
.loading .stage{translate:0 var(--loader-y, 0px)}
.loading #preview{caret-color:transparent}
.loading:not(.loader-shown) #preview{opacity:0}
.loading .slider-line{scale:1 0}
.loading :is(.slider-knob, .slider-zero){opacity:0}

.loader-bar{position:absolute;left:0;right:0;height:3px;background:var(--faint);pointer-events:none;visibility:visible}
.loader-bar[hidden]{display:none}
.loader-fill{position:absolute;inset:0;background:var(--fg);transform-origin:0 50%;scale:0 1}
.loader-pct{
  position:absolute;right:24px;bottom:calc(100% + 14px);
  font-size:12px;line-height:1;letter-spacing:.02em;white-space:nowrap;
  color:var(--fg);
}
.loader-num{display:inline-block;min-width:4.4ch;text-align:right;font-variant-numeric:tabular-nums}

.theme-reveal body{transition:background .8s cubic-bezier(.4,0,.2,1), color .8s cubic-bezier(.4,0,.2,1)}
body:not(.loading) .stage{transition:translate .8s cubic-bezier(.22,1,.36,1)}
body:not(.loading) .slider-line{transition:scale .7s cubic-bezier(.22,1,.36,1) .15s}
body:not(.loading) :is(.slider-knob, .slider-zero){transition:opacity .3s linear .5s}