:root { --gh-h: 60px; }
.gh {
    --gh-bg: 245, 244, 240;
    --gh-fg: #15171a;
    --gh-muted: #5a6065;
    --gh-faint: #6a7075;
    --gh-line: rgba(21, 23, 26, .12);
    --gh-cta-bg: #15171a;
    --gh-cta-fg: #ffffff;
    --gh-r: 6px;
    position: sticky; top: 0; z-index: 60;
    background: rgba(var(--gh-bg), .9);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--gh-line);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: .875rem;
    transition: background .25s ease, border-color .25s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.gh--dark {
    --gh-bg: 13, 13, 13;
    --gh-fg: #ffffff;
    --gh-muted: #a2a6a9;
    --gh-faint: #74797d;
    --gh-line: rgba(255, 255, 255, .12);
    --gh-cta-bg: #ffffff;
    --gh-cta-fg: #101010;
}
.gh--overlay { position: fixed; left: 0; right: 0; }
.gh.hidden { transform: translateY(-120%); }
.gh-wrap {
    display: flex; align-items: center; gap: 1.25rem;
    max-width: var(--container, 1200px); margin: 0 auto;
    padding: 0 24px; min-height: var(--gh-h);
}
.gh-logo { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Comfortaa', -apple-system, sans-serif; font-weight: 700; font-size: 1rem; color: var(--gh-fg); text-decoration: none; }
.gh-logo svg { display: block; flex: none; }
.gh-logo span { transform: translateY(.08em); }
.gh-nav { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; }
.gh-nav a { color: var(--gh-muted); text-decoration: none; padding-block: .5rem; transition: color .15s ease; }
.gh-nav a:hover { color: var(--gh-fg); }
.gh-nav a[aria-current="page"] { color: var(--gh-fg); font-weight: 500; }
.gh-side { display: flex; align-items: center; gap: .8rem; }
.gh-login {
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap; color: var(--gh-muted); text-decoration: none;
    font-size: .8125rem; transition: color .15s ease;
}
.gh-login:hover { color: var(--gh-fg); }
.gh-access {
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap; text-decoration: none;
    padding: .5rem 1rem;
    font-size: .875rem; font-weight: 500;
    color: var(--gh-muted);
    background: transparent;
    border: 1px solid var(--gh-line); border-radius: var(--gh-r);
    transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.gh-access:hover { color: var(--gh-fg); border-color: var(--gh-faint); }
.gh-mobile-only { display: none; }
.gh-cta {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .5rem 1rem; white-space: nowrap;
    font-size: .875rem; font-weight: 500; text-decoration: none;
    background: var(--gh-cta-bg); color: var(--gh-cta-fg);
    border: 1px solid var(--gh-cta-bg); border-radius: var(--gh-r);
    transition: opacity .15s ease;
}
.gh-cta:hover { opacity: .85; }
.gh-acct {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .25rem .75rem .25rem .25rem;
    max-width: 15rem; text-decoration: none; color: var(--gh-fg);
    background: transparent; border: 1px solid var(--gh-line);
    border-radius: 999px;
    transition: border-color .15s ease, background .15s ease;
}
.gh-acct:hover { border-color: var(--gh-fg); background: rgba(var(--gh-bg), .6); }
.gh-acct-ava {
    flex: none; width: 26px; height: 26px; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--gh-cta-bg); color: var(--gh-cta-fg);
    font-size: .75rem; font-weight: 600; line-height: 1;
}
.gh-acct-mail {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .8125rem; color: var(--gh-muted);
}
.gh-acct:hover .gh-acct-mail { color: var(--gh-fg); }
.gh-burger { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; }
.gh-burger span, .gh-burger span::before, .gh-burger span::after { display: block; width: 17px; height: 1.5px; background: var(--gh-fg); content: ""; transition: transform .2s ease, background .2s ease; }
.gh-burger span { margin-inline: auto; position: relative; }
.gh-burger span::before { position: absolute; top: -5px; }
.gh-burger span::after { position: absolute; top: 5px; }
.gh-burger[aria-expanded="true"] span { background: transparent; }
.gh-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.gh-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
.gh :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--gh-r); }
@media (max-width: 1080px) {
    .gh-nav {
        position: absolute; inset: calc(var(--gh-h) + 1px) 0 auto; display: none;
        flex-direction: column; align-items: flex-start; gap: 1rem;
        padding: 1.5rem 24px; background: rgb(var(--gh-bg));
        border-bottom: 1px solid var(--gh-line);
    }
    .gh-nav.open { display: flex; }
    .gh-nav a { font-size: 1rem; }
    .gh-mobile-only { display: block; }
    .gh-burger { display: grid; place-items: center; margin-left: auto; }
    .gh-access, .gh-login { display: none; }
}
@media (max-width: 640px) {
    .gh-wrap { padding: 0 16px; gap: 1rem; }
    .gh-acct { padding: .25rem; }
    .gh-acct-mail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gh, .gh * { transition: none !important; }
}