:root{--ink: #20231f;--muted: #686b63;--paper: #f7f7f2;--surface: #ffffff;--line: #dddfd7;--acid: #d7ff64;--acid-hover: #c5ef4b;--coral: #ff715b;--blue: #b9d9ff;--radius: 6px;--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:1.6}button,input,select,textarea{font:inherit;letter-spacing:0}button,select,input[type=range],input[type=color],summary{cursor:pointer}button{border:0}a{color:inherit;text-decoration:none}img,video,canvas{max-width:100%}[hidden]{display:none!important}:focus-visible{outline:3px solid #3864db;outline-offset:3px}.container{width:min(1200px,calc(100% - 64px));margin-inline:auto}.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}.site-header{position:relative;z-index:10;border-bottom:1px solid var(--line);background:#f7f7f2f0}.site-header .container{height:76px;display:flex;align-items:center;gap:40px}.logo{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-size:23px;line-height:1;font-weight:700;letter-spacing:0}.logo-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:4px;background:var(--ink);color:var(--acid);font:700 20px/1 var(--font-mono)}.logo .accent{color:#467719}.site-nav{display:flex;align-items:center;gap:28px;margin-left:auto}.site-nav a{font-size:13px;font-weight:500;color:var(--muted)}.site-nav a:hover{color:var(--ink)}.language-control{display:flex;align-items:center;gap:7px;padding-left:24px;border-left:1px solid var(--line)}.language-icon{font-size:11px;color:var(--muted)}.language-control select{appearance:none;width:auto;min-width:75px;border:0;padding:8px 16px 8px 0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23686b63'/%3E%3C/svg%3E") right center / 10px 6px no-repeat;color:var(--ink);font-size:12px}.hero{padding:52px 0 40px}.hero-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 18px;color:var(--muted);font:500 11px/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:0}.status-dot,.live-dot{width:7px;height:7px;border-radius:50%;background:#559b35;flex:0 0 auto}.hero h1{max-width:850px;margin:0;font-size:68px;font-weight:700;line-height:1.08;letter-spacing:0}.hero h1 span{position:relative;display:inline-block;z-index:0}.hero h1 span:after{content:"";position:absolute;z-index:-1;left:-5px;right:-8px;bottom:2px;height:23px;background:var(--acid);transform:rotate(-1.5deg)}.hero-description{max-width:590px;margin:20px 0 16px;color:var(--muted);font-size:16px;line-height:1.75}.text-link{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:2px}.text-link:hover{color:#47751d;border-color:#47751d}.hero-notes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 16px;max-width:260px;padding-bottom:8px}.hero-notes span{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px}.hero-notes span:before{content:"✓";color:#47751d;font-weight:700}.tool-intro{padding-top:34px}.tool-back{display:inline-block;margin-bottom:30px;color:#3d6818;font-size:12px;font-weight:600}.tool-intro .eyebrow{margin-bottom:10px}.tool-intro h1{margin:0;font-size:38px;line-height:1.15}.tool-intro>p:last-child{max-width:680px;margin:12px 0 28px;color:var(--muted);font-size:14px}body[data-example]:not([data-example=""]) .hero{display:none}.tool{display:grid;grid-template-columns:370px minmax(0,1fr);background:var(--surface);border:1px solid #cfd2c9;border-radius:var(--radius);box-shadow:0 16px 40px #24281f12,0 2px 4px #24281f0a;overflow:hidden}.editor-controls{border-right:1px solid var(--line)}.control-section{margin:0;padding:23px 25px;border-bottom:1px solid var(--line)}.control-section:last-child{border-bottom:0}.control-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.control-heading h2,.advanced-section>summary{display:flex;align-items:center;gap:10px;margin:0;font-size:12px;line-height:1.4;font-weight:700}.section-number{color:#8a8e83;font:400 10px/1 var(--font-mono)}.icon-button{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:4px;color:var(--ink);background:transparent}.icon-button:hover{background:#f0f1eb}.reset-button{width:28px;height:28px;border:0;color:var(--muted);font-size:20px}.field{margin-bottom:16px}.field:last-child{margin-bottom:0}.field>label,.color-field>label,.range-label label{display:block;margin-bottom:7px;color:var(--muted);font-size:11px;font-weight:500}textarea,select,input[type=text]{width:100%;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink)}textarea{min-height:85px;padding:12px 14px;resize:vertical;font:400 17px/1.55 var(--font-mono)}select,input[type=text]{min-height:40px;padding:8px 32px 8px 11px;font-size:12px}select{appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23686b63'/%3E%3C/svg%3E") right 12px center / 10px 6px no-repeat}input[type=text]{padding-right:11px}textarea:focus,select:focus,input[type=text]:focus{border-color:#6d824b;outline:2px solid #d4e3b9;outline-offset:0}.char-count{color:var(--muted);font:400 10px/1 var(--font-mono)}.char-count.limit{color:#b53624}.local-note{display:flex;align-items:center;gap:7px;margin:10px 0 0;color:var(--muted);font-size:10px}.mini-lock{position:relative;width:8px;height:7px;margin-top:3px;border:1px solid #777d6e;border-radius:1px}.mini-lock:before{content:"";position:absolute;width:4px;height:4px;left:1px;top:-5px;border:1px solid #777d6e;border-bottom:0;border-radius:3px 3px 0 0}.range-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.range-value{color:var(--muted);font:400 10px/1 var(--font-mono)}input[type=range]{appearance:none;width:100%;height:3px;margin:8px 0;background:#dfe3d7;border-radius:3px;accent-color:#64883c}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border:3px solid var(--surface);border-radius:50%;background:#52782f;box-shadow:0 0 0 1px #52782f}.color-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.color-input-wrap{display:flex;align-items:center;gap:8px;min-height:38px;padding:5px 8px;border:1px solid var(--line);border-radius:4px}input[type=color]{width:25px;height:25px;flex:0 0 auto;padding:0;border:0;border-radius:3px;background:transparent;overflow:hidden}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid #c8cbc2;border-radius:3px}.color-input-wrap span{font:400 10px/1 var(--font-mono);color:var(--muted)}.check-field{display:flex;align-items:center;gap:8px;margin:13px 0 0;font-size:11px;color:var(--muted)}.check-field input{appearance:none;width:14px;height:14px;flex:0 0 auto;margin:0;border:1px solid #bfc4b6;border-radius:3px;background:var(--surface)}.check-field input:checked{border-color:#496b2c;background:#496b2c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='m2.5 6 2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") center / 12px no-repeat}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}.advanced-section>summary{padding:0}.summary-chevron{margin-left:auto;color:var(--muted);font-size:17px;transition:transform .16s ease}.advanced-section:not([open]) .summary-chevron{transform:rotate(-90deg)}.advanced-content{padding-top:21px}.row{display:flex;gap:12px}.row>.field{min-width:0;flex:1}.toggle-grid{display:flex;flex-wrap:wrap;gap:0 18px}.toggle-grid .check-field{margin-top:8px}.extras-details{margin-top:18px;border-top:1px dashed var(--line);padding-top:15px}.extras-details>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px}.extras-details[open]>summary span:last-child{transform:rotate(45deg)}.extras-content{padding-top:18px}.file-row{display:flex;align-items:center;gap:8px}input[type=file]{min-width:0;width:100%;color:var(--muted);font-size:10px}input[type=file]::file-selector-button{margin-right:8px;border:1px solid var(--line);border-radius:4px;padding:7px 9px;background:var(--paper);color:var(--ink);font-size:10px}.editor-stage{min-width:0;padding:25px;background:#fafaf7}.preview-heading{min-height:30px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.preview-heading>div{display:flex;align-items:center;gap:8px}.preview-heading h2{margin:0;font-size:11px;font-weight:600;color:var(--muted)}.preview-toggle{width:30px;height:30px;border:0;color:var(--muted)}.preview-wrap{position:relative;display:grid;place-items:center;min-height:310px;padding:36px;background-color:#e9eae4;background-image:linear-gradient(45deg,#dedfd9 25%,transparent 25%),linear-gradient(-45deg,#dedfd9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dedfd9 75%),linear-gradient(-45deg,transparent 75%,#dedfd9 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;border:1px solid #d8dad2;border-radius:4px;overflow:hidden}#preview{display:block;width:auto;max-width:100%;height:auto;max-height:470px;box-shadow:0 9px 24px #181c1529}.export-row{display:flex;gap:10px;margin-top:18px}.btn-primary,.btn-secondary,.btn-download{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:48px;padding:12px 20px;border-radius:4px;font-size:13px;font-weight:650;transition:background .15s ease,transform .15s ease}.btn-primary{flex:1;justify-content:space-between;background:var(--acid);color:#253216;border:1px solid #c1e84e}.btn-primary:hover{background:var(--acid-hover)}.btn-primary:active,.btn-secondary:active{transform:translateY(1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.button-arrow{font-size:19px}.btn-secondary{border:1px solid var(--line);background:var(--surface);color:var(--ink)}.btn-secondary:hover{background:#efefe9}.export-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:var(--muted);font-size:10px}.privacy-label{display:flex;align-items:center;gap:5px}.privacy-label:before{content:"";width:5px;height:5px;border-radius:50%;background:#559b35}.progress-wrap{display:none;margin-top:16px}.progress-wrap.active{display:block}.progress-track{height:5px;background:#e2e4dc;overflow:hidden}.progress-fill{height:100%;width:0;background:#64883c;transition:width .15s ease}.progress-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11px;color:var(--muted)}.btn-cancel{padding:5px 9px;border:1px solid var(--line);border-radius:4px;color:#a33325;background:transparent;font-size:11px}.result-area{display:none;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.result-area.done{display:block}.result-area img,.result-area video{display:block;width:100%;border-radius:4px}.result-actions{display:flex;align-items:center;gap:12px;margin-top:12px}.btn-download{background:var(--ink);color:var(--surface)}.btn-download:hover{background:#3b4037}.mobile-hint{display:none;color:var(--muted);font-size:11px}.examples-section{margin-top:100px;padding:82px 0 90px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#efefe9}.section-heading .eyebrow{margin-bottom:14px}.section-heading h2{max-width:650px;margin:0;font-size:36px;line-height:1.2;letter-spacing:0}.examples-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.examples-heading>p{max-width:340px;margin:0 0 3px;color:var(--muted);font-size:13px}.example-filters{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 25px}.filter-button{padding:7px 14px;border:1px solid #cfd1c8;border-radius:999px;color:var(--muted);background:transparent;font-size:11px}.filter-button:hover{color:var(--ink);border-color:#92988a}.filter-button.active{border-color:var(--ink);background:var(--ink);color:var(--surface)}.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.example-card{min-width:0;overflow:hidden;border:1px solid #d1d3ca;border-radius:var(--radius);background:var(--surface)}.example-stage{padding:20px;background:#e3e4dd}.example-stage canvas{display:block;width:100%;height:auto;aspect-ratio:2 / 1;box-shadow:0 4px 12px #20231f1a}.example-meta{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px}.example-meta h3{margin:0;font-size:13px;font-weight:600}.example-copy{min-width:0}.example-description{margin:3px 0 0;color:var(--muted);font-size:10px;line-height:1.4}.example-actions{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:2px}.example-use{display:inline-flex;align-items:center;gap:9px;padding:7px 0 7px 8px;background:transparent;color:var(--muted);font-size:11px}.example-use:hover{color:#426b20}.example-use span{font-size:16px}.example-open{color:var(--muted);font-size:10px;text-decoration:underline;text-underline-offset:3px}.example-open:hover{color:var(--ink)}.how-section{padding-block:90px}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:42px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}.steps-grid li{padding:27px 34px 0 0}.steps-grid li+li{padding-left:34px;border-left:1px solid var(--line)}.step-num{color:#668242;font:400 11px/1 var(--font-mono)}.steps-grid h3{margin:17px 0 9px;font-size:16px}.steps-grid p{margin:0;color:var(--muted);font-size:13px}.privacy-strip{background:var(--blue)}.privacy-strip .container{position:relative;padding-block:58px;text-align:center}.privacy-symbol{display:block;margin-bottom:15px;color:#263b65;font-size:30px;line-height:1}.privacy-strip h2{margin:0 0 10px;font-size:28px;letter-spacing:0}.privacy-strip p{max-width:570px;margin:0 auto;color:#3c5277;font-size:13px}.faq-section{padding-block:85px}.faq-list{margin-top:35px;border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item summary{position:relative;padding:21px 42px 21px 0;font-size:15px;font-weight:600}.faq-item summary:after{content:"+";position:absolute;right:4px;top:17px;color:var(--muted);font:400 22px/1 var(--font-mono)}.faq-item[open] summary:after{content:"−"}.faq-item p{max-width:750px;margin:-4px 0 23px;color:var(--muted);font-size:13px}.site-footer{padding:45px 0 25px;background:var(--ink);color:#f0f2ea}.site-footer .logo{color:#f0f2ea}.site-footer .logo-mark{background:var(--acid);color:var(--ink)}.site-footer .logo .accent{color:var(--acid)}.footer-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:35px}.footer-top p{margin:0;color:#a8ada0;font-size:12px}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:22px;border-top:1px solid #3d4239;color:#a8ada0;font-size:10px}.footer-bottom nav{display:flex;flex-wrap:wrap;gap:20px}.footer-bottom a:hover{color:var(--acid)}.toast{position:fixed;z-index:100;left:50%;bottom:24px;max-width:calc(100vw - 32px);padding:11px 17px;border-radius:4px;background:var(--ink);color:var(--surface);font-size:12px;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .18s ease,transform .18s ease}.toast.show{opacity:1;transform:translate(-50%)}.article{max-width:800px;margin:0 auto;padding:60px 20px}.article h1{margin:0 0 12px;font-size:40px;line-height:1.2;letter-spacing:0}.article .lead{color:var(--muted);margin-bottom:32px;font-size:17px}.article h2{margin:38px 0 12px;font-size:24px;letter-spacing:0}.article h3{margin:24px 0 8px;font-size:18px}.article p,.article li{color:#50554c}.article a,.section-cta a{color:#3d6818;text-decoration:underline;text-underline-offset:3px}.article pre{padding:18px;border-radius:4px;background:#20231f;color:#e6eadf;overflow-x:auto;font:13px/1.6 var(--font-mono)}.article code{padding:1px 5px;border-radius:3px;background:#e8ecde;font-family:var(--font-mono);font-size:.92em}.article pre code{padding:0;background:transparent}html[lang^=zh] .hero h1{font-size:62px}html[lang^=zh] .section-heading h2{font-size:33px}@media(min-width:1100px){.tool{grid-template-columns:370px minmax(0,1fr)}.editor-stage{display:flex;flex-direction:column}.preview-wrap{flex:1}}@media(max-width:900px){.container{width:min(100% - 40px,700px)}.hero{padding:40px 0 32px}.hero-inner{display:block}.hero h1,html[lang^=zh] .hero h1{font-size:50px}.hero-notes{max-width:none;justify-content:flex-start;margin-top:22px}.tool{grid-template-columns:1fr}.editor-controls{display:contents}.text-section{order:1}.editor-stage{order:2;border-bottom:1px solid var(--line)}.control-section:not(.text-section){order:3}.editor-controls{border-right:0}.examples-section{margin-top:70px;padding-block:60px}.examples-heading{display:block}.examples-heading>p{max-width:550px;margin-top:18px}.section-heading h2,html[lang^=zh] .section-heading h2{font-size:31px}}@media(max-width:600px){.container{width:calc(100% - 28px)}.site-header .container{height:auto;min-height:68px;flex-wrap:wrap;gap:10px 14px;padding-block:14px}.logo{font-size:21px}.logo-mark{width:27px;height:27px}.site-nav{order:3;width:100%;justify-content:flex-start;gap:24px;margin:0;padding-top:9px;border-top:1px solid var(--line)}.language-control{margin-left:auto;padding-left:12px}.hero{padding:33px 0 27px}.tool-intro{padding-top:25px}.tool-back{margin-bottom:22px}.tool-intro h1{font-size:31px}.tool-intro>p:last-child{margin-bottom:22px}.hero h1,html[lang^=zh] .hero h1{font-size:42px;line-height:1.15}.hero h1 span:after{height:14px;bottom:1px}.hero-description{margin-top:16px;font-size:14px}.hero-notes{gap:7px 14px}.eyebrow{font-size:10px}.tool{width:calc(100% - 20px)}.control-section,.editor-stage{padding:20px}.preview-wrap{min-height:210px;padding:22px}.export-row{flex-wrap:wrap}.btn-primary{min-width:170px}.btn-secondary{flex:1}.examples-grid{grid-template-columns:1fr;gap:18px}.example-stage{padding:14px}.example-meta{padding-inline:15px}.example-filters{gap:7px}.filter-button{padding-inline:12px}.how-section,.faq-section{padding-block:60px}.steps-grid{grid-template-columns:1fr;margin-top:28px}.steps-grid li,.steps-grid li+li{padding:22px 0;border-left:0;border-bottom:1px solid var(--line)}.steps-grid h3{margin-top:12px}.privacy-strip .container{padding-block:45px}.privacy-strip h2{font-size:25px}.footer-top,.footer-bottom{align-items:flex-start;flex-direction:column}.footer-bottom nav{gap:15px 22px}.mobile-hint{display:inline}.article{padding-block:40px}.article h1{font-size:32px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}