* { box-sizing: border-box; }
body { margin: 0; background: #FAF6EB; color: #0D0D11; font: 16px/1.65 "Satoshi", "Helvetica Neue", Arial, sans-serif; }
header, main, footer { width: min(100% - 48px, 920px); margin: 40px auto; }
h1 { line-height: 1.1; font-size: clamp(2.3rem, 5vw, 3.8rem); letter-spacing: -.045em; }
h1, h2, h3 { font-family: "Clash Display", "Arial Black", "Helvetica Neue", sans-serif; }
h2 { font-size: 1.3rem; line-height: 1.3; }
a { color: #483615; text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 3px solid #76551d; outline-offset: 4px; }
.gwp-links { display: flex; gap: 12px 24px; flex-wrap: wrap; }
.gwp-problem { border: 2px solid #3e3b36; border-radius: 22px; box-shadow: 5px 6px 0 #302d28; background: #fff; margin: 32px 0 40px; padding: clamp(16px, 3vw, 30px); }
.gwp-problem > h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); letter-spacing: -.025em; margin: 0 0 10px; }
.gwp-type { color: #5B54D6; font: 600 .8rem/1.7 "JetBrains Mono", "SF Mono", monospace; margin: 0 0 20px; }
.gwp-type a { color: #655028; }
.gwp-problem > p { max-width: 74ch; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 16px 0; }
caption { text-align: left; font-size: .9rem; margin-bottom: 6px; }
td, th { border: 1px solid #333; text-align: left; padding: 7px 9px; height: 36px; overflow-wrap: anywhere; }
th { font-size: .85rem; background: #F3EDDC; }
.gwp-problem caption { color: #5A5A64; font-size: .8rem; margin: 14px 0 10px; }
.gwp-problem td, .gwp-problem th { border-color: #d0c8b7; }
.gwp-write span { display: block; border-bottom: 1px solid #777; height: 24px; }
.ws-key { border: 2px solid #333; padding: 18px; margin: 40px 0; }
summary { cursor: pointer; font-weight: bold; }
.gwp-practice-answer { margin: 24px 0 0; border-top: 1px solid #d0c8b7; background: #fffdf7; border-radius: 0 0 10px 10px; }
.gwp-practice-answer summary { padding: 16px 12px; min-height: 48px; color: #5B54D6; font-size: .9rem; }
.gwp-answer-content { padding: 0 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gwp-answer-content > div { min-width: 0; }
.gwp-answer-content table { margin-top: 0; }
.gwp-answer-notes h3 { font-size: .95rem; margin: 14px 0 8px; }
.gwp-answer-notes p { font-size: .9rem; margin: 0 0 14px; }
.gwp-answer-note { color: #5A5A64; }
#extra-practice { margin: 80px 0 30px; scroll-margin-top: 24px; }
#extra-title { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; margin: 14px 0; }
#extra-practice > p { max-width: 70ch; }
.gwp-paper-note { color: #5A5A64; font-size: .9rem; }
.gwp-guide-eyebrow { color: #5B54D6; }
.gwp-guide-eyebrow::before { content: "■"; color: #E8703A; margin-right: 12px; }
.gwp-how-to { margin: 36px 0 48px; padding: 24px; background: #fffdf5; border: 2px solid #272421; border-radius: 22px 16px 24px 15px; box-shadow: 4px 5px 0 #272421; }
.gwp-how-to h2 { font-size: 2rem; margin: 4px 0 12px; }
.gwp-guide-eyebrow { font-size: .75rem; font-weight: bold; letter-spacing: .15em; margin: 0; }
.gwp-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; align-items: start; }
.gwp-guide { --guide-color: #fff0a8; border: 2px solid #272421; border-radius: 13px 17px 12px 16px; min-width: 0; background: #fff; scroll-margin-top: 20px; }
.gwp-guide-line { --guide-color: #d9edfc; }
.gwp-guide-scatter { --guide-color: #dff0c4; }
.gwp-guide-pie { --guide-color: #eae0f6; }
.gwp-guide summary { padding: 18px; border-radius: 11px 15px 10px 14px; background: var(--guide-color); }
.gwp-guide[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.gwp-guide-name { font-size: 1.25rem; }
.gwp-guide-purpose, .gwp-guide-meta { display: block; margin-top: 6px; font-weight: normal; }
.gwp-guide-meta { font-size: .8rem; font-weight: bold; }
.gwp-guide[open] { grid-column: 1 / -1; }
.gwp-guide-body { padding: 20px; }
.gwp-guide-body h3 { margin: 0 0 16px; }
.gwp-guide-body h4 { margin: 20px 0 8px; font-size: 1rem; }
.gwp-organizer { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
.gwp-guide-steps { padding-left: 24px; }
.gwp-guide-steps li { padding: 6px 0 6px 4px; }
.gwp-guide-example { padding: 14px; background: #f7f6f2; border-left: 4px solid #6b6351; }
.gwp-guide-video { padding: 4px 16px 8px; background: var(--guide-color); border: 1px solid #272421; border-radius: 12px; }
.gwp-guide-video a { display: inline-block; padding: 6px 0; font-weight: bold; }
.gwp-guide-return { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; }
.gwp-guide-return a { padding: 10px 0; }
.gwp-problem { scroll-margin-top: 16px; }
@media (max-width: 550px) {
  header, main, footer { width: calc(100% - 28px); }
  .gwp-answer-content { grid-template-columns: 1fr; gap: 0; padding: 0 8px 12px; }
  .gwp-how-to { padding: 16px; }
  .gwp-guide-grid { grid-template-columns: 1fr; }
  .gwp-guide-body { padding: 12px; }
}
@media (max-width: 450px) { td, th { padding: 6px; font-size: 13px; } }
@media print {
  @page { size: letter; margin: .55in; }
  body { font-size: 11pt; line-height: 1.4; background: #fff; }
  header, main, footer { width: 100%; margin: 0; }
  header { margin-bottom: 16px; }
  header > a, .gwp-links, footer, .gwp-how-to, .gwp-help-link, .gwp-practice-answer { display: none; }
  .gwp-problem { break-inside: avoid; box-shadow: none; border-radius: 0; padding: 12px; }
  .ws-key { break-before: page; }
}

.gwp-example-graph { margin: 0 14px 24px; }
.gwp-example-graph img { display: block; width: 100%; height: auto; background: white; border: 1px solid #d0c8b7; }
.gwp-example-graph figcaption { margin-top: 8px; font-size: .85rem; line-height: 1.5; }