body {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    background: #ECEFF1;
    color: rgba(0, 0, 0, 0.87);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/*Banner*/
.banner-wrapper {
    background: #ECEFF1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.banner-content {
    background: linear-gradient(135deg,#ECEFF4, #ECEfF7);
    margin: 0 auto;
    padding: 12px 16px;
}
.banner-row {
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}

.banner-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.banner-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}
.brand-name {
    font-size: 20px;
    font-weight: 500;
    color: #222;
}

.hero-app-links {
    display: flex;
    gap: 16px;
    margin-left: auto; 
}
.app-link {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    text-decoration: underline; 
    text-underline-offset: 4px;
    color: #24292f; 
    transition: color 0.2s ease;
}
.app-link:hover {
    color: #0969da; 
}
.app-link span {
    font-weight: 300;
    font-size: 18px;
}

/*divider*/
.content-divider {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.03));
    height: 1px;
    width: 100vw;
    position: relative;
    margin: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/*footer*/
.footer_text {
    color: rgba(0, 0, 0, 0.4);
    text-align: center;
    font-size: 13px;
    margin-bottom: 8px;
}
.footer_text a {
    color: inherit;
    margin-right: 10px;
    text-decoration: none;
}
.footer_text a:hover {
    color: rgba(0, 0, 0, 0.8);
    text-decoration: underline;
}

/**/
@media (max-width: 800px) {
    body {
        padding: 0 0px;
    }

    .banner-content {
        padding: 12px, 12px
    }

    .banner-row {
        flex-direction: auto;
        align-items: center;
    }
}

/*dark mode*/
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a1a;
        color: rgba(255, 255, 255, 0.87);
    }

    .banner-wrapper {
        background: #1a1a1a;
    }
    .banner-content {
        background: linear-gradient(135deg, #2d2d2d, #262626);
    }

    .brand-name {
        color: #ffffff;
    }

    .app-link {
        color: #8ab4f8;
    }
    .app-link:hover {
        color: #adc6f5;
    }

    .content-divider {
        background: linear-gradient(to right, 
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.03)
        );
    }

    .footer_text {
        color: rgba(255, 255, 255, 0.4);
    }
    .footer_text a {
        color: rgba(255, 255, 255, 0.6);
    }
    .footer_text a:hover {
        color: rgba(255, 255, 255, 0.8);
    }
}