:root {
    --site-header-offset: 64px;
    --liquid-glass-ink: #111827;
    --liquid-glass-muted: #5f6878;
    --liquid-glass-tint: #4f46e5;
}

#site-main {
    padding-top: var(--site-header-offset);
}

#site-main:has(> .page-under-glass-header) {
    padding-top: 0;
}

.tools-home-hero {
    padding-top: 6rem;
}

.liquid-glass-header {
    inset: 0 0 auto;
    padding: 0.5rem 0.65rem;
    pointer-events: none;
    position: fixed;
    transform: translateY(0);
    transition:
        padding 340ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
    will-change: transform;
    z-index: 40;
}

.liquid-glass-header.is-hidden {
    transform: translateY(-125%);
}

.liquid-glass-nav {
    align-items: center;
    background:
        linear-gradient(
            115deg,
            rgb(255 255 255 / 73%),
            rgb(246 248 255 / 49%) 54%,
            rgb(255 255 255 / 64%)
        );
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 92%),
        inset 0 -1px 0 rgb(99 102 241 / 8%),
        0 0.35rem 1.1rem rgb(15 23 42 / 8%),
        0 0.08rem 0.2rem rgb(15 23 42 / 9%);
    color: var(--liquid-glass-ink);
    display: flex;
    isolation: isolate;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 80rem;
    min-height: 3rem;
    overflow: hidden;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    pointer-events: auto;
    position: relative;
    transition:
        background 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease,
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
    -webkit-backdrop-filter: blur(12px) saturate(180%) contrast(106%);
    backdrop-filter: blur(12px) saturate(180%) contrast(106%);
}

.liquid-glass-nav::before,
.liquid-glass-nav::after {
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.liquid-glass-nav::before {
    background:
        linear-gradient(
            105deg,
            rgb(255 255 255 / 68%) 0%,
            transparent 22%,
            transparent 66%,
            rgb(255 255 255 / 38%) 100%
        );
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.liquid-glass-nav::after {
    background:
        radial-gradient(
            circle at 18% -35%,
            rgb(255 255 255 / 85%),
            transparent 38%
        ),
        radial-gradient(
            circle at 82% 145%,
            rgb(99 102 241 / 12%),
            transparent 42%
        );
    mix-blend-mode: soft-light;
}

.liquid-glass-header.is-scrolled {
    padding-top: 0.4rem;
}

.liquid-glass-header.is-scrolled .liquid-glass-nav {
    background:
        linear-gradient(
            115deg,
            rgb(255 255 255 / 84%),
            rgb(245 247 255 / 67%) 55%,
            rgb(255 255 255 / 79%)
        );
    border-color: rgb(255 255 255 / 84%);
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -1px 0 rgb(99 102 241 / 10%),
        0 0.7rem 2rem rgb(15 23 42 / 13%),
        0 0.12rem 0.35rem rgb(15 23 42 / 10%);
}

.liquid-glass-logo {
    border-radius: 999px;
    padding: 0.15rem 0.3rem;
    transition:
        background 180ms ease,
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.liquid-glass-logo:hover {
    background: rgb(255 255 255 / 42%);
    transform: scale(1.018);
}

.liquid-glass-links {
    align-items: center;
    display: flex;
    gap: 0.35rem;
}

.liquid-glass-link {
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--liquid-glass-muted);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1;
    padding: 0.72rem 0.92rem;
    position: relative;
    text-decoration: none;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.liquid-glass-link:hover,
.liquid-glass-link:focus-visible,
.liquid-glass-link[aria-current="page"] {
    background:
        linear-gradient(
            135deg,
            rgb(255 255 255 / 67%),
            rgb(238 242 255 / 58%)
        );
    border-color: rgb(255 255 255 / 70%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 84%),
        0 0.3rem 0.85rem rgb(79 70 229 / 10%);
    color: #3730a3;
    outline: none;
    text-decoration: none;
    transform: translateY(-1px);
}

.liquid-glass-link:active {
    transform: scale(0.965);
}

.liquid-glass-actions {
    align-items: center;
    display: flex;
    gap: 0.35rem;
}

#main-header .liquid-glass-search-trigger {
    background: rgb(255 255 255 / 44%);
    border: 1px solid rgb(255 255 255 / 65%);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 78%),
        0 0.25rem 0.8rem rgb(15 23 42 / 6%);
    color: #687386;
    cursor: pointer;
    height: 2.5rem;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        width 200ms ease;
    width: 15.5rem;
}

#main-header .liquid-glass-search-trigger:hover,
#main-header .liquid-glass-search-trigger:focus-visible {
    background: rgb(255 255 255 / 67%);
    border-color: rgb(255 255 255 / 82%);
    box-shadow:
        inset 0 1px 0 #fff,
        0 0 0 0.2rem rgb(99 102 241 / 9%),
        0 0.42rem 1rem rgb(79 70 229 / 12%);
    outline: none;
    transform: translateY(-1px);
}

#main-header .site-search-trigger__shortcut {
    background: rgb(255 255 255 / 54%);
    border-color: rgb(255 255 255 / 72%);
    color: #7c8494;
}

