:root {
--bg: #000000;
--surface: #0b0b0b;
--text: #ffffff;
--muted: #b3b3b3;
--accent-blue: #2f7cff;
--accent-yellow: #ffd84d;
--border: color-mix(in oklch, var(--text) 15%, transparent);
--radius: 1rem;
--space: clamp(1rem, 4vw, 2rem);
}

* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
line-height: 1.6;
padding: var(--space);
}

main {
max-width: 900px;
margin: auto;
padding: var(--space);
}

h1 {
color: var(--accent-yellow);
margin-bottom: var(--space);
}

button {
background: var(--accent-blue);
color: var(--text);
border: none;
padding: 0.5rem 1rem;
border-radius: 999px;
cursor: pointer;
margin: 0.25rem;
}

button:hover {
transform: translateY(-1px);
box-shadow: 0 6px 15px
    color-mix(in oklch, var(--accent-blue) 30%, transparent);
}

.section {
background: var(--surface);
padding: var(--space);
border-radius: var(--radius);
margin-bottom: var(--space);
}

.quiz-question {
margin-bottom: 1rem;
}

.quiz-options button {
display: block;
width: 100%;
margin-bottom: 0.5rem;
}

.placeholder {
opacity: 0.5;
font-style: italic;
text-align: center;
margin-top: 1rem;
}