:root { --maxw: 900px; --gap: 14px; --task-h: 180px; --pad: 10px; --font: "Segoe UI", Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 18px; text-align: center; font-family: var(--font); }
h1 { margin: 4px 0 12px; }
.controls { margin: 12px 0 14px; }
button { margin: 6px; padding: 8px 14px; font-size: 16px; cursor: pointer; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); max-width: var(--maxw); margin: 0 auto; }
.task { position: relative; display: flex; flex-direction: column; min-height: var(--task-h); padding: var(--pad); border: 2px solid #bbb; border-radius: 10px; text-align: left; }
.head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.opgnr { font-size: 14px; font-weight: 600; }
.expr { font-size: 26px; font-weight: 600; text-align: right; }
.workspace { flex: none; height: 112px; border: 1px dashed #c9c9c9; border-radius: 6px; background-color: #fff; background-image: linear-gradient(to right, #e6e6e6 1px, transparent 1px), linear-gradient(to bottom, #e6e6e6 1px, transparent 1px); background-size: 25px 28px; }
.answer { display: none; position: absolute; right: 10px; bottom: 8px; padding: 2px 6px; border: 1px solid #ddd; border-radius: 6px; background: #fff; font-size: 16px; }
.show-answers .answer { display: inline-block; }
@media print {
  @page { size: A4; margin: 8mm; }
  .controls { display: none; }
  body { margin: 0; }
  .grid { gap: 10px; }
}