@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
:root{--ink:#1c2620;--muted:#79837b;--green:#c7ef6b;--line:#e1e6dd;--bg:#f7f8f3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--bg);font-family:'DM Sans','Noto Sans SC',sans-serif;font-size:14px}.topbar{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,28px);background:#fbfcf8}.brand{display:flex;gap:9px;align-items:center;font-size:20px;font-weight:700;letter-spacing:.04em;text-decoration:none;color:var(--ink);line-height:1}.brand-mark{font-size:31px}.brand small{display:block;font-size:7px;letter-spacing:.2em;margin-top:6px}.top-right{display:flex;align-items:center;gap:32px}.top-right a{color:#526057;text-decoration:none;font-size:12px}.status{font-size:12px;background:#edf3e4;padding:9px 13px;border-radius:30px}.status i{display:inline-block;width:7px;height:7px;background:#7cac31;border-radius:50%;margin-right:7px}main{max-width:1390px;margin:auto;padding:0 5vw}.intro{display:flex;justify-content:space-between;align-items:end;padding:66px 0 38px}.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:700;color:#758477}.eyebrow b{font-weight:500;color:#b3bdb0;margin-left:23px}h1{font-size:clamp(38px,5vw,67px);line-height:1.15;letter-spacing:-.06em;margin:19px 0 16px;font-weight:600}h1 span{color:#7f9f53}.intro p{color:#7a867b;margin:0;line-height:1.9}.intro-aside{border-left:1px solid #d6dfd2;padding-left:24px;margin-bottom:4px}.intro-aside span,.canvas-label{font-size:9px;letter-spacing:.15em;font-weight:700;color:#849284}.intro-aside strong{display:block;margin:12px 0;font-size:14px}.intro-aside p{font-size:12px}.notice{display:flex;gap:13px;background:#eef4e7;border:1px solid #dce9d1;border-radius:10px;padding:15px 18px;margin-bottom:22px;color:#455f38}.notice>span{font-size:20px}.notice strong{font-size:12px}.notice p{font-size:12px;line-height:1.65;margin:4px 0 0;color:#6d8164}.workspace{display:grid;grid-template-columns:minmax(300px, 390px) minmax(0,1fr);border:1px solid #dee5dc;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 14px 40px #1c30220a}.input-panel{padding:27px;border-right:1px solid var(--line)}.section-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:28px}.number{border:1px solid #dbe3d6;border-radius:5px;padding:7px;font-size:10px;color:#8b9a87}.section-head h2,.canvas-head h2{font-size:17px;margin:0 0 5px}.section-head p{font-size:11px;color:#a0aaa0;margin:0}.label{display:flex;justify-content:space-between;font-weight:600;font-size:12px;margin:19px 0 9px}.label span{font-size:10px;color:#a7b0a5;font-weight:400}.upload{height:145px;background:#f9fbf7;border:1px dashed #cad9c4;border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;overflow:hidden}.upload input{position:absolute;opacity:0;width:1px;height:1px}.upload:focus-within{outline:2px solid #7eaa4a;outline-offset:2px}.upload-icon{display:block;font-size:19px;margin:0 auto 10px;background:#e9f1e4;border-radius:50%;width:32px;line-height:32px}.upload strong{font-size:11px}.upload p{font-size:10px;color:#a4afa1}.upload img{width:100%;height:100%;object-fit:contain}.subtle{background:none;border:0;color:#657a59;cursor:pointer;margin:8px 0 0;padding:0;font-size:11px}textarea,input,select{font:inherit;color:var(--ink)}textarea,select,input[type=number]{width:100%;border:1px solid #e3e8e0;background:#fafbf9;border-radius:7px;padding:12px;outline-color:#91bd5d}textarea{resize:vertical;min-height:94px;font-size:12px;line-height:1.7}textarea::placeholder{color:#b1bbb0}select{cursor:pointer;font-size:12px}.hint,.fine{font-size:10px;color:#a4aea2;margin:8px 0}.dimensions{display:grid;grid-template-columns:1fr 1fr;gap:12px}input[type=number]{font-size:12px}.primary,.download{cursor:pointer;border:0;font-weight:700}.primary{width:100%;padding:15px;background:#c9ef75;border-radius:7px;margin-top:14px}.primary span{float:right;font-size:16px}.primary:hover{background:#b8e663}.fine{text-align:center}.error{color:#b33b33;font-size:12px;margin:8px 0 0;min-height:0}.canvas-panel{padding:28px;display:flex;flex-direction:column}.canvas-head,.canvas-footer{display:flex;justify-content:space-between;align-items:center}.canvas-head h2{margin:9px 0 0}.canvas-head h2 span{font-size:11px;color:#a4aea2;font-weight:400}.file-tag{font-size:10px;letter-spacing:.05em;border:1px solid #dce6da;padding:8px 10px;border-radius:5px;color:#788a77}.canvas{position:relative;margin-top:25px;min-height:490px;flex:1;border-radius:9px;background-color:#17221d;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:24px 24px;overflow:hidden}.canvas svg{position:absolute;inset:10% 8%;width:84%;height:80%}.canvas-overlay{position:absolute;color:#778c7d;font-size:9px;letter-spacing:.12em;z-index:1}.top-left{top:18px;left:18px}.top-left i{color:#bce36e;font-size:7px;font-style:normal}.top-right-small{top:18px;right:18px}.bottom-left{bottom:16px;left:18px}.bottom-right{bottom:18px;right:18px}.axis{font-size:18px;color:#aacf76;vertical-align:middle}.canvas-footer{padding-top:23px}.canvas-footer strong{font-size:13px}.canvas-footer p{font-size:10px;color:#98a598;margin:6px 0 0}.download{padding:13px 18px;background:#202b24;color:#fff;border-radius:7px;font-size:11px}.download span{margin-left:20px}.download:hover{background:#3b4d3e}.how{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;padding:100px 0}.how h2{font-size:29px;letter-spacing:-.04em;margin:17px 0}.how p{color:#89958a;font-size:12px;line-height:1.9}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.steps div{border-top:1px solid #d6e0d3;padding-top:17px}.steps small{display:block;color:#95ae83;margin-bottom:22px}.steps strong{font-size:13px}footer{border-top:1px solid var(--line);padding:25px 5vw;display:flex;justify-content:space-between;color:#8d9a8b;font-size:10px}footer span:first-child{font-weight:700;font-size:13px;color:#425346}footer small{font-size:8px;margin-left:6px}@media(max-width:800px){.intro-aside{display:none}.intro{padding-top:45px}.workspace{grid-template-columns:1fr}.input-panel{border-right:0;border-bottom:1px solid var(--line)}.canvas{min-height:390px}.how{grid-template-columns:1fr;gap:25px;padding:65px 0}.top-right a{display:none}}@media(max-width:480px){main{padding:0 16px}.topbar{padding:0 18px;height:68px}.canvas-panel,.input-panel{padding:20px}.canvas{min-height:300px}.steps{grid-template-columns:1fr;gap:14px}.steps small{margin-bottom:8px}footer{gap:12px;flex-direction:column}}