:root { color-scheme: light dark; font-family: system-ui, sans-serif; }body { margin: 0; padding: 1rem; background: #f4f5f7; color: #172033; }main { max-width: 32rem; margin: 0 auto; }.board { display: grid; grid-template-columns: repeat(4, minmax(3.4rem, 1fr)); gap: .3rem; max-width: 19rem; }.cell { min-height: 3.3rem; border: 1px solid #64748b; background: #fff; color: #172033; font-size: 1.1rem; }.room-0 { border-color: #2563eb; }.room-1 { border-color: #16a34a; }.room-2 { border-color: #d97706; }.room-3 { border-color: #db2777; }.circle { border-radius: 50%; background: #bfdbfe; }.circle-1 { background: #bbf7d0; }.circle-2 { background: #fde68a; }.circle-3 { background: #fbcfe8; }.selected { outline: 3px solid #0f172a; }.controls { display: flex; gap: .4rem; margin: .65rem 0; }.controls button { min-width: 3.5rem; min-height: 2.7rem; }
@media (prefers-color-scheme: dark) { body { background: #111827; color: #e5e7eb; }.cell { background: #1f2937; color: #f9fafb; } }