:root:root .ag {
    --ag-serif: 'L2 Philosopher', 'Philosopher', Georgia, serif;
    --ag-sans: 'L2 Sans', 'Segoe UI', system-ui, sans-serif;
    --ag-bg: #06070a;
    --ag-card: #0d1014;
    --ag-card-2: #05060a;
    --ag-line: #1b2028;
    --ag-line-2: #2b313c;
    --ag-ink: #e6dcc4;
    --ag-ink-2: #bdb9ac;
    --ag-muted: #7f7869;
    --ag-gold: #c9a24a;
    --ag-gold-ink: #f1d88a;
    --ag-gold-soft: rgba(201, 162, 74, .16);
    --ag-glass: rgba(5, 6, 10, .72);
    --ag-glass-hover: rgba(22, 26, 33, .92);
    --ag-card-opacity: .97;
    --ag-danger: #d9483f;
    --ag-danger-soft: rgba(217, 72, 63, .16);
    --ag-ok: #4fae6c;
    --ag-night: #06070a;
    --ag-night-ink: #e6dcc4;
    --ag-art-panel-light: var(--l2-noise);
    --ag-art-panel-dark: var(--l2-noise);
    --ag-art-veil-light: var(--l2-noise);
    --ag-art-veil-dark: var(--l2-noise);
}

:root:root .ag::before {
    background-color: #06070a;
    background-image:
        radial-gradient(ellipse 80% 55% at 50% -10%, rgba(201, 162, 74, .1), transparent 70%),
        radial-gradient(ellipse 120% 80% at 50% 125%, rgba(0, 0, 0, .8), transparent 62%),
        var(--l2-noise);
    background-size: auto, auto, auto;
    background-repeat: no-repeat, no-repeat, repeat;
}

