:root:root,
:root:root .ag {
    --ag-art-veil-dark: url("../images/gate.webp");
    --ag-art-veil-light: url("../images/gate.webp");
    --ag-art-panel-dark: linear-gradient(180deg, rgba(20, 17, 18, 0.94), rgba(10, 9, 9, 0.96));
    --ag-art-panel-light: linear-gradient(180deg, rgba(20, 17, 18, 0.94), rgba(10, 9, 9, 0.96));
}

:root:root .ag__scene {
    background-color: #080707;
    background-image: var(--ag-art-veil-dark);
    background-size: cover;
    background-position: center;
}

:root:root .ag__box {
    background: linear-gradient(180deg, rgba(20, 17, 18, 0.94), rgba(10, 9, 9, 0.96));
    border: 1px solid var(--el-line-strong);
    border-radius: 16px;
    box-shadow: var(--shadow-modal);
}

:root:root .ag__brand,
:root:root .ag__band-link,
:root:root .ag__link {
    font-family: var(--font-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

:root:root .ag__band-link,
:root:root .ag__link {
    color: var(--gold-soft);
}

:root:root .ag {
    --ag-gold: #c3141f;
    --ag-gold-ink: #ff7d86;
    --ag-gold-soft: rgba(195, 20, 31, 0.16);
    --el-line-strong: rgba(195, 20, 31, 0.5);
    --el-line: rgba(195, 20, 31, 0.28);
}

:root:root:has(.ag),
:root:root:has(.ag) body,
:root:root .ag,
:root:root .ag__pane {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

:root:root:has(.ag)::-webkit-scrollbar,
:root:root:has(.ag) body::-webkit-scrollbar,
:root:root .ag::-webkit-scrollbar,
:root:root .ag__pane::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

:root:root .ag__pane {
    padding: 1.1rem 2.5rem;
    background:
        linear-gradient(180deg, rgba(10, 4, 5, 0.82), rgba(10, 4, 5, 0.92)),
        url("../images/bg.webp") center / cover no-repeat;
}

:root:root .ag__main {
    padding: 0.5rem 0;
}

:root:root .ag__brand-img {
    display: block;
    width: auto;
    height: 62px;
    max-width: 220px;
    object-fit: contain;
}

:root:root .ag__band-rule {
    background: linear-gradient(90deg, rgba(195, 20, 31, 0.85), rgba(195, 20, 31, 0.2) 65%, transparent);
}

:root:root .ag__band-link,
:root:root .ag__link {
    color: #ff7d86;
}

:root:root .ag__box {
    border-color: rgba(195, 20, 31, 0.45);
}

:root:root .ag__veil {
    border-left: 1px solid rgba(195, 20, 31, 0.55);
    box-shadow: -1px 0 14px rgba(195, 20, 31, 0.25);
}

:root:root .hb-btn--ember {
    background:
        radial-gradient(ellipse 80% 90% at 50% 130%, rgba(224, 32, 48, var(--hb-heat)), transparent 70%) padding-box,
        linear-gradient(180deg, #1f0d10, #120709) padding-box,
        conic-gradient(from var(--hb-angle), rgba(195, 20, 31, 0.18), #c3141f 14%, #ff6b75 20%, #c3141f 26%, rgba(195, 20, 31, 0.18) 42%, rgba(195, 20, 31, 0.18) 58%, #c3141f 72%, #ff6b75 78%, #c3141f 84%, rgba(195, 20, 31, 0.18)) border-box;
    color: #ffd9dc;
    text-shadow: 0 0 0.875rem rgba(240, 40, 55, 0.45);
    box-shadow: 0 0 0 0.25rem rgba(9, 5, 5, 0.7), 0 0 1.875rem -0.5rem rgba(220, 30, 45, 0.55);
}

:root:root .hb-btn--ember:hover {
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(9, 5, 5, 0.7), 0 0 2.875rem -0.375rem rgba(240, 40, 55, 0.75);
}

:root:root .hb-btn--tab[aria-selected="true"] {
    color: #fff;
}

:root:root .hb-btn:focus-visible {
    outline-color: #ff6b75;
}