:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fff;--surface:#fff;--surface-soft:#fbfbfa;--text:#111;--muted:#666;--faint:#9a9a96;--line:#11111114;--line-strong:#11111124;--accent:#2f6bff;--danger:#b13d3d;--shadow-panel:0 1px 2px #1111110a, 0 16px 48px #1111110a;--shadow-soft:0 1px 2px #11111108, 0 10px 24px #11111108;--display-font:"Iowan Old Style", "Palatino Linotype", "Songti SC", Georgia, serif;--ui-font:"Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background: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:var(--bg);min-height:100dvh;color:var(--text)}.app-frame{width:min(1240px,100vw - 32px);margin:0 auto;padding:24px 0 28px}.shell-head{padding:8px 0 16px}.shell-brand{max-width:700px}.eyebrow{color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px;font-size:.74rem;font-weight:600;line-height:1.3}.shell-brand h1{font-family:var(--display-font);letter-spacing:-.05em;text-wrap:balance;margin:0;font-size:clamp(2.3rem,4vw,4.1rem);font-weight:400;line-height:.95}.shell-copy{max-width:56ch;color:var(--muted);letter-spacing:.01em;text-wrap:pretty;margin:14px 0 0;font-size:1rem;line-height:1.6}.status-strip{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-soft);border-radius:20px;justify-content:space-between;align-items:center;gap:18px;margin:0 0 18px;padding:14px 16px 15px;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}.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.28fr) minmax(320px,.82fr);align-items:start;gap:18px;display:grid}.panel{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-panel);border-radius:22px}.composer{flex-direction:column;min-height:660px;padding:18px;display:flex}.rail{align-self:start;gap:14px;display:grid;position:sticky;top:20px}.rail>.panel{padding:18px}.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:var(--surface-soft);width:100%;min-height:560px;color:var(--text);letter-spacing:.01em;border:1px solid #11111114;border-radius:18px;outline:none;padding:18px 18px 22px;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) 5%, white);box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 8%, #1111110a)}.accent-preview{border:1px solid var(--line);background:var(--surface-soft);border-radius:18px;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:12px;margin-top:14px;display:grid}.native-picker{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-soft);border-radius:18px;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(2,minmax(0,1fr));gap:8px;display:grid}.preset-button{border:1px solid var(--line);background:var(--surface);color:var(--text);text-align:left;box-shadow:var(--shadow-soft);align-items:center;gap:10px;padding:11px 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:18px;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:#111;width:100%;padding:14px 18px;box-shadow:0 10px 24px #11111124}.secondary-button{color:var(--text);padding:13px 18px}.output-path{color:var(--faint);word-break:break-word}@media (max-width:1120px){.workspace{grid-template-columns:1fr}.rail{position:static}.composer{min-height:620px}.paste-box textarea{min-height:440px}}@media (max-width:720px){.app-frame{width:min(100vw,100vw - 20px);padding:16px 0 24px}.shell-brand h1{font-size:clamp(2rem,10vw,3rem)}.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}.preset-list{grid-template-columns:1fr}.paste-box textarea{min-height:320px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}