.img-ks { --ks-ink:#222222; --ks-paper:#FAF8F3; --ks-line:#DDD7CC; --ks-accent:#8C692A; --ks-dark:#6F521F; background:var(--ks-paper); color:var(--ks-ink); border:1px solid var(--ks-line); border-radius:12px; overflow:hidden; font:17px/1.5 system-ui,sans-serif; max-width:100%; }
.img-ks *, .img-ks *::before, .img-ks *::after { box-sizing:border-box; }
.img-ks .img-ks__question { padding:22px 24px; color:#FFFFFF; background:#222222; }
.img-ks .img-ks__counter { margin:0 0 8px; font-size:.9rem; font-weight:600; }
.img-ks .img-ks__title { color:#FFFFFF; font:650 clamp(1.3rem,3.5vw,1.75rem)/1.35 system-ui,sans-serif; margin:0 0 18px; overflow-wrap:anywhere; }
.img-ks__progress { height:5px; background:#757575; border-radius:6px; overflow:hidden; }
.img-ks__progress span { display:block; height:100%; background:#FFFFFF; }
.img-ks__body, .img-ks [data-quiz-content]>p, .img-ks [data-quiz-content]>button { margin:20px; }
.img-ks__body { margin:0; padding:24px; }
.img-ks fieldset { border:0; min-width:0; padding:0; margin:0; }
.img-ks legend { padding:0; font-size:1rem; font-weight:650; margin-bottom:8px; }
.img-ks .img-ks__hint { font-size:.9rem; margin:0 0 18px; }
.img-ks__answers { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.img-ks .img-ks__select-label { display:block; margin:0 0 8px; }
.img-ks .img-ks__select { display:block; width:100%; max-width:100%; min-height:48px; padding:10px; font:inherit; color:#222222; background:#FFFFFF; border:1px solid #DDD7CC; border-radius:7px; }
.img-ks .img-ks__select:focus-visible { outline:3px solid #6F521F; outline-offset:3px; }
.img-ks .img-ks__answer { position:relative; cursor:pointer; min-width:0; margin:0; font:600 1.05rem/1.35 system-ui,sans-serif; }
.img-ks .img-ks__answer input { position:absolute; left:11px; top:50%; transform:translateY(-50%); margin:0; width:16px; height:16px; accent-color:var(--ks-dark); }
.img-ks__answer span { display:flex; justify-content:center; align-items:center; min-height:48px; height:100%; padding:10px 8px 10px 32px; background:#FFFFFF; color:#222222; border:1px solid #DDD7CC; border-radius:7px; overflow-wrap:anywhere; }
.img-ks__answer:hover span { border-color:var(--ks-dark); box-shadow:inset 0 0 0 1px var(--ks-dark); }
.img-ks__answer input:checked+span { background:#F3EEE4; border-color:var(--ks-dark); box-shadow:inset 0 0 0 1px var(--ks-dark); }
.img-ks__answer input:focus-visible+span, .img-ks button:focus-visible, .img-ks summary:focus-visible { outline:3px solid var(--ks-dark); outline-offset:3px; }
.img-ks__answer input:disabled+span { background:#ECE8DF; color:#5F5B52; cursor:default; }
.img-ks .img-ks__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.img-ks button, .img-ks .img-ks__button { font:650 1rem/1.4 system-ui,sans-serif; background:var(--ks-accent); color:#FFFFFF; border:1px solid var(--ks-dark); border-radius:7px; padding:11px 20px; min-height:46px; height:auto; white-space:normal; cursor:pointer; box-shadow:none; text-transform:none; }
.img-ks button:hover { background:var(--ks-dark); color:#FFFFFF; }
.img-ks .img-ks__button--secondary { background:#FFFFFF; color:var(--ks-dark); }
.img-ks button:disabled { background:#ECE8DF; color:#5F5B52; border-color:var(--ks-line); cursor:default; opacity:1; }
.img-ks .img-ks__validation-hint { margin:20px 0 0; }
.img-ks .img-ks__notice { margin:16px 20px; font-size:.95rem; }
.img-ks .img-ks__body>.img-ks__notice { margin:0 0 18px; }
.img-ks .img-ks__status { margin:12px 20px; min-height:1em; }
.img-ks .img-ks__status:empty { min-height:0; margin:0; }
.img-ks .img-ks__result-title { margin:0 0 12px; color:var(--ks-ink); font-size:1.6rem; }
.img-ks .img-ks__corrections { list-style:none; margin:20px 0; padding:0; display:grid; gap:12px; }
.img-ks .img-ks__corrections li { border:2px solid; border-radius:8px; padding:14px 16px; margin:0; }
.img-ks .img-ks__corrections h3 { font:650 1rem/1.4 system-ui,sans-serif; color:inherit; margin:0 0 8px; }
.img-ks .img-ks__corrections p { margin:4px 0; }
.img-ks .img-ks__correct { background:#EDF5EE; color:#1B5E20; border-color:#1B5E20; }
.img-ks .img-ks__incorrect { background:#FFF0EE; color:#9B2424; border-color:#9B2424; }
.img-ks__history { border-top:1px solid var(--ks-line); padding:16px 24px; }
.img-ks__history summary { cursor:pointer; font-weight:650; min-height:44px; display:list-item; }
.img-ks .img-ks__timeline { padding-left:20px; overflow-wrap:anywhere; }
@media(max-width:800px) { .img-ks__answers { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:580px) { .img-ks__answers { grid-template-columns:repeat(3,minmax(0,1fr)); } .img-ks__body, .img-ks .img-ks__question { padding:20px; } }
@media(max-width:400px) { .img-ks__answers { grid-template-columns:repeat(2,minmax(0,1fr)); } .img-ks__actions button { flex:1; } }
@media(forced-colors:active) { .img-ks__answer input:checked+span { outline:2px solid Highlight; } .img-ks .img-ks__corrections li { border:2px solid CanvasText; } }

/* Results use the server's ordered correction details; no quiz engine styles change. */
.img-ks .img-ks__result-banner { background:#222222; color:#FFFFFF; border-radius:12px; padding:24px; }
.img-ks .img-ks__eyebrow { margin:0 0 12px; font-size:13px; font-weight:650; letter-spacing:.1em; }
.img-ks .img-ks__score { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 24px; }
.img-ks .img-ks__result-title { color:#FFFFFF; font:750 56px/1.15 system-ui,sans-serif; margin:0; }
.img-ks .img-ks__result-title:focus-visible { outline:3px solid #FFFFFF; outline-offset:4px; }
.img-ks .img-ks__result-percent { font-size:28px; font-weight:650; margin:0; }
.img-ks .img-ks__appreciation { font-size:20px; margin:12px 0 18px; }
.img-ks .img-ks__segments { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); list-style:none; gap:6px; padding:0; margin:0; }
.img-ks .img-ks__segment { display:flex; align-items:center; justify-content:center; min-height:28px; margin:0; border:1px solid transparent; border-radius:5px; font-size:16px; font-weight:750; }
.img-ks .img-ks__segment--correct { color:#1B5E20; background:#EDF5EE; }
.img-ks .img-ks__segment--incorrect { color:#9B2424; background:#FFF0EE; }
.img-ks .img-ks__segment--unanswered { color:#FFFFFF; background:transparent; border-color:#DDD7CC; border-style:dashed; }
.img-ks .img-ks__save-status { margin:12px 0 0; font-size:14px; }
.img-ks .img-ks__insights { display:flex; flex-wrap:wrap; gap:16px; margin:0 0 28px; }
.img-ks .img-ks__insights > section { flex:1 1 260px; min-width:0; border-radius:12px; padding:24px; overflow-wrap:anywhere; }
.img-ks .img-ks__strengths { color:#1B5E20; background:#EDF5EE; border:1px solid #1B5E20; }
.img-ks .img-ks__review { color:#9B2424; background:#FFF0EE; border:1px solid #9B2424; }
.img-ks .img-ks__insights h3 { color:inherit; font:650 22px/1.3 system-ui,sans-serif; margin:0 0 12px; }
.img-ks .img-ks__insights p { margin:8px 0; }
.img-ks .img-ks__insight-count { font-weight:700; }
.img-ks .img-ks__insights ul { padding-left:22px; margin:12px 0 0; }
.img-ks .img-ks__insights li { margin:4px 0; }
.img-ks .img-ks__section-title { color:var(--ks-ink); font:650 24px/1.35 system-ui,sans-serif; margin:0 0 16px; }
.img-ks .img-ks__corrections { margin:0 0 24px; gap:16px; }
.img-ks .img-ks__corrections li { padding:24px; border-width:1px; border-radius:12px; overflow-wrap:anywhere; }
.img-ks .img-ks__correction-heading { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.img-ks .img-ks__question-number { font-size:14px; font-weight:650; }
.img-ks .img-ks__outcome { font-size:14px; font-weight:700; border:1px solid currentColor; border-radius:20px; padding:3px 10px; }
.img-ks .img-ks__corrections h3 { font-size:17px; margin-bottom:14px; }
.img-ks .img-ks__comparison { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.img-ks .img-ks__incorrect .img-ks__comparison { grid-template-columns:repeat(2,minmax(0,1fr)); }
.img-ks .img-ks__given, .img-ks .img-ks__expected { min-width:0; }
.img-ks .img-ks__incorrect .img-ks__given,
.img-ks .img-ks__expected { padding:12px; background:#FFFFFF; border:1px solid var(--ks-line); border-radius:8px; }
.img-ks .img-ks__expected { color:#1B5E20; }
.img-ks .img-ks__answer-label { font-size:14px; font-weight:650; }
.img-ks .img-ks__corrections .img-ks__explanation { margin-top:16px; color:var(--ks-ink); }
.img-ks .img-ks__metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:12px; margin:16px 0; }
.img-ks .img-ks__metrics > div { min-width:0; background:#FFFFFF; border:1px solid var(--ks-line); border-radius:10px; padding:16px; }
.img-ks .img-ks__metrics dt { font-size:14px; }
.img-ks .img-ks__metrics dd { font-size:24px; font-weight:750; margin:4px 0 0; }
.img-ks .img-ks__history-note, .img-ks .img-ks__history-origins { margin:12px 0; font-size:15px; }
.img-ks .img-ks__history-group { border-top:1px solid var(--ks-line); padding-top:8px; }
.img-ks .img-ks__history-group h3 { color:inherit; font-size:18px; margin:8px 0; }
.img-ks .img-ks__timeline { list-style:none; padding:0; margin:16px 0; }
.img-ks .img-ks__timeline > li { border-top:1px solid var(--ks-line); padding:12px 0; margin:0; }
.img-ks .img-ks__history-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:15px; }
.img-ks .img-ks__history-row time { flex:1 1 180px; }
.img-ks .img-ks__provenance { flex:1 1 150px; }
.img-ks .img-ks__history-score { margin-left:auto; }
.img-ks .img-ks__history-track { display:block; height:6px; background:var(--ks-line); border-radius:4px; overflow:hidden; margin-top:8px; }
.img-ks .img-ks__history-fill { display:block; height:100%; background:var(--ks-dark); }
.img-ks [data-quiz-history]:focus-visible { outline:3px solid var(--ks-dark); outline-offset:3px; }
@media(max-width:580px) {
  .img-ks .img-ks__result-banner, .img-ks .img-ks__results,
  .img-ks .img-ks__insights > section, .img-ks .img-ks__corrections li { padding:16px; }
  .img-ks .img-ks__result-title { font-size:44px; }
  .img-ks .img-ks__result-percent { font-size:24px; }
  .img-ks .img-ks__insights { display:flex; flex-direction:column; gap:12px; }
  .img-ks .img-ks__insights > section { flex:auto; }
  .img-ks .img-ks__insights h3, .img-ks .img-ks__section-title { font-size:21px; }
  .img-ks .img-ks__corrections h3 { font-size:16px; }
  .img-ks .img-ks__incorrect .img-ks__comparison { grid-template-columns:minmax(0,1fr); }
  .img-ks .img-ks__restart { width:100%; }
  .img-ks .img-ks__history { padding:16px; }
  .img-ks .img-ks__metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .img-ks .img-ks__metrics > div { padding:10px; }
  .img-ks .img-ks__metrics > div:only-child { grid-column:1 / -1; }
  .img-ks .img-ks__metrics dt { font-size:12px; overflow-wrap:anywhere; }
  .img-ks .img-ks__metrics dd { font-size:20px; overflow-wrap:anywhere; }
}
@media(forced-colors:active) {
  .img-ks .img-ks__segment { border-color:CanvasText; }
  .img-ks .img-ks__history-fill { background:CanvasText; }
}

/* A complete 21-spelling set only; other answer grids keep their own layout. */
.img-ks__body { container-name:img-quiz-body; container-type:inline-size; }
.img-ks .img-ks__body--notes { padding:clamp(12px,4%,24px); }
.img-ks .img-ks__note-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.img-ks .img-ks__note-block { display:grid; gap:8px; min-width:0; }
.img-ks .img-ks__note-block--four { grid-column:span 4; grid-template-columns:repeat(4,minmax(0,1fr)); }
.img-ks .img-ks__note-block--three { grid-column:span 3; grid-template-columns:repeat(3,minmax(0,1fr)); }
.img-ks .img-ks__note {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; min-width:0; min-height:60px; width:100%; margin:0; padding:7px 2px;
  font:650 1rem/1.2 system-ui,sans-serif; white-space:nowrap; overflow-wrap:normal;
  background:#FFFFFF; color:#222222; border:2px solid #B6AD9D; border-radius:7px;
}
.img-ks .img-ks__note-mark { display:block; min-height:16px; font-size:14px; line-height:16px; }
.img-ks .img-ks__note:hover:not(:disabled) { background:#F3EEE4; color:#222222; border-color:var(--ks-dark); }
.img-ks .img-ks__note[aria-pressed=true] { background:var(--ks-dark); border-color:var(--ks-dark); color:#FFFFFF; }
.img-ks .img-ks__note:focus-visible { outline:3px solid #222222; outline-offset:3px; }
.img-ks .img-ks__note:disabled { background:#FFFFFF; color:#222222; border-color:#B6AD9D; cursor:default; opacity:1; }
.img-ks .img-ks__note--correct:disabled { background:#EDF5EE; border-color:#1B5E20; color:#1B5E20; }
.img-ks .img-ks__note--missed:disabled { border-style:dashed; }
.img-ks .img-ks__note--incorrect:disabled { background:#FFF0EE; border-color:#9B2424; color:#9B2424; }
.img-ks .img-ks__note-feedback { margin:18px 0 8px; font-weight:650; }
.img-ks .img-ks__note-feedback:focus { outline:2px solid var(--ks-dark); outline-offset:4px; }
@media(max-width:640px) {
  .img-ks .img-ks__note-grid { grid-template-columns:minmax(0,1fr); row-gap:20px; }
  .img-ks .img-ks__note-block { grid-column:1; }
}
/* Also support narrow quiz columns on a wide screen. */
@container img-quiz-body (max-width:560px) {
  .img-ks .img-ks__note-grid { grid-template-columns:minmax(0,1fr); row-gap:20px; }
  .img-ks .img-ks__note-block { grid-column:1; }
}
@container img-quiz-body (max-width:240px) {
  .img-ks .img-ks__note-block { gap:4px; }
}
@media(forced-colors:active) {
  .img-ks .img-ks__note[aria-pressed=true] { outline:2px solid Highlight; outline-offset:-5px; }
  .img-ks .img-ks__note:disabled { color:CanvasText; border-color:CanvasText; }
}