@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
:root { --ink:#17233d; --muted:#69738b; --paper:#f6f8fc; --white:#fff; --blue:#3859e8; --blue-dark:#263db4; --mint:#d9f6e8; --green:#15845b; --rose:#fff0f0; --red:#bd3d4b; --line:#e5eaf4; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--paper); color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif; }
.shell { width:min(860px,calc(100% - 32px)); margin:0 auto; padding:42px 0 70px; }
.hero { padding:18px 4px 34px; }
.badge,.eyebrow { color:var(--blue); font:500 11px 'DM Mono',monospace; letter-spacing:.13em; }
.badge { display:inline-block; background:#e8edff; border-radius:99px; padding:9px 13px; }
h1 { max-width:650px; margin:18px 0 12px; font-size:clamp(36px,7vw,64px); line-height:1.02; letter-spacing:-.055em; }
.hero p { max-width:570px; margin:0; color:var(--muted); line-height:1.7; }
.card { background:var(--white); border:1px solid var(--line); border-radius:20px; box-shadow:0 12px 32px rgba(32,53,112,.06); }
.progress-card { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; margin-bottom:18px; }
h2 { margin:5px 0 0; font-size:20px; letter-spacing:-.025em; }
.score { color:var(--blue); font-weight:700; }
.quiz { display:grid; gap:18px; }
.question-card { padding:25px; }
.question-heading { display:flex; align-items:center; gap:13px; }
.question-number { display:grid; place-items:center; width:35px; height:35px; border-radius:11px; background:var(--ink); color:white; font-weight:800; }
.equations { display:grid; gap:8px; margin:23px 0; padding:18px; border-radius:13px; background:#f2f5ff; color:var(--blue-dark); font:500 20px 'DM Mono',monospace; }
.answer-row { display:flex; gap:14px; }
label { display:grid; gap:8px; color:var(--muted); font-weight:700; }
input { width:120px; border:2px solid var(--line); border-radius:10px; padding:11px 12px; color:var(--ink); font:600 18px 'DM Mono',monospace; outline:none; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 4px #e8edff; }
.feedback { margin-top:18px; line-height:1.6; }
.feedback:empty { display:none; }
.feedback.correct,.feedback.incorrect { padding:13px 15px; border-radius:11px; }
.feedback.correct { background:var(--mint); color:var(--green); }
.feedback.incorrect { background:var(--rose); color:var(--red); }
.breakdown { display:block; margin-top:5px; font-size:13px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:5px; }
button { border:0; border-radius:11px; padding:14px 19px; font:700 14px 'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:transform .15s,background .15s; }
button:hover { transform:translateY(-2px); }
.primary-button { background:var(--blue); color:white; }
.primary-button:hover { background:var(--blue-dark); }
.secondary-button { background:#e9edf6; color:var(--ink); }
.encouragement { min-height:24px; margin:23px 4px 0; color:var(--muted); font-weight:600; }
@media (max-width:520px) { .shell { padding-top:20px; } .progress-card { align-items:flex-start; gap:10px; flex-direction:column; } .question-card { padding:19px; } .equations { font-size:16px; overflow-x:auto; } }