:root {
    --ks-tt-origin-x: 50vw;
    --ks-tt-origin-y: 50vh;
    --ks-tt-radius: 0px;
    --ks-tt-duration: 720ms;
    --ks-tt-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-group(root),
::view-transition-image-pair(root) {
    animation-duration: var(--ks-tt-duration);
    animation-fill-mode: both;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

html.ks-theme-transition--out::view-transition-old(root) {
    z-index: 999998;
}

html.ks-theme-transition--out::view-transition-new(root) {
    z-index: 999999;
    clip-path: circle(var(--ks-tt-radius) at var(--ks-tt-origin-x) var(--ks-tt-origin-y));
    transition: clip-path var(--ks-tt-duration) var(--ks-tt-easing);
}

html.ks-theme-transition--in::view-transition-new(root) {
    z-index: 999998;
}

html.ks-theme-transition--in::view-transition-old(root) {
    z-index: 999999;
    clip-path: circle(var(--ks-tt-radius) at var(--ks-tt-origin-x) var(--ks-tt-origin-y));
    transition: clip-path var(--ks-tt-duration) var(--ks-tt-easing);
}

.ks-theme-overlay {
    position: fixed;
    inset: 0;
    z-index: 999997;
    pointer-events: none;
    overflow: hidden;
}

.ks-theme-overlay--fade {
    background: var(--ks-tt-overlay-color, rgba(9, 9, 11, 0.72));
    opacity: 1;
    transition: opacity 120ms ease-out;
}

.ks-theme-overlay--fade.is-active {
    opacity: 0;
}

.ks-theme-overlay--out,
.ks-theme-overlay--in {
    background: transparent;
}

.ks-theme-aperture {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 47% 53% 51% 49% / 46% 52% 48% 54%;
    transform-origin: center;
    transition-property: transform;
}

.ks-theme-overlay--out .ks-theme-aperture {
    background: transparent;
    box-shadow:
        0 0 0 200vmax var(--ks-tt-overlay-color, rgba(9, 9, 11, 0.82)),
        0 0 18px rgba(255, 255, 255, 0.08);
}

.ks-theme-overlay--in .ks-theme-aperture {
    background: var(--ks-tt-overlay-color, rgba(9, 9, 11, 0.82));
    box-shadow:
        0 0 18px rgba(255, 255, 255, 0.06),
        0 0 42px rgba(0, 0, 0, 0.12);
}

.ks-theme-ring {
    position: fixed;
    width: 52px;
    height: 52px;
    border-radius: 46% 54% 49% 51% / 51% 47% 53% 49%;
    transform-origin: center;
    pointer-events: none;
    z-index: 1000000;
    opacity: 0;
    border: 1px solid color-mix(in srgb, var(--ks-tt-ring-color, #fbbf24) 70%, white 30%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 14px color-mix(in srgb, var(--ks-tt-ring-color, #fbbf24) 36%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, white 50%)) {
    .ks-theme-ring {
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.08),
            0 0 14px rgba(255, 255, 255, 0.14);
    }
}

html.ks-theme-transitioning {
    overflow: hidden;
}

html.ks-theme-transitioning body {
    pointer-events: none;
}

html.ks-theme-transitioning [data-theme-switch],
html.ks-theme-transitioning [data-theme-toggle],
html.ks-theme-transitioning #theme-toggle {
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
        transition: none !important;
    }

    .ks-theme-overlay,
    .ks-theme-aperture,
    .ks-theme-ring {
        animation: none !important;
        transition: none !important;
    }
}