:root {
    --visitor-primary: #302a4f;
    --visitor-accent: #f47721;
}

[data-site-theme="green"] {
    --visitor-primary: #11855c;
    --visitor-accent: #f47721;
}

[data-site-theme="blue"] {
    --visitor-primary: #275da8;
    --visitor-accent: #ef7b2d;
}

.visitor-themes {
    display: flex;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 24px;
}

.visitor-themes button {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, #302a4f 55%, #f47721 56%);
    box-shadow: 0 0 0 1px #d8d3df;
    transition: transform .18s ease, box-shadow .18s ease;
}

.visitor-themes [data-site-theme="green"] {
    background: linear-gradient(135deg, #11855c 55%, #f47721 56%);
}

.visitor-themes [data-site-theme="blue"] {
    background: linear-gradient(135deg, #275da8 55%, #ef7b2d 56%);
}

.visitor-themes button:hover {
    transform: scale(1.08);
}

.visitor-themes button.active {
    box-shadow: 0 0 0 2px var(--visitor-primary), 0 0 0 5px #fff;
    transform: scale(1.08);
}

[data-site-theme] .button,
[data-site-theme] .dash-heading button,
[data-site-theme] .mini-brand,
[data-site-theme] .canvas button {
    background: linear-gradient(135deg, var(--visitor-primary), var(--visitor-accent));
}

[data-site-theme] h1 em,
[data-site-theme] .language,
[data-site-theme] .section-heading > span,
[data-site-theme] .section-label {
    color: var(--visitor-primary);
}

[data-site-theme] .brand-mark i,
[data-site-theme] .eyebrow span {
    background: var(--visitor-accent);
}

.site-version {
    text-align: center;
    color: #8f879b;
    font-size: 10px;
    padding: 0 0 18px;
}

@media (max-width: 760px) {
    .visitor-themes {
        display: none;
    }
}