.parity-intro { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); margin: 24px 0 32px; padding-bottom: 16px; }
.parity-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
.parity-intro-board { margin: 4px 0 12px; padding: 10px; }
.parity-intro-board .boardbox { width: 100%; margin: 12px 0; }
.parity-intro-board .ex-head { flex-wrap: wrap; gap: 4px; }
.parity-intro .board .sq { box-shadow: none; transform: none; }
.parity-intro .board button.sq:disabled { opacity: 1; cursor: default; }
.parity-intro .board .sq.last .disc::after { content: ''; position: absolute; inset: 42%; background: var(--hl); }
.parity-intro .parity-region { margin-bottom: 0; font-size: 13px; }
.parity-answer { padding-top: 4px; }
.parity-intro .parity-out { font-size: 17px; font-weight: 700; line-height: 1.7; }
.parity-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.parity-controls[hidden], .parity-comparison[hidden] { display: none; }
.parity-next[hidden] { display: none; }
.parity-controls .btn { min-height: 44px; white-space: normal; font-size: 13px; }
.parity-table { overflow-x: auto; }
.parity-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.parity-table th, .parity-table td { padding: 9px 8px; border-bottom: 1px solid var(--rule); text-align: left; }
.parity-table thead th { font-size: 12px; color: var(--muted); }
.parity-table tbody th { font-family: var(--mono); }
.parity-intro .parity-limit, .parity-intro .parity-method { font-size: 12px; color: var(--ink-2); }
.parity-practice { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-left: 20px; }
@media (max-width: 620px) {
  .parity-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .parity-intro-board { max-width: 340px; }
  .parity-answer { padding-top: 0; }
}