body {
    /*background-color: #171819 !important*/
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    z-index: 2
}

.close-area {
    width: 100%;
    height: 100%;
    position: absolute
}

svg.search {
    cursor: pointer
}

[cmdk-root] {
    margin: auto;
    max-width: 600px;
    width: 100%
}

body.search-open .overlay {
    background: #171819cf
}

body:not(.search-open) .overlay {
    display: none !important
}

::selection {
    background: #ff69b4;
    color: #fff
}

html, body {
    padding: 0;
    margin: 0;
    font-family: var(--font-sans)
}

body {
    background: var(--app-bg);
    overflow-x: hidden
}

button {
    background: none;
    font-family: var(--font-sans);
    padding: 0;
    border: 0
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0
}

a {
    color: inherit;
    text-decoration: none
}

*, *:after, *:before {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

:root {
    --font-sans: "Inter", --apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    --app-bg: var(--gray1);
    --cmdk-shadow: 0 16px 70px rgb(0 0 0 / 20%);
    --lowContrast: #ffffff;
    --highContrast: #000000;
    --gray1: hsl(0, 0%, 99%);
    --gray2: hsl(0, 0%, 97.3%);
    --gray3: hsl(0, 0%, 95.1%);
    --gray4: hsl(0, 0%, 93%);
    --gray5: hsl(0, 0%, 90.9%);
    --gray6: hsl(0, 0%, 88.7%);
    --gray7: hsl(0, 0%, 85.8%);
    --gray8: hsl(0, 0%, 78%);
    --gray9: hsl(0, 0%, 56.1%);
    --gray10: hsl(0, 0%, 52.3%);
    --gray11: hsl(0, 0%, 43.5%);
    --gray12: hsl(0, 0%, 9%);
    --grayA1: hsla(0, 0%, 0%, .012);
    --grayA2: hsla(0, 0%, 0%, .027);
    --grayA3: hsla(0, 0%, 0%, .047);
    --grayA4: hsla(0, 0%, 0%, .071);
    --grayA5: hsla(0, 0%, 0%, .09);
    --grayA6: hsla(0, 0%, 0%, .114);
    --grayA7: hsla(0, 0%, 0%, .141);
    --grayA8: hsla(0, 0%, 0%, .22);
    --grayA9: hsla(0, 0%, 0%, .439);
    --grayA10: hsla(0, 0%, 0%, .478);
    --grayA11: hsla(0, 0%, 0%, .565);
    --grayA12: hsla(0, 0%, 0%, .91);
    --blue1: hsl(206, 100%, 99.2%);
    --blue2: hsl(210, 100%, 98%);
    --blue3: hsl(209, 100%, 96.5%);
    --blue4: hsl(210, 98.8%, 94%);
    --blue5: hsl(209, 95%, 90.1%);
    --blue6: hsl(209, 81.2%, 84.5%);
    --blue7: hsl(208, 77.5%, 76.9%);
    --blue8: hsl(206, 81.9%, 65.3%);
    --blue9: hsl(206, 100%, 50%);
    --blue10: hsl(208, 100%, 47.3%);
    --blue11: hsl(211, 100%, 43.2%);
    --blue12: hsl(211, 100%, 15%)
}

.dark {
    --app-bg: var(--gray1);
    --lowContrast: #000000;
    --highContrast: #ffffff;
    --gray1: hsl(0, 0%, 8.5%);
    --gray2: hsl(0, 0%, 11%);
    --gray3: hsl(0, 0%, 13.6%);
    --gray4: hsl(0, 0%, 15.8%);
    --gray5: hsl(0, 0%, 17.9%);
    --gray6: hsl(0, 0%, 20.5%);
    --gray7: hsl(0, 0%, 24.3%);
    --gray8: hsl(0, 0%, 31.2%);
    --gray9: hsl(0, 0%, 43.9%);
    --gray10: hsl(0, 0%, 49.4%);
    --gray11: hsl(0, 0%, 62.8%);
    --gray12: hsl(0, 0%, 93%);
    --grayA1: hsla(0, 0%, 100%, 0);
    --grayA2: hsla(0, 0%, 100%, .026);
    --grayA3: hsla(0, 0%, 100%, .056);
    --grayA4: hsla(0, 0%, 100%, .077);
    --grayA5: hsla(0, 0%, 100%, .103);
    --grayA6: hsla(0, 0%, 100%, .129);
    --grayA7: hsla(0, 0%, 100%, .172);
    --grayA8: hsla(0, 0%, 100%, .249);
    --grayA9: hsla(0, 0%, 100%, .386);
    --grayA10: hsla(0, 0%, 100%, .446);
    --grayA11: hsla(0, 0%, 100%, .592);
    --grayA12: hsla(0, 0%, 100%, .923);
    --blue1: hsl(212, 35%, 9.2%);
    --blue2: hsl(216, 50%, 11.8%);
    --blue3: hsl(214, 59.4%, 15.3%);
    --blue4: hsl(214, 65.8%, 17.9%);
    --blue5: hsl(213, 71.2%, 20.2%);
    --blue6: hsl(212, 77.4%, 23.1%);
    --blue7: hsl(211, 85.1%, 27.4%);
    --blue8: hsl(211, 89.7%, 34.1%);
    --blue9: hsl(206, 100%, 50%);
    --blue10: hsl(209, 100%, 60.6%);
    --blue11: hsl(210, 100%, 66.1%);
    --blue12: hsl(206, 98%, 95.8%)
}

.raycast [cmdk-root] {
    max-width: 640px;
    width: 100%;
    background: var(--gray1);
    border-radius: 12px;
    padding: 8px 0;
    font-family: var(--font-sans);
    box-shadow: var(--cmdk-shadow);
    border: 1px solid var(--gray6);
    position: relative;
    outline: none
}

.raycast [cmdk-root]:not([open]) {
    display: none
}

.dark .raycast [cmdk-root] {
    background: var(--gray2);
    border: 0
}

.dark .raycast [cmdk-root]:after {
    content: "";
    background: linear-gradient(to right, var(--gray6) 20%, var(--gray6) 40%, var(--gray10) 50%, var(--gray10) 55%, var(--gray6) 70%, var(--gray6) 100%);
    z-index: -1;
    position: absolute;
    border-radius: 12px;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    animation: shine 3s ease forwards .1s;
    background-size: 200% auto
}

.dark .raycast [cmdk-root]:before {
    content: "";
    z-index: -1;
    position: absolute;
    border-radius: 12px;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    box-shadow: 0 0 0 1px transparent;
    animation: border 1s linear forwards .5s
}

.raycast [cmdk-root] kbd {
    font-family: var(--font-sans);
    background: var(--gray3);
    color: var(--gray11);
    height: 20px;
    width: 20px;
    border-radius: 4px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center
}

.raycast [cmdk-root] kbd:first-of-type {
    margin-left: 8px
}

.raycast [cmdk-input] {
    font-family: var(--font-sans);
    border: none;
    width: 100%;
    font-size: 15px;
    padding: 8px 16px;
    outline: none;
    background: var(--bg);
    color: var(--gray12)
}

.raycast [cmdk-input]::placeholder {
    color: var(--gray9)
}

.dark .raycast [cmdk-raycast-top-shine] {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0), var(--gray5) 20%, var(--gray9) 67.19%, rgba(236, 72, 153, 0));
    height: 1px;
    position: absolute;
    top: -1px;
    width: 100%;
    z-index: -1;
    opacity: 0;
    animation: showTopShine .1s ease forwards .2s
}

