:root{color-scheme:light;--paper:#f4f1e8;--light:#fcfaf4;--ink:#182631;--muted:#52616b;--line:#cbc7ba;--night:#111d2a;--orange:#a54b22;--amber:#f5ae52;--white:#f7f2e7;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--sans:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;--display:Georgia,"Songti SC",STSong,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:4px}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid #b45325;outline-offset:5px}
[hidden],html:not([data-language=en]) [data-lang=en],html[data-language=en] [data-lang=zh]{display:none!important}
.shell{width:min(1200px,calc(100% - 96px));margin-inline:auto}
.skip{position:fixed;left:1rem;top:1rem;z-index:5;transform:translateY(-180%);padding:.75rem 1rem;background:var(--light)}
.skip:focus{transform:none}
.site-header{border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;min-height:75px;gap:32px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:760;font-size:1.25rem;text-decoration:none;letter-spacing:-.05em}
.brand img{width:38px;height:38px;border-radius:10px}
.nav-inner nav{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:.91rem}
.nav-inner nav a,.footer-inner nav a{text-decoration:none}
.nav-inner nav a:hover,.footer-inner nav a:hover{text-decoration:underline}
.language,.lang-toggle{margin-left:auto;min-height:42px;padding:0 .8rem;border:1px solid var(--line);background:transparent;border-radius:6px;color:var(--ink);font-size:.86rem}
.nav-inner nav+.language,.nav-inner nav+.lang-toggle{margin-left:0}
.language:hover,.lang-toggle:hover{background:var(--light)}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(35px,7vw,100px);padding-block:68px 78px}
.hero-copy{padding-block:10px}
.drawing-label,.eyebrow{font:700 .73rem/1.5 var(--mono);letter-spacing:.11em}
.drawing-label{display:flex;gap:9px;align-items:center;color:var(--muted)}
.drawing-label i,.demo-head i,.caption-mark{width:8px;height:8px;display:inline-block;background:var(--orange);border-radius:50%;flex:none}
h1,h2,p,figure{margin:0}
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.08}
.hero h1{font-size:clamp(3.3rem,6.3vw,6.5rem);margin:22px 0 24px}
html[data-language=en] .hero h1{font-size:clamp(3.05rem,5.5vw,5.85rem);letter-spacing:-.065em}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero-copy>p{color:var(--muted);max-width:34rem;font-size:clamp(1rem,1.45vw,1.13rem);line-height:1.85}
.hero-actions{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:30px}
.button{display:inline-flex;justify-content:space-between;gap:20px;align-items:center;min-height:48px;padding:0 16px;color:var(--white);background:var(--ink);border-radius:6px;text-decoration:none;font-weight:700;font-size:.94rem}
.button:hover{background:#31414d}
.text-link{font-size:.92rem;font-weight:650}
.hero-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font:600 .72rem/1.5 var(--mono);letter-spacing:.05em}
.hero-meta span+span::before{content:"/";margin-right:14px;color:#9b8a73}
.hero-figure{position:relative;display:grid;place-items:center;isolation:isolate;min-width:0;padding:22px 0 48px}
.draft-field{position:absolute;inset:10% 0 12%;z-index:-1;border:1px solid #b5ab98;background:linear-gradient(90deg,#baad9435 1px,transparent 1px),linear-gradient(#baad9435 1px,transparent 1px);background-size:21px 21px}
.corner{position:absolute;width:15px;height:15px;border:solid var(--orange);border-width:0}
.corner.tl{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.corner.tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.corner.bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.corner.br{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.figure-index,.dimension{position:absolute;font:600 .67rem var(--mono);color:var(--orange);letter-spacing:.09em}
.figure-index{top:12px;left:12px}
.dim-x{bottom:12px;left:12px}
.dim-y{right:9px;top:50%;writing-mode:vertical-rl}
.phone{width:min(59%,268px);overflow:hidden;border-radius:clamp(24px,4vw,44px);border:7px solid #242c32;background:var(--night);box-shadow:0 26px 55px #1a20243c,0 0 0 1px #515152}
.phone img{width:100%}
.hero-figure figcaption{position:absolute;bottom:0;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.76rem}
.caption-mark{height:5px;width:5px}
.workflow{background:var(--night);color:var(--white);padding-block:78px}
.eyebrow{color:var(--orange);margin-bottom:14px}
.workflow .eyebrow{color:var(--amber)}
h2{font-size:clamp(2.3rem,4.6vw,4.2rem)}
.section-intro>p:last-child,.formats>div>p:last-child{margin-top:14px;color:var(--muted);max-width:33rem}
.section-intro>p:last-child{color:#b9c7cd}
.demo-layout{margin-top:32px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(22px,5vw,65px);align-items:center}
.steps{border-top:1px solid #e1eaf033}
.step{display:grid;grid-template-columns:30px minmax(0,1fr) 20px;gap:15px;align-items:start;text-align:left;padding:19px 12px 19px 5px;background:transparent;color:inherit;border:0;border-bottom:1px solid #e1eaf033;width:100%}
.step:hover,.step[aria-pressed=true]{background:#e1eaf00d}
.step-no{font:600 .76rem/2 var(--mono);color:#9faeb7}
.step[aria-pressed=true] .step-no,.step[aria-pressed=true] .arrow{color:var(--amber)}
.step strong{display:block;font-size:1.13rem}
.step small{display:block;margin-top:4px;color:#b9c7cd}
.demo{border:1px solid #d9e7eb45;border-radius:8px;overflow:hidden;background:#172738}
.demo-head,.demo figcaption{padding:12px 16px;font:600 .7rem/1.4 var(--mono);letter-spacing:.06em}
.demo-head{display:flex;justify-content:space-between;gap:10px}
.demo-head i{background:var(--amber);width:6px;height:6px;margin-right:4px}
.demo-head>span:last-child{color:#b9c7cd}
.demo svg{display:block;width:100%;border-block:1px solid #d9e7eb33}
.demo svg .part{stroke:#e1e7df;stroke-width:2.2}
.demo-dimension,.delta{stroke:var(--amber);stroke-width:1;fill:none}
.demo-dimension text,.delta text{font:11px var(--mono);text-anchor:middle;stroke:none;fill:var(--amber)}
.delta{opacity:0}
.moving-edge{transition:transform .3s ease,stroke .3s ease}
.demo[data-demo-stage="1"] .moving-edge,.demo[data-demo-stage="2"] .moving-edge{transform:translateY(-14px);stroke:var(--amber)}
.demo[data-demo-stage="1"] .delta{opacity:1}
.demo figcaption{color:var(--amber)}
.formats{display:grid;grid-template-columns:1fr 1fr;gap:30px clamp(35px,8vw,110px);padding-block:82px}
.format-list{margin:0;border-top:1px solid var(--line)}
.format-list div{display:grid;grid-template-columns:8rem 1fr;gap:15px;padding:14px 0;border-bottom:1px solid var(--line)}
.format-list dt{font:700 1rem/1.5 var(--mono)}
.format-list dd{margin:0;color:var(--muted)}
.format-note{grid-column:2;color:var(--muted);font-size:.82rem}
.contact{background:#e8dfce;border-block:1px solid var(--line)}
.contact-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:37px}
.contact h2{font-size:clamp(1.9rem,3.5vw,3.25rem)}
.site-footer{border-top:1px solid var(--line)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:28px}
.footer-inner .brand{font-size:1.05rem}
.footer-inner .brand img{width:30px;height:30px;border-radius:7px}
.footer-inner p{font-size:.71rem;color:var(--muted);margin-top:9px}
.footer-inner nav{display:flex;gap:19px;font-size:.84rem}
.legal-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(30px,6vw,85px);padding-block:72px 86px}
.legal-sidebar{align-self:start;position:sticky;top:32px}
.legal-sidebar h1{font-size:clamp(2.6rem,5vw,4.8rem);margin-bottom:16px}
.legal-sidebar>p:not(.eyebrow){color:var(--muted);font-size:.88rem}
.back-link{display:inline-block;margin-top:22px;font-size:.9rem}
.legal-document{min-width:0;background:var(--light);border:1px solid var(--line);border-radius:9px;padding:clamp(22px,5vw,55px);overflow-wrap:anywhere}
.legal-document .lead{font-size:1.12rem;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:18px}
.legal-document h2{font:720 1.19rem/1.45 var(--sans);letter-spacing:0;margin:28px 0 8px}
.legal-document p,.legal-document li{color:#40505a;line-height:1.8}
.legal-document p+p{margin-top:10px}
.legal-document a{color:#913b1d}
[aria-current=page]{color:var(--orange)}
@media(max-width:850px){.shell{width:calc(100% - 56px)}.hero{gap:32px;padding-block:48px 58px}.nav-inner{gap:20px}.nav-inner nav{gap:18px}.formats{gap:24px 35px}.format-list div{grid-template-columns:6.4rem 1fr}}
@media(max-width:650px){.shell{width:calc(100% - 36px)}.nav-inner{min-height:63px;gap:13px}.nav-inner nav{gap:12px;font-size:.75rem}.brand{font-size:1.1rem;gap:6px}.brand img{width:30px;height:30px}.language,.lang-toggle{font-size:.75rem;padding:0 .55rem}.hero{grid-template-columns:1fr;padding-block:36px 44px;gap:24px}.hero h1{font-size:clamp(3.1rem,12vw,4.6rem);margin-block:17px}.hero-figure{max-width:430px;width:100%;margin:auto;padding-top:9px;padding-bottom:31px}.phone{width:min(52%,214px);border-width:5px}.hero-meta{margin-top:24px}.workflow,.formats{padding-block:50px}.demo-layout,.formats,.legal-layout{grid-template-columns:1fr}.format-note{grid-column:auto}.contact-inner,.footer-inner{align-items:flex-start;flex-direction:column;gap:18px}.legal-layout{padding-block:34px 50px;gap:23px}.legal-sidebar{position:static}.legal-sidebar h1{margin-bottom:10px}}
@media(max-width:355px){.nav-inner nav{gap:8px}.nav-inner{gap:8px}.hero-actions{gap:13px}.hero-meta{gap:7px}.hero-meta span+span::before{margin-right:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.moving-edge{transition:none}}