:root {
    --bg: #0f1115;
    --panel: #171a21;
    --text: #e6eaf2;
    --muted: #a7b0c0;
    --accent: #6ea8fe;
    --accent-hover: #8bb9ff;
    --border: #2a3040;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background:
        radial-gradient(1200px 800px at 15% -10%, #1a2030 0%, transparent 60%),
        radial-gradient(900px 700px at 100% 0%, #1a2a3a 0%, transparent 55%),
        var(--bg);
    color: var(--text);
    display: grid;
    place-items: center;
    padding: 24px;
}

main {
    width: min(760px, 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 28px;
}

h1 {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    letter-spacing: 0.3px;
}

p {
    margin: 0 0 20px;
    color: var(--muted);
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

li a {
    display: block;
    text-decoration: none;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

li a:hover,
li a:focus-visible {
    transform: translateY(-1px);
    border-color: var(--accent);
    background: #1b2130;
    outline: none;
}

li a::after {
    content: " →";
    color: var(--accent);
}

footer {
    margin-top: 18px;
    color: var(--muted);
    font-size: 0.9rem;
}