.liquid-glass-icon-button {
    align-items: center;
    background: rgb(255 255 255 / 42%);
    border: 1px solid rgb(255 255 255 / 66%);
    border-radius: 50%;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 82%),
        0 0.25rem 0.7rem rgb(15 23 42 / 7%);
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    height: 2.35rem;
    justify-content: center;
    padding: 0;
    transition:
        background 180ms ease,
        box-shadow 180ms ease,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    width: 2.35rem;
}

.liquid-glass-icon-button:hover,
.liquid-glass-icon-button:focus-visible {
    background: rgb(255 255 255 / 76%);
    box-shadow:
        inset 0 1px 0 #fff,
        0 0 0 0.2rem rgb(99 102 241 / 9%),
        0 0.35rem 0.9rem rgb(15 23 42 / 10%);
    outline: none;
    transform: translateY(-1px) scale(1.025);
}

.liquid-glass-icon-button:active {
    transform: scale(0.92);
}

.liquid-glass-drawer-backdrop {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgb(15 23 42 / 14%);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 260ms ease, visibility 260ms ease;
    visibility: hidden;
    z-index: 49;
}

.liquid-glass-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.liquid-glass-drawer {
    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 86%),
            rgb(244 246 255 / 68%)
        );
    border: 1px solid rgb(255 255 255 / 84%);
    border-radius: 1.8rem;
    bottom: auto;
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -1px 0 rgb(99 102 241 / 9%),
        -0.8rem 1.5rem 4rem rgb(15 23 42 / 20%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: calc(100vw - 2rem);
    opacity: 0;
    padding: 0.8rem;
    position: fixed;
    right: 1rem;
    top: 4.5rem;
    transform: translateY(-0.65rem) scale(0.88);
    transform-origin: top right;
    transition:
        opacity 280ms ease,
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 280ms ease;
    visibility: hidden;
    width: 19rem;
    z-index: 50;
    -webkit-backdrop-filter: blur(28px) saturate(175%) contrast(104%);
    backdrop-filter: blur(28px) saturate(175%) contrast(104%);
}

.liquid-glass-drawer.is-open {
    opacity: 1;
    transform: translateX(0) scale(1);
    visibility: visible;
}

.liquid-glass-drawer__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0.15rem 0.15rem 0.55rem 0.65rem;
}

.liquid-glass-drawer__title {
    color: var(--liquid-glass-ink);
    font-size: 1.1rem;
    font-weight: 760;
    letter-spacing: -0.02em;
}

.liquid-glass-drawer__close {
    flex: 0 0 auto;
}

.liquid-glass-drawer__links {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.liquid-glass-drawer__link {
    align-items: center;
    background: rgb(255 255 255 / 36%);
    border: 1px solid transparent;
    border-radius: 1rem;
    color: #4b5563;
    display: flex;
    font-size: 0.95rem;
    font-weight: 650;
    min-height: 3.15rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease,
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.liquid-glass-drawer__link:hover,
.liquid-glass-drawer__link:focus-visible,
.liquid-glass-drawer__link[aria-current="page"] {
    background:
        linear-gradient(
            135deg,
            rgb(255 255 255 / 78%),
            rgb(238 242 255 / 66%)
        );
    border-color: rgb(255 255 255 / 82%);
    box-shadow:
        inset 0 1px 0 #fff,
        0 0.45rem 1rem rgb(79 70 229 / 10%);
    color: #3730a3;
    outline: none;
    transform: translateX(0.18rem);
}

body.mobile-menu-open {
    overflow: hidden;
}

@media (min-width: 768px) {
    :root {
        --site-header-offset: 72px;
    }

    .liquid-glass-header {
        padding: 0.55rem clamp(0.75rem, 2vw, 1.5rem);
    }

    .liquid-glass-nav {
        min-height: 3.35rem;
        padding: 0.4rem 0.6rem 0.4rem 0.95rem;
    }

    .tools-home-hero {
        padding-top: 7rem;
    }
}

@media (max-width: 768px) {
    .liquid-glass-links,
    #main-header .liquid-glass-search-trigger {
        display: none !important;
    }

    .liquid-glass-logo img {
        width: 6.3rem;
    }

    .liquid-glass-actions {
        gap: 0.25rem;
    }

    .liquid-glass-drawer {
        display: flex;
    }

    #main-header [data-mobile-menu-open] {
        display: inline-flex;
    }
}

@media (min-width: 769px) {
    #main-header [data-mobile-menu-open],
    #main-header .search-icon-trigger {
        display: none !important;
    }

    .liquid-glass-drawer,
    .liquid-glass-drawer-backdrop {
        display: none;
    }
}

@media (prefers-contrast: more) {
    .liquid-glass-nav,
    .liquid-glass-drawer {
        background: rgb(255 255 255 / 94%);
        border-color: #fff;
    }

    .liquid-glass-link,
    .liquid-glass-drawer__link {
        color: #111827;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .liquid-glass-nav,
    .liquid-glass-drawer {
        background: rgb(255 255 255 / 96%);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .liquid-glass-header,
    .liquid-glass-nav,
    .liquid-glass-logo,
    .liquid-glass-link,
    .liquid-glass-search-trigger,
    .liquid-glass-icon-button,
    .liquid-glass-drawer,
    .liquid-glass-drawer-backdrop,
    .liquid-glass-drawer__link {
        transition: none;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .liquid-glass-nav,
    .liquid-glass-drawer {
        background: rgb(255 255 255 / 96%);
    }
}