:root {
  --brand: #9c3f22; --brand-ink: #fff; --accent: #2f7a5b;
  --dough: #c98a4b; --dough-dark: #a8692f; --roof: #7a3a20; --icing: #fffaf2;
  --bg: #fbf6ef; --surface-2: #f3eadf; --line: #e8dccd;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #17120f; --surface: #211a16; --surface-2: #2a221d; --line: #3a2f28; --dough: #b97a3f; --dough-dark: #94602c; --roof: #6e341d; }
}
:root[data-theme="dark"] { --bg: #17120f; --surface: #211a16; --surface-2: #2a221d; --line: #3a2f28; --dough: #b97a3f; --dough-dark: #94602c; --roof: #6e341d; }

.hero { padding-block: var(--s5) var(--s7); }
.hero .container { grid-template-columns: 1fr; gap: var(--s5); }
.hero-title { max-width: 20ch; }
.promise { max-width: 46ch; }
.maker { display: grid; gap: var(--s4); }
@media (min-width: 860px) { .maker { grid-template-columns: 1.15fr 1fr; align-items: stretch; } }

.inputs { display: grid; gap: var(--s4); align-content: start; padding: var(--s5); }
.presets { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip { font: 600 var(--step--1) var(--font-body); padding: 0.45rem 0.95rem; border-radius: var(--pill); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; min-height: 2.5rem; }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.chip:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 2px; }
.dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
@media (min-width: 560px) { .dims { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dims select.input { appearance: auto; }
.cutlist { border-top: 1px solid var(--line); padding-top: var(--s4); display: grid; gap: var(--s2); }
.cutlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.cutlist li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--surface-2); border-radius: var(--radius-s); font-variant-numeric: tabular-nums; }
.cutlist li span { color: var(--ink-2); text-align: right; }
.cutlist p { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.hint { margin: 0; min-height: 1.2em; font-size: var(--step--1); color: var(--ink-2); }

.result { display: grid; gap: var(--s3); align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--s4) var(--s5) var(--s5); box-shadow: var(--shadow-2); }
.house { width: 100%; height: auto; max-height: 15rem; display: block; background: linear-gradient(180deg, var(--brand-soft), transparent 85%); border-radius: var(--radius); }
.h-ground { fill: var(--surface-2); }
.h-front { fill: var(--dough); stroke: var(--dough-dark); stroke-width: 1.5; stroke-linejoin: round; }
.h-side { fill: var(--dough-dark); stroke: var(--dough-dark); stroke-width: 1.5; stroke-linejoin: round; }
.h-roof { fill: var(--roof); stroke: var(--roof); stroke-width: 1.5; stroke-linejoin: round; }
.h-roof-edge { fill: var(--icing); stroke: var(--icing); stroke-width: 1; stroke-linejoin: round; }
.h-icing { fill: none; stroke: var(--icing); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 9; }
.h-door { fill: var(--accent); }
.h-label { fill: var(--ink-2); font: 600 13px var(--font-body); }
.dough { display: grid; justify-items: center; text-align: center; gap: 2px; }
.dough .small { color: var(--ink-2); font-size: var(--step--1); }
.dough .big { font: 700 var(--step-3)/1.05 var(--font-display); color: var(--brand-text); font-variant-numeric: tabular-nums; }
.dough .why { color: var(--ink-2); font-size: var(--step--1); max-width: 34ch; }
.sheets { margin: 0; font-size: var(--step--1); color: var(--ink-2); text-align: center; }
@media (max-width: 859px) {
  .result { order: -1; }
  .hero { padding-top: var(--s4); }
  .hero .container { gap: var(--s4); }
  .house { max-height: 11rem; }
}

.lede { color: var(--ink-2); max-width: 52ch; }
.pieces { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: var(--s4); margin-top: var(--s5); }
.piece { grid-template-columns: minmax(0, 1fr); min-width: 0; overflow-wrap: anywhere; margin: 0; padding: var(--s4); display: grid; gap: var(--s3); }
.piece-box { min-width: 0; aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--surface-2); border-radius: var(--radius); padding: var(--s4); }
.piece-svg { width: 100%; height: 100%; max-height: 8rem; }
@media (max-width: 480px) { .pieces { grid-template-columns: 1fr 1fr; gap: var(--s3); } .piece { padding: var(--s3); } }
.piece-svg polygon { fill: var(--dough); stroke: var(--dough-dark); stroke-width: 0.06; stroke-linejoin: round; }
.piece figcaption { display: grid; gap: 2px; }
.piece figcaption span { color: var(--ink-2); font-size: var(--step--1); }
.steps { margin-top: var(--s5); }
.faq { margin-block: var(--s6) var(--s5); }

#print-area { display: none; }
@media print {
  @page { size: letter; margin: 0.5in; }
  html, body { background: #fff !important; color: #000 !important; }
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block; }
  .sheet { width: 7.4in; height: 9.8in; position: relative; break-after: page; page-break-after: always; overflow: hidden; }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  .sheet-head { height: 0.55in; display: flex; justify-content: space-between; align-items: center; gap: 0.2in; font: 9pt/1.3 "Instrument Sans", sans-serif; border-bottom: 0.5pt solid #999; }
  .check { display: inline-flex; align-items: center; gap: 0.08in; white-space: nowrap; }
  .check i { display: inline-block; width: 1in; height: 0.14in; border: 0.75pt solid #000; background: repeating-linear-gradient(90deg, #000 0 0.125in, #fff 0.125in 0.25in); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sheet-body { position: absolute; left: 0; top: 0.75in; width: 7.4in; height: 9.05in; }
  .slot { position: absolute; }
  .slot svg { position: absolute; left: 0; top: 0; overflow: visible; transform-origin: 0 0; max-width: none; height: auto; }
  .slot svg.cut-part { overflow: hidden; }
  .cut-line { fill: none; stroke: #000; stroke-width: 0.018; stroke-linejoin: miter; }
  .join { stroke: #000; stroke-width: 0.012; stroke-dasharray: 0.08 0.06; }
  .cut-name, .cut-dims { paint-order: stroke; stroke: #fff; stroke-width: 0.05; stroke-linejoin: round; }
  .cut-name { font: 700 0.17px "Instrument Sans", sans-serif; fill: #000; }
  .cut-dims { font: 400 0.13px "Instrument Sans", sans-serif; fill: #333; }
}

/* Search pages: the worked case, its questions and the links to related sizes. */
.prose { display: grid; gap: var(--s3); max-width: 46rem; }
.prose h2 { margin-top: var(--s5); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0; max-width: 62ch; }
.worked { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--s2); }
.table-wrap { max-width: 100%; }
.qas { display: grid; gap: var(--s4); }
.qa h3 { font-size: var(--step-0); margin: 0 0 var(--s1); }
.qa p { color: var(--ink-2); }
.related ul, .sizes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.related a, .sizes-list a { display: block; padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--brand-text); font-weight: 600; text-decoration: none; }
.related a:hover, .sizes-list a:hover { border-color: var(--brand); }
.sizes-list { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); margin-top: var(--s4); }
.prose .notice { margin-top: var(--s4); }