:root { --blue:#155eef; --ink:#10233e; --muted:#60728b; --line:#d8e2f0; --green:#087b58; } * { box-sizing:border-box; } body { margin:0; background:#f6f9fd; color:var(--ink); font:16px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; } button,input { font:inherit; } button { cursor:pointer; } .shell { width:min(100%,720px); min-height:100vh; margin:0 auto; padding:90px 22px; } .hidden { display:none!important; } .intro { max-width:450px; margin:0 auto; padding-top:10vh; } h1 { margin:0 0 32px; font-size:clamp(34px,7vw,52px); line-height:1.08; letter-spacing:-.05em; } label { display:block; margin-bottom:8px; font-size:14px; font-weight:750; } input { width:100%; padding:14px 15px; border:1px solid #c7d4e6; border-radius:10px; outline:none; color:var(--ink); background:#fff; } input:focus { border-color:var(--blue); box-shadow:0 0 0 3px #dce9ff; } .button { min-height:48px; padding:0 18px; border:1px solid var(--blue); border-radius:10px; color:#fff; background:var(--blue); font-weight:750; } .intro .button { width:100%; margin-top:15px; } .button:hover:not(:disabled) { background:#0d48bd; border-color:#0d48bd; } .button:disabled { cursor:not-allowed; opacity:.4; } .button.secondary { color:#33516f; border-color:#c9d6e7; background:#fff; } .button.secondary:hover:not(:disabled) { color:var(--blue); border-color:var(--blue); background:#fff; } .error { margin:8px 0 0; color:#ba2424; font-size:13px; } .counter { margin:0 0 10px; color:#5b7598; font-size:14px; font-weight:750; } .progress-track { height:6px; overflow:hidden; border-radius:8px; background:#dce7f5; } .progress-track div { height:100%; border-radius:inherit; background:var(--blue); transition:width .2s ease; } .question-card { min-height:420px; padding:38px 0 12px; } .question-card h2 { margin:0; font-size:clamp(27px,5vw,39px); line-height:1.14; letter-spacing:-.035em; } .question-card pre { margin:22px 0; padding:17px; overflow:auto; border-radius:10px; background:#10233e; color:#eff5ff; font:14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; } .answers { display:grid; gap:10px; margin-top:30px; } .answer { display:flex; align-items:center; gap:12px; width:100%; padding:14px; border:1px solid var(--line); border-radius:10px; color:#243b58; text-align:left; background:#fff; } .answer:hover { border-color:#8eb5fb; } .answer.selected { border-color:var(--blue); outline:2px solid #dae8ff; color:#0d48bd; background:#f1f6ff; } .answer span { display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; border-radius:50%; color:#526f93; background:#edf2f8; font-size:13px; font-weight:800; } .answer.selected span { color:#fff; background:var(--blue); } .quiz-actions { display:flex; justify-content:space-between; gap:10px; } .weak-heading { margin:37px 0 13px; font-size:23px; letter-spacing:-.025em; } .score { display:flex; align-items:baseline; gap:8px; margin:10px 0; } .score strong { color:var(--blue); font-size:72px; line-height:1; letter-spacing:-.06em; } .score span { color:#789; font-weight:700; } .topic-results { display:grid; gap:8px; } .topic { display:flex; justify-content:space-between; align-items:center; padding:14px; border-left:4px solid #e6a925; border-radius:8px; background:#fff; } .topic.strong { border-left-color:#1ca16d; } .topic strong { font-size:18px; } .save-status { min-height:21px; margin:22px 0 12px; color:var(--muted); font-size:14px; } #result > .button { width:100%; } @media (max-width:560px) { .shell { padding:53px 16px 36px; } .intro { padding-top:9vh; } .question-card { min-height:440px; padding-top:31px; } .question-card h2 { font-size:29px; } }