html {
        --hq-vt-bg: #ffffff;
        --hq-out: hqOutUp;
        --hq-in: hqInUp;
    }

    html.dark { --hq-vt-bg: #14161a; }
    html.hq-dir-fwd { --hq-out: hqOutRight; --hq-in: hqInLeft; }
    html.hq-dir-back { --hq-out: hqOutLeft; --hq-in: hqInRight; }

    @media (prefers-reduced-motion: no-preference) {
        @view-transition { navigation: auto; }
        ::view-transition { background-color: var(--hq-vt-bg, #ffffff); }
        ::view-transition-old(root) { animation: var(--hq-out, hqOutUp) .34s cubic-bezier(.4, 0, .6, 1) both; }
        ::view-transition-new(root) { animation: var(--hq-in, hqInUp) .46s cubic-bezier(.16, 1, .3, 1) both; }

        @keyframes hqNtFade { from { opacity: 0 } to { opacity: 1 } }
        @keyframes hqOutUp { from { opacity: 1; } to { opacity: 0; transform: translateY(-56px); } }
        @keyframes hqInUp { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes hqOutRight { from { opacity: 1; } to { opacity: 0; transform: translateX(64px); } }
        @keyframes hqInLeft { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes hqOutLeft { from { opacity: 1; } to { opacity: 0; transform: translateX(-64px); } }
        @keyframes hqInRight { from { opacity: 0; transform: translateX(64px); } to { opacity: 1; transform: translateX(0); } }
    }