:root { --grass: #16743a; --grass-dark: #0d5128; --sun: #f4b942; --ink: #18312a; --paper: #fffef8; }
body { background: #eaf3e7; color: var(--ink); }
.generator-head { max-width: 1084px; margin: 24px auto 12px; display: flex; gap: 24px; align-items: start; }
.generator-head > div { order: 1; }
.generator-head h1 { margin: 0; font: 800 clamp(2rem, 4vw, 3.2rem)/1.05 Georgia, serif; color: var(--grass-dark); }
.generator-head p { margin: 6px 0 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 800; color: #4f704f; }
.back-link { order: 2; margin: 8px 0 0 auto; color: var(--grass-dark); font-weight: 700; white-space: nowrap; }
.generator-panel, .print-actions { max-width: 1084px; margin: 18px auto; padding: 16px; border: 1px solid #bfd1b9; border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 12px 35px rgba(29,67,41,.1); }
.generator-panel { display: grid; grid-template-columns: .65fr 2fr auto; gap: 16px; align-items: end; }
.generator-panel label { display: grid; gap: 5px; font-size: .82rem; font-weight: 800; }
.generator-panel small { color: #607267; font-weight: 400; }
.generator-panel fieldset { display: flex; min-height: 68px; gap: 18px; align-items: center; margin: 0; padding: 10px 14px; border: 1px solid #9eb69a; border-radius: 10px; }
.generator-panel legend { padding: 0 5px; font-size: .82rem; font-weight: 800; }
.generator-panel fieldset label { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.generator-panel input[type="checkbox"] { width: 20px; min-height: 20px; accent-color: var(--grass); }
.form-message { grid-column: 1 / -1; min-height: 1.2em; margin: 0; color: #a1342a; font-weight: 700; }
input, select, button { min-height: 44px; border: 1px solid #9eb69a; border-radius: 10px; padding: 9px 11px; font: inherit; }
button { background: #fff; color: var(--grass-dark); font-weight: 800; cursor: pointer; }
button.primary { background: var(--grass); color: white; border-color: var(--grass); }
.print-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.print-actions span { margin-right: auto; font-weight: 700; }
.sheet-stack { display: grid; justify-content: center; gap: 28px; padding: 14px 0 60px; }
.a4-sheet { position: relative; width: 210mm; height: 297mm; overflow: hidden; padding: 15mm 15mm 21mm; background: var(--paper); box-shadow: 0 10px 35px rgba(24,49,42,.18); page-break-after: always; break-after: page; }
.sheet-top { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12mm; padding-bottom: 5mm; border-bottom: 1.5px solid #bbd2b4; }
.sheet-top h2 { margin: 0; font: 800 23pt/1 Georgia, serif; color: var(--grass-dark); }
.sheet-meta { margin: 2mm 0 0; font-size: 8.5pt; color: #53675e; }
.materials { max-width: 88mm; padding: 3mm 4mm; border-radius: 4mm; background: #eef7e9; font-size: 8.5pt; line-height: 1.35; }
.materials strong { display: block; margin-bottom: 1mm; color: var(--grass-dark); }
.task-list { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); height: 230mm; }
.task-card { display: grid; grid-template-columns: 1fr 91mm; grid-template-rows: auto auto; column-gap: 6mm; row-gap: 2mm; align-items: center; padding: 5mm 2mm; border-bottom: 1px dashed #b8c9b3; }
.task-card:last-child { border-bottom: 0; }
.task-card h3 { margin: 0 0 3mm; font-size: 14pt; color: var(--grass-dark); }
.task-card p { margin: 2mm 0; font-size: 10pt; line-height: 1.38; }
.task-response { grid-column: 1 / -1; width: 100%; align-self: end; }
.answer-lines { margin-top: 1mm; font-size: 9.5pt; }
.answer-lines > strong { color: var(--grass-dark); }
.answer-fields { display: flex; flex-wrap: wrap; gap: 5mm 15mm; margin-top: 3mm; }
.answer-fields span { display: inline-block; white-space: nowrap; }
.given-box { margin: 3mm 0; padding: 2.5mm 3mm; border: 1px solid #bfd1b9; border-radius: 3mm; background: #f7fbf4; font-size: 8.7pt; }
.given-box strong { color: var(--grass-dark); }
.given-box ul { margin: 1.5mm 0 0; padding-left: 5mm; line-height: 1.45; }
.working-space { min-height: 12mm; margin-top: 2mm; padding-top: 1mm; color: #53675e; font-size: 9pt; }
.triangle { width: 100%; height: auto; }
.triangle .grid { stroke: #dce6d8; stroke-width: 1; }
.triangle .shape { fill: #f4b94222; stroke: #c76535; stroke-width: 3; stroke-linejoin: round; }
.triangle .height { stroke: #376657; stroke-width: 2; stroke-dasharray: 5 4; }
.triangle .point { fill: #225f39; stroke: white; stroke-width: 2; }
.triangle text { font: 700 14px Arial, sans-serif; fill: #25483c; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.answer-sheet .task-card { background: linear-gradient(90deg, transparent, #eef7e966, transparent); }
.answer-box { padding: 3mm; border-left: 3px solid var(--grass); background: #f1f8ee; font-size: 9.5pt; line-height: 1.55; }
.answer-box strong { color: var(--grass-dark); }
.grass-border { position: absolute; left: 0; right: 0; bottom: 0; height: 15mm; background: var(--grass); clip-path: polygon(0 100%,0 65%,2% 78%,3% 25%,4% 70%,6% 38%,7% 84%,9% 18%,10% 75%,12% 48%,14% 82%,16% 22%,18% 72%,20% 35%,22% 86%,24% 16%,26% 76%,28% 42%,30% 90%,32% 25%,34% 75%,36% 37%,38% 83%,40% 18%,42% 74%,44% 44%,46% 88%,48% 24%,50% 72%,52% 32%,54% 84%,56% 17%,58% 76%,60% 42%,62% 88%,64% 26%,66% 75%,68% 36%,70% 82%,72% 15%,74% 76%,76% 46%,78% 88%,80% 22%,82% 73%,84% 38%,86% 83%,88% 18%,90% 74%,92% 45%,94% 88%,96% 25%,98% 72%,100% 42%,100% 100%); }
.page-no { position: absolute; right: 13mm; bottom: 5mm; z-index: 2; color: white; font-size: 8pt; font-weight: 800; }
.print-students .answer-sheet, .print-answers .student-sheet { display: none !important; }
@media (max-width: 900px) { .generator-panel { grid-template-columns: 1fr 1fr; } .a4-sheet { transform: scale(.72); transform-origin: top center; margin-bottom: -83mm; } }
@media (max-width: 1120px) { .generator-head { margin-right: 18px; margin-left: 18px; } }
@media (max-width: 640px) { .generator-head { display: flex; flex-wrap: wrap; } .generator-head > div { flex: 1 1 100%; } .generator-panel { grid-template-columns: 1fr; } .print-actions button { width: 100%; } .a4-sheet { transform: scale(.47); margin-bottom: -157mm; } }
@page { size: A4 portrait; margin: 0; }
@media print {
  body { background: white !important; }
  .generator-head, .generator-panel, .print-actions { display: none !important; }
  .sheet-stack { display: block; padding: 0; }
  .a4-sheet { margin: 0; box-shadow: none; }
}