/* Prism Overrides & Custom Styles */

/* Ensure the code editor looks good */
code[class*="language-"],
pre[class*="language-"] {
    text-shadow: none !important;
    font-family: 'JetBrains Mono', monospace !important;
}

/* Hide scrollbars in the captured area but allow scroll */
#code-output::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#code-output::-webkit-scrollbar-track {
    background: transparent;
}

#code-output::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

#code-output::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.code-output {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Smooth transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

input[type="range"] {
    -webkit-appearance: none;
    background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #22c55e;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #374151;
    border-radius: 2px;
}