:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#f5f6fa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%}h1{font-size:2em;line-height:1.2}button{font-family:inherit}.app{max-width:1200px;margin:0 auto;padding:2rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}h1{color:#2c3e50;margin-bottom:.5rem}h3{color:#34495e;margin-top:1.5rem;margin-bottom:.75rem}.description{color:#7f8c8d;max-width:600px;margin-bottom:2rem}.controls-panel{min-width:280px;max-width:400px;margin-bottom:2rem}.grid-panel{display:block}input[type=number]{padding:6px 8px;border:1px solid #bdc3c7;border-radius:4px;font-size:14px}input[type=number]:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db33}button{transition:all .2s ease}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 8px #00000026}button:active:not(:disabled){transform:translateY(0)}.grid-container div:hover{opacity:.85}@media(max-width:768px){.controls-panel{width:100%}}