* { box-sizing: border-box; }
body { font: 16px/1.5 system-ui, sans-serif; margin: 0; background: #f3f4f6; color: #17202a; }
main { max-width: 760px; padding: 24px; margin: auto; }
button, input { font: inherit; padding: 12px; margin: 8px 0; max-width: 100%; }
input { display: block; width: 100%; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
canvas { max-width: 100%; height: auto; }
.key { font-family: monospace; overflow-wrap: anywhere; }
.warning { background: #fff0bd; padding: 12px; }
#code { font-size: 24px; }
.sheet { background: white; padding: 20px; }
.sheet canvas { width: 55mm; height: 55mm; }
h3 { margin-bottom: 4px; }
[hidden] { display: none !important; }
@page { size: A4 portrait; margin: 15mm; }
@media print {
  body { background: white; }
  main { max-width: none; margin: 0; padding: 0; }
  main > h1, .warning, .no-print, #status { display: none !important; }
  .sheet { padding: 0; break-inside: avoid; }
  .sheet .key { font-size: 11pt; }
  .sheet h2 { font-size: 18pt; }
}