:root{--vp-ink:#1e1713;--vp-green:#386b39;--vp-pale:#f0f5eb;--vp-paper:#fffdf9;--vp-line:#dedbd4}
html,body{background:#fdfbf8;color:var(--vp-ink)}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3,.brand{font-family:Georgia,"Times New Roman",serif}
.page-shell{width:min(1120px,calc(100% - 32px))}
.site-header{height:58px;min-height:58px;border-bottom:1px solid var(--vp-line);gap:24px}
.brand{font-size:25px!important;font-weight:500!important;color:#17120f}.brand-mark{width:31px!important;height:28px!important;border-radius:0!important;background:transparent!important;color:#17120f!important}.brand-mark svg{width:29px;height:26px}.header-actions{margin-left:auto;gap:12px}.main-nav{align-items:stretch;gap:10px}.main-nav>a,.vp-more-tools>summary{display:flex;align-items:center;min-height:58px;padding:0 9px;border:0!important;border-radius:0!important;background:none!important;color:#1c1714!important;font-size:12px!important;font-weight:650!important;cursor:pointer;white-space:nowrap}.main-nav>a:hover,.main-nav>a:focus-visible,.main-nav>a[href*="image-converter"]{color:var(--vp-green)!important;box-shadow:inset 0 -3px var(--vp-green)}.vp-more-tools{position:relative}.vp-more-tools>summary{list-style:none;gap:5px}.vp-more-tools>summary::-webkit-details-marker{display:none}.vp-more-tools[open]>summary{color:var(--vp-green)!important}.vp-more-tools>div{position:absolute;top:51px;right:0;z-index:20;width:190px;padding:8px;border:1px solid var(--vp-line);background:var(--vp-paper);box-shadow:0 10px 28px #2d211514}.vp-more-tools>div a{display:block;padding:8px 10px;font:600 12px Inter,ui-sans-serif,sans-serif}.vp-more-tools>div a:hover{color:var(--vp-green);background:#f5f8f1}.language-control{position:relative;width:30px;height:32px}.language-control:before{content:'◎';position:absolute;inset:0;display:grid;place-items:center;font-size:25px;pointer-events:none}.language-control select{position:absolute!important;inset:0!important;width:100%!important;min-width:0!important;opacity:0;cursor:pointer}.theme-toggle{width:32px;height:32px;border:0;background:transparent;color:#17120f;font-size:25px;line-height:1}.theme-toggle:hover{color:var(--vp-green)}
.home-hero{max-width:850px;margin:0 auto;padding:31px 0 16px;text-align:center}.home-hero h1{margin:0;font-size:clamp(38px,4.35vw,57px)!important;line-height:.94!important;letter-spacing:-.045em}.home-hero p{max-width:none;margin:13px auto 0!important;color:#38322d!important;font-size:14px!important;line-height:1.4!important}
.vp-home-launcher{border:1px solid var(--vp-line);border-radius:6px;padding:15px 29px 18px;background:#fffefa}.vp-home-launcher h2,.vp-quick-starts h2{margin:0 0 10px;font-size:20px;font-weight:500}.vp-launch-tabs{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #d9d5cf;border-radius:4px;overflow:hidden}.vp-launch-tabs a{padding:9px 8px;border-right:1px solid #d9d5cf;text-align:center;font-size:12px;font-weight:600}.vp-launch-tabs a:last-child{border:0}.vp-launch-tabs a:hover,.vp-launch-tabs .is-active{color:#2e622f;background:#fafcf8;box-shadow:inset 0 0 0 1px var(--vp-green)}.vp-home-dropzone{min-height:182px;margin-top:17px;border:2px dashed #609065;background:#fffefa;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}.vp-image-icon{display:grid;place-items:center;width:54px;height:54px;border:2px solid var(--vp-green);border-radius:7px;color:var(--vp-green);font-size:34px;line-height:1}.vp-home-dropzone strong,.vp-converter-dropzone strong{font-size:13px;font-weight:650}.vp-home-dropzone small{font-size:12px;color:#37332f}.vp-primary-cta{display:inline-block;padding:9px 30px;border-radius:99px;background:linear-gradient(100deg,#49793f,#315f2f);color:white!important;font-size:12px;font-weight:750}.vp-quick-starts{margin-top:17px}.vp-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.vp-quick-card{min-height:82px;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;border:1px solid #e5e1db;border-radius:5px;padding:11px 12px;background:#fffefa}.vp-quick-card:hover{border-color:#8cad8a}.vp-quick-icon{display:grid;place-items:center;width:38px;height:38px;border:1.5px solid var(--vp-green);border-radius:4px;color:var(--vp-green);font-size:15px}.vp-quick-card strong,.vp-quick-card small{display:block}.vp-quick-card strong{font:600 14px Georgia,"Times New Roman",serif}.vp-quick-card small{margin-top:4px;font-size:10px;line-height:1.35}.vp-quick-card b{color:var(--vp-green);font-size:20px;font-weight:400}.vp-trust-strip{display:grid;grid-template-columns:repeat(3,1fr);margin:18px 0 10px;padding:15px 22px;background:linear-gradient(100deg,#f0f6ed,#f7f8f0);border-radius:6px}.vp-trust-strip article{display:flex;gap:14px;padding:2px 15px;border-right:1px solid #d7ddd0}.vp-trust-strip article:last-child{border:0}.vp-trust-strip b{color:var(--vp-green);font-size:29px;font-weight:400}.vp-trust-strip strong,.vp-trust-strip span{display:block}.vp-trust-strip strong{font:600 15px Georgia,"Times New Roman",serif}.vp-trust-strip span{max-width:185px;margin-top:3px;font-size:10px;line-height:1.35}.vp-guide-links{display:grid;grid-template-columns:1fr 1fr;margin:12px 0;border-top:1px solid #e6e2dc}.vp-guide-links a{display:grid;grid-template-columns:45px 1fr auto;gap:8px;align-items:center;padding:13px 22px;border-right:1px solid #e6e2dc}.vp-guide-links a:last-child{border:0}.vp-guide-links b{font-size:28px;color:var(--vp-green);font-weight:400}.vp-guide-links strong,.vp-guide-links small{display:block}.vp-guide-links strong{font:600 15px Georgia,"Times New Roman",serif}.vp-guide-links small{font-size:10px}.vp-guide-links em{font-style:normal;color:var(--vp-green);font-size:20px}.vp-home-faq{margin-bottom:16px;border:1px solid #e3dfd9;border-radius:5px}.vp-home-faq details+details{border-top:1px solid #e3dfd9}.vp-home-faq summary{padding:10px 18px;cursor:pointer;font-size:12px;font-weight:650}.vp-home-faq p{padding:0 18px 10px;margin:0;color:#57504a;font-size:11px}.vp-home-faq summary::marker{color:var(--vp-green)}
.breadcrumbs{margin:15px 0 0;color:#756e67;font-size:12px}.breadcrumbs a{color:#5c5b58}.breadcrumbs span{margin-right:9px}.vp-converter-hero{max-width:900px;margin:0 auto;padding:8px 0 15px;text-align:center}.vp-converter-hero .eyebrow{display:inline-block;padding:5px 17px;border-radius:99px;background:#eff4e9;color:#50704d;font-size:11px;text-transform:none}.vp-converter-hero h1{margin:7px 0 4px;font-size:37px!important;line-height:1.08!important}.vp-converter-hero .vp-ready-status{margin:0;color:var(--vp-green);font-size:15px!important;font-weight:650}.vp-converter-hero>small{display:block;margin-top:7px;color:#6d6660;font-size:12px}.converter-card{border-color:#d8d5cf!important;border-radius:7px!important;box-shadow:none!important;overflow:visible!important}.vp-converter-dropzone{min-height:210px}.converter-app{min-height:0!important}.converter-flow{grid-template-columns:1fr 1fr 1fr!important;min-height:345px!important}.converter-flow-arrow{display:none!important}.converter-pane{border:0!important}.converter-pane+.converter-pane{border-left:1px solid #dedbd4!important}.converter-pane-head{min-height:53px!important;height:53px!important;padding:11px 20px!important;background:#fffefa!important}.converter-pane-head h2{margin:0;font-size:19px;font-weight:600}.converter-pane-head .text-button{font-size:12px}.converter-items{max-height:285px!important;padding:10px 17px!important}.converter-flow-item{grid-template-columns:140px 1fr!important;gap:10px!important;min-height:95px!important;padding:0!important;border:0!important;border-radius:0!important;border-bottom:1px solid #e5e1db!important;background:transparent!important}.converter-flow-item:last-child{border-bottom:0!important}.converter-preview{width:140px!important;height:94px!important;border:0!important;border-radius:5px!important}.converter-remove{grid-column:2;justify-self:start;align-self:start;margin-top:-25px}.converter-item-copy strong{padding-top:10px;font-size:13px!important}.converter-item-copy span{font-size:12px!important}.converter-item-copy small{font-size:11px!important}.vp-option-content{padding:18px 23px}.converter-target-buttons{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #dedbd4;border-radius:5px;overflow:hidden}.converter-target-buttons button{min-height:43px;border:0;border-right:1px solid #dedbd4;background:#fffefa;font-size:13px;font-weight:650}.converter-target-buttons button:last-child{border:0}.converter-target-buttons .is-active{background:#477842;color:white}.vp-option-box{margin-top:20px;border:1px solid #e3dfd9;border-radius:6px;padding:11px}.vp-option-summary{display:flex;width:100%;justify-content:space-between;border:0;background:transparent;padding:0 0 12px;font-size:13px;font-weight:650}.vp-option-box .control-row{gap:8px}.vp-option-box input[type=range]{accent-color:#477842}.vp-option-box input[type=color]{width:28px;height:28px;border:1px solid #bdb9b2;border-radius:4px;background:white}.vp-option-note{color:#6c655d;font-size:11px;line-height:1.35}.vp-converter-action{text-align:center}.vp-action-content{padding:61px 23px 10px}.vp-action-content>.primary-button{width:100%;min-height:52px;border:0!important;border-radius:5px!important;background:linear-gradient(100deg,#477842,#386b39)!important;font-size:16px!important}.vp-action-content>p{margin:18px auto;color:#6d6660;font-size:13px;line-height:1.4}.vp-action-content .converter-items{max-height:150px!important;text-align:left}.vp-action-content .converter-flow-item{grid-template-columns:64px 1fr!important;min-height:62px!important}.vp-action-content .converter-preview{width:64px!important;height:54px!important}.vp-action-content .converter-summary{display:none}.converter-controlbar{min-height:54px;padding:9px 18px!important;border-top:1px solid #dedbd4!important;background:#fffefa!important}.converter-actions{justify-content:flex-end}.converter-actions .secondary-button{width:auto!important;padding:8px 12px!important;border-radius:4px!important;font-size:11px!important}.vp-converter-state-key{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 35px;border-bottom:1px solid #dedbd4}.vp-converter-state-key article{display:flex;align-items:center;gap:12px}.vp-converter-state-key b{display:grid;place-items:center;width:29px;height:29px;border:1px solid #b8d1ae;border-radius:50%;color:#4b7a43;font-size:19px}.vp-converter-state-key .is-alert{border-color:#e64332;color:#d63226}.vp-converter-state-key strong,.vp-converter-state-key small{display:block}.vp-converter-state-key strong{font-size:12px}.vp-converter-state-key small{margin-top:2px;color:#766f67;font-size:10px}.vp-converter-state-key>i{font-style:normal;font-size:23px;color:#817970}.vp-how-it-works{padding:12px 40px 18px;text-align:center}.vp-how-it-works h2{margin:0 0 11px;font-size:19px}.vp-how-it-works>div{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;text-align:left}.vp-how-it-works article{display:flex;gap:11px;align-items:flex-start}.vp-how-it-works article>b{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#eef5e9;color:#40733d;font-size:14px}.vp-how-it-works strong,.vp-how-it-works small{display:block}.vp-how-it-works strong{font-size:12px}.vp-how-it-works small{margin-top:3px;font-size:10px;line-height:1.35}.vp-how-it-works i{font-style:normal;font-size:26px;color:#786f67}.content-grid{margin:0 0 20px!important}.content-grid article{padding:14px!important}.content-grid h2{font-size:14px!important}.related-tools{margin:25px 0 36px!important}
.site-footer{min-height:74px;border-top-color:#dedbd4!important;color:#59524b!important}.footer-links{display:none!important}
.vp-persistent-card.is-empty #converter-app{display:none!important}
html[data-theme=dark]{filter:invert(.88) hue-rotate(180deg)}html[data-theme=dark] img,html[data-theme=dark] svg{filter:invert(1) hue-rotate(180deg)}
@media(max-width:780px){.page-shell{width:min(100% - 22px,1120px)}.site-header{height:auto;min-height:54px;flex-wrap:wrap;padding:7px 0}.main-nav{order:3;width:100%;overflow-x:auto}.main-nav>a,.vp-more-tools>summary{min-height:34px}.vp-more-tools>div{top:34px}.home-hero h1{font-size:37px!important}.vp-quick-grid{grid-template-columns:repeat(2,1fr)}.vp-trust-strip{grid-template-columns:1fr;padding:10px}.vp-trust-strip article{padding:9px;border:0}.converter-flow{grid-template-columns:1fr!important}.converter-pane+.converter-pane{border-top:1px solid #dedbd4!important;border-left:0!important}.vp-action-content{padding-top:22px}.vp-converter-state-key{display:grid;grid-template-columns:1fr 1fr;padding:18px}.vp-converter-state-key>i{display:none}.vp-how-it-works{padding:15px}.vp-how-it-works>div{grid-template-columns:1fr;gap:12px}.vp-how-it-works i{display:none}}
@media(max-width:480px){.brand{font-size:22px!important}.home-hero{padding-top:22px}.home-hero h1{font-size:31px!important}.vp-home-launcher{padding:13px}.vp-launch-tabs a{font-size:10px;padding:8px 2px}.vp-quick-grid{grid-template-columns:1fr}.vp-guide-links{grid-template-columns:1fr}.vp-guide-links a{border-bottom:1px solid #e6e2dc;border-right:0}.vp-quick-card{min-height:68px}.vp-converter-hero h1{font-size:30px!important}.converter-flow-item{grid-template-columns:100px 1fr!important}.converter-preview{width:100px!important;height:76px!important}}

/* Product finish: preserve the prototype hierarchy without the flat, poster-like treatment. */
html,body{background:linear-gradient(180deg,#fbfaf8 0,#f5f2ee 100%)}
.page-shell{padding:0 0 26px}.site-header{background:rgba(255,255,255,.76);backdrop-filter:blur(10px)}
.home-hero{padding:42px 0 24px}.home-hero h1{font-size:clamp(38px,3.65vw,52px)!important;line-height:1.01!important;letter-spacing:-.037em}.home-hero p{max-width:760px!important;color:#665f59!important;font-size:14px!important;line-height:1.55!important}
.vp-home-launcher,.converter-card{border-color:#e2ddd6!important;border-radius:14px!important;background:#fff!important;box-shadow:0 14px 36px rgba(59,43,28,.07)!important}.vp-home-launcher{padding:20px 24px 24px}.vp-home-launcher h2,.vp-quick-starts h2{font-size:21px}.vp-launch-tabs{border-color:#e4e0da;border-radius:9px;background:#faf9f7}.vp-launch-tabs a{padding:11px 8px;border-color:#e5e0d8;transition:background .18s ease,color .18s ease}.vp-launch-tabs a:hover,.vp-launch-tabs .is-active{background:#fff;color:#326837;box-shadow:inset 0 -3px #4a7d4d}.vp-home-dropzone{min-height:202px;border-color:#80a682;border-radius:10px;background:linear-gradient(135deg,#fafff9,#f2f7ef);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}.vp-home-dropzone:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(55,93,53,.12),inset 0 0 0 1px rgba(255,255,255,.8)}.vp-primary-cta{box-shadow:0 6px 14px rgba(48,101,50,.25);transition:transform .16s ease,box-shadow .16s ease}.vp-home-dropzone:hover .vp-primary-cta{transform:translateY(-1px);box-shadow:0 9px 18px rgba(48,101,50,.3)}
.vp-quick-grid{gap:16px}.vp-quick-card{border-color:#e7e2dc;border-radius:11px;background:rgba(255,255,255,.94);box-shadow:0 4px 12px rgba(50,36,23,.035);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.vp-quick-card:hover{transform:translateY(-3px);border-color:#a8c1a6;box-shadow:0 12px 24px rgba(50,36,23,.09)}.vp-quick-icon{width:40px;height:40px;border-radius:9px;background:#f5f9f2}.vp-quick-card strong{font-family:Inter,ui-sans-serif,sans-serif;font-size:13px;font-weight:750}.vp-quick-card small{color:#6c645c}.vp-trust-strip{margin-top:23px;border:1px solid #dfe8d9;box-shadow:0 6px 18px rgba(59,73,47,.04)}.vp-guide-links{margin-top:18px;background:#fff;border:1px solid #e6e1db;border-radius:11px;overflow:hidden;box-shadow:0 5px 15px rgba(50,36,23,.035)}.vp-home-faq{margin-top:18px;background:#fff;box-shadow:0 5px 15px rgba(50,36,23,.035)}
.vp-converter-hero{padding:18px 0 22px}.vp-converter-hero h1{font-size:clamp(32px,3vw,43px)!important}.converter-card{overflow:hidden!important}.vp-converter-dropzone{min-height:286px;margin:18px!important;border:2px dashed #82a583!important;border-radius:12px!important;background:linear-gradient(135deg,#fbfffa,#f0f6ed)!important;box-shadow:none!important}.vp-converter-dropzone .vp-primary-cta{margin-top:4px;background:linear-gradient(100deg,#49793f,#315f2f)!important;border:0!important}.converter-app{background:#fff}.converter-flow{min-height:380px!important}.converter-pane-head{background:#fcfbf9!important}.converter-flow-item{padding:7px 0!important}.converter-controlbar{background:#faf9f7!important}.vp-converter-state-key,.vp-how-it-works,.content-grid{background:#fff}.vp-converter-state-key{margin-top:18px;border:1px solid #e4e0da;border-radius:12px;box-shadow:0 5px 15px rgba(50,36,23,.035)}.vp-how-it-works{margin-top:18px;border:1px solid #e4e0da;border-radius:12px;box-shadow:0 5px 15px rgba(50,36,23,.035)}.content-grid{margin-top:18px!important;border:1px solid #e4e0da;border-radius:12px;overflow:hidden;box-shadow:0 5px 15px rgba(50,36,23,.035)}
.converter-app[hidden]{display:none!important}

/* A conventional elevated application surface instead of a stack of flat white strips. */
html,body{background:#f3f5f7}
.page-shell{width:min(1160px,calc(100% - 32px))}
.site-header{margin:12px 0 0;padding:0 18px;border:1px solid #e2e7ea;border-radius:14px;background:rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(25,40,48,.055)}
.home-hero{padding-top:50px}.home-hero h1,.vp-converter-hero h1{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:780;letter-spacing:-.05em}.home-hero h1{font-size:clamp(37px,3.35vw,50px)!important}.vp-converter-hero{padding:31px 0 24px}.vp-converter-hero h1{font-size:clamp(31px,2.75vw,42px)!important}.vp-converter-hero .eyebrow{box-shadow:inset 0 0 0 1px #d8e8d5}
.vp-home-launcher{border:0!important;box-shadow:0 18px 42px rgba(25,40,48,.10)!important}.vp-quick-card{border:0;box-shadow:0 8px 20px rgba(25,40,48,.07)}.vp-trust-strip{border:0;box-shadow:0 12px 28px rgba(46,73,47,.08)}
.converter-card{position:relative;border:0!important;border-radius:18px!important;background:linear-gradient(145deg,#ffffff,#f8fbfc)!important;box-shadow:0 22px 52px rgba(25,40,48,.13)!important}.converter-card:before{content:'Convert images locally';display:block;padding:13px 22px;border-bottom:1px solid #e4eaec;background:linear-gradient(90deg,#123f34,#205b48);color:#f4fbf6;font:700 12px Inter,ui-sans-serif,sans-serif;letter-spacing:.04em;text-transform:uppercase}.vp-converter-dropzone{min-height:230px;margin:18px!important;border:1px solid #bed3c2!important;border-radius:14px!important;background:radial-gradient(circle at 50% 45%,#ffffff 0,#f4faf4 45%,#e7f1e8 100%)!important;box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(34,82,48,.06)!important}.vp-converter-dropzone .vp-image-icon{width:60px;height:60px;background:#fff;box-shadow:0 8px 16px rgba(32,75,43,.16)}.vp-converter-dropzone strong{font-size:15px}.vp-converter-dropzone small{color:#6b7f70}.vp-converter-dropzone .vp-primary-cta{padding:11px 23px;border-radius:9px;font-size:13px;box-shadow:0 8px 16px rgba(33,93,48,.3)}
.vp-converter-state-key{gap:16px;padding:12px;border:0;background:#fff;box-shadow:0 12px 28px rgba(25,40,48,.07)}.vp-converter-state-key article{flex:1;padding:11px 13px;border-radius:10px;background:#f7faf8}.vp-converter-state-key article:nth-of-type(2){background:#f3f7fb}.vp-converter-state-key article:nth-of-type(3){background:#f1f8f1}.vp-converter-state-key article:nth-of-type(4){background:#fff6f4}.vp-converter-state-key>i{display:none}
.vp-how-it-works{padding:22px 28px;border:0;background:linear-gradient(125deg,#102e27,#1d5948);box-shadow:0 16px 34px rgba(13,48,39,.2)}.vp-how-it-works h2{color:#fff;font-family:Inter,ui-sans-serif,sans-serif;font-size:17px}.vp-how-it-works strong{color:#fff;font-family:Inter,ui-sans-serif,sans-serif}.vp-how-it-works small{color:#c6ddd4}.vp-how-it-works article>b{background:#dcefdc;color:#205e42}.vp-how-it-works i{color:#8ac29b}
.content-grid{border:0;background:#fff;box-shadow:0 12px 28px rgba(25,40,48,.07)}.content-grid article{background:#fff}.content-grid article:nth-child(2){background:#f9fbfc}.content-grid article:nth-child(3){background:#f5faf6}.content-grid h2{font-family:Inter,ui-sans-serif,sans-serif;font-weight:750}.site-footer{margin-top:28px;padding:0 18px;border:1px solid #e0e5e8;border-radius:12px;background:#fff}
@media(max-width:780px){.site-header{margin-top:8px;padding:7px 10px}.converter-card:before{border-radius:18px 18px 0 0}.vp-converter-dropzone{min-height:210px}.vp-converter-state-key article{min-width:0}.vp-converter-state-key{grid-template-columns:1fr 1fr}.vp-how-it-works{padding:20px}.page-shell{width:min(100% - 20px,1160px)}}

/* V2.2: normal application proportions and state-led conversion feedback. */
html,body{background:#f6f7f8}
.page-shell{width:min(1180px,calc(100% - 40px));padding-bottom:44px}
.site-header{height:68px;min-height:68px;margin-top:16px;border-radius:12px;box-shadow:0 10px 28px rgba(24,39,48,.07)}
.main-nav>a,.vp-more-tools>summary{min-height:68px;font-size:13px!important}
.home-hero{max-width:900px;padding:54px 0 30px}
.home-hero h1{font-size:clamp(40px,4vw,58px)!important;line-height:1.02!important}
.home-hero p{max-width:790px!important;font-size:16px!important;line-height:1.55!important}
.vp-home-launcher{padding:24px 28px 28px;border-radius:16px!important}
.vp-home-launcher h2,.vp-quick-starts h2{font-size:23px;letter-spacing:-.025em}
.vp-launch-tabs button{padding:13px 10px;border:0;border-right:1px solid #e5e0d8;background:transparent;color:inherit;font:600 13px Inter,ui-sans-serif,sans-serif;cursor:pointer}.vp-launch-tabs button:last-child{border-right:0}.vp-launch-tabs button:hover,.vp-launch-tabs button.is-active{background:#fff;color:#326837;box-shadow:inset 0 -3px #4a7d4d}.vp-home-launcher-status{min-height:18px;margin:12px 0 0;color:#5d6a60;text-align:center;font-size:12px}.vp-home-dropzone.is-dragging{border-color:#326837;background:#f0f8ee}
.vp-home-dropzone{min-height:250px;margin-top:20px;border-radius:12px;gap:10px}
.vp-image-icon{width:62px;height:62px;font-size:38px}
.vp-home-dropzone strong{font-size:16px}.vp-home-dropzone small{font-size:13px}
.vp-primary-cta{padding:12px 28px;border-radius:10px;font-size:13px}
.vp-quick-starts{margin-top:28px}.vp-quick-grid{gap:18px}
.vp-quick-card{min-height:112px;padding:16px;border-radius:12px;grid-template-columns:48px 1fr auto;gap:13px}
.vp-quick-icon{width:44px;height:44px;font-size:16px}.vp-quick-card strong{font-size:14px}.vp-quick-card small{font-size:11px;line-height:1.45}.vp-quick-card b{font-size:22px}
.vp-trust-strip{margin-top:28px;padding:19px 24px;border-radius:14px}.vp-trust-strip article{padding:5px 18px}.vp-trust-strip strong{font-size:16px}.vp-trust-strip span{font-size:11px;line-height:1.45}
.vp-guide-links{margin-top:22px}.vp-guide-links a{padding:17px 24px}.vp-home-faq{margin-top:22px}.vp-home-faq summary{padding:13px 18px;font-size:13px}.vp-home-faq p{font-size:12px}
.vp-converter-hero{padding:35px 0 28px}.vp-converter-hero h1{font-size:clamp(34px,3.25vw,47px)!important}.vp-converter-hero .vp-ready-status{font-size:16px!important}.vp-converter-hero>small{font-size:13px}
.converter-card{border-radius:16px!important;box-shadow:0 20px 46px rgba(24,39,48,.12)!important}.converter-card:before{padding:14px 24px;border-radius:16px 16px 0 0;font-size:12px}
.vp-converter-dropzone{min-height:300px;margin:22px!important;border-radius:14px!important}.vp-converter-dropzone .vp-image-icon{width:66px;height:66px}.vp-converter-dropzone strong{font-size:17px}.vp-converter-dropzone small{font-size:13px}.vp-converter-dropzone .vp-primary-cta{padding:12px 28px;font-size:14px}
.converter-flow{min-height:430px!important}.converter-pane-head{min-height:58px!important;height:58px!important;padding:13px 22px!important}.converter-pane-head h2{font-size:20px}.converter-items{padding:14px 20px!important}.converter-flow-item{min-height:112px!important;grid-template-columns:150px 1fr!important}.converter-preview{width:150px!important;height:100px!important}.converter-item-copy strong{font-size:14px!important}.converter-item-copy span{font-size:12px!important}.converter-item-copy small{font-size:11px!important}.vp-option-content{padding:24px}.converter-target-buttons button{min-height:48px;font-size:14px}.vp-option-box{margin-top:24px;padding:14px}.vp-action-content{padding:82px 28px 16px}.vp-action-content>.primary-button{min-height:58px;font-size:17px!important}.vp-action-content>p{font-size:14px}.converter-controlbar{padding:12px 22px!important}
.vp-converter-state-key{display:none!important}
.vp-converter-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;margin-top:22px;padding:16px 20px;border:1px solid #e1e7e4;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(24,39,48,.055)}
.vp-converter-progress ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none}.vp-converter-progress li{position:relative;display:flex;align-items:center;gap:10px;min-width:0;color:#7b858b}.vp-converter-progress li:not(:last-child):after{content:'';position:absolute;top:17px;left:42px;right:0;height:1px;background:#dbe2e5}.vp-converter-progress li b{position:relative;z-index:1;display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid #d5dcdf;border-radius:50%;background:#fff;font:700 12px Inter,ui-sans-serif,sans-serif}.vp-converter-progress li strong,.vp-converter-progress li small{display:block}.vp-converter-progress li strong{font:750 13px Inter,ui-sans-serif,sans-serif}.vp-converter-progress li small{margin-top:2px;font-size:11px;line-height:1.35}.vp-converter-progress li.is-active{color:#205e42}.vp-converter-progress li.is-active b{border-color:#2f724e;background:#2f724e;color:#fff;box-shadow:0 4px 10px rgba(47,114,78,.2)}.vp-converter-progress li.is-complete{color:#3b754e}.vp-converter-progress li.is-complete b{border-color:#b8d8c1;background:#eaf5ec;color:#2f724e}.vp-converter-progress p{margin:0;max-width:250px;color:#546269;font-size:12px;line-height:1.4}.vp-converter-progress p.is-error{color:#b42318}
.vp-how-it-works{margin-top:22px;padding:26px 32px;border-radius:14px}.vp-how-it-works h2{font-size:19px}.vp-how-it-works strong{font-size:13px}.vp-how-it-works small{font-size:11px}.content-grid{margin-top:22px!important;border-radius:14px}.content-grid article{padding:20px!important}.content-grid h2{font-size:15px!important}.content-grid p{font-size:12px!important;line-height:1.55!important}.seo-how,.seo-intent,.seo-faq,.seo-privacy{margin-top:42px;padding-top:28px}.seo-how h2,.seo-intent h2,.seo-faq h2,.seo-privacy h2{font-size:23px}.seo-how p,.seo-intent p,.seo-faq p,.seo-privacy p{font-size:14px;line-height:1.65}.related-tools{margin-top:38px!important}.tool-link-grid{gap:12px}.tool-link-grid a{min-height:72px;padding:15px;border-radius:10px}.site-footer{min-height:76px;margin-top:40px}
@media(max-width:780px){.page-shell{width:min(100% - 24px,1180px)}.site-header{height:auto;min-height:58px;margin-top:10px;flex-wrap:wrap;padding:10px 12px}.site-header>.brand{margin-right:auto}.header-actions{display:grid!important;width:100%!important;max-width:none!important;margin-left:0!important;grid-template-columns:minmax(0,1fr) 30px 32px;align-items:center;gap:8px;order:3}.main-nav{grid-column:1;grid-row:1;justify-content:flex-end;min-width:0}.main-nav>a{display:none}.vp-more-tools>summary{min-height:38px;padding:0 8px;font-size:12px!important}.language-control{grid-column:2;grid-row:1}.theme-toggle{grid-column:3;grid-row:1}.home-hero{padding:34px 0 22px}.home-hero h1{font-size:37px!important}.home-hero p{font-size:14px!important}.vp-home-launcher{padding:18px}.vp-home-dropzone{min-height:214px}.vp-quick-grid{gap:12px}.vp-quick-card{min-height:96px}.converter-flow-item{grid-template-columns:112px 1fr!important}.converter-preview{width:112px!important;height:78px!important}.vp-action-content{padding-top:34px}.vp-converter-progress{grid-template-columns:1fr;gap:14px}.vp-converter-progress p{max-width:none}.vp-how-it-works{padding:22px}.seo-how,.seo-intent,.seo-faq,.seo-privacy{margin-top:32px}}
@media(max-width:520px){.home-hero h1{font-size:32px!important}.vp-launch-tabs button{padding:10px 4px;font-size:11px}.vp-home-dropzone{min-height:190px}.vp-quick-grid{grid-template-columns:1fr}.vp-quick-card{min-height:88px}.vp-trust-strip{padding:10px}.vp-converter-hero{padding:26px 0 20px}.vp-converter-hero h1{font-size:32px!important}.vp-converter-dropzone{min-height:236px;margin:14px!important}.converter-flow-item{grid-template-columns:88px 1fr!important}.converter-preview{width:88px!important;height:64px!important}.vp-converter-progress ol{grid-template-columns:1fr;gap:10px}.vp-converter-progress li:not(:last-child):after{top:35px;bottom:-10px;left:16px;right:auto;width:1px;height:auto}.vp-converter-progress li small{display:none}.content-grid article{padding:17px!important}}

/* V2.3: one calm surface system across the home and core tools. */

/* Preserve the complete image in converter cards; fixed card sizes must not crop portrait photos. */
.converter-preview img{object-fit:contain!important}
.site-header{position:sticky;top:0;z-index:100}
.language-control:before{content:'🌐';font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif;font-size:17px}
.converter-card{background:#fff!important;border:1px solid #e1e7e3!important;box-shadow:0 14px 36px rgba(24,39,48,.08)!important}
.converter-card:before{display:none!important}
.vp-converter-dropzone{background:linear-gradient(135deg,#fcfffb 0%,#f0f7ef 100%)!important;border-color:#9abb9a!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important}
.vp-how-it-works{background:#fff!important;border:1px solid #e1e7e3!important;border-top:3px solid #7eaa80!important;box-shadow:0 8px 22px rgba(24,39,48,.055)!important}
.vp-how-it-works h2,.vp-how-it-works strong{color:#24332a!important}
.vp-how-it-works small{color:#65736b!important}
.vp-how-it-works article>b{background:#e8f3e6!important;color:#2f7042!important}
.vp-how-it-works i{color:#5f9666!important}

/* Homepage readability: one UI type scale, with no 10–12 px body copy. */
.vp-home .vp-home-launcher h2,.vp-home .vp-quick-starts h2,.vp-home .vp-trust-strip strong,.vp-home .vp-guide-links strong{font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;font-weight:750!important}
.vp-home .vp-launch-tabs button{font-size:14px}
.vp-home .vp-home-launcher-status{font-size:14px;line-height:1.45}
.vp-home .vp-quick-card strong{font-size:15px}
.vp-home .vp-quick-card small{font-size:13px;line-height:1.5}
.vp-home .vp-trust-strip span{font-size:13px;line-height:1.5}
.vp-home .vp-guide-links small{font-size:13px;line-height:1.45}
.vp-home .vp-home-faq p{font-size:13px;line-height:1.55}

/* V2.4: core tools inherit the approved Home surface instead of each inventing a page shell. */
body[data-tool]{color:#24302a}
body[data-tool] .breadcrumbs{margin-top:22px;font-size:13px}
body[data-tool] .tool-hero.compact-hero{max-width:900px;margin:0 auto;padding:38px 0 26px;text-align:center}
body[data-tool] .tool-hero .eyebrow{display:inline-block;margin-bottom:11px;padding:6px 14px;border:1px solid #d9e9d6;border-radius:999px;background:#f1f7ee;color:#3d7041;font:700 13px Inter,ui-sans-serif,system-ui,sans-serif}
body[data-tool] .tool-hero h1{margin:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;font-size:clamp(34px,3.25vw,46px)!important;font-weight:780!important;line-height:1.08!important;letter-spacing:-.045em}
body[data-tool] .tool-hero p{max-width:760px;margin:12px auto 0;color:#5b6862;font-size:16px!important;line-height:1.55!important}
body[data-tool] .format-line{margin-top:10px;color:#65756b;font-size:13px!important;line-height:1.5}

body[data-tool] .tool-card{overflow:hidden;border:1px solid #e1e7e3!important;border-radius:16px!important;background:#fff!important;box-shadow:0 16px 40px rgba(24,39,48,.09)!important}
body[data-tool] .dropzone{min-height:286px;margin:22px!important;border:2px dashed #9abb9a!important;border-radius:14px!important;background:linear-gradient(135deg,#fcfffb 0%,#f0f7ef 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
body[data-tool] .dropzone:hover,body[data-tool] .dropzone:focus-visible{border-color:#427d47!important;box-shadow:0 9px 20px rgba(39,91,49,.11),inset 0 1px 0 rgba(255,255,255,.9)!important;outline:0;transform:translateY(-1px)}
body[data-tool] .dropzone .drop-icon{display:grid;place-items:center;width:62px;height:62px;margin-bottom:5px;border:2px solid #477c49;border-radius:12px;background:#fff;color:#356f3a;font-size:36px;line-height:1;box-shadow:0 7px 16px rgba(45,101,52,.12)}
body[data-tool] .dropzone strong{font:750 17px Inter,ui-sans-serif,system-ui,sans-serif!important;color:#1e2b24}
body[data-tool] .dropzone span,body[data-tool] .dropzone .vp-upload-hint{color:#4f6557;font-size:14px!important;line-height:1.5}
body[data-tool] .dropzone small{max-width:680px;color:#697a70;font-size:13px!important;line-height:1.5}

body[data-tool] .content-grid{margin-top:22px!important;border:1px solid #e1e7e3!important;border-radius:14px!important;background:#fff!important;box-shadow:0 8px 22px rgba(24,39,48,.055)!important}
body[data-tool] .content-grid article{padding:20px!important;background:#fff!important}
body[data-tool] .content-grid article+article{border-left:1px solid #e7ece8}
body[data-tool] .content-grid h2{font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;font-size:15px!important;font-weight:750!important}
body[data-tool] .content-grid p{color:#617067!important;font-size:13px!important;line-height:1.55!important}
body[data-tool] .related-tools{margin-top:34px!important}
body[data-tool] .tool-link-grid a{border-color:#e1e7e3!important;border-radius:11px!important;background:#fff!important;box-shadow:0 5px 13px rgba(24,39,48,.04)}

/* Working state: keep the same elevated canvas and readable control density after an upload. */
body[data-tool] :is(.viewer-app,.merge-app,.editor-app,.compressor-app,.metadata-app,.splitter-app,.collage-app){margin:22px;border:1px solid #e1e7e3;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 8px 22px rgba(24,39,48,.055)}
body[data-tool] :is(.panel-heading,.viewer-toolbar,.editor-preview-head,.compressor-head,.metadata-preview-actions,.splitter-preview-head,.splitter-controls-head,.collage-panel-head,.preview-heading){background:#fafcf9!important;border-color:#e1e7e3!important}
body[data-tool] :is(.merge-controls,.editor-controls,.compressor-side,.metadata-details,.splitter-controls,.collage-controls){background:#fbfcfb!important;border-color:#e1e7e3!important}
body[data-tool] :is(.merge-controls,.editor-controls,.compressor-side,.metadata-details,.splitter-controls,.collage-controls) label,body[data-tool] :is(.merge-controls,.editor-controls,.compressor-side,.metadata-details,.splitter-controls,.collage-controls) small{font-size:13px!important;line-height:1.5}
body[data-tool] .primary-button{border-radius:10px!important;background:linear-gradient(100deg,#49793f,#315f2f)!important;box-shadow:0 7px 15px rgba(48,101,50,.23)}
body[data-tool] .secondary-button,body[data-tool] .text-button{border-radius:8px!important}
body[data-tool] .tool-card small,body[data-tool] .tool-card .reorder-hint,body[data-tool] .tool-card .collage-source-note,body[data-tool] .tool-card .splitter-note{font-size:13px!important;line-height:1.5!important}

/* The active navigation item follows the actual tool route, not a converter-only default. */
body[data-tool] .main-nav>a{color:#1c1714!important;box-shadow:none!important}
body[data-tool="viewer"] .main-nav>a[href*="image-viewer"],
body[data-tool="merge"] .main-nav>a[href*="merge-images"],
body[data-tool="editor"] .main-nav>a[href*="resize-image"],
body[data-tool="compressor"] .main-nav>a[href*="compress-image"],
body[data-tool="metadata"] .main-nav>a[href*="image-metadata-viewer"],
body[data-tool="splitter"] .main-nav>a[href*="image-splitter"],
body[data-tool="collage"] .main-nav>a[href*="collage-maker-online"]{color:var(--vp-green)!important;box-shadow:inset 0 -3px var(--vp-green)!important}
body[data-tool="metadata"] .vp-more-tools>summary,
body[data-tool="compressor"] .vp-more-tools>summary,
body[data-tool="splitter"] .vp-more-tools>summary,
body[data-tool="collage"] .vp-more-tools>summary{color:var(--vp-green)!important;box-shadow:inset 0 -3px var(--vp-green)}

/* One recognisable upload mark, including the Home launcher and Merge's two-image starter. */
.vp-home-dropzone .vp-image-icon,body[data-tool] .dropzone .drop-icon,body[data-tool="converter"] .vp-converter-dropzone .vp-image-icon,body[data-tool] .merge-slot-plus{display:grid;place-items:center;border:2px solid #477c49!important;border-radius:12px!important;background:#fff!important;color:#356f3a!important;font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;font-size:34px!important;font-weight:500!important;line-height:1!important;box-shadow:0 7px 16px rgba(45,101,52,.12)!important}
.vp-home-dropzone .vp-image-icon,body[data-tool="converter"] .vp-converter-dropzone .vp-image-icon{width:62px;height:62px;font-size:0!important}
.vp-home-dropzone .vp-image-icon:before,body[data-tool="converter"] .vp-converter-dropzone .vp-image-icon:before{content:'＋';font-size:34px;line-height:1}
body[data-tool] .merge-slot-plus{width:48px;height:48px;margin:8px auto 10px;font-size:28px!important}

@media(max-width:780px){
  body[data-tool] .tool-hero.compact-hero{padding:30px 0 20px}
  body[data-tool] .tool-hero h1{font-size:34px!important}
  body[data-tool] .tool-hero p{font-size:14px!important}
  body[data-tool] .dropzone{min-height:228px;margin:14px!important}
  body[data-tool] .dropzone .drop-icon{width:54px;height:54px;font-size:31px}
  body[data-tool] .content-grid article+article{border-top:1px solid #e7ece8;border-left:0}
  body[data-tool] :is(.viewer-app,.merge-app,.editor-app,.compressor-app,.metadata-app,.splitter-app,.collage-app){margin:14px}
}

/* Collage keeps image intake in the left queue and reserves the centre for the output preview. */
body[data-tool="collage"] .collage-add-slot{display:grid;place-items:center;gap:5px;min-height:78px;width:100%;border:1.5px dashed #86aa88;border-radius:9px;background:#f7fbf6;color:#356f3a;font:750 12px Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer}
body[data-tool="collage"] .collage-add-slot:hover,body[data-tool="collage"] .collage-add-slot:focus-visible{border-color:#477c49;background:#f1f8ef;outline:0}
body[data-tool="collage"] .collage-add-slot b{display:grid;place-items:center;width:28px;height:28px;border:1.5px solid #477c49;border-radius:8px;background:#fff;font-size:21px;font-weight:500;line-height:1}

/* One brand mark across Home and every generated tool header.  Some legacy
   builders still emit the old "VP" text mark; this shared layer deliberately
   renders the same framed-image symbol used by the Home header for both forms. */
.brand-mark{display:block!important;flex:0 0 31px!important;width:31px!important;height:28px!important;border:0!important;border-radius:0!important;background-color:transparent!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28' fill='none'%3E%3Crect x='1' y='1' width='30' height='26' rx='2' stroke='%2317120f' stroke-width='2'/%3E%3Ccircle cx='22' cy='8' r='2.5' fill='%2317120f'/%3E%3Cpath d='m4 23 8-8 5 5 4-4 7 7' stroke='%2317120f' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:center!important;background-size:29px 26px!important;color:transparent!important;font-size:0!important;line-height:0!important}
.brand-mark svg{display:none!important}

/* Shared interaction baseline: make the current locale visible and every
   header action comfortable to tap without changing the existing layout. */
body:not([data-tool]) .main-nav>a[href*="image-converter"]{color:#1c1714!important;box-shadow:none!important}
.language-control{width:44px!important;height:44px!important}.language-control:before{content:attr(data-language-code)!important;font:700 12px Inter,ui-sans-serif,sans-serif!important;letter-spacing:.04em}.theme-toggle{width:44px!important;height:44px!important}
@media(max-width:780px){.header-actions{grid-template-columns:minmax(0,1fr) 44px 44px!important}}

/* The theme state is written to <html>; these shared surfaces must visibly react. */
html[data-theme="dark"],html[data-theme="dark"] body{background:#17211b!important;color:#edf4ed!important}
html[data-theme="dark"] .site-header,html[data-theme="dark"] .vp-home-launcher,html[data-theme="dark"] .vp-quick-card,html[data-theme="dark"] .tool-card,html[data-theme="dark"] .content-grid,html[data-theme="dark"] .site-footer,html[data-theme="dark"] body[data-tool] :is(.viewer-app,.merge-app,.editor-app,.compressor-app,.metadata-app,.splitter-app,.collage-app){background:#223029!important;border-color:#405346!important;color:#edf4ed!important}
html[data-theme="dark"] :is(h1,h2,h3,strong,label,summary,.brand,.main-nav>a,.vp-more-tools>summary){color:#f5fbf5!important}
html[data-theme="dark"] :is(p,small,span,.format-line,.vp-home-launcher-status){color:#c4d0c6!important}
html[data-theme="dark"] :is(input,select,textarea,.secondary-button){background:#17211b!important;color:#edf4ed!important;border-color:#52655a!important}
html[data-theme="dark"] .vp-home-dropzone,html[data-theme="dark"] body[data-tool] .dropzone{background:#1c2a22!important;border-color:#6f9974!important}
html[data-theme="dark"] .vp-trust-strip,html[data-theme="dark"] .vp-home-faq{background:#1d2b23!important;border-color:#405346!important}