:root:root .ag__box {
    border: 0;
    opacity: var(--ag-card-opacity);
    background: linear-gradient(180deg, #171c24 0%, #0b0e12 100%);
    box-shadow: var(--shadow-modal);
}

:root:root .ag__box::before {
    inset: .3125rem;
    border: .0625rem solid rgba(201, 162, 74, .2);
}

:root:root .ag__box::after {
    content: "";
    position: absolute;
    inset: -.4375rem;
    z-index: 11;
    pointer-events: none;
    background:
        var(--l2-stud) left top / .75rem .75rem no-repeat,
        var(--l2-stud) right top / .75rem .75rem no-repeat,
        var(--l2-stud) left bottom / .75rem .75rem no-repeat,
        var(--l2-stud) right bottom / .75rem .75rem no-repeat;
}

:root:root .ag .c-login__logo {
    color: #ecd28b;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-shadow: 0 .0625rem 0 #000, 0 0 1rem rgba(201, 162, 74, .3);
}

:root:root .ag .c-login__subtitle {
    color: var(--stone-600);
    font-family: var(--font-body);
}

:root:root .ag__link {
    font-family: var(--font-heading);
    font-weight: 700;
}

:root:root .ag__link:hover {
    color: #f6e4ae;
}

:root:root .ag__back {
    border-radius: 0;
    backdrop-filter: none;
    background: var(--l2-metal);
    font-family: var(--font-heading);
    letter-spacing: .06em;
    box-shadow:
        inset 0 .0625rem 0 rgba(255, 255, 255, .12),
        0 0 0 .0625rem #000,
        0 0 0 .125rem var(--l2-steel);
}

:root:root .ag__back svg {
    border-radius: 0;
}

:root:root .ag__back:hover {
    background: var(--l2-metal-hi);
    box-shadow:
        inset 0 .0625rem 0 rgba(255, 255, 255, .18),
        0 0 0 .0625rem #000,
        0 0 0 .125rem var(--gold-dark);
}

:root:root .ag__stage {
    background-color: #06070a;
}

:root:root .ag__scene {
    --l2-emblem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='1.2'%3E%3Ccircle cx='200' cy='200' r='190' stroke-opacity='.4'/%3E%3Ccircle cx='200' cy='200' r='172' stroke-opacity='.25' stroke-dasharray='2 9'/%3E%3Ccircle cx='200' cy='200' r='128' stroke-opacity='.3'/%3E%3Cpath d='M200 70 330 200 200 330 70 200Z' stroke-opacity='.35'/%3E%3Cpath d='M200 14 216 184 386 200 216 216 200 386 184 216 14 200 184 184Z' stroke-opacity='.6' fill='%23c9a24a' fill-opacity='.06'/%3E%3Cpath d='M200 150 250 200 200 250 150 200Z' stroke-opacity='.7' fill='%23c9a24a' fill-opacity='.1'/%3E%3C/g%3E%3C/svg%3E");
    background-color: #06070a;
    background-image:
        var(--l2-emblem),
        var(--l2-emblem),
        radial-gradient(ellipse 36% 52% at 75% 44%, rgba(201, 162, 74, .2), transparent 70%),
        radial-gradient(ellipse 36% 52% at 25% 44%, rgba(201, 162, 74, .2), transparent 70%),
        radial-gradient(ellipse 60% 90% at 75% 50%, transparent 40%, rgba(0, 0, 0, .85) 100%),
        radial-gradient(ellipse 60% 90% at 25% 50%, transparent 40%, rgba(0, 0, 0, .85) 100%),
        var(--l2-noise);
    background-size: 34rem 34rem, 34rem 34rem, auto, auto, auto, auto, auto;
    background-position: calc(75% - 17rem) 36%, calc(25% - 17rem) 36%, 0 0, 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

:root:root .ag__seam {
    background:
        linear-gradient(180deg, transparent, #c9a24a 24%, #f1d88a 50%, #c9a24a 76%, transparent) center / .125rem 100% no-repeat,
        linear-gradient(180deg, transparent 12%, rgba(201, 162, 74, .55) 50%, transparent 88%) calc(50% - .3125rem) 0 / .0625rem 100% no-repeat,
        linear-gradient(180deg, transparent 12%, rgba(201, 162, 74, .55) 50%, transparent 88%) calc(50% + .3125rem) 0 / .0625rem 100% no-repeat;
}

:root:root .ag__seam::after {
    width: .5rem;
    height: .5rem;
    background: var(--gold-soft);
    transform: rotate(45deg);
    box-shadow: 0 0 0 .125rem #000, 0 0 .75rem rgba(201, 162, 74, .7);
}

:root:root .ag__brand {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: .18em;
    color: #ecd28b;
    text-shadow: 0 .0625rem 0 #000;
}

:root:root .ag__band-rule {
    background: linear-gradient(90deg, rgba(201, 162, 74, .9), rgba(201, 162, 74, .2) 65%, transparent);
}

:root:root .ag__band-copy h2 {
    color: #ecd28b;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 .125rem 0 #000, 0 0 1.5rem rgba(201, 162, 74, .35);
}

:root:root .ag__band-copy p {
    color: var(--stone-700);
}

:root:root .ag .ag__band-link {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--stone-700);
}

:root:root .ag .ag__band-link:hover {
    color: #f6e4ae;
}

:root:root .ag__signup {
    border-radius: 0;
    background: linear-gradient(180deg, #171c24, #0b0e12);
    box-shadow: inset 0 .0625rem 0 rgba(255, 255, 255, .06), 0 0 0 .0625rem #000, 0 0 0 .125rem var(--l2-steel);
}

:root:root .ag__signup-icon {
    border-radius: 0;
}

:root:root .ag__signup-title {
    color: #ecd28b;
    font-family: var(--font-heading);
    font-weight: 700;
}

:root:root .ag .c-field__input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 2.5rem #05060a inset;
    -webkit-text-fill-color: #e6dcc4;
    caret-color: #e6dcc4;
}