@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Microsoft YaHei',sans-serif;color:#20243a;background:#f5f6fa;font-synthesis:none;--purple:#6659e9;--muted:#9295a6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}.shell{display:flex;min-height:100vh}.sidebar{width:238px;flex:none;background:#171a2d;color:#afb1c3;display:flex;flex-direction:column;padding:30px 18px 24px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:800;font-size:19px;letter-spacing:-.8px;padding:0 8px}.brand-light{color:#a19af5;font-weight:500}.brand small{display:block;font-size:10px;letter-spacing:.07em;font-weight:400;color:#777c94;margin-top:3px}.brand-mark{display:grid;grid-template-columns:repeat(2,8px);gap:3px;transform:rotate(-9deg)}.brand-mark i{width:8px;height:8px;background:#a69dff;border-radius:2px}.brand-mark i:nth-child(2){opacity:.55}.brand-mark i:nth-child(3){opacity:.7}.side-caption{margin:65px 11px 15px;font-size:9px;letter-spacing:.15em;color:#686d85;font-weight:700}.side-nav{display:grid;gap:5px}.nav-link{display:flex;align-items:center;gap:12px;border-radius:9px;padding:13px 12px;font-size:13px;font-weight:500}.nav-link:hover{background:#22263c;color:#fff}.nav-link.active{background:#34314f;color:#fff}.nav-icon{font-size:19px;line-height:1;color:#aaa2ff}.active-dot{width:5px;height:5px;border-radius:50%;background:#a59cff;margin-left:auto}.sidebar-bottom{margin-top:auto;padding:18px 14px 16px;background:#22253b;border:1px solid #30334a;border-radius:12px}.side-note-icon{width:32px;height:32px;display:grid;place-items:center;color:#c5bfff;background:#393654;border-radius:9px;font-size:21px;margin-bottom:12px}.sidebar-bottom strong{font-size:12px;color:#efeff7}.sidebar-bottom p{font-size:11px;color:#999bae;line-height:1.8;margin:7px 0 13px}.sidebar-bottom a{font-size:11px;font-weight:700;color:#bcb5ff}.sidebar-bottom a span{float:right}.side-footer{margin:20px 4px 0;font-size:10px;color:#7e8298}.status-dot{display:inline-block;width:6px;height:6px;background:#6ccda5;border-radius:50%;margin-right:6px;vertical-align:middle}.main{min-width:0;flex:1}.topbar{height:71px;border-bottom:1px solid #e9eaf0;background:rgba(255,255,255,.76);display:flex;align-items:center;justify-content:space-between;padding:0 45px}.breadcrumb{font-size:12px;color:#a6a8b5}.breadcrumb span{margin:0 10px;color:#c3c4cf}.breadcrumb strong{font-weight:600;color:#56596b}.top-right{display:flex;align-items:center;gap:19px}.top-tag{font-size:11px;color:#858a99}.avatar{width:31px;height:31px;background:#e3e0fc;border:3px solid #f4f3ff;border-radius:50%;display:grid;place-items:center;color:#6659e9;font-size:11px;font-weight:800}.content{max-width:1530px;padding:45px 45px 0;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px}.eyebrow{display:flex;align-items:center;gap:7px;color:#786deb;font-size:10px;letter-spacing:.13em;font-weight:800}.eyebrow span{width:6px;height:6px;border-radius:50%;background:#897ef1}.page-heading h1{font-size:33px;line-height:1.3;letter-spacing:-1.3px;margin:11px 0 9px;font-weight:800;color:#202338}.heading-break{display:none}.heading-dot{color:#776bed}.page-heading p{margin:0;color:#9195a4;font-size:13px;line-height:1.8}.heading-badge{border-left:1px solid #e4e5ed;display:flex;align-items:center;gap:12px;padding:4px 0 4px 23px;font-size:11px;line-height:1.7;color:#a2a3b0}.heading-badge strong{color:#55586c;font-weight:700}.badge-icon{font-size:25px;color:#8c82ee}.workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}.editor-card,.preview-card{background:#fff;border:1px solid #ebeaf1;border-radius:15px;box-shadow:0 8px 30px rgba(31,35,60,.035)}.editor-card{padding:27px 30px 23px}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:27px}.section-label{font-size:10px;letter-spacing:.1em;color:#9495a6;font-weight:700}.section-label span{color:#8075e9;letter-spacing:0;margin-right:7px}.card-header h2,.preview-heading h2,.guide h2{font-size:18px;letter-spacing:-.35px;margin:9px 0 5px;color:#292b40}.card-header p,.preview-subtitle{margin:0;font-size:12px;color:#a1a3b0}.card-symbol{color:#d6d2fa;font-size:26px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:21px 18px}.field{min-width:0}.field.full{grid-column:1/-1}.field label:not(.upload){display:block;font-size:12px;font-weight:700;color:#414255;margin-bottom:9px}.field label span:not(.optional){color:#e38691}.optional{font-size:10px;font-weight:400;color:#b0b1bc;margin-left:4px}.field input:not([type=color]):not([type=file]),.field textarea{display:block;width:100%;border:1px solid #e6e6ed;border-radius:7px;outline:none;background:#fcfcfd;color:#35374a;transition:border .2s,box-shadow .2s;padding:11px 12px;font-size:12px;min-height:41px}.field input:focus,.field textarea:focus{border-color:#8c82ee!important;box-shadow:0 0 0 3px rgba(102,89,233,.1)}.field input::placeholder,.field textarea::placeholder{color:#c1c2cc}.field textarea{resize:vertical;min-height:62px;line-height:1.6}.field p{font-size:10px;color:#a9aab6;line-height:1.55;margin:7px 0 0}.url-input{position:relative}.url-input>span{position:absolute;left:13px;top:10px;color:#9c96d6;font-size:14px}.url-input input{padding-left:36px!important}.color-control{height:42px;border:1px solid #e6e6ed;border-radius:7px;display:flex;align-items:center;padding:5px 8px;gap:8px;background:#fcfcfd;font-size:11px;color:#5b5c6d}.color-control input{width:27px;height:27px;padding:0;border:0;background:none;cursor:pointer}.color-control input::-webkit-color-swatch-wrapper{padding:0}.color-control input::-webkit-color-swatch{border:1px solid #dedee8;border-radius:5px}.color-hint{margin-left:auto;color:#b6b7c1;font-size:10px}.upload{min-height:68px;border:1px dashed #d9d8e8;border-radius:8px;display:flex;align-items:center;gap:11px;padding:11px 13px;cursor:pointer;background:#fdfdff}.upload:hover{border-color:#8e83ee;background:#faf9ff}.upload-icon{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:#f0eefc;color:#766be6;font-size:20px}.upload strong{display:block;color:#626174;font-size:11px}.upload small{display:block;color:#afb0bd;font-size:10px;margin-top:4px}.upload-action{margin-left:auto;color:#7469e3;font-size:10px;font-weight:700}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.form-footer{margin-top:25px;padding-top:20px;border-top:1px solid #f0f0f4;display:flex;justify-content:space-between;align-items:center;gap:12px}.privacy-note{font-size:10px;color:#adaeba}.privacy-note span{font-size:15px;color:#a99ff3;margin-right:4px}.primary-button{border:0;border-radius:7px;background:#675ae7;color:white;padding:13px 17px 13px 20px;font-size:12px;font-weight:700;box-shadow:0 5px 12px rgba(103,90,231,.21);cursor:pointer}.primary-button:hover{background:#594cd5}.primary-button:focus-visible,a:focus-visible,.upload:focus-within{outline:3px solid #b7b0f7;outline-offset:3px}.primary-button:disabled{opacity:.6;cursor:wait}.primary-button span{margin-left:20px}.form-message{font-size:11px;color:#7168cc;margin:10px 0 0}.form-message:empty{display:none}.preview-card{overflow:hidden;padding:27px 23px 0}.preview-heading{display:flex;justify-content:space-between;align-items:start}.preview-heading h2{margin-bottom:5px}.live{background:#f2f9f5;color:#67b889;font-size:9px;letter-spacing:.08em;padding:5px 7px;border-radius:4px;font-weight:800}.live i{display:inline-block;width:5px;height:5px;background:#70bf90;border-radius:50%;margin-right:3px;vertical-align:middle}.phone-stage{height:324px;position:relative;display:grid;place-items:center;overflow:hidden;margin-top:10px}.stage-orbit{position:absolute;border:1px solid #f0eefb;border-radius:50%;width:250px;height:250px}.orbit-two{width:310px;height:310px;border-color:#f7f6fc}.sparkle{position:absolute;color:#c7c0f5}.sparkle-one{left:21px;top:88px;font-size:26px}.sparkle-two{right:25px;bottom:75px;font-size:16px}.phone{width:145px;height:283px;background:#28283b;border-radius:25px;padding:5px;box-shadow:0 16px 25px rgba(47,40,102,.17),0 4px 8px rgba(0,0,0,.13);z-index:1}.phone-screen{height:100%;border-radius:21px;background:#f8f7ff;position:relative;overflow:hidden;color:#343348}.phone-status{position:absolute;top:11px;left:12px;right:11px;display:flex;justify-content:space-between;font-size:7px;font-weight:800;z-index:1}.phone-notch{height:14px;width:48px;position:absolute;background:#28283b;top:0;left:50%;transform:translateX(-50%);border-radius:0 0 9px 9px}.phone-content{height:100%;display:flex;align-items:center;flex-direction:column;padding:64px 10px 0;text-align:center}.preview-icon,.preview-small-icon{background:#675ae7;color:white;display:grid;place-items:center;font-weight:800;background-position:center;background-size:cover}.preview-icon{width:54px;height:54px;border-radius:14px;box-shadow:0 6px 12px rgba(103,90,231,.25);font-size:24px;margin-bottom:13px}.phone-content strong{font-size:10px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phone-content>span{font-size:7px;color:#999baa;margin-top:5px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-install{background:#fff;border:1px solid #efedf6;box-shadow:0 2px 4px #eceafa;color:#767183;padding:9px 8px;border-radius:6px;font-size:7px;margin-top:24px;width:100%;text-align:left}.preview-install span{float:right;color:#7568e6;font-weight:700}.preview-mini-label{font-size:6px;letter-spacing:.14em;color:#c2bfd5;margin-top:17px}.home-indicator{position:absolute;bottom:7px;width:46px;height:3px;border-radius:5px;background:#333345;left:50%;transform:translateX(-50%)}.preview-foot{border-top:1px solid #f1f1f5;padding:16px 0;display:flex;align-items:center;gap:10px}.preview-small-icon{width:35px;height:35px;border-radius:9px;font-size:14px;flex:none}.preview-foot strong,.preview-foot span{display:block}.preview-foot strong{font-size:11px;color:#45465b;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-foot div>span{font-size:9px;color:#aeb0bd;margin-top:4px}.preview-foot-arrow{margin-left:auto;color:#bbb6e5}.tip-card{display:flex;gap:12px;margin-top:15px;padding:17px 19px;background:#eeecfb;border:1px solid #e8e5fa;border-radius:12px}.tip-symbol{font-size:19px;color:#8e83e9}.tip-card strong{font-size:11px;color:#5e588c}.tip-card p{font-size:10px;line-height:1.7;color:#9792b1;margin:5px 0 0}.guide{margin-top:36px}.guide-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:15px}.guide-heading p{font-size:11px;color:#a3a5b2;margin:0 0 5px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.guide-grid article{display:flex;align-items:flex-start;gap:13px;background:#fff;border:1px solid #ececf2;border-radius:10px;padding:17px}.guide-grid article>span{display:grid;place-items:center;width:31px;height:31px;flex:none;border-radius:8px;background:#f2f0fd;color:#8278e3;font-size:10px;font-weight:800}.guide-grid h3{font-size:11px;margin:1px 0 5px;color:#545567}.guide-grid p{font-size:10px;line-height:1.6;color:#a4a5b2;margin:0}.guide-note{font-size:10px;color:#a3a5b2;margin:12px 0}.page-footer{display:flex;justify-content:space-between;border-top:1px solid #e9eaf0;padding:19px 0 24px;margin-top:29px;font-size:10px;color:#b1b2be}.footer-star{color:#a39af1;margin-left:4px}
@media(max-width:1100px){.workspace-grid{grid-template-columns:minmax(0,1fr) 300px}.content{padding-left:30px;padding-right:30px}.topbar{padding:0 30px}.sidebar{width:205px}.editor-card{padding:25px 22px}.preview-card{padding-left:18px;padding-right:18px}.heading-badge{display:none}}
@media(max-width:850px){.sidebar{width:72px;padding:25px 10px}.brand{justify-content:center;padding:0}.brand>span:last-child,.side-caption,.sidebar-bottom,.side-footer{display:none}.side-nav{margin-top:55px}.nav-link{justify-content:center;font-size:0;padding:13px 0}.nav-icon{font-size:21px}.active-dot{display:none}.workspace-grid{grid-template-columns:minmax(0,1fr) 285px}.topbar{height:62px}.content{padding-top:35px}.page-heading h1{font-size:29px}}
@media(max-width:690px){.shell{display:block}.sidebar{position:static;width:auto;height:auto;padding:14px 18px;flex-direction:row;align-items:center;justify-content:space-between}.brand>span:last-child{display:block}.brand{font-size:16px}.brand small{display:none}.side-nav{display:flex;margin:0;gap:4px}.nav-link{font-size:11px;padding:9px}.nav-icon{font-size:15px}.topbar{height:48px;padding:0 20px}.top-right{gap:10px}.top-tag{display:none}.content{padding:30px 18px 0}.page-heading{margin-bottom:24px}.page-heading h1{font-size:27px;letter-spacing:-.8px}.page-heading p{font-size:12px}.workspace-grid{grid-template-columns:1fr}.editor-card{padding:23px 18px}.preview-column{display:grid;grid-template-columns:1fr}.phone-stage{height:300px}.preview-card{padding:23px 20px 0}.guide-heading{display:block}.guide-heading p{margin-top:8px}.guide-grid{grid-template-columns:1fr}.guide-grid article{padding:14px}.guide{margin-top:30px}.page-footer{margin-top:20px}}
@media(max-width:390px){.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.form-footer{align-items:flex-start;flex-direction:column}.primary-button{width:100%}.primary-button span{float:right}.nav-link{font-size:0}.heading-break{display:block}}