*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-base:#0e0e10;--bg-surface:#18181b;--bg-raised:#1e1e22;--bg-input:#131316;--border:#2a2a2e;--border-focus:#4a4a52;--text-primary:#e4e4e7;--text-secondary:#8b8b95;--text-muted:#55555e;--accent:#e06c40;--accent-hover:#ec8960;--checkerboard-a:#1a1a1e;--checkerboard-b:#222226;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--font-sans:"DM Sans", system-ui, sans-serif;--font-mono:"DM Mono", "SF Mono", monospace}html{background:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}body{min-height:100dvh}.app{flex-direction:column;align-items:center;min-height:100dvh;padding:32px 24px 64px;display:flex}.header{text-align:center;margin-bottom:40px}.header h1{font-family:var(--font-mono);letter-spacing:-.01em;color:var(--text-primary);font-size:15px;font-weight:500}.header h1 span{color:var(--text-muted);font-weight:400}.header p{color:var(--text-secondary);margin-top:6px;font-size:13px}.header a{color:var(--text-secondary);border-bottom:1px solid var(--border);text-decoration:none;transition:color .15s,border-color .15s}.header a:hover{color:var(--text-primary);border-color:var(--text-muted)}.canvas-stage{background:repeating-conic-gradient(var(--checkerboard-a) 0% 25%, var(--checkerboard-b) 0% 50%) 50% / 16px 16px;border-radius:var(--radius-lg);border:1px solid var(--border);cursor:grab;justify-content:center;align-items:center;padding:24px;transition:border-color .2s;display:flex;position:relative}.canvas-stage:hover{border-color:var(--border-focus)}.canvas-stage canvas{border-radius:var(--radius-sm)}.dropzone-hint{font-size:11px;font-family:var(--font-mono);color:var(--text-muted);pointer-events:none;white-space:nowrap;opacity:.7;transition:opacity .2s;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.canvas-stage:hover .dropzone-hint{opacity:1}.controls{background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);grid-template-columns:1fr 1fr;gap:1px;width:100%;max-width:520px;margin-top:24px;display:grid;overflow:hidden}.control-group{background:var(--bg-surface);flex-direction:column;gap:8px;padding:14px 16px;display:flex}.control-group.full{grid-column:1/-1}.control-label{font-size:11px;font-family:var(--font-mono);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;justify-content:space-between;align-items:center;font-weight:500;display:flex}.control-label .value{color:var(--text-muted);font-weight:400}input[type=range]{appearance:none;background:var(--bg-input);cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--text-primary);border:2px solid var(--bg-surface);cursor:pointer;border-radius:50%;width:14px;height:14px;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-thumb{background:var(--text-primary);border:2px solid var(--bg-surface);cursor:pointer;border-radius:50%;width:14px;height:14px}input[type=number]{font-family:var(--font-mono);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);outline:none;width:100%;padding:6px 10px;font-size:13px;transition:border-color .15s}input[type=number]:focus{border-color:var(--border-focus)}input[type=color]{appearance:none;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);cursor:pointer;width:32px;height:26px;padding:2px}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}.toggle{cursor:pointer;align-items:center;gap:8px;display:inline-flex;position:relative}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle-track{background:var(--bg-input);border:1px solid var(--border);border-radius:10px;flex-shrink:0;width:32px;height:18px;transition:background .2s,border-color .2s;position:relative}.toggle-track:after{content:"";background:var(--text-muted);border-radius:50%;width:12px;height:12px;transition:transform .2s,background .2s;position:absolute;top:2px;left:2px}.toggle input:checked+.toggle-track{background:var(--accent);border-color:var(--accent)}.toggle input:checked+.toggle-track:after{background:#fff;transform:translate(14px)}.toggle-text{color:var(--text-secondary);font-size:12px}.btn{font-family:var(--font-mono);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text-primary);cursor:pointer;padding:7px 14px;font-size:12px;font-weight:500;transition:background .15s,border-color .15s}.btn:hover{background:var(--bg-surface);border-color:var(--border-focus)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-row{gap:6px;display:flex}.btn-icon{justify-content:center;align-items:center;width:30px;height:30px;padding:0;font-size:16px;display:inline-flex}.inline-row,.size-row{align-items:center;gap:8px;display:flex}.size-row .size-field{flex-direction:column;flex:1;gap:4px;display:flex}.size-row .size-field label{font-size:10px;font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.size-separator{color:var(--text-muted);margin-top:16px;font-size:13px}.preview-section{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:520px;margin-top:24px;display:flex}.preview-result{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;padding:20px;display:flex}.preview-result img{max-width:none;display:block}.preview-result canvas{display:block}.footer{text-align:center;color:var(--text-muted);font-size:12px;font-family:var(--font-mono);margin-top:48px}.footer a{color:var(--text-secondary);border-bottom:1px solid var(--border);text-decoration:none;transition:color .15s}.footer a:hover{color:var(--text-primary)}@media (width<=560px){.controls{grid-template-columns:1fr}.control-group.full{grid-column:1}.preview-result{flex-direction:column}}