: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(5, minmax(3rem, 1fr)); gap: .25rem; max-width: 20rem; }.cell { min-height: 3rem; border: 1px solid #64748b; background: #fff; color: #172033; font-size: 1.2rem; touch-action: manipulation; }.cell.wall { background: #334155; color: #fff; }.cell.start { color: #15803d; font-weight: 900; }.cell.goal { color: #dc2626; font-weight: 900; }.actions { display: flex; gap: .5rem; margin-top: .8rem; }button { min-height: 2.7rem; padding: .35rem .65rem; }
@media (prefers-color-scheme: dark) { body { background: #111827; color: #e5e7eb; }.cell { background: #1f2937; color: #f9fafb; }.cell.wall { background: #030712; } }