:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: #eef3f8; color: #17283b; font-family: Arial, sans-serif; }
.sheet { position: relative; width: 210mm; min-height: 297mm; margin: 16px auto; padding: 12mm; background: #fff; box-shadow: 0 10px 30px #17283b22; }
.sheet-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 7px; border-bottom: 3px solid #2563eb; }
.eyebrow { margin: 0 0 4px; color: #2563eb; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: 24px; }
.name { min-width: 63mm; font-weight: 700; }
.name span { display: inline-block; width: 48mm; margin-left: 5px; border-bottom: 1px solid #17283b; }
.instructions { margin: 10px 0 12px; font-size: 14px; }
.tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8mm; }
.task { position: relative; min-height: 51mm; overflow: hidden; padding: 5mm; border: 1.5px solid #9fb5d0; border-radius: 8px; background: linear-gradient(180deg, #fff, #f7faff); }
.task-number { margin: 0 0 4px; color: #174072; font-size: 12px; font-weight: 800; }
.prompt { margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.25; }
.math-line { display: flex; align-items: center; justify-content: center; min-height: 25mm; font-size: 27px; font-weight: 700; }
.write-line { position: absolute; right: 5mm; bottom: 5mm; left: 5mm; min-height: 7mm; border-bottom: 1.5px solid #64748b; }
.answer { display: none; }
.show-answers .answer { display: block; }
.visual { display: grid; place-items: center; min-height: 29mm; }
.visual svg { display: block; width: 100%; max-width: 52mm; height: 31mm; overflow: visible; }
.shape-task { min-height: 43mm; padding: 3mm 5mm; }
.shape-task .prompt { margin-bottom: 1px; font-size: 13px; }
.shape-task .visual { min-height: 22mm; }
.shape-task .visual svg { height: 22mm; }
.shape-task .write-line { right: 20mm; bottom: 4px; left: 20mm; min-height: 0; }
body[data-kind="shapes"] .tasks { gap: 4mm 8mm; }
.triangle-data { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 2px; font-size: 13px; }
.triangle-task { min-height: 65mm; }
.triangle-task .write-line { bottom: 9px; min-height: 0; }
.rectangle-task { min-height: 65mm; }
.rectangle-task .write-line { bottom: 9px; min-height: 0; }
.temperature-task { min-height: 72mm; }
.temperature-task .visual svg { height: 46mm; }
.bus-task { min-height: 60mm; padding: 3mm 5mm; }
.bus-task .prompt { margin-bottom: 4px; font-size: 13px; }
.bus-task .write-line { bottom: 4px; min-height: 0; }
body[data-kind="bus"] .tasks { gap: 4mm 8mm; }
.bus-decoration { position: absolute; right: 12mm; bottom: 4mm; left: 12mm; display: grid; place-items: center; height: 35mm; overflow: hidden; pointer-events: none; }
.bus-decoration::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 20px;
  left: 0;
  height: 11mm;
  border-top: 2px solid #dbe3ea;
  border-bottom: 2px solid #dbe3ea;
  background:
    repeating-linear-gradient(90deg, transparent 0 14mm, #f8fafc 14mm 25mm, transparent 25mm 39mm) center / auto 2px no-repeat,
    #596773;
}
.bus-decoration svg { position: relative; z-index: 1; display: block; width: 72mm; height: auto; transform: translateY(-6mm); }
.bus-table, .days-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bus-table th, .bus-table td, .days-table th, .days-table td { padding: 4px; border: 1px solid #9fb5d0; text-align: center; }
.bus-table th, .days-table th { background: #eaf1ff; }
.days-task { min-height: 68mm; }
.days-total { position: relative; top: 50px; margin-top: 7px; font-size: 14px; font-weight: 700; }
.unit-task, .negative-task { min-height: 31mm; padding: 3mm 5mm; }
.unit-task .math-line, .negative-task .math-line { min-height: 15mm; font-size: 24px; }
.unit-task .write-line, .negative-task .write-line { bottom: 3mm; }
.multiply-task { min-height: 0; padding: 1.2mm 1.5mm 2.6mm; border-radius: 5px; }
.multiply-task .math-line { min-height: 0; height: 100%; font-size: 16px; white-space: nowrap; }
.multiply-task::after { content: ""; position: absolute; right: 2mm; bottom: 1.4mm; left: 2mm; border-bottom: 1px solid #94a3b8; }
.clock-task { min-height: 66mm; }
.clock-task .visual svg { height: 39mm; }
.digital-time { display: inline-block; padding: 6px 12px; border: 2px solid #334155; border-radius: 6px; background: #eef2f7; font: 700 24px "Courier New", monospace; }
.digital-time-blank { display: inline-grid; grid-template-columns: 28px auto 28px; align-items: end; gap: 3px; min-width: 84px; min-height: 39px; padding: 5px 8px; vertical-align: middle; }
.digital-time-blank > span { display: block; height: 25px; border-bottom: 2px solid #334155; }
.controls { display: flex; justify-content: center; gap: 8px; margin: 14px; }
.controls button { padding: 9px 14px; border: 0; border-radius: 8px; background: #1d4ed8; color: #fff; font-weight: 700; cursor: pointer; }
.controls button:nth-child(2) { background: #dc2626; }
.controls button:nth-child(3) { background: #16834f; }
body[data-kind="units"] .tasks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 3mm 5mm;
  height: 215mm;
}
body[data-kind="units"] .unit-task { min-height: 0; padding: 2mm 5mm 3mm; }
body[data-kind="units"] .unit-task .math-line { min-height: 10mm; font-size: 21px; }
body[data-kind="units"] .unit-task .write-line { bottom: 2mm; min-height: 3mm; }
.ruler-decoration { position: absolute; right: 35mm; bottom: calc(3mm + 20px); left: 35mm; display: grid; place-items: center; pointer-events: none; }
.ruler-decoration svg { display: block; width: 100%; height: 14mm; }
body[data-kind="negative"] .tasks {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: 3mm;
  height: 226mm;
}
body[data-kind="negative"] .negative-task { min-height: 0; padding: 2mm 3mm 3mm; }
body[data-kind="negative"] .negative-task .task-number { margin-bottom: 0; font-size: 10px; }
body[data-kind="negative"] .negative-task .math-line { min-height: 11mm; font-size: 19px; }
body[data-kind="negative"] .negative-task .write-line { right: 3mm; bottom: 2.5mm; left: 3mm; min-height: 4mm; }
body[data-kind="multiplication"] .tasks {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(15, minmax(0, 1fr));
  gap: 2mm;
  height: 229mm;
}
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .sheet { margin: 0; box-shadow: none; }
  .controls { display: none !important; }
}