.raycast [cmdk-raycast-loader] {
    --loader-color: var(--gray9);
    border: 0;
    width: 100%;
    left: 0;
    height: 1px;
    background: var(--gray6);
    position: relative;
    overflow: visible;
    display: block;
    margin-top: 12px;
    margin-bottom: 0
}

.raycast [cmdk-raycast-loader]:after {
    content: "";
    width: 50%;
    height: 1px;
    position: absolute;
    background: linear-gradient(90deg, transparent 0%, var(--loader-color) 50%, transparent 100%);
    top: -1px;
    opacity: 0;
    animation-duration: 1.5s;
    animation-delay: 1s;
    animation-timing-function: ease;
    animation-name: loading
}

.raycast [cmdk-item] {
    content-visibility: auto;
    cursor: pointer;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    color: var(--gray12);
    -webkit-user-select: none;
    user-select: none;
    will-change: background, color;
    transition: all .15s ease;
    transition-property: none
}

.raycast [cmdk-item][data-selected=true] {
    background: var(--gray4);
    color: var(--gray12)
}

.raycast [cmdk-item][data-disabled=true] {
    color: var(--gray8);
    cursor: not-allowed
}

.raycast [cmdk-item]:active {
    transition-property: background;
    background: var(--gray4)
}

.raycast [cmdk-item]:first-child {
    margin-top: 8px
}

