:root{--bg:#f3f2ed;--ink:#222820;--muted:#74776e;--line:#d7d9cf;--accent:#d4ef73}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Segoe UI','Microsoft YaHei',sans-serif}header{height:90px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{font-size:29px;font-weight:800;letter-spacing:-1.5px;text-decoration:none;color:inherit}.brand span{font-size:15px;font-weight:400;letter-spacing:1px}.local{font-size:12px}.local i{display:inline-block;width:7px;height:7px;border-radius:100%;background:#718b3a;margin-right:9px}main{max-width:1260px;padding:52px 40px 24px;margin:auto}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--muted)}h1{font-size:clamp(34px,4vw,54px);line-height:1.25;letter-spacing:-2px;margin:18px 0}.intro p{font-size:14px;color:var(--muted);margin-bottom:36px}.workspace{display:grid;grid-template-columns:1.45fr 1fr;border:1px solid var(--line);background:#fafaf6}.preview{padding:28px;border-right:1px solid var(--line)}.drop{min-height:285px;border:1px dashed #b9beb0;background:#eeefe7;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;cursor:pointer}.drop.over{background:#e5efcb}.plus{font-size:42px;font-weight:200}.drop strong{font-size:19px}.drop span:not(.plus),.drop small{color:var(--muted);font-size:12px}.fileline{display:flex;justify-content:space-between;gap:15px;margin-top:16px;font-size:12px}.fileline>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.change{cursor:pointer;white-space:nowrap;text-decoration:underline}.note{margin-top:38px;max-width:420px}.note>span{font-size:10px;letter-spacing:2px;color:#7b816e}.note p{font-size:13px;line-height:1.8;color:var(--muted)}.settings{padding:28px 32px}h2{font-size:20px;margin:0 0 26px}.settings h2{display:flex;justify-content:space-between}.settings h2 span{font-size:11px;border:1px solid var(--line);padding:4px 8px;font-weight:400}fieldset{border:0;padding:0;margin:0}.title{display:flex;justify-content:space-between;font-size:13px;margin-bottom:10px}.title span{color:var(--muted);font-size:11px}.number{display:flex;border:1px solid var(--line);background:white;align-items:center;padding-right:14px}.number input{width:100%;border:0;padding:13px;font-size:18px;background:transparent;min-width:0}.number span{white-space:nowrap;color:var(--muted);font-size:12px}.hint{font-size:11px;line-height:1.6;color:var(--muted);margin:8px 0 24px}.check{font-size:12px;display:flex;align-items:center;gap:8px}input[type=checkbox]{accent-color:#576b2c}button,.download{cursor:pointer;border:0;background:var(--accent);padding:16px 20px;font:inherit;color:var(--ink)}button[type=submit]{width:100%;display:flex;justify-content:space-between;font-weight:600}button:disabled{opacity:.45;cursor:not-allowed}button:hover:not(:disabled),.download:hover{background:#c4df62}input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #6b8433;outline-offset:3px}.secondary{margin-top:12px;background:#e5e7df;padding:8px 16px}#status{font-size:12px;color:var(--muted);line-height:1.7;overflow-wrap:anywhere}progress{width:100%;accent-color:#7b923e}video{width:100%;height:285px;background:#20241d}#result{margin-top:32px;border-top:1px solid var(--line);padding:30px 0}.resulthead{display:flex;align-items:center;justify-content:space-between;gap:20px}.resulthead h2{margin:12px 0}.resulthead p{font-size:13px;color:var(--muted)}.download{text-decoration:none;white-space:nowrap}#gif{display:block;max-width:100%;max-height:600px;margin:25px auto;background:#e9ebe3}summary{cursor:pointer;font-size:12px}pre{font-size:12px;overflow:auto;line-height:1.8}footer{margin-top:35px;display:flex;justify-content:space-between;gap:24px;font-size:10px;color:var(--muted);line-height:1.8}footer>span{max-width:540px}[hidden]{display:none!important}@media(max-width:740px){header{height:72px;padding:0 20px}.local{font-size:10px}main{padding:32px 20px}.workspace{grid-template-columns:1fr}.preview{border-right:0;border-bottom:1px solid var(--line);padding:20px}.settings{padding:24px 20px}.note{margin-top:22px}.resulthead,footer{align-items:flex-start;flex-direction:column}.drop{min-height:230px}h1{letter-spacing:-1px}}

.brand{letter-spacing:0;font-size:25px}.spaced{margin-top:24px}button[type=submit]{justify-content:center}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}
