@layer parts {
  .ql { border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; background: var(--paper); }
  .qstate { margin-bottom: 1.5rem; }
  .ql fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  .ql legend { font-weight: 700; color: var(--deep); margin-bottom: 1rem; padding: 0; }
  .qi { display: flex; align-items: flex-start; gap: 1rem; min-height: 56px; border-top: 1px solid var(--line); padding-block: 1rem; cursor: pointer; }
  .qi input { appearance: none; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; border: 1px solid var(--ink); border-radius: .5rem; background: var(--bg); cursor: pointer; }
  .qi input:checked { background: var(--deep); border-color: var(--deep); }
  .qi input:checked::after { content: "✓"; display: block; color: var(--bg); font: 700 1.25rem/42px var(--body); text-align: center; }
  .qi:has(input:checked) span { text-decoration: underline; text-underline-offset: .25em; color: var(--deep); }
  .qtools { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .75rem; padding-top: 1.5rem; }
  .qtools button { min-height: 48px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); padding: .75rem 1rem; transition: background-color 200ms; }
  .qtools button:hover { background: var(--wash); }
  .qnote, .qcopy { margin-top: 1.25rem; font-size: 1rem; }
  #q-manual { margin-top: 1.5rem; }
  #q-manual label { display: block; margin-bottom: .5rem; }
  #q-text { display: block; width: 100%; min-height: 160px; background: var(--bg); color: var(--ink); border: 1px solid var(--ink); border-radius: .5rem; padding: .75rem; }
}

@layer print {
  @media print {
    .qtools, .qnote, .qcopy, #q-manual, .qstate { display: none !important; }
    .ql { border: 0; padding: 0; }
    .qi { break-inside: avoid; padding-block: .75rem; }
    .qi input { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  }
}