/* Fileservice-24 realistic animated instrument cluster */

.fs24-dashboard-background {
            --fs24-gauge-left-shift: clamp(-218px, calc(18.515625vw - 455px), 0px);
            --fs24-gauge-right-shift: clamp(0px, calc(455px - 18.515625vw), 218px);
            position: fixed;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
            background:
                radial-gradient(ellipse at 50% 54%, rgba(17, 31, 42, .58) 0%, rgba(5, 10, 15, .88) 48%, #010304 100%),
                linear-gradient(180deg, #070b0f 0%, #010304 100%);
        }

        /* very subtle dashboard texture */
        .fs24-dashboard-background::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            opacity: .16;
            background-image:
                repeating-linear-gradient(
                    0deg,
                    rgba(255,255,255,.025) 0px,
                    rgba(255,255,255,.025) 1px,
                    transparent 1px,
                    transparent 4px
                );
        }

        .fs24-dashboard-background::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            background:
                radial-gradient(circle at 18% 52%, rgba(50, 170, 235, .10), transparent 26%),
                radial-gradient(circle at 82% 52%, rgba(50, 170, 235, .10), transparent 26%);
        }

        .fs24-dashboard-svg {
            position: absolute;
            inset: auto;
            top: 50vh;
            left: 50vw;
            z-index: 2;
            display: block;
            width: clamp(1280px, 100vw, 2560px);
            min-width: 0;
            height: auto;
            aspect-ratio: 16 / 9;
            transform: translate(-50%, -50%);
            opacity: .92;
        }

        /* Scale the 16:9 cluster from its width only; move gauges without touching needle pivots. */
        .fs24-gauge {
            transform-box: view-box;
        }

        .fs24-gauge--left {
            transform: translateX(var(--fs24-gauge-left-shift, 0px));
        }

        .fs24-gauge--right {
            transform: translateX(var(--fs24-gauge-right-shift, 0px));
        }

/* Gauge styling */
        .fs24-gauge-shadow {
            fill: rgba(0,0,0,.80);
            filter: url(#fs24GaugeShadow);
        }

        .fs24-bezel {
            fill: url(#fs24BezelGradient);
            stroke: rgba(220, 235, 245, .15);
            stroke-width: 2;
        }

        .fs24-bezel-edge {
            fill: none;
            stroke: rgba(255,255,255,.22);
            stroke-width: 2;
        }

        .fs24-dial {
            fill: url(#fs24DialGradient);
            stroke: rgba(126, 191, 225, .18);
            stroke-width: 2;
        }

        .fs24-dial-ring {
            fill: none;
            stroke: rgba(109, 203, 248, .19);
            stroke-width: 3;
            filter: url(#fs24TinyGlow);
        }

        .fs24-inner-ring {
            fill: none;
            stroke: rgba(255,255,255,.07);
            stroke-width: 1;
        }

        .fs24-tick {
            stroke: rgba(215, 237, 247, .52);
            stroke-width: 2;
            stroke-linecap: square;
        }

        .fs24-tick-major {
            stroke: rgba(248, 252, 255, .97);
            stroke-width: 4;
            filter: url(#fs24TinyGlow);
        }

        .fs24-tick-red {
            stroke: #ff4545;
            filter: url(#fs24RedGlow);
        }

        .fs24-number {
            fill: rgba(247, 251, 253, .95);
            font-family: Outfit, Arial, sans-serif;
            font-size: 25px;
            font-weight: 400;
            text-anchor: middle;
            dominant-baseline: middle;
            letter-spacing: -.5px;
            filter: url(#fs24TextGlow);
        }

        .fs24-number-red {
            fill: #ff4b4b;
        }

        .fs24-brand-small {
            fill: rgba(204, 224, 236, .42);
            font-family: Outfit, Arial, sans-serif;
            font-size: 10px;
            font-weight: 700;
            text-anchor: middle;
            letter-spacing: 3px;
        }

        .fs24-unit {
            fill: rgba(211, 233, 244, .72);
            font-family: Outfit, Arial, sans-serif;
            font-size: 14px;
            font-weight: 400;
            text-anchor: middle;
            letter-spacing: 3px;
        }

        .fs24-digital-box {
            fill: url(#fs24DisplayGradient);
            stroke: rgba(98, 191, 231, .27);
            stroke-width: 1.5;
            filter: url(#fs24DisplayShadow);
        }

        .fs24-digital-value {
            fill: #dff6ff;
            font-family: "Courier New", monospace;
            font-size: 31px;
            font-weight: 700;
            text-anchor: middle;
            dominant-baseline: middle;
            letter-spacing: 1px;
            filter: url(#fs24TextGlow);
        }

        .fs24-digital-caption {
            fill: rgba(143, 206, 237, .56);
            font-family: Outfit, Arial, sans-serif;
            font-size: 10px;
            text-anchor: middle;
            letter-spacing: 3px;
        }

        .fs24-needle-blade {
            fill: url(#fs24NeedleRed);
            filter: url(#fs24NeedleGlow);
        }

        .fs24-needle-tail {
            fill: rgba(183, 28, 28, .72);
            filter: url(#fs24NeedleGlow);
        }

        .fs24-hub-metal {
            fill: url(#fs24HubGradient);
            stroke: rgba(255,255,255,.26);
            stroke-width: 2;
            filter: url(#fs24HubShadow);
        }

        .fs24-hub-inner {
            fill: #171b1e;
            stroke: rgba(255,255,255,.15);
            stroke-width: 1;
        }

        .fs24-redline-arc {
            fill: none;
            stroke: #ff3e3e;
            stroke-width: 9;
            stroke-linecap: round;
            opacity: .78;
            filter: url(#fs24RedGlow);
        }

        .fs24-glass {
            fill: url(#fs24GlassGradient);
            opacity: .36;
            pointer-events: none;
        }

        .fs24-small-mark {
            fill: rgba(198, 229, 243, .42);
            font-family: Outfit, Arial, sans-serif;
            font-size: 10px;
            text-anchor: middle;
            letter-spacing: 2px;
        }

        .fs24-dashboard-vignette {
            position: absolute;
            inset: 0;
            z-index: 4;
            background:
                linear-gradient(90deg,
                rgba(0,0,0,.10) 0%,
                transparent 18%,
                transparent 82%,
                rgba(0,0,0,.10) 100%),
                linear-gradient(180deg,
                rgba(0,0,0,.16) 0%,
                transparent 24%,
                transparent 70%,
                rgba(0,0,0,.42) 100%);
        }

        .fs24-dashboard-center-shade {
            position: absolute;
            z-index: 5;
            left: 50%;
            top: 54%;
            width: min(700px, 50vw);
            height: min(640px, 74vh);
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background:
                radial-gradient(ellipse at center,
                rgba(1, 4, 6, .78) 0%,
                rgba(1, 4, 6, .55) 48%,
                rgba(1, 4, 6, .18) 69%,
                rgba(1, 4, 6, 0) 82%);
        }

        @media (max-width: 1000px) {
            .fs24-dashboard-svg {
                opacity: .68;
            }

            .fs24-dashboard-center-shade {
                width: 82vw;
            }
        }

        @media (max-width: 650px) {
            .fs24-dashboard-svg {
                opacity: .52;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .fs24-dashboard-svg {
                opacity: .72;
            }
        }