:root{--bg: #0b0b10;--panel: #16161f;--line: #2b2b3a;--text: #d7d7d7;--dim: #8a8a9c;--cyan: #00d7d7;--yellow: #d7d700;--magenta: #d700d7;color-scheme:dark}*{box-sizing:border-box}body{margin:0;padding:2rem 1rem 4rem;background:var(--bg);color:var(--text);font:15px/1.55 ui-monospace,SF Mono,Menlo,Consolas,monospace}main{max-width:46rem;margin:0 auto}header{text-align:center;margin-bottom:1.75rem}h1{margin:0;font-size:clamp(2rem,8vw,3.25rem);letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(90deg,var(--cyan),var(--yellow),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{margin:.5rem auto 0;max-width:34rem;color:var(--dim)}.stage{text-align:center}canvas{width:min(100%,40rem);height:auto;aspect-ratio:320 / 240;image-rendering:pixelated;border-radius:4px;background:#d7d7d7;cursor:pointer;box-shadow:0 0 0 1px var(--line),0 18px 50px #0000008c}.status{min-height:1.5em;margin:.85rem 0 0;color:var(--cyan)}.stage-buttons{display:flex;gap:.5rem;justify-content:center;margin-top:.75rem;min-height:2.2rem}button,.file-button{font:inherit;padding:.45rem .9rem;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--text);cursor:pointer}button:hover,.file-button:hover{border-color:var(--cyan);color:#fff}.controls{display:grid;gap:1.1rem;margin-top:2rem;padding:1.25rem;border:1px solid var(--line);border-radius:6px;background:var(--panel)}.control>label{display:block;color:var(--dim);margin-bottom:.35rem}.file-button{display:inline-block;margin-bottom:0}.url-row{display:flex;gap:.5rem}input[type=url],input[type=text]{flex:1;min-width:0;font:inherit;padding:.45rem .6rem;border:1px solid var(--line);border-radius:3px;background:#0d0d14;color:var(--text)}input:focus-visible,button:focus-visible,select:focus-visible,.file-button:focus-within{outline:2px solid var(--cyan);outline-offset:2px}.options{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center}.options label{display:inline-flex;align-items:center;gap:.4rem;margin:0;color:var(--dim)}.options .slider input{width:8rem}select{font:inherit;padding:.25rem;border:1px solid var(--line);border-radius:3px;background:#0d0d14;color:var(--text)}footer{margin-top:2rem;color:var(--dim);font-size:13px}.drop-hint{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:none;place-items:center;font-size:1.5rem;color:var(--yellow);background:#0b0b10e6;border:3px dashed var(--yellow);pointer-events:none}body.dragging .drop-hint{display:grid}@media(prefers-reduced-motion:reduce){canvas{transition:none}}
