* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        background:
            radial-gradient(
                circle at 50% 35%,
                #172033 0%,
                #0b0f18 45%,
                #05070b 100%
            );

        color: #e8edf7;

        font-family:
            Inter,
            ui-sans-serif,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;
    }

    /* Background grid */
    body::before {
        content: "";
        position: fixed;
        inset: 0;

        background-image:
            linear-gradient(
                rgba(255,255,255,.025) 1px,
                transparent 1px
            ),
            linear-gradient(
                90deg,
                rgba(255,255,255,.025) 1px,
                transparent 1px
            );

        background-size: 45px 45px;

        mask-image:
            radial-gradient(
                circle,
                black 20%,
                transparent 80%
            );

        pointer-events: none;
    }

    .container {
        width: min(680px, 90%);
        text-align: center;
        position: relative;
        z-index: 2;
    }

    /* Company name */
    .brand {
        margin-bottom: 42px;

        font-size: 13px;
        font-weight: 600;
        letter-spacing: 2.5px;
        text-transform: uppercase;

        color: #707c91;
    }

    .brand span {
        color: #aeb8c9;
    }

    /* Server icon */
    .server {
        width: 150px;
        margin: 0 auto 38px;

        position: relative;

        filter:
            drop-shadow(
                0 0 25px rgba(255, 91, 91, .15)
            );
    }

    .rack {
        height: 38px;
        margin: 9px 0;

        border: 1px solid #303949;
        border-radius: 7px;

        background:
            linear-gradient(
                180deg,
                #1b2330,
                #111722
            );

        box-shadow:
            inset 0 1px rgba(255,255,255,.05),
            0 7px 20px rgba(0,0,0,.35);

        display: flex;
        align-items: center;

        padding: 0 12px;
        gap: 7px;
    }

    .rack::before {
        content: "";

        width: 8px;
        height: 8px;

        border-radius: 50%;

        background: #ff5757;

        box-shadow:
            0 0 10px #ff5757;

        animation: blink 1s infinite;
    }

    .rack:nth-child(2)::before {
        animation-delay: .2s;
    }

    .rack:nth-child(3)::before {
        animation-delay: .4s;
    }

    .slot {
        height: 5px;
        flex: 1;

        border-radius: 5px;

        background: #293242;
    }

    .server-glow {
        position: absolute;

        width: 180px;
        height: 50px;

        bottom: -35px;
        left: -15px;

        background:
            rgba(255, 75, 75, .12);

        filter: blur(30px);

        border-radius: 50%;
    }

    @keyframes blink {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: .25;
        }
    }

    /* Status badge */
    .status {
        display: inline-flex;
        align-items: center;
        gap: 8px;

        padding: 7px 13px;

        border: 1px solid rgba(255, 90, 90, .25);
        border-radius: 30px;

        background:
            rgba(255, 70, 70, .07);

        color: #ff7777;

        font-size: 12px;
        font-weight: 700;

        letter-spacing: 1.5px;
        text-transform: uppercase;

        margin-bottom: 20px;
    }

    .status-dot {
        width: 7px;
        height: 7px;

        border-radius: 50%;

        background: #ff5e5e;

        box-shadow:
            0 0 12px #ff5e5e;
    }

    /* Main heading */
    h1 {
        font-size: clamp(42px, 8vw, 72px);

        line-height: .95;

        letter-spacing: -3px;

        margin-bottom: 22px;

        font-weight: 800;

        background:
            linear-gradient(
                180deg,
                #ffffff,
                #aeb8c9
            );

        -webkit-background-clip: text;
        background-clip: text;

        color: transparent;
    }

    .subtitle {
        color: #8994a7;

        font-size: 17px;

        line-height: 1.7;

        max-width: 540px;

        margin: 0 auto 32px;
    }

    /* Server load */
    .load-box {
        max-width: 460px;

        margin: 0 auto 28px;

        padding: 18px 20px;

        border: 1px solid #252d3a;
        border-radius: 12px;

        background:
            rgba(16, 21, 30, .72);

        backdrop-filter: blur(12px);

        text-align: left;
    }

    .load-header {
        display: flex;
        justify-content: space-between;

        margin-bottom: 10px;

        color: #7f8a9d;

        font-size: 12px;

        text-transform: uppercase;

        letter-spacing: 1px;
    }

    .load-value {
        color: #ff6969;
        font-weight: 700;
    }

    .bar {
        height: 7px;

        border-radius: 10px;

        background: #252c38;

        overflow: hidden;
    }

    .bar-fill {
        width: 97%;
        height: 100%;

        border-radius: inherit;

        background:
            linear-gradient(
                90deg,
                #ffb14a,
                #ff5757
            );

        box-shadow:
            0 0 14px rgba(255, 82, 82, .5);

        animation:
            load 2s ease-in-out infinite alternate;
    }

    @keyframes load {
        from {
            width: 91%;
        }

        to {
            width: 99%;
        }
    }

    /* Retry */
    .retry {
        color: #687386;

        font-size: 13px;

        margin-bottom: 26px;
    }

    #countdown {
        color: #b9c2d1;

        font-weight: 700;
    }

    /* Button */
    button {
        border: 1px solid #333d4d;

        background: #161d28;

        color: #dfe6f1;

        padding: 11px 22px;

        border-radius: 8px;

        font-size: 13px;

        font-weight: 600;

        cursor: pointer;

        transition: .2s ease;
    }

    button:hover {
        background: #202a38;

        border-color: #4b586c;

        transform: translateY(-1px);
    }

    /* Footer */
    .footer {
        margin-top: 40px;

        color: #444e5e;

        font-size: 11px;

        letter-spacing: .8px;

        line-height: 1.8;
    }

    .error-id {
        display: inline-block;

        margin-top: 5px;

        color: #566173;

        font-family: monospace;

        font-size: 10px;

        letter-spacing: 1px;
    }

    .error-id strong {
        color: #707b8e;

        font-weight: 600;
    }

    .copyright {
        margin-top: 12px;

        color: #343c4a;

        font-size: 10px;

        letter-spacing: .5px;
    }

    /* Floating particles */
    .particle {
        position: fixed;

        width: 2px;
        height: 2px;

        background: #758399;

        border-radius: 50%;

        opacity: .35;

        animation:
            float linear infinite;
    }

    @keyframes float {
        from {
            transform: translateY(100vh);
        }

        to {
            transform: translateY(-20vh);
        }
    }

    /* Mobile */
    @media (max-width: 600px) {
        .brand {
            margin-bottom: 32px;
        }

        h1 {
            letter-spacing: -2px;
        }

        .subtitle {
            font-size: 15px;
        }

        .load-box {
            width: 100%;
        }
    }