:root {
    --tg-page: #f5f5f7;
    --tg-surface: rgba(255,255,255,.96);
    --tg-ink: #1d1d1f;
    --tg-muted: #6e6e73;
    --tg-line: rgba(0,0,0,.09);
    --tg-blue: #0071e3;
    --tg-blue-hover: #0077ed;
    --tg-shadow: 0 18px 50px rgba(0,0,0,.07);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 0 max(22px, calc((100% - 1080px) / 2));
    background: rgba(255,255,255,.78);
    border-bottom: 1px solid var(--tg-line);
    backdrop-filter: saturate(180%) blur(20px);
}

.site-header .brand {
    color: var(--tg-ink);
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -.35px;
    text-decoration: none;
    white-space: nowrap;
}

.site-header .brand:hover {
    text-decoration: none;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    margin-right: 8px;
    border-radius: 8px;
    background: linear-gradient(145deg,#0a84ff,#0066cc);
    color: white;
    font-size: 15px;
    font-weight: 700;
    vertical-align: -2px;
    box-shadow: 0 4px 12px rgba(0,113,227,.22);
}

.site-nav {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
}

.tg-nav-primary {
    display: flex;
    align-items: center;
    gap: 22px;
}

.site-nav a {
    color: var(--tg-muted);
    text-decoration: none;
    transition: color .16s ease, opacity .16s ease;
}

.site-nav a:hover {
    color: var(--tg-ink);
    text-decoration: underline;
}

.tg-nav-toggle {
    display: inline-grid;
    place-items: center;
    gap: 3px;
    width: 34px;
    height: 34px;
    padding: 7px;
    border: 1px solid var(--tg-line);
    border-radius: 10px;
    background: rgba(255,255,255,.72);
    color: var(--tg-ink);
    cursor: pointer;
}

.tg-nav-toggle span {
    display: block;
    width: 15px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
}

.tg-nav-more {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 20;
    display: none;
    min-width: 190px;
    padding: 7px;
    flex-direction: column;
    gap: 2px;
    background: var(--tg-surface);
    border: 1px solid var(--tg-line);
    border-radius: 14px;
    box-shadow: var(--tg-shadow);
    backdrop-filter: blur(18px);
}

.site-nav.tg-nav-open .tg-nav-more {
    display: flex;
}

.tg-nav-more a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    white-space: nowrap;
}

.tg-nav-more a:hover {
    background: rgba(0,113,227,.08);
    text-decoration: none;
}

@media (min-width: 681px) {
    .tg-nav-more a:nth-child(-n+2) {
        display: none;
    }
}

@media (max-width: 680px) {
    .site-header {
        padding: 0 20px;
    }

    .site-nav {
        gap: 0;
    }

    .tg-nav-primary {
        display: none;
    }

    .tg-nav-more {
        min-width: min(220px, calc(100vw - 28px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav a,
    .tg-nav-toggle {
        transition-duration: .01ms !important;
    }
}