@font-face{font-family:Loader Hand;src:url('img/fonts/loader-hand.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Loader Serif;src:url('img/fonts/loader-serif.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
#loader .wm{display:block;width:90%;text-align:center;font-size:clamp(64px,12vw,190px);line-height:1.2;letter-spacing:-.045em;font-weight:400;white-space:nowrap}
#loader .loader-name{display:block;font-family:'Inter Tight',Arial,sans-serif!important;font-weight:400!important;font-style:normal;line-height:1.3;min-height:1.3em}
#loader[data-face=serif] .loader-name{font-family:'Loader Serif',Georgia,serif!important;font-style:italic;letter-spacing:-.03em}
#loader[data-face=hand] .loader-name{font-family:'Loader Hand','Brush Script MT',cursive!important;letter-spacing:-.04em;font-size:1.13em}
#loader[data-face=classic] .loader-name{font-family:Georgia,serif!important;letter-spacing:-.07em}
#loader[data-face=bold] .loader-name{font-family:'Arial Black',Arial,sans-serif!important;font-weight:700!important;letter-spacing:-.065em}
#loader .pct{position:static;display:block;font:400 12px/1.4 'Inter Tight',Arial,sans-serif;letter-spacing:0;margin-top:24px;color:#111}
#loader.done .loader-name{font-family:'Inter Tight',Arial,sans-serif!important;font-weight:400!important;font-style:normal;font-size:1em}

@font-face{font-family:'Loader script';src:url('img/fonts/loader-script.ttf') format('truetype');font-weight:400;font-display:swap}
#loader[data-face=script] .loader-name{font-family:'Loader script'!important;font-style:normal;font-size:0.83em}

@font-face{font-family:'Loader bodoni';src:url('img/fonts/loader-bodoni.ttf') format('truetype');font-weight:400;font-display:swap}
#loader[data-face=bodoni] .loader-name{font-family:'Loader bodoni'!important;font-style:normal;font-size:1em}

@font-face{font-family:'Loader grotesk';src:url('img/fonts/loader-grotesk.ttf') format('truetype');font-weight:400;font-display:swap}
#loader[data-face=grotesk] .loader-name{font-family:'Loader grotesk'!important;font-style:normal;font-size:1em}

@font-face{font-family:'Loader display';src:url('img/fonts/loader-display.ttf') format('truetype');font-weight:400;font-display:swap}
#loader[data-face=display] .loader-name{font-family:'Loader display'!important;font-style:normal;font-size:1em}

/* Font metrics never affect the progress indicator's position. */
#loader .wm{position:absolute;left:5%;top:50%;height:clamp(130px,20vw,300px);transform:translateY(-60%);display:grid;place-items:center}
#loader .loader-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;min-height:0;line-height:1;white-space:nowrap}
#loader .loader-progress{position:fixed;top:calc(50% + min(13vw,150px));left:50%;transform:translateX(-50%);width:clamp(180px,22vw,310px)}
#loader .loader-bar{height:2px;width:100%;background:#1112;overflow:hidden}
#loader .loader-bar span{display:block;height:100%;background:#111;transform:scaleX(var(--load,0));transform-origin:left center}
#loader .loader-progress .pct{position:static;text-align:center;margin:14px 0 0;font-variant-numeric:tabular-nums;line-height:18px;height:18px}