body.doc { position: static; overflow: auto; height: auto; min-height: 100%; padding: calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 24px); }
.controls { max-width: 560px; margin: 0 auto 24px; display: grid; gap: 12px; }
.controls h1 { margin: 8px 0 0; font-size: 24px; }
.controls .lead { margin: 0; }
.controls .btn { justify-self: start; }
.controls .grid { display: grid; gap: 12px; }
.controls .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.controls label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.hint { margin: 0; font-size: 14px; color: var(--muted); }
.hint strong { color: var(--text); }
.error { max-width: 560px; margin: 0 auto 16px; }

.sheet { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sheet h2 { flex-basis: 100%; margin: 8px 0 0; font-size: 16px; text-align: center; }
.marker { background: #fff; color: #111; padding: 0; text-align: center; font: 12px/1.3 system-ui, sans-serif; break-inside: avoid; border-radius: 6px; }
.marker svg { display: block; }
.marker figcaption { padding: 4px 0 8px; }
.marker { margin: 0; }

@media print {
  html, body, body.doc { background: #fff !important; color: #000; height: auto; position: static; overflow: visible; padding: 0; }
  .screen-only { display: none !important; }
  @page { margin: 10mm; }
  .sheet { gap: 6mm; justify-content: flex-start; }
  .sheet h2 { color: #000; text-align: left; font-size: 11pt; }
  .marker { border-radius: 0; outline: 0.2mm dashed #888; }
}