.widget-root { max-width: 760px; margin-inline: auto; padding: 10px 4px; }
h2, h3 { line-height: 1.25; margin: .35rem 0 .8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
p { margin: .65rem 0; }
.eyebrow { color: var(--ink2); font-size: .8rem; font-weight: 650; letter-spacing: .025em; }
.scoreboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0; }
.scoreboard p { margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; line-height: 1.35; }
.scoreboard strong { display: block; font-size: 1.3rem; color: var(--ink); }
.scoreboard span { display: block; font-size: .8rem; color: var(--ink2); }
fieldset { padding: 0; margin: 0 0 14px; border: 0; min-width: 0; }
legend, .numeric-label { font-weight: 600; margin-bottom: 8px; }
.choice { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-radius: 5px; margin: 8px 0; padding: 12px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--amber); background: var(--color-background-info); }
.choice input { flex: 0 0 auto; margin: 5px 0 0; accent-color: var(--amber); }
.choice span { min-width: 0; }
.numeric-label { display: block; }
input[type="text"] { display: block; box-sizing: border-box; width: 100%; max-width: 280px; min-height: 44px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--ink); font: inherit; padding: 9px 12px; }
.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.primary:hover:not(:disabled) { background: var(--ink2); color: var(--bg); }
button, summary { min-height: 44px; }
input:focus-visible, summary:focus-visible, a:focus-visible, h3:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.feedback { min-height: 1.5em; padding: 10px 0; margin: 0; }
.feedback[data-result="correct"] { color: var(--teal); }
.feedback[data-result="wrong"], .feedback[data-result="invalid"] { color: var(--amber); }
details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 12px; }
summary { box-sizing: border-box; cursor: pointer; padding: 12px 0; font-weight: 600; }
summary span { color: var(--ink2); font-weight: 400; font-size: .9rem; }
details p { margin: 0 0 14px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions button { flex: 1 1 180px; }
.explanation { border-left: 3px solid var(--amber); padding: 3px 0 3px 14px; margin-top: 16px; }
.explanation p { overflow-wrap: anywhere; }
.math { font-family: var(--mono); font-size: .95em; }
a { color: var(--blue); text-underline-offset: 3px; }
.small { color: var(--ink2); font-size: .85rem; }
footer { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; }
ul { padding-left: 22px; }
li { margin: 8px 0; }
[hidden] { display: none !important; }
@media (max-width: 380px) {
  .scoreboard { gap: 5px; }
  .scoreboard p { padding: 8px 6px; }
  .scoreboard span { font-size: .75rem; }
  .choice { padding: 10px; }
}