:root {
    --as-preloader-black: #090a0c;
    --as-preloader-panel: #1b1c20;
    --as-preloader-line: #37383d;
    --as-preloader-steel: #f2f1ec;
    --as-preloader-muted: #aaa9a3;
    --as-preloader-accent: #f5c400;
    --as-preloader-redline: #d51c34
}

html.as-preloader-active,
html.as-preloader-active body { overflow: hidden }

.as-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: var(--as-preloader-black);
    color: var(--as-preloader-steel);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate
}

.as-preloader[hidden] { display: none }

.as-preloader__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(var(--as-preloader-panel) 1px, transparent 1px), linear-gradient(90deg, var(--as-preloader-panel) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .32;
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 10%, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 45%, #000 10%, transparent 72%)
}

.as-preloader__stage {
    position: relative;
    z-index: 3;
    width: min(92vw, 620px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    transition: opacity .42s ease, transform .42s ease
}

.as-preloader__tach { width: min(84vw, 540px); height: auto; overflow: visible }
.as-preloader__track,
.as-preloader__redline,
.as-preloader__progress { fill: none; stroke-width: 3; stroke-linecap: round }
.as-preloader__track { stroke: var(--as-preloader-line) }
.as-preloader__redline { stroke: var(--as-preloader-redline); stroke-dasharray: 18 82; stroke-dashoffset: -82; opacity: .6 }
.as-preloader__progress { stroke: var(--as-preloader-accent); filter: drop-shadow(0 0 6px rgba(245, 196, 0, .48)) }
.as-preloader__tick { stroke: var(--as-preloader-muted); stroke-width: 2 }
.as-preloader__tick--red { stroke: var(--as-preloader-redline) }
.as-preloader__tick-label { fill: var(--as-preloader-muted); font-family: monospace; font-size: 13px; font-weight: 700; text-anchor: middle }

.as-preloader__needle { transform-box: view-box; transform-origin: 300px 180px; transform: rotate(-90deg) }
.as-preloader__needle line { stroke: var(--as-preloader-accent); stroke-width: 4; stroke-linecap: round; transition: stroke .2s ease }
.as-preloader__needle.is-redline line { stroke: var(--as-preloader-redline); filter: drop-shadow(0 0 8px rgba(213, 28, 52, .75)) }
.as-preloader__pivot { fill: var(--as-preloader-steel) }
.as-preloader__pivot-ring { fill: none; stroke: var(--as-preloader-line); stroke-width: 2 }

.as-preloader__car-body { fill: none; stroke: var(--as-preloader-steel); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100 }
.as-preloader__wheel { transform-box: fill-box; transform-origin: center; animation: as-wheel-spin .52s linear infinite }
.as-preloader__wheel-rim { fill: none; stroke: var(--as-preloader-steel); stroke-width: 2 }
.as-preloader__wheel-hub { fill: var(--as-preloader-black); stroke: var(--as-preloader-muted); stroke-width: 1.5 }
.as-preloader__wheel-spoke { stroke: var(--as-preloader-muted); stroke-width: 1.4 }

.as-preloader__wordmark {
    margin-top: 22px;
    padding-left: .38em;
    color: var(--as-preloader-steel);
    font-family: var(--font-exo2), Arial, sans-serif;
    font-size: clamp(22px, 4vw, 31px);
    font-weight: 700;
    letter-spacing: .38em;
    line-height: 1;
    text-align: center
}

.as-preloader__wordmark small {
    margin-top: 12px;
    color: var(--as-preloader-muted);
    display: block;
    font-size: 8px;
    letter-spacing: .6em
}

.as-preloader__readout {
    margin-top: 28px;
    color: var(--as-preloader-accent);
    font-family: monospace;
    font-size: clamp(30px, 6vw, 42px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    line-height: 1
}

.as-preloader__readout small { margin-left: 2px; color: var(--as-preloader-muted); font-size: .5em }
.as-preloader__status { min-height: 17px; margin-top: 14px; color: var(--as-preloader-muted); font-family: var(--font-exo2), Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .28em; text-align: center }

.as-preloader__door {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 50%;
    background-color: var(--as-preloader-panel);
    background-image: repeating-linear-gradient(180deg, transparent 0 38px, rgba(255, 255, 255, .018) 38px 39px);
    transition: transform .9s cubic-bezier(.76, 0, .24, 1)
}

.as-preloader__door--left { left: 0; border-right: 1px solid var(--as-preloader-accent) }
.as-preloader__door--right { right: 0; border-left: 1px solid var(--as-preloader-accent) }
.as-preloader.is-complete .as-preloader__stage { opacity: 0; transform: scale(.98) }
.as-preloader.is-opening { background: transparent; pointer-events: none }
.as-preloader.is-opening .as-preloader__grid { opacity: 0 }
.as-preloader.is-opening .as-preloader__door--left { transform: translateX(-101%) }
.as-preloader.is-opening .as-preloader__door--right { transform: translateX(101%) }

@keyframes as-wheel-spin { to { transform: rotate(360deg) } }

@media (max-width: 575px) {
    .as-preloader__tach { width: 94vw }
    .as-preloader__wordmark { margin-top: 14px; font-size: 22px; letter-spacing: .28em }
    .as-preloader__readout { margin-top: 22px }
    .as-preloader__status { max-width: 90vw; font-size: 9px; letter-spacing: .2em }
}

@media (prefers-reduced-motion: reduce) {
    .as-preloader__wheel { animation: none }
    .as-preloader__door { transition-duration: .4s }
}