@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";
*{box-sizing:border-box}html,body{color:#f8f0df;background:#101010;margin:0;font-family:"Press Start 2P",monospace}button,input{font-family:inherit}main{width:min(1100px,100vw - 32px);margin:0 auto;padding:32px 0}h1{text-transform:uppercase;margin:0 0 24px;font-size:24px;line-height:1.4}.topbar{grid-template-columns:1fr repeat(6,auto);gap:8px;margin-bottom:18px;display:grid}input,button{color:#f8f0df;image-rendering:pixelated;background:#181818;border:4px solid #3a3328;border-radius:0;padding:14px;font-size:10px}button{cursor:pointer;background:#2b261d}button:hover:not(:disabled){background:#3a3328}button:disabled{opacity:.35;cursor:not-allowed}.error{color:#ffb0b0;background:#2a0a0a;border:4px solid #702020;padding:16px;font-size:10px;line-height:1.8}.stage{background:#181818;border:4px solid #3a3328;gap:16px;padding:16px;display:grid}canvas{aspect-ratio:1;width:100%;max-width:640px;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;border:4px solid #000;margin:0 auto;display:block}.caption{text-align:center;justify-content:center;gap:16px;font-size:10px;line-height:1.6;display:flex}.paletteGrid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.paletteStrip{border:4px solid #28231b;grid-template-columns:repeat(4,1fr);height:34px;padding:0;display:grid;overflow:hidden}.paletteStrip span{height:100%;display:block}.paletteStrip.active{border-color:#f8f0df}.currentMap{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.mapItem{border:4px solid #28231b;grid-template-columns:1fr 1fr;height:32px;display:grid}.mapItem span{display:block}@media (max-width:800px){.topbar{grid-template-columns:repeat(2,1fr)}.topbar input{grid-column:span 2}.paletteGrid{grid-template-columns:repeat(2,1fr)}h1{font-size:16px}}