:root {
    --page-background: #000000;
    --viewport-padding: 16px;
    --intro-base-size: min(calc(100vw - 32px), calc(100vh - 32px));
    --ring-size: calc(var(--intro-base-size) * 0.6);
    --logo-ratio: 0.745;
    background: var(--page-background);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: hidden;
    background: var(--page-background);
}

body {
    position: fixed;
    inset: 0;
}

.splash {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--page-background);
}

.intro-composition {
    position: relative;
    width: var(--ring-size);
    height: var(--ring-size);
}

.intro-ring,
.intro-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transform: translate(-50%, -50%);
}

.intro-ring {
    z-index: 1;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

.intro-logo {
    z-index: 2;
    width: calc(var(--ring-size) * var(--logo-ratio));
    height: calc(var(--ring-size) * var(--logo-ratio));
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .intro-ring {
        display: none;
    }
}