*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#061b49;color:#fff;min-height:100vh}.app{width:min(680px,100%);margin:auto;padding:24px 16px 32px}header{text-align:center;margin-bottom:18px}h1{font-size:28px;margin:0 0 8px;font-weight:900;letter-spacing:.5px}h1 span{color:#ff6b00}header p{margin:0;color:#dce4f2;font-size:15px;line-height:1.4}.panel{background:#fff;color:#17213a;border-radius:20px;padding:18px;box-shadow:0 12px 40px #0005}.upload{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #ff6b00;border-radius:14px;padding:16px;cursor:pointer;text-align:center;margin-bottom:16px}.upload input{display:none}.upload strong{color:#061b49;font-size:18px}.upload small{margin-top:5px;color:#647086}.preview-wrap{position:relative;width:min(520px,100%);margin:auto;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#eef1f6}.preview-wrap canvas{width:100%;height:100%;display:block;touch-action:none}.preview-wrap:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 1px #0002}.preview-wrap #emptyState{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#68748a;font-weight:700;padding:30px;pointer-events:none}.controls{display:flex;align-items:center;gap:8px;margin:16px 0 6px}.controls button{width:42px;height:42px;border:0;border-radius:10px;background:#061b49;color:#fff;font-size:24px;cursor:pointer}.controls .secondary{width:auto;padding:0 12px;font-size:14px;background:#e8edf5;color:#17213a}.controls input{flex:1}.hint{text-align:center;color:#68748a;font-size:13px;margin:8px 0 14px}.download{width:100%;border:0;border-radius:12px;padding:15px;background:#ff6b00;color:#fff;font-size:16px;font-weight:900;cursor:pointer}.download:disabled{opacity:.45;cursor:not-allowed}footer{text-align:center;color:#c7d2e5;font-size:12px;line-height:1.4;margin-top:16px}input[type=range]{accent-color:#ff6b00}