*{box-sizing:border-box;margin:0;padding:0}canvas{image-rendering:pixelated;outline:none;margin:auto}body{font-family:system-ui}main,header,footer{width:800px;margin:auto;padding-inline:8px}footer{margin-bottom:env(safe-area-inset-bottom)}@media (width<=800px){main,header,footer{width:auto}}footer{margin-top:40px}h1{text-align:center}h1,h2,h3,h4,h5,h6{font-weight:400}h2{font-size:1.3rem}ul{margin-top:4px}li{margin-block:4px}main{align-items:stretch;row-gap:8px;margin:auto;display:grid}.m-1{margin:2px}.m-2{margin:4px}button{padding-block:8px;font-size:1.2rem}table{font-variant-numeric:tabular-nums}#color-table :where(th){padding-inline:8px}#color-table :where(th,td){border-bottom:.5px solid #eee}.tabular-nums{font-variant-numeric:tabular-nums}.common-table th,.common-table td{padding:4px}.common-table th{text-align:right}textarea{border-radius:8px;padding:4px}select{border-radius:6px;padding:6px}.display-none{display:none}.btn{color:#000;text-align:center;cursor:pointer;background-color:#fff;border:.5px solid #bbb;border-radius:8px;padding:8px 32px;font-size:16px;text-decoration:none;transition:background-color .3s;display:inline-block}.btn:hover{background-color:#ecefec}.btn:active{background-color:#d5d5d5}.btn:disabled{cursor:auto;background-color:#d5d5d5}.box{border:1px solid #bbb;border-radius:8px;align-items:stretch;gap:8px;width:100%;margin:auto;padding:8px;display:grid}