:root {
    color-scheme: dark;

    --bg:
        #0d1117;

    --panel:
        #151b23;

    --panel-hover:
        #19222c;

    --line:
        #27313c;

    --line-soft:
        #202934;

    --text:
        #f4f7fa;

    --muted:
        #9aa8b6;

    --faint:
        #71808f;

    --cyan:
        #49c8ff;

    --green:
        #4ddd91;

    --orange:
        #ffb84d;

    --max:
        1180px;
}


* {
    box-sizing:
        border-box;
}


html {
    background:
        var(--bg);
}


body {
    margin:
        0;

    min-height:
        100vh;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.45;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


.site-header {
    position:
        sticky;

    top:
        0;

    z-index:
        50;

    border-bottom:
        1px solid
        var(--line);

    background:
        rgba(
            13,
            17,
            23,
            0.97
        );
}


.header-inner {
    width:
        min(
            calc(
                100% - 32px
            ),
            var(--max)
        );

    height:
        64px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}


.brand {
    font-size:
        20px;

    font-weight:
        800;

    letter-spacing:
        0.7px;
}


.brand span {
    color:
        var(--cyan);
}


.nav {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.nav a {
    padding:
        9px 12px;

    border-radius:
        8px;

    color:
        var(--muted);

    font-size:
        14px;

    font-weight:
        700;
}


.nav a:hover,
.nav a.active {
    color:
        var(--text);

    background:
        #1b242e;
}


.page {
    width:
        min(
            calc(
                100% - 32px
            ),
            var(--max)
        );

    margin:
        0 auto;

    padding:
        58px 0 72px;
}


.hero {
    max-width:
        820px;

    margin-bottom:
        46px;
}


.eyebrow {
    margin-bottom:
        10px;

    color:
        var(--cyan);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1.25px;

    text-transform:
        uppercase;
}


h1 {
    margin:
        0;

    font-size:
        clamp(
            38px,
            6vw,
            64px
        );

    line-height:
        0.98;

    letter-spacing:
        -2.2px;
}


.hero-copy {
    max-width:
        690px;

    margin:
        18px 0 0;

    color:
        var(--muted);

    font-size:
        18px;
}


.live-strip {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        22px;

    margin-top:
        24px;
}


.live-stat {
    display:
        flex;

    align-items:
        baseline;

    gap:
        7px;
}


.live-number {
    font-size:
        18px;

    font-weight:
        800;
}


.live-label {
    color:
        var(--muted);

    font-size:
        13px;
}


.database-sections {
    display:
        grid;

    gap:
        14px;
}


.database-row {
    min-height:
        220px;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        410px;

    gap:
        34px;

    align-items:
        center;

    padding:
        28px 30px;

    border:
        1px solid
        var(--line);

    border-radius:
        16px;

    background:
        var(--panel);

    transition:
        background
        140ms
        ease,
        border-color
        140ms
        ease;
}


.database-row:hover {
    background:
        var(--panel-hover);

    border-color:
        #384654;
}


.section-main {
    min-width:
        0;
}


.section-kicker {
    margin-bottom:
        8px;

    color:
        var(--faint);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.8px;

    text-transform:
        uppercase;
}


.section-title {
    margin:
        0;

    font-size:
        clamp(
            28px,
            4vw,
            40px
        );

    line-height:
        1.05;

    letter-spacing:
        -1px;
}


.section-copy {
    max-width:
        600px;

    margin:
        13px 0 0;

    color:
        var(--muted);

    font-size:
        16px;
}


.section-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin-top:
        22px;
}


.meta-item {
    display:
        flex;

    align-items:
        baseline;

    gap:
        6px;
}


.meta-number {
    font-size:
        17px;

    font-weight:
        800;
}


.meta-label {
    color:
        var(--muted);

    font-size:
        12px;
}


.section-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        24px;

    color:
        var(--cyan);

    font-size:
        14px;

    font-weight:
        800;
}


.section-link-arrow {
    font-size:
        20px;

    line-height:
        1;
}


.art-rail {
    min-width:
        0;

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        10px;
}


.art-tile {
    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        var(--line-soft);

    border-radius:
        12px;

    background:
        #0b1015;
}


.art-tile img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;

    padding:
        8px;
}


.art-tile-empty {
    color:
        #41505e;

    font-size:
        11px;

    font-weight:
        700;
}


.status-dot {
    width:
        7px;

    height:
        7px;

    display:
        inline-block;

    margin-right:
        5px;

    border-radius:
        50%;

    vertical-align:
        1px;

    background:
        var(--green);
}


.footer-note {
    margin-top:
        28px;

    color:
        var(--faint);

    font-size:
        12px;
}


.loading-number {
    color:
        var(--faint);
}


@media (
    max-width:
    900px
) {

    .database-row {
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            300px;
    }


    .art-rail {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }
}


@media (
    max-width:
    700px
) {

    .header-inner {
        width:
            calc(
                100% - 22px
            );

        height:
            auto;

        min-height:
            58px;

        padding:
            9px 0;
    }


    .brand {
        font-size:
            18px;
    }


    .nav {
        gap:
            2px;
    }


    .nav a {
        padding:
            8px 7px;

        font-size:
            12px;
    }


    .page {
        width:
            calc(
                100% - 22px
            );

        padding:
            38px 0 54px;
    }


    .hero {
        margin-bottom:
            32px;
    }


    h1 {
        font-size:
            42px;
    }


    .hero-copy {
        font-size:
            16px;
    }


    .database-row {
        min-height:
            auto;

        grid-template-columns:
            1fr;

        gap:
            24px;

        padding:
            22px 18px;
    }


    .art-rail {
        grid-template-columns:
            repeat(
                4,
                1fr
            );
    }
}


@media (
    max-width:
    470px
) {

    .nav a:nth-child(2) {
        display:
            none;
    }


    h1 {
        font-size:
            36px;
    }


    .section-title {
        font-size:
            29px;
    }


    .section-copy {
        font-size:
            15px;
    }


    .art-rail {
        gap:
            7px;
    }


    .art-tile {
        border-radius:
            9px;
    }
}