.page-head { display: flex; flex-direction: column; gap: 10px; padding: 20px 4px 0; }
.rules { display: grid; gap: 10px; }
.rule { display: flex; gap: 12px; align-items: flex-start; }
.pos { color: var(--c-accent-text); font-weight: 600; }
.neg { color: var(--c-text-2); }
.who { display: flex; align-items: center; gap: 10px; }
.ava { width: 32px; height: 32px; border-radius: 16px; background: var(--c-emblem); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--c-text-2); }
.is-ai .ava { background: var(--c-accent); color: var(--c-on-accent); }
.dtable tr.is-thin td { color: var(--c-text-2); }
@media (max-width: 1023px) {
  .dtable thead { display: none; }
  .dtable tr { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px 8px; padding: 14px 0; }
  .dtable tr.is-ai { padding: 14px 12px; margin: 4px -12px; border-radius: 14px; border-top: 0; }
  .dtable td { padding: 0 !important; text-align: left; display: flex; flex-direction: column; gap: 2px; }
  .dtable td.l { grid-column: 1 / -1; margin-bottom: 6px; }
  .dtable td[data-k]::before { content: attr(data-k); font-size: 11px; color: var(--c-text-2); font-weight: 400; }
  .scroll-x { overflow: visible; margin: 0; padding: 0; }
}
@media (min-width: 1024px) { .page-head { padding: 0; max-width: 760px; } .rules { grid-template-columns: repeat(3, minmax(0,1fr)); } .scroll-x { margin: 0; padding: 0; } }