@import url('https://db.onlinewebfonts.com/c/d7a74ed36ff0603a3e41b6da32c47f03?family=Ndot+57+Aligned');

:root {
    color-scheme: dark;
    --bg: #000000;
    --surface: rgba(255,255,255,0.03);
    --surface-strong: rgba(255,255,255,0.08);
    --text: #f5f5f5;
    --muted: #c1c1c1;
    --border: rgba(255,255,255,0.14);
    --button-bg: rgba(255,255,255,0.05);
    --button-hover: rgba(255,255,255,0.1);
    --button-border: rgba(255,255,255,0.14);
    --button-text: #ffffff;
    --grid-dot-color: rgba(255,255,255,0.98);
    --grid-dot-size: 1.4px;
    --grid-size: 88px;
    --grid-overlay-opacity: 0.85;
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --bg: #f6f6f6;
        --surface: rgba(0,0,0,0.04);
        --surface-strong: rgba(0,0,0,0.08);
        --text: #0f0f0f;
        --muted: #4f4f4f;
        --border: rgba(0,0,0,0.12);
        --button-bg: rgba(0,0,0,0.06);
        --button-hover: rgba(0,0,0,0.1);
        --button-border: rgba(0,0,0,0.14);
        --button-text: #0f0f0f;
        --grid-dot-color: rgba(0,0,0,0.9);
        --grid-overlay-opacity: 1;
    }

    .grid-overlay {
        background-image: radial-gradient(circle, var(--grid-dot-color) 1.4px, transparent 1.4px);
        opacity: var(--grid-overlay-opacity);
    }
}

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Ndot 57 Aligned', 'NDot57', 'Arial Narrow', Arial, sans-serif;
}

body {
    position: relative;
    overflow: hidden;
}

.grid-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-color: transparent;
    background-image: radial-gradient(circle, var(--grid-dot-color) var(--grid-dot-size), transparent var(--grid-dot-size));
    background-size: var(--grid-size) var(--grid-size);
    background-position: center center;
    background-attachment: fixed;
    opacity: var(--grid-overlay-opacity);
}

.container {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 36px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
}

h1 {
    align-self: center;
    width: auto;
    margin: 0;
    font-size: clamp(28px, 6vw, 46px);
    line-height: 1.04;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

button {
    margin: 0;
    padding: 12px 40px;
    border: 1px solid var(--button-border);
    border-radius: 999px;
    background: var(--button-bg);
    color: var(--button-text);
    font-size: 16px;
    font-family: inherit;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    outline: none;
}

@media (prefers-color-scheme: light) {
    .container {
        box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 28px 80px rgba(0,0,0,0.14);
    }
}

.eyebrow {
    position: absolute;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--muted);
}

#status {
    margin: 0 auto;
    max-width: 360px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
    letter-spacing: 0.02em;
    text-align: center;
}

button:hover {
    background: var(--button-hover);
    border-color: var(--button-border);
    transform: translateY(-1px);
}

button:focus {
    outline: none;
}

button:disabled {
    opacity: 0.6;
    cursor: wait;
}

@media (prefers-color-scheme: dark) {
    .container {
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 24px 72px rgba(255,255,255,0.05);
    }

    button {
        box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
    }
}