:root {
    --site-panel-line: rgba(255, 255, 255, 0.15);
    --site-panel-background: rgba(59, 64, 77, 0.68);
    --site-panel-accent: rgba(79, 212, 238, 0.045);
    --site-card-background: rgba(51, 56, 67, 0.68);
    --site-panel-shadow: inset 0 0 0 1px var(--site-panel-line), 0 12px 30px rgba(0, 0, 0, 0.12);
}

:root[data-theme="dark"] {
    --site-panel-line: rgba(255, 255, 255, 0.11);
    --site-panel-background: rgba(25, 29, 37, 0.86);
    --site-panel-accent: rgba(79, 212, 238, 0.026);
    --site-card-background: rgba(18, 22, 29, 0.84);
    --site-panel-shadow: inset 0 0 0 1px var(--site-panel-line), 0 14px 34px rgba(0, 0, 0, 0.24);
}

.site-panel {
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, var(--site-panel-accent), transparent 30%),
        var(--site-panel-background);
    background-clip: padding-box;
    box-shadow: var(--site-panel-shadow);
    backdrop-filter: blur(8px);
}

@media (max-width: 767.98px) {
    .site-panel {
        --site-panel-shadow: inset 0 0 0 1px var(--site-panel-line), 0 8px 22px rgba(0, 0, 0, 0.1);
    }
}