:root{color-scheme:light dark;font-family:ui-sans-serif,system-ui,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;background:#14161a;color:#e8e8ea}.app{max-width:1080px;margin:0 auto;padding:28px 20px 60px}h1{font-size:22px;margin:0 0 4px}.sub{color:#9aa0aa;margin:0 0 22px;font-size:13px}.drop{border:2px dashed #3a3f48;border-radius:12px;padding:40px 20px;text-align:center;color:#9aa0aa;cursor:pointer;transition:.15s}.drop.over{border-color:#4f8cff;color:#cfe0ff;background:#1a2130}.controls{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:16px 0}.controls label{font-size:13px;color:#b9bec7;display:flex;align-items:center;gap:8px}.controls input[type=range]{width:150px}.pill{background:#232830;border:1px solid #343a44;border-radius:999px;padding:3px 10px;font-size:12px}.canvas-wrap{background:#1b1e24;border:1px solid #2c313a;border-radius:10px;padding:12px;overflow:auto}canvas{display:block;image-rendering:pixelated;max-width:100%}.row{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}button{background:#2c6bff;color:#fff;border:0;border-radius:8px;padding:10px 16px;font-size:14px;cursor:pointer}button.ghost{background:#232830;border:1px solid #3a3f48;color:#e8e8ea}button:disabled{opacity:.45;cursor:not-allowed}.err{color:#ff6b6b;margin-top:12px;font-size:13px}.hint{color:#7f8792;font-size:12px;margin-top:8px}.topbar{display:flex;align-items:center;gap:12px;margin:0 0 18px}.upmsg{color:#9aa0aa;font-size:13px;word-break:break-all}