:root{--blue:#0078d4;--blue-hover:#106ebe;--blue-pressed:#005a9e;--blue-tint:#eff6fc;--blue-tint-strong:#deecf9;--purple:#512bd4;--purple-tint:#f3f0fc;--green:#107c10;--amber:#8a5300;--red:#c50f1f;--bg:#f5f5f5;--surface:#fff;--stroke:#e0e0e0;--stroke-strong:#d1d1d1;--fg:#242424;--fg-2:#424242;--fg-3:#616161;--fg-4:#8a8a8a;--radius:8px;--radius-sm:4px;--shadow-2:0 1px 2px #0000000f, 0 0 2px #0000000f;--shadow-8:0 4px 8px #0000001a, 0 0 2px #00000014;--shadow-16:0 8px 16px #0000001f, 0 0 2px #0000001a;--font-ui:"Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;--font-code:"Cascadia Code", "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, "Microsoft YaHei", monospace}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);min-width:320px;color:var(--fg);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;margin:0;font-size:14px;line-height:1.43}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.visuallyHidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.icon{flex:none;width:16px;height:16px}.app{flex-direction:column;height:100%;display:flex}.topBar{background:var(--surface);border-bottom:1px solid var(--stroke);flex:none;justify-content:space-between;align-items:center;gap:16px;height:56px;padding:0 20px;display:flex;position:relative}.topBar:before{content:"";background:linear-gradient(90deg, var(--purple), var(--blue));height:3px;position:absolute;inset:0 0 auto}.brand{align-items:center;gap:10px;min-width:0;display:flex}.brandMark{flex:none;width:28px;height:28px}.brandName{letter-spacing:-.01em;white-space:nowrap;font-size:16px;font-weight:600}.brandName strong{color:var(--purple);font-weight:700}.topBarActions{align-items:center;gap:16px;display:flex}.saveState{color:var(--fg-3);white-space:nowrap;align-items:center;gap:6px;font-size:12px;display:inline-flex}.saveState:before{content:"";background:var(--green);border-radius:50%;width:6px;height:6px}.saveState.pending:before{background:var(--fg-4)}.saveState.error{color:var(--red)}.saveState.error:before{background:var(--red)}.githubLink{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--fg-2);justify-content:center;align-items:center;transition:background .15s,color .15s;display:inline-flex}.githubLink:hover{color:var(--blue);background:#f0f0f0}.githubLink .icon{width:20px;height:20px}.primaryButton{border-radius:var(--radius-sm);background:var(--blue);color:#fff;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;min-width:132px;height:36px;padding:0 18px;font-weight:600;transition:background-color .12s;display:inline-flex}.primaryButton:hover:not(:disabled){background:var(--blue-hover)}.primaryButton:active:not(:disabled){background:var(--blue-pressed)}.primaryButton.done,.primaryButton.done:hover:not(:disabled){background:var(--green)}.primaryButton:disabled{border-color:var(--stroke);color:#bdbdbd;background:#f0f0f0}.subtleButton{border-radius:var(--radius-sm);height:28px;color:var(--fg-2);background:0 0;border:1px solid #0000;align-items:center;gap:6px;padding:0 10px;font-size:13px;display:inline-flex}.subtleButton:hover,.subtleButton[aria-expanded=true]{color:var(--blue);background:#f0f0f0}.secondaryButton{border:1px solid var(--stroke-strong);border-radius:var(--radius-sm);background:var(--surface);height:32px;padding:0 12px;font-weight:600}.secondaryButton:hover:not(:disabled){background:#f5f5f5;border-color:#c7c7c7}.linkButton{color:var(--blue);background:0 0;border:0;padding:2px 4px;font-size:12px}.linkButton:hover{text-decoration:underline}.linkButton.danger{color:var(--red)}.workspace{flex:1;grid-template-columns:minmax(0,1fr) minmax(440px,.85fr);gap:16px;min-height:0;padding:16px;display:grid}.pane{border:1px solid var(--stroke);border-radius:var(--radius);background:var(--surface);min-width:0;min-height:0;box-shadow:var(--shadow-2);flex-direction:column;display:flex;overflow:hidden}.paneHeader{border-bottom:1px solid var(--stroke);flex:none;justify-content:space-between;align-items:center;gap:12px;height:44px;padding:0 12px 0 16px;display:flex}.paneTitle{color:var(--fg);font-size:13px;font-weight:600}.paneHint{color:var(--fg-4);font-size:12px}.paneTools{align-items:center;gap:4px;display:flex}.editorPane:focus-within{border-color:#b3d6f2}.editorBody{flex:1;min-height:0;position:relative}.markdownInput{resize:none;color:#1f1f1f;width:100%;height:100%;font-family:var(--font-code);font-variant-ligatures:none;tab-size:4;scrollbar-width:thin;background:0 0;border:0;outline:none;padding:20px 24px 40vh;font-size:14px;line-height:1.75;display:block}.markdownInput::placeholder{color:var(--fg-4)}.markdownInput::selection{background:#cce4f7}.editorPane.dragging .editorBody{background:var(--blue-tint)}.dropHint{border:2px dashed var(--blue);border-radius:var(--radius);color:var(--blue);pointer-events:none;place-items:center;font-weight:600;display:grid;position:absolute;inset:12px}.imageMenu{position:relative}.imagePopover{z-index:10;border:1px solid var(--stroke);border-radius:var(--radius);background:var(--surface);width:340px;box-shadow:var(--shadow-16);gap:12px;padding:14px;display:grid;position:absolute;top:calc(100% + 6px);right:0}.imagePopoverHint{color:var(--fg-3);margin:0;font-size:12px;line-height:1.6}.missingBadge{color:#8a5300;background:#fff4ce;border-radius:999px;padding:0 6px;font-size:11px;font-weight:600;line-height:18px}.missingImages{gap:8px;display:grid}.missingImages ul{border:1px dashed var(--stroke-strong);border-radius:var(--radius-sm);max-height:160px;color:var(--fg-2);font-family:var(--font-code);background:#fafafa;margin:0;padding:8px 10px;font-size:12px;list-style:none;overflow:auto}.missingImages li{text-overflow:ellipsis;white-space:nowrap;line-height:1.7;overflow:hidden}.imagePopoverActions{gap:8px;display:flex}.imageList{gap:4px;max-height:300px;margin:0;padding:0;list-style:none;display:grid;overflow:auto}.imageList li{border-radius:var(--radius-sm);grid-template-columns:40px minmax(0,1fr) auto auto auto;align-items:center;gap:8px;padding:6px;display:grid}.imageList li:hover{background:#f5f5f5}.imageList img{border-radius:var(--radius-sm);object-fit:cover;background:#f0f0f0;width:40px;height:40px}.imageInfo{min-width:0;display:grid}.imageInfo strong{font-family:var(--font-code);text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;overflow:hidden}.imageInfo span{color:var(--fg-4);font-size:12px}.previewScroller{scrollbar-width:thin;background:#fafafa;flex:1;min-height:0;padding:24px 16px 40vh;overflow:auto}.articleCard{border-radius:var(--radius);width:min(100%,414px);box-shadow:var(--shadow-8);background:#fff;border:1px solid #ebebeb;margin:0 auto;padding:24px 20px 32px}.articleBody>:first-child{margin-top:0!important}.articleBody>:last-child{margin-bottom:0!important}.articleBody img{max-width:100%}.articleBody img[data-asset-id]{cursor:copy;outline-offset:2px;outline:2px solid #0000;transition:outline-color .15s}.articleBody img[data-asset-id]:hover{outline-color:var(--blue)}.toast{z-index:20;border:1px solid var(--stroke);border-left:4px solid var(--blue);border-radius:var(--radius);background:var(--surface);max-width:min(560px,100vw - 32px);box-shadow:var(--shadow-16);align-items:flex-start;gap:12px;padding:12px 12px 12px 16px;line-height:1.5;animation:.16s ease-out toastIn;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast.success{border-left-color:var(--green)}.toast.warning{border-left-color:#f7630c}.toast.error{border-left-color:var(--red)}.toast button{border-radius:var(--radius-sm);width:24px;height:24px;color:var(--fg-3);background:0 0;border:0;flex:none;margin:-2px 0;font-size:18px;line-height:1}.toast button:hover{background:#f0f0f0}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,8px)}}@media (width<=900px){.app{height:auto;min-height:100%}.topBar{z-index:5;padding:0 12px;position:sticky;top:0}.saveState{display:none}.workspace{grid-template-columns:1fr;padding:12px}.pane{height:70vh}.imagePopover{width:min(340px,100vw - 48px)}}