:root {
    color-scheme: dark;
    --home-background: #0c100e;
    --home-ink: #131815;
    --home-paper: #f7f8f6;
    --home-muted: #555e58;
    --home-accent: #69e58c;
}

* { box-sizing: border-box; }

html {
    min-height: 100%;
    background: var(--home-background);
}

body {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    color: var(--home-ink);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background:
        radial-gradient(circle at 82% 16%, rgba(105, 229, 140, .075), transparent 23rem),
        radial-gradient(circle at 16% 88%, rgba(255, 255, 255, .045), transparent 28rem),
        var(--home-background);
}

.home-shell {
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(1rem, 4vw, 4rem);
    place-items: center;
}

.home-card {
    position: relative;
    width: min(100%, 52rem);
    padding: clamp(1.35rem, 5vw, 4rem);
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 1.5rem .65rem 1.5rem .65rem;
    background: linear-gradient(145deg, #fff 0%, var(--home-paper) 72%);
    box-shadow:
        0 1.4rem 4.5rem rgba(0, 0, 0, .34),
        0 0 0 1px rgba(255, 255, 255, .06);
}

.home-card::before {
    position: absolute;
    top: -1px;
    right: clamp(1.4rem, 7vw, 4rem);
    width: clamp(2.25rem, 10vw, 5rem);
    height: 1px;
    content: "";
    pointer-events: none;
    background: var(--home-accent);
}

.home-mark {
    display: block;
    width: clamp(2.1rem, 6vw, 3rem);
    height: .28rem;
    margin-bottom: clamp(1.35rem, 4vw, 2.5rem);
    border-radius: 999px;
    background: var(--home-accent);
    box-shadow: 0 0 .9rem rgba(105, 229, 140, .35);
}

.home-card h1 {
    margin: 0 0 clamp(1rem, 2.6vw, 1.65rem);
    font-size: clamp(1.45rem, 5.2vw, 4rem);
    font-weight: 760;
    letter-spacing: -.065em;
    line-height: 1.08;
    white-space: nowrap;
}

.home-card p {
    max-width: 36rem;
    margin: 0;
    color: var(--home-muted);
    font-size: clamp(.96rem, 1.6vw, 1.16rem);
    line-height: 1.65;
}