*{box-sizing:border-box;margin:0;padding:0}body{background-color:#f4f4f4;font-family:sans-serif}.header{padding-block:1rem;background-color:#333;box-shadow:0 4px 8px #00000080}.header__title{text-align:center;color:#fff}.main{padding:1.5rem .5rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.controls{display:flex;flex-direction:column;gap:1rem}.controls__row{display:flex;gap:.75rem}.controls__row--grid-size{flex-direction:column;align-items:center}.controls__color{display:flex;align-items:center;gap:.5rem}.controls__input--color{width:50px;height:25px;border:none;cursor:pointer}.controls__input--color::-moz-color-swatch{border:none}.controls__input--color::-webkit-color-swatch{border:none;border-radius:0}.controls__input--color::-webkit-color-swatch-wrapper{padding:0}.controls__input--range{appearance:none;width:100%;height:8px;background-color:#ddd;border-radius:4px;cursor:pointer}.controls__input--range::-moz-range-thumb{width:20px;height:20px;background-color:#333;border:none;border-radius:50%}.controls__input--range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background-color:#333;border-radius:50%}.controls__btn{flex:1;padding-block:.5rem;background-color:#eee;border:1px solid #999;border-radius:4px;color:#000;font-family:inherit;font-size:1rem;cursor:pointer;transition:background-color .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent}.controls__btn--selected{background-color:#555;color:#fff}.canvas{display:grid;width:min(100%,600px);aspect-ratio:1 / 1;background-color:#fff;-webkit-user-select:none;user-select:none}.canvas--grid-lines{border-top:1px solid #333;border-right:1px solid #333}.canvas--grid-lines .canvas__cell{border-bottom:1px solid #333;border-left:1px solid #333}.canvas__cell{cursor:crosshair;transition:background-color .2s ease}@media(min-width:768px){.main{flex-direction:row;justify-content:center}.controls{flex-shrink:0}.controls__row{flex-direction:column}.controls__row--grid-size{margin-bottom:2.5rem}}@media(hover:hover)and (pointer:fine){.controls__btn:hover{background-color:#ddd}.controls__btn--selected:hover{background-color:#444}}