:root { color-scheme: light; font-family: system-ui, sans-serif; color: #0b1d33; background: #f7f5ef; line-height: 1.6; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { width: min(920px, calc(100% - 40px)); margin-inline: auto; }
header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid #b8c1ca; }
a { color: #155096; text-underline-offset: .2em; }
img { max-width: 100%; height: auto; }
main { padding-block: 2rem; }
h1 { font-family: Georgia, serif; font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.3rem); line-height: 1.12; margin: .6rem 0 1rem; }
h2 { font-size: 1.25rem; margin: 0 0 .4rem; }
.eyebrow { font-size: .875rem; font-weight: 700; }
.lede { max-width: 70ch; font-size: 1.1rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.5rem 0; }
button { background: #0b1d33; color: white; padding: .8rem 1.1rem; border: 0; font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #ad7900; outline-offset: 4px; }
.usage, .source { font-size: .875rem; color: #455a70; }
.example-context { border-left: 3px solid #b88400; padding: .8rem 1rem; background: white; }
.setup { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin: 2rem 0; }
label { display: block; font-weight: 600; }
textarea, input { display: block; width: 100%; border: 1px solid #8090a0; border-radius: 0; padding: .7rem; margin-top: .5rem; font: inherit; color: #0b1d33; background: white; }
textarea { resize: vertical; min-height: 110px; overflow: hidden; }
.worksheet-field { margin-top: 1.4rem; padding: 1.4rem; border-top: 3px solid #c99310; background: white; break-inside: avoid; }
.worksheet-field p { margin-top: .5rem; }
.example { margin-top: .8rem; font-size: .94rem; color: #455a70; }
summary { cursor: pointer; font-weight: 600; }
.review { margin-top: 2rem; }
footer { padding: 1.5rem 0 2rem; border-top: 1px solid #b8c1ca; font-size: .875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) { .setup { grid-template-columns: 1fr; } .worksheet-field { padding: 1rem; } }
@media print {
  @page { margin: 16mm; }
  :root { font-size: 10pt; background: white; }
  header, main, footer { width: 100%; }
  header { padding: 0 0 10pt; }
  header a:last-child, .actions, .usage, .example, .example-context { display: none; }
  main { padding-top: 10pt; }
  h1 { font-size: 24pt; }
  .worksheet-field { padding: 10pt 0; margin-top: 10pt; border-top: 1pt solid #888; }
  textarea { min-height: 45pt; border-color: #bbb; }
  input { min-width: 0; }
  .setup { grid-template-columns: 1fr 1fr 1fr; }
  a { color: inherit; text-decoration: none; }
}