:root {
  --ink: #19312b;
  --muted: #62746d;
  --paper: #f7f5ed;
  --card: #fffdf7;
  --line: #d9dbce;
  --green: #1c6957;
  --mint: #dff0df;
  --coral: #d8654d;
  --blush: #f9e4dc;
  --sun: #f2c452;
  --shadow: 0 18px 45px rgba(25, 49, 43, .10);
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background:
    radial-gradient(circle at 7% 12%, rgba(242,196,82,.22), transparent 22rem),
    radial-gradient(circle at 96% 92%, rgba(83,158,127,.15), transparent 24rem), var(--paper);
  font-family: Manrope, sans-serif;
}
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.26; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(25,49,43,.025) 3px 4px); }
.shell { position:relative; max-width: 1040px; margin: 0 auto; padding: 26px 24px 64px; }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:18px; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:38px; }
.brand { color:var(--ink); text-decoration:none; font-family:Fraunces,serif; font-size:28px; font-weight:700; letter-spacing:-1.2px; }
.brand em { color:var(--coral); font-weight:600; }
.eyebrow, .meta, .kicker { font-family:"DM Mono",monospace; text-transform:uppercase; letter-spacing:.07em; font-size:11px; color:var(--muted); }
.hero { padding:38px 0 18px; max-width:700px; }
h1, h2, h3, p { margin-top:0; }
h1 { font: 700 clamp(42px, 7vw, 76px)/.98 Fraunces,serif; letter-spacing:-3px; max-width:660px; margin-bottom:22px; }
h2 { font:700 34px/1.04 Fraunces,serif; letter-spacing:-1px; margin-bottom:12px; }
h3 { font:700 19px/1.2 Fraunces,serif; margin-bottom:7px; }
.lead { font-size:18px; line-height:1.65; color:#4e615a; max-width:610px; }
.card { background:rgba(255,253,247,.92); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:4px; padding:28px; }
.login { max-width:520px; margin-top:28px; }
label { display:block; color:var(--ink); font-weight:700; font-size:14px; margin:18px 0 7px; }
input { width:100%; border:1px solid #bfc7b9; background:#fffefa; color:var(--ink); border-radius:3px; padding:13px 14px; font:500 15px Manrope,sans-serif; outline:none; }
input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(28,105,87,.12); }
button { appearance:none; cursor:pointer; border:0; font:700 13px Manrope,sans-serif; letter-spacing:.01em; padding:13px 18px; border-radius:3px; transition:transform .15s, box-shadow .15s, background .15s; }
button:hover { transform:translateY(-1px); }
button:focus-visible, input:focus-visible { outline:3px solid var(--sun); outline-offset:2px; }
.primary { background:var(--green); color:#fff; box-shadow:0 8px 16px rgba(28,105,87,.2); }
.primary:hover { background:#145846; }
.secondary { background:transparent; color:var(--green); border:1px solid #aabfb5; }
.danger { color:#a63b2b; background:var(--blush); }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px; }
.error { color:#9f3325; background:var(--blush); padding:10px 12px; margin-top:14px; border-left:3px solid var(--coral); font-size:14px; }
.dashboard-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:24px; }
.dashboard-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:18px; }
.start-card { background:var(--ink); color:white; border-radius:4px; padding:30px; min-height:230px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow); }
.start-card h2 { color:white; font-size:32px; }
.start-card p { color:#d2e4d9; line-height:1.55; }
.start-card .primary { background:var(--sun); color:#29342b; align-self:flex-start; }
.history { padding:25px; }
.attempts { list-style:none; padding:0; margin:16px 0 0; }
.attempt { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; border-top:1px solid var(--line); padding:14px 0; }
.score { background:var(--mint); color:#195342; border-radius:100px; padding:6px 9px; font:500 12px "DM Mono",monospace; }
.empty { color:var(--muted); line-height:1.6; }
.testbar { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin:0 0 18px; }
.progress { flex:1; max-width:330px; }
.progress-track { height:7px; background:#d9e0d5; overflow:hidden; margin-top:8px; border-radius:9px; }
.progress-fill { height:100%; background:var(--green); transition:width .3s ease; }
.question-card { padding:34px; }
.question { font:700 clamp(23px, 3vw, 31px)/1.22 Fraunces,serif; letter-spacing:-.8px; margin:12px 0 26px; }
.type-note { color:var(--coral); font:500 11px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.option { display:flex; align-items:flex-start; gap:13px; width:100%; text-align:left; color:var(--ink); background:#fffefa; border:1px solid #cfd6c9; padding:15px; margin:9px 0; font-weight:500; }
.option:hover { border-color:var(--green); background:#f5faf4; }
.option.selected { border-color:var(--green); background:var(--mint); box-shadow:inset 4px 0 var(--green); }
.choice { flex:0 0 auto; width:25px; height:25px; display:grid; place-items:center; border-radius:50%; color:var(--green); background:#e7eee6; font:500 12px "DM Mono",monospace; }
.option.selected .choice { background:var(--green); color:#fff; }
.feedback { border-left:4px solid var(--green); background:#eff8f0; padding:17px 18px; margin:22px 0 0; }
.feedback.incorrect { border-color:var(--coral); background:#fff1ec; }
.feedback p { margin:8px 0 0; line-height:1.55; color:#48564f; }
.source-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.source-link { display:inline-block; color:var(--green); background:#fffefa; border:1px solid #a9cabc; padding:8px 10px; border-radius:3px; font:500 12px Manrope,sans-serif; text-decoration:none; }
.source-link:hover { background:var(--mint); }
.choice-explanations { margin-top:18px; padding-top:15px; border-top:1px solid rgba(25,49,43,.15); }
.choice-explanations ul { list-style:none; padding:0; margin:10px 0 0; }
.choice-explanation { display:flex; gap:10px; padding:10px 0; border-top:1px solid rgba(25,49,43,.10); font-size:13px; line-height:1.45; }
.choice-explanation .choice { margin-top:1px; }
.choice-explanation strong { font-size:13px; }
.choice-explanation p { margin:4px 0 0; font-size:13px; }
.choice-explanation.correct-choice strong { color:var(--green); }
.choice-explanation.incorrect-choice strong { color:#a53d2a; }
.question-actions { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:28px; }
.result { max-width:720px; margin:28px auto; text-align:center; }
.result .number { font:700 clamp(68px, 16vw, 120px)/.8 Fraunces,serif; color:var(--green); letter-spacing:-6px; margin:25px 0; }
.result .number span { font-size:32px; letter-spacing:-1px; color:var(--muted); }
.review { margin-top:28px; text-align:left; }
.review-item { padding:16px 0; border-top:1px solid var(--line); }
.review-item strong { display:block; font-family:Fraunces,serif; font-size:17px; }
.review-item p { margin:7px 0 0; color:#52635b; line-height:1.5; font-size:14px; }
.tag { font:500 11px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
.tag.ok { color:var(--green); } .tag.no { color:#a53d2a; }
@media (max-width:720px) {
  .shell { padding:20px 16px 45px; } .masthead { align-items:flex-start; flex-direction:column; margin-bottom:22px; }
  h1 { letter-spacing:-2px; } .dashboard-grid { grid-template-columns:1fr; } .testbar { align-items:flex-start; flex-direction:column; }
  .progress { width:100%; max-width:none; } .question-card, .card { padding:22px; } .question-actions { align-items:stretch; flex-direction:column-reverse; }
  .question-actions button { width:100%; } .result { text-align:left; }
}