:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:#253631;background:#f8faf9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,select,textarea,input{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer}button{font:inherit;border:0;background:none;color:inherit}button:disabled{opacity:.6;cursor:wait}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #7ad7bd;outline-offset:3px}a{text-decoration:none;color:inherit}.app{display:flex;min-height:100vh}.sidebar{width:240px;flex:none;background:#fff;border-right:1px solid #e5ebe8;padding:30px 19px 18px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:10}.brand{display:flex;align-items:center;gap:7px;font-size:24px;letter-spacing:-1px;position:relative;margin:2px 11px 62px}.brand b{font-weight:400}.brand small{position:absolute;left:47px;top:34px;font-size:10px;letter-spacing:2px;color:#89968f}.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#23876a;color:#fff;margin-right:4px}.space-label{font-size:10px;letter-spacing:1.5px;color:#99a39e;margin:0 13px 13px;display:flex;justify-content:space-between}.space-label span{font-size:9px;letter-spacing:0}nav{display:grid;gap:6px}nav button{display:flex;align-items:center;gap:12px;font-size:13px;padding:13px 14px;border-radius:7px;text-align:left;color:#738078}nav button span{margin-left:auto;font-size:11px;color:#8e9c95}nav button.selected{background:#eaf4ef;color:#22785e;font-weight:600}nav button:hover,.example-list button:hover{background:#f0f6f3}.divider{height:1px;background:#edf1ee;margin:25px 13px}.example-list{display:grid;gap:5px}.example-list button{display:flex;align-items:center;gap:13px;font-size:12px;text-align:left;padding:12px 13px;border-radius:6px;color:#738078}.example-list button.active{color:#22785e}.sample-number{font-family:monospace;font-size:10px;color:#a6b1ab}.dot{display:inline-block;width:6px;height:6px;background:#529b7f;border-radius:50%;flex:none}.example-list .dot{margin-left:auto}.side-bottom{margin:auto 13px 22px;padding-top:34px}.tip-icon{font-size:25px;color:#7f9e8d;margin-bottom:13px}.side-bottom b{font-size:12px;font-weight:500}.side-bottom p{font-size:11px;color:#99a69f;line-height:1.9;margin:8px 0 18px}.local-tag{font-size:10px;color:#8e9a93;display:flex;gap:7px;align-items:center}.local-tag .dot{width:5px;height:5px}.profile{display:flex;gap:10px;align-items:center;border-top:1px solid #edf1ee;padding:18px 9px 0}.profile>div{background:#e7eee8;color:#68816f;border:3px solid #f5f7f4;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px}.profile span{font-size:11px}.profile small{display:block;color:#9ba59f;font-size:9px;margin-top:4px}main{margin-left:240px;width:calc(100% - 240px)}header{height:76px;border-bottom:1px solid #e6ebe8;display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:#ffffff80;font-size:11px;color:#95a099}.breadcrumb{display:flex;align-items:center;gap:14px}.breadcrumb strong{color:#4e6257;font-weight:500}.header-label{display:flex;gap:8px;align-items:center;font-size:10px}.header-label .dot{width:5px;height:5px}.mobile-menu{display:none}.content{padding:37px 42px 0;max-width:1500px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow{font-size:9px;color:#669580;letter-spacing:2px;font-weight:600}h1{font-size:29px;letter-spacing:-.8px;font-weight:600;margin:12px 0 11px}.intro p{font-size:12px;color:#8a9890;margin:0;line-height:1.8}.intro-mark{position:relative;margin-right:25px;font-size:62px;font-weight:600;letter-spacing:-4px;color:#d5e5db;transform:rotate(-9deg);line-height:1}.intro-mark span{font-size:31px;vertical-align:middle;letter-spacing:-2px}.intro-mark i{display:block;width:100px;height:1px;background:#d5e5db;position:absolute;bottom:-14px;left:0}.workbench{border:1px solid #dde6df;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 5px 25px #264e3010}.toolbar{height:59px;border-bottom:1px solid #e9eeea;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fcfdfc}.filename{display:flex;align-items:center;gap:9px;font-size:11px;color:#4f6458}.filename b{font-weight:500}.filename svg{color:#598874}.file-dot{width:5px;height:5px;border-radius:50%;background:#b0bdb4;margin-left:8px}.actions{display:flex;align-items:center;gap:15px;color:#819087}.actions>button{padding:5px}.actions select{background:#f8faf8;border:1px solid #e2e9e3;border-radius:5px;color:#708076;padding:6px 9px;font-size:10px}.action-divider{width:1px;height:18px;background:#e3e9e4}.actions button.run{display:flex;align-items:center;gap:8px;background:#24856a;border:1px solid #1d795f;color:white;font-size:11px;padding:9px 14px;border-radius:6px;box-shadow:0 2px 3px #235b2220}.run:hover{background:#1b7059}.run kbd{font-size:9px;margin-left:14px;color:#c5e9dc;font-family:inherit}.editor{display:flex;height:345px;background:#fff;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;line-height:26px;padding-top:23px}.line-numbers{width:60px;padding-right:18px;text-align:right;color:#bec8c1;font-size:11px;overflow:hidden;flex:none;user-select:none;padding-bottom:25px}.code-area{position:relative;flex:1;min-width:0}.code-area pre,.code-area textarea{position:absolute;inset:0;margin:0;padding:0 22px 26px 0;font:inherit;line-height:26px;white-space:pre;overflow:auto;tab-size:4;letter-spacing:0}.code-area pre{color:#334c43;pointer-events:none;scrollbar-width:none}.code-area textarea{width:100%;height:100%;resize:none;border:0;outline:none;background:transparent;color:transparent;caret-color:#2c634d;-webkit-text-fill-color:transparent}.code-area textarea::selection{background:#a5d9ca66}.keyword{color:#8c64b1}.string{color:#458f70}.comment{color:#a0aea3;font-style:italic}.number{color:#c58b46}.editor-status{display:flex;align-items:center;justify-content:space-between;height:30px;border-top:1px solid #f0f3f0;background:#fcfdfc;padding:0 20px;color:#9aa89d;font-size:9px}.editor-status>span,.editor-status>div{display:flex;align-items:center;gap:6px}.editor-status>div{gap:18px}.editor-status button{font-size:9px;padding:0}.console{border-top:1px solid #e4eae4}.console-head{height:45px;padding:0 20px;display:flex;justify-content:space-between;border-bottom:1px solid #edf1ec}.console-head>div{display:flex;gap:25px}.console-head button{display:flex;align-items:center;gap:7px;font-size:11px;color:#95a298;position:relative;padding:0}.console-head button.on{color:#397d61}.console-head button.on:after{content:'';height:2px;background:#408c6c;position:absolute;bottom:-1px;left:0;right:0}.console-head button span:not(.dot){font-size:9px;color:#b0b9b3}.console-head .dot{width:4px;height:4px}.output{min-height:171px;padding:15px 20px;background:#fdfefd}.result-status{font-size:9px;color:#95a397;display:flex;gap:6px;align-items:center}.result-status .dot{background:#bdc7bf;width:5px;height:5px}.result-status.success{color:#24856a}.result-status.success .dot{background:#24856a}.empty-output{display:flex;gap:13px;align-items:center;justify-content:center;color:#b7c3b9;padding-top:22px}.empty-output>svg{color:#a2b8a8}.empty-output span{font-size:12px;color:#8b9c90}.empty-output small{display:block;margin-top:8px;color:#b2bdb4;font-size:10px}.output pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:Consolas,monospace;font-size:13px;color:#3a5545;max-height:230px;overflow:auto;line-height:1.65;margin-bottom:0}.input-wrap{padding:14px 20px}.input-wrap label{display:block;font-size:10px;color:#8a9a8e;margin-bottom:10px}.input-wrap textarea{resize:vertical;width:100%;min-height:105px;border:1px solid #e3eae3;border-radius:5px;padding:10px;font-family:monospace;font-size:13px;background:#fcfdfb;outline-color:#75b69b}.below{display:flex;justify-content:space-between;align-items:center;margin-top:23px;gap:15px}.learning-tip{display:flex;gap:13px}.learning-tip>span{color:#7e9d83;padding-top:1px;font-size:20px}.learning-tip b{font-size:11px;font-weight:500;color:#687f6d}.learning-tip small{font-size:9px;background:#ecf2e9;color:#8a9a82;border-radius:4px;padding:2px 6px;margin-left:8px;font-weight:400}.learning-tip p{font-size:10px;color:#95a191;line-height:1.9;margin:5px 0 0;max-width:650px}.example-link{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:10px;color:#66856e}.service-note{font-size:9px;color:#a7b0a9;margin-top:18px}footer{display:flex;justify-content:space-between;align-items:center;margin-top:26px;padding:18px 0 23px;border-top:1px solid #e7ece7;color:#a7b1a9;font-size:9px}footer i{font-style:normal;margin:0 8px;color:#c8d1c8}footer>span:last-child{display:flex;align-items:center;gap:6px}.footer-sep{margin:0 6px}.search{display:flex;align-items:center;gap:10px;background:white;border:1px solid #dfe7e1;padding:13px 16px;border-radius:8px;max-width:400px;color:#879b8d;margin-bottom:25px}.search input{border:0;outline:0;font:inherit;font-size:12px;width:100%}.cards,.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.sample-card{background:#fff;border:1px solid #e1e8e2;border-radius:12px;padding:25px;text-align:left;transition:.2s}.sample-card:hover{border-color:#77b398;transform:translateY(-3px);box-shadow:0 10px 24px #243d1510}.card-num{display:flex;justify-content:space-between;color:#b4c5ba;font-size:25px;margin-bottom:35px}.sample-card small{font-size:10px;color:#458565}.sample-card h2,.guide h2{font-size:18px;font-weight:500;margin:10px 0}.sample-card p,.guide p{font-size:12px;color:#8a9a8e;line-height:1.8}.card-bottom{display:flex;align-items:center;gap:6px;font-size:11px;margin-top:30px;color:#68977a}.guide-grid{grid-template-columns:repeat(2,1fr)}.guide{background:white;border:1px solid #e1e8e2;border-radius:10px;padding:20px}.guide pre{background:#f5f8f4;color:#4d7b5f;font:12px/1.9 monospace;padding:16px;border-radius:6px;overflow:auto}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#244d3d;color:#fff;padding:12px 22px;border-radius:9px;display:flex;align-items:center;gap:9px;font-size:12px;box-shadow:0 5px 20px #0002;z-index:30}@media(min-width:1500px){.content{padding-top:50px}.editor{height:410px}.intro{margin-bottom:40px}}@media(max-width:1100px){.sidebar{width:205px;padding-left:12px;padding-right:12px}main{margin-left:205px;width:calc(100% - 205px)}.content{padding:30px 25px 0}header{padding:0 25px}.intro-mark{display:none}.cards{grid-template-columns:repeat(2,1fr)}.header-label{display:none}.run kbd{display:none}}@media(max-width:720px){.sidebar{display:none;width:240px;box-shadow:10px 0 40px #0002;top:60px}.sidebar.open{display:flex}main{margin:0;width:100%}header{height:60px;padding:0 19px}.mobile-menu{display:block;padding:0;color:#57886b}.content{padding:27px 16px 0}.intro{margin-bottom:22px}h1{font-size:25px}.intro p{font-size:11px;max-width:330px}.toolbar{padding:0 12px;height:55px}.actions{gap:8px}.actions select{width:75px;padding:5px}.actions>button:not(.run){display:none}.actions .action-divider{display:none}.actions button.run{padding:8px 10px;font-size:10px}.editor{height:330px;font-size:12px!important}.line-numbers{width:40px;padding-right:12px}.editor-status{padding:0 12px}.editor-status>div{gap:10px}.below{align-items:flex-start}.example-link{display:none}.console-head{padding:0 13px}.output{padding:14px}.cards,.guide-grid{grid-template-columns:1fr}.sample-card{padding:20px}.card-num{margin-bottom:20px}footer>span:last-child{display:none}.toast{max-width:90%;width:max-content}.service-note{line-height:1.7}.side-bottom{padding-top:15px}.brand{margin-bottom:40px}}

@media(max-width:720px){.actions>button[aria-label="下载代码"]{display:block}.actions{gap:5px}}