:root {
    --splash-bg: #fef7ff;
    --splash-fg: #1d1b20;
    --splash-shape: #eaddff;
    --splash-accent: #6750a4;
}

@media (prefers-color-scheme: dark) {
    :root {
        --splash-bg: #141218;
        --splash-fg: #e6e0e9;
        --splash-shape: #4f378b;
        --splash-accent: #d0bcff;
    }
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--splash-bg);
}

#splash {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: var(--splash-bg);
    color: var(--splash-fg);
    font-family: system-ui, sans-serif;
}

#splash p {
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.4px;
}

.splash-shape {
    width: 72px;
    height: 72px;
    background: var(--splash-shape);
    border: 6px solid var(--splash-accent);
    box-sizing: border-box;
    border-radius: 36%;
    animation: splash-morph 2.4s ease-in-out infinite;
}

@keyframes splash-morph {
    0%   { border-radius: 36%; transform: rotate(0deg); }
    50%  { border-radius: 50%; transform: rotate(180deg) scale(0.9); }
    100% { border-radius: 36%; transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .splash-shape { animation: none; }
}

.noscript {
    position: fixed;
    inset: 0;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: var(--splash-bg);
    color: var(--splash-fg);
    font-family: system-ui, sans-serif;
}