body {
    height: 100dvh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-color: #2f2837;
    font-family: sans-serif;
}

.unaeh-button {
    --width: min(75dvw, 75dvh);
    --color: #af1212;
    --radius: 50%;
    --elevation: 5px;
    --bevel: calc(min(75dvw, 75dvh) * 0.02);
    --angle: 225deg;
    --intensity: 75;
    --diffusion: 15;

    --sin: calc(sin(var(--angle)));
    --cos: calc(cos(var(--angle)));
    --x-displacement: calc(-1 * var(--cos) * (var(--elevation) + 1px));
    --y-displacement: calc(-1 * var(--sin) * (var(--elevation) + 1px));
    --edge-opacity: calc(var(--intensity) * 0.006 - var(--diffusion) * 0.002);
    --edge-blur: calc(var(--bevel) * 1.5);
    --surface-contrast: calc(var(--intensity) * 0.01 - var(--diffusion) * 0.005);

    font-size: calc(var(--width) * 0.2);
    font-weight: bold;
    color: #e0e0e0;
    width: var(--width);
    aspect-ratio: 1;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    background: linear-gradient(
            calc(var(--angle) + 90deg),
            rgba(0, 0, 0, var(--surface-contrast)),
            rgba(255, 255, 255, var(--surface-contrast))
        ),
        var(--color);
    background-blend-mode: soft-light;
    box-shadow:
        var(--x-displacement) var(--y-displacement) calc(var(--diffusion) * 0.3px + var(--elevation)) calc(var(--elevation) / 2) rgba(0, 0, 0, calc(var(--intensity) * 0.006)),
        inset calc(var(--bevel) * -1) 0 var(--edge-blur) hsla(100, 0%, calc((var(--cos) + 1) * 50%), var(--edge-opacity)),
        inset 0 var(--bevel) var(--edge-blur) hsla(100, 0%, calc((-1 * var(--sin) + 1) * 50%), var(--edge-opacity)),
        inset var(--bevel) 0 var(--edge-blur) hsla(100, 0%, calc((-1 * var(--cos) + 1) * 50%), var(--edge-opacity)),
        inset 0 calc(var(--bevel) * -1) var(--edge-blur) hsla(100, 0%, calc((var(--sin) + 1) * 50%), var(--edge-opacity));
    transition: all 200ms;
}

.unaeh-button:active {
    --color: #8f0c0c;
    --elevation: 2px;
    --intensity: 50;

    color: #aaa;
    width: calc(var(--width) - 8px);
    font-size: calc(var(--width) * 0.2 - 2px);
}

#switcher {
    position: fixed;
    top: 1.5rem;
    left: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    z-index: 100;
    transition: background 200ms, color 200ms;
}

#switcher:hover {
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
}

.screen {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
}

.screen.active {
    display: flex;
}

#dvd-text {
    position: absolute;
    font-size: 3.5rem;
    font-weight: bold;
    user-select: none;
    cursor: default;
    white-space: nowrap;
}

@media (min-width: 600px) {
    #dvd-text {
        font-size: 5rem;
    }
}

#level-control {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.1rem;
    height: 3rem;
    border-radius: 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    z-index: 10;
    white-space: nowrap;
}

#unaeh-level {
    width: 8rem;
    cursor: pointer;
}