:root{
  --bg:#F5FAF6; --surface:#FFFFFF; --ink:#0B0F0D; --ink-soft:#4B5563;
  --green:#22C55E; --green-dark:#15803D; --green-pale:#DCFCE7; --green-mid:#86EFAC;
  --line:rgba(11,15,13,0.10); --line-strong:rgba(11,15,13,0.18);
  --radius:16px; --shadow:0 1px 2px rgba(11,15,13,.05), 0 10px 28px rgba(11,15,13,.08);
}
/* Quick-answer box — written to be directly extractable by AI
   chat assistants and search "answer boxes" alike. */
.quick-answer{background:var(--ink); color:#fff; border-radius:16px; padding:22px 26px; margin:24px 0;}
.quick-answer h2{color:#fff; font-size:1.15rem; margin:0 0 8px; font-family:'Inter'; font-weight:700; text-transform:uppercase; letter-spacing:.03em;}
.quick-answer p{color:var(--green-mid); margin-bottom:0; font-size:.95rem;}
 
.callout{background:var(--green-pale); border:1px solid var(--green-mid); border-radius:12px; padding:18px 20px; margin:20px 0; font-size:.94rem;}
.callout p{color:var(--green-dark); margin-bottom:0;}
.callout strong{color:var(--ink);}

/* ===== Quiz widget ===== */
.quiz-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:32px; box-shadow:var(--shadow); margin:28px 0;}
.quiz-progress{height:6px; background:var(--line); border-radius:99px; overflow:hidden; margin-bottom:24px;}
.quiz-progress span{display:block; height:100%; background:var(--green); border-radius:99px; transition:width .3s ease; width:14.28%;}
.quiz-step-label{font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--green-dark); margin-bottom:8px;}
.quiz-question{font-size:1.25rem; margin-bottom:18px;}
.quiz-options{display:flex; flex-direction:column; gap:10px; margin-bottom:24px;}
.quiz-option{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border:1.5px solid var(--line-strong); border-radius:12px; cursor:pointer; transition:.15s;
  background:var(--bg); font-size:.95rem;
}
.quiz-option:hover{border-color:var(--green);}
.quiz-option.selected{border-color:var(--green); background:var(--green-pale); font-weight:600;}
.quiz-option input{accent-color:var(--green);}
.quiz-nav{display:flex; justify-content:space-between; gap:10px;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:999px; font-weight:700; font-size:.9rem; border:1px solid transparent; cursor:pointer; transition:.15s;}
.btn:hover{transform:translateY(-1px);}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none;}
.btn-primary{background:var(--ink); color:var(--green-mid);}
.btn-accent{background:var(--green); color:var(--ink);}
.btn-ghost{background:transparent; border-color:var(--line-strong); color:var(--ink);}
 
.quiz-result{display:none; text-align:center;}
.quiz-result.show{display:block;}
.result-shape{font-family:'Fraunces',serif; font-size:2.4rem; color:var(--green-dark); margin-bottom:6px;}
.result-second{font-size:.9rem; color:var(--ink-soft); margin-bottom:18px;}
.score-bars{text-align:left; margin:22px 0;}
.score-row{display:flex; align-items:center; gap:10px; font-size:.82rem; margin-bottom:7px;}
.score-row span:first-child{width:70px; flex-shrink:0;}
.score-track{flex:1; height:7px; background:var(--line); border-radius:99px; overflow:hidden;}
.score-track span{display:block; height:100%; background:var(--green); border-radius:99px;}
.score-row .mono{width:32px; text-align:right; flex-shrink:0;}