: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 { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }.palette button { min-height: 2.7rem; padding: .35rem .65rem; }.board { display: grid; grid-template-columns: repeat(6, minmax(2.8rem, 1fr)); gap: .2rem; max-width: 26rem; }.cell { min-height: 2.8rem; border: 1px solid #64748b; background: #fff; color: #172033; }.stage-1 { background: #bfdbfe; }.stage-2 { background: #bbf7d0; }.stage-3 { background: #fde68a; }.stage-4 { background: #fbcfe8; }.arrow { font-weight: 800; }
body.experiment-shell .palette { width:min(100%,26rem); margin:.6rem auto; justify-content:center; }
@media (prefers-color-scheme: dark) { body { background: #111827; color: #e5e7eb; }.cell { background: #1f2937; color: #f9fafb; } }