.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

.scanlines {
    background: linear-gradient(hsla(0, 6%, 7%, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, hsla(30, 100%, 50%, 0.06), hsla(280, 100%, 50%, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.grid-overlay {
    background-image: linear-gradient(to right, hsla(25, 95%, 56%, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, hsla(270, 80%, 55%, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.glow-orange {
    filter: drop-shadow(0 0 10px hsla(25, 95%, 56%, 0.5));
}

.glow-purple {
    filter: drop-shadow(0 0 10px hsla(270, 80%, 55%, 0.5));
}

.glass-panel {
    background: rgba(32, 31, 33, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.diagonal-cut {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

html.light .text-black {
    --tw-text-opacity: 1;
    color: rgb(255 255 255);
}