:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:-apple-system,system-ui,sans-serif}*{box-sizing:border-box}body{color:#eee;background:#111;min-height:100vh;margin:0}main{flex-direction:column;gap:1.25rem;max-width:640px;margin:0 auto;padding:1rem;display:flex}h1{margin:0;font-size:1.25rem}h2{color:#aaa;text-transform:uppercase;letter-spacing:.05em;margin:0 0 .5rem;font-size:.9rem}.controls{flex-direction:column;gap:.5rem;display:flex}button{appearance:none;color:#fff;font:inherit;cursor:pointer;background:#2a7;border:0;border-radius:8px;padding:.9rem 1rem;font-weight:600}button:disabled{color:#777;cursor:not-allowed;background:#333}#disconnect{background:#633}pre{color:#0f0;white-space:pre-wrap;background:#000;border-radius:8px;min-height:8rem;max-height:20rem;margin:0;padding:.75rem;font-size:.8rem;overflow:auto}.warn{color:#000;background:#4a1;border-radius:8px;padding:.75rem 1rem}.warn ul{margin:.5rem 0 0 1rem;padding:0}canvas{width:100%;image-rendering:pixelated;background:#fff;border-radius:4px}.help{color:#ccc;background:#1a1a1a;border-radius:8px;padding:.75rem 1rem;font-size:.85rem}.help ol{margin:.5rem 0 0 1.2rem;padding:0}.help li{margin-bottom:.3rem}.width-field{color:#aaa;flex-direction:column;gap:.3rem;font-size:.85rem;display:flex}.width-field input{color:#eee;font:inherit;background:#1a1a1a;border:1px solid #333;border-radius:6px;padding:.5rem}.compare{flex-wrap:wrap;gap:1rem;display:flex}.compare figure{margin:0}.compare figcaption{color:#aaa;margin-top:.3rem;font-size:.85rem}.compare canvas{border-radius:0;width:auto}.choice{border:1px solid #333;border-radius:8px;flex-direction:column;gap:.4rem;padding:.5rem .9rem .7rem;font-size:.9rem;display:flex}.choice legend{color:#aaa;padding:0 .3rem}#preview canvas{border-radius:0;width:auto}