:root{--purple:#6752fd;--bg:#fff;--card:#fff;--muted:#f1f5f9;--muted-foreground:#64748b;--foreground:#12181b;--border:#e2e8f0;--input:#e2e8f0}*{box-sizing:border-box;margin:0;padding:0}body,html{background:var(--bg);color:var(--foreground);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}.hidden{display:none}.app{max-width:1180px;margin:0 auto;padding:24px 20px 60px;display:flex;flex-direction:column;gap:18px}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));grid-gap:12px;gap:12px}.preset{display:flex;flex-direction:column;gap:8px;border:1.5px solid var(--border);background:var(--card);border-radius:10px;padding:8px;transition:border-color .12s}.preset.active,.preset:hover{border-color:var(--purple)}.preset.active{box-shadow:0 0 0 2px rgba(103,82,253,.25)}.preset.scratch{border-style:dashed}.preset-thumb{width:100%;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--muted);display:flex;align-items:center;justify-content:center}.preset-thumb .blank{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}.preset-name{font-size:12px;font-weight:500;text-align:center;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.editor{display:grid;grid-template-columns:5fr 4fr;grid-gap:18px;gap:18px;align-items:start}@media (max-width:860px){.editor{grid-template-columns:1fr}}.preview-card{position:-webkit-sticky;position:sticky;top:20px;display:flex;flex-direction:column;gap:12px}.preview-stage{width:100%;aspect-ratio:4/3;border-radius:10px;border:1px solid var(--border);background:var(--muted);display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-actions{display:flex;gap:10px}.controls{gap:16px}.control-group,.controls{display:flex;flex-direction:column}.control-group{gap:14px}.slider-row{display:flex;flex-direction:column;gap:7px}.slider-head{display:flex;justify-content:space-between;align-items:baseline}.slider-label{font-size:13px;font-weight:500;color:var(--foreground)}.slider-val{font-size:12px;color:var(--muted-foreground);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--muted);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--purple);cursor:pointer}input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--purple);cursor:pointer}.blend{display:flex;flex-direction:column;gap:10px;border:1px solid var(--border);border-radius:8px;background:rgba(241,245,249,.4);padding:12px}.blend-title{font-size:13px;font-weight:600;color:var(--foreground)}.blend-row{display:flex;gap:8px;align-items:center}.select{flex:1 1;height:38px;padding:0 10px;border-radius:8px;border:1px solid var(--input);background:var(--card);color:var(--foreground);font-size:13px;cursor:pointer}.select:focus{outline:none;border-color:var(--purple)}.color-input{width:48px;padding:2px;border:1px solid var(--border);background:var(--card);cursor:pointer}.color-input,.text-input{height:36px;border-radius:6px}.text-input{flex:1 1;padding:0 10px;border:1px solid var(--input);background:var(--muted);color:var(--foreground);font-size:13px}.text-input:focus{outline:none;border-color:var(--purple);background:var(--card)}.css-box{background:#0f1316;color:#d6e7d9;padding:14px;font-family:SF Mono,Cascadia Code,Consolas,monospace;font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}.btn,.css-box{border-radius:8px}.btn{padding:10px 14px;font-size:13px;font-weight:600;border:1px solid transparent}.btn-primary{background:var(--purple);color:#fff;width:100%}.btn-primary:hover{filter:brightness(1.08)}.btn-primary.copied{background:#16a34a}.btn-ghost{flex:1 1;background:var(--card);border-color:var(--border);color:var(--foreground)}.btn-ghost:hover{border-color:var(--purple);color:var(--purple)}