: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(5, minmax(2.9rem, 1fr)); gap: .2rem; }.cell { min-height: 2.9rem; border: 1px solid #64748b; background: #fff; color: #172033; font-size: 1.25rem; font-weight: 800; }.cell.wall { background: #475569; }.cell.player { background: #93c5fd; }.cell.gem { color: #b45309; }.cell.exit { outline: 2px solid #16a34a; }.directions { display: grid; grid-template-columns: repeat(3, 3rem); gap: .2rem; margin-top: .7rem; }.directions button { min-height: 2.6rem; }.directions #up { grid-column: 2; }.directions #left { grid-column: 1; }.directions #down { grid-column: 2; }.directions #right { grid-column: 3; }.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.wall { background: #334155; } }
body.experiment-shell main { width: min(100% - 24px, 24rem); max-width: 24rem; }
body.experiment-shell #board { width: 100%; max-width: 24rem; }
body.experiment-shell .directions { width: fit-content; margin: .7rem auto 0; }