:root{--ink:#242a27;--muted:#818782;--line:#e7e9e7;--accent:#31583c;--active:#edf3ee;--canvas:#f0f1f2;--sidebar:220px;font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:#fff;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{-webkit-tap-highlight-color:transparent}.site-bar{height:64px;padding:0 28px;display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line)}.wordmark{font:800 19px/1 Arial,sans-serif;letter-spacing:-.6px}.wordmark span{color:#7f8982}.header-divider{height:17px;width:1px;background:#dfe3df}.header-title{font-size:13px;color:#707973}.back-site{font-size:12px;margin-left:auto;color:#626c65}.back-site span{margin-left:12px}.demo-layout{height:calc(100dvh - 64px);display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr)}.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--line);padding:28px 16px 22px;min-height:0;overflow-y:auto}.project{display:flex;align-items:center;gap:11px;padding:0 12px;margin-bottom:35px}.project>img{width:31px;height:31px}.project h1{font-size:16px;font-weight:650;margin:0 0 7px}.project p{font-size:11px;color:var(--muted);margin:0}.nav-heading{font-size:11px;color:#959b96;margin:0 14px 12px}.page-nav a{position:relative;display:flex;align-items:center;justify-content:space-between;height:42px;margin:3px 0;padding:0 14px;border-radius:5px;font-size:13px;color:#626b65}.page-nav a:hover{background:#f6f7f6}.page-nav a[aria-current="page"]{background:var(--active);color:var(--accent);font-weight:600}.page-nav a[aria-current="page"]:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--accent)}.page-nav b{font-size:15px;font-weight:400;visibility:hidden}.page-nav a[aria-current="page"] b{visibility:visible}.account-heading{margin-top:30px}.sidebar-bottom{margin-top:auto;padding:42px 12px 0}.sidebar-bottom p{font-size:11px;line-height:1.9;color:#929a93;margin:0 0 17px}.sidebar-bottom>a{font-size:11px;color:#68776b}.sidebar-bottom>a>span{margin-left:14px}.workspace{background:var(--canvas);display:grid;grid-template-rows:55px minmax(0,1fr) 36px;min-height:0}.workspace-bar{display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#858b87;border-bottom:1px solid #e3e5e6}.workspace-bar b{font-weight:400;color:#49554c}.breadcrumb-divider{padding:0 12px;color:#b4b9b5}.workspace-bar>a{color:#536457;font-size:11px}.workspace-bar>a>span{padding-left:8px}.preview-stage{width:100%;max-width:980px;justify-self:center;display:flex;align-items:center;justify-content:center;gap:64px;min-height:0;padding:24px 28px}.screen{height:100%;max-height:844px;width:392px;flex:none;border:1px solid #d6dbd7;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 6px 18px #28342d09}iframe{display:block;border:0;width:100%;height:100%;background:#f5f7f5}.page-guide{width:210px;flex:none;align-self:center}.guide-label{font-size:10px;color:#909993;letter-spacing:.5px}.page-guide h2{font-size:22px;font-weight:600;letter-spacing:-.5px;margin:13px 0 16px}.page-guide>p{font-size:12px;line-height:1.95;color:#7a857d;margin:0}.try-guide{margin-top:32px;border-top:1px solid #dce0dd;padding-top:21px}.try-guide h3{font-size:11px;font-weight:500;color:#596b5e;margin:0 0 14px}.try-guide ul{list-style:none;padding:0;margin:0}.try-guide li{position:relative;font-size:11px;color:#78847b;line-height:1.9;padding-left:12px;margin-bottom:10px}.try-guide li:before{content:"·";position:absolute;left:0;color:#7c9482}.page-guide>.guide-hint{font-size:10px;line-height:1.9;color:#a0a7a2;margin-top:44px}.workspace-footer{display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:10px;color:#a2a8a5}.workspace-footer>span:first-child{font:10px Arial,sans-serif;letter-spacing:.5px}
@media(min-width:761px) and (max-width:1100px){:root{--sidebar:184px}.sidebar{padding-left:12px;padding-right:12px}.page-guide{display:none}.preview-stage{padding:20px}.workspace-bar{padding:0 24px}}
@media(max-width:760px){.site-bar{height:44px;padding:0 14px;gap:12px}.wordmark{font-size:15px}.header-divider{height:12px}.header-title{font-size:11px}.back-site{display:none}.demo-layout{height:calc(100dvh - 44px);display:block}.sidebar,.workspace-bar,.page-guide,.workspace-footer{display:none}.workspace{display:block;height:100%}.preview-stage{display:block;height:100%;padding:0}.screen{height:100%;max-height:none;width:100%;border:0;border-radius:0;box-shadow:none}}