/* app.css */
    :root { 
        --percentage: 15%; 
        --fontSize: calc(100vw / 80); 
        --hSkelet: 4vw;
        --hHeading: 3.5vw;
        --hTitle: 2.5vw;
        --backdropBlur: saturate(180%) blur(10px);
        --backdropBg: rgba(255,255,255,.7);
        --scrollbarTrack: #dedede;
        --scrollbarThumb: #666;
        --globalBorderColor: #dedede;
        --globalBg: #eee;
    }

    #app { margin: 0 auto 10rem; max-width: 1600px; }
    #intro { margin: 0 var(--percentage); height: 100vh; }
    #ads { padding-bottom:4rem; }
    .frame { 
        min-height: 350px;
        height: 100%;
        border-radius: 2rem; 
        padding: var(--padding); 
        margin: var(--padding) 0;
        border: 1px solid var(--globalBorderColor);
        transition: background 200ms ease, border 200ms ease;
    }
    .frame:hover { background: var(--globalBg); }
    .frame ul { display: flex; flex-direction: column; flex-grow: 1; height: 100%; }
    .frame .foot { margin-top:auto; }
    .start { margin: 5rem var(--percentage); }
    .loadsection { max-height: 300; }
    section { position: relative; border-bottom: 2px solid var(--globalBorderColor); overflow: hidden; }
    section .meta { padding: 5rem var(--percentage); cursor: s-resize; }
    .desc { padding-bottom: 10rem; }
    section x-grid { margin: 0 var(--percentage); }
    section x-grid x-grid { margin: 0; }
    x-col p(#ads) { padding: 0; margin:0 ; }
    #ads p { margin: var(--margin) 0; }
    .numbers { background: var(--color); display: inline-flex; justify-content: center; align-items: center; color: var(--bgColor); border-radius: 100vh; width: 30px; height: 30px; }
    #root-code code { overflow:hidden; max-height:600px}
    #root-code code:hover { overflow:scroll; }
    nav { position: fixed; left: 0; bottom: 0; z-index: 9999999; margin: 0 auto; text-align: center; font-size: 2rem; width: 100%; border-top: 1px solid var(--globalBorderColor); }
    .backdrop { background: var(--backdropBg); -webkit-backdrop-filter: var(--backdropBlur); backdrop-filter: var(--backdropBlur); }
    .skelet { font-size: var(--hSkelet); }
    .heading { font-size: var(--hHeading); letter-spacing: 0 }
    .title { font-size: var(--hTitle); letter-spacing: 0 }
    .margin20 { margin-top: 5rem; margin-bottom: 5rem; }
    #examples a { color: var(--color); }
    .lightswitch { display: block; position: fixed; z-index: 99999; top: 1.5rem; right: 1.5rem; --buttonBg: var(--color); border-radius: 100%; height: 30px; width: 30px; cursor: pointer; transition: transform 500ms cubic-bezier(0.76, 0, 0.24, 1); transform: scale(0.8); }
    .lightswitch:hover { transform: scale(1); --buttonBg: var(--color); }
    footer { margin: 5rem var(--percentage) 10rem; }
        footer a { color: var(--color); }
        footer x-flex > c { padding-right: 5rem; }

    * { scrollbar-width: auto; scrollbar-color: var(--scrollbarThumb) var(--scrollbarTrack); }
    ::-webkit-scrollbar { width: var(--scrollbarWidth, 1.7rem); }
    ::-webkit-scrollbar-track { background: var(--scrollbarTrack); }
    ::-webkit-scrollbar-thumb { background-color: var(--scrollbarThumb); border-radius: 100vw; border: 3px solid var(--scrollbarTrack); }

    /* Dark mode */
    body.dark-mode { 
        --bgColor: #171B22; 
        --backdropBg: rgba(23,27,34,.5); 
        --globalBorderColor: #2C2C2C;
        --scrollbarTrack: #2C2C2C; 
        --scrollbarThumb: #6B6B6B;
        --globalBg: #232323;
        --tooltipBg: var(--white);
        --tooltipColor: var(--dark);
    }

    /* Small screen */
    @media (max-width: 600px) { 
        :root { 
            --percentage: 2rem; 
            --fontSize: 1.3rem; 
            --hSkelet: 3.5rem;
            --hHeading: 3rem;
            --hTitle: 2.5rem; 
        } 

        .closed { max-height: 360px; }
    }

    @media only screen and (max-device-width: 812px) and (orientation: landscape) { 
        :root { --fontSize: 1.7vw; --percentage: 20%; --hHeading: 3vw; --hTitle: 2.5vw; }
    }

    /* Large screen */
    @media only screen and (min-width: 1599px) {
        :root { --percentage: 15%; --fontSize: 1.8rem; --hSkelet: 5rem; --hHeading: 4rem; --hTitle: 3rem; }
    }