@view-transition { navigation: auto; }

    html {
        --hq-vt-bg: #ffffff;
        --hq-out: hqOutUp .34s cubic-bezier(.4, 0, .6, 1) both;
        --hq-in: hqInUp .46s cubic-bezier(.16, 1, .3, 1) both;
    }

    html.dark {
        --hq-vt-bg: #14161a;
    }

    html.hq-dir-fwd {
        --hq-out: hqOutRight .34s cubic-bezier(.4, 0, .6, 1) both;
        --hq-in: hqInLeft .46s cubic-bezier(.16, 1, .3, 1) both;
    }

    html.hq-dir-back {
        --hq-out: hqOutLeft .34s cubic-bezier(.4, 0, .6, 1) both;
        --hq-in: hqInRight .46s cubic-bezier(.16, 1, .3, 1) both;
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            --hq-out: none;
            --hq-in: none;
        }
    }

    ::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);
    }

    @media (prefers-reduced-motion: no-preference) {

        @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); }
        }
    }