.splashscreen {
    /* Splashscreen layout knobs — also consumed by .gallery via cascade. */
    --splash-hero-height: 20vh;
    --splash-padding: var(--space-6);
    --splash-gap: var(--space-6);
    --splash-content-height: calc(100vh - 2 * var(--splash-padding));
    --gallery-height: calc(
        var(--splash-content-height) - var(--splash-hero-height) -
            var(--splash-gap)
    );

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: var(--splash-padding);
    gap: var(--splash-gap);
}

.platforms-section {
    --splash-platforms-height: 3rem;

    display: flex;
    justify-content: center;
    padding: 0 var(--space-6) var(--space-8);
}

.platforms-section-inner {
    width: min(920px, 100%);
}

.splash-platforms {
    flex: 0 0 var(--splash-platforms-height);
    height: var(--splash-platforms-height);
    width: 100%;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0 var(--space-8);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-separator-light);
    border-radius: 9999px;
    box-shadow: var(--shadow-sm);
}

.splash-platform {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--color-text-tertiary);
    opacity: 0.45;
}

.splash-platform-available {
    color: var(--color-text-primary);
    opacity: 1;
}

.splash-platform-icon {
    height: 2rem;
    width: auto;
    flex-shrink: 0;
}

.splash-platform-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.splash-platform-name {
    font-family: var(--font-sans);
    font-size: var(--text-callout);
    font-weight: var(--weight-semibold);
}

.splash-platform-status {
    font-size: var(--text-caption-1);
    color: var(--color-text-secondary);
}

.splash-hero {
    flex: 0 0 var(--splash-hero-height);
    height: var(--splash-hero-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.splash-hero-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-12);
}

.splash-hero-heading {
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
    flex-shrink: 0;
}

.splash-hero-icon {
    height: 96px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.splash-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-1);
    max-width: var(--width-content);
}

.splash-hero-title {
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

.splash-hero-subtitle {
    font-size: 2rem;
    color: var(--color-text-secondary);
    line-height: var(--leading-snug);
    margin: 0;
    max-width: none;
}