:root{--bg:#fafaf9;--surface:#fff;--soft:#f4f4f3;--text:#25252b;--muted:#73737c;--line:#e5e5e8;--code:#f5f5f6;--shadow:0 12px 50px #22223006;color-scheme:light;font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;scroll-behavior:smooth;scroll-padding-top:30px}
:root[data-theme=dark]{--bg:#171719;--surface:#1d1d20;--soft:#222225;--text:#eeeef0;--muted:#a2a2ad;--line:#343439;--code:#202023;--shadow:0 12px 50px #00000015;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button,select{font:inherit;color:inherit}a{color:inherit;text-decoration:none}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}::selection{background:var(--accent-soft);color:var(--accent)}.wrap{max-width:1080px;margin:auto;padding-left:32px;padding-right:32px}.header{height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:650;letter-spacing:-.7px}.header nav{display:flex;gap:30px;color:var(--muted);font-size:13px}.header nav a:hover,.text-link:hover,.footer a:hover{color:var(--accent)}.preferences{display:flex;gap:12px;align-items:center}.preferences select{font-size:12px;border:0;background:transparent;cursor:pointer;max-width:94px;padding:6px}.theme-button{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted)}.hero{padding-top:74px;padding-bottom:56px;text-align:center}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:600;color:var(--muted);display:flex;gap:9px;align-items:center}.hero .eyebrow{justify-content:center}.status-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;flex-shrink:0}h1{font-size:clamp(42px,5.5vw,67px);font-weight:560;line-height:1.12;letter-spacing:-3px;margin:23px 0}html[lang=zh-CN] h1{line-height:1.25;letter-spacing:-2px;font-weight:550}.hero-description{max-width:500px;white-space:pre-line;margin:20px auto 0;color:var(--muted);font-size:16px;line-height:1.9}.hero-actions{display:flex;align-items:center;justify-content:center;gap:27px;margin-top:29px}.button{display:inline-flex;align-items:center;gap:22px;padding:10px 18px;border-radius:7px;font-size:12px;font-weight:550}.primary{background:var(--text);color:var(--bg)}.primary:hover{background:var(--accent);color:var(--surface)}.text-link{display:inline-flex;gap:13px;align-items:center;font-size:12px;font-weight:550}.hero-proof{display:flex;align-items:center;justify-content:center;gap:0;color:var(--muted);font-size:10px;margin-top:26px}.hero-proof span+span:before{content:"·";margin:0 13px;color:var(--muted)}.showcase{padding-top:0}.showcase-bar{border:1px solid var(--line);border-radius:10px 10px 0 0;background:var(--surface);padding:13px 19px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.file-label,.render-label{display:flex;gap:9px;align-items:center}.file-icon{font-size:14px;color:var(--accent)}.hero-image-stage{height:300px;background:var(--surface);border:1px solid var(--line);border-top:0;display:grid;place-items:center;padding:42px 50px;box-shadow:var(--shadow);overflow:hidden}.hero-image-stage img{width:100%;height:100%;object-fit:contain}.showcase-caption{padding:12px 2px;display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:52px;margin-bottom:107px}.feature-index{color:var(--accent);font:10px ui-monospace,monospace}.principles h2{font-size:15px;letter-spacing:-.2px;font-weight:600;margin:12px 0 9px}.principles p{font-size:12px;color:var(--muted);line-height:1.85;margin:0}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px}.section-heading .eyebrow{margin:0 0 12px}h2{font-size:29px;font-weight:550;letter-spacing:-1px;line-height:1.3;margin:0}.count{font-size:10px;color:var(--muted);padding-bottom:4px;white-space:nowrap}.section-description{font-size:12px;color:var(--muted);margin:16px 0 25px;max-width:620px}.example-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.example-controls select{min-width:0;max-width:190px;border:1px solid var(--line);padding:6px 10px;border-radius:5px;background:var(--surface);font-size:11px}.example-panel{display:grid;grid-template-columns:40% 60%;min-height:380px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}.code-panel{display:flex;flex-direction:column;min-width:0;background:var(--code);border-right:1px solid var(--line)}.panel-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 17px;color:var(--muted);font-size:10px}.code-dot{display:inline-block;width:5px;height:5px;margin-right:3px;border-radius:2px;background:var(--accent)}.quiet-button{font-size:10px;border:1px solid var(--line);border-radius:4px;background:transparent;padding:3px 8px;color:var(--muted)}.quiet-button:hover{background:var(--accent-soft);color:var(--accent)}pre{margin:0;padding:13px 19px 25px;overflow:auto;font:11px/1.95 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2;white-space:pre}code{font-family:inherit}.code-panel pre{max-height:350px;flex:1}.source-download{margin:auto 19px 18px;color:var(--muted);font-size:10px}.example-image{position:relative;background:var(--surface);border:0;padding:30px;min-width:0;display:flex;align-items:center;justify-content:center;min-height:380px}.example-image img{display:block;width:100%;height:300px;object-fit:contain}.zoom-hint{position:absolute;right:14px;bottom:12px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:4px 8px;font-size:9px;color:var(--muted)}.compatibility{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted);margin:15px 0 23px}.compatibility a{color:var(--accent);margin-left:auto;white-space:nowrap}.gallery-details{border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none;padding:16px 0;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}summary::-webkit-details-marker{display:none}.gallery-details[open] summary>span:last-child{transform:rotate(45deg)}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:13px 0 30px}.gallery button{border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:15px;text-align:left;min-width:0}.gallery img{width:100%;height:140px;object-fit:contain;display:block;margin-bottom:15px}.gallery span{font-size:11px}.gallery button:hover{border-color:var(--accent)}.getting-started{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;padding-top:104px;padding-bottom:95px}.start-intro .eyebrow{margin:0 0 20px}.start-intro h2{font-size:32px;line-height:1.25}.start-intro>p:not(.eyebrow){font-size:12px;color:var(--muted);margin:20px 0;line-height:1.9}.studio-badge{display:flex;gap:10px;align-items:center;margin-top:28px}.studio-badge img{object-fit:contain}.studio-badge strong{display:block;font-size:12px;font-weight:600}.studio-badge span{font-size:10px;color:var(--muted);display:block}.integration{border:1px solid var(--line);border-radius:9px;background:var(--code);align-self:start;min-width:0}.integration pre{font-size:11px;padding-top:15px;line-height:2.1}.syntax-keyword{color:#9a4eac}.syntax-string{color:#498369}:root[data-theme=dark] .syntax-keyword{color:#d295e2}:root[data-theme=dark] .syntax-string{color:#97cda9}.integration-note{border-top:1px solid var(--line);padding:12px 18px;margin:0;color:var(--muted);font-size:9px}.closing{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:50px;padding-bottom:45px;text-align:center}.closing img{opacity:.8}.closing p{font-size:20px;letter-spacing:-.5px;font-weight:500;margin:17px 0}.closing a{color:var(--muted);font-size:11px}.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:35px;padding-bottom:40px;font-size:10px;color:var(--muted)}.footer-brand{display:flex;gap:13px;align-items:center}.footer-brand strong{color:var(--text);font-size:12px}.footer>div:nth-child(2){display:flex;gap:18px}.footer p{margin:0}dialog{padding:20px;border:1px solid var(--line);border-radius:12px;width:min(1100px,94vw);max-height:92vh;background:var(--surface);color:var(--text)}dialog::backdrop{background:#11111b90;backdrop-filter:blur(4px)}.dialog-toolbar{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding-bottom:18px}.dialog-image-wrap{text-align:center}.dialog-image-wrap img{display:block;margin:auto}dialog>a{margin-top:16px;font-size:11px;color:var(--accent)}#toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);padding:8px 17px;border-radius:6px;background:var(--text);color:var(--bg);font-size:12px;z-index:4;opacity:0;pointer-events:none}#toast.visible{opacity:1}.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}.skip{position:fixed;top:-100px;left:20px;background:var(--surface);z-index:10;padding:10px}.skip:focus{top:10px}.docs-main{max-width:780px;margin:60px auto 100px;padding:0 32px}.docs-main h1{font-size:42px;letter-spacing:-1.5px}.docs-main h2{font-size:23px;margin:45px 0 15px}.docs-main p,.docs-main li{font-size:14px;color:var(--muted);line-height:1.9}.docs-main a{color:var(--accent)}.docs-main pre{background:var(--code);border:1px solid var(--line);border-radius:8px;margin:20px 0}.docs-main .notice{border-left:2px solid var(--accent);padding:10px 20px;background:var(--accent-soft)}
@media(max-width:760px){.wrap{padding-left:22px;padding-right:22px}.header{height:78px;gap:12px}.header nav{gap:16px;font-size:11px}.brand{font-size:18px;gap:7px}.brand img{width:24px;height:24px}.preferences{gap:4px}.preferences select{max-width:70px;font-size:11px}.theme-button{width:28px;height:28px}.hero{padding-top:54px;padding-bottom:43px}h1{font-size:49px;letter-spacing:-2px}.hero-description{font-size:14px;max-width:340px}.hero-image-stage{height:230px;padding:22px 15px}.showcase-caption{font-size:9px;gap:20px}.showcase-caption>span:last-child{display:none}.principles{gap:22px;margin-top:38px;margin-bottom:70px}.principles h2{font-size:13px}.principles p{font-size:11px}.section-heading{align-items:flex-start;gap:15px}.section-heading h2{font-size:25px}.count{font-size:9px;max-width:90px;white-space:normal;text-align:right;padding-top:28px}.example-controls{align-items:flex-start;flex-direction:column}.example-controls select{width:100%;max-width:none}.example-panel{grid-template-columns:1fr}.code-panel{border-right:0;border-bottom:1px solid var(--line)}.code-panel pre{max-height:230px}.source-download{margin-top:10px}.example-image{min-height:330px;padding:25px}.example-image img{height:280px}.compatibility{align-items:flex-start;flex-wrap:wrap;font-size:9px}.compatibility .status-dot{margin-top:6px}.compatibility>span:nth-child(2){flex:1}.compatibility a{margin-left:13px}.getting-started{grid-template-columns:1fr;gap:35px;padding-top:65px;padding-bottom:65px}.gallery{grid-template-columns:repeat(2,1fr);gap:10px}.gallery img{height:115px}.footer{flex-wrap:wrap;gap:20px}.footer-brand{width:100%}.footer p{font-size:9px}.closing p{font-size:18px}.hero-actions{gap:19px}.button{gap:15px}.eyebrow{font-size:9px;letter-spacing:1.2px}}
@media(max-width:440px){.header nav a:first-child{display:none}.header nav{gap:13px}.header{gap:8px}.principles{grid-template-columns:1fr;gap:24px}.principles article{display:grid;grid-template-columns:25px 1fr;column-gap:9px}.feature-index{grid-row:1/3;padding-top:4px}.principles h2{margin:0 0 5px;font-size:14px}.principles p{grid-column:2}.hero h1{font-size:43px}.hero-description{font-size:13px}.hero-actions .text-link{font-size:11px}.showcase-bar{font-size:9px;padding:11px 13px}.section-heading h2{font-size:23px}.closing p{font-size:16px}.footer-brand{gap:10px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}

/* Native light and dark screenshots share one appearance with the page. */
:root{--diagram-canvas:#ffffff}
:root[data-theme=dark]{--diagram-canvas:#1e1e1e}
.native-screenshot{display:block;min-width:0;background:var(--diagram-canvas)}
.native-screenshot>img{display:block}
:root:not([data-theme=dark]) .native-screenshot>[data-image-theme=dark],
:root[data-theme=dark] .native-screenshot>[data-image-theme=light]{display:none}
.hero-image-stage,.example-image,.dialog-image-wrap{background:var(--diagram-canvas)}
.hero-image-stage>.native-screenshot{width:100%;height:100%}
.example-image>.native-screenshot{width:100%}
.gallery .native-screenshot{margin-bottom:15px;border-radius:5px;overflow:hidden}
.gallery .native-screenshot>img{margin-bottom:0}

.docs-symbols{margin:24px 0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--diagram-canvas)}
.docs-symbols .native-screenshot{display:block;padding:24px}
.docs-symbols img{width:100%;height:auto;display:block}
.docs-symbols figcaption{padding:14px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);background:var(--surface)}

.docs-main [data-inline-example] .native-screenshot>img{max-height:520px;object-fit:contain}

.header .workbench-download{cursor:pointer;white-space:nowrap}
@media(max-width:600px){.header{flex-wrap:wrap;height:auto;min-height:78px;padding-top:18px;padding-bottom:16px;row-gap:14px}.header nav{order:3;flex-basis:100%;justify-content:center}.header .preferences{margin-left:auto}}

.header nav{align-items:center}
.header .github-link{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.github-link svg{display:block;width:16px;height:16px;flex-shrink:0}