:root { color-scheme: light dark; }

html, body { height: 100%; }

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    margin: 0;
    display: grid;
    place-items: center;
    background: #0b0b14;
    color: #fff;
}

h1 { font-size: 2.5rem; margin: 0 0 8px; letter-spacing: -.02em; }

a { 
    color: #8B5CF6;
    text-decoration: none;
}

a:hover { 
    text-decoration: underline; 
    color: #9333EA;
}

code.url { 
    display: block; 
    word-break: break-all; 
    padding: 12px; 
    border-radius: 10px; 
    background: rgba(0,0,0,.35); 
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
    font-size: .9rem; 
    margin-top: 12px;
}

ul { 
    margin: 0 0 0 18px; 
    line-height: 1.6; 
}

.logo { 
    width: 220px; 
    height: auto; 
    margin: 0 0 24px; 
    border-radius: 16px; 
    box-shadow: 0 16px 32px rgba(0,0,0,.35); 
    margin-top: 24px;
}

.container { 
    text-align: center; 
    padding: 40px 20px; 
    max-width: 760px; 
    margin: 0 auto;
}

.tagline { 
    opacity: .8; 
    margin: 0 0 28px; 
    font-size: 1.2rem;
}

.card { 
    background: rgba(255,255,255,.06); 
    border: 1px solid rgba(255,255,255,.12); 
    border-radius: 16px; 
    padding: 24px; 
    text-align: left; 
    margin-top: 24px;
}

.actions { 
    display: flex; 
    gap: 12px; 
    flex-wrap: wrap; 
    margin: 12px 0 8px; 
}

.btn { 
    display: inline-block; 
    padding: 10px 14px; 
    border-radius: 10px; 
    border: 1px solid rgba(255,255,255,.18); 
    background: rgba(255,255,255,.06); 
    color: #fff; 
}

.btn:hover { 
    background: rgba(255,255,255,.1); 
    text-decoration: none; 
}

.btn-primary { 
    background: #8B5CF6; 
    border-color: #8B5CF6; 
    color: #fff; 
}

.btn-primary:hover { 
    filter: brightness(1.05); 
}

.small { 
    opacity: .8; 
    font-size: .9rem; 
}