/* Photo examples are illustrative; all operation controls retain their original behavior. */
.visual-refresh .page{max-width:1120px}
.visual-refresh .page-top{gap:28px;align-items:center;margin-bottom:24px}
.visual-refresh .page-top h1{font-size:clamp(1.7rem,3.4vw,2.65rem);line-height:1.2;letter-spacing:-.035em;max-width:850px}
.visual-refresh .page-top .lede{max-width:740px;line-height:1.65;font-size:1rem}
.visual-refresh .eyebrow{font-size:.73rem;letter-spacing:.045em}
.visual-refresh main[data-home] .page-top{padding:24px 0 12px}
.visual-start{margin:12px 0 32px}
.visual-start>h2{font-size:1rem;color:#465574;font-weight:600;margin:0 0 16px}
.visual-task-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.visual-task{display:flex;flex-direction:column;border:1px solid #e2e7ef;border-radius:18px;overflow:hidden;background:#fff;text-decoration:none;color:#162847;box-shadow:0 3px 12px #182d4c05;transition:border-color .15s,transform .15s}
.visual-task:hover{border-color:#809ce6;transform:translateY(-2px)}
.visual-task:focus-visible{outline:3px solid #244ee9;outline-offset:3px}
.visual-task>strong{padding:17px 18px 20px;font-size:1rem;line-height:1.5;overflow-wrap:anywhere}
.task-art{height:172px;background:#eef3fc;position:relative;overflow:hidden;isolation:isolate;flex-shrink:0}
.art-frame{position:absolute;display:block;overflow:hidden;border-radius:7px;box-shadow:0 5px 12px #18304b20;background:#fff;top:23px;width:40%;height:119px}
.art-frame img{display:block;width:100%;height:100%;object-fit:cover}
.art-frame.before{left:7%;transform:rotate(-4deg)}
.art-frame.after{right:7%;transform:rotate(3deg)}
.art-arrow{position:absolute;left:calc(50% - 14px);top:66px;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;background:#fff;color:#3a5487;font-size:17px;z-index:2;box-shadow:0 1px 7px #172c4320}
.art-caption{position:absolute;bottom:9px;right:13px;border-radius:5px;padding:2px 7px;font-size:11px;font-weight:700;color:#38516e;background:#ffffffeb}
.art-compress{background:#eef6f4}.art-compress .after{height:119px;top:23px}
.art-resize{background:#f4f0fb}.art-resize .after{width:28%;height:78px;top:43px;right:13%}
.art-crop{background:#fff3e7}.art-crop .before:after{content:"";position:absolute;inset:20% 17%;border:2px dashed #fff;box-shadow:0 0 0 40px #13243236}.art-crop .after img{transform:scale(1.6)}
.art-format{background:#eaf4f8}.art-format .before{background:repeating-conic-gradient(#e0e6ed 0% 25%,#fff 0% 50%) 0 0/16px 16px}.art-format img{object-fit:contain;padding:8px}.art-format .after{background:#f9ebda}
.art-social{background:#f7edf4}.art-social .after{width:32%;height:111px;top:27px;right:11%;padding:20px 0}.art-social .after img{object-fit:contain}
.art-wide{background:#edf1fb}.art-wide .after{height:76px;top:44px}.art-wide .after img{object-fit:cover}
.visual-details{border:1px solid #e1e7ef;border-radius:12px;background:#fff;margin:18px 0;padding:0 18px;min-width:0}
.visual-details>summary{padding:16px 0;color:#334966;font-weight:600;cursor:pointer;line-height:1.5;overflow-wrap:anywhere}
.visual-details[open]>summary{border-bottom:1px solid #edf0f6;margin-bottom:16px}
.visual-details>section,.visual-details>nav{margin:20px 0}
.visual-details .purpose-links .related-card span{display:none}
.visual-refresh .dropzone .visual-details{max-width:470px;text-align:left;margin:10px auto;background:transparent}
.visual-refresh .dropzone .visual-details>summary{font-size:.8rem;padding:8px 0}
.visual-refresh .large-photo-note{line-height:1.6}
.visual-refresh main[data-tool] .page-top>div:first-child{flex:1;min-width:0}
.visual-refresh .art-compact{width:210px;height:126px;border-radius:16px;flex:0 0 210px}
.art-compact .art-frame{height:85px;top:17px}.art-compact .art-arrow{top:49px}
.art-compact.art-compress .after{height:85px;top:17px}.art-compact.art-resize .after{height:58px;top:30px}
.art-compact.art-social .after{height:84px;top:18px;padding:16px 0}.art-compact.art-wide .after{height:55px;top:34px}
.visual-refresh .sample-figure{max-width:700px;margin:20px auto}
.visual-refresh .sample-figure img{max-height:300px;width:100%;object-fit:contain}
.visual-refresh .guide-grid{gap:16px}
.visual-refresh .page>p,.visual-refresh .page>ol,.visual-refresh .page>ul{line-height:1.75}
.visual-refresh .workspace,.visual-refresh .editor-intro,.visual-refresh .purpose-start{min-width:0}
.visual-refresh .visual-details .home-grid{margin:20px 0}
@media(max-width:760px){
.visual-task-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.visual-refresh .page-top{gap:16px}.visual-refresh .art-compact{width:150px;flex-basis:150px;height:112px}
.visual-task>strong{padding:12px;font-size:.92rem}.task-art{height:150px}.art-frame{height:100px}.art-arrow{top:58px}
.visual-refresh .page-top h1{letter-spacing:-.025em}.visual-details{padding:0 14px}
}
@media(max-width:480px){
.visual-refresh main[data-home] .page-top{padding:8px 0 0}.visual-refresh .page-top .lede{font-size:.92rem}
.visual-refresh main[data-tool] .art-compact{display:none}
.visual-task-grid{gap:10px}.visual-task{border-radius:12px}.task-art{height:118px}
.art-frame{height:77px;top:17px}.art-arrow{top:43px;width:23px;height:23px;left:calc(50% - 11px);font-size:14px}
.art-compress .after{height:77px;top:17px}.art-resize .after{height:48px;top:31px}.art-social .after{height:77px;top:16px;padding:15px 0}.art-wide .after{height:45px;top:34px}
.art-caption{font-size:9px;bottom:5px;right:7px}.visual-task>strong{padding:11px;font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){.visual-task{transition:none}.visual-task:hover{transform:none}}

/* Batch actions become useful only after a photo has been selected. */
.visual-refresh #batch-panel:not(:has(#batch-queue>*)){display:none}

.visual-guide-grid{margin:22px 0}.visual-guide-grid .visual-task>strong{font-size:.95rem}.art-compress .after:after{content:"↓";position:absolute;bottom:5px;right:5px;color:#fff;background:#24765c;border:2px solid #fff;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;font-weight:700}
@media(min-width:481px) and (max-width:760px){.art-compress:not(.art-compact) .after{height:100px;top:23px}}

.visual-refresh .visual-guide-grid .visual-task{color:#162847;text-decoration:none}.visual-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.art-convert{background:#eaf4f8}