:root{--ui-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;--ui-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;--ui-radius-sm: 4px;--ui-radius-md: 6px;--ui-radius-lg: 8px;--ui-space-1: 8px;--ui-space-2: 16px;--ui-space-3: 24px;--ui-space-4: 32px;--ui-space-5: 48px;--ui-duration: .15s}:root,[data-theme=light]{color-scheme:light;--ui-ink: #26251e;--ui-ink-hover: #424139;--ui-on-ink: #f7f7f4;--ui-muted: #706f68;--ui-fade: #aaa99f;--ui-focus: #706f68;--ui-line: #e2e2df;--ui-line-strong: #aeada4;--ui-soft: #f0efea;--ui-soft-hover: #e8e7e1;--ui-page: #f7f7f4;--ui-panel: #ffffff;--ui-canvas: #fafaf8}[data-theme=dark]{color-scheme:dark;--ui-ink: #ecebe4;--ui-ink-hover: #d4d2c8;--ui-on-ink: #14130f;--ui-muted: #9c9a90;--ui-fade: #6e6c64;--ui-focus: #9c9a90;--ui-line: #3a3933;--ui-line-strong: #5c5a52;--ui-soft: #1a1914;--ui-soft-hover: #24231d;--ui-page: #14130f;--ui-panel: #1e1d18;--ui-canvas: #18170f}*{box-sizing:border-box}html{color-scheme:inherit}body{margin:0;background:var(--ui-page);color:var(--ui-ink);font:14px/1.6 var(--ui-font);-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit;color:inherit}button,input,textarea{border:1px solid var(--ui-line);border-radius:var(--ui-radius-md)}button{cursor:pointer}:focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}.ui-muted{color:var(--ui-muted)}.ui-mono{font-family:var(--ui-font-mono)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-1);padding:var(--ui-space-1) 14px;border-color:var(--ui-ink);background:var(--ui-ink);color:var(--ui-on-ink);font-weight:500;transition:background var(--ui-duration) ease}.ui-button:hover{background:var(--ui-ink-hover)}.ui-button--secondary{border-color:var(--ui-line);background:transparent;color:var(--ui-ink)}.ui-button--secondary:hover{background:var(--ui-soft)}.ui-button--ghost{border-color:transparent;background:transparent;color:var(--ui-ink);padding:2px 0;font-weight:400}.ui-button--ghost:hover{background:transparent;text-decoration:underline;text-underline-offset:3px}.ui-panel{border:1px solid var(--ui-line);border-radius:var(--ui-radius-lg);background:var(--ui-panel)}.ui-hint{margin:0;color:var(--ui-muted);font-size:12px}.ui-kicker{margin:0;color:var(--ui-muted);font:11px/1.5 var(--ui-font-mono);letter-spacing:.1em}.ui-icon{width:18px;height:18px;flex:none;display:block}.ui-input,.ui-textarea{width:100%;padding:var(--ui-space-2);background:var(--ui-panel)}.ui-textarea{display:block;min-width:0;resize:vertical;font:13px/1.8 var(--ui-font-mono)}.ui-textarea::placeholder,.ui-input::placeholder{color:var(--ui-muted)}.ui-pane-heading{display:flex;align-items:center;gap:var(--ui-space-1);height:44px;padding:0 18px;border-bottom:1px solid var(--ui-line);background:var(--ui-soft);font-size:12px}.ui-pane-heading label,.ui-pane-heading h3{margin:0;font-size:12px;font-weight:500}.ui-pane-heading-meta{margin-left:auto;color:var(--ui-muted);font:10px/1.4 var(--ui-font-mono)}.ui-prose{overflow:auto;overflow-wrap:anywhere;line-height:1.9;font-size:13px}.ui-prose h1{font-size:25px;letter-spacing:-.035em;margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--ui-line)}.ui-prose h2{display:block;font-size:19px;margin:24px 0 12px}.ui-prose h3{font-size:16px}.ui-prose ol,.ui-prose ul{padding-left:22px}.ui-prose li{padding-left:4px;margin:0 0 18px}.ui-prose a{color:inherit;text-decoration-color:var(--ui-fade);text-underline-offset:3px}.ui-prose a:hover{text-decoration-color:var(--ui-ink)}.ui-prose code{background:var(--ui-soft);padding:2px 4px;border-radius:3px;font-size:.9em}.ui-prose pre{background:var(--ui-soft);padding:var(--ui-space-2);overflow:auto;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm)}.ui-prose pre code{padding:0}.ui-prose blockquote{border-left:2px solid var(--ui-fade);margin-left:0;padding-left:var(--ui-space-2);color:var(--ui-muted)}.ui-prose img{max-width:100%}.ui-prose table{border-collapse:collapse}.ui-prose th,.ui-prose td{padding:6px 10px;border:1px solid var(--ui-line)}.ui-prose hr{border:0;border-top:1px solid var(--ui-line)}.ui-theme-toggle,.ui-icon-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-color:transparent;background:transparent;color:var(--ui-muted);border-radius:var(--ui-radius-md);transition:background var(--ui-duration) ease,color var(--ui-duration) ease}.ui-theme-toggle:hover,.ui-icon-button:hover{background:var(--ui-soft);color:var(--ui-ink)}.ui-theme-toggle .ui-icon,.ui-icon-button .ui-icon{width:16px;height:16px}[data-theme=light] .ui-theme-toggle [data-theme-icon=sun],:root:not([data-theme]) .ui-theme-toggle [data-theme-icon=sun],[data-theme=dark] .ui-theme-toggle [data-theme-icon=moon]{display:none}.app{max-width:1200px;margin:0 auto;padding:var(--ui-space-4) var(--ui-space-3) var(--ui-space-5)}.app-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ui-space-2);margin-bottom:var(--ui-space-3)}.app-title{margin:var(--ui-space-1) 0 0;font-size:28px;font-weight:500;letter-spacing:-.02em}.app-workspace{display:grid;grid-template-columns:280px 1fr;gap:var(--ui-space-3);align-items:start}@media(max-width:860px){.app-workspace{grid-template-columns:1fr}}.app-controls{padding:var(--ui-space-3);display:flex;flex-direction:column;gap:var(--ui-space-3)}.app-field{display:flex;flex-direction:column;gap:var(--ui-space-1)}.app-field__gap{margin-top:var(--ui-space-2)}.app-upload{border:1px dashed var(--ui-line-strong);border-radius:var(--ui-radius-md);padding:var(--ui-space-3) var(--ui-space-2);text-align:center;cursor:pointer;background:var(--ui-canvas);transition:background var(--ui-duration) ease,border-color var(--ui-duration) ease;outline:none}.app-upload:hover,.app-upload:focus-visible{border-color:var(--ui-fade);background:var(--ui-soft)}.app-upload--dragover{border-color:var(--ui-ink);background:var(--ui-soft-hover)}.app-upload__inner{display:flex;flex-direction:column;gap:4px}.app-upload__label{font-size:13px;font-weight:500}.app-color{display:flex;align-items:center;gap:var(--ui-space-2)}.app-color__swatch{width:40px;height:40px;border-radius:var(--ui-radius-md);border:1px solid var(--ui-line);background:var(--ui-soft);flex-shrink:0}.app-color__swatch--active{outline:2px solid var(--ui-ink);outline-offset:2px}.app-color__info{display:flex;flex-direction:column;gap:2px}.app-color__hex{font-size:13px;font-weight:500}.app-slider{display:flex;align-items:center;gap:var(--ui-space-2)}.app-slider input[type=range]{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;padding:0;border:none;border-radius:2px;background:var(--ui-line)}.app-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ui-ink);cursor:pointer;border:2px solid var(--ui-panel)}.app-slider input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ui-ink);cursor:pointer;border:2px solid var(--ui-panel)}.app-slider__value{font-size:12px;min-width:2.5ch;text-align:right}.app-actions{display:flex;flex-direction:column;gap:var(--ui-space-1)}.app-canvas-pane{display:flex;flex-direction:column;min-height:480px;overflow:hidden}.app-tabs{display:flex;border-bottom:1px solid var(--ui-line);background:var(--ui-soft)}.app-tab{flex:1;padding:var(--ui-space-1) var(--ui-space-2);font-size:12px;font-weight:500;background:transparent;border:none;border-radius:0;color:var(--ui-muted);cursor:pointer;transition:color var(--ui-duration) ease,background var(--ui-duration) ease}.app-tab:hover:not(:disabled){color:var(--ui-ink);background:var(--ui-soft-hover)}.app-tab--active{color:var(--ui-ink);background:var(--ui-panel);box-shadow:inset 0 -2px 0 var(--ui-ink)}.app-tab:disabled{opacity:.4;cursor:not-allowed}.app-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--ui-space-3);min-height:400px;background:var(--ui-canvas)}.app-canvas-empty{font-size:13px}.app-canvas-stage{position:relative;max-width:100%;max-height:70vh;line-height:0}.app-canvas-stage canvas{max-width:100%;max-height:70vh;border-radius:var(--ui-radius-md);border:1px solid var(--ui-line);display:block}#resultCanvas{background-color:var(--ui-canvas);background-image:linear-gradient(45deg,var(--ui-line) 25%,transparent 25%),linear-gradient(-45deg,var(--ui-line) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--ui-line) 75%),linear-gradient(-45deg,transparent 75%,var(--ui-line) 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}.app-canvas-stage--pick{cursor:crosshair}.app-eyedropper{position:fixed;width:28px;height:28px;border:2px solid var(--ui-panel);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 0 1px var(--ui-ink);z-index:100}.app-canvas-tip{padding:var(--ui-space-1) var(--ui-space-2);text-align:center;border-top:1px solid var(--ui-line);background:var(--ui-soft)}