:root {
    --backdrop: rgb(255 255 255 / 0.88);
    --radius: 14;
    --border: 2;
    --backup-border: rgb(254 226 226 / 0.9);
    --size: 220;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    [data-glow], [data-glow]::before, [data-glow]::after { background-image: none !important; }
}

html {
    background: #fafafa;
}

.login-shell {
    background:
        linear-gradient(135deg, rgb(255 255 255 / 0.98), rgb(254 242 242 / 0.96) 48%, rgb(255 255 255 / 0.98)),
        #fafafa;
}

.wrapper {
    --base: 358;
    --spread: 24;
    --saturation: 82;
    --lightness: 54;
    --bg-spot-opacity: 0.06;
    --border-spot-opacity: 0.9;
    --border-light-opacity: 0.55;
    width: 100%;
    max-width: 460px;
    min-width: 0;
}

.logo-lockup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 0.55rem 0;
}


[data-glow] {
    --border-size: calc(var(--border, 2) * 1px);
    --spotlight-size: calc(var(--size, 150) * 1px);
    --hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));
    background-image: radial-gradient(
        var(--spotlight-size) var(--spotlight-size) at
        calc(var(--x, 0) * 1px)
        calc(var(--y, 0) * 1px),
        hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 70) * 1%) / var(--bg-spot-opacity, 0.1)), transparent
    );
    background-color: var(--backdrop, transparent);
    background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
    background-position: 50% 50%;
    background-attachment: fixed;
    border: var(--border-size) solid var(--backup-border);
    position: relative;
    touch-action: auto;
    overflow: hidden;
}

[data-glow]::before,
[data-glow]::after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: calc(var(--border-size) * -1);
    border: var(--border-size) solid transparent;
    border-radius: calc(var(--radius) * 1px);
    background-attachment: fixed;
    background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
    background-repeat: no-repeat;
    background-position: 50% 50%;
    mask:
        linear-gradient(transparent, transparent),
        linear-gradient(white, white);
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
}

/* Emphasis light */
[data-glow]::before {
    background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
        calc(var(--x, 0) * 1px)
        calc(var(--y, 0) * 1px),
        hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) / var(--border-spot-opacity, 1)), transparent 100%
    );
    filter: brightness(2);
}

/* Spotlight */
[data-glow]::after {
    background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
        calc(var(--x, 0) * 1px)
        calc(var(--y, 0) * 1px),
        hsl(0 100% 100% / var(--border-light-opacity, 1)), transparent 100%
    );
}
@media screen and (max-width: 600px) {
    .wrapper {
        max-width: 100%;
        padding: 1.25rem;
    }
}