@charset "UTF-8";
:root{--bg:#f6f7f3;--paper:#fff;--ink:#24352f;--muted:#7c8780;--green:#2d6453;--green-light:#edf4ef;--line:#e7ebe5;--orange:#c58357;font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,select,textarea{font:inherit}button,a,select,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.page-shell{width:min(1180px,calc(100% - 80px));margin:auto}.site-header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:23px;font-weight:700;letter-spacing:1px}.brand-mark{width:39px;height:39px;border-radius:12px;background:var(--green);color:#fff;display:grid;place-items:center;box-shadow:0 4px 10px #2d645315}.brand-mark svg{width:24px;height:24px}.brand-en{display:inline-block;font-size:10px;letter-spacing:2px;color:#8c958c;font-weight:500;margin-left:14px;vertical-align:middle}.header-note{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}.status-dot{width:6px;height:6px;border-radius:50%;background:#6b9a75;box-shadow:0 0 0 4px #e7eee4}.hero{position:relative;padding:49px 0 39px}.eyebrow{color:var(--green);font-size:11px;letter-spacing:2px;display:flex;align-items:center;gap:9px}.eyebrow>span{display:block;width:18px;height:1px;background:var(--green)}h1{font-size:40px;line-height:1.4;letter-spacing:-1.5px;font-weight:650;margin:13px 0 11px}h1>span{color:var(--green)}.hero>p{color:#798379;font-size:14px;letter-spacing:.4px;margin:0}.hero-tags{display:flex;gap:21px;margin-top:23px;color:#6e7a70;font-size:11px}.hero-tags>span{display:flex;align-items:center;gap:6px}.hero-tags svg{width:14px;height:14px}.hero-decoration{position:absolute;right:45px;top:28px;width:245px;height:200px;pointer-events:none}.deco-window{position:absolute;top:13px;left:37px;width:147px;height:160px;border:1px solid #d8e2d5;border-radius:13px;background:#fafcf7;transform:rotate(9deg);padding:12px 17px;box-shadow:10px 14px 30px #49564107;color:#9eae9a}.deco-dots{font-size:6px;letter-spacing:3px;border-bottom:1px solid #e5eadd;padding-bottom:10px;margin-bottom:13px}.deco-window>span{font-family:monospace;font-size:13px}.deco-window i{display:block;height:5px;width:72px;border-radius:4px;background:#dce6d7;margin:10px 0 10px 9px}.deco-window i:nth-of-type(2){width:94px}.deco-window i:nth-of-type(3){width:55px}.deco-window b{position:absolute;bottom:10px;right:-19px;display:grid;place-items:center;width:42px;height:42px;border:5px solid var(--bg);border-radius:50%;background:var(--green);color:white}.deco-orbit{position:absolute;top:8px;left:2px;width:216px;height:183px;border:1px dashed #d8e1cf;border-radius:50%;transform:rotate(-25deg);z-index:-1}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}.panel{min-width:0;background:var(--paper);border:1px solid #e2e7df;border-radius:16px;box-shadow:0 5px 20px #2b392805;overflow:hidden}.panel-heading{height:74px;padding:0 23px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f2ed;gap:8px}.panel-title{display:flex;align-items:center;gap:10px;white-space:nowrap}h2{font-size:14px;font-weight:600;margin:0}.step-number{font:11px/1 "Segoe UI",sans-serif;letter-spacing:1px;color:#95a38d}.text-button{font-size:12px;color:#8b948b;border:0;background:none;padding:7px}.text-button:hover{color:var(--green)}.input-wrap{margin:19px 20px 0;border:1px solid var(--line);border-radius:9px;background:#fbfcf9;overflow:hidden;transition:border-color .2s,box-shadow .2s}.input-wrap:focus-within{border-color:#94b5a0;box-shadow:0 0 0 3px #2d64530a}textarea{display:block;resize:vertical;width:100%;min-height:245px;height:245px;max-height:680px;line-height:1.85;padding:17px 17px 7px;background:transparent;color:#46574b;border:0;outline:none;font:12px/1.9 "Cascadia Code",Consolas,"Microsoft YaHei",monospace;tab-size:2}textarea::placeholder{color:#a2aba0}.input-meta{display:flex;justify-content:space-between;padding:9px 14px 11px;color:#9aa394;font-size:10px}.input-meta>span:first-child{display:flex;align-items:center;gap:6px}.tiny-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#a7b29f;flex-shrink:0}.examples{display:flex;align-items:center;gap:9px;padding:14px 22px 16px;font-size:11px;color:#929b8d}.examples>span{margin-right:2px}.examples>button{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #e6eae2;color:#6f7d6e;padding:6px 10px;border-radius:6px;font-size:10px;transition:all .15s}.examples>button:hover{border-color:#a0b69e;background:#f5f8f1}.examples svg{width:12px;height:12px}.video-options{margin:0 22px;padding:14px 0 16px;border-top:1px solid #edf0e8;display:flex;align-items:center;gap:10px;font-size:11px;color:#7d8878}.video-options>label:first-child{white-space:nowrap}select{max-width:150px;min-width:0;padding:6px 22px 6px 9px;border:1px solid #e5e9df;border-radius:6px;color:#5d705c;background:#fff;font-size:11px;cursor:pointer}.checkbox-label{display:flex;align-items:center;gap:5px;margin-left:auto;cursor:pointer;white-space:nowrap}input[type=checkbox]{accent-color:var(--green);width:13px;height:13px;margin:0}.input-footer{border-top:1px solid #edf0e8;background:#fafbf8;min-height:51px;display:flex;align-items:center;gap:7px;padding:12px 22px;font-size:10px;color:#96a08f}.input-footer svg{width:13px;height:13px;color:#94a388}kbd{font:9px/1.5 "Segoe UI",sans-serif;border:1px solid #e4e9dc;border-radius:4px;padding:1px 5px;margin-left:auto;color:#a4ac9c;white-space:nowrap}.tabs{display:flex;border:1px solid #e9ece4;background:#f6f8f2;border-radius:7px;padding:3px;gap:2px}.tabs>button{background:transparent;border:0;color:#899280;padding:5px 10px;border-radius:4px;font-size:10px;white-space:nowrap}.tabs>button[aria-selected=true]{background:#fff;color:var(--green);box-shadow:0 1px 4px #2b39280c}.output-stage{margin:19px 20px 0;height:291px;border:1px solid #e8ece3;border-radius:9px;overflow:hidden;background:linear-gradient(135deg,#fcfdfb,#fafcf7)}#view-preview,#view-source{height:100%;width:100%}#preview{width:100%;height:100%;border:0;background:#fff}.empty-state{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px}.empty-illustration{position:relative;width:59px;height:65px;border:1px solid #d8e2d2;border-radius:9px;background:#f3f7ee;display:grid;place-items:center;margin-bottom:22px;transform:rotate(-6deg)}.empty-illustration>svg{width:26px;height:26px;color:#90a283}.empty-illustration>span{position:absolute;right:-10px;bottom:-7px;width:26px;height:26px;border-radius:50%;background:#e6eee0;border:3px solid #fafcf7;display:grid;place-items:center;color:#839c71}.empty-illustration>span>svg{width:14px;height:14px}.empty-state h3{font-size:13px;font-weight:500;color:#6d7d64;margin:0 0 9px}.empty-state p{font-size:11px;line-height:1.9;color:#a0a994;margin:0}.output-stage pre{margin:0;height:100%;overflow:auto;padding:18px;color:#55725d;font:11px/1.8 "Cascadia Code",Consolas,"Microsoft YaHei",monospace;white-space:pre-wrap;overflow-wrap:anywhere}.result-status{display:flex;align-items:center;gap:7px;min-height:45px;margin:0 23px;font-size:10px;color:#97a08e}.result-status.ready{color:#628064}.result-status.ready>.tiny-dot{background:#6b976b}.result-status.error{color:#ae734e}.result-status.error>.tiny-dot{background:#c5916b}.result-status.loading>.tiny-dot{background:var(--green);animation:pulse 1s infinite}#status-text{min-width:0;overflow-wrap:anywhere}#original-link{font-size:10px;margin-left:auto;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}.copy-actions{display:flex;gap:10px;margin:5px 22px 0}.button{height:43px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:7px;font-size:12px;font-weight:500;transition:background .15s,transform .15s}.button:active:not(:disabled){transform:translateY(1px)}.button svg{width:15px;height:15px}.button-primary{border:1px solid var(--green);background:var(--green);color:white;flex:1.45;padding:0 14px}.button-primary:not(:disabled):hover{background:#245543}.button-arrow{margin-left:auto;opacity:.7}.button-primary>svg:first-child{margin-right:auto}.button-secondary{border:1px solid #dce4d7;color:#5d7356;background:white;flex:1;padding:0 11px}.button-secondary:not(:disabled):hover{background:#f5f8f1}.button:disabled{opacity:.43}.copy-caption{font-size:10px;color:#9ba591;text-align:center;margin:12px 10px 17px;line-height:1.8}.paste-tip{display:flex;align-items:flex-start;gap:10px;margin:19px 0 0;padding:16px 19px;border:1px solid #e6e9dd;border-radius:9px;background:#f0f3e9;color:#7f8c70}.paste-tip>svg{width:15px;height:15px;margin-top:2px}.paste-tip strong{font-size:11px;font-weight:600;color:#69795b}.paste-tip p{display:inline;font-size:10px;line-height:1.9;margin:0 0 0 12px}.how-it-works{display:flex;justify-content:center;align-items:center;gap:43px;padding:35px 0}.how-it-works>div{display:flex;align-items:center;gap:12px}.how-it-works>div>span{width:25px;height:25px;display:grid;place-items:center;font-size:10px;border:1px solid #dce4d5;border-radius:50%;color:#7d9272}.how-it-works p{font-size:10px;color:#9aa38f;margin:0;line-height:1.8}.how-it-works strong{display:block;color:#79876f;font-size:11px;font-weight:500;margin-bottom:2px}.how-it-works>svg{width:15px;height:15px;color:#bcc6b0}.site-footer{display:flex;justify-content:space-between;gap:16px;padding:22px 0 27px;border-top:1px solid var(--line);font-size:10px;color:#a0a795}.footer-divider{margin:0 12px;color:#bac1af}.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#243e32;color:white;padding:13px 20px;display:flex;align-items:center;gap:9px;box-shadow:0 8px 35px #152b2420;border-radius:10px;font-size:12px;z-index:10;max-width:calc(100% - 30px)}.toast svg{width:16px;height:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}:focus-visible{outline:2px solid #8eae87;outline-offset:4px}textarea:focus-visible{outline:none}@keyframes pulse{50%{opacity:.25}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(min-width:1500px){.hero{padding-top:61px;padding-bottom:45px}h1{font-size:44px}.hero-decoration{top:39px}.page-shell{width:1180px}}
@media(max-width:1000px){.page-shell{width:calc(100% - 44px)}h1{font-size:34px}.hero-decoration{right:8px;opacity:.6;transform:scale(.85);transform-origin:right center}.panel-heading{padding:0 17px}.tabs>button{padding:5px 7px}.how-it-works{gap:25px}.video-options{gap:7px;margin:0 18px}.checkbox-label{font-size:10px}.paste-tip p{display:block;margin:4px 0 0}}
@media(max-width:760px){.page-shell{width:calc(100% - 32px)}.site-header{height:77px}.brand{font-size:21px}.brand-en{font-size:9px;margin-left:10px}.header-note{font-size:0;gap:0}.hero{padding:35px 0 27px}.eyebrow{font-size:10px}h1{font-size:31px;letter-spacing:-1px;margin-top:14px}h1>span{display:block}.hero>p{font-size:12px;line-height:1.8;max-width:245px}.hero-tags{gap:18px;margin-top:19px;font-size:10px}.hero-decoration{right:-5px;top:27px;opacity:.4;transform:scale(.65)}.workspace{grid-template-columns:minmax(0,1fr);gap:16px}.panel-heading{height:65px;padding:0 20px}.input-wrap{margin-top:16px}textarea{height:220px;min-height:180px}.examples{padding-top:12px;padding-bottom:13px}.video-options{padding-top:12px;padding-bottom:14px;margin:0 22px}.input-footer{min-height:45px}.output-stage{height:280px;margin-top:17px}.result-status{min-height:46px}.copy-actions{margin-top:0}.copy-caption{margin-bottom:17px}.paste-tip{padding:14px;margin-top:16px}.how-it-works{justify-content:space-between;gap:8px;padding:28px 0}.how-it-works>div{gap:7px;align-items:flex-start}.how-it-works>div>span{width:20px;height:20px;font-size:9px}.how-it-works p{font-size:9px;max-width:85px}.how-it-works strong{font-size:10px}.how-it-works>svg{display:none}.site-footer{font-size:9px;flex-wrap:wrap;padding:20px 0}.footer-divider{margin:0 7px}.toast{bottom:20px;white-space:nowrap;font-size:11px}}
@media(max-width:360px){.brand-en{display:none}.page-shell{width:calc(100% - 24px)}.video-options{margin:0 16px;font-size:10px;gap:6px}.video-options select{width:117px;font-size:10px}.copy-actions{margin-left:16px;margin-right:16px}.copy-caption{font-size:9px}}
.header-actions{display:flex;align-items:center;gap:22px}.theme-toggle{display:grid;place-items:center;width:34px;height:34px;border:1px solid #e0e6da;border-radius:50%;background:#fbfcf8;color:#7e9073;transition:background .15s}.theme-toggle:hover{background:#edf2e8}.theme-toggle svg{width:16px;height:16px}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark;--bg:#151c19;--paper:#1d2721;--ink:#e0e9df;--muted:#8e9e90;--green:#91bda1;--green-light:#25382c;--line:#2c392e;--orange:#d7a681}
[data-theme=dark] .brand-mark{background:#375c47;color:#daebdb}[data-theme=dark] .brand-en,[data-theme=dark] .header-note{color:#91a08d}[data-theme=dark] .status-dot{box-shadow:0 0 0 4px #243629;background:#80a879}[data-theme=dark] .hero>p{color:#98a48e}[data-theme=dark] .hero-tags{color:#94a28b}[data-theme=dark] .deco-window{background:#202d23;border-color:#3b4b35;color:#788d70;box-shadow:none}[data-theme=dark] .deco-dots{border-color:#35452f}[data-theme=dark] .deco-window i{background:#3a4d33}[data-theme=dark] .deco-window b{background:#547b5d;color:#d9ead7}[data-theme=dark] .deco-orbit{border-color:#3a4c30}[data-theme=dark] .panel{border-color:#32402f;box-shadow:0 5px 20px #0000000a}[data-theme=dark] .panel-heading{border-color:#2c392a}[data-theme=dark] .step-number{color:#829576}[data-theme=dark] .text-button{color:#9ba88e}[data-theme=dark] .input-wrap{background:#18221a;border-color:#33432e}[data-theme=dark] textarea{color:#bcccb0}[data-theme=dark] textarea::placeholder{color:#718168}[data-theme=dark] .input-meta{color:#7b8e70}[data-theme=dark] .examples{color:#8b9c7e}[data-theme=dark] .examples>button{background:#202d22;border-color:#3a4c32;color:#9fb291}[data-theme=dark] .examples>button:hover{background:#293a2b;border-color:#6b825e}[data-theme=dark] .video-options{border-color:#33432e;color:#9dad8d}[data-theme=dark] select{background:#202d22;border-color:#3b4d32;color:#b0c29f}[data-theme=dark] .input-footer{background:#1a251c;border-color:#33432e;color:#819575}[data-theme=dark] kbd{border-color:#3b4c32;color:#90a47f}[data-theme=dark] .tabs{background:#18231a;border-color:#33452c}[data-theme=dark] .tabs>button{color:#879c79}[data-theme=dark] .tabs>button[aria-selected=true]{background:#2c3d2b;color:#bfd4ab}[data-theme=dark] .output-stage{border-color:#34462d;background:linear-gradient(135deg,#1c291d,#1a251b)}[data-theme=dark] .empty-illustration{background:#273823;border-color:#405835}[data-theme=dark] .empty-illustration>svg{color:#88a473}[data-theme=dark] .empty-illustration>span{background:#354b2d;border-color:#1c291d;color:#a5bd91}[data-theme=dark] .empty-state h3{color:#a4b894}[data-theme=dark] .empty-state p{color:#7e946e}[data-theme=dark] .output-stage pre{color:#a8c695}[data-theme=dark] .result-status{color:#8ca078}[data-theme=dark] .result-status.ready{color:#a0bd8c}[data-theme=dark] .result-status.error{color:#d5a67d}[data-theme=dark] .button-primary{background:#486f4c;border-color:#527a54;color:#eff5e9}[data-theme=dark] .button-primary:not(:disabled):hover{background:#577f57}[data-theme=dark] .button-secondary{background:#253622;border-color:#455b38;color:#b1c69b}[data-theme=dark] .button-secondary:not(:disabled):hover{background:#30472b}[data-theme=dark] .copy-caption{color:#829975}[data-theme=dark] .paste-tip{background:#202c1d;border-color:#35482d;color:#8ea17b}[data-theme=dark] .paste-tip strong{color:#afc398}[data-theme=dark] .how-it-works>div>span{border-color:#405435;color:#a1b98b}[data-theme=dark] .how-it-works p{color:#839973}[data-theme=dark] .how-it-works strong{color:#a3b791}[data-theme=dark] .how-it-works>svg{color:#506846}[data-theme=dark] .site-footer{color:#859a74}[data-theme=dark] .footer-divider{color:#546c47}[data-theme=dark] .theme-toggle{background:#23321f;border-color:#405634;color:#bad0a5}[data-theme=dark] .theme-toggle:hover{background:#30452a}[data-theme=dark] .toast{background:#d1e0bd;color:#2f4427}
@media(max-width:760px){.header-actions{gap:13px}.theme-toggle{width:32px;height:32px}}