:root {
  --bg: #eceff1; --paper: #fff; --ink: #15171a; --muted: #4a535c; --line: #c3cad1; --soft: #dfe4e8;
  --accent: #b8321a; --accent-ink: #fff; --ok: #17703a; --warn: #8a5300; --bad: #b3261e;
  --r: 4px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --head: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121417; --paper: #1b1e22; --ink: #e9ecef; --muted: #aab3bc; --line: #3a424a; --soft: #262b30;
    --accent: #ff7d5c; --accent-ink: #1a0d08; --ok: #6fd28f; --warn: #f0b45a; --bad: #ff8a80;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
a { color: var(--accent); text-underline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--head); line-height: 1.15; letter-spacing: -0.01em; }
.hero { padding: 22px 0 6px; }
.hero h1 { font-size: clamp(30px, 6vw, 46px); font-weight: 800; margin: 0; padding-bottom: 10px; border-bottom: 9px solid var(--ink); max-width: 20ch; }
.lede { margin: 12px 0 0; max-width: 62ch; color: var(--muted); }

/* setup */
.setup { margin: 16px 0 10px; }
.setrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.seg button { font: 600 16px var(--sans); min-height: 44px; padding: 0 14px; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; }
.seg button + button { border-left: 2px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.count { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
select, input { font: 16px var(--sans); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); min-height: 44px; padding: 0 10px; }
select { padding-right: 6px; }
.btn { font: 600 16px var(--sans); min-height: 44px; padding: 0 16px; border-radius: var(--r); border: 2px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.small { min-height: 44px; padding: 0 12px; }
.btn:hover { filter: brightness(0.96); }
.link { font: inherit; background: none; border: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 44px; padding: 0 4px; }
.types { margin-top: 10px; }
.types summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 6px; width: fit-content; }
.types summary span { color: var(--muted); font-weight: 400; }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; padding: 4px 0 6px; }
.chip { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.chip input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.chip b { display: block; font-weight: 600; }
.chip small { display: block; color: var(--muted); font-size: 15px; line-height: 1.35; }

.note { background: var(--paper); border-left: 4px solid var(--bad); padding: 10px 12px; margin: 10px 0; }
.note.info { border-left-color: var(--accent); }

/* the sheet */
.sheet { margin: 14px 0 0; }
.sheet:focus { outline: none; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; border-bottom: 3px solid var(--ink); padding-bottom: 6px; }
.sheet-head h2 { margin: 0; font-size: 24px; font-weight: 800; }
.code { font-family: var(--mono); letter-spacing: 0.06em; }
.lvl { font: 400 17px var(--sans); color: var(--muted); margin-left: 6px; }
.score { margin: 0; color: var(--muted); }
.card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 28px; align-items: start; padding: 22px 0; border-bottom: 1.5px solid var(--line); }
.card.two { grid-template-columns: minmax(0, 1fr); }
.labs { display: flex; flex-wrap: wrap; gap: 16px; }
.lab { margin: 0; }
.cap { margin: 0 0 6px; max-width: 21em; font-size: 15px; line-height: 1.35; }
.cap .lt { font-family: var(--head); font-size: 17px; margin-right: 4px; }
.cap .pk { display: block; color: var(--muted); }
.probs { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.prob { padding-left: 2px; }
.q { margin: 0 0 8px; max-width: 60ch; }
.q .num { display: inline-block; min-width: 1.6em; font: 800 18px var(--head); }
.arow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ain { display: inline-flex; align-items: center; gap: 6px; }
.ain input { width: 8.5em; }
.ain .unit, .ain .pre { color: var(--muted); }
.ain.sel select { max-width: 15em; }
.choices { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.opt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--paper); cursor: pointer; }
.opt input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--accent); }
.opt:has(input:checked) { border-color: var(--ink); }
.fb { margin: 8px 0 0; padding-left: 10px; border-left: 4px solid currentColor; max-width: 60ch; }
.fb.right { color: var(--ok); }
.fb.close { color: var(--warn); }
.fb.wrong, .fb.unread { color: var(--bad); }
.fb b { font-weight: 700; }
.prob.is-right .ain input { border-color: var(--ok); }
.work { margin-top: 6px; }
.work summary { cursor: pointer; color: var(--accent); min-height: 36px; display: flex; align-items: center; width: fit-content; }
.work .ans { margin: 4px 0; }
.steps { margin: 0; padding-left: 22px; color: var(--muted); max-width: 64ch; }
.sheet-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px 0 6px; }

