html[data-intro-state] {
    overflow: hidden;
}

.site-intro {
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: #02060c;
    overflow: hidden;
    overscroll-behavior: contain;
}

html[data-intro-state] .site-intro[hidden] {
    display: block;
}

.site-intro canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.site-intro__skip {
    position: absolute;
    right: max(1.5rem, env(safe-area-inset-right));
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    padding: 0.65rem 1rem;
    border: 1px solid rgba(139, 180, 222, 0.45);
    border-radius: 0.25rem;
    background: #0a1625;
    color: #e8f1fa;
    font: inherit;
    cursor: pointer;
}

.site-intro__skip:hover,
.site-intro__skip:focus-visible {
    border-color: #8dc8ff;
    outline: 2px solid #8dc8ff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html[data-intro-state] .site-intro[hidden] {
        display: none;
    }
}