:root{font-family:PingFang SC,Noto Sans SC,Microsoft YaHei,system-ui,sans-serif;color:#2b2f28;background:#f6f5f1;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}button,textarea{font:inherit}button{border:0;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.58}body{margin:0;min-width:320px;min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;overflow:hidden}.app-shell{height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(420px,1fr) minmax(520px,1fr);grid-template-rows:68px minmax(0,1fr);background:#f6f5f1;overflow:hidden}.topbar{grid-column:1 / -1;grid-row:1;background:#fffffff5;border-bottom:1px solid #e4e3de;display:flex;align-items:center;justify-content:space-between;min-width:0;z-index:4}.topbar-brand,.topbar-actions{display:flex;align-items:center}.topbar-brand{min-width:0;height:100%;padding-left:18px;gap:16px}.topbar-brand strong{display:flex;align-items:center;gap:2px;color:#262a25;font:800 23px/1 Songti SC,"Noto Serif SC",serif;letter-spacing:1px;white-space:nowrap}.topbar-brand strong i{font-style:normal}.topbar-brand strong i:last-child{color:#78866a}.document-title{min-width:0;max-width:380px;padding-left:16px;border-left:1px solid #e5e4df;color:#60645c;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-actions{justify-content:flex-end;gap:6px;padding:0 16px 0 8px}.icon-button{width:40px;height:40px;border-radius:6px;display:inline-grid!important;place-items:center;color:#565b53;background:transparent;padding:0!important}.icon-button:hover{background:#f0f1ed;color:#33372f}.icon-button:disabled:hover{background:transparent;color:#696e65}.save-status{display:flex;align-items:center;gap:6px;color:#687361;font-size:12px;margin-right:5px;white-space:nowrap}.save-status.error{color:#9b3b2d}.device-toggle{display:flex;border:1px solid #d9dbd4;border-radius:6px;overflow:hidden;margin-left:4px}.device-toggle button{width:40px;height:36px;display:grid;place-items:center;background:#fff;color:#696e66}.device-toggle button.active{background:#eef2e9;color:#5e6c4e;box-shadow:inset 0 0 0 1px #8f9e7c}.inspector-toggle[aria-pressed=true]{background:#eef2e9;color:#4f5f43}.help-button{height:36px;display:flex;align-items:center;gap:6px;padding:0 10px;border:1px solid #deddd8;border-radius:6px;color:#656a61;background:#fff;font-size:12px;white-space:nowrap}.help-button:hover{color:#343930;border-color:#bbbdb5;background:#f8f8f5}.copy-button{height:42px;display:flex;align-items:center;gap:8px;padding:0 16px;margin-left:8px;background:#b84d14;color:#fff;border-radius:6px;font-size:13px;font-weight:700;box-shadow:0 5px 14px #b84d143d;white-space:nowrap}.copy-button:hover{background:#963d0d}.editor-pane,.preview-pane,.inspector{min-width:0;min-height:0;background:#fff}.editor-pane{grid-column:1;grid-row:2;display:grid;grid-template-rows:48px 42px minmax(0,1fr) 32px;border-right:1px solid #e3e2de}.editor-pane.has-sample{grid-template-rows:48px auto 42px minmax(0,1fr) 32px}.pane-heading,.preview-heading{height:48px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ecebe7}.pane-heading>div{display:flex;align-items:center;gap:7px}.pane-heading h2{font-size:15px;margin:0;font-weight:700}.live-dot{width:6px;height:6px;background:#72a660;border-radius:50%;box-shadow:0 0 0 3px #edf4ea}.format-document-button{min-width:108px;height:32px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #deddd8;border-radius:6px;color:#596351;background:#f8faf6;font-size:12px;font-weight:650}.format-document-button:hover{border-color:#aeb7a3;background:#f0f4ec;color:#35402f}.sample-banner{min-width:0;padding:10px 12px;display:flex;align-items:center;gap:8px;background:#fff8f1;border-bottom:1px solid #f1d9c8;color:#5b483c}.sample-banner>div{min-width:0;flex:1;display:grid;gap:2px}.sample-banner strong{font-size:12px}.sample-banner span{color:#75665c;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sample-banner button{min-height:34px;padding:0 10px;border:1px solid #d9bca8;border-radius:6px;background:#fff;color:#6c452f;font-size:11px;font-weight:700;white-space:nowrap}.sample-banner button:first-of-type{background:#b84d14;border-color:#b84d14;color:#fff}.format-toolbar{padding:0 11px;display:flex;align-items:center;gap:2px;border-bottom:1px solid #ecebe7;overflow-x:auto}.format-toolbar button{width:38px;min-width:38px;height:36px;display:grid;place-items:center;background:transparent;color:#656a63;border-radius:5px}.format-toolbar button:hover{background:#f2f2ef;color:#30342e}.format-toolbar>span{flex:1}.editor-workspace{--editor-line-height: 23.4px;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);background:#f7f7f7;overflow:hidden}.editor-workspace textarea{min-width:0;min-height:0;width:100%;height:100%;resize:none;border:0;outline:0;padding:14px 16px 32px;color:#343830;background:#f7f7f7;caret-color:#b84d14;font:13px/var(--editor-line-height) SFMono-Regular,Cascadia Code,Consolas,monospace;-moz-tab-size:2;tab-size:2;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.editor-status{display:flex;align-items:center;gap:18px;padding:0 12px;border-top:1px solid #e9e8e4;color:#666b63;font-size:11px}.editor-status span:last-child{margin-left:auto}.editor-status i{width:6px;height:6px;display:inline-block;margin-left:4px;border-radius:50%;background:#75a85f}.preview-pane{grid-column:2;grid-row:2;display:grid;grid-template-rows:48px minmax(0,1fr);background:#fff}.preview-heading{background:#fff;font-size:13px;color:#5f635c}.preview-heading div{display:flex;align-items:center;gap:4px;color:#6d726a;font-size:12px}.preview-size-compact{display:none}.preview-stage{min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 20px 50px;background:#fff;transition:.2s ease}.wechat-preview-frame{width:100%;min-height:100%;overflow:hidden;overflow-wrap:anywhere;background:#fff;border:0;box-shadow:none}.wechat-preview-frame>section{width:100%!important;max-width:none!important;min-height:inherit;margin-inline:0!important}.preview-stage.phone-mode{padding:20px 24px 50px;display:flex;justify-content:center;align-items:flex-start;background:#f1f0ec}.preview-stage.phone-mode .wechat-preview-frame{max-width:375px;min-height:780px;border:1px solid rgba(94,108,78,.16);box-shadow:0 1px 3px #26292314}.preview-stage.phone-mode .wechat-preview-frame>section{max-width:677px!important;margin-inline:auto!important}.inspector{overflow-y:auto;border-left:1px solid #e3e2de;background:#fbfaf8}.inspector-heading{height:48px;padding:0 8px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #e8e7e2;background:#fff}.inspector-heading>div{display:flex;align-items:center;gap:8px}.inspector-heading h2{font-size:15px;margin:0}.inspector-close{width:40px;height:40px;display:grid;place-items:center;border-radius:6px;background:transparent;color:#5f655c}.inspector-close:hover{background:#f0f1ed;color:#30352e}.control-section{padding:18px;border-bottom:1px solid #e7e6e1}.control-section>label,.control-section h3{display:block;margin:0 0 13px;color:#4f534c;font-size:13px;font-weight:700}.theme-option-group+.theme-option-group{margin-top:18px}.theme-group-heading{margin-bottom:9px;display:grid;gap:2px}.theme-group-heading strong{color:#555a52;font-size:11px}.theme-group-heading span{color:#686d65;font-size:10px;line-height:1.5}.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 9px}.theme-grid-featured{grid-template-columns:1fr}.theme-grid-featured .theme-card{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:10px;text-align:left}.theme-grid-featured .theme-swatch{height:58px}.theme-grid-featured .theme-card b{margin:0;font-size:13px}.theme-card{position:relative;background:transparent;padding:0;color:#565a53}.theme-swatch{height:62px;padding:12px 10px;display:flex;flex-direction:column;gap:7px;background:var(--swatch-soft);border:1px solid #deddd8;border-radius:6px;transition:.15s ease}.theme-swatch i{height:4px;border-radius:4px;background:var(--swatch-main);display:block}.theme-swatch i:nth-child(1){width:53%}.theme-swatch i:nth-child(2){width:82%;opacity:.55}.theme-swatch i:nth-child(3){width:68%;opacity:.28}.theme-card b{display:block;margin-top:6px;font-size:11px;font-weight:500}.theme-card:hover .theme-swatch,.theme-card.selected .theme-swatch{border-color:var(--swatch-main);box-shadow:inset 0 0 0 1px var(--swatch-main)}.selected-check{position:absolute;top:-6px;right:-3px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#637452;color:#fff;box-shadow:0 0 0 3px #fbfaf8}.current-theme{margin-top:17px;display:grid;row-gap:4px}.current-theme span{font-size:11px;color:#6d726a}.current-theme strong{font-family:Songti SC,serif;font-size:16px}.current-theme small{color:#6d726a;font-size:10px;line-height:1.55}.segmented-control>label,.segmented-control>.control-label{color:#62675f;font-size:12px}.segmented-control{display:grid;grid-template-columns:83px 1fr;align-items:center;margin-top:12px}.segmented-control>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.segmented-control button{min-height:45px;padding:5px 3px;background:#fff;border:1px solid #deddd8;border-radius:5px;color:#686c65;display:flex;flex-direction:column;justify-content:center}.segmented-control button.active{border-color:#78866a;box-shadow:inset 0 0 0 1px #78866a;color:#37412f;background:#f6f8f3}.segmented-control button span{font-size:11px}.segmented-control button small{font-size:9px;color:#6d726a;margin-top:2px}.palette-section{padding-bottom:12px}.color-row{display:grid;grid-template-columns:1fr 24px 87px;align-items:center;gap:8px;margin-bottom:9px}.color-row>span{font-size:11px;color:#666b63;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-row i{width:24px;height:24px;border-radius:4px;border:1px solid rgba(0,0,0,.08)}.color-row code{padding:3px 0;color:#666b63;background:transparent;font-size:10px;text-align:right}.mobile-tabs{display:none}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%);z-index:20;padding:11px 16px;display:flex;align-items:center;gap:8px;background:#20231f;color:#fff;border-radius:7px;box-shadow:0 8px 24px #00000038;font-size:12px;animation:toast-in .2s ease}.toast button{min-height:30px;margin-left:6px;padding:0 10px;border:1px solid rgba(255,255,255,.45);border-radius:5px;background:transparent;color:#fff;font-size:11px;font-weight:700}.publish-feedback{position:fixed;right:22px;bottom:22px;z-index:18;width:min(430px,calc(100vw - 44px));overflow:hidden;background:#fff;border:1px solid #d9ddd5;border-radius:10px;box-shadow:0 18px 46px #1a1f182e;animation:publish-in .2s ease}.publish-feedback.success{border-top:4px solid #567149}.publish-feedback.error{border-top:4px solid #a33d2d}.publish-feedback>header{padding:16px 16px 13px;display:grid;grid-template-columns:24px 1fr 40px;align-items:start;gap:10px}.publish-feedback.success>header>svg{color:#567149}.publish-feedback.error>header>svg{color:#a33d2d}.publish-feedback header strong{display:block;color:#30352e;font-size:14px}.publish-feedback header p{margin:4px 0 0;color:#60665d;font-size:12px;line-height:1.6}.publish-close{width:40px;height:40px;display:grid;place-items:center;border-radius:5px;background:transparent;color:#5c6259}.publish-close:hover{background:#f1f2ee}.publish-warnings{margin:0 16px 14px 50px;padding:11px 12px;background:#fff8ed;border:1px solid #f1d6ad;border-radius:6px}.publish-warnings>strong{color:#674b2a;font-size:11px}.publish-warnings ul{margin:7px 0 0;padding:0;display:grid;gap:6px;list-style:none;color:#69594a;font-size:11px;line-height:1.6}.publish-warnings li{display:flex;align-items:flex-start;gap:6px}.publish-warnings li>span{min-width:0}.issue-locations{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:3px}.issue-locations button{padding:0;border-bottom:1px solid currentColor;background:transparent;color:#9a4a1e;font-size:inherit;font-weight:750;line-height:inherit}.issue-locations button:hover{color:#71330f}.issue-locations em{color:#806b55;font-size:10px;font-style:normal}.publish-feedback>footer{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f7f8f5;border-top:1px solid #e7e9e3}.publish-feedback>footer>span{color:#555c52;font-size:11px;line-height:1.5}.publish-feedback>footer>div{display:flex;gap:7px;flex-shrink:0}.publish-feedback>footer button{min-height:40px;padding:0 11px;border:1px solid #cfd3ca;border-radius:5px;background:#fff;color:#444a41;font-size:11px;font-weight:700}.publish-feedback.error>footer button:first-child{background:#a33d2d;border-color:#a33d2d;color:#fff}.storage-alert{position:fixed;top:80px;left:50%;z-index:19;width:min(650px,calc(100vw - 32px));padding:12px 12px 12px 14px;display:grid;grid-template-columns:24px minmax(0,1fr) auto 40px;align-items:center;gap:10px;transform:translate(-50%);background:#fff8ed;color:#5e472f;border:1px solid #e8c48f;border-radius:9px;box-shadow:0 12px 34px #31271a29}.storage-alert>svg{color:#b35a20}.storage-alert strong{display:block;color:#543820;font-size:13px}.storage-alert p{margin:2px 0 0;font-size:11px;line-height:1.55}.storage-backup{min-height:40px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;border-radius:6px;background:#9a4516;color:#fff;font-size:11px;font-weight:750;white-space:nowrap}.storage-dismiss{width:40px;height:40px;display:grid;place-items:center;border-radius:5px;background:transparent;color:#704f34}.storage-dismiss:hover{background:#f2e3cf}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;padding:24px;background:#16191575;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.help-dialog{width:min(560px,100%);max-height:min(720px,calc(100vh - 48px));max-height:min(720px,calc(100dvh - 48px));overflow:auto;background:#fff;color:#343831;border:1px solid #dcddd7;border-radius:12px;box-shadow:0 24px 70px #1619153d}.help-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:23px 24px 18px;border-bottom:1px solid #ecece7}.help-dialog>header span{color:#e66a32;font-size:11px;font-weight:800;letter-spacing:.12em}.help-dialog>header h2{margin:5px 0 0;font-family:Songti SC,"Noto Serif SC",serif;font-size:22px;line-height:1.35}.help-dialog-content{padding:8px 24px}.help-dialog-content>section{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:17px 0;border-bottom:1px solid #eeeee9}.help-dialog-content>section>svg{color:#66745a;margin-top:1px}.help-dialog-content h3{margin:0 0 6px;font-size:14px}.help-dialog-content p,.help-dialog>footer p{margin:0;color:#6d716a;font-size:12px;line-height:1.75}.help-dialog kbd{display:inline-block;min-width:22px;padding:1px 5px;margin:0 1px;color:#4d5348;background:#f5f6f2;border:1px solid #d9dbd3;border-bottom-width:2px;border-radius:4px;font:11px/1.5 SFMono-Regular,Consolas,monospace;text-align:center}.help-dialog>footer{display:flex;align-items:center;gap:18px;padding:18px 24px 22px;background:#fafaf7;border-radius:0 0 12px 12px}.help-dialog>footer p{flex:1}.help-dialog>footer button{min-width:82px;height:36px;color:#fff;background:#5e6c4e;border-radius:6px;font-size:12px;font-weight:700}.local-only-note{display:inline-flex;align-items:center;gap:5px;padding:6px 7px;color:#6d726a;background:transparent;border-radius:5px;font-size:11px;white-space:nowrap}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #b84d14;outline-offset:2px}.device-toggle button:focus-visible,.format-toolbar button:focus-visible,.mobile-tabs button:focus-visible,.editor-workspace textarea:focus-visible{outline-offset:-3px}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}}@keyframes publish-in{0%{opacity:0;transform:translateY(8px)}}@media (max-width: 1400px){.app-shell{grid-template-columns:minmax(360px,1fr) minmax(460px,1fr)}.document-title{max-width:260px}.save-status:not(.error){display:none}}@media (min-width: 1201px){.inspector{position:fixed;top:68px;right:0;bottom:0;z-index:12;width:320px;display:none;box-shadow:-14px 0 34px #252a2224}.inspector.desktop-open{display:block}}@media (max-width: 1200px){body{overflow:hidden}.app-shell{display:grid;grid-template-columns:1fr;grid-template-rows:58px minmax(0,1fr) 62px;height:100vh;height:100dvh}.topbar{grid-column:1;grid-row:1;height:58px}.topbar-brand{padding-left:14px}.topbar-brand strong{font-size:21px}.document-title,.save-status:not(.error),.local-only-note,.device-toggle{display:none}.save-status.error{width:40px;height:40px;margin:0;display:flex;justify-content:center}.save-status.error>span{display:none}.topbar-actions>.icon-button{display:none!important}.topbar-actions{padding-right:12px}.help-button{width:44px;height:44px;padding:0;justify-content:center}.help-button span{display:none}.copy-button{display:flex!important;margin:0;height:44px;padding-inline:13px}.editor-pane,.preview-pane,.inspector{display:none;grid-column:1;grid-row:2}.editor-pane.mobile-active{display:grid;grid-template-rows:46px 40px minmax(0,1fr) 30px}.editor-pane.has-sample.mobile-active{grid-template-rows:46px auto 40px minmax(0,1fr) 30px}.preview-pane.mobile-active{display:grid;grid-template-rows:46px minmax(0,1fr)}.preview-size-desktop{display:none}.preview-size-compact{display:inline}.inspector.mobile-active{display:block;overflow-y:auto}.inspector.mobile-active{padding-bottom:74px}.preview-stage{padding:0 16px 35px}.preview-stage.phone-mode{padding:13px 10px 35px}.inspector-heading{position:sticky;top:0;z-index:3}.inspector-close{display:none}.mobile-tabs{grid-column:1;grid-row:3;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-top:1px solid #deddd8;z-index:8}.mobile-tabs button{background:#fff;color:#686d65;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px}.mobile-tabs button.active{color:#5e6c4e}.format-toolbar button{width:40px;min-width:40px;height:40px;color:#565c54}.toast{bottom:78px;width:max-content;max-width:calc(100vw - 28px)}.publish-feedback{right:10px;bottom:72px;width:calc(100vw - 20px);max-height:calc(100dvh - 142px);overflow-y:auto}.publish-feedback>header{grid-template-columns:24px 1fr 44px}.publish-warnings li{flex-direction:column;gap:2px}.publish-feedback>footer{align-items:stretch;flex-direction:column}.publish-feedback>footer>div{justify-content:flex-end}.publish-feedback>footer button{min-height:44px}.publish-close{width:44px;height:44px}.sample-banner{align-items:stretch;flex-wrap:wrap}.sample-banner>div{flex-basis:100%}.sample-banner button{min-height:40px;flex:1}.storage-alert{top:68px;left:10px;width:calc(100vw - 20px);grid-template-columns:24px minmax(0,1fr) 44px;transform:none}.storage-alert .storage-backup{grid-column:2 / 4;justify-content:center}.storage-alert .storage-dismiss{grid-column:3;grid-row:1;width:44px;height:44px}.dialog-backdrop{padding:14px}.help-dialog{max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (forced-colors: active){button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline-color:CanvasText}}@media (max-width: 520px){.theme-grid{grid-template-columns:repeat(3,1fr)}.theme-grid.theme-grid-featured{grid-template-columns:1fr}.control-section{padding-inline:16px}.help-dialog>header,.help-dialog-content,.help-dialog>footer{padding-left:18px;padding-right:18px}.help-dialog>footer{align-items:stretch;flex-direction:column}}