/* the Nutrition Facts label: black on white in every color scheme, like the real thing */
.nf { --nf: 13px; font: var(--nf)/1.22 var(--head); color: #000; background: #fff; border: 1px solid #000; padding: 0.3em 0.45em 0.45em; width: 19.5em; }
.nf.dual { width: 27em; }
.nf p { margin: 0; }
.nf-title { display: block; width: 100%; height: auto; }
.nf-title text { font: 900 40px var(--head); fill: #000; }
.nf-spc { padding-top: 0.25em; border-top: 1px solid #000; margin-top: 0.15em !important; font-size: 1.05em; }
.nf-ss { display: flex; justify-content: space-between; gap: 0.5em; font-size: 1.18em; font-weight: 800; line-height: 1.15; }
.nf-ss b + b { text-align: right; }
.nf-ss b:first-child { white-space: nowrap; flex: none; }
.nf-bar { border-top: 0.65em solid #000; margin: 0.15em 0 0; }
.nf-bar.b3 { border-top-width: 0.32em; }
.nf-aps { font-weight: 800; font-size: 0.82em; padding-top: 0.15em; }
.nf-cal { display: flex; justify-content: space-between; align-items: flex-end; line-height: 1; padding-bottom: 0.1em; }
.nf-cal b { font-weight: 900; font-size: 1.95em; }
.nf-cal b.n { font-size: 2.65em; }
.nf-dvh { text-align: right; font-size: 0.82em; padding: 0.15em 0 0.1em; }
.nf-row { display: flex; justify-content: space-between; gap: 0.5em; border-top: 1px solid #000; padding: 0.12em 0; }
.nf-row b { font-weight: 800; }
.nf-row.i1 { padding-left: 1em; }
.nf-row.i2 { margin-left: 2em; }
.nf-row.vm { font-weight: 400; }
.nf-bar + .nf-row { border-top: 0; }
.nf-foot { font-size: 0.72em; line-height: 1.25; padding-top: 0.3em; }
.nf-dcal { display: grid; grid-template-columns: 1fr 7.5em 7.5em; align-items: end; line-height: 1; padding: 0.1em 0; }
.nf-dcal .cl { font-size: 1.85em; font-weight: 900; }
.nf-dcal .col { display: flex; flex-direction: column; align-items: flex-end; border-left: 1px solid #000; padding-left: 0.3em; }
.nf-dcal small { font-size: 0.72em; font-weight: 800; }
.nf-dcal .n { font-size: 2.3em; font-weight: 900; }
.nf-drow { display: grid; grid-template-columns: 1fr 4.5em 3em 4.5em 3em; border-top: 1px solid #000; padding: 0.1em 0; align-items: baseline; }
.nf-drow .nm { white-space: nowrap; }
.nf-drow .a { border-left: 1px solid #000; padding-left: 0.25em; }
.nf-drow .p { text-align: right; font-weight: 800; }
.nf-drow.vm .p { font-weight: 400; }
.nf-drow.i1 .nm { padding-left: 0.8em; }
.nf-drow.i2 .nm { padding-left: 1.4em; }
.nf-dh { font-size: 0.82em; white-space: nowrap; }
.nf-dh .h { grid-column: span 2; text-align: right; font-weight: 800; }
.nf-bar + .nf-drow { border-top: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nf { border-color: #fff; box-shadow: 0 0 0 1px #000; } }

/* print and share */
.share { margin: 18px 0 8px; padding-top: 14px; border-top: 3px solid var(--ink); }
.print-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.print-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.share-out label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.share-out input { width: 100%; font-family: var(--mono); font-size: 15px; }
.recent { margin-top: 12px; }
.recent summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; width: fit-content; }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.recent small { display: block; color: var(--muted); }
.hint { color: var(--muted); font-size: 15px; }

/* content */
.content { max-width: 72ch; padding: 18px 0 30px; }
.content h2 { font-size: 26px; font-weight: 800; margin: 30px 0 8px; }
.tablewrap { overflow-x: auto; }
table.rules { border-collapse: collapse; width: 100%; font-size: 16px; margin: 8px 0; background: var(--paper); }
table.rules caption { text-align: left; font-weight: 700; padding: 0 0 6px; }
table.rules th, table.rules td { text-align: left; vertical-align: top; padding: 7px 10px; border-top: 1px solid var(--line); }
table.rules thead th { border-top: 0; border-bottom: 3px solid var(--ink); }
table.rules tbody th { font-weight: 600; width: 38%; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.faq p { margin: 2px 0 12px; }
.disclaimer { margin-top: 24px; padding: 10px 12px; background: var(--paper); border-left: 4px solid var(--ink); }
.sources { font-size: 15px; color: var(--muted); }

footer { border-top: 1px solid var(--line); padding: 14px 0 26px; color: var(--muted); font-size: 15px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.sb-footer a { color: var(--ink); }

.toast { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 140%); background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--r); max-width: calc(100% - 32px); transition: transform 0.2s; z-index: 20; }
.toast.on { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.print-root { display: none; }

@media (max-width: 760px) {
  .card { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 380px) {
  .nf { --nf: 12px; }
  .nf.dual { --nf: 11px; }
}
@media (max-width: 340px) {
  .nf.dual { --nf: 10.4px; }
  .seg button { padding: 0 10px; }
}

@media print {
  @page { margin: 0.5in; }
  :root { --ink: #000; --muted: #333; --line: #999; }
  body { background: #fff; color: #000; font: 10.5pt/1.35 var(--sans); }
  main, footer, .toast, .skip { display: none !important; }
  .print-root { display: block; }
  table.pt { width: 100%; border-collapse: collapse; }
  table.pt > tbody > tr > td, table.pt > thead > tr > td { padding: 0; }
  .prun { font: 8.5pt var(--mono); color: #555; text-align: right; padding-bottom: 5pt !important; }
  .ph { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3pt solid #000; margin-bottom: 6pt; }
  .ph h2 { font: 800 17pt var(--head); margin: 0; }
  .ph p { margin: 0; font: 10pt var(--mono); }
  .pmeta { display: flex; justify-content: space-between; gap: 12pt; margin: 8pt 0 4pt; }
  .pnote { font-size: 9pt; color: #333; margin: 0 0 4pt; }
  .pcard { display: flex; gap: 16pt; align-items: flex-start; break-inside: avoid; page-break-inside: avoid; border-top: 1.5pt solid #000; padding: 8pt 0 6pt; }
  .pcard.two { gap: 12pt; }
  .pcard.two .plabs { gap: 10pt; }
  .plabs { display: flex; gap: 14pt; flex: none; }
  .plab { margin: 0; }
  .plab .cap { font-size: 8.5pt; max-width: 20em; margin-bottom: 3pt; }
  .plab .cap .lt { font-size: 10pt; }
  .plab .cap .pk { color: #333; }
  .nf { --nf: 7.4pt; line-height: 1.14; }
  .pqs { flex: 1; min-width: 0; }
  .pqs > .cap { font-size: 9.5pt; max-width: none; margin: 0 0 6pt; }
  .pqs > .cap .lt { font-size: 11pt; }
  .pqs > .cap .pk { display: inline; margin-left: 4pt; }
  .pq { margin: 0; padding-left: 18pt; }
  .pq > li { padding: 0 0 4pt; break-inside: avoid; page-break-inside: avoid; }
  .pq > li p { margin: 0; }
  .pq .pans { margin: 16pt 0 8pt; font-family: var(--mono); font-size: 9.5pt; display: flex; flex-wrap: wrap; gap: 4pt 14pt; }
  .pch { display: flex; flex-wrap: wrap; gap: 3pt 12pt; font-family: var(--sans); }
  .psheet + .pkey { break-before: page; page-break-before: always; }
  .kbody { columns: 2; column-gap: 20pt; }
  .kcard { break-inside: avoid; page-break-inside: avoid; border-top: 1pt solid #000; padding: 4pt 0 2pt; }
  .kh { margin: 0 0 2pt; font: 700 10pt var(--head); }
  .kl { margin: 0; padding-left: 20pt; }
  .kl > li { padding: 1pt 0 3pt; }
  .kl p { margin: 0; }
  .pka { font-weight: 700; }
  .pks { margin: 0; padding-left: 14pt; font-size: 9pt; color: #222; }
}