*{box-sizing:border-box;margin:0;padding:0}body{background:#f5f4f0;justify-content:center;align-items:flex-start;min-height:100vh;padding:2rem 1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex}#root{justify-content:center;width:100%;display:flex}.container{background:#fff;border-radius:16px;width:100%;max-width:560px;padding:2rem;box-shadow:0 2px 24px #00000014}h1{color:#111;margin-bottom:4px;font-size:20px;font-weight:600}.tagline{color:#888;margin-bottom:1.5rem;font-size:13px}.drop-zone{text-align:center;cursor:pointer;background:#fafafa;border:1.5px dashed #ccc;border-radius:12px;margin-bottom:1.25rem;padding:2.5rem 1rem;transition:background .15s,border-color .15s}.drop-zone:hover,.drop-zone.dragging{background:#f0f0f0;border-color:#aaa}.drop-icon{margin-bottom:8px;font-size:32px}.drop-zone p{color:#888;font-size:13px}.controls{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.25rem;display:grid}.ctrl label{color:#666;margin-bottom:4px;font-size:12px;font-weight:500;display:block}.ctrl input[type=range]{accent-color:#111;width:100%}.ctrl input[type=color]{cursor:pointer;border:1px solid #ddd;border-radius:8px;width:100%;height:36px;padding:2px}.val-display{color:#111;font-size:12px;font-weight:600}.bg-label{color:#666;margin-bottom:8px;font-size:12px;font-weight:500}.bg-swatches{flex-wrap:wrap;gap:8px;margin-bottom:1.25rem;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;outline:none;width:28px;height:28px;transition:border-color .1s}.swatch.active{border-color:#111}.checker-swatch{background-color:#f0f0f0;background-image:linear-gradient(45deg,#ccc 25%,#0000 25%),linear-gradient(-45deg,#ccc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ccc 75%),linear-gradient(-45deg,#0000 75%,#ccc 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px}.preview-bg{border-radius:12px;justify-content:center;align-items:center;min-height:220px;margin-bottom:1.25rem;padding:2rem;display:flex}.preview-checker{background-color:#f0f0f0;background-image:linear-gradient(45deg,#ccc 25%,#0000 25%),linear-gradient(-45deg,#ccc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ccc 75%),linear-gradient(-45deg,#0000 75%,#ccc 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.placeholder-text{color:#aaa;font-size:13px}.btn-row{gap:10px;display:flex}button{cursor:pointer;color:#111;background:#fff;border:1.5px solid #ddd;border-radius:8px;flex:1;padding:11px;font-size:13px;font-weight:600;transition:background .12s}button:hover{background:#f5f5f5}button.primary{color:#fff;background:#111;border-color:#111}button.primary:hover{background:#333}button:disabled{opacity:.35;cursor:not-allowed}