* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: radial-gradient(1200px 600px at 15% 0%, rgba(90,169,255,0.22), transparent 55%),
                radial-gradient(900px 500px at 85% 10%, rgba(60,132,255,0.18), transparent 55%),
                var(--bg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text);
}

a {
    color: var(--brand);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

pre, code {
    color: rgba(255,255,255,0.92);
}

pre {
    background: rgba(0,0,0,0.28);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.header {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
}

.header h1 {
    font-size: 1.5rem;
    letter-spacing: 0.3px;
}

.nav {
    background: rgba(15,26,46,0.7);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 1.5rem;
}

.nav a {
    color: var(--text);
    text-decoration: none;
    margin-right: 0.75rem;
    padding: 0.45rem 0.75rem;
    display: inline-block;
    border-radius: 10px;
}

.nav a:hover {
    background-color: rgba(255,255,255,0.07);
}

.container {
    max-width: 1280px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

.content {
    background: rgba(15,26,46,0.65);
    backdrop-filter: blur(10px);
    padding: 1.25rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}