@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root { --ink:#191832; --blue:#28274f; --paper:#fdf6ec; --muted:#eee6db; --violet:#8c4cf6; --mint:#2effab; --danger:#ba3158; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 100% 0,#dcd4ff 0,transparent 30rem),var(--paper); font-family:Manrope,Arial,sans-serif; }
button,input,textarea { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--mint); outline-offset:3px; }
.shell { width:min(100% - 2rem, 58rem); margin:auto; padding:clamp(1.25rem,5vw,4rem) 0; }.intro-card,.question-card,.result-card { background:#fffdfa; box-shadow:0 1.5rem 4rem #28274f1a; border:1px solid #e8ded2; border-radius:1.5rem; padding:clamp(1.5rem,5vw,4rem); }.intro-card,.result-card { margin-top:8vh; text-align:center; }
.eyebrow,.meta { color:#554e87; font:700 .72rem 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }.eyebrow { margin:0 0 1rem; } h1,h2 { letter-spacing:-.055em; line-height:1; margin:.25rem 0 1.5rem; } h1 { font-size:clamp(3rem,10vw,6.5rem); } h1 em { color:var(--violet); font-family:'Playfair Display',serif; font-weight:600; } h2 { font-size:clamp(1.8rem,5vw,3.25rem); max-width:18ch; }.lead { font-size:1.1rem; line-height:1.65; max-width:48rem; margin:0 auto 2rem; }.note,.detail { color:#625c74; font-size:.84rem; line-height:1.55; }
.name-field { display:block; max-width:25rem; margin:2rem auto 0; font-weight:800; text-align:left; }.name-field input { display:block; width:100%; margin-top:.5rem; border:1px solid #bcb4d2; border-radius:.8rem; padding:.85rem 1rem; }.mode-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1rem 0 2rem; }.mode-card { text-align:left; border:1px solid #dcd3ff; background:#f4f1ff; padding:1.25rem; border-radius:1rem; color:var(--blue); transition:.2s; }.mode-card:hover { transform:translateY(-.2rem); border-color:var(--violet); }.mode-card strong,.mode-card span { display:block; }.mode-card span { color:#625c74; font-size:.85rem; margin-top:.35rem; }
.game-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }.brand { color:var(--blue); font:800 1.1rem 'DM Mono',monospace; text-decoration:none; }.brand span { color:var(--violet); }.timer,.counter { font:700 .82rem 'DM Mono',monospace; }.timer.urgent { color:var(--danger); }.counter span { color:#70698a; }.question-nav { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:flex-end; margin:-.25rem 0 1rem; }.nav-number { width:2rem; height:2rem; padding:0; border:1px solid #d8d0c5; border-radius:.5rem; color:#70698a; background:#fffdfa; font:700 .75rem 'DM Mono',monospace; }.nav-number.answered { color:#075d3e; border-color:#88d4b5; background:#e6fbf0; }.nav-number.active { color:#fff; border-color:var(--violet); background:var(--violet); box-shadow:0 0 0 3px #8c4cf633; transform:scale(1.08); }.progress { height:.4rem; background:#ded8ee; border-radius:99px; overflow:hidden; margin-bottom:2rem; }.progress i { display:block; height:100%; background:var(--violet); border-radius:inherit; transition:width .25s; }.meta { display:flex; gap:.7rem; }.meta span+span::before { content:'·'; margin-right:.7rem; }
.choices { display:grid; gap:.7rem; }.choice { display:flex; align-items:center; gap:1rem; text-align:left; background:#fff; border:1px solid #ddd5c9; padding:1rem; border-radius:.8rem; color:var(--ink); }.choice:hover,.choice.selected { border-color:var(--violet); background:#f7f4ff; }.choice span { display:grid; place-items:center; min-width:1.7rem; height:1.7rem; border-radius:50%; background:var(--muted); font:700 .75rem 'DM Mono',monospace; }.choice.selected span { background:var(--violet); color:white; } textarea { width:100%; min-height:10rem; border:1px solid #ddd5c9; border-radius:.8rem; padding:1rem; resize:vertical; line-height:1.55; }.actions { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:2rem; }.primary { border:0; border-radius:99px; padding:.9rem 1.25rem; background:var(--violet); color:#fff; font-weight:800; }.primary:hover { background:#7042c8; }.primary:disabled { opacity:.45; cursor:not-allowed; }.text-button { border:0; background:transparent; color:#554e87; text-decoration:underline; padding:.5rem; }.correction { margin-top:1.5rem; padding:1.25rem; border-radius:1rem; background:#e6fbf0; }.correction p { margin:.4rem 0; line-height:1.55; }.self-score { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1rem; }.self-score span { width:100%; font-weight:800; }.self-score button { border:1px solid #badfcf; border-radius:.6rem; background:white; padding:.65rem .8rem; color:#165a41; font-weight:700; }.self-score button.selected { color:#fff; background:#087a51; }.self-score small { display:block; font-size:.65rem; }.result-card h1 span { color:#70698a; font-size:.35em; }.result-copy { max-width:35rem; margin:0 auto 2rem; line-height:1.55; }.corrections-list { display:grid; gap:1rem; text-align:left; }.result-answer { border-top:1px solid #ded8ee; padding-top:1.5rem; }.result-answer h2 { font-size:1.35rem; max-width:none; }.warning { color:#8d4c00; background:#fff6df; padding:.75rem 1rem; border-radius:.75rem; }.email-row { display:flex; gap:.5rem; margin-top:.5rem; }.email-row input { flex:1; border:1px solid #bcb4d2; border-radius:99px; padding:.85rem 1rem; min-width:0; }.result-card form { text-align:left; max-width:34rem; margin:2rem auto; }.result-card label { font-weight:800; }
@media (max-width:600px) { .mode-grid { grid-template-columns:1fr; }.question-card { padding:1.4rem; }.game-header { font-size:.85rem; }.self-score { flex-direction:column; }.email-row { flex-direction:column; }.email-row .primary { width:100%; } }

.ai-feedback { margin-top:1rem; padding:.8rem; border-left:3px solid var(--violet); background:#f7f4ff; line-height:1.55; }