.puzzle-page { width: min(1240px, 100%); }
.puzzle-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.puzzle-toolbar .tabs { margin: 0; }
.inline-field { display: flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; }
.seed-group, .end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.end-actions { margin-left: auto; }
/* Sized to a 16-character random seed; grows with longer typed seeds where supported. */
#seed { width: calc(16ch + 1rem + 2px); min-height: 2.4rem; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; }
@supports (field-sizing: content) {
  #seed { field-sizing: content; width: auto; min-width: calc(8ch + 1rem + 2px); max-width: 100%; }
}
#error, #status { margin: .5rem 0 0; }
#status:empty { display: none; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:disabled:hover { border-color: var(--border); background: var(--surface); }
.puzzle-sheet { width: min(640px, 100%, max(320px, 100svh - 14rem)); margin: 1rem auto 0; padding: clamp(.4rem, 1.5vw, .75rem); background: #fff; color: #1d1d1f; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.puzzle-sheet canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.puzzle-print-title, .puzzle-seed { display: none; }
.puzzle-sheet[aria-busy="true"] canvas { opacity: .45; }

@media print {
  .puzzle-sheet { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; text-align: center; }
  .puzzle-print-title { display: block; margin: 0 0 .25rem; font-size: 14px; font-weight: 700; }
  .puzzle-seed { display: block; margin: 0 0 6mm; font: 800 20px/1.2 Consolas, Menlo, "Courier New", monospace; letter-spacing: .12em; font-variant-numeric: slashed-zero; }
  .puzzle-sheet canvas { width: auto; max-width: 100%; max-height: 225mm; margin: 0 auto; break-inside: avoid; }
  .puzzle-sheet .print-footer { text-align: center; }
}