*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{color:#111;background:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.page{max-width:960px;margin:0 auto;padding:2rem 1.5rem 4rem}.tagline{color:#555;margin-top:-.5rem}.controls{flex-wrap:wrap;align-items:center;gap:1.5rem;margin:1.5rem 0;display:flex}.checkboxes{border:1px solid #ddd;border-radius:6px;align-items:center;gap:1rem;padding:.5rem .9rem;display:flex}.checkboxes legend{letter-spacing:.05em;text-transform:uppercase;color:#777;font-size:.75rem}.checkboxes label{align-items:center;gap:.35rem;display:inline-flex}.palette{border:1px solid #ddd;border-radius:6px;align-items:center;gap:.5rem;padding:.5rem .9rem;display:inline-flex}.palette span{letter-spacing:.05em;text-transform:uppercase;color:#777;font-size:.75rem}.error{color:#b00020}.results{flex-direction:column;gap:2rem;display:flex}.result{margin:0}.result figcaption{color:#444;margin-bottom:.5rem;font-size:.9rem}.canvas{border:1px solid #eee;max-width:100%;height:auto;display:block}.canvas.pixelated{image-rendering:pixelated}.download{font:inherit;cursor:pointer;background:#fafafa;border:1px solid #ccc;border-radius:6px;margin-top:.6rem;padding:.4rem .9rem}.download:hover{background:#f0f0f0}