*{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a1a1a;color:#fff;margin:0;padding:20px;min-height:100vh}h1{text-align:center;margin-bottom:30px;font-weight:400}.container{max-width:1200px;margin:0 auto}.upload-area{border:2px dashed #444;border-radius:12px;padding:40px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;margin-bottom:20px}.upload-area:hover{border-color:#666;background:#222}.upload-area.dragover{border-color:#4a9eff;background:#1a2a3a}.upload-area input{display:none}.controls{background:#252525;padding:20px;border-radius:12px;margin-bottom:20px}.control-group{display:flex;align-items:center;gap:15px;margin-bottom:15px}.control-group:last-child{margin-bottom:0}.control-group label{min-width:120px;color:#aaa}.control-group input[type=range]{flex:1;height:6px;-webkit-appearance:none;background:#333;border-radius:3px;outline:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:#4a9eff;border-radius:50%;cursor:pointer}.control-group span{min-width:50px;text-align:right;font-family:monospace}.preview-container{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}@media (max-width: 768px){.preview-container{grid-template-columns:1fr}}.preview-box{background:#252525;border-radius:12px;padding:15px}.preview-box h3{margin:0 0 10px;font-weight:400;font-size:14px;color:#888}.preview-box canvas{width:100%;height:auto;display:block;border-radius:8px;background:repeating-conic-gradient(#333,#333 25%,#222 0%,#222 50%) 50% / 20px 20px}.download-btn{display:block;width:100%;padding:15px;background:#4a9eff;color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:background .2s}.download-btn:hover{background:#3a8eef}.download-btn:disabled{background:#333;cursor:not-allowed}.hidden{display:none}