:root {
  color-scheme: dark;
  --bg: #080d18;
  --panel: #111b2b;
  --line: #334157;
  --ink: #f3f5f7;
  --muted: #bac4d1;
  --mint: #81e9bf;
  --violet: #c6a8ff;
  --gold: #f1ce83;
  font: 16px/1.65 "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
a { color: var(--mint); text-underline-offset: 3px; }
main { width: min(1040px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 60px; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.2; }
h1 { max-width: 850px; margin: .2em 0; font-size: clamp(2rem, 5vw, 3.7rem); }
h2 { font-size: 1.55rem; }
.eyebrow { color: var(--mint); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.lead, .case-card > p:not(.eyebrow), .muted { color: var(--muted); }
.lead { max-width: 780px; font-size: 1.08rem; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.pill-row span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: #dce6ef; font-size: .8rem; }
.workflow, .case-card, .answer-key { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 20px; }
.workflow { margin: 22px 0; }
.workflow ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0; list-style: none; }
.workflow li { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 6px; background: #0d1522; padding: 12px; }
.workflow b { color: var(--mint); }
.workflow span { color: var(--muted); font-size: .87rem; }
.case-list { display: grid; gap: 14px; }
.case-card h2 { margin: 0 0 8px; }
.case-card > p:not(.eyebrow) { margin: 0 0 16px; }
fieldset { min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
legend { margin-bottom: 8px; font-weight: 700; }
label { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 5px; background: #0a1220; }
label:focus-within, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
input { margin-top: 5px; accent-color: var(--mint); }
label span { flex: 1; }
button { min-height: 44px; padding: 9px 14px; border: 1px solid var(--mint); border-radius: 5px; background: #123226; color: var(--ink); font: inherit; cursor: pointer; }
.feedback { min-height: 2.2em; margin: 10px 0 0; color: var(--muted); }
.feedback[data-state="correct"] { color: var(--mint); }
.feedback[data-state="incorrect"] { color: var(--gold); }
.answer-key { margin-top: 18px; }
.answer-key summary { cursor: pointer; font-weight: 700; }
.answer-key li { margin: 8px 0; }
.references { margin-top: 24px; }
footer { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; }

@media (max-width: 760px) {
  .workflow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  main { width: min(100% - 24px, 1040px); padding-top: 20px; }
  .workflow, .case-card, .answer-key { padding: 15px; }
  .workflow ol { grid-template-columns: 1fr; }
}