/* Both complete images are visible. Close-ups make the actual change easy to see. */
.brush-demo-overlay,.brush-demo-controls{display:none}
.image-stage[data-preview-mode="brush"]:not(.loaded) .brush-demo-overlay{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.image-stage[data-preview-mode="brush"]:not(.loaded) .brush-demo-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 3px 3px}
.brush-demo-steps{display:flex;align-items:center;gap:16px}
.brush-demo-steps>span{display:flex;align-items:center;gap:6px;font-size:10px;color:#8a9481;transition:color .2s}
.brush-demo-steps b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid #d7dfce;font-weight:400;font-size:9px;background:#f9faf6}
.brush-demo-steps>span.current{color:#314c27}
.brush-demo-steps>span.current b{background:#d8eab9;border-color:#bbd394;color:#314c27}
#toggle-brush-demo{background:transparent;color:#6b7861;font-size:10px;padding:6px 0;white-space:nowrap}
#toggle-brush-demo:hover{color:#243c32;text-decoration:underline}
@media(max-width:1100px){.brush-demo-steps{gap:8px}.brush-demo-steps>span{font-size:9px;gap:4px}.brush-demo-steps b{width:17px;height:17px;font-size:8px}#toggle-brush-demo{font-size:9px}}
@media(max-width:760px){.image-stage[data-preview-mode="brush"]:not(.loaded) .brush-demo-controls{flex-wrap:wrap;gap:12px;padding-top:15px}.brush-demo-steps{gap:12px}.brush-demo-steps>span{font-size:10px}#toggle-brush-demo{margin-left:auto}}
.mode-description{max-width:390px;margin:-3px 0 16px;min-height:74px;text-align:left}
.mode-description>div{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.mode-description strong{font-size:13px;font-weight:500}
.mode-description>div>span{font-size:8px;letter-spacing:.8px;color:#527133;background:#e7eedb;padding:4px 6px;border-radius:4px}
.mode-description p{font-size:12px;line-height:1.65;color:#748078;margin:0}
.metadata-summary{display:none;padding:16px 12px;border-top:1px solid #e0e6d8;background:#fefefb}
.metadata-summary>span{font-size:8px;color:#7b886e;letter-spacing:1px}
.metadata-summary p{display:flex;justify-content:space-between;gap:10px;margin:12px 0 0;font-size:11px;line-height:1.5}
.metadata-summary b{font-size:10px;font-weight:400;color:#587a37}
.image-stage[data-preview-mode="metadata"]:not(.loaded) .metadata-summary,.image-stage.metadata-result .metadata-summary{display:block}
.image-stage[data-preview-mode="metadata"]:not(.loaded) .detail-strip{display:none}
.all-free-note{display:inline-block;margin-top:5px;font-size:11px;color:#748078}
.image-stage.demo-loading .detail-strip>canvas{visibility:hidden}
@media(max-width:760px){.mode-description{max-width:345px;margin:0 auto 20px;min-height:85px}.mode-description>div{justify-content:center}.mode-description p{text-align:center;font-size:12px}}
.hero{grid-template-columns:.88fr 1.2fr;gap:42px}
.hero-visual{max-width:none}
.editor-top{padding:18px 20px}
.image-stage{aspect-ratio:auto;background:#f1f3ec;padding:14px;overflow:hidden}
.comparison-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;position:relative}
.compare-pane{margin:0;min-width:0;background:white;border:1px solid #d9e0d2;border-radius:8px;overflow:hidden}
.pane-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:12px 10px;min-height:49px}
.pane-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:5px 8px;border-radius:5px;white-space:nowrap}
.before-badge{background:#f8e9df;color:#986447}.after-badge{background:#e4f0d5;color:#42632b}
.pane-description{font-size:10px;color:#76816e;line-height:1.4;text-align:right}
.pane-image{position:relative;aspect-ratio:1.138;background:#e4e9dd;overflow:hidden}
.image-stage[data-preview-mode="ai"]:not(.loaded) .pane-image{aspect-ratio:4/3}
.pane-image>img,.pane-image>canvas{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pane-image>img{object-fit:contain;background:#18321e}
.image-stage #result-canvas{clip-path:none}
.image-stage #brush-canvas{z-index:6;cursor:crosshair;touch-action:none}
.detail-strip{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 10px;background:#fefefb;border-top:1px solid #e0e6d8}
.detail-copy{min-width:0;flex:1}.detail-copy>span{display:block;font-size:7px;letter-spacing:1.2px;color:#89917e;margin-bottom:6px}.detail-copy>strong{font-size:10px;font-weight:400;line-height:1.5;display:block}
.detail-strip>canvas{display:block;width:44%;height:auto;aspect-ratio:1.5;border-radius:5px;border:1px solid #d2d9ca;flex-shrink:0}
.comparison-arrow{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;z-index:7;background:#fff;color:#687b54;box-shadow:0 2px 8px #243c3226;border:1px solid #dce2d3;font-size:16px;pointer-events:none}
.image-stage.loaded .pane-image>img{display:none}
.image-stage.loaded:not(.has-result) .after-pane,.image-stage.loaded:not(.has-result) .comparison-arrow,.image-stage.loaded:not(.has-result) .detail-strip{display:none}
.image-stage.loaded:not(.has-result) .comparison-grid{grid-template-columns:1fr}
.image-stage.loaded:not(.has-result) .pane-image{aspect-ratio:1.35}
.image-stage.loaded{background:#f1f3ec}
.image-stage.loaded .pane-image{background:repeating-conic-gradient(#e6e9e1 0 25%,#f2f3ee 0 50%) 0/20px 20px}
.image-stage.metadata-result .detail-strip{display:none}
.visual-caption{margin-top:22px}.visual-caption span:last-child{font-size:10px}
.editor-bottom>div{line-height:1.6}
.hero-visual .floating-note{display:none}
@media(min-width:1500px){.hero-visual{max-width:none}}
@media(max-width:1100px) and (min-width:761px){.hero{grid-template-columns:.85fr 1.15fr;gap:25px}.hero h1{font-size:57px}.image-stage{padding:10px}.comparison-grid{gap:10px}.pane-heading{flex-wrap:wrap;gap:5px;padding:10px}.pane-description{text-align:left;font-size:8px;min-height:12px}.detail-strip{padding:9px 7px}.detail-copy>strong{font-size:9px}.detail-copy>span{font-size:6px;letter-spacing:.8px}}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:32px}.hero-visual{max-width:540px}.image-stage{padding:14px}.comparison-grid{grid-template-columns:1fr;gap:24px}.pane-heading{padding:11px 14px}.pane-badge{font-size:12px}.pane-description{font-size:11px}.pane-image{aspect-ratio:1.7}.pane-image>img{object-fit:contain;background:#18321e}.detail-strip{padding:10px 14px}.detail-strip>canvas{width:108px}.detail-copy>span{font-size:8px}.detail-copy>strong{font-size:13px}.comparison-arrow{top:50%;transform:translate(-50%,-50%) rotate(90deg);width:29px;height:29px}.image-stage.loaded:not(.has-result) .pane-image{aspect-ratio:1.15}.visual-caption span:last-child{font-size:9px}.editor-top{padding:16px 13px}}