.animated-prompt .animate-type,
.ui-overlay .animate-type {
    color: transparent;
    background: linear-gradient(hsl(var(--twc-syntax-copy)) 0 0) 0 0;
    background-size: calc(var(--n) * 1ch) 200%;
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
    animation: type calc(var(--n) * .02s) steps(var(--n)) forwards var(--delay);
    position: relative;
    word-break: break-word
}

.animated-prompt .stagger-display,
.ui-overlay .stagger-display {
    opacity: 0;
    animation: showContent .2s forwards;
    animation-delay: .6s
}

.animated-prompt .expand-content,
.ui-overlay .expand-content {
    display: grid;
    grid-template-rows: 0fr;
    animation: scaleUp .2s forwards
}

.animated-prompt .rich-text p,
.ui-overlay .rich-text p {
    font-size: inherit
}

.animated-prompt .rich-text ul,
.ui-overlay .rich-text ul {
    list-style-type: disc;
    padding-left: 1.5rem
}

@keyframes type {
    0% {
        background-size: 0 200%
    }
}

@keyframes scaleUp {
    to {
        grid-template-rows: 1fr
    }
}

@keyframes showContent {
    to {
        opacity: 1
    }
}

@keyframes shrinkOut {
    to {
        transform: translateX(24px) scale(0)
    }
}

.instruction-following,
.instruction-following tspan {
    color: #6e6e80
}

@media (prefers-color-scheme:dark) {

    .instruction-following,
    .instruction-following tspan {
        color: #b4b4b4
    }
}

.chatgpt-conversation li.animating-element:after,
.chatgpt-conversation p.animating-element:after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    margin-bottom: -4px;
    --tw-bg-opacity: 1;
    background-color: hsl(var(--twc-primary-100)/var(--twc-primary-100-opacity, var(--tw-bg-opacity)))
}

.chatgpt-conversation .rich-text-code-example {
    width: 100%
}

.force-show-scrollbars::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 12px
}

.force-show-scrollbars::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: #c1c1c1;
    border-radius: 9px 8px 8px 9px;
    border: 3px solid transparent;
    border-left-width: 4px
}

.force-show-scrollbars::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .5)
}

.highlighted-text {
    border-radius: .28125rem;
    padding: 0 .2rem
}

.highlight-purple {
    background-color: rgba(154, 118, 255, .3)
}

.highlight-red {
    background-color: rgba(232, 13, 47, .3)
}

.highlight-orange {
    background-color: rgba(207, 68, 10, .3)
}

.highlight-yellow {
    background-color: rgba(205, 165, 26, .3)
}

.highlight-green {
    background-color: rgba(18, 148, 85, .3)
}

.highlight-sky {
    background-color: rgba(61, 138, 166, .3)
}

.highlight-blue {
    background-color: rgba(53, 112, 228, .3)
}

.highlight-magenta {
    background-color: rgba(221, 14, 150, .3)
}

:root {
    --header-h: 3.375rem;
    --toc-button-h: 3rem
}

:root ::-moz-selection {
    --tw-bg-opacity: 1;
    background-color: hsl(var(--twc-primary-100)/var(--twc-primary-100-opacity, var(--tw-bg-opacity)));
    color: hsl(var(--twc-background)/var(--twc-background-opacity, 1))
}

:root ::selection {
    --tw-bg-opacity: 1;
    background-color: hsl(var(--twc-primary-100)/var(--twc-primary-100-opacity, var(--tw-bg-opacity)));
    color: hsl(var(--twc-background)/var(--twc-background-opacity, 1))
}

@media (min-width:48rem) {
    :root {
        --header-h: 4.75rem
    }
}

@media (prefers-color-scheme:dark) {
    :root {
        color-scheme: dark
    }
}