/* 步骤演示独立样式；保留原有编辑器和手动对比组件。 */
.brush-demo{margin:0;min-width:0;border:1px solid #d9e1d0;border-radius:16px;background:#fffefa;overflow:hidden;color:#293b2c}
.brush-demo [hidden]{display:none!important}
.brush-demo-stage{position:relative;aspect-ratio:var(--brush-demo-ratio,4/3);background:#eeeae1;overflow:hidden;direction:ltr}
.brush-demo-stage>img,.brush-demo-stage>canvas{display:block;width:100%;height:100%;object-fit:contain}
.brush-demo-stage>canvas{position:absolute;inset:0;pointer-events:none}
.brush-demo-step{position:absolute;inset-block-start:14px;inset-inline-start:14px;max-width:calc(100% - 28px);padding:7px 11px;border:1px solid #ffffff99;border-radius:99px;background:#fffefae8;color:#304329;font-size:11px;line-height:1.4;box-shadow:0 2px 8px #293b2c0c;overflow-wrap:anywhere;unicode-bidi:isolate}
.brush-demo-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:12px 14px;border-block-start:1px solid #e5eadf}
.brush-demo-controls button{border:1px solid #b8c7a7;border-radius:8px;background:#f4f7ee;color:#304329;padding:8px 11px;min-height:36px;font:inherit;font-size:11px;line-height:1.4;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.brush-demo-controls button:hover{background:#e9efd9;border-color:#90a16f}
.brush-demo-controls button:focus-visible,.brush-demo figcaption a:focus-visible{outline:3px solid #687c46;outline-offset:3px}
.brush-demo-controls button[aria-pressed=true]{background:#e8efd9}
.brush-demo-controls [data-demo-status]{margin-inline-start:auto;max-width:55%;font-size:11px;color:#637453;line-height:1.5;overflow-wrap:anywhere}
.brush-demo figcaption{padding:0 14px 14px;font-size:11px;line-height:1.7;color:#667453}
.brush-demo figcaption p{margin:10px 0 7px}
.brush-demo figcaption a{display:inline-block;color:#395a31;font-weight:650;text-underline-offset:3px}
.brush-demo-fallback{padding:12px 14px 0;border-block-start:1px solid #e5eadf}
.brush-demo-fallback img{display:block;width:100%;height:auto;aspect-ratio:var(--brush-demo-ratio,4/3);object-fit:contain;border-radius:8px;background:#eeeae1}
.brush-demo-fallback p{font-size:11px;line-height:1.5;color:#667453;margin:8px 0}
html[dir=rtl] .brush-demo-stage{direction:rtl}
@media(max-width:480px){.brush-demo-controls{padding:10px;gap:8px}.brush-demo-controls [data-demo-status]{max-width:none;width:100%;margin-inline-start:0}.brush-demo-step{font-size:10px;padding:6px 9px;inset-block-start:10px;inset-inline-start:10px;max-width:calc(100% - 20px)}.brush-demo figcaption{padding:0 10px 12px}.brush-demo-fallback{padding:10px 10px 0}}