/* Poppins (self-hosted, latin + latin-ext; no third-party requests) */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#faf9f7; --card:#fff; --ink:#23212b; --muted:#7a7686;
  --brand:#e6282c; --brand2:#ff6b9d; --accent:#22c58b; --leaf:#4bb439;
  --line:#e9e5de; --radius:16px;
  --shadow:0 6px 24px rgba(60,40,120,.08);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-y:scroll;scrollbar-gutter:stable}
body{margin:0;font-family:'Poppins',ui-rounded,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;border:0;background:none;cursor:pointer;padding:4px}
.logo img{height:34px;display:block}
.mainnav{display:flex;gap:8px;margin-left:auto}
.navbtn{border:1px solid var(--line);background:#fff;padding:10px 14px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.navbtn:hover{background:var(--brand);border-color:var(--leaf);color:#fff;box-shadow:0 0 0 2px var(--leaf)}
.navbtn svg{width:16px;height:16px;vertical-align:-3px;margin-right:2px}
.btn svg{width:17px;height:17px;vertical-align:-3px;margin-right:3px}
.navbtn.active{background:var(--brand);border-color:var(--brand);color:#fff}
.hamb{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:20px;padding:6px 10px}
main{max-width:1100px;margin:0 auto;padding:20px 16px 60px}
.page{display:none}.page.active{display:block}
h1{font-size:clamp(32px,5vw,56px);line-height:1.02;margin:.2em 0;letter-spacing:-.02em;font-weight:700;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.8) 50%,transparent 60%),linear-gradient(90deg,#22c55b 0%,#e6282c 42%);background-size:280% 100%,100% 100%;background-position:0 0,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gradfade 1.1s ease both,shine 5.5s ease-in-out 1.2s infinite}
@keyframes shine{0%{background-position:125% 0,0 0}45%{background-position:0 0,0 0}100%{background-position:0 0,0 0}}
h2{font-size:30px;margin:.4em 0;font-weight:600}
@keyframes gradfade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){h1{animation:none}}
.sub{color:var(--muted);font-size:17px;max-width:60ch}
.btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 18px;font-weight:800;font-size:15px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn.big{font-size:18px;padding:15px 26px;border-radius:16px}
.btn.small{padding:8px 12px;font-size:13px;border-radius:10px}
.btn.ghost{background:#fff}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 2px var(--leaf),var(--shadow);border-color:var(--leaf)}
.btn.primary:hover{background:#ca2327;border-color:var(--leaf)}
.btn:active{transform:translateY(1px)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.cta-row>.btn{flex:1 1 0;min-width:0}
.cta-pair{display:flex;gap:10px;flex:2 1 0;min-width:280px}
.cta-pair .btn{flex:1 1 0;min-width:0}
.cta-row .btn:hover{background:var(--brand);border-color:var(--leaf);color:#fff}
@media(max-width:640px){
  .cta-row>.btn,.cta-pair{flex:1 1 100%}
}
.privacy{font-size:13px;color:var(--muted)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:var(--shadow)}
.before-after{display:flex;align-items:center;gap:14px;justify-content:center}
.before-after figure{margin:0;text-align:center}
.before-after canvas{width:min(38vw,220px);height:min(38vw,220px);border-radius:14px;border:1px solid var(--line);image-rendering:pixelated;background:#fff}
.before-after figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.arrow{font-size:30px}
.hero-demo{text-align:center}
.hero-demo canvas#heroAnim{width:min(64vw,260px);height:min(64vw,260px);border-radius:16px;border:1px solid var(--line);image-rendering:pixelated}
.hero-name{font-weight:800;margin:10px 0 6px;font-size:16px}
.hero-dots{display:flex;gap:6px;justify-content:center;margin:0 0 10px}
.hero-dots span{width:8px;height:8px;border-radius:50%;background:#ddd6cb}
.hero-dots span.on{background:var(--brand);transform:scale(1.25)}
.hero-demo .btn{margin-bottom:4px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;font-size:14px}
.step .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#fbe7e7;color:var(--brand);font-weight:800;margin-right:6px}
/* convert */
#dropzone{border:2.5px dashed #cfc6f5;background:#fff;border-radius:20px;padding:40px 20px;text-align:center;cursor:pointer;max-width:640px;margin:18px auto}
#dropzone.over{background:#f2eeff;border-color:var(--brand)}
.dz-art{font-size:52px;color:var(--brand)}
.dz-art svg{width:64px;height:64px}
.muted{color:var(--muted)} .small{font-size:12.5px}
.previews{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.preview-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px}
.preview-card figcaption{font-weight:800;margin-bottom:8px}
.pv{display:grid;place-items:center;height:clamp(300px,52vh,500px);border-radius:12px;background:#f4f2ee;overflow:hidden;padding:10px;position:relative;touch-action:pan-y;cursor:grab}
.pv.grabbing{cursor:grabbing}
.pv img,.pv canvas{max-width:none;max-height:none;border-radius:8px;transform-origin:center center}
.pv canvas#pixelPreview{image-rendering:pixelated}
.zoombar{display:flex;gap:8px;justify-content:center;align-items:center;margin:2px 0 12px}
.zoombar .tool{min-width:52px;text-align:center}
.checker{background:conic-gradient(#e5e5e5 25%,#fff 0 50%,#e5e5e5 0 75%,#fff 0)!important;background-size:22px 22px!important}
.controls{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:14px}
.ctl-group label,.ctl-row{font-weight:800}
.tip{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#eee;font-size:12px;color:var(--muted)}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.seg button{border:1px solid var(--line);background:#fafafa;border-radius:10px;padding:9px 13px;font-weight:800;cursor:pointer;min-height:40px}
.seg button.on{background:#dbd7cc;color:var(--ink);border-color:#b9b3a4}
input[type=range]{accent-color:var(--brand);min-height:32px}
.ctl-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.switch{display:flex;gap:8px;align-items:center;font-weight:700;background:#faf9f6;border:1px solid var(--line);padding:9px 12px;border-radius:12px;cursor:pointer}
#moreOpts{gap:18px;background:#faf9f6;border:1px dashed var(--line);padding:12px;border-radius:12px}
.work-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0;flex-wrap:wrap;min-height:46px}
.projname{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:700;color:var(--muted)}
.projname input{width:170px;padding:7px 10px;border-radius:9px;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink);background:#fff}
.dl-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:12px}
/* editor */
.ed{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;display:grid;gap:10px}
.ed-midbar{display:grid;gap:8px}
.ed-midbar:empty{display:none}
.ed-toolbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tool{border:1px solid var(--line);background:#fafafa;border-radius:10px;padding:9px 11px;font-size:15px;cursor:pointer;min-width:44px;min-height:40px;transition:border-color .15s ease,background .15s ease}
.tool:not(.on):hover{border-color:var(--leaf);background:#fff;box-shadow:0 0 0 2px var(--leaf)}
.tool:has(img){width:46px;height:46px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.tool.on{background:#dbd7cc;color:var(--ink);border-color:#b9b3a4}
.tool svg{width:32px;height:32px;display:block;pointer-events:none}
.tool img{width:32px;height:32px;display:block;pointer-events:none;image-rendering:pixelated}
.pix-tip{position:fixed;z-index:100;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:9px;pointer-events:none;box-shadow:var(--shadow);white-space:nowrap}
.ed-main{display:grid;grid-template-columns:200px 1fr 190px;gap:10px}
.ed>*,.ed-main>*{min-width:0;min-height:0}
.ed-panel{background:#faf9f6;border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:8px;align-content:start;font-size:13px}
.ed-panel h4{margin:0;font-size:13px}
.ed-panel.right{display:flex;flex-direction:column}
.ed-panel.right .layerlist{flex:0 1 auto;min-height:0}
.ed-panel.right .addl{margin-top:auto}
.switch input:disabled{opacity:.35;cursor:not-allowed}
.palrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.palbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:30px}
.psw{width:28px;height:28px;border-radius:8px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;position:relative;display:inline-block}
.psw.sel{box-shadow:0 0 0 2px var(--brand)}
.psw input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0;border:0}
.btn.small.on{background:#dbd7cc}
.curcolor{display:block;width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:2px;margin:0;background:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}
.curcolor::-webkit-color-swatch-wrapper{padding:2px}
.curcolor::-webkit-color-swatch{border:none;border-radius:7px}
.curcolor::-moz-color-swatch{border:none;border-radius:7px}
.palette{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.sw{flex:0 0 auto;width:calc((100% - 5*6px)/6);aspect-ratio:1;border-radius:8px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0;transition:transform .12s ease}
.sw:hover{transform:scale(1.18)}
.sw.on{box-shadow:0 0 0 2px var(--brand)}
.canvasbox{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:conic-gradient(#e8e8e8 25%,#fff 0 50%,#e8e8e8 0 75%,#fff 0);background-size:22px 22px;min-height:320px;touch-action:none}
.canvasbox canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;touch-action:none}
.zoomrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.layerlist{max-height:178px;overflow-y:auto;display:grid;gap:6px;align-content:start;scrollbar-width:thin;padding-right:2px}
.layer{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:4px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:4px 6px}
.layer.active{outline:2px solid var(--brand)}
.layer input[type=text]{min-width:0;width:100%;border:0;background:transparent;font-weight:700;font-size:13px;padding:4px 2px}
.iconbtn{border:0;background:none;cursor:pointer;padding:2px;border-radius:7px;min-width:24px;min-height:26px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.iconbtn:hover{background:#f1ede6}
.iconbtn.on{background:#dbd7cc}
.iconbtn svg{width:15px;height:15px;display:block}
.lmenu{position:fixed;z-index:80;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:10px;display:grid;gap:6px;min-width:200px;max-width:240px}
.lmenu button{border:0;background:#f1ede6;border-radius:8px;cursor:pointer;padding:8px 10px;font-size:13px;font-weight:700;color:var(--ink);text-align:left}
.lmenu button:hover{background:#e7e2d6}
.lmenu button.on{background:#dbd7cc}
.lmenu button.danger{color:#b3261e}
.lmenu .lm-row{display:grid;gap:4px;font-size:12.5px;font-weight:700;color:var(--ink)}
.lmenu .lm-row input[type=range]{width:100%}
.lmenu .lm-row select{border:1px solid var(--line);border-radius:8px;padding:7px;background:#fff;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer}
/* new */
.size-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px}
.sizecard{border:1px solid var(--line);background:#fff;border-radius:16px;padding:22px;font-size:19px;font-weight:800;cursor:pointer;display:grid;gap:4px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.sizecard:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--leaf),var(--shadow)}
.sizecard small{font-weight:600;color:var(--muted)}
.sizecard:hover{border-color:var(--leaf)}
.crow{display:flex;gap:6px;align-items:center;justify-content:center}
.crow input{width:64px;padding:8px;border-radius:8px;border:1px solid var(--line)}
.sizecustom{display:inline-flex;gap:4px;align-items:center;margin-left:6px}
.sizecustom input{width:52px;padding:6px 4px;border-radius:8px;border:1px solid var(--line);font-size:13px}
/* animate */
.timeline{display:flex;gap:8px;overflow-x:auto;padding:10px;background:#faf9f6;border:1px solid var(--line);border-radius:12px;user-select:none;-webkit-user-select:none}
.frame{display:flex;align-items:center;gap:4px;flex:0 0 auto;width:156px;position:relative;min-width:78px;border:2px solid var(--line);border-radius:10px;background:#fff;padding:4px;cursor:pointer;text-align:center;transition:border-color .15s ease,box-shadow .15s ease}
.fmove{flex:0 0 auto;width:30px;height:44px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:12px;line-height:1;padding:0}
.fmove:disabled{opacity:.3;cursor:default}
.fmove:not(:disabled):hover{border-color:var(--brand)}
.fsel{flex:0 0 auto;width:76px;border:0;background:none;padding:2px;cursor:pointer}
.frame canvas{object-fit:contain}
.frame:hover{border-color:var(--leaf);box-shadow:0 0 0 2px var(--leaf)}
.frame.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--leaf)}
.frame canvas{width:72px;height:72px;image-rendering:pixelated;background:conic-gradient(#e5e5e5 25%,#fff 0 50%,#e5e5e5 0 75%,#fff 0);background-size:12px 12px;border-radius:6px}
.animctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.timeline.film{flex-direction:row;align-items:center;overflow-x:auto;min-height:106px}
.frame .num{position:absolute;top:2px;left:4px;z-index:1;font-size:11px;font-weight:800;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;padding:0 5px}
.tool.on,.seg button.on,.navbtn.active,#aOnion.on{box-shadow:0 0 0 2px var(--leaf)}
#aOnion.on{background:#fff;color:var(--ink);border-color:var(--leaf)}
footer{text-align:center;color:var(--muted);font-size:13px;padding:30px 10px}
@media(max-width:860px){
  .hero{grid-template-columns:1fr}
  .previews{grid-template-columns:1fr}
  .ed-main{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .mainnav{display:none;position:absolute;top:60px;right:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;flex-direction:column;box-shadow:var(--shadow)}
  .mainnav.open{display:flex}
  .hamb{display:block}
}
/* ===== PixiMelon site layer (SEO/i18n pages only — no existing rule touched) ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:200;font-weight:800}
.skip:focus{left:0}
:focus-visible{outline:3px solid #1a5fd7;outline-offset:2px}
a.navbtn{color:inherit;text-decoration:none;display:inline-flex;align-items:center;font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.hero-h1{font-size:clamp(32px,5vw,56px);line-height:1.02;margin:.2em 0;letter-spacing:-.02em;font-weight:800}
.footnav{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.footnav a{color:var(--muted);font-weight:700;text-decoration:none}
.footnav a:hover{color:var(--brand);text-decoration:underline}
/* language selector (dropdown disclosure, no JS needed) */
.langsel{position:relative}
.langsel summary{list-style:none;border:1px solid var(--line);background:#fff;padding:10px 14px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.langsel summary::-webkit-details-marker{display:none}
.langsel summary::marker{content:""}
.langsel summary:hover{border-color:var(--leaf)}
.langsel summary svg{width:16px;height:16px}
.langsel ul{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px;margin:0;list-style:none;min-width:150px;box-shadow:var(--shadow);z-index:30}
.langsel li a{display:block;padding:9px 12px;border-radius:9px;color:#000;text-decoration:none;font-size:14px;font-weight:600}
.langsel li a:visited{color:#000;}
.langsel li a:hover{background:#f1ede6}
.langsel li a[aria-current="true"]{color:var(--brand);font-weight:800}
/* breadcrumbs */
.crumbs{font-size:13px;color:var(--muted);margin:6px 0 12px}
.crumbs a{color:var(--muted);font-weight:700;text-decoration:none}
.crumbs a:hover{color:var(--brand);text-decoration:underline}
/* SEO content blocks */
.seo-content{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;margin:18px 0;box-shadow:var(--shadow)}
.seo-content h2{font-size:24px;margin:1.2em 0 .5em}
.seo-content h2:first-child{margin-top:0}
.seo-content h3{font-size:18px;margin:1.1em 0 .4em}
.seo-content p,.seo-content li{font-size:15.5px;line-height:1.65}
.seo-content ul,.seo-content ol{padding-left:22px}
.toolcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:16px 0}
.toolcard{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.toolcard:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--leaf),var(--shadow);border-color:var(--leaf)}
.toolcard b{font-size:17px;display:block;margin-bottom:6px}
.toolcard span{font-size:14px;color:var(--muted)}
.faq details{background:#faf9f6;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0}
.faq summary{font-weight:800;cursor:pointer;min-height:32px}
/* ad slots (reserved space, no CLS; ad network code goes inside later) */
.ad-slot{display:flex;align-items:center;justify-content:center;min-height:100px;background:#f4f2ee;border:1px dashed var(--line);border-radius:14px;margin:18px 0;color:var(--muted);font-size:12.5px;font-weight:700}
.ad-slot[data-size="leaderboard"]{min-height:110px}
@media(min-width:860px){.ad-slot[data-size="leaderboard"]{min-height:120px}}
/* links in brand red (nav pills, cards, language menu and skip link excluded) */
.seo-content a,.crumbs a,.footnav a{color:var(--brand);}
.seo-content a:visited,.crumbs a:visited,.footnav a:visited{color:var(--brand);}
.seo-content a:hover,.crumbs a:hover,.footnav a:hover{color:#ca2327;}
.toolcard b,.toolcard:visited b{color:var(--brand);}
a.navbtn:visited{color:inherit;}
a.navbtn:hover,a.navbtn:active,a.navbtn.active{color:#fff}
.seg button:hover,.seg button:active,.seg button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ctabox{background:#faf9f6;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:15.5px;margin:16px 0}
.guide-figure{margin:16px 0;text-align:center}
.guide-figure img{max-width:100%;height:auto;image-rendering:pixelated;border-radius:12px;border:1px solid var(--line);background:#fff}
.guide-figure figcaption{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5}
.vta-dropzone{border:2.5px dashed #cfc6f5;background:#fff;border-radius:20px;padding:40px 20px;text-align:center;cursor:pointer;max-width:640px;margin:18px auto}
.vta-dropzone.over{background:#f2eeff;border-color:var(--brand)}
.vta-stage{display:grid;place-items:center;border-radius:12px;background:#f4f2ee;border:1px solid var(--line);overflow:hidden;padding:12px;min-height:200px}
.vta-stage canvas{max-width:100%;height:auto;image-rendering:pixelated;border-radius:8px;background:conic-gradient(#e5e5e5 25%,#fff 0 50%,#e5e5e5 0 75%,#fff 0);background-size:22px 22px}
.vta-progress{display:grid;gap:8px;margin:12px 0}
.vta-progressbar{height:12px;border-radius:999px;background:#eee7dc;overflow:hidden}
#videoProgFill{height:100%;width:0;background:var(--brand);transition:width .15s}
.vta-pv canvas{position:absolute;left:50%;top:50%;image-rendering:pixelated;max-width:none;max-height:none}