:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f4efe5;--surface:#fffcf6e6;--surface-soft:#faf5eceb;--text:#1b1711;--muted:#675d4f;--faint:#9a8f81;--line:#372b181a;--line-strong:#372b182e;--accent:#2f6bff;--danger:#b13d3d;--shadow-panel:0 1px 2px #2a1f1208, 0 24px 60px #42301b14;--shadow-soft:0 1px 2px #2a1f1205, 0 12px 32px #42301b0d;--display-font:"Iowan Old Style", "Palatino Linotype", "Songti SC", "STSong", Georgia, serif;--ui-font:"Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:radial-gradient(circle at top left, #ffffffad, transparent 34%), linear-gradient(180deg, #ffffff61, #f4efe5c7), var(--bg);min-height:100vh;color:var(--text);font-family:var(--ui-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}button,input,textarea{font:inherit}button{color:inherit;cursor:pointer;background:0 0;border:0}button:disabled,input:disabled,textarea:disabled{cursor:not-allowed}button,input[type=button],input[type=submit]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}::selection{background:color-mix(in srgb, var(--accent) 18%, white)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{background:linear-gradient(#ffffff57 1px,#0000 1px),linear-gradient(90deg,#ffffff57 1px,#0000 1px),radial-gradient(circle at top,#ffffff8f,#0000 42%);background-color:var(--bg);min-height:100dvh;color:var(--text);background-size:100% 28px,28px 100%,100% 100%}.app-frame{width:min(1240px,100vw - 32px);margin:0 auto;padding:28px 0 40px}.shell-head{padding:10px 0 22px}.shell-brand{gap:16px;max-width:920px;display:grid}.shell-eyebrow{color:var(--muted);letter-spacing:.22em;text-transform:uppercase;margin:0;font-size:.78rem;font-weight:700;line-height:1.2}.shell-brand h1{font-family:var(--display-font);letter-spacing:-.04em;text-wrap:balance;margin:0;font-size:clamp(2.35rem,4vw,3.9rem);font-weight:400;line-height:.98}.shell-copy{max-width:720px;color:var(--muted);letter-spacing:.01em;margin:0;font-size:1rem;line-height:1.75}.hero-pills{flex-wrap:wrap;gap:10px;max-width:640px;margin:0;padding:0;list-style:none;display:flex}.hero-pill{border:1px solid var(--line);box-shadow:var(--shadow-soft);color:var(--muted);letter-spacing:.08em;white-space:nowrap;background:#fffcf6c2;border-radius:9999px;align-items:center;padding:10px 14px;font-size:.78rem;line-height:1.2;display:flex}.preview-panel{padding:16px}.preview-meta{color:var(--muted);letter-spacing:.01em;margin:0;font-size:.82rem;line-height:1.5}.preview-figure{justify-items:center;gap:10px;margin:8px 0 0;display:grid}.preview-image{background:#fff;border:1px solid #1111110f;border-radius:18px;width:min(100%,300px);display:block;box-shadow:0 12px 28px #1111110d}.preview-caption{color:var(--muted);letter-spacing:.01em;text-align:center;max-width:28ch;margin:0;font-size:.84rem;line-height:1.55}.status-strip{border:1px solid var(--line-strong);background:linear-gradient(135deg, #ffffffb8, #faf5ecf0), var(--surface);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;justify-content:space-between;align-items:center;gap:18px;margin:0 0 18px;padding:16px 18px 17px;display:flex}.status-strip-copy{align-items:flex-start;gap:12px;min-width:0;display:flex}.status-dot{background:#111;border-radius:9999px;flex:none;width:11px;height:11px;margin-top:7px;box-shadow:0 0 0 5px #11111114}.status-dot[data-state=busy]{background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 14%, white)}.status-dot[data-state=error]{background:var(--danger);box-shadow:0 0 0 5px #b13d3d1f}.status-title{text-wrap:balance;margin:0;font-size:.98rem;font-weight:600;line-height:1.35}.status-subtitle{color:var(--muted);letter-spacing:.01em;margin:6px 0 0;font-size:.9rem;line-height:1.6}.composer-note,.field-help,.field-error,.output-path{color:var(--muted);letter-spacing:.01em;margin:12px 0 0;font-size:.9rem;line-height:1.6}.actions-panel{border:1px solid var(--line);background:linear-gradient(180deg, #ffffffbd, #f8f2e7eb), var(--surface-soft);border-radius:22px;margin-top:16px;padding:18px 16px 14px;box-shadow:inset 0 1px #ffffffb8}.actions-panel .panel-head{margin-bottom:12px}.status-strip-side{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px;display:flex}.status-meta{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.status-pill{border:1px solid var(--line);background:var(--surface-soft);color:var(--muted);letter-spacing:.08em;white-space:nowrap;border-radius:9999px;padding:8px 10px;font-size:.76rem;line-height:1.2}.workspace{grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);align-items:start;gap:20px;display:grid}.panel{border:1px solid var(--line);background:linear-gradient(180deg, #ffffffc7, #fffaf2e6), var(--surface);box-shadow:var(--shadow-panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:26px}.composer{flex-direction:column;padding:20px;display:flex}.rail{align-self:start;gap:14px;display:grid;position:sticky;top:20px}.rail>.panel{padding:18px}.rail>.preview-panel{padding:16px}.panel-head{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;display:flex}.panel-kicker{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin:0 0 7px;font-size:.72rem;font-weight:600;line-height:1.2}.panel h2{margin:0;font-size:1.02rem;font-weight:600;line-height:1.2}.paste-box{flex:1;display:block}.paste-box textarea{resize:none;background:linear-gradient(180deg, #ffffffd1, #faf4eae6), var(--surface-soft);width:100%;min-height:380px;color:var(--text);letter-spacing:.01em;border:1px solid #372b1817;border-radius:22px;outline:none;padding:20px 20px 24px;font-size:.98rem;line-height:1.8;transition:border-color .16s,box-shadow .16s,transform .16s,background-color .16s;box-shadow:inset 0 1px #fffc}.paste-box textarea::placeholder{color:var(--faint)}.paste-box textarea:focus{border-color:color-mix(in srgb, var(--accent) 24%, white);box-shadow:inset 0 1px 0 #ffffffd9, 0 0 0 4px color-mix(in srgb, var(--accent) 12%, white);background:#fff;transform:translateY(-1px)}button,.ghost-button,.secondary-button,.segment,.preset-button,.primary-button{transition:transform .15s,box-shadow .15s,background-color .15s,border-color .15s,color .15s,opacity .15s}button:active:not(:disabled),.ghost-button:active:not(:disabled),.secondary-button:active:not(:disabled),.segment:active:not(:disabled),.preset-button:active:not(:disabled),.primary-button:active:not(:disabled){transform:translateY(1px)scale(.98)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid color-mix(in srgb, var(--accent) 30%, white);outline-offset:2px}.ghost-button,.secondary-button,.segment,.preset-button,.native-picker input[type=color],.primary-button{border-radius:9999px}.ghost-button,.secondary-button,.segment{border:1px solid var(--line);background:var(--surface)}.ghost-button{color:var(--text);white-space:nowrap;box-shadow:var(--shadow-soft);padding:11px 14px}@media (hover:hover){.ghost-button:hover:not(:disabled),.secondary-button:hover:not(:disabled),.primary-button:hover:not(:disabled),.segment:hover:not(:disabled),.preset-button:hover:not(:disabled){transform:translateY(-1px)}.primary-button:hover:not(:disabled){background:#000;box-shadow:0 14px 30px #11111129}}.ghost-button:disabled,.secondary-button:disabled,.primary-button:disabled,.segment:disabled,.preset-button:disabled{opacity:.52;cursor:not-allowed}.segmented{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.segment{color:var(--muted);box-shadow:var(--shadow-soft);padding:11px 12px}.segment.active{border-color:color-mix(in srgb, var(--accent) 22%, #11111124);color:var(--text);background:color-mix(in srgb, var(--accent) 8%, #fffcf6f5);box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 8%, #1111110a)}.accent-preview{border:1px solid var(--line);background:linear-gradient(180deg, #ffffffbd, #f8f2e7e6), var(--surface-soft);border-radius:20px;align-items:center;gap:12px;margin-top:14px;padding:14px;display:flex}.accent-preview strong{font-size:.98rem;font-weight:600;line-height:1.25;display:block}.accent-preview p{color:var(--muted);margin:4px 0 0;font-size:.88rem;line-height:1.5}.accent-swatch{border:1px solid #11111114;border-radius:14px;flex:none;width:42px;height:42px;box-shadow:inset 0 1px #ffffffb3,0 10px 24px #1111110f}.accent-tools{gap:10px;margin-top:12px;display:grid}.native-picker{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-soft);border-radius:20px;gap:8px;padding:12px 14px;display:grid}.native-picker-label,.preset-label{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;font-weight:600;line-height:1.2}.native-picker input[type=color]{appearance:none;background:0 0;border:1px solid #11111114;width:100%;height:48px;padding:4px;box-shadow:inset 0 1px #fffc}.native-picker input[type=color]::-webkit-color-swatch-wrapper{padding:0}.native-picker input[type=color]::-webkit-color-swatch{border:0;border-radius:9999px}.native-picker input[type=color]:disabled{opacity:.52}.preset-group{gap:8px;display:grid}.preset-list{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;display:grid}.preset-button{border:1px solid var(--line);background:var(--surface);min-height:46px;color:var(--text);text-align:left;box-shadow:var(--shadow-soft);align-items:center;gap:10px;padding:10px 12px;display:flex}.preset-button.active{border-color:color-mix(in srgb, var(--accent) 24%, #11111114);background:color-mix(in srgb, var(--accent) 8%, white);box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 10%, #1111110a)}.preset-swatch{border:1px solid #11111114;border-radius:7px;flex:none;width:20px;height:20px;box-shadow:inset 0 1px #ffffffbf}.preset-name{letter-spacing:.04em;font-size:.88rem;line-height:1.3}.hex-field{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-soft);border-radius:20px;align-items:center;gap:10px;margin-top:14px;padding:10px 14px;display:flex}.hex-field[data-invalid=true]{border-color:#b13d3d4d;box-shadow:0 0 0 4px #b13d3d14}.hex-prefix{color:var(--faint);letter-spacing:.08em;font-size:.9rem;font-weight:600;line-height:1}.hex-field input{width:100%;color:var(--text);letter-spacing:.14em;text-transform:uppercase;background:0 0;border:0;outline:none;font-weight:600}.field-error{color:var(--danger)}.actions{gap:10px;display:grid}.primary-button{color:#fff;background:#2a2117;width:100%;padding:14px 18px;box-shadow:0 14px 30px #2a211733}.secondary-button{color:var(--text);padding:13px 18px}.output-path{color:var(--faint);word-break:break-word}.support-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:18px;margin-top:24px;display:grid}.support-card{border:1px solid var(--line);background:linear-gradient(180deg, #ffffffc2, #f9f3e8e6), var(--surface);box-shadow:var(--shadow-soft);border-radius:24px;align-content:start;align-self:start;padding:20px;display:grid}.support-card h2{margin:0;font-size:1.08rem;font-weight:600;line-height:1.3}.support-copy,.support-list,.support-steps,.faq-list dd,.site-foot p{color:var(--muted);letter-spacing:.01em;font-size:.94rem;line-height:1.7}.support-copy{margin:14px 0 0}.support-list,.support-steps{margin:16px 0 0;padding-left:1.2rem}.support-list li,.support-steps li{margin-top:10px}.faq-list{margin:16px 0 0}.faq-item+.faq-item{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}.faq-list dt{font-weight:600;line-height:1.45}.faq-list dd{margin:6px 0 0}.site-foot{border-top:1px solid #372b1814;margin-top:14px;padding:22px 0 8px}.site-foot p{max-width:68ch;margin:0}@media (max-width:1120px){.workspace{grid-template-columns:1fr}.support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rail{position:static}.support-card:last-child{grid-column:1/-1}.paste-box textarea{min-height:320px}}@media (max-width:720px){.app-frame{width:min(100%,100vw - 20px);padding:16px 0 24px}.shell-head{padding-bottom:18px}.shell-brand h1{font-size:clamp(2rem,11vw,2.85rem)}.hero-pills{gap:8px}.status-strip{flex-direction:column;align-items:stretch}.status-strip-side,.status-meta{justify-content:flex-start}.ghost-button{width:100%}.panel,.composer{border-radius:20px}.composer,.rail>.panel{padding:16px}.panel-head{flex-direction:column;align-items:flex-start}.preview-panel{padding:16px}.preview-image{border-radius:16px;width:min(100%,260px)}.support-grid{grid-template-columns:1fr}.paste-box textarea{min-height:300px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}