/* mobile desktop-like visual sync v1 */
@media (max-width: 768px) {
    html,
    body {
        background:
            radial-gradient(circle at 52% 34%, rgba(65, 135, 255, .34), transparent 28%),
            radial-gradient(circle at 90% 58%, rgba(112, 0, 210, .46), transparent 34%),
            linear-gradient(120deg, #03091d 0%, #081746 52%, #240052 100%) !important;
        overflow-x: hidden !important;
    }

    #space,
    #floating-stars {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
    }

    .page {
        min-height: 100vh !important;
        padding: 14px 16px 28px !important;
    }

    .topbar {
        left: 16px !important;
        right: 16px !important;
        top: 16px !important;
        height: 46px !important;
    }

    .brand-title {
        font-size: 17px !important;
    }

    .brand-sub {
        font-size: 8px !important;
        letter-spacing: 2px !important;
    }

    .top-status {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    .hero {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        min-height: 820px !important;
        padding-top: 116px !important;
    }

    .hero-title {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        transform: none !important;
        margin: 0 auto 26px !important;
        text-align: center !important;
        z-index: 12 !important;
    }

    .mobile-sweep-title {
        width: min(88vw, 430px) !important;
        margin: 0 auto !important;
    }

    .hero-title p {
        margin-top: 10px !important;
        font-size: 14px !important;
        letter-spacing: 7px !important;
    }

    .status-panel {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        transform: none !important;
        margin: 0 auto !important;
        z-index: 14 !important;
    }

    .status-panel h2 {
        font-size: 30px !important;
    }

    .globe-area {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: min(74vw, 360px) !important;
        transform: none !important;
        margin: 28px auto 24px !important;
        z-index: 9 !important;
    }

    .cards {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        transform: none !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 20px 0 18px !important;
    }

    .entry-card {
        min-height: 118px !important;
        padding: 22px 22px 20px 24px !important;
        border-radius: 10px !important;
    }

    .entry-card h3 {
        font-size: 25px !important;
        white-space: nowrap !important;
        writing-mode: horizontal-tb !important;
    }

    .entry-card p {
        font-size: 10px !important;
        letter-spacing: 1.5px !important;
    }

    .footer {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: block !important;
        text-align: center !important;
        margin-top: 14px !important;
        line-height: 1.6 !important;
    }
}