:root{color:#e9eef7;background:#101827;font-family:Inter,system-ui,sans-serif}body{margin:0;min-height:100vh;display:grid;place-items:center}.web-app{width:min(560px,calc(100vw - 48px))}header{display:flex;align-items:center;gap:10px;font-weight:700}header img{width:32px;height:32px}section{margin-top:28px;padding:36px;background:#172235;border:1px solid #2d3a51;border-radius:20px}h1{margin:0}p{color:#aebbd0}.picker,button{display:block;box-sizing:border-box;width:100%;padding:14px 16px;border-radius:10px;font:inherit;cursor:pointer}.picker{border:1px dashed #64748b;text-align:center;margin:24px 0 10px}.picker[hidden],.picker input{display:none}button{border:0;background:#4f8cff;color:#fff;font-weight:700}button:disabled{opacity:.45;cursor:not-allowed}progress{width:100%;margin-top:18px}#preview{display:flex;gap:14px;align-items:center;margin:18px 0}#icon{width:64px;height:64px;image-rendering:pixelated;border-radius:12px;background:#0c1220}#preview small{display:block;color:#aebbd0;margin-top:4px}#preview[hidden]{display:none}.unsupported{margin:18px 0;padding:12px;border:1px solid #8c6730;border-radius:10px;color:#f0cf91;background:#33291b}a{color:#8eb6ff}footer{margin-top:18px;text-align:center;font-size:14px}#status[data-state=success]{display:grid;gap:3px;margin:18px 0 0;padding:14px 16px 14px 46px;border:1px solid #2d9d68;border-radius:12px;color:#b9f4d2;background:#163a2b;position:relative}#status[data-state=success]:before{content:"✓";position:absolute;left:16px;top:13px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#0c2a1d;background:#74e0a4;font-weight:800}#status[data-state=success] strong{color:#effff5}#status[data-state=success] span{font-size:14px}