:root { color-scheme: light dark; font-family: system-ui, sans-serif; } body { margin: 0; padding: 1rem; background: #f4f5f7; color: #172033; } main { max-width: 24rem; margin: 0 auto; }.board { display: grid; grid-template-columns: repeat(4, minmax(3rem, 1fr)); gap: .2rem; }.cell { min-height: 3.2rem; border: 1px solid #64748b; background: #fff; color: #172033; font-size: 1.15rem; font-weight: 700; }.cell.water { background: #7dd3fc; }.cell.source, .cell.drain { outline: 2px solid #0284c7; }.controls { display: flex; gap: .4rem; margin: .7rem 0; }.controls button { min-height: 2.6rem; padding: .3rem .6rem; } @media (prefers-color-scheme: dark) { body { background: #111827; color: #e5e7eb; }.cell { background: #1f2937; color: #f9fafb; }.cell.water { background: #075985; } }
body.experiment-shell main { width: min(100% - 24px, 24rem); max-width: 24rem; }
body.experiment-shell #board { width: 100%; max-width: 24rem; }