* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #1f2933; background: #f6f7f9; line-height: 1.5; }
a { color: #0b5cad; }
.top, main, .foot { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.top { padding-top: 24px; }
h1 { font-size: 1.7rem; margin: 0 0 8px; }
h2 { font-size: 1.25rem; margin: 0 0 8px; }
.lead { font-size: 1.05rem; }
.facts { background: #fff; border: 1px solid #d5dae1; border-radius: 6px; padding: 12px 12px 12px 32px; }
.tool, .info { background: #fff; border: 1px solid #d5dae1; border-radius: 6px; padding: 16px; margin: 16px 0; }
.grid-form { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr; gap: 8px 12px; align-items: center; }
.grid-form select, .grid-form input, .grid-form textarea, .unlock input { width: 100%; padding: 6px; font: inherit; border: 1px solid #aeb6c1; border-radius: 4px; }
.buttons { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
button { font: inherit; padding: 8px 16px; border: 1px solid #0b5cad; background: #0b5cad; color: #fff; border-radius: 4px; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: default; }
.status { min-height: 1.5em; font-weight: 600; }
.unlock { border-top: 1px solid #e1e5ea; margin-top: 12px; padding-top: 8px; display: grid; grid-template-columns: 1fr; gap: 6px; }
.unlock h3 { margin: 0; }
.small { font-size: 0.85rem; color: #52606d; margin: 0; }
.cmp { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.cmp th, .cmp td { border: 1px solid #d5dae1; padding: 6px 8px; text-align: left; vertical-align: top; }
.cmp thead th { background: #eef1f5; }
a.buy { display: inline-block; padding: 8px 16px; background: #0b5cad; color: #fff; border-radius: 4px; text-decoration: none; }
.foot { padding-bottom: 32px; color: #52606d; }

.output { margin: 16px auto; }
.puzzle, .answers { background: #fff; color: #000; border: 1px solid #c4cbd4; padding: 16px; margin: 0 auto 16px; }
body.fmt-6x9 .puzzle, body.fmt-6x9 .answers { max-width: 6in; }
body.fmt-letter .puzzle, body.fmt-letter .answers { max-width: 8.5in; }
.puzzle h2, .answers h2 { font-size: 15pt; margin: 0 0 4px; }
.meta { font-size: 9pt; color: #444; margin: 0 0 6px; }
.how { font-size: 9.5pt; margin: 0 0 8px; }
.clues { font-size: 10pt; margin: 0 0 10px; padding-left: 22px; }
.clues li { margin-bottom: 2px; }
.matrices { display: flex; flex-wrap: wrap; gap: 10px; }
.matrix { border-collapse: collapse; font-size: 7.5pt; break-inside: avoid; }
.matrix caption { font-weight: 700; text-align: left; font-size: 8pt; padding-bottom: 2px; }
.matrix th, .matrix td { border: 1px solid #000; padding: 1px 3px; }
.matrix td { width: 0.22in; height: 0.22in; }
.matrix th.vert { writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; font-weight: 400; height: 0.85in; }
.matrix th.rowh { text-align: left; font-weight: 400; white-space: nowrap; }
.ws { border-collapse: collapse; margin: 6px auto 10px; font-family: "Courier New", monospace; font-weight: 700; }
.ws td { width: 0.27in; height: 0.27in; text-align: center; font-size: 11pt; padding: 0; }
.wordlist { columns: 3; font-size: 10pt; list-style: none; padding: 0; margin: 0 0 8px; }
.blank { font-size: 10pt; }
.key { margin-bottom: 14px; break-inside: avoid; }
.key h3 { font-size: 11pt; margin: 6px 0; }
.keytable { border-collapse: collapse; font-size: 9pt; }
.keytable th, .keytable td { border: 1px solid #000; padding: 2px 6px; text-align: left; }
.key .ws td { width: 0.2in; height: 0.2in; font-size: 8pt; }
.ws td.hit { background: #cfd6dd; }
.ws td.free { background: #fff; border: 1px solid #000; }
.sentence { font-size: 10pt; }
.watermark { text-align: center; font-size: 9pt; color: #666; margin: 10px 0 0; letter-spacing: 0.08em; text-transform: uppercase; }

@page six { size: 6in 9in; margin: 0.4in; }
@page letter { size: 8.5in 11in; margin: 0.5in; }

@media print {
  body { background: #fff; }
  .no-print { display: none; }
  main { max-width: none; padding: 0; margin: 0; }
  .output { margin: 0; }
  .puzzle, .answers { border: none; padding: 0; margin: 0; max-width: none; break-after: page; page-break-after: always; }
  .answers { break-after: auto; page-break-after: auto; }
  body.fmt-6x9 .puzzle, body.fmt-6x9 .answers { page: six; max-width: none; }
  body.fmt-letter .puzzle, body.fmt-letter .answers { page: letter; max-width: none; }
}

@media (max-width: 560px) {
  .grid-form { grid-template-columns: 1fr; }
  .wordlist { columns: 2; }
}