:root {
    color-scheme: light;
    --ink: #172554;
    --muted: #64748b;
    --card: rgba(255, 255, 255, 0.88);
    --accent: #7c3aed;
    --accent-light: #ddd6fe;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 2rem;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, #bfdbfe 0, transparent 32rem),
        radial-gradient(circle at bottom right, #ddd6fe 0, transparent 30rem),
        #f8fafc;
}

.welcome-card {
    width: min(100%, 42rem);
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 7vw, 4.5rem);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 1.5rem;
    background: var(--card);
    box-shadow: 0 1.5rem 4rem rgba(30, 41, 59, 0.16);
    backdrop-filter: blur(12px);
}

.welcome-card::before {
    content: "";
    width: 11rem;
    height: 11rem;
    position: absolute;
    top: -5.5rem;
    right: -4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-light), #93c5fd);
    opacity: 0.75;
}

.eyebrow {
    margin: 0 0 0.75rem;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1 {
    max-width: 26rem;
    margin: 0;
    font-size: clamp(2.25rem, 7vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -0.055em;
}

.subject {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1.5rem 0 0;
    padding: 0.8rem 1rem;
    border-radius: 0.85rem;
    color: var(--muted);
    font-size: 1.1rem;
    background: #f8fafc;
}

.subject strong {
    color: var(--ink);
}

.sparkle {
    color: var(--accent);
    font-size: 1.25rem;
}