:root {
    --bg-1: #f8efe4;
    --bg-2: #f3dcc7;
    --ink: #212322;
    --ink-soft: #4b4f4d;
    --accent: #dd5f2c;
    --accent-soft: #ffc98a;
    --surface: rgba(255, 252, 248, 0.82);
    --surface-border: rgba(46, 42, 36, 0.14);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: 'Space Grotesk', 'Avenir Next', 'Segoe UI', sans-serif;
    color: var(--ink);
    background: linear-gradient(145deg, var(--bg-1), var(--bg-2));
}

.page {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    overflow: hidden;
}

.card {
    width: min(720px, 100%);
    border: 1px solid var(--surface-border);
    border-radius: 22px;
    background: var(--surface);
    backdrop-filter: blur(8px);
    box-shadow: 0 28px 58px rgba(88, 61, 33, 0.14);
    padding: clamp(1.6rem, 4vw, 3rem);
    animation: rise 650ms ease-out both;
}

.status {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
    color: var(--ink-soft);
}

h1 {
    margin: 0;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1;
}

.message {
    margin: 1rem 0 0;
    font-size: clamp(1rem, 2.3vw, 1.2rem);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 34ch;
}

.signature {
    margin: 1.8rem 0 0;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--accent);
}

.orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(42px);
    opacity: 0.58;
    pointer-events: none;
}

.orb-a {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle at 35% 35%, #ffe29c 0%, #e48f52 60%, transparent 75%);
    top: -60px;
    left: -70px;
    animation: drift 12s ease-in-out infinite;
}

.orb-b {
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at 30% 30%, #bde2cc 0%, #5fbb98 58%, transparent 78%);
    right: -100px;
    bottom: -80px;
    animation: drift 14s ease-in-out infinite reverse;
}

@keyframes rise {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes drift {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -14px, 0);
    }
}

@media (max-width: 640px) {
    .card {
        border-radius: 18px;
    }

    .message {
        max-width: none;
    }
}