:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,sans-serif}body{color:#e8e8f0;background:#14141c;margin:0}#app{max-width:900px;margin:0 auto;padding:16px}h1{margin:0 0 4px;font-size:1.4rem}.note{color:#9a9ab0;margin:4px 0 12px;font-size:.9rem}.drop{text-align:center;cursor:pointer;border:2px dashed #4a4a66;border-radius:8px;padding:18px;display:block}.drop.over{background:#1c1c2c;border-color:#7c7cff}.stage{background:#000;justify-content:center;margin:12px 0;display:flex}.stage:fullscreen{align-items:center}canvas{aspect-ratio:4/3;width:100%;max-height:80vh;image-rendering:pixelated;background:#000}.bar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}button{color:inherit;cursor:pointer;background:#24243a;border:1px solid #4a4a66;border-radius:6px;padding:6px 12px}button:disabled{opacity:.4;cursor:default}.stats{font-variant-numeric:tabular-nums;color:#9a9ab0;margin-left:auto}details{margin-top:16px}.keys{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin-bottom:8px;display:grid}.msg{color:#8fd18f;min-height:1.2em}.msg.error{color:#ff8a8a}.net{border-top:1px solid #2a2a40;margin-top:16px;padding-top:8px}.net h2{margin:0;font-size:1.1rem}input,select{color:inherit;background:#1c1c2c;border:1px solid #4a4a66;border-radius:6px;padding:5px 8px}#netCode{text-transform:uppercase;letter-spacing:.15em}