:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; padding: 1rem; background: #f4f5f7; color: #172033; }main { max-width: 36rem; margin: 0 auto; }
.palette,.actions { display: flex; flex-wrap: wrap; gap: .35rem; margin: .75rem 0; }.palette button,.actions button { min-height: 2.75rem; padding: .3rem .6rem; }
body.experiment-shell .palette, body.experiment-shell .actions { width: min(100%, 28rem); margin-right: auto; margin-left: auto; justify-content: center; }
.board { display: grid; grid-template-columns: repeat(5, minmax(2.8rem, 1fr)); gap: .2rem; max-width: 28rem; }.cell { min-height: 3.2rem; border: 1px solid #64748b; background: #fff; color: #172033; touch-action: manipulation; }.cell.clue { font-weight: 800; outline: 3px solid #0ea5e9; outline-offset: -4px; }.cell.selected { box-shadow: inset 0 0 0 3px #0284c7; }.region-0 { background: #bfdbfe; }.region-1 { background: #bbf7d0; }.region-2 { background: #fde68a; }.region-3 { background: #fbcfe8; }.region-4 { background: #ddd6fe; }.region--1 { background: #fff; }
@media (prefers-color-scheme: dark) { body { background: #111827; color: #e5e7eb; }.region-0 { background: #1e3a8a; }.region-1 { background: #14532d; }.region-2 { background: #854d0e; }.region-3 { background: #831843; }.region-4 { background: #4c1d95; }.region--1 { background: #1f2937; } }