/* Lembar A4. Pratinjau memakai ukuran asli yang diperkecil dengan --scale,
   jadi tampilan di HP sama dengan hasil cetak. */
:root { --scale: 1; }
#sheets { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sheet {
  --tone: #7C5CE0; --tint: #efeafd;
  flex: none; width: 210mm; height: 297mm; padding: 11mm 13mm 8mm; background: #fff; color: #2d2a32; overflow: hidden;
  display: flex; flex-direction: column; font: 700 15pt/1.25 Nunito, "Segoe UI", Arial, sans-serif;
  zoom: var(--scale); box-shadow: 0 1px 6px rgba(45, 42, 50, .22);
}
.sheet.tone1 { --tone: #E0559A; --tint: #fdeaf3; } .sheet.tone2 { --tone: #2F8FD8; --tint: #e6f2fc; } .sheet.tone3 { --tone: #2FA36B; --tint: #e3f6ec; }
.sheet.mono { --tone: #2d2a32; --tint: #fff; }
.sheet em { font-style: normal; font-weight: 600; opacity: .68; font-size: .78em; }
.sheet svg { display: block; }

.sh-head { flex: none; }
.sh-title { background: var(--tone); color: #fff; border-radius: 5mm; padding: 2.4mm 6mm; font: 600 22pt/1.2 Fredoka, Nunito, Arial, sans-serif; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sheet.mono .sh-title { background: #fff; color: #2d2a32; border: .6mm solid #2d2a32; }
.sh-title em { color: inherit; opacity: .85; }
.sh-who { display: flex; gap: 6mm; margin-top: 3.4mm; font-size: 12.5pt; }
.sh-who span { display: flex; flex: 1; gap: 2mm; white-space: nowrap; } .sh-who span:last-child { flex: .62; }
.sh-who em { display: none; }
.sh-who u { flex: 1; min-width: 0; text-decoration: none; border-bottom: .35mm solid #2d2a32; font-weight: 800; padding-left: 1mm; overflow: hidden; }
.sh-hint { flex: none; margin: 3mm 0; padding: 2mm 4mm; background: var(--tint); border-left: 1.4mm solid var(--tone); border-radius: 2mm; font-size: 13.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sheet.mono .sh-hint { padding-left: 3mm; }
.sh-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sh-foot { flex: none; display: flex; justify-content: space-between; margin-top: 2mm; font-size: 9pt; color: #6d6877; font-weight: 700; }

.pic { display: inline-block; flex: none; vertical-align: middle; }
.pic svg { width: 100%; height: 100%; }
.rows { flex: 1; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 2.4mm; }
.row { display: flex; align-items: center; gap: 4mm; min-height: 0; min-width: 0; padding: 1.6mm 3mm; border: .35mm solid #d9d4e2; border-radius: 3.5mm; }
.row.stack { flex-direction: column; align-items: stretch; justify-content: center; gap: 1.4mm; }
.row .row { border: 0; padding: 0; }
.row.spread { justify-content: space-around; }
.rows > .row.spread { padding: 2mm 3mm; }
.row.base { align-items: flex-end; }
.row.trace { padding: 1mm 3mm; }
.grow { flex: 1; min-width: 0; }
.items { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6mm; min-width: 0; }
.items.narrow { flex: 1; justify-content: center; }
.items.tight { flex-wrap: nowrap; gap: 1mm; }
.opts { display: flex; flex: none; gap: 3mm; }
.opts.pics { padding-left: 3mm; border-left: .35mm dashed #b9b4c2; gap: 1.6mm; }
.ring { display: grid; place-items: center; width: 13mm; height: 13mm; border: .4mm solid #2d2a32; border-radius: 50%; font: 600 19pt Fredoka, Nunito, Arial, sans-serif; background: #fff; }
.box { flex: none; display: block; width: 19mm; height: 19mm; border: .55mm solid #2d2a32; border-radius: 2.5mm; background: #fff; font-style: normal; }
.box.sm { width: 15mm; height: 13mm; }
.box.q { display: grid; place-items: center; width: 15mm; height: 15mm; border-style: dashed; font: 600 20pt Fredoka, Nunito, Arial, sans-serif; }
.big { font: 600 30pt/1 Fredoka, Nunito, Arial, sans-serif; }
.word { font: 600 19pt Fredoka, Nunito, Arial, sans-serif; letter-spacing: .3mm; }
.op { flex: none; font: 600 26pt Fredoka, Nunito, Arial, sans-serif; }
.sum { flex: none; font: 600 20pt Fredoka, Nunito, Arial, sans-serif; white-space: nowrap; }
.ask { font-size: 15pt; } .ask .big { font-size: 22pt; padding: 0 1mm; }
.ask em { font-size: .8em; }

.shape { flex: none; width: 28mm; height: 28mm; }
.wl { width: 100%; height: auto; max-height: 100%; }
.trace .grow { display: flex; align-items: center; height: 100%; min-height: 0; }

.grid { flex: 1; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 2.6mm; }
.g2 { grid-template-columns: 1fr 1fr; }
.cell { min-width: 0; min-height: 0; padding: 2mm 3mm; border: .35mm solid #d9d4e2; border-radius: 3.5mm; display: flex; }
.cell.split { align-items: center; gap: 2mm; }
.cell.split .box { width: 15mm; height: 15mm; }
.cell.col { flex-direction: column; align-items: center; justify-content: space-around; gap: 1.6mm; }

.match { border: 0; padding: 0 3mm; }
.side { flex: none; width: 66mm; display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
.side.end { justify-content: flex-end; width: auto; min-width: 30mm; }
.side .items { justify-content: flex-start; }
.dot { flex: none; width: 3.4mm; height: 3.4mm; border-radius: 50%; background: #2d2a32; }

.scatterbox { flex: 1; min-height: 0; display: grid; place-items: center; border: .45mm solid #b9b4c2; border-radius: 4mm; padding: 2mm; }
.scatter { display: block; }
.tallies { flex: none; display: flex; justify-content: space-around; margin-top: 3mm; }
.tally { display: flex; align-items: center; gap: 2mm; }

.cross { position: relative; display: inline-block; line-height: 0; }
.cross::before, .cross::after { content: ""; position: absolute; left: 50%; top: 50%; width: 118%; height: .8mm; background: #2d2a32; }
.cross::before { transform: translate(-50%, -50%) rotate(45deg); } .cross::after { transform: translate(-50%, -50%) rotate(-45deg); }

.drill { display: flex; align-items: center; gap: 2.6mm; padding: 0 4mm; border: .35mm solid #d9d4e2; border-radius: 3.5mm; font: 600 20pt Fredoka, Nunito, Arial, sans-serif; min-height: 0; }
.drill small { width: 8mm; font: 700 11pt Nunito, Arial, sans-serif; color: #6d6877; }
.drill span { flex: 1; white-space: nowrap; }

.spell { display: flex; align-items: flex-end; gap: 1.2mm; font: 600 23pt/1 Fredoka, Nunito, Arial, sans-serif; }
.slot { display: block; width: 8mm; height: 9mm; border-bottom: .6mm solid #2d2a32; }

.fill { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.fill.col { flex-direction: column; gap: 2mm; }
.dots { width: 100%; height: 100%; }
.bigpic { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; }
.bigpic svg { height: 100%; width: auto; max-width: 100%; }
.pair { flex: none; display: flex; justify-content: center; gap: 22mm; }
.caption { flex: none; height: 27mm; margin-top: 2mm; display: flex; justify-content: center; }
.caption .wl { height: 100%; width: auto; }

.mazebox { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mz-top, .mz-end { flex: none; display: flex; align-items: center; gap: 2mm; font: 600 13pt Fredoka, Nunito, Arial, sans-serif; }
.mz-end { justify-content: flex-end; }
.maze { flex: 1; min-height: 0; width: 100%; }

.keycols { display: block; columns: 2; column-gap: 8mm; }
.ans { break-inside: avoid; margin-bottom: 3mm; font-size: 10.5pt; line-height: 1.35; }
.ans b { display: block; font-weight: 800; }
.ans p { margin: .6mm 0 0; font-weight: 600; }
.maze-mini { width: 40mm; height: auto; margin-top: 1mm; }

@page { size: A4 portrait; margin: 0; }
@media print {
  html, body { background: #fff !important; margin: 0; padding: 0; }
  #app { max-width: none; margin: 0; padding: 0 !important; }
  .ptools, .top, .cta { display: none !important; }
  #v-preview { display: block !important; }
  #sheets { display: block; gap: 0; }
  .sheet { zoom: 1; box-shadow: none; break-after: page; page-break-after: always; }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
}