html, body{
    max-width:100%;
    overflow-x:hidden;
}

body{
    margin:0;
    font-family:
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at top,
            #111827,
            #050816
        );

    color:#fff;

    display:flex;
}

.sidebar{
    /* Explicitly reset - style.css (loaded before this file on every
       page, including this one) defines its own .sidebar with
       position:fixed. Equal-specificity cascade rules only let this
       file win on properties it actually sets, so without these two
       lines the fixed positioning leaks straight through and takes
       the sidebar out of this file's flex layout entirely - no
       amount of width/flex-direction changes below can fix that. */
    position:static;

    width:260px;

    min-height:100vh;

    background:
        rgba(
            10,
            15,
            30,
            .95
        );

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    padding:20px;

    box-sizing:border-box;
}

.sidebar button{
    width:100%;

    margin-bottom:10px;

    padding:12px;

    border:none;

    border-radius:12px;

    background:
        rgba(
            255,
            255,
            255,
            .05
        );

    color:white;

    cursor:pointer;

    transition:.3s;
}

.sidebar button:hover{
    transform:
        scale(1.03);

    box-shadow:
        0 0 20px
        rgba(
            0,
            255,
            255,
            .4
        );
}

.main{
    /* Same leak as .sidebar above - style.css's .main sets a
       permanent margin-left:300px meant for its fixed-sidebar layout,
       which this file's flexbox layout doesn't need and never
       overrides otherwise. */
    margin-left:0;

    flex:1;

    min-width:0;

    padding:30px;

    box-sizing:border-box;
}

.main p, .main pre{
    overflow-wrap:anywhere;
}

.hero-card{
    background:
        rgba(
            255,
            255,
            255,
            .05
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius:20px;

    padding:25px;

    margin-bottom:30px;

    backdrop-filter:
        blur(20px);
}

.grid{
    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                320px,
                1fr
            )
        );

    gap:20px;

    margin-bottom:20px;
}

.card{
    background:
        rgba(
            255,
            255,
            255,
            .05
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius:20px;

    padding:20px;

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 0 30px
        rgba(
            0,
            255,
            255,
            .08
        );

    transition:.3s;
}

.card:hover{
    transform:
        translateY(-8px);

    box-shadow:
        0 0 40px
        rgba(
            0,
            255,
            255,
            .25
        );
}

.card button{
    margin-top:10px;

    margin-right:10px;

    padding:10px 18px;

    border:none;

    border-radius:10px;

    background:
        #00bfff;

    color:white;

    cursor:pointer;

    transition:.3s;
}

.card button:hover{
    transform:
        scale(1.05);
}

.network-live{
    color:
        #00ff99;

    animation:
        pulse 2s infinite;
}

@keyframes pulse{
    0%{
        opacity:.4;
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:.4;
    }
}

pre{
    white-space:
        pre-wrap;

    word-break:
        break-word;

    color:
        #8ef;

    font-size:
        12px;
}

/* Placed last on purpose - CSS rules of equal specificity are
   resolved by source order, so a media query positioned earlier than
   the base .sidebar/.main rules above would lose to them even when it
   matches. Keeping all responsive overrides here, after everything
   else, is what actually makes them win on narrow screens. */
@media (max-width: 900px){
    body{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
        min-height:0;
    }
}