:root{--text-strong:#1a1a1a;--text-muted:#888;--text-soft:#999;--text-faint:#b0b0b0;--bg:#fff;--card-bg:#fcfcfc;--card-border:#f0f0f0;--surface:#fff;--surface-hover:#fafafa;--border:#e8e8e8;--border-strong:#bbb;--border-stronger:#ccc;--accent:#0582ff;--accent-soft:#0582ff40;--on-accent:#fff;--checker:#e6e6e6;--canvas-bg:#fff;--error:#c00;--github:#ccc;--github-hover:#999;--ui-font:-apple-system, "PingFang SC", "Noto Sans SC", sans-serif;color:var(--text-strong);font:14px/1.5 var(--ui-font);-webkit-font-smoothing:antialiased;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text-strong:#f0f0f2;--text-muted:#9a9a9f;--text-soft:#86868b;--text-faint:#6a6a70;--bg:#1a1a1c;--card-bg:#232326;--card-border:#313135;--surface:#2a2a2e;--surface-hover:#33333a;--border:#3a3a40;--border-strong:#55555c;--border-stronger:#66666e;--accent:#3b9dff;--accent-soft:#3b9dff4d;--on-accent:#fff;--checker:#3a3a3f;--canvas-bg:#202024;--error:#ff6b6b;--github:#55555c;--github-hover:#9a9a9f}}*{box-sizing:border-box}html,body,#root{margin:0;padding:0}body{background:var(--bg)}button,input{font:inherit}h1,h2,p{margin:0}h1{font-size:16px;font-weight:600}h2{font-size:13px;font-weight:600}.app{flex-direction:column;gap:20px;max-width:960px;margin:0 auto;padding:24px 24px 32px;display:flex}.layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:24px;display:grid}@media (width<=720px){.layout{grid-template-columns:1fr}}.panel{flex-direction:column;gap:16px;display:flex}.panel-controls{border:1px solid var(--card-border);background:var(--card-bg);border-radius:12px;max-height:calc(100vh - 64px);padding:20px;overflow-y:auto}.panel-preview{gap:16px;min-height:calc(100vh - 64px)}.advanced{border-top:1px solid var(--card-border);padding-top:4px}.advanced-summary{color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;padding:4px 0;font-size:12px;list-style:none;transition:color .15s}.advanced-summary::-webkit-details-marker{display:none}.advanced-summary:before{content:"▸";margin-right:6px;transition:transform .15s;display:inline-block}.advanced[open] .advanced-summary:before{transform:rotate(90deg)}.advanced-summary:hover{color:var(--text-strong)}.advanced-body{flex-direction:column;gap:16px;padding-top:12px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.toolbar-row .preset-select{flex:auto}.text-input{border:1px solid var(--border);width:100%;min-height:44px;font:inherit;color:var(--text-strong);background:var(--surface);resize:vertical;border-radius:8px;outline:none;padding:8px 12px;line-height:20px;transition:border-color .15s,background .15s}.text-input:focus{border-color:var(--border-strong)}.preset-select{border:1px solid var(--border);min-width:150px;height:34px;font:inherit;color:var(--text-strong);background:var(--surface);cursor:pointer;border-radius:8px;outline:none;flex:1;padding:0 10px;font-size:13px;transition:border-color .15s}.preset-select:focus{border-color:var(--border-strong)}.style-toggle{flex-wrap:wrap;gap:8px;display:flex}.style-option{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:6px;transition:border-color .15s,box-shadow .15s;display:flex}.style-option:hover{border-color:var(--border-strong)}.style-option.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.style-preview{object-fit:contain;pointer-events:none;width:auto;height:40px;display:block}.style-label{color:var(--text-muted);font-size:12px}.style-option.active .style-label{color:var(--accent)}.icon-btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;line-height:1;transition:background .15s,border-color .15s,transform .1s;display:inline-flex}.icon-btn:hover{border-color:var(--border-strong);background:var(--surface-hover)}.icon-btn:active{transform:scale(.92)}.color-pair{align-items:center;gap:6px;display:flex}.color-swatch{border:2px solid var(--card-bg);width:28px;height:28px;box-shadow:0 0 0 1px var(--border);cursor:pointer;border-radius:50%;transition:box-shadow .15s;position:relative;overflow:visible}.color-swatch:hover{box-shadow:0 0 0 1px var(--border-strong)}.color-swatch input[type=color]{cursor:pointer;opacity:0;border:none;border-radius:50%;width:100%;height:100%;padding:0;position:absolute;inset:0}.swatch-remove{border:1px solid var(--border);background:var(--surface);width:15px;height:15px;color:var(--text-muted);cursor:pointer;opacity:0;border-radius:50%;justify-content:center;align-items:center;font-size:12px;line-height:1;transition:opacity .15s;display:flex;position:absolute;top:-6px;right:-6px}.color-swatch:hover .swatch-remove{opacity:1}.swatch-add{border:1px dashed var(--border-strong);width:28px;height:28px;color:var(--text-muted);cursor:pointer;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;line-height:1;transition:border-color .15s,color .15s;display:inline-flex}.swatch-add:hover{border-color:var(--accent);color:var(--accent)}.peak-toggle{white-space:nowrap;border:1px solid var(--border);background:var(--surface);min-width:40px;height:28px;font:inherit;letter-spacing:.04em;color:var(--text-soft);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:0 12px;font-size:12px;font-weight:600;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.peak-toggle:hover{border-color:var(--border-strong)}.peak-toggle.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.field{align-items:center;gap:8px;display:flex}.field-label{color:var(--text-muted);white-space:nowrap;font-size:12px}.advanced-body .field{grid-template-columns:68px 1fr auto;align-items:center;gap:10px;display:grid}.advanced-body .field-slider input[type=range]{min-width:0}.field-value{color:var(--text-soft);font-variant-numeric:tabular-nums;text-align:right;min-width:30px;font-size:12px}.toggle-group{flex-wrap:wrap;gap:8px;display:flex}.icon-field{width:100%}.icon-input-wrap{flex:1;align-items:center;display:flex;position:relative}.icon-input{border:1px solid var(--border);width:100%;height:30px;font:inherit;color:var(--text-strong);background:var(--surface);border-radius:8px;outline:none;padding:0 30px 0 10px;font-size:13px;transition:border-color .15s}.icon-input:focus{border-color:var(--border-strong)}.icon-clear{background:var(--surface-hover);width:18px;height:18px;color:var(--text-muted);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:13px;line-height:1;transition:background .15s,color .15s;display:flex;position:absolute;right:6px}.icon-clear:hover{background:var(--border);color:var(--text-strong)}.field-hint{color:var(--accent);white-space:nowrap;font-size:12px;text-decoration:none}.field-hint:hover{text-decoration:underline}.field-slider{width:100%}.field-slider input[type=range]{min-width:100px;accent-color:var(--accent);cursor:pointer;flex:1}.knob-wrap{-webkit-user-select:none;user-select:none;touch-action:none;cursor:grab;justify-content:center;align-items:center;display:flex}.knob-wrap:active{cursor:grabbing}.knob{display:block}.canvas-area{background-color:var(--canvas-bg);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;min-height:220px;padding:24px;display:flex}.preview-wrap{place-items:center;max-width:100%;min-height:80px;display:grid}.preview-wrap>*{grid-area:1/1}.preview-wrap canvas{background-color:var(--canvas-bg);background-image:linear-gradient(45deg, var(--checker) 25%, transparent 25%), linear-gradient(-45deg, var(--checker) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--checker) 75%), linear-gradient(-45deg, transparent 75%, var(--checker) 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;max-width:100%;height:auto;transition:opacity .15s;display:block}.preview-wrap canvas.stale{opacity:.35}.thinking{letter-spacing:.08em;background:linear-gradient(100deg, var(--text-faint) 0%, var(--text-faint) 40%, var(--text-strong) 50%, var(--text-faint) 60%, var(--text-faint) 100%);color:#0000;background-size:220% 100%;-webkit-background-clip:text;background-clip:text;font-size:14px;font-weight:600;animation:1.8s linear infinite thinking-flow}@keyframes thinking-flow{0%{background-position:130% 0}to{background-position:-30% 0}}.placeholder{color:var(--text-faint);letter-spacing:.04em;padding:48px 0;font-size:13px}.error{color:var(--error);margin:12px 0 0;font-size:13px}.actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.export-btn{border:1px solid var(--border);background:var(--surface);height:38px;font:inherit;color:var(--text-strong);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:7px;padding:0 24px;font-size:13px;text-decoration:none;transition:background .15s,border-color .15s;display:inline-flex}.export-btn:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-stronger)}.export-btn:disabled{opacity:.35;cursor:not-allowed}.usage-hint{text-align:center;color:var(--text-soft);margin:0;font-size:12px;line-height:1.6}.github-link{color:var(--github);align-self:center;align-items:center;gap:5px;margin-top:auto;font-size:12px;text-decoration:none;transition:color .15s;display:inline-flex}.github-link:hover{color:var(--github-hover)}