.raycast [cmdk-item] + [cmdk-item] {
    margin-top: 4px
}

.raycast [cmdk-item] svg {
    height: 20px;
    width: 20px;
    opacity: .4
}

.raycast [cmdk-raycast-meta] {
    margin-left: auto;
    color: var(--gray11);
    font-size: 13px
}

.raycast [cmdk-list] {
    padding: 0 8px 40px;
    height: 500px;
    overflow: auto;
    overscroll-behavior: contain;
    scroll-padding-block-end: 40px;
    transition: .1s ease;
    transition-property: height
}

.raycast [cmdk-raycast-open-trigger], .raycast [cmdk-raycast-subcommand-trigger] {
    color: var(--gray11);
    padding: 0 4px 0 8px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 12px;
    height: 28px;
    letter-spacing: -.25px
}

.raycast [cmdk-raycast-clipboard-icon], .raycast [cmdk-raycast-hammer-icon] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff
}

.raycast [cmdk-raycast-clipboard-icon] svg, .raycast [cmdk-raycast-hammer-icon] svg {
    width: 14px;
    height: 14px
}

.raycast [cmdk-raycast-clipboard-icon] {
    background: linear-gradient(to bottom, #f55354, #eb4646)
}

.raycast [cmdk-raycast-hammer-icon] {
    background: linear-gradient(to bottom, #6cb9a3, #2c6459)
}

.raycast [cmdk-raycast-open-trigger] {
    display: flex;
    align-items: center;
    color: var(--gray12)
}

.raycast [cmdk-raycast-subcommand-trigger] {
    display: flex;
    align-items: center;
    gap: 4px;
    right: 8px;
    bottom: 8px
}

.raycast [cmdk-raycast-subcommand-trigger] svg {
    width: 14px;
    height: 14px
}

.raycast [cmdk-raycast-subcommand-trigger] hr {
    height: 100%;
    background: var(--gray6);
    border: 0;
    width: 1px;
    margin-bottom: 0 !important
}

.raycast [cmdk-raycast-subcommand-trigger][aria-expanded=true], .raycast [cmdk-raycast-subcommand-trigger]:hover {
    background: var(--gray4)
}

.raycast [cmdk-raycast-subcommand-trigger][aria-expanded=true] kbd, .raycast [cmdk-raycast-subcommand-trigger]:hover kbd {
    background: var(--gray7)
}

.raycast [cmdk-separator] {
    height: 1px;
    width: 100%;
    background: var(--gray5);
    margin: 4px 0
}

.raycast *:not([hidden]) + [cmdk-group] {
    margin-top: 8px
}

.raycast [cmdk-group-heading] {
    -webkit-user-select: none;
    user-select: none;
    font-size: 12px;
    color: var(--gray11);
    padding: 0 8px;
    margin-top: 8px;
    display: flex;
    align-items: center
}

.raycast [cmdk-raycast-footer] {
    display: flex;
    height: 40px;
    align-items: center;
    width: 100%;
    position: absolute;
    background: var(--gray1);
    bottom: 0;
    padding: 8px;
    border-top: 1px solid var(--gray6);
    border-radius: 0 0 12px 12px
}

.raycast [cmdk-raycast-footer] svg {
    width: 20px;
    height: 20px;
    filter: grayscale(1);
    margin-right: auto
}

.raycast [cmdk-raycast-footer] hr {
    height: 12px;
    width: 1px;
    border: 0;
    background: var(--gray6);
    margin: 0 4px 0 12px
}

@media (prefers-color-scheme: dark) {
    .raycast [cmdk-raycast-footer] {
        background: var(--gray2)
    }
}

.raycast [cmdk-dialog] {
    z-index: var(--layer-portal);
    position: fixed;
    left: 50%;
    top: var(--page-top);
    transform: translate(-50%)
}

.raycast [cmdk-dialog] [cmdk] {
    width: 640px;
    transform-origin: center center;
    animation: dialogIn var(--transition-fast) forwards
}

.raycast [cmdk-dialog][data-state=closed] [cmdk] {
    animation: dialogOut var(--transition-fast) forwards
}

.raycast [cmdk-empty] {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    white-space: pre-wrap;
    color: var(--gray11)
}

@keyframes loading {
    0% {
        opacity: 0;
        transform: translate(0)
    }
    50% {
        opacity: 1;
        transform: translate(100%)
    }
    to {
        opacity: 0;
        transform: translate(0)
    }
}

@keyframes shine {
    to {
        background-position: 200% center;
        opacity: 0
    }
}

@keyframes border {
    to {
        box-shadow: 0 0 0 1px var(--gray6)
    }
}

@keyframes showTopShine {
    to {
        opacity: 1
    }
}

.raycast-submenu {
    animation-duration: .2s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    transform-origin: var(--radix-popover-content-transform-origin)
}

.raycast-submenu [cmdk-root] {
    display: flex;
    flex-direction: column;
    width: 320px;
    border: 1px solid var(--gray6);
    background: var(--gray2);
    border-radius: 8px
}

.raycast-submenu [cmdk-list] {
    padding: 8px;
    overflow: auto;
    overscroll-behavior: contain;
    transition: .1s ease;
    transition-property: height
}

.raycast-submenu [cmdk-item] {
    cursor: pointer;
    height: 40px;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    color: var(--gray12);
    -webkit-user-select: none;
    user-select: none;
    will-change: background, color;
    transition: all .15s ease;
    transition-property: none
}

.raycast-submenu [cmdk-item][aria-selected=true] {
    background: var(--gray5);
    color: var(--gray12)
}

.raycast-submenu [cmdk-item][aria-selected=true] [cmdk-raycast-submenu-shortcuts] kbd {
    background: var(--gray7)
}

.raycast-submenu [cmdk-item][aria-disabled=true] {
    color: var(--gray8);
    cursor: not-allowed
}

.raycast-submenu [cmdk-item] svg {
    width: 16px;
    height: 16px
}

.raycast-submenu [cmdk-item] [cmdk-raycast-submenu-shortcuts] {
    display: flex;
    margin-left: auto;
    gap: 2px
}

.raycast-submenu [cmdk-item] [cmdk-raycast-submenu-shortcuts] kbd {
    font-family: var(--font-sans);
    background: var(--gray5);
    color: var(--gray11);
    height: 20px;
    width: 20px;
    border-radius: 4px;
    padding: 0 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center
}

.raycast-submenu [cmdk-item] [cmdk-raycast-submenu-shortcuts] kbd:first-of-type {
    margin-left: 8px
}

.raycast-submenu [cmdk-group-heading] {
    text-transform: capitalize;
    font-size: 12px;
    color: var(--gray11);
    font-weight: 500;
    margin-bottom: 8px;
    margin-top: 8px;
    margin-left: 4px
}

.raycast-submenu [cmdk-input] {
    padding: 12px;
    font-family: var(--font-sans);
    border: 0;
    border-top: 1px solid var(--gray6);
    font-size: 13px;
    background: transparent;
    margin-top: auto;
    width: 100%;
    outline: 0;
    border-radius: 0
}

.raycast-submenu[data-state=open] {
    animation-name: slideIn
}

.raycast-submenu[data-state=closed] {
    animation-name: slideOut
}

.raycast-submenu [cmdk-empty] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    white-space: pre-wrap;
    font-size: 14px;
    color: var(--gray11)
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: scale(.96)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes slideOut {
    0% {
        opacity: 1;
        transform: scale(1)
    }
    to {
        opacity: 0;
        transform: scale(.96)
    }
}

@media (max-width: 640px) {
    .raycast [cmdk-input] {
        font-size: 16px
    }
}