/* Source: css/style.css */
:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#182236;background:#f4f6fb;font-size:calc(17px * var(--mobile-font-scale, 1));font-synthesis:none;--blue:#235bea;--line:#dbe1ed}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{-webkit-appearance:none;appearance:none;line-height:1.4;letter-spacing:normal;text-transform:none;min-height:44px;border:1px solid #ccd4e4;border-radius:9px;padding:10px 17px;background:white;color:#25324b;font-weight:600;cursor:pointer;transition:background .15s,box-shadow .15s}button:hover:not(:disabled){background:#edf2fe;box-shadow:0 2px 5px #23345810}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #719bff;outline-offset:4px}header{display:flex;align-items:center;justify-content:space-between;padding:22px max(24px,calc((100% - 1180px)/2));background:#235bea;color:white;gap:20px}.brand{font-size:calc(20px * var(--mobile-font-scale, 1));font-weight:700;text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;background:#fff;border:1px solid #fff;width:36px;height:36px;border-radius:7px;font-size:calc(26px * var(--mobile-font-scale, 1));font-weight:400}.privacy{font-size:calc(15px * var(--mobile-font-scale, 1));color:#fff}main{max-width:1228px;margin:auto;padding:52px 24px}.intro{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:30px}.eyebrow{font-size:calc(14px * var(--mobile-font-scale, 1));font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);margin:0 0 12px}.intro-title{font-size:calc(clamp(30px,4vw,42px) * var(--mobile-font-scale, 1));letter-spacing:-.04em;margin:0 0 12px;line-height:1.1}p{line-height:1.6;margin:8px 0;color:#5d6980}.primary{background:var(--blue);color:#fff;border-color:var(--blue);white-space:nowrap;box-shadow:0 4px 12px #235bea25}.primary:hover:not(:disabled){background:#164bcc}.primary span{margin-left:16px}.dropzone{display:flex;align-items:center;gap:22px;padding:32px;border:3px dashed #a9bfeb;border-radius:14px;background:#edf3ff}.dropzone.drag{background:#dbe8ff;border-color:var(--blue)}.upload-icon{display:grid;place-items:center;width:54px;height:54px;flex:0 0 54px;border-radius:13px;background:white;color:var(--blue);font-size:calc(32px * var(--mobile-font-scale, 1))}.dropzone div{flex:1}.dropzone h2{font-size:calc(19px * var(--mobile-font-scale, 1));margin:0 0 6px}.dropzone p{font-size:calc(17px * var(--mobile-font-scale, 1));margin:3px 0}.dropzone .small{font-size:calc(15px * var(--mobile-font-scale, 1));color:#697998}.workspace{margin-top:26px;background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden}.toolbar{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.toolbar h2{font-size:calc(18px * var(--mobile-font-scale, 1));margin:0;white-space:nowrap}.toolbar h2 span{display:inline-block;background:#edf1f8;border-radius:6px;padding:3px 9px;font-size:calc(14px * var(--mobile-font-scale, 1));margin-left:8px}.actions{display:flex;gap:8px}.quiet{font-size:calc(15px * var(--mobile-font-scale, 1));border-color:transparent;padding:8px 12px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;padding:22px}.grid:empty{display:none}.card{border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative;min-width:0}.preview{height:132px;display:flex;align-items:center;justify-content:center;background-color:#f7f9fd;background-image:linear-gradient(45deg,#e9edf5 25%,transparent 25%),linear-gradient(-45deg,#e9edf5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9edf5 75%),linear-gradient(-45deg,transparent 75%,#e9edf5 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.preview img{display:block;max-width:100px;max-height:85px;width:auto;height:auto}.dark-previews .preview{background-color:#20293a;background-image:linear-gradient(45deg,#29344a 25%,transparent 25%),linear-gradient(-45deg,#29344a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#29344a 75%),linear-gradient(-45deg,transparent 75%,#29344a 75%)}.card-body{padding:12px}.card h3{font-size:calc(15px * var(--mobile-font-scale, 1));overflow-wrap:anywhere;margin:0 0 6px}.meta{font-size:calc(14px * var(--mobile-font-scale, 1));color:#6f7b91}.card .remove{position:absolute;right:5px;top:5px;width:34px;min-height:34px;border-radius:7px;padding:0;font-size:calc(19px * var(--mobile-font-scale, 1));background:#ffffffed;border-color:#dde3ed}.copy{font-size:calc(14px * var(--mobile-font-scale, 1));width:100%;padding:6px;margin-top:10px;min-height:36px;font-weight:500}.empty{text-align:center;padding:64px 24px}.empty>span{font-size:calc(45px * var(--mobile-font-scale, 1));color:#bdc9df}.empty h3{font-size:calc(21px * var(--mobile-font-scale, 1));margin:14px 0 8px}.empty p{max-width:380px;margin:auto}.help{margin-top:48px;border-top:1px solid var(--line);padding-top:48px}.help summary{cursor:pointer;font-weight:600;min-height:32px}.help p{max-width:none;font-size:calc(17px * var(--mobile-font-scale, 1))}.help pre{overflow:auto;background:#15243c;color:#dfebff;border-radius:8px;padding:18px;font-size:calc(14px * var(--mobile-font-scale, 1))}#feedback:not(:empty){margin-top:18px;padding:12px 16px;border-radius:8px;background:#e8f0ff;color:#234d99;font-size:calc(15px * var(--mobile-font-scale, 1));line-height:1.5;white-space:pre-line}#feedback.error{background:#fff0ed;color:#983c2d}footer{max-width:1228px;padding:0 24px 30px;margin:auto;display:flex;justify-content:space-between;gap:20px;color:#748099;font-size:calc(14px * var(--mobile-font-scale, 1))}@media(max-width:760px){header{padding:18px 20px}.privacy{display:none}main{padding:32px 16px}.intro{align-items:flex-start;flex-direction:column;gap:18px}.intro>.primary{width:100%}.dropzone{padding:24px 18px;flex-wrap:wrap;gap:16px}.dropzone .upload-icon{display:none}.dropzone>button{width:100%}.toolbar{padding:14px;flex-wrap:wrap}.actions{margin-left:auto}.grid{padding:14px;gap:12px;grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}footer{flex-direction:column;gap:7px}.empty{padding:45px 20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.guide-link{display:inline-block;color:var(--blue);font-size:16px;text-underline-offset:4px;margin-top:10px}.guide{border-top:1px solid var(--line);margin-top:48px;padding-top:48px;scroll-margin-top:24px}.guide a{color:#2359c5;text-underline-offset:3px}.guide h2,.help>h2{font-size:calc(clamp(27px,4vw,36px) * var(--mobile-font-scale, 1));letter-spacing:-.03em;margin:0 0 14px}main .guide h3{font-weight:600;font-size:calc(22px * var(--mobile-font-scale, 1));line-height:1.3;margin:0 0 14px}.guide h4{font-size:calc(19px * var(--mobile-font-scale, 1));margin:14px 0 8px}.guide .lead,.method-note .lead{max-width:none;font-size:calc(20px * var(--mobile-font-scale, 1))}.help .lead{font-size:calc(20px * var(--mobile-font-scale, 1))}.guide p,.help>.eyebrow{font-size:calc(17px * var(--mobile-font-scale, 1))}.guide code{font-size:.88em;overflow-wrap:anywhere}.guide-columns{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin:36px 0}.sprite-flow{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr;align-items:center;gap:15px;margin:30px 0 38px;padding:30px 24px;background:#fff;border:1px solid var(--line);border-radius:14px}.flow-step{position:relative;text-align:center;min-width:0}.step-number{display:block;color:#8493ad;font-size:calc(14px * var(--mobile-font-scale, 1));font-weight:700;margin-bottom:16px}.flow-step strong{display:block;font-size:calc(17px * var(--mobile-font-scale, 1));margin-top:18px}.sample-files{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:220px;margin:auto}.sample-files span{display:grid;place-items:center;min-height:43px;padding:8px 4px;background:#edf3ff;border:1px solid #cdddf9;border-radius:6px;font-size:calc(14px * var(--mobile-font-scale, 1));color:#365886}.flow-arrow{color:#8ba0c4;font-size:calc(28px * var(--mobile-font-scale, 1));text-align:center}.bundle-drawing{border:2px solid #6388e0;border-radius:8px;background:#edf3ff;max-width:195px;margin:auto;padding:12px;color:#235bea}.bundle-drawing>span{font-size:calc(13px * var(--mobile-font-scale, 1));letter-spacing:.1em;font-weight:700}.bundle-drawing>div{font-size:calc(25px * var(--mobile-font-scale, 1));padding-top:8px;white-space:nowrap}.website-drawing{border:1px solid #bfccdf;border-radius:8px;overflow:hidden;background:white;max-width:240px;margin:auto;text-align:left}.website-drawing>div{background:#edf1f8;font-size:calc(7px * var(--mobile-font-scale, 1));color:#8b9bb6;padding:6px}.website-drawing section{display:flex;align-items:center;justify-content:center;padding:10px 6px;gap:4px}.website-drawing section span{font-size:calc(12px * var(--mobile-font-scale, 1));line-height:1.5;color:#6a7c98}.website-drawing img{width:65px;height:44px}.sprite-flow figcaption{grid-column:1/-1;text-align:center;color:#65758e;font-size:calc(15px * var(--mobile-font-scale, 1));line-height:1.5;margin-top:10px}.fragment-demo{display:grid;grid-template-columns:1fr 240px;align-items:center;gap:36px;background:#eaf1ff;padding:30px;border-radius:14px;margin:40px 0}.fragment-demo p{max-width:580px}.demo-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.demo-choices button[aria-pressed=true]{color:white;background:var(--blue);border-color:var(--blue)}.fragment-address{font-family:ui-monospace,monospace;font-size:calc(15px * var(--mobile-font-scale, 1))!important;overflow-wrap:anywhere}.fragment-address span{color:#235bea;font-weight:700}.demo-image{margin:0;text-align:center;background:white;padding:24px 12px;border:1px solid #d6e1f7;border-radius:12px}.demo-image img{display:block;max-width:100%;margin:auto;object-fit:contain}.demo-image figcaption{color:#62728a;font-size:calc(15px * var(--mobile-font-scale, 1));padding-top:12px}.section-title{margin-top:42px!important}.format-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}.format-grid article{border:1px solid var(--line);background:#fff;padding:22px;border-radius:12px}.format-grid p{font-size:calc(17px * var(--mobile-font-scale, 1))}.format-badge{font-size:calc(13px * var(--mobile-font-scale, 1));font-weight:750;letter-spacing:.08em;color:#235bea;background:#eaf1ff;border-radius:5px;padding:5px 8px}.guide .reference-note{font-size:calc(15px * var(--mobile-font-scale, 1));color:#697c96;margin-top:16px}.guide-steps{border-top:1px solid var(--line);padding-top:32px;margin-top:32px}.guide-steps ol{padding-left:24px;max-width:none}.guide-steps li{line-height:1.7;margin:12px 0;padding-left:8px;color:#5d6980}.guide-steps li strong{color:#182236}.guide pre{background:#15243c;color:#dfebff;padding:22px;border-radius:9px;overflow:auto;font-size:calc(15px * var(--mobile-font-scale, 1));line-height:1.65}.guide pre code{overflow-wrap:normal}.local-note{padding:24px 28px;border-left:4px solid #6289e0;background:#eaf1ff;margin-top:30px;border-radius:0 10px 10px 0}.local-note,.guide .local-note{font-size:calc(18px * var(--mobile-font-scale, 1))}.local-note p{margin-bottom:0}footer>div{text-align:right}footer p{font-size:calc(14px * var(--mobile-font-scale, 1));color:inherit;margin:7px 0 0}@media(max-width:960px){.format-grid{grid-template-columns:1fr 1fr}.sprite-flow{gap:10px;padding:24px 16px}}@media(max-width:760px){.guide,.help{margin-top:34px;padding-top:34px}.guide-columns{grid-template-columns:1fr;gap:26px;margin:28px 0}.fragment-demo{grid-template-columns:1fr;gap:20px;padding:24px}.demo-image{max-width:240px;justify-self:center;width:100%}.sprite-flow{grid-template-columns:1fr;gap:14px}.flow-arrow{transform:rotate(90deg)}.step-number{margin-bottom:10px}.flow-step strong{margin-top:12px}.sprite-flow figcaption{margin-top:12px}.sample-files{min-width:220px}.website-drawing{min-width:220px}.bundle-drawing{min-width:195px}footer>div{text-align:left}}@media(max-width:600px){.format-grid{grid-template-columns:1fr}.guide pre{font-size:calc(12px * var(--mobile-font-scale, 1));padding:16px}}
.embed-code{display:block;user-select:all;overflow-wrap:anywhere;white-space:pre-wrap;background:#f3f6fb;border:1px solid #e2e8f2;border-radius:6px;padding:9px;margin-top:12px;font-family:ui-monospace,monospace;font-size:calc(13px * var(--mobile-font-scale, 1));line-height:1.6;color:#435574}
.browser-guide{margin-top:38px;padding-top:32px;border-top:1px solid var(--line)}.browser-table-wrap{overflow:auto;margin:22px 0}
.browser-guide>h2+.browser-intro,.browser-guide>h2+p{font-size:calc(20px * var(--mobile-font-scale,1))}
.browser-table-wrap + .reference-note{margin-bottom:36px}.browser-guide table{width:100%;border-collapse:collapse;background:white;font-size:calc(17px * var(--mobile-font-scale, 1));text-align:left}.browser-guide th,.browser-guide td{padding:15px 18px;border-bottom:1px solid var(--line);line-height:1.5}.browser-guide thead th{background:#eaf1ff;color:#365781;font-size:calc(15px * var(--mobile-font-scale, 1))}.browser-guide tbody th{font-weight:600}.browser-guide td{color:#5d6980}@media(max-width:600px){.browser-guide th,.browser-guide td{padding:12px 10px;font-size:calc(14px * var(--mobile-font-scale, 1))}}
.browser-name{display:flex;align-items:center;gap:12px}.browser-name img{display:block;flex:0 0 32px;width:32px;height:32px;object-fit:contain}.browser-guide td strong{color:#2858ad;white-space:nowrap}@media(max-width:600px){.browser-name{gap:8px}.browser-name img{width:26px;height:26px;flex-basis:26px}}
.layer-explainer{margin:64px 0 38px}
.guide-columns.single-column{grid-template-columns:1fr;max-width:none}.faq{margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}.faq details{border-bottom:1px solid var(--line);padding:17px 0}.faq summary{font-size:calc(18px * var(--mobile-font-scale, 1));font-weight:600;line-height:1.5;cursor:pointer;padding:6px 30px 6px 0;color:#263956}.faq details[open] summary{color:#235bea}.faq details p{max-width:none;padding:6px 0 8px;margin:6px 0;line-height:1.7}
.current-version{font-size:calc(15px * var(--mobile-font-scale, 1));white-space:nowrap;color:#687b99}@media(prefers-reduced-motion:reduce){.layer-stack .image-layer{transition:none!important}}
.help h3{font-size:calc(18px * var(--mobile-font-scale, 1));margin:24px 0 8px}.help .sprite-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:24px 0 32px;padding:26px 8px;border:1px solid #cbdcff;border-left:4px solid #235bea;border-radius:0 12px 12px 0;background:#eaf1ff;color:#23477f;gap:0}
.help .sprite-highlights li{display:flex;align-items:center;gap:14px;min-width:0;margin:0;padding:0 22px}
.help .sprite-highlights li+li{border-left:1px solid #cbd9ef}
.help .sprite-highlights strong{font-size:calc(19px * var(--mobile-font-scale, 1));line-height:1.45;font-weight:600;color:inherit}
.sprite-highlight-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:#fff;color:#235bea}
.sprite-highlight-icon img{display:block;width:26px;height:26px}
[data-theme="dark"] .help .sprite-highlights{background:#1b2d49;color:#e0eaff;border-color:#38547f;border-left-color:#86a9ff}
[data-theme="dark"] .help .sprite-highlights li+li{border-color:#38547f}
[data-theme="dark"] .sprite-highlight-icon{background:#28446d;color:#a9c3ff}
@media(max-width:900px){.help .sprite-highlights li{padding:0 15px;gap:12px}.help .sprite-highlights strong{font-size:calc(18px * var(--mobile-font-scale, 1))}}
@media(max-width:760px){.help .sprite-highlights{grid-template-columns:1fr;padding:8px 20px}.help .sprite-highlights li{padding:18px 0;gap:16px}.help .sprite-highlights li+li{border-left:0;border-top:1px solid #cbd9ef}}.help code{font-size:inherit}.help pre code{font-size:1em}.help pre{line-height:1.6}

.method-note{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:24px 36px;margin:0 0 32px;padding:28px 0;color:#5d6980}.method-note strong{color:#253e67}.method-note a{color:#235bea;text-underline-offset:3px;white-space:nowrap}.img-advantages{border-top:1px solid var(--line);margin:48px 0 60px;padding-top:48px;scroll-margin-top:24px}.img-advantages ul{display:grid;grid-template-columns:1fr 1fr;gap:18px 34px;padding-left:22px;margin:22px 0}.img-advantages li{padding-left:6px;line-height:1.7;color:#5d6980}.img-advantages li strong{color:#263956}@media(max-width:760px){.img-advantages{margin-top:34px;padding-top:34px}.img-advantages ul{grid-template-columns:1fr;gap:14px}.method-note a{white-space:normal}}
.img-advantages .img-advantages-lead{max-width:none;margin:0 0 28px;font-size:calc(20px * var(--mobile-font-scale,1));line-height:1.6}
.faq .faq-lead{max-width:none;margin:0 0 28px;font-size:calc(20px * var(--mobile-font-scale,1));line-height:1.6}

.brand-heading{margin:0;font:inherit}

.legal-nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px}
.legal-nav a{color:inherit;text-underline-offset:3px}
.legal-page{max-width:900px}
.legal-page .legal-title{font-size:calc(clamp(27px,4vw,36px) * var(--mobile-font-scale, 1));letter-spacing:-.03em;margin:0 0 14px;overflow-wrap:anywhere}
.legal-page h3{font-size:calc(22px * var(--mobile-font-scale, 1));line-height:1.3;margin:32px 0 14px}
.legal-page p,.legal-page address{font-size:calc(17px * var(--mobile-font-scale, 1));line-height:1.7}
.legal-page address{font-style:normal;color:#5d6980;margin:14px 0}
.legal-page a{color:#2359c5;overflow-wrap:anywhere}
.legal-page .legal-date{font-size:calc(15px * var(--mobile-font-scale, 1));margin-bottom:32px}
.faq .commercial-note{margin-top:24px}
.help>p,.help>pre,.embed-example{width:100%;max-width:760px}
.help>.sprite-highlights~p{max-width:none}
.embed-example{margin:26px 0}
@font-face{font-family:Inter;src:url('../assets/fonts/inter-variable.woff2') format('woff2'),url('../assets/fonts/inter-variable.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
.embed-example-image{overflow:auto;border-radius:16px;background:transparent}
.embed-example-image picture,.embed-example-image img{display:block;width:100%;min-width:650px;height:auto}
.embed-example figcaption{font-size:calc(15px * var(--mobile-font-scale, 1));line-height:1.6;color:#5d6980;margin-top:12px}
[data-theme="dark"] .embed-example figcaption{color:#b4c1d8}

.site-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}
.language-switch{display:flex;gap:2px;padding:3px;border:1px solid #b8cbff;border-radius:10px}
.site-controls button{min-height:36px;padding:6px 10px;background:transparent;border-color:transparent;color:#fff;font-size:calc(14px * var(--mobile-font-scale, 1));box-shadow:none}
.site-controls button:hover:not(:disabled){background:#164bcc}
.site-controls [data-language][aria-pressed="true"]{background:#fff;color:#235bea}
.site-controls .theme-switch{border:1px solid #b8cbff;display:flex;gap:7px;align-items:center}
:is(body>header,body>:where(.site-header-stack)>header) .language-switch,:is(body>header,body>:where(.site-header-stack)>header) .theme-switch,:is(body>header,body>:where(.site-header-stack)>header) .account-button,:is(body>header,body>:where(.site-header-stack)>header) .navigation-toggle{height:36px;min-height:36px;border-radius:7px}
:is(body>header,body>:where(.site-header-stack)>header) .language-switch{padding:2px}
:is(body>header,body>:where(.site-header-stack)>header) .language-switch>button{height:30px;min-height:30px;padding:4px 8px;border-radius:5px}
:is(body>header,body>:where(.site-header-stack)>header) .theme-switch,:is(body>header,body>:where(.site-header-stack)>header) .account-button,:is(body>header,body>:where(.site-header-stack)>header) .navigation-toggle{padding:6px 9px}
.theme-switch>span:first-child{font-size:calc(18px * var(--mobile-font-scale, 1));line-height:1}
.privacy-settings{font:inherit;color:inherit;min-height:0;padding:0;border:0;border-radius:0;background:transparent;text-decoration:underline;text-underline-offset:3px;font-weight:400}
.privacy-settings:hover:not(:disabled){background:transparent;box-shadow:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.consent-banner{position:fixed;z-index:100;left:20px;right:20px;bottom:20px;max-width:800px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto;margin:auto;padding:24px;background:#fff;color:#182236;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 50px #14233b35}
.consent-banner[hidden]{display:none}
.consent-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.consent-heading h2{margin:0;font-size:calc(21px * var(--mobile-font-scale, 1))}
.consent-banner p{font-size:calc(15px * var(--mobile-font-scale, 1));line-height:1.55;margin:12px 0}
.consent-banner .consent-necessary,.consent-banner .consent-platform{font-size:calc(13px * var(--mobile-font-scale, 1))}
.consent-close{padding:0;width:36px;min-height:36px;font-size:calc(22px * var(--mobile-font-scale, 1))}
.consent-option{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-block:1px solid var(--line);font-size:calc(15px * var(--mobile-font-scale, 1));cursor:pointer}
.consent-option input{width:20px;height:20px;flex-shrink:0;accent-color:#235bea;margin:1px 0 0}
.consent-detail{display:block;color:#5d6980;font-size:calc(13px * var(--mobile-font-scale, 1));line-height:1.5;margin-top:5px}
.consent-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
.consent-actions button{flex:1;white-space:nowrap;font-size:calc(15px * var(--mobile-font-scale, 1))}
.consent-actions a{font-size:calc(14px * var(--mobile-font-scale, 1));color:#2359c5;text-underline-offset:3px}
@media(max-width:1050px){header>.privacy{display:none}}
@media(max-width:600px){header{flex-wrap:wrap;gap:14px}.site-controls{margin-left:auto}.consent-banner{left:10px;right:10px;bottom:10px;padding:18px;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}.consent-actions{gap:10px}.consent-actions a{flex-basis:100%;text-align:center}}
:root[data-theme="dark"]{color-scheme:dark;background:#0e1420;color:#e5ecf9;--blue:#9ab4ff;--line:#33425b}
:root[data-theme="light"]{color-scheme:light}
[data-theme="dark"] p,[data-theme="dark"] .method-note,[data-theme="dark"] .meta,[data-theme="dark"] .current-version,[data-theme="dark"] .browser-guide td,[data-theme="dark"] .guide-steps li,[data-theme="dark"] .img-advantages li,[data-theme="dark"] .legal-page address,[data-theme="dark"] .consent-detail{color:#b4c1d8}
[data-theme="dark"] .guide a,[data-theme="dark"] .method-note a,[data-theme="dark"] .legal-page a,[data-theme="dark"] .consent-actions a{color:#a3bdff}
[data-theme="dark"] .eyebrow{color:#9ab4ff}
[data-theme="dark"] .method-note strong,[data-theme="dark"] .img-advantages li strong,[data-theme="dark"] .guide-steps li strong,[data-theme="dark"] .faq summary{color:#e5ecf9}
[data-theme="dark"] .faq details[open] summary{color:#a3bdff}
[data-theme="dark"] button{background:#1d2a40;border-color:#3e506d;color:#e5ecf9}
[data-theme="dark"] button:hover:not(:disabled){background:#2a3b56}
[data-theme="dark"] .primary{background:#315ed4;border-color:#527bed;color:white}
[data-theme="dark"] .primary:hover:not(:disabled){background:#3c6ae3}
[data-theme="dark"] .workspace,[data-theme="dark"] .format-grid article,[data-theme="dark"] .layers-diagram,[data-theme="dark"] .browser-guide table,[data-theme="dark"] .consent-banner{background:#171f2f;color:#e5ecf9}
[data-theme="dark"] .dropzone{background:#182840;border-color:#536f9e}
[data-theme="dark"] .dropzone.drag{background:#253d60;border-color:#9ab4ff}
[data-theme="dark"] .dropzone .small,[data-theme="dark"] .guide .reference-note,[data-theme="dark"] .layers-diagram figcaption,[data-theme="dark"] .layer-result span,[data-theme="dark"] .layer-selection>span:last-child{color:#b4c1d8}
[data-theme="dark"] .upload-icon,[data-theme="dark"] .toolbar h2 span,[data-theme="dark"] .layer-result{background:#25324a}





[data-theme="dark"] .layer-selection>code,[data-theme="dark"] .format-badge,[data-theme="dark"] .browser-guide thead th{background:#223654;color:#b3caff}
[data-theme="dark"] .browser-guide td strong{color:#adc5ff}
[data-theme="dark"] .local-note{background:#1b2d49;color:#c0d1ef;border-left-color:#86a9ff}
[data-theme="dark"] .embed-code{background:#101a2b;color:#c7d6ef;border-color:#33425b}
[data-theme="dark"] #feedback:not(:empty){background:#203555;color:#c0d5ff}
[data-theme="dark"] #feedback.error{background:#482725;color:#ffd0c5}
[data-theme="dark"] .card .remove{background:#202a3bee;color:#e5ecf9;border-color:#576b8a}
[data-theme="dark"] footer{color:#a9b8d2}
[data-theme="dark"] footer a,[data-theme="dark"] footer .privacy-settings{color:inherit}
[data-theme="dark"] .privacy-settings{background:transparent;border:0}
[data-theme="dark"] .site-controls button{background:transparent;border-color:transparent}
[data-theme="dark"] .site-controls .theme-switch{border-color:#b8cbff}
[data-theme="dark"] .site-controls button:hover:not(:disabled){background:#164bcc}
[data-theme="dark"] .site-controls [data-language][aria-pressed="true"]{background:#fff;color:#235bea}
.site-controls [data-language][aria-pressed="true"]:hover:not(:disabled),[data-theme="dark"] .site-controls [data-language][aria-pressed="true"]:hover:not(:disabled){background:#edf3ff;color:#164bcc}

.consent-reset-theme{display:block;margin-top:14px;font-size:calc(13px * var(--mobile-font-scale, 1))}
.consent-reset-language{display:block;margin-top:10px;font-size:calc(13px * var(--mobile-font-scale, 1))}
.brand-mark img{display:block;width:26px;height:26px}
.img-advantages ul{list-style:none;padding-left:0}
.img-advantages li{position:relative;padding-left:38px}
.benefit-icon{position:absolute;left:0;top:3px;width:24px;height:24px}

.sprite-comparison{column-count:2;column-gap:40px;column-fill:balance;max-width:none;margin:28px 0 0}
.sprite-comparison h3{margin:24px 0 12px;break-after:avoid;break-inside:avoid}
.sprite-comparison h3:first-child{margin-top:0}
.sprite-comparison p{margin:12px 0;orphans:3;widows:3}
.sprite-comparison>.reference-note{column-span:all;margin:24px 0 0}
.sprite-comparison pre{margin:16px 0;padding:16px;font-size:calc(13px * var(--mobile-font-scale, 1));line-height:1.6;white-space:pre;overflow-x:auto;text-align:start;break-inside:avoid}
.sprite-comparison pre code{font-size:inherit;white-space:inherit;overflow-wrap:normal}
@media(min-width:761px){.sprite-comparison>.sprite-comparison-continuation{break-before:column;margin-top:0}}
@media(max-width:760px){.sprite-comparison{column-count:1}}
.consent-banner{left:24px;right:24px;bottom:24px;max-width:860px;padding:26px 28px;background:#fff;border:1px solid #dbe4f3;border-radius:20px;box-shadow:0 20px 70px #14233b2e,0 2px 8px #14233b0a}
.consent-heading{justify-content:flex-start;gap:14px}.consent-heading h2{font-size:calc(20px * var(--mobile-font-scale, 1));line-height:1.3;letter-spacing:-.025em}.consent-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#edf3ff;color:#235bea}.consent-icon svg{width:26px;height:26px}.consent-close{margin-left:auto;border:0;background:transparent;color:#66758e}.consent-banner .consent-intro{color:#435574;font-size:calc(15px * var(--mobile-font-scale, 1));line-height:1.7;margin:18px 0 12px}.consent-banner .consent-necessary{font-size:calc(13px * var(--mobile-font-scale, 1));line-height:1.7;color:#64748b;margin:0}.consent-actions{justify-content:space-between;gap:18px;margin-top:22px;padding-top:20px;border-top:1px solid #e7edf6}.consent-actions button{flex:0 0 auto;min-width:132px;border-radius:11px;padding:11px 22px}.consent-actions a{font-size:calc(14px * var(--mobile-font-scale, 1))}.consent-settings{margin-top:20px;padding-top:8px;border-top:1px solid #e7edf6}.consent-settings[hidden]{display:none}.consent-banner .consent-platform{color:#64748b;font-size:calc(13px * var(--mobile-font-scale, 1))}.consent-settings .privacy-settings{display:block;color:#435574;font-size:calc(13px * var(--mobile-font-scale, 1))}
[data-theme="dark"] .consent-banner{background:#19263b;border-color:#3a4e6c;box-shadow:0 20px 70px #0006}
[data-theme="dark"] .consent-icon{background:#263d63;color:#a9c3ff}
[data-theme="dark"] .consent-banner .consent-intro{color:#d0dcf0}
[data-theme="dark"] .consent-banner .consent-necessary,[data-theme="dark"] .consent-banner .consent-platform,[data-theme="dark"] .consent-settings .privacy-settings{color:#adbed8}
[data-theme="dark"] .consent-actions,[data-theme="dark"] .consent-settings{border-color:#344964}
[data-theme="dark"] .consent-close{background:transparent;color:#adbed8}
@media(max-width:600px){.consent-banner{left:12px;right:12px;bottom:12px;padding:22px;border-radius:17px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}.consent-heading h2{font-size:calc(18px * var(--mobile-font-scale, 1))}.consent-actions a{flex-basis:auto;text-align:left}.consent-actions button{min-width:116px;padding:11px 18px}.consent-banner .consent-necessary{max-width:330px}}

footer{flex-wrap:wrap}.sprite-counter{flex:1 0 100%;margin:0 0 10px;font-size:calc(14px * var(--mobile-font-scale, 1));color:#64748b}.sprite-counter strong{font-size:calc(17px * var(--mobile-font-scale, 1));color:#263956;font-variant-numeric:tabular-nums}[data-theme="dark"] .sprite-counter{color:#adbed8}[data-theme="dark"] .sprite-counter strong{color:#e5ecf9}

.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.consent-actions button{width:100%;min-height:46px;padding:11px 18px;border:1px solid #c2cee3;background:#edf3ff;color:#234674;font-weight:600;box-shadow:none}.consent-actions button:hover:not(:disabled){background:#dfeaff;box-shadow:none}.consent-actions .consent-privacy{grid-column:1/-1;justify-self:center;margin-top:4px}[data-theme="dark"] .consent-actions button{background:#263d5d;border-color:#526a8e;color:#e5ecf9}[data-theme="dark"] .consent-actions button:hover:not(:disabled){background:#324e73}

.to-top{position:fixed;right:24px;bottom:24px;z-index:80;display:grid;place-items:center;width:48px;height:48px;min-height:48px;padding:0;border-radius:14px;border:1px solid #315ed4;background:#235bea;color:#fff;box-shadow:none}.to-top[hidden]{display:none}.to-top svg{width:23px;height:23px}.to-top:hover:not(:disabled){background:#164bcc;box-shadow:none}[data-theme="dark"] .to-top{background:#315ed4;border-color:#6489ed;color:#fff}[data-theme="dark"] .to-top:hover:not(:disabled){background:#3c6ae3}@media(max-width:600px){.to-top{right:16px;bottom:16px}}

.consent-choices{border:0;padding:0 10px 0 0;margin:17px 0;min-inline-size:0;max-height:360px;max-height:min(360px,42vh);max-height:min(360px,42dvh);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#a7b8d8 transparent}.consent-choices label{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid #e7edf6;cursor:pointer}.consent-choices input{width:20px;height:20px;flex:0 0 20px;margin:2px 0 0;accent-color:#235bea;cursor:pointer}.consent-choices strong{display:block;font-size:calc(15px * var(--mobile-font-scale, 1));font-weight:600}.consent-choices small{display:block;margin-top:4px;font-size:calc(13px * var(--mobile-font-scale, 1));line-height:1.55;color:#64748b}.consent-actions{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.consent-actions button{min-width:0;white-space:normal;padding:11px 8px;font-size:calc(14px * var(--mobile-font-scale, 1))}[data-theme="dark"] .consent-choices label{border-color:#344964}[data-theme="dark"] .consent-choices small{color:#adbed8}@media(max-width:600px){.consent-actions{grid-template-columns:1fr}}@media(max-width:460px){.consent-actions{grid-template-columns:1fr}.consent-actions button{min-height:44px}}

footer>.legal-nav{flex:1 0 100%;justify-content:center;text-align:center;margin-top:0;gap:12px 24px}

.consent-links{grid-column:1/-1;display:flex;justify-content:center;gap:10px 20px;flex-wrap:wrap;margin-top:4px}.consent-actions .consent-links a{margin-top:0;font-size:calc(14px * var(--mobile-font-scale, 1))}
.consent-choices .consent-essential,.consent-choices input:disabled{cursor:default}
.consent-choices{max-height:none;overflow:visible;overscroll-behavior-y:auto;scrollbar-gutter:auto;padding-right:0}
.consent-banner .consent-hosting{font-size:calc(13px * var(--mobile-font-scale, 1));line-height:1.6;color:#64748b;margin:0 0 12px}
[data-theme="dark"] .consent-banner .consent-hosting{color:#adbed8}

footer>.legal-nav{width:100%}footer>.footer-note{flex:1 0 100%;width:100%;text-align:center;margin:12px 0}footer>.footer-note p{text-align:center}

footer>.footer-brand{flex:1 0 100%;width:100%;text-align:center;display:block;font-size:calc(14px * var(--mobile-font-scale, 1));font-weight:700}

.method-copy{min-width:0}
.method-note .intro-title{color:#182236}
@font-face{font-family:'Roboto Mono';src:url('../assets/fonts/roboto-mono-variable.woff2') format('woff2'),url('../assets/fonts/roboto-mono-variable.ttf') format('truetype');font-style:normal;font-weight:100 700;font-display:optional}
.intro-title code{font-family:'Roboto Mono',monospace;font-weight:500}
.method-note .intro-title code{font-size:.94em;color:#235bea;background:#e8efff;padding:2px 7px;border-radius:6px}
.method-note p{margin:0;max-width:none;font-size:calc(17px * var(--mobile-font-scale, 1));line-height:1.65}
.method-note .method-link{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:14px 20px;border:2px solid #235bea;border-radius:10px;color:#235bea;font-size:calc(17px * var(--mobile-font-scale, 1));font-weight:700;line-height:1.4;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.method-link svg{width:22px;height:22px;flex-shrink:0}
.method-note .method-link:hover{background:#235bea;color:#fff}
[data-theme="dark"] .method-note .intro-title{color:#edf3ff}
[data-theme="dark"] .method-note .intro-title code{color:#a9c3ff;background:#253b5e}
[data-theme="dark"] .method-note .method-link{color:#b6cbff;border-color:#86a9ff}
[data-theme="dark"] .method-note .method-link:hover{background:#86a9ff;color:#14233b}
@media(max-width:760px){.method-note{grid-template-columns:1fr;gap:20px;padding:24px 0}.method-note .method-link{justify-self:start;white-space:normal;text-align:center}}

.method-note .eyebrow{margin:0 0 12px;font-size:calc(17px * var(--mobile-font-scale, 1));line-height:1.5;font-weight:700;letter-spacing:.13em;color:var(--blue)}

.toolbar .actions{flex-wrap:wrap}
@media(max-width:760px){.toolbar .actions{width:100%;margin-left:0}.toolbar .actions #export{flex:1 0 100%}}

:is(body>header,body>:where(.site-header-stack)>header){position:sticky;top:0;z-index:60}
html{scroll-padding-top:var(--sticky-header-height,88px)}
main h2[id]{scroll-margin-top:var(--navigation-gap,25px)}
.share-heading .heading-share{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:36px;height:36px;margin-inline-start:8px;border:1px solid transparent;border-radius:8px;color:#6480ad;background:transparent;line-height:1;font-size:calc(17px * var(--mobile-font-scale, 1));letter-spacing:normal;text-decoration:none;cursor:pointer}
.share-heading .heading-share svg{display:block;width:21px;height:21px}
.share-heading .heading-share:hover,.share-heading .heading-share:focus-visible{color:#235bea;background:#e5edff;border-color:#bcd0f4}
.share-heading .heading-share[data-copied="true"]{color:#187253;background:#e2f4ec}
[data-theme="dark"] .share-heading .heading-share{color:#9bb4d9}
[data-theme="dark"] .share-heading .heading-share:hover,[data-theme="dark"] .share-heading .heading-share:focus-visible{color:#c7d8ff;background:#253d60;border-color:#4a6998}
[data-theme="dark"] .share-heading .heading-share[data-copied="true"]{color:#9be3c5;background:#204b43}
.heading-share-fallback{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 18px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:calc(14px * var(--mobile-font-scale, 1));line-height:1.5;letter-spacing:normal}
.heading-share-fallback label{flex-basis:100%;font-weight:600;color:#253e67}
.heading-share-fallback input{flex:1 1 180px;min-width:0;width:100%;min-height:44px;padding:10px;border:1px solid #becce2;border-radius:7px;background:#f7f9fd;color:#253e67;font:inherit}
.heading-share-fallback button{font-size:calc(14px * var(--mobile-font-scale, 1))}
[data-theme="dark"] .heading-share-fallback{background:#1d2a40}
[data-theme="dark"] .heading-share-fallback label{color:#e5ecf9}
[data-theme="dark"] .heading-share-fallback input{background:#14233b;color:#e5ecf9;border-color:#526786}

/* Each motif keeps the same accent in the file list and its selected preview. */
.layers-diagram[data-active-layer="landschaft"],.image-layer[data-layer="landschaft"]{--layer-accent:#24745f;--layer-tint:#edf8f3;--layer-border:#b8dece;--layer-accent-dark:#7bc8ae;--layer-tint-dark:#1b3531;--layer-border-dark:#335f56}
.layers-diagram[data-active-layer="mond"],.image-layer[data-layer="mond"]{--layer-accent:#6d4bb5;--layer-tint:#f4efff;--layer-border:#d4c3ed;--layer-accent-dark:#c0aaf5;--layer-tint-dark:#2e2745;--layer-border-dark:#584674}
.layers-diagram[data-active-layer="sonne"],.image-layer[data-layer="sonne"]{--layer-accent:#946112;--layer-tint:#fff8e8;--layer-border:#e6cc96;--layer-accent-dark:#f4ca76;--layer-tint-dark:#352c1d;--layer-border-dark:#665133}
[data-theme="dark"] .layers-diagram,[data-theme="dark"] .image-layer{--layer-accent:var(--layer-accent-dark);--layer-tint:var(--layer-tint-dark);--layer-border:var(--layer-border-dark)}
.layers-diagram{display:grid;grid-template-columns:minmax(240px,1fr) minmax(130px,.48fr) minmax(240px,1fr);align-items:center;gap:28px;margin:26px 0;padding:28px;background:#fff;border:1px solid var(--line);border-radius:12px}
.layer-stack{min-width:0;border:1px solid #dce3ee;border-radius:9px;overflow:hidden;background:#fff}
.layer-file-heading{display:flex;align-items:center;gap:10px;padding:16px;background:#edf3ff;border-bottom:1px solid #d6e2f7;color:#365c9e}
.layer-file-heading>svg{width:21px;height:21px;flex-shrink:0}
.layer-file-heading>code{font-size:calc(15px * var(--mobile-font-scale, 1));font-weight:600;white-space:nowrap}
.layer-file-heading>span{margin-left:auto;font-size:calc(13px * var(--mobile-font-scale, 1));white-space:nowrap;color:#6b7d95}
.layer-list{display:grid;gap:6px;padding:8px}
.layer-stack .image-layer{display:flex;align-items:center;gap:10px;width:100%;min-height:70px;padding:12px 10px;text-align:left;border:1px solid transparent;border-radius:6px;background:transparent;box-shadow:none;transition:background .15s,border-color .15s}
.layer-stack .image-layer>img{display:block;width:60px;height:40px;flex-shrink:0;object-fit:contain;background:var(--layer-tint);border-radius:7px}
.layer-item-copy{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.layer-item-copy strong{font-weight:600;font-size:calc(17px * var(--mobile-font-scale, 1));line-height:1.2;color:#293e5a}
.layer-item-copy code{font-size:calc(13px * var(--mobile-font-scale, 1));font-weight:400;color:#61738e;overflow-wrap:anywhere}
.layer-check{width:20px;height:20px;flex-shrink:0;color:var(--layer-accent);opacity:0}
.layer-stack .image-layer:hover:not(:disabled){background:var(--layer-tint);border-color:var(--layer-border);box-shadow:none}
.layer-stack .image-layer.selected-layer{background:var(--layer-tint);border-color:var(--layer-border);box-shadow:inset 3px 0 var(--layer-accent)}
.layer-stack .selected-layer .layer-check{opacity:1}
.layer-stack .image-layer:focus-visible{outline:3px solid #719bff;outline-offset:1px}
.layer-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;min-width:0}
.layer-selection-label{font-size:calc(14px * var(--mobile-font-scale, 1));line-height:1.5;color:#61738e}
.layer-selection>code{font-size:calc(17px * var(--mobile-font-scale, 1));font-weight:600;line-height:1.5;padding:6px 10px;background:var(--layer-tint);border:1px solid var(--layer-border);border-radius:5px;color:var(--layer-accent);overflow-wrap:anywhere;max-width:100%}
.selection-arrow{display:block;width:100%;max-width:130px;height:26px;color:var(--layer-accent);opacity:.65}
.layer-result{align-self:stretch;display:flex;flex-direction:column;min-width:0;border:1px solid #dce3ee;border-radius:9px;overflow:hidden;background:#fff;text-align:center}
.layer-preview-heading{padding:16px;border-bottom:1px solid var(--layer-border);text-align:left;font-size:calc(15px * var(--mobile-font-scale, 1));line-height:21px;color:var(--layer-accent);background:var(--layer-tint)}
.layer-preview-heading code{font-weight:600}
.layer-preview-canvas{display:grid;place-items:center;flex:1;min-height:164px;padding:20px;background-color:var(--layer-tint);background-image:radial-gradient(var(--layer-border) .75px,transparent .75px);background-size:12px 12px}
.layer-result img{display:block;width:180px;height:120px;max-width:100%;object-fit:contain}
.layer-result-summary{display:flex;flex-direction:column;gap:8px;padding:18px;border-top:1px solid #e5eaf2;background:#fff}
.layer-result strong{font-size:calc(17px * var(--mobile-font-scale, 1));line-height:1.4;color:#293e5a}
.layer-result span{font-size:calc(14px * var(--mobile-font-scale, 1));line-height:1.5;color:#61738e}
.layers-diagram figcaption{grid-column:1/-1;font-size:calc(15px * var(--mobile-font-scale, 1));line-height:1.65;color:#61738e;margin:0;padding-top:20px;border-top:1px solid #e5eaf2;text-align:left}
[data-theme="dark"] .layer-stack,[data-theme="dark"] .layer-result{background:#172235;border-color:#364965}
[data-theme="dark"] .layer-file-heading{background:#203452;border-color:#364965;color:#b2ccf7}
[data-theme="dark"] .layer-file-heading>span,[data-theme="dark"] .layer-item-copy code,[data-theme="dark"] .layer-selection-label{color:#a9bbd5}
[data-theme="dark"] .layer-item-copy strong,[data-theme="dark"] .layer-result strong{color:#e2eaf6}
[data-theme="dark"] .layer-stack .image-layer{background:transparent;border-color:transparent}
[data-theme="dark"] .layer-stack .image-layer:hover:not(:disabled){background:var(--layer-tint);border-color:var(--layer-border)}
[data-theme="dark"] .layer-stack .image-layer.selected-layer{background:var(--layer-tint);border-color:var(--layer-border);box-shadow:inset 3px 0 var(--layer-accent)}



[data-theme="dark"] .layer-result-summary{background:#172235;border-color:#364965}
[data-theme="dark"] .layer-selection>code{background:var(--layer-tint);border-color:var(--layer-border);color:var(--layer-accent)}
[data-theme="dark"] .layers-diagram figcaption{border-color:#364965}
@media(max-width:950px){.layers-diagram{grid-template-columns:minmax(220px,1fr) minmax(100px,.42fr) minmax(200px,1fr);gap:18px;padding:22px}.layer-file-heading{flex-wrap:wrap}.layer-file-heading>span{flex-basis:100%;margin-left:31px}}
@media(max-width:760px){.layers-diagram{grid-template-columns:1fr;gap:20px;padding:18px}.layer-file-heading{flex-wrap:nowrap}.layer-file-heading>span{flex-basis:auto;margin-left:auto}.layer-selection{gap:8px}.selection-arrow{width:48px;height:48px;transform:rotate(90deg)}.layer-preview-canvas{min-height:164px}.layers-diagram figcaption{padding-top:16px}}
.share-heading .heading-share{opacity:0;pointer-events:none;transition:opacity .15s,background .15s}
.share-heading:hover .heading-share,.share-heading .heading-share:focus,.share-heading .heading-share[data-copied="true"]{opacity:1;pointer-events:auto}
@media(hover:none){.share-heading .heading-share{opacity:1;pointer-events:auto}}

.guide .files-note{margin-top:30px;font-size:calc(15px * var(--mobile-font-scale, 1))}

/* Optional support stays local until the visitor follows their PayPal link. */
footer>.support-tool{flex:1 0 100%;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 18px;margin:0 0 12px;background:#eaf1ff;border:1px solid #d4e1fa;border-radius:12px;text-align:center}
footer .support-description{max-width:580px;margin:0;color:#435b7d;font-size:calc(15px * var(--mobile-font-scale, 1));line-height:1.6}
footer .support-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;max-width:100%;padding:12px 20px;border:1px solid #235bea;border-radius:9px;background:#235bea;color:#fff;font-size:calc(17px * var(--mobile-font-scale, 1));font-weight:700;line-height:1.4;text-decoration:none;text-align:center}
footer .support-button:hover{background:#1c49bd;border-color:#1c49bd}
footer .support-button:focus-visible{outline:3px solid #85a9ff;outline-offset:4px}
.support-button>svg{width:20px;height:20px;flex-shrink:0}
.support-button>.support-external{width:15px;height:15px;opacity:.85}
footer .support-note{color:#526b91;font-size:calc(13px * var(--mobile-font-scale, 1));line-height:1.5}
[data-theme="dark"] footer>.support-tool{background:#1b2d49;border-color:#3b5174}
[data-theme="dark"] footer .support-description,[data-theme="dark"] footer .support-note{color:#bdcee9}
[data-theme="dark"] footer .support-button{background:#235bea;border-color:#6c94f5;color:#fff}
[data-theme="dark"] footer .support-button:hover{background:#1c49bd}

/* Compare the two free exports with the permanent one-time unlock. */
.pricing-summary{margin:48px 0;padding:48px 0 0;background:transparent;border:0;border-top:1px solid var(--line)}
.pricing-summary h2{font-size:calc(clamp(27px,4vw,36px) * var(--mobile-font-scale, 1));letter-spacing:-.03em;line-height:1.2;margin:0 0 14px}
.pricing-summary p{font-size:calc(17px * var(--mobile-font-scale, 1));max-width:960px}
.pricing-summary .eyebrow{font-size:calc(17px * var(--mobile-font-scale, 1));color:var(--blue)}
.pricing-summary .pricing-lead{font-size:calc(20px * var(--mobile-font-scale,1));line-height:1.6;margin:0 0 28px}
.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:0}
.pricing-plan{min-width:0;padding:32px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 8px #23345804}
.pricing-plan-paid{border-color:#aac1f4;box-shadow:inset 0 3px 0 var(--blue),0 2px 8px #23345804}
.pricing-plan h3{margin:0;color:#263956;font-size:calc(21px * var(--mobile-font-scale, 1));line-height:1.4;letter-spacing:-.02em}
.pricing-price{display:flex;align-items:flex-start;flex-direction:column;gap:8px;margin:24px 0 28px;color:#182236}
.pricing-price strong{font-size:calc(56px * var(--mobile-font-scale, 1));line-height:1.05;letter-spacing:-.05em;white-space:nowrap;font-variant-numeric:tabular-nums}
.pricing-plan-paid .pricing-price strong{color:var(--blue)}
.pricing-price span{color:#5d6980;font-size:calc(17px * var(--mobile-font-scale, 1));line-height:1.6}
.pricing-table{width:100%;border-collapse:collapse;font-size:calc(17px * var(--mobile-font-scale, 1));text-align:left;line-height:1.5}
.pricing-table th,.pricing-table td{padding:16px 0;border-top:1px solid var(--line);vertical-align:top}
.pricing-table th{width:53%;padding-right:16px;color:#5d6980;font-weight:400}
.pricing-table td{text-align:right;color:#263956;font-weight:600}
.pricing-summary .pricing-plan-note{margin:16px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.pricing-summary .pricing-note{max-width:none;margin:24px 0 0;line-height:1.7}
.license-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.license-actions button{font-size:calc(15px * var(--mobile-font-scale, 1))}
.license-dialog{width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;padding:28px;border:1px solid #d3deef;border-radius:16px;background:#fff;color:#182236;box-shadow:0 22px 80px #15243c3d}
.license-dialog::backdrop{background:#101d35a6}
.license-backdrop{position:fixed;inset:0;z-index:100;background:#101d35a6}
.license-backdrop[hidden]{display:none}
.license-dialog.license-paypal-layer[open]{position:fixed;inset:0;margin:auto;height:fit-content;z-index:101}
.license-dialog .license-close{display:block;margin:0 0 20px auto;font-size:calc(15px * var(--mobile-font-scale, 1))}
.license-dialog h2{font-size:calc(27px * var(--mobile-font-scale, 1));letter-spacing:-.025em;line-height:1.2;margin:0 0 16px}
.license-dialog p{font-size:calc(17px * var(--mobile-font-scale, 1));line-height:1.65}
.license-dialog .small{font-size:calc(14px * var(--mobile-font-scale, 1))}
.license-dialog button{white-space:normal}
.license-overview{margin:24px 0;font-size:calc(17px * var(--mobile-font-scale, 1));line-height:1.6}
.license-overview>div+div{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.license-overview dt{margin:0 0 4px;font-size:calc(17px * var(--mobile-font-scale, 1));font-weight:650}
.license-overview dd{margin:0;color:#5d6980}
.license-overview-price{display:block;margin-bottom:4px;color:var(--blue);font-size:calc(22px * var(--mobile-font-scale, 1));line-height:1.4}
.license-before-signin .license-signin{width:100%}
.license-dialog #license-signin-note{margin:10px 0 0;line-height:1.5}
.license-purchase{margin:24px 0 12px}
.license-pay{width:100%}
.license-paypal{margin-top:18px;min-width:0}
.license-dialog .license-message:not(:empty){padding:14px 16px;background:#eaf1ff;border-left:3px solid #6289e0;border-radius:0 8px 8px 0;margin:18px 0}
.license-dialog label{display:block;font-size:calc(17px * var(--mobile-font-scale, 1));font-weight:600;margin:0 0 8px}
.license-dialog textarea{display:block;width:100%;max-width:100%;resize:vertical;border:1px solid #bdcbe3;border-radius:7px;padding:12px;font:calc(13px * var(--mobile-font-scale, 1))/1.5 ui-monospace,monospace;background:#f5f7fc;color:#25324b;margin:0 0 12px;overflow-wrap:anywhere}
.license-dialog textarea:focus-visible{outline:3px solid #719bff;outline-offset:3px}
.license-owned,.license-restore-form{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.license-forget{margin-top:14px}
.license-pending{margin:16px 0}
.license-pending details{margin-top:12px}
.license-pending summary{cursor:pointer;font-size:calc(15px * var(--mobile-font-scale, 1));color:#536987}
.license-legal{display:flex;gap:18px;flex-wrap:wrap;margin:24px 0 16px;font-size:calc(14px * var(--mobile-font-scale, 1))}
.license-legal a{color:#235bea;text-underline-offset:3px}
.license-continue{display:block;margin-left:auto}
.license-dialog .license-sandbox{padding:8px 12px;color:#735211;background:#fff4d3;font-size:calc(15px * var(--mobile-font-scale, 1))}
.license-dialog [hidden]{display:none!important}
[data-theme="dark"] .pricing-summary h2{color:#edf3ff}
[data-theme="dark"] .pricing-summary .eyebrow{color:#a3bdff}
[data-theme="dark"] .pricing-plan{background:#16263e;border-color:#3b4d69;box-shadow:none}
[data-theme="dark"] .pricing-plan-paid{border-color:#6986bd;box-shadow:inset 0 3px 0 #8caeff}
[data-theme="dark"] .pricing-plan h3,[data-theme="dark"] .pricing-price,[data-theme="dark"] .pricing-table td{color:#edf3ff}
[data-theme="dark"] .pricing-plan-paid .pricing-price strong{color:#a3bdff}
[data-theme="dark"] .pricing-price span,[data-theme="dark"] .pricing-table th{color:#b4c1d8}
[data-theme="dark"] .pricing-table th,[data-theme="dark"] .pricing-table td,[data-theme="dark"] .pricing-summary .pricing-plan-note{border-color:#3b5174}
[data-theme="dark"] .license-dialog{background:#16263e;color:#edf3ff;border-color:#465a78}
[data-theme="dark"] .license-dialog textarea{background:#112037;color:#dce7fa;border-color:#506788}
[data-theme="dark"] .license-dialog .license-message:not(:empty){background:#233d61}
[data-theme="dark"] .license-dialog a{color:#a3bdff}
[data-theme="dark"] .license-overview>div+div{border-color:#3b5174}
[data-theme="dark"] .license-overview dd{color:#b4c1d8}
[data-theme="dark"] .license-overview-price{color:#a3bdff}
[data-theme="dark"] .license-dialog .license-sandbox{background:#463b22;color:#ffe5a5}
@media(max-width:760px){.pricing-summary{margin:36px 0}.license-dialog{padding:22px 18px}.license-dialog h2{font-size:calc(24px * var(--mobile-font-scale, 1))}.license-dialog .license-actions{align-items:stretch;flex-direction:column}}
@media(max-width:760px){.pricing-grid{grid-template-columns:1fr;gap:18px;margin-top:24px}.pricing-plan{padding:26px 22px}.pricing-price{margin:20px 0 24px}.pricing-price strong{font-size:calc(48px * var(--mobile-font-scale, 1))}.pricing-table th{width:52%;padding-right:12px}}

/* Emphasize the explicit accept-all action in both themes. */
.consent-actions button[data-consent="accept"],[data-theme="dark"] .consent-actions button[data-consent="accept"]{background:#235bea;border-color:#235bea;color:#fff}
.consent-actions button[data-consent="accept"]:hover:not(:disabled),[data-theme="dark"] .consent-actions button[data-consent="accept"]:hover:not(:disabled){background:#164bcc;border-color:#164bcc}

/* Account sign-in and the free export allowance. */
.site-controls .account-button,[data-theme="dark"] .site-controls .account-button{background:#fff;border-color:#fff;color:#235bea;font-size:calc(14px * var(--mobile-font-scale, 1));padding:8px 12px;white-space:nowrap}
.site-controls .account-button:hover:not(:disabled),[data-theme="dark"] .site-controls .account-button:hover:not(:disabled){background:#edf3ff;border-color:#edf3ff;color:#164bcc}
.account-dialog{width:min(530px,calc(100vw - 32px));max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;padding:28px;border:1px solid #d3deef;border-radius:16px;background:#fff;color:#182236;box-shadow:0 22px 80px #15243c3d}
.account-dialog::backdrop{background:#101d35a6}
.account-close{display:block;margin:0 0 20px auto;font-size:calc(15px * var(--mobile-font-scale, 1))}
.account-dialog h2{font-size:calc(27px * var(--mobile-font-scale, 1));letter-spacing:-.025em;margin:0 0 14px}
.account-dialog p{font-size:calc(17px * var(--mobile-font-scale, 1))}
.account-dialog .small{font-size:calc(14px * var(--mobile-font-scale, 1));line-height:1.5}
.account-modes{display:flex;gap:8px;margin:24px 0 20px}
.account-modes button{flex:1;font-size:calc(15px * var(--mobile-font-scale, 1))}
.account-modes button[aria-pressed="true"]{background:#eaf1ff;border-color:#235bea;color:#235bea}
.account-form label{display:block;font-size:calc(17px * var(--mobile-font-scale, 1));font-weight:600;margin:16px 0 8px}
.account-form input{display:block;width:100%;padding:12px;border:1px solid #bdcbe3;border-radius:7px;background:#f7f9fd;color:#182236}
.account-form input:focus-visible{outline:3px solid #719bff;outline-offset:3px}
.account-submit{width:100%;margin:20px 0 12px;white-space:normal}
.account-message:not(:empty){padding:14px 16px;margin-top:18px;background:#eaf1ff;border-left:3px solid #6289e0;border-radius:0 8px 8px 0}
.account-dialog .account-email{font-weight:600;overflow-wrap:anywhere}
.account-license{margin:20px 0;padding:20px 0;border-block:1px solid var(--line)}
.account-license>summary,.license-owned>summary{cursor:pointer;font-size:calc(17px * var(--mobile-font-scale, 1));font-weight:650;line-height:1.5;padding:10px 0}
.account-license>summary:focus-visible,.license-owned>summary:focus-visible{outline:3px solid #719bff;outline-offset:3px;border-radius:4px}
.account-backup-content,.license-backup-content{padding-top:16px}
.account-license label{display:block;font-size:calc(17px * var(--mobile-font-scale, 1));font-weight:650;margin-bottom:6px}
.account-license-code{display:block;width:100%;max-width:100%;resize:vertical;margin:12px 0;padding:12px;border:1px solid #bdcbe3;border-radius:7px;background:#f7f9fd;color:#182236;font:calc(13px * var(--mobile-font-scale, 1))/1.5 ui-monospace,monospace;overflow-wrap:anywhere}
.account-license-code:focus-visible{outline:3px solid #719bff;outline-offset:3px}
.account-dialog .account-code-status:empty{display:none}
.account-dialog .account-code-pending{margin:12px 0 20px}
.account-legal{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;font-size:calc(14px * var(--mobile-font-scale, 1))}
.account-legal a{color:#235bea;text-underline-offset:3px}
.account-dialog [hidden]{display:none!important}
[data-theme="dark"] .account-dialog{background:#16263e;color:#edf3ff;border-color:#465a78}
[data-theme="dark"] .account-form input{background:#112037;color:#dce7fa;border-color:#506788}
[data-theme="dark"] .account-license{border-color:#3b5174}
[data-theme="dark"] .account-license-code{background:#112037;color:#dce7fa;border-color:#506788}
[data-theme="dark"] .account-message:not(:empty){background:#233d61}
[data-theme="dark"] .account-modes button[aria-pressed="true"]{background:#2a456d;border-color:#86a9ff;color:#c0d3ff}
[data-theme="dark"] .account-legal a{color:#a3bdff}
@media(max-width:760px){.account-dialog{padding:22px 18px}.account-dialog h2{font-size:calc(24px * var(--mobile-font-scale, 1))}.site-controls{flex-wrap:wrap}}

/* Section navigation shares the existing sticky header and language controls. */
:is(body>header,body>:where(.site-header-stack)>header).has-navigation{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;padding-block:18px}
.has-navigation>.privacy{display:none}
.has-navigation .brand-heading{min-width:0}
.has-navigation .brand{font-size:calc(18px * var(--mobile-font-scale, 1));gap:10px}
.has-navigation .brand-mark{flex-shrink:0;width:36px;height:36px;border-radius:7px}
.has-navigation .brand-mark img{width:26px;height:26px}
.site-navigation{min-width:0;justify-self:center}
.navigation-links{display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin:0}
.navigation-links a{display:flex;align-items:center;min-height:36px;padding:7px 9px;border-radius:7px;color:#fff;font-size:calc(14px * var(--mobile-font-scale, 1));font-weight:600;line-height:1.4;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.navigation-links a:hover,.navigation-links a[aria-current="location"]{background:#164bcc;color:#fff}
.navigation-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 11px;border:1px solid #b8cbff;border-radius:9px;background:transparent;color:#fff;font-size:calc(14px * var(--mobile-font-scale, 1));line-height:1;box-shadow:none}
.navigation-toggle svg{width:16px;height:16px}
.navigation-toggle:hover:not(:disabled),.navigation-toggle[aria-expanded="true"]{background:#164bcc;border-color:#fff;box-shadow:none}
.navigation-toggle[hidden],.navigation-links[hidden]{display:none!important}
[data-theme="dark"] .navigation-toggle{background:transparent;border-color:#b8cbff;color:#fff}
[data-theme="dark"] .navigation-toggle:hover,[data-theme="dark"] .navigation-toggle[aria-expanded="true"]{background:#164bcc;border-color:#fff}
/* A simple right off-canvas navigation, with the page moving alongside it. */
:root { --navigation-panel-width: min(250px, calc(100vw - 32px)); }
html.navigation-locked { overflow: hidden; scrollbar-gutter: stable; }
body.navigation-locked { overflow: hidden; }
.navigation-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--navigation-panel-width);
  max-width: none;
  height: 100vh;height: 100dvh;
  max-height: none;
  margin: 0;
  padding: max(72px, calc(env(safe-area-inset-top) + 56px)) 20px max(24px, env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-left: 1px solid #b8cbff;
  background: #235bea;
  color: #fff;
  box-shadow: -10px 0 40px #14233b1a;
}
.navigation-panel:not([open]) { display: none; }
.navigation-panel[open] { animation: navigation-enter 240ms ease-out; }
.navigation-panel::backdrop { background: #101d3559; animation: navigation-backdrop 240ms ease-out; }
.navigation-panel-heading { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 20px; }
.navigation-panel .navigation-close { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 6px; border: 0; border-radius: 0; background: transparent; color: #fff; box-shadow: none; }
.navigation-panel .navigation-close svg { width: 30px; height: 30px; }
.navigation-panel .navigation-close:hover:not(:disabled) { background: #164bcc; color: #fff; box-shadow: none; }
.navigation-panel .navigation-links { display: grid; gap: 2px; padding: 0; }
.navigation-panel .navigation-links a { display: block; min-height: 48px; padding: 9px 12px; border: 0; border-radius: 0; background: transparent; color: #fff; font-size:calc(26px * var(--mobile-font-scale, 1)); font-weight: 500; line-height: 1.4; white-space: normal; }
.navigation-panel .navigation-links a:hover,.navigation-panel .navigation-links a[aria-current="location"] { background: #164bcc; color: #fff; }
:is(body>header,body>:where(.site-header-stack)>header) :is(a,button):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.navigation-panel :is(a, button):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes navigation-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes navigation-backdrop { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1120px) {
  :is(body>header,body>:where(.site-header-stack)>header), body > main, body > footer { transition: transform 240ms ease-out; }
  body.navigation-locked > .site-header-stack, body.navigation-locked > header, body.navigation-locked > main, body.navigation-locked > footer { transform: translateX(calc(-1 * var(--navigation-panel-width))); }
}
@media (max-height: 450px) {
  .navigation-panel { padding-top: 60px; }
  .navigation-panel .navigation-links a { min-height: 44px; padding-block: 8px; font-size:calc(21px * var(--mobile-font-scale, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .navigation-panel[open], .navigation-panel::backdrop { animation: none; }
}
@media(max-width:1120px){
  :is(body>header,body>:where(.site-header-stack)>header).has-navigation{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:16px 24px}
  .has-navigation .brand-heading{grid-column:1/-1;grid-row:1}
  .has-navigation .brand{font-size:calc(18px * var(--mobile-font-scale, 1))}
  .has-navigation .site-controls{grid-column:1;grid-row:2;justify-self:stretch;margin-left:0;gap:8px;min-width:0;flex-wrap:nowrap}
  .has-navigation .language-switch{margin-left:auto}
  .site-navigation{grid-column:2;grid-row:2;justify-self:end}
}
@media(min-width:761px) and (max-width:1120px){
  :is(body>header,body>:where(.site-header-stack)>header).has-navigation{grid-template-columns:minmax(0,1fr) auto auto;padding-block:10px}
  .has-navigation .brand-heading{grid-column:1;grid-row:1}
  .has-navigation .site-controls{grid-column:2;grid-row:1;justify-self:end}
  .has-navigation .language-switch{margin-left:0}
  .site-navigation{grid-column:3;grid-row:1}
}
@media(max-width:480px){
  :is(body>header,body>:where(.site-header-stack)>header).has-navigation{padding:14px 16px;gap:12px 8px}
  .has-navigation .brand{font-size:calc(17px * var(--mobile-font-scale, 1));gap:8px}
  .has-navigation .site-controls{gap:6px;flex-wrap:nowrap}
  .has-navigation .theme-switch{min-width:36px;justify-content:center;padding:6px 8px}
  .has-navigation .theme-label{display:none}
  .has-navigation .site-controls .account-button{padding:6px 8px;font-size:calc(13px * var(--mobile-font-scale, 1))}
}
@media(max-width:360px){
  .has-navigation .brand{font-size:calc(15px * var(--mobile-font-scale, 1))}
  .navigation-toggle{width:36px;padding:6px}
  .navigation-toggle>span{display:none}
}

.pricing-plan{display:flex;flex-direction:column}
.pricing-plan-action{margin-top:auto;padding-top:26px}
.pricing-plan .pricing-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:12px 18px;border:1px solid #235bea;border-radius:9px;font:600 calc(16px * var(--mobile-font-scale, 1))/1.4 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:center;text-decoration:none;box-shadow:none;cursor:pointer;transition:background .15s,color .15s}
.pricing-plan .pricing-start{background:transparent;color:#235bea}
.pricing-plan .pricing-start:hover{background:#edf3ff;color:#164bcc}
.pricing-plan .pricing-unlock{background:#235bea;color:#fff}
.pricing-plan .pricing-unlock:hover{background:#164bcc;border-color:#164bcc}
[data-theme="dark"] .pricing-plan .pricing-start{border-color:#8caeff;color:#b6cbff}
[data-theme="dark"] .pricing-plan .pricing-start:hover{background:#233c60;color:#edf3ff}
[data-theme="dark"] .pricing-plan .pricing-unlock{background:#315ed4;border-color:#6489ed;color:#fff}
[data-theme="dark"] .pricing-plan .pricing-unlock:hover{background:#3c6ae3}

/* Give the main content sections a consistent, more generous separation. */
main > .help,
main > .pricing-summary,
main > .guide,
.guide > .img-advantages,
.guide > .browser-guide,
.guide > .faq {
  margin-top: 64px;
  padding-top: 64px;
}
main > .method-note { margin-bottom: 48px; }
@media (max-width: 760px) {
  main > .help,
  main > .pricing-summary,
  main > .guide,
  .guide > .img-advantages,
  .guide > .browser-guide,
  .guide > .faq {
    margin-top: 48px;
    padding-top: 48px;
  }
  main > .method-note { margin-bottom: 36px; }
}

/* Withdrawal uses the same forms, colours and spacing as the account flow. */
.withdrawal-form{display:grid;gap:12px;max-width:660px;margin:32px 0}.withdrawal-form label{font-weight:700;margin-top:8px}.withdrawal-form input{width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:var(--card,#fff);color:inherit;font:inherit}.withdrawal-form .small{font-size:calc(15px * var(--mobile-font-scale, 1));margin:0 0 8px}.withdrawal-form button{justify-self:start;margin-top:12px}.withdrawal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}#withdrawalReviewText{white-space:pre-wrap;overflow-wrap:anywhere}#withdrawalReceiptText{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--card,#fff);padding:24px;border:1px solid var(--line);border-radius:10px;font:inherit;line-height:1.6}.legal-nav .withdrawal-link{font-weight:700;text-decoration:none}.withdrawal-template p{margin-top:14px!important}[data-theme="dark"] .withdrawal-form input,[data-theme="dark"] #withdrawalReceiptText{background:#1d2a40;border-color:#3e506d;color:#e5ecf9}#withdrawalReview[hidden],#withdrawalReceipt[hidden],#withdrawalForm[hidden]{display:none}

/* Justify longer prose; language-specific hyphenation follows the page language. */
:is(.method-copy,.help,.guide,.pricing-summary,.legal-page) p:not(.eyebrow,.legal-date),
.legal-page li,
.guide-steps li,
.img-advantages li,
.account-dialog p:not(.account-email),
.license-dialog p,
.license-overview dd,
.consent-banner p,
.consent-detail,
.consent-choices small {
  text-align: justify;
  text-align-last: start;
  -webkit-hyphens: auto;
  hyphens: auto;
}
#kurzanleitung > p.lead { text-align: left; }
#kurzanleitung > p.lead + h3 { margin-top: 36px; }
code,pre,kbd,samp {
  -webkit-hyphens: none;
  hyphens: none;
}

/* Keep rejected files identifiable without relying on colour alone. */
.card.card-export-error{border-color:#b42318;box-shadow:0 0 0 2px #b42318}
.card-export-error .card-body{background:#fff0ed}
.card .card-export-notice{margin:10px 0 12px;color:#8d2118;font-size:calc(13px * var(--mobile-font-scale, 1));line-height:1.45;text-align:start;overflow-wrap:anywhere}
.card-export-notice strong,.card-export-notice span{display:block}
.card-export-notice strong{margin-bottom:5px;font-size:calc(14px * var(--mobile-font-scale, 1))}
[data-theme="dark"] .card.card-export-error{border-color:#ff998e;box-shadow:0 0 0 2px #ff998e}
[data-theme="dark"] .card-export-error .card-body{background:#43272b}
[data-theme="dark"] .card .card-export-notice{color:#ffd2ca}

/* Hide footer navigation and support content in print; retain the counter and site notes. */
@media print {
  body footer .legal-nav, body footer .legal-nav *, body footer .support-tool, body footer .support-tool * { display: none !important; visibility: hidden !important; }
}

/* Centre the printed footer independently of the separate print stylesheet. */
@media print {
  html body > footer, html body > footer * { text-align: center !important; }
  html body > footer > .footer-note, html body > footer > .footer-brand, html body > footer > .sprite-counter { display: block !important; width: 100% !important; max-width: none !important; margin-inline: 0 !important; }
}

/* Print the advantages as a single vertical list. */
@media print {
  html body #img-vorteile > ul {
    display: block !important;
    column-count: 1 !important;
    column-width: auto !important;
    column-gap: normal !important;
  }
  html body #img-vorteile > ul > li {
    display: block !important;
    width: auto !important;
    min-width: 0;
    margin: 0 0 5mm !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Start the image advantages on a fresh print page and keep each item intact. */
@media print {
  html body #img-vorteile {
    break-before: page;
    page-break-before: always;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  html body #img-vorteile > ul {
    columns: auto !important;
    overflow: visible !important;
  }
  html body #img-vorteile > ul > li {
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
    overflow: visible !important;
  }
}

/* Start the FAQ on a new printed page and keep answers with their questions. */
@media print {
  html body .guide > .faq {
    break-before: page;
    page-break-before: always;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .faq > .eyebrow { break-after: avoid; page-break-after: avoid; }
  .faq details { break-inside: avoid; page-break-inside: avoid; }
}

.html-export-options{display:grid;grid-template-columns:22px repeat(3,max-content);align-items:center;gap:12px 24px;padding:14px 22px;border-bottom:1px solid var(--line)}
.html-export-options label{display:flex;align-items:center;gap:10px;font-size:calc(15px * var(--mobile-font-scale, 1));line-height:1.5;cursor:pointer}
.html-export-options input{width:18px;height:18px;flex-shrink:0;margin:0;accent-color:var(--blue)}

.html-export-icon{grid-column:1;grid-row:1;display:block;width:22px;height:22px;flex-shrink:0;object-fit:contain}

@media(max-width:640px){.html-export-options{grid-template-columns:22px repeat(2,max-content);gap:12px 16px}.html-export-options label:last-of-type{grid-column:2/-1}}

.help p code,.guide p code,.guide li>code,.faq summary code{font-size:inherit}

.help p.sprite-file-note code{font-size:calc(17px * var(--mobile-font-scale, 1))}

/* Uniform size for all code elements, including nested code blocks. */
html body code{font-size:15px!important}

html body :is(h1,h2,h3,h4,h5,h6) code{font-size:inherit!important}

.license-dialog .license-message,.license-dialog [data-copy="paymentNote"]{text-align:left;text-align-last:auto;hyphens:none;-webkit-hyphens:none}

/* Slightly smaller type on small screens; print keeps its own sizing. */
@media screen and (max-width:600px){:root{--mobile-font-scale:.95}}

@media screen{.help .embed-example+.sprite-highlights{margin-top:64px}}

.empty>.empty-icon{display:block;width:48px;height:48px;object-fit:contain;margin:0 auto}

/* Both sign-in methods form one compact, accessible account dialog. */
.account-dialog{position:fixed;inset:0;margin:auto;padding:28px;scrollbar-gutter:stable}
.account-close{position:absolute;top:14px;right:14px;margin:0;padding:6px 9px;min-height:34px;font-size:13px}
.account-dialog h2{padding-right:90px;margin:0 0 10px;font-size:26px}
.account-dialog .account-intro{font-size:15px;line-height:1.55;margin:0 0 20px}
.account-dialog p:not(.account-email){text-align:left;hyphens:none}
.account-google{margin:18px 0 0;padding:0;border:0;min-width:0}
.account-google-load{display:block;width:100%;min-height:46px;margin:0;border:1px solid #bdcbe3;background:#fff;color:#243650;font-size:16px;font-weight:600;box-shadow:none}
.account-google-load:hover:not(:disabled){background:#f3f6fc;box-shadow:none}
.account-dialog .account-google-note{margin:9px 0 0;font-size:13px;line-height:1.5;color:#64748b;text-align:center}
.account-email-divider{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:#64748b;font-size:13px}
.account-email-divider:before,.account-email-divider:after{content:"";height:1px;flex:1;background:var(--line)}
.account-email-divider span{flex:none}
.account-modes{margin:0 0 16px;gap:6px;padding:4px;border-radius:10px;background:#f0f4fa}
.account-modes button{border:1px solid transparent;background:transparent;color:#586981;box-shadow:none;padding:9px 8px;min-height:40px;border-radius:7px;font-size:14px}
.account-modes button[aria-pressed="true"]{background:#fff;border-color:#d7e1f0;color:#235bea;box-shadow:0 1px 3px #1822360d}
.account-form label{font-size:15px;margin:13px 0 6px}
.account-form input{min-height:46px;font-size:16px;padding:10px 12px}
.account-dialog #account-password-hint{margin:7px 0 0;font-size:12px}
.account-submit{margin:18px 0 0;min-height:46px;font-size:15px;padding:11px 14px}
.account-forgot{display:block;margin:0 auto;font-size:14px}
.account-dialog .account-consent{margin:20px 0 0;font-size:12px;line-height:1.5;color:#64748b}
.account-legal{justify-content:center;margin-top:8px;font-size:13px;gap:16px}
[data-theme="dark"] .account-google-load{background:#1d304c;color:#e5ecf9;border-color:#506788}
[data-theme="dark"] .account-google-load:hover:not(:disabled){background:#29405f}
[data-theme="dark"] .account-modes{background:#112037}
[data-theme="dark"] .account-dialog .account-google-note,[data-theme="dark"] .account-dialog .account-consent,[data-theme="dark"] .account-email-divider{color:#adbed8}
@media(max-width:600px){.account-dialog{width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:24px 18px}.account-dialog h2{font-size:23px;padding-right:78px}.account-close{right:10px;top:12px;font-size:12px}.account-dialog .account-intro{font-size:14px}.account-google-load{font-size:15px}}


/* Group privacy choices by purpose, keeping each option independently selectable. */
.consent-category{min-width:0;margin:0 0 16px;padding:4px 16px 2px;border:1px solid #dbe4f3;border-radius:12px;background:#f8faff}
.consent-category:last-child{margin-bottom:0}
.consent-category>summary{max-width:100%;padding:0 7px;font-size:calc(14px * var(--mobile-font-scale, 1));font-weight:700;line-height:1.5;color:#315581}
.consent-category>label:first-of-type{border-top:0}
.consent-category label>span{min-width:0}
.consent-category small{text-align:left}
[data-theme="dark"] .consent-category{background:#1d2d44;border-color:#3a4e6c}
[data-theme="dark"] .consent-category>summary{color:#bad0f4}
@media(max-width:600px){.consent-category{padding-inline:12px}}

.account-google-load{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border-color:#747775;color:#1f1f1f;font-size:14px;font-weight:500}
.account-google-icon{display:block;width:20px;height:20px;flex:0 0 20px;object-fit:contain}
.account-google-label{min-width:0}
[data-theme="dark"] .account-google-load{background:#131314;border-color:#8e918f;color:#e3e3e3}

.consent-on-demand{display:flex;align-items:flex-start;gap:12px;padding:12px 0}
.consent-on-demand>span{min-width:0}
.consent-google-icon{display:block;width:20px;height:20px;flex:0 0 20px;margin-top:2px;object-fit:contain}
[data-theme="dark"] .account-modes button:not([aria-pressed="true"]){color:#adbed8}

.account-google-load{border-radius:24px;max-width:400px;margin-inline:auto}
.account-email-divider{margin:18px 0;color:#78869b;gap:16px}
.account-email-divider:before,.account-email-divider:after{background:#e3e9f2}
[data-theme="dark"] .account-email-divider:before,[data-theme="dark"] .account-email-divider:after{background:#3a4e6c}

.account-google-linked{display:flex;align-items:center;justify-content:center;gap:10px;text-align:left}
.account-google-linked span{min-width:0}

/* A quiet, separate surface for the optional Google sign-in. */
.account-google{padding:14px 16px;border:1px solid #e2e8f1;border-radius:12px;background:#f8fafd}
.account-google-load{max-width:368px;border-radius:6px;min-height:44px}
.account-dialog .account-google-note{font-size:12px;line-height:1.5;margin-top:10px}
.account-email-divider{margin:20px 0;gap:14px;font-size:12px}
.account-google-linked{margin:0}
[data-theme="dark"] .account-google{background:#112037;border-color:#354861}
@media(max-width:600px){.account-google{padding:12px 8px}}


.account-google{padding:12px 0}
.account-google-load{max-width:400px;width:calc(100% - 20px)}
.account-dialog .account-google-note{padding-inline:14px}
.account-google-linked{padding-inline:14px}

/* Compact Google entry point; privacy information stays visible before opening. */
.account-google{margin:20px 0 0;padding:0;border:0;border-radius:0;background:transparent}
.account-google-load{width:100%;max-width:none;min-height:48px;padding:12px 18px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#263247;font-size:15px;font-weight:600;gap:12px;box-shadow:0 1px 3px #18223608;transition:background .15s,border-color .15s,box-shadow .15s}
.account-google-load:hover:not(:disabled){background:#f8faff;border-color:#9aabc4;box-shadow:0 2px 6px #1822360d}
.account-google-icon{width:20px;height:20px}
.account-dialog .account-google-note{padding:0;margin:10px 2px 0;font-size:12px;line-height:1.55;text-align:left;color:#718096}
[data-theme="dark"] .account-google{background:transparent;border:0}
[data-theme="dark"] .account-google-load{background:#1d304c;border-color:#506788;color:#edf3ff;box-shadow:none}
[data-theme="dark"] .account-google-load:hover:not(:disabled){background:#29405f;border-color:#7995bc}

/* Clearer separation between consecutive legal paragraphs. */
.legal-page p+p{margin-top:20px}

/* Keep the footer full width beneath legal pages in both languages. */
.legal-page+footer{max-width:none}
@media(max-width:760px){.legal-page+footer{padding-inline:16px}}

/* Legal text links use the same blue as the site header. */
.legal-page a{color:var(--blue)}

.account-facebook{margin:16px 0 0;padding:0;border:0;min-width:0}
.account-facebook-load{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;padding:12px 18px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#263247;font-size:15px;font-weight:600;box-shadow:0 1px 3px #18223608}
.account-facebook-load:hover:not(:disabled){background:#f8faff;border-color:#9aabc4}
.account-facebook-icon{display:block;width:20px;height:20px;flex:0 0 20px;object-fit:contain}
.account-dialog .account-facebook-note{padding:0;margin:10px 2px 0;font-size:12px;line-height:1.55;text-align:left;color:#718096}
.account-facebook-linked{display:flex;align-items:center;gap:10px}
[data-theme="dark"] .account-facebook-load{background:#1d304c;border-color:#506788;color:#edf3ff}
[data-theme="dark"] .account-dialog .account-facebook-note{color:#adbed8}

[data-theme="dark"] .sprite-highlight-icon img{filter:brightness(0) saturate(100%) invert(79%) sepia(12%) saturate(1193%) hue-rotate(184deg) brightness(101%) contrast(101%)}

.clear-workspace-dialog h2{padding-right:0}
.clear-workspace-dialog p{line-height:1.6;margin:16px 0 24px}
.clear-workspace-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.clear-workspace-actions button{flex:1;min-height:44px}
@media(max-width:420px){.clear-workspace-actions{flex-direction:column}}
/* Destructive workspace actions. */
#clear{color:#b42332;border-color:#efc3c8;background:#fff5f5}
#clear:hover:not(:disabled){color:#951c29;background:#ffe7e9;border-color:#dc9da5}
.clear-workspace-dialog button[data-clear-confirm]{background:#b42332;border-color:#b42332;color:#fff;box-shadow:0 4px 12px #b4233220}
.clear-workspace-dialog button[data-clear-confirm]:hover:not(:disabled){background:#951c29;border-color:#951c29}
#clear:focus-visible,.clear-workspace-dialog button[data-clear-confirm]:focus-visible{outline-color:#e57883}
[data-theme="dark"] #clear{color:#ffb4bd;border-color:#80505b;background:#3b2633}
[data-theme="dark"] #clear:hover:not(:disabled){color:#ffd2d7;background:#512e3c;border-color:#b46b77}
[data-theme="dark"] .clear-workspace-dialog button[data-clear-confirm]{background:#b42332;border-color:#e57883;color:#fff}
[data-theme="dark"] .clear-workspace-dialog button[data-clear-confirm]:hover:not(:disabled){background:#951c29;border-color:#ffb4bd}

/* Keep modal popups centered in the viewport at every scroll position. */
dialog.account-dialog,dialog.license-dialog{position:fixed;inset:0;margin:auto;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto}
.import-progress-dialog{width:min(420px,calc(100vw - 32px));text-align:center}
.import-progress-dialog h2{padding-right:0;font-size:22px;margin:18px 0 10px}
.import-progress-dialog p:not(.account-email){text-align:center;margin:0 0 20px}
.import-progress-dialog progress{display:block;width:100%;height:8px;accent-color:#235bea;border:0;border-radius:8px;overflow:hidden}
.import-progress-dialog progress::-webkit-progress-bar{background:#e7edfa;border-radius:8px}
.import-progress-dialog progress::-webkit-progress-value{background:#235bea;border-radius:8px}
.import-spinner{width:42px;height:42px;margin:4px auto;border:4px solid #dce6fc;border-top-color:#235bea;border-radius:50%;animation:import-spin .8s linear infinite}
@keyframes import-spin{to{transform:rotate(360deg)}}
[data-theme="dark"] .import-spinner{border-color:#405475;border-top-color:#a9c3ff}
@media(prefers-reduced-motion:reduce){.import-spinner{animation:none}}

.toolbar #upload-size{font-size:14px;font-weight:500;color:#697998;white-space:nowrap}
[data-theme="dark"] .toolbar #upload-size{color:#adbed8}
.import-progress-dialog #import-progress-title:focus{outline:none;box-shadow:none}
dialog.import-progress-dialog #import-progress-title,dialog.import-progress-dialog p.import-progress-text{width:100%;padding-inline:0;text-align:center;text-align-last:center}
dialog.import-progress-dialog{scrollbar-gutter:auto}
dialog.import-progress-dialog .import-spinner,dialog.import-progress-dialog progress{margin-inline:auto}

.card .embed-code[hidden]{display:none}

.card .card-body{min-width:0}
.card .card-body h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Gallery format filter and sorting. */
.gallery-tools{padding:20px 22px;border-bottom:1px solid var(--line);background:#f8faff}
.gallery-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gallery-filters label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px;font-weight:600;color:#526482}
.gallery-filters input,.gallery-filters select{font:inherit;font-size:14px;min-width:0;width:100%;min-height:44px;padding:10px 12px;border:1px solid #ccd4e4;border-radius:9px;background:#fff;color:#25324b}
.gallery-summary{display:flex;justify-content:space-between;align-items:baseline;gap:8px 18px;flex-wrap:wrap;margin-top:14px;color:#697998;font-size:12px}
.gallery-summary small{font-size:12px}
.gallery-no-results{text-align:center;padding:32px 20px}
.gallery-no-results p{text-align:center;text-align-last:center;margin:0 0 14px}
.gallery-tools[hidden],.gallery-no-results[hidden],.grid .card[hidden]{display:none!important}
.card-file-size{font-size:calc(12px * var(--mobile-font-scale, 1));font-weight:400;color:inherit;white-space:nowrap}
.card .meta{font-size:calc(13px * var(--mobile-font-scale, 1))}
.card-meta-separator{font-weight:400;color:#9298a3}
[data-theme="dark"] .gallery-tools{background:#1c2d46;border-color:#344964}
[data-theme="dark"] .gallery-filters input,[data-theme="dark"] .gallery-filters select{background:#16263e;color:#edf3ff;border-color:#465a78}

.gallery-filters select:focus-visible{outline:3px solid #719bff;outline-offset:3px}
@media(max-width:500px){.gallery-tools{padding:16px 14px}.gallery-filters{grid-template-columns:1fr}}

[data-theme="dark"] .gallery-filters label,[data-theme="dark"] .gallery-summary,[data-theme="dark"] .card-file-size{color:#adbed8}

/* Shared controls appear once there are images in the workspace. */
.html-export-options[hidden]{display:none!important}
.html-export-options{display:flex;flex-wrap:wrap;gap:10px 14px}
.html-export-options>label{white-space:nowrap;gap:7px}
.html-export-options .gallery-filters{display:flex;flex:1;justify-content:flex-end;gap:12px;margin-left:auto}
.html-export-options .gallery-filters label{flex-direction:row;gap:8px;min-width:0;font-size:13px;white-space:nowrap}
.html-export-options .gallery-filters select{width:auto;max-width:210px;min-height:38px;padding:8px;font-size:13px}
.gallery-tools{padding:10px 22px;background:transparent}
.gallery-summary{margin-top:0}
/* Compact intermediate layout: keep filters beside the Retina option. */
@media(min-width:501px) and (max-width:1400px){
 .html-export-options{gap:8px 12px}
 .html-export-options .gallery-filters{flex:0 1 auto;justify-content:flex-start;gap:8px;margin-left:0}
 .html-export-options .gallery-filters label{flex:0 1 auto;gap:6px;font-size:12px}
 .html-export-options .gallery-filters select{flex:0 1 clamp(110px,12vw,148px);width:clamp(110px,12vw,148px);max-width:clamp(110px,12vw,148px);min-height:36px;padding:6px 8px;font-size:12px}
}
@media(max-width:500px){.html-export-options{gap:10px}.html-export-options .gallery-filters{flex-wrap:wrap}.html-export-options .gallery-filters label{flex-basis:100%}.html-export-options .gallery-filters label>span{min-width:80px}.gallery-tools{padding:10px 14px}}

.html-export-options .gallery-filters{align-items:center}
.html-export-options .gallery-sort-prefix{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;color:inherit;font-size:calc(15px * var(--mobile-font-scale, 1));font-weight:400;line-height:1.5;white-space:nowrap}
@media(max-width:500px){.html-export-options .gallery-sort-prefix{flex-basis:100%}}

.card-sprite-source{display:table;max-width:100%;margin:0 0 8px;padding:3px 8px;border-radius:6px;background:#eaf0ff;color:#31568a;font-size:12px;font-weight:500;line-height:1.4}
[data-theme="dark"] .card-sprite-source{background:#263d5f;color:#bfd3ff}

.replacement-names{max-height:180px;overflow:auto;padding-left:24px;margin:12px 0 24px;overflow-wrap:anywhere}

.footer-languages{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;width:100%;font-size:14px}
.footer-languages a{color:var(--blue);text-underline-offset:3px}

.replace-icons-dialog .clear-workspace-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.replace-icons-dialog .clear-workspace-actions button{min-width:0}
.replace-icons-dialog .clear-workspace-actions [data-both]{grid-column:1 / -1}

.replace-icons-dialog #replace-icons-description p{margin:12px 0}

.copy-all-dialog textarea{display:block;width:100%;height:240px;max-height:40vh;resize:vertical;margin:16px 0 24px;padding:12px;border:1px solid var(--line);border-radius:8px;font:14px/1.6 ui-monospace,monospace;background:var(--input-bg,#f4f6fb);color:inherit}
[data-theme="dark"] .copy-all-dialog textarea{background:#182236}

.copy-all-row{display:flex;justify-content:center;padding:22px 22px 0}
@media(max-width:760px){.copy-all-row{padding:14px 14px 0}}
.copy-all-row[hidden]{display:none}
#copy-all-tags{border:1px solid #ccd4e4;background:#fff;color:#25324b;font-weight:500;padding:8px 16px;box-shadow:0 2px 5px #23345810}
#copy-all-tags:hover:not(:disabled){background:#e3ebfc;border-color:#bdcbe0;color:#25324b;box-shadow:0 2px 5px #23345810}
[data-theme="dark"] #copy-all-tags{background:#202c40;border-color:#3e506d;color:#c4cede}
[data-theme="dark"] #copy-all-tags:hover:not(:disabled){background:#293951;border-color:#647995;color:#eef3fc}

#try-example{margin-top:20px;background:#edf2fe;color:var(--blue);border-color:#ccd4e4;box-shadow:0 2px 5px #23345810}
#try-example:hover:not(:disabled){background:#fff}
[data-theme="dark"] #try-example{background:#202c40;color:#b6cbff;border-color:#3e506d}
[data-theme="dark"] #try-example:hover:not(:disabled){background:#293951}

.export-summary-files{padding-left:22px;margin:16px 0 24px;line-height:1.7}
.export-summary-files li{margin:8px 0;overflow-wrap:anywhere}
.export-summary-files code{font-size:.9em}

.card.dragging{opacity:.7}

.grid .card{cursor:move;user-select:none;touch-action:pan-y}
.grid .card.dragging{cursor:move}
.grid .card button{cursor:pointer}
.grid .card .embed-code{cursor:text;user-select:text}

.card-drag-ghost{position:fixed!important;z-index:10000;pointer-events:none;opacity:.9;background:#fff;box-shadow:0 14px 32px #18223640;transform-origin:center;will-change:transform}
[data-theme="dark"] .card-drag-ghost{background:#1d2a40}
@media(prefers-reduced-motion:reduce){.card-drag-ghost{transform-origin:center}}

.grid .card:focus-visible{outline:3px solid #719bff;outline-offset:3px}

.image-editor{margin:12px 0 4px;font-size:15px;cursor:default;user-select:text}
.image-editor summary{cursor:pointer;color:var(--blue);font-weight:500;padding:6px 0}
.image-editor form{display:grid;gap:12px;margin-top:10px}
.image-editor label{display:grid;gap:5px;font-size:14px;font-weight:600}
.image-editor input[type="text"],.image-editor textarea{width:100%;min-width:0;padding:8px;border:1px solid var(--line);border-radius:6px;font:inherit;background:#fff;color:inherit}
.image-editor textarea{resize:vertical;font-weight:400}
.image-name-field{display:flex;align-items:center;gap:4px;min-width:0}
.image-editor .image-name-field input{flex:1;font-weight:400}
.image-name-field>span{font-weight:400}
.image-editor .image-decorative{display:flex;align-items:center;font-weight:400}
.image-editor small{color:#5d6980;font-size:13px;line-height:1.5}
.image-editor .image-editor-error{color:#b42332;font-size:14px;margin:0}
.image-editor button{font-size:15px;min-height:36px;padding:6px 10px}
[data-theme="dark"] .image-editor input[type="text"],[data-theme="dark"] .image-editor textarea{background:#182236}
[data-theme="dark"] .image-editor small{color:#b9c6dc}
[data-theme="dark"] .image-editor summary{color:#b6cbff}

.image-editor button[type="submit"]{background:#edf2fe;box-shadow:0 2px 5px #23345810}
.image-editor button[type="submit"]:hover:not(:disabled){background:#fff}
[data-theme="dark"] .image-editor button[type="submit"]{background:#293951;color:#eef3fc}
[data-theme="dark"] .image-editor button[type="submit"]:hover:not(:disabled){background:#fff;color:#25324b}




.project-settings{padding:14px 22px;border-bottom:1px solid var(--line);font-size:15px}
.project-settings[hidden]{display:none}
.project-settings summary{cursor:pointer;color:var(--blue);font-weight:500;font-size:15px}
.project-settings-body{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:16px;margin-top:16px}
.project-settings label{display:grid;align-content:start;min-width:0;gap:6px}
.project-settings input,.project-settings select{width:100%;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;background:#fff;color:inherit}
.project-settings-note,.project-settings [data-status]{grid-column:1 / -1;margin:0;font-size:14px}
.project-settings-note{margin-top:-10px}
.project-settings [data-reset],.project-settings [data-open]{justify-self:start;font-size:15px}
[data-theme="dark"] .project-settings input,[data-theme="dark"] .project-settings select{background:#182236}
[data-theme="dark"] .project-settings summary{color:#b6cbff}
@media(max-width:600px){.project-settings-body{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.project-settings-body{grid-template-columns:1fr}}

.project-settings-actions{grid-column:1 / -1;display:flex;align-items:center;gap:18px}

.image-editor .image-editor-reset,.image-editor .image-editor-reset:hover:not(:disabled){justify-self:center;margin-bottom:-8px;border:0;padding:0;background:transparent;box-shadow:none;color:var(--blue);font:inherit;text-decoration:underline;text-underline-offset:3px}
[data-theme="dark"] .image-editor .image-editor-reset{color:#b6cbff}


.site-tooltip{position:fixed;z-index:10000;box-sizing:border-box;max-width:min(320px,calc(100vw - 16px));padding:10px 14px;border:1px solid #425573;border-radius:10px;background:#1d2c45;color:#fff;box-shadow:0 6px 20px #10213a30;font:400 14px/1.45 system-ui,sans-serif;overflow-wrap:anywhere;text-align:left;white-space:normal}
.site-tooltip[hidden]{display:none}
.site-tooltip::before{content:"";position:absolute;left:50%;width:10px;height:10px;background:inherit;border:inherit;transform:translateX(-50%) rotate(45deg)}
.site-tooltip[data-position="above"]::before{bottom:-6px;border-top:0;border-left:0}
.site-tooltip[data-position="below"]::before{top:-6px;border-right:0;border-bottom:0}
[data-theme="dark"] .site-tooltip{background:#eaf0ff;color:#18243a;border-color:#cbd7ef;box-shadow:0 6px 20px #0005}




.grid>.card.editor-overlay{overflow:visible;z-index:10}
.grid>.card.editor-overlay>.preview{border-radius:9px 9px 0 0}
.grid>.card.editor-overlay>.card-body{position:absolute;top:var(--editor-top);left:-1px;right:-1px;z-index:1;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;box-shadow:0 12px 22px #23345826}
[data-theme="dark"] .grid>.card.editor-overlay>.card-body{background:#182236;box-shadow:0 12px 22px #0006}

.grid>.card.editor-covered{visibility:hidden;pointer-events:none}

.grid>.card{align-self:start}

.card .single-image-download{position:absolute;left:5px;top:5px;width:34px;height:34px;min-height:34px;padding:5px;border-radius:7px;background:#ffffffed;border-color:#dde3ed;color:#25324b;display:flex;align-items:center;justify-content:center}
.card .single-image-download svg{display:block;width:23px;height:23px}
[data-theme="dark"] .card .single-image-download{background:#202a3bee;color:#e5ecf9;border-color:#576b8a}



.workspace[data-compat-has-0]{overflow:visible}

.grid{padding-bottom:calc(22px + var(--editor-extra-space,0px))}
@media(max-width:760px){.grid{padding-bottom:calc(14px + var(--editor-extra-space,0px))}}

/* Shared rows keep both price comparisons aligned, including wrapped text. */
@media (min-width:761px){
 .pricing-grid{row-gap:0}
 .pricing-plan{display:grid;grid-template-rows:subgrid;grid-row:span 11;row-gap:0}
 .pricing-table{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:0}
 .pricing-table tbody{display:contents}
 .pricing-table tr{display:grid;grid-template-columns:53% minmax(0,1fr)}
 .pricing-table th{width:auto}
 .pricing-plan-action{margin-top:0;align-self:end}
}

/* Match the advanced settings summary. */
.project-file-actions .project-file-link{display:inline-flex;align-items:center;gap:5px;padding:4px 0;min-height:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--blue);font-family:inherit;font-size:15px;font-weight:500;line-height:1.5;text-decoration:none;cursor:pointer}
.project-file-actions .project-file-link::before{content:"";width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;flex-shrink:0}
.project-file-actions .project-file-link:disabled{opacity:.45;cursor:default}
[data-theme="dark"] .project-file-actions .project-file-link{color:#b6cbff}

/* Three cards across at intermediate viewport widths. */
@media (min-width:601px) and (max-width:899px){#grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media (max-width:600px){#grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (max-width:475px){#grid{grid-template-columns:minmax(0,1fr)}}

@media (min-width:900px){#grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

@media (min-width:1100px){#grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

@media (max-width:450px){
 #grid>.card[data-compat-has-1]{box-shadow:0 12px 22px #23345826}
 [data-theme="dark"] #grid>.card[data-compat-has-1]{box-shadow:0 12px 22px #0006}
}

@media (max-width:450px){
 .toolbar .actions{row-gap:18px}
 .html-export-options{display:grid;grid-template-columns:22px max-content minmax(0,1fr);gap:12px 10px;align-items:center}
 .html-export-options>.html-export-icon{grid-column:1;grid-row:1}
 .html-export-options>label[data-compat-has-2]{grid-column:2;grid-row:1}
 .html-export-options>label[data-compat-has-3]{grid-column:3;grid-row:1}
 .html-export-options>label[data-compat-has-4]{grid-column:2 / -1;grid-row:2}
 .html-export-options .gallery-filters{grid-column:1 / -1;grid-row:3;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:24px 0 0;width:100%;min-width:0}
 .html-export-options .gallery-sort-prefix{display:none}
 .html-export-options .gallery-filters label{width:100%}
 .html-export-options .gallery-filters select{width:100%;max-width:100%}
}

@media (max-width:450px){
 .html-export-options .gallery-filters>label{grid-column:1 / -1;grid-row:auto;width:100%;min-width:0}
 .html-export-options .gallery-filters>label>select{width:100%;min-width:0;max-width:100%;flex:auto}
}

@media (max-width:450px){.html-export-options .gallery-filters{row-gap:4px}}

/* Consistent font size for displayed code examples. */
main pre,main pre code{font-size:14px}

/* Keep the additional Retina example aligned with the existing guide. */
.help .retina-code-alternative{width:100%;max-width:760px;min-width:0}
.help .retina-code-alternative pre{box-sizing:border-box;width:100%;max-width:100%;min-width:0;overflow-x:auto}

.copyable-code{position:relative;width:100%;min-width:0;margin:16px 0;break-inside:avoid}
.help>.copyable-code,.retina-code-alternative>.copyable-code{max-width:760px}
.code-copy-toolbar{position:absolute;z-index:1;top:8px;right:8px;display:flex;align-items:center}
.code-copy-button{min-height:30px;padding:4px 10px;border:1px solid #607392;border-radius:6px;background:#243750;color:#fff;font-size:12px;line-height:1.4;white-space:nowrap}
.code-copy-button:hover:not(:disabled){background:#354d6b;color:#fff}
.code-copy-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.copyable-code>pre{box-sizing:border-box;width:100%;max-width:100%;min-width:0;margin:0!important;padding-right:140px;min-height:48px;overflow-x:auto}

.code-copy-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:32px;padding:6px}
.code-copy-button img{display:block;width:18px;height:18px}
.copyable-code>pre{padding-right:56px}

/* Editor-style code panels; decorative window controls are drawn in CSS. */
main .copyable-code{border:1px solid #363845;border-radius:14px;overflow:hidden;background:#282a36}
main .copyable-code .code-copy-toolbar{position:relative;inset:auto;display:flex;justify-content:flex-end;align-items:center;min-height:52px;padding:8px 16px;background:#21222c;border-bottom:1px solid #30323e}
main .copyable-code .code-copy-toolbar::before{content:"";position:absolute;left:22px;top:19px;width:14px;height:14px;border-radius:50%;background:#ff5f57;box-shadow:24px 0 #ffbd2e,48px 0 #28c840;pointer-events:none}
main .copyable-code .code-language{margin-left:90px;margin-right:auto;color:#c4c7d4;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.08em}
main .copyable-code .code-copy-button{background:transparent;border-color:transparent;color:#f8f8f2;box-shadow:none}
main .copyable-code .code-copy-button:hover:not(:disabled){background:#363845;border-color:#55586a}
main .copyable-code .code-copy-button:focus-visible{outline-offset:0}
main .copyable-code>pre,main :is(.guide,.help) .copyable-code>pre[data-code-type]{margin:0!important;padding:26px 28px;background:#282a36;color:#f8f8f2;border:0;border-radius:0;min-height:0;font-size:15px;line-height:1.75;tab-size:2;text-align:left;overflow-x:auto}
main .copyable-code>pre[data-code-type]::before{content:none}
main .copyable-code>pre code{background:transparent;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-weight:400}
@media(max-width:600px){main .copyable-code{border-radius:11px}main .copyable-code>pre,main :is(.guide,.help) .copyable-code>pre[data-code-type]{padding:20px 16px;font-size:13px}main .copyable-code .code-copy-toolbar{padding-right:10px}main .copyable-code .code-copy-toolbar::before{left:16px}}

/* Same responsive width before and after adding copy controls. */
#kurzanleitung .copyable-code,
#kurzanleitung .retina-code-alternative,
#kurzanleitung pre{box-sizing:border-box;width:100%;max-width:760px;min-width:0}
#kurzanleitung .copyable-code>pre{max-width:100%;overflow-x:auto}

.export-summary-files .export-file-size{font-size:13px;font-weight:400;color:#6b7890;white-space:nowrap}[data-theme="dark"] .export-summary-files .export-file-size{color:#a6b2c7}

.export-summary-dialog [data-vector-retina],.export-summary-dialog .export-background-note{box-sizing:border-box;padding:18px 22px;border-left:4px solid #6289e0;background:#eaf1ff;border-radius:0 8px 8px 0;overflow-wrap:anywhere}[data-theme="dark"] .export-summary-dialog [data-vector-retina],[data-theme="dark"] .export-summary-dialog .export-background-note{background:#1b2d49;color:#c0d1ef;border-left-color:#86a9ff}

.retina-check-dialog .clear-workspace-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.retina-check-dialog .clear-workspace-actions button{min-width:0;white-space:normal}.retina-check-dialog [data-svg]{grid-column:1 / -1}@media(max-width:420px){.retina-check-dialog .clear-workspace-actions{grid-template-columns:minmax(0,1fr)}}

.retina-check-dialog [data-vector-note]{box-sizing:border-box;padding:18px 22px;border-left:4px solid #6289e0;background:#eaf1ff;border-radius:0 8px 8px 0;overflow-wrap:anywhere}[data-theme="dark"] .retina-check-dialog [data-vector-note]{background:#1b2d49;color:#c0d1ef;border-left-color:#86a9ff}

.license-overview .license-overview-price{display:flex;align-items:baseline;gap:.25em;margin:10px 0 12px;font-size:calc(56px * var(--mobile-font-scale,1));line-height:1.05;letter-spacing:-.05em}.license-overview-price s{font-size:.4em;font-weight:400;color:#68758d;letter-spacing:normal;white-space:nowrap}.license-overview-offer{display:block;color:#235bea;font-weight:700;margin-bottom:12px}[data-theme="dark"] .license-overview-price s{color:#b4c1d8}[data-theme="dark"] .license-overview-offer{color:#a3bdff}@media(max-width:760px){.license-overview .license-overview-price{font-size:calc(48px * var(--mobile-font-scale,1))}}

/* Standard responsive YouTube player. */
.tutorial-section{margin:64px 0 0;padding:52px 0 0;border-top:1px solid var(--line)}
.tutorial-section h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.025em;margin:0 0 14px}
.tutorial-section .tutorial-lead{max-width:none;margin:0 0 28px;color:#5d6980;font-size:calc(20px * var(--mobile-font-scale,1));line-height:1.6}
.tutorial-player{aspect-ratio:16/9;width:100%;background:#000}
.tutorial-player iframe{display:block;width:100%;height:100%;border:0}
.tutorial-external-preview{display:block;color:#fff;text-decoration:none;overflow:hidden}
.tutorial-external-preview:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.tutorial-lightbox{box-sizing:border-box;width:min(1000px,94vw);max-width:94vw;max-height:92vh;max-height:92dvh;padding:20px;border:1px solid #405574;border-radius:16px;background:#17263d;color:#fff;overflow:auto}
.tutorial-lightbox::backdrop{background:rgba(0,0,0,.78)}
.tutorial-lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.tutorial-lightbox-header h2{margin:0;font-size:20px;color:#fff}
.tutorial-lightbox .tutorial-lightbox-close{flex:none;width:44px;height:44px;padding:0;border:1px solid #71829b;border-radius:8px;background:transparent;color:#fff;font-size:28px;cursor:pointer}
.tutorial-lightbox .tutorial-lightbox-link{display:inline-block;margin-top:18px;color:#b7ceff;text-decoration:underline;text-underline-offset:4px}
.tutorial-lightbox-open{overflow:hidden}
@media(max-width:600px){.tutorial-lightbox{padding:12px}.tutorial-lightbox-header h2{font-size:17px}}
@media(max-width:450px){.tutorial-section{margin-top:40px;padding-top:32px}}
@media print{.tutorial-section{display:none}}

/* Local preview: a single centered playback control, with consent on activation. */
.tutorial-player[data-compat-has-5]{aspect-ratio:auto;background:transparent}
.tutorial-privacy{width:100%;overflow:hidden;border:1px solid var(--line);border-radius:0;box-shadow:0 16px 44px rgba(19,39,78,.1)}
.tutorial-preview{position:relative;isolation:isolate;background:#12223e}
.tutorial-preview>picture,.tutorial-preview>picture>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.tutorial-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,24,47,.12),rgba(10,24,47,.38) 52%,rgba(10,24,47,.72));pointer-events:none}
.tutorial-overlay{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;color:#fff}
.tutorial-play-row{display:flex;align-items:center;justify-content:center;gap:18px;padding:14px 26px;border:1px solid rgba(255,255,255,.5);border-radius:100px;background:rgba(255,255,255,.95);box-shadow:0 12px 40px rgba(0,0,0,.22);color:#17243a}
.tutorial-play-row>span{font-size:clamp(17px,2vw,25px);font-weight:600;line-height:1.2;letter-spacing:-.02em}
.tutorial-preview .tutorial-play{display:grid;place-items:center;flex:0 0 66px;width:66px;height:66px;min-width:0;padding:0;border:0;border-radius:50%;background:#2457ef;color:#fff;box-shadow:0 5px 16px rgba(36,87,239,.25);cursor:pointer;transition:background .18s,box-shadow .18s}
.tutorial-preview .tutorial-play svg{display:block;width:30px;height:30px;fill:currentColor;margin-left:3px}
.tutorial-preview .tutorial-play:hover{background:#1647d5;box-shadow:0 6px 22px rgba(36,87,239,.4)}
.tutorial-preview .tutorial-play:focus-visible{outline:3px solid #17243a;outline-offset:5px}
.tutorial-overlay p{position:absolute;bottom:24px;left:24px;right:24px;max-width:660px;margin:0 auto;font-size:13px;line-height:1.6;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
@media(max-width:600px){.tutorial-privacy{border-radius:0}.tutorial-overlay{padding:18px}.tutorial-play-row{gap:12px;padding:10px 18px}.tutorial-preview .tutorial-play{flex-basis:54px;width:54px;height:54px}.tutorial-preview .tutorial-play svg{width:26px;height:26px}.tutorial-overlay p{bottom:16px;left:18px;right:18px;font-size:12px;line-height:1.5}}
@media(max-width:450px){.tutorial-preview{min-height:300px}.tutorial-preview>picture>img{height:300px;object-fit:cover}.tutorial-play-row{margin-bottom:44px}.tutorial-play-row>span{font-size:17px}}

/* Keep only the blue playback button. */
.tutorial-preview .tutorial-play-row{padding:0;border:0;background:transparent;box-shadow:none}

.tutorial-overlay .tutorial-privacy-link{display:inline;padding:0;margin:0;border:0;border-radius:0;min-width:0;min-height:0;background:none;box-shadow:none;color:inherit;font:inherit;text-shadow:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.tutorial-overlay .tutorial-privacy-link:hover{background:none;color:#dce7ff;box-shadow:none}.tutorial-overlay .tutorial-privacy-link:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.tutorial-player video{display:block;width:100%;height:100%;border:0;background:#000}

.footer-note > .report-problem{display:block;margin-bottom:12px;color:inherit;text-underline-offset:3px}

.faq summary.faq-link-arrival:focus{outline:none}

.project-settings .project-srcset{grid-column:1/-1;display:flex;align-items:center;gap:8px}.project-settings .project-srcset input{width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--blue)}.project-srcset-note{grid-column:1/-1;margin:0;font-size:14px}

@media(max-width:450px){.html-export-options>label[data-compat-has-6]{grid-column:2;grid-row:2}.html-export-options>label[data-compat-has-4]{grid-column:3;grid-row:2}}

.html-export-options>label[hidden]{display:none!important}
@media(max-width:450px){.html-export-options>label[data-compat-has-3]{grid-column:2;grid-row:1}.html-export-options>label[data-compat-has-6]{grid-column:3;grid-row:1}.html-export-options>label[data-compat-has-4]{grid-column:2/-1;grid-row:2}}

.project-srcset-note[hidden]{display:none!important}

@media(max-width:450px){.html-export-options>label[data-compat-has-4]{grid-column:3;grid-row:1}.html-export-options>label[data-compat-has-6]{grid-column:2/-1;grid-row:2}}

.vector-size-note{font-weight:700}

/* Per-image export dimensions */
.image-size-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.image-editor input[type="number"]{width:100%;min-width:0;padding:8px;border:1px solid var(--line);border-radius:6px;font:inherit;font-weight:400;background:#fff;color:inherit}
[data-theme="dark"] .image-editor input[type="number"]{background:#182236}

.retina-code-alternative > p{box-sizing:border-box;margin:32px 0 24px;padding:18px 22px;border-left:4px solid #6289e0;background:#eaf1ff;border-radius:0 8px 8px 0;font-weight:400;overflow-wrap:anywhere}
[data-theme="dark"] .retina-code-alternative > p{background:#1b2d49;color:#c0d1ef;border-left-color:#86a9ff}

@media(max-width:450px){.html-export-options>label[data-compat-has-7]{grid-column:2/-1;grid-row:3}}

/* Keep both Retina alternatives visible, above the gallery filters. */
@media(max-width:450px){
 .html-export-options>label[data-compat-has-6]{grid-column:2;grid-row:2}
 .html-export-options>label[data-compat-has-7]{grid-column:3;grid-row:2}
 .html-export-options .gallery-filters{grid-column:1/-1;grid-row:3}
 .html-export-options>label[data-compat-has-6],.html-export-options>label[data-compat-has-7]{white-space:normal;min-width:0}
}

/* Direct button activation keeps the file picker available on iOS Safari. */
.project-file-menu{position:relative;width:150px;max-width:100%}
.project-file-menu>summary{display:flex;align-items:center;justify-content:space-between;min-height:32px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card,#fff);color:var(--ink,#182236);font-size:15px;font-weight:500;cursor:pointer;list-style:none}
.project-file-menu>summary::-webkit-details-marker{display:none}
.project-file-menu>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 3px 4px 12px}
.project-file-menu>summary[aria-disabled="true"]{opacity:.5;cursor:default}
.project-file-choices{position:absolute;top:calc(100% + 5px);left:0;z-index:30;min-width:190px;padding:6px;background:var(--card,#fff);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #17263c26}
.project-file-actions .project-file-choices .project-file-link{display:flex;width:100%;min-height:44px;padding:9px 12px;border-radius:5px;text-align:left}
.project-file-actions .project-file-choices .project-file-link::before{display:none}
.project-file-choices .project-file-link:hover:not(:disabled){background:#eaf1ff}
[data-theme="dark"] .project-file-menu>summary,[data-theme="dark"] .project-file-choices{background:#182236;color:#eef3fc}
[data-theme="dark"] .project-file-choices .project-file-link:hover:not(:disabled){background:#293951}

#pricing-paid-title{color:#235bea}

.image-editor .image-size-heading{margin:4px 0 0;font-size:14px;font-weight:600;line-height:1.5}


.retina-technique{margin:28px 0 56px}.retina-technique h3{margin:0 0 14px}

#technik .retina-technique,#technik .retina-technique-description,#technik .retina-technique-description>p{width:100%;max-width:none}
#technik .retina-technique-description>p{margin:0 0 20px}
#technik .retina-technique-description>p:last-child{margin-bottom:0}

.retina-technique-description ol{margin:0 0 20px;padding-left:1.5em;list-style:decimal}
.retina-technique-description ol>li{display:list-item;margin:0 0 18px;padding-left:4px}
.retina-technique-description ol>li>p{margin:0}

.method-copy>.guide-link{margin-top:4px}

/* Give footer links modest spacing on small and medium screens. */
@media(max-width:900px){
 footer{gap:10px}
 footer>.legal-nav{gap:10px 24px;margin-bottom:4px}
 footer>.legal-nav>a,footer>.legal-nav>.privacy-settings,footer>.footer-languages>a{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:3px 2px}
 footer>.footer-languages{gap:8px 20px;margin-top:0}
}

.sprite-size{position:relative;margin:12px 18px 18px;padding-bottom:25px;color:#5d6980;font-size:12px;line-height:1.4}.sprite-size[hidden]{display:none}.sprite-size-track{height:8px;border-radius:4px;background:#dbe1ed;overflow:hidden}.sprite-size-fill{display:block;height:100%;background:var(--blue);border-radius:inherit;transition:width .2s}.sprite-size-mark{position:absolute;top:16px;white-space:nowrap}.sprite-size-mark::before{content:"";position:absolute;top:-18px;width:1px;height:12px;background:currentColor}.sprite-size-mark-free{left:20%;transform:translateX(-50%)}.sprite-size-mark-free::before{left:50%}.sprite-size-mark-premium{right:0}.sprite-size-mark-premium::before{right:0}.sprite-size-warning .sprite-size-fill{background:linear-gradient(to right,var(--blue) 0 var(--allowed-share,100%),#dc354f var(--allowed-share,100%) 100%)}[data-theme="dark"] .sprite-size{color:#b4c1d8}[data-theme="dark"] .sprite-size-track{background:#35445e}[data-theme="dark"] .sprite-size-warning .sprite-size-fill{background:linear-gradient(to right,var(--blue) 0 var(--allowed-share,100%),#f2778c var(--allowed-share,100%) 100%)}

.card .remove:disabled{opacity:1}

.replacement-apply-all{display:flex;align-items:center;gap:10px;margin:20px 0;font-size:16px;color:inherit}.replacement-apply-all[hidden]{display:none}.replacement-apply-all input{width:20px;height:20px;accent-color:var(--blue)}

.replace-icons-dialog{width:min(600px,calc(100% - 32px));max-width:600px}
.replace-icons-dialog h2{font-size:clamp(23px,4vw,28px);line-height:1.25;letter-spacing:-.025em;margin:0 0 14px}
.replace-icons-dialog #replace-icons-description .replacement-intro{font-size:16px;line-height:1.55;margin:0 0 20px}
.replacement-options{margin:22px 8px 0;padding:0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.replacement-options>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:14px 8px}
.replacement-options>div+div{border-top:1px solid var(--line)}
.replacement-options dt{font-size:15px;font-weight:600;line-height:1.5}
.replacement-options dd{margin:0;color:#5d6980;font-size:14px;line-height:1.5}
.replace-icons-dialog #replace-icons-description .replacement-footnote{font-size:14px;line-height:1.55;margin:12px 0 0}
.replace-icons-dialog .replacement-apply-all{align-items:flex-start;padding:14px;background:#f4f6fb;border:0;border-radius:10px;margin:20px 0;gap:12px}
.replacement-apply-all input{flex-shrink:0;margin:2px 0 0}
.replacement-apply-all strong{display:block;font-size:14px;font-weight:600}
.replacement-apply-all small{display:block;font-size:14px;line-height:1.5;color:#5d6980;margin-top:3px}
.replace-icons-dialog .clear-workspace-actions{gap:10px;margin-top:20px}
.replace-icons-dialog .clear-workspace-actions button{font-size:15px;padding:11px 14px}
[data-theme="dark"] .replacement-options dd,[data-theme="dark"] .replacement-apply-all small{color:#b4c1d8}
[data-theme="dark"] .replace-icons-dialog .replacement-apply-all{background:#182840;border-color:#3b4d69}
[data-theme="dark"] .replacement-options{background:transparent;border-color:#3b5174;box-shadow:none}
[data-theme="dark"] .replacement-options>div+div{border-color:#3b5174}
@media(max-width:480px){.replacement-options>div{grid-template-columns:1fr;gap:3px;padding:14px 8px}.replace-icons-dialog{padding:22px 18px}}

/* Larger, consistent typography for the replacement dialog. */
.replace-icons-dialog h2{font-size:clamp(27px,4vw,32px)}
.replace-icons-dialog #replace-icons-description .replacement-intro{font-size:18px}
.replace-icons-dialog .replacement-options dt{font-size:17px}
.replace-icons-dialog .replacement-options dd{font-size:16px}
.replace-icons-dialog #replace-icons-description .replacement-footnote{font-size:16px}
.replace-icons-dialog .replacement-apply-all strong{font-size:15px}
.replace-icons-dialog .replacement-apply-all small{font-size:14px}
.replace-icons-dialog .clear-workspace-actions button{font-size:17px}
.replace-icons-dialog .replacement-options>div{grid-template-columns:145px minmax(0,1fr)}
@media(max-width:480px){.replace-icons-dialog .replacement-options>div{grid-template-columns:1fr}}


.sprite-size-over-free .sprite-size-mark-free::before{background:#fff}

/* Import results dialog. */
.import-result-dialog{position:fixed;inset:0;margin:auto;width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:0;border:1px solid #dbe1e8;border-radius:16px;background:#fff;color:#182236;box-shadow:0 22px 80px #15243c3d;overflow-y:auto}
.import-result-dialog::backdrop{background:#101d3580}
#import-result-content{position:relative;padding:30px;white-space:normal}
#import-result-content .import-result-title{margin:0;padding-right:38px;font-size:24px;line-height:1.3;letter-spacing:-.025em;color:inherit}
#import-result-content .import-result-title:focus{outline:none}
#import-result-content .import-result-close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;color:#526482;font-size:28px;font-weight:400;line-height:1;border-radius:8px}
#import-result-content .import-result-close:hover{background:#1822360a}
.import-result-stats{display:grid;grid-template-columns:1fr 1fr 1.35fr;margin:28px 0 24px;gap:18px}
.import-result-stats>div,.import-result-uploads>div{display:flex;flex-direction:column;min-width:0;gap:7px}
.import-result-stats>div+div{border-left:1px solid #e3e7ee;padding-left:20px}
.import-result-stats dt,.import-result-uploads dt{font-size:14px;line-height:1.45;color:#5d6980}
.import-result-stats dd,.import-result-uploads dd{order:-1;margin:0;font-size:34px;line-height:1.15;letter-spacing:-.035em;font-weight:700;color:#235bea;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.import-result-uploads{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin:0;padding:20px 22px;background:#f5f6f9;border:1px solid #e3e7ee;border-radius:10px}
.import-result-uploads>div+div{border-left:1px solid #dbe1e8;padding-left:24px}
.import-result-uploads dd{font-size:28px}
.import-result-uploads dd small{font-size:15px;font-weight:600;letter-spacing:0;white-space:nowrap}
#import-result-content .import-result-note{margin:20px 0 0;font-size:14px;line-height:1.6;color:#5d6980;white-space:pre-line;overflow-wrap:anywhere}
[data-theme="dark"] .import-result-dialog{background:#192336;border-color:#465163;color:#e5ecfa}
[data-theme="dark"] .import-result-stats dd,[data-theme="dark"] .import-result-uploads dd{color:#a5bfff}
[data-theme="dark"] .import-result-stats dt,[data-theme="dark"] .import-result-uploads dt,[data-theme="dark"] #import-result-content .import-result-note,[data-theme="dark"] #import-result-content .import-result-close{color:#bccae0}
[data-theme="dark"] .import-result-uploads{background:#202c40;border-color:#39465a}
[data-theme="dark"] .import-result-stats>div+div,[data-theme="dark"] .import-result-uploads>div+div{border-color:#39465a}
[data-theme="dark"] #import-result-content .import-result-close:hover{background:#ffffff12}
@media(max-width:480px){#import-result-content{padding:24px 20px}#import-result-content .import-result-title{font-size:21px}.import-result-stats{gap:10px;margin-top:24px}.import-result-stats>div+div{padding-left:12px}.import-result-stats dd{font-size:29px}.import-result-stats dt,.import-result-uploads dt{font-size:13px}.import-result-uploads{padding:16px;gap:16px}.import-result-uploads>div+div{padding-left:16px}.import-result-uploads dd{font-size:24px}#import-result-content .import-result-close{top:12px;right:10px}}


.import-result-uploads .import-result-usage.over-limit dd{color:#dc354f}
[data-theme="dark"] .import-result-uploads .import-result-usage.over-limit dd{color:#f2778c}
@media(max-width:480px){.import-result-uploads{grid-template-columns:1fr 1fr}.import-result-uploads>.import-result-usage{grid-column:1/-1;border-left:0;border-top:1px solid #dbe1e8;padding:14px 0 0;flex-direction:row;align-items:baseline;gap:12px}}

/* Keep the column separators aligned across both summary rows. */
.import-result-stats,.import-result-uploads{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;padding-inline:0}
.import-result-stats>div,.import-result-uploads>div{padding-inline:22px}
.import-result-stats>div+div,.import-result-uploads>div+div{padding-left:22px}
.import-result-uploads{border-left:0;border-right:0}
@media(max-width:480px){.import-result-stats,.import-result-uploads{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;padding-inline:0}.import-result-stats>div,.import-result-uploads>div,.import-result-stats>div+div,.import-result-uploads>div+div{padding-inline:10px}.import-result-uploads>.import-result-usage{grid-column:auto;border-top:0;border-left:1px solid #dbe1e8;padding-block:0;flex-direction:column;align-items:stretch;gap:7px}.import-result-uploads dd{font-size:22px}.import-result-uploads dd small{font-size:12px}}
[data-theme="dark"] .import-result-uploads>.import-result-usage{border-color:#39465a}

.import-result-uploads{border-radius:0}

/* Action notices use the same modal, without an import summary. */
.feedback-notice-dialog{width:min(540px,calc(100vw - 32px))}
#import-result-content .feedback-notice-text{margin:20px 0 0;color:inherit;font-size:17px;line-height:1.65;white-space:pre-line;overflow-wrap:anywhere;text-align:left;hyphens:none}
.feedback-notice-dialog #import-result-content.error .import-result-title{color:#b42332}
[data-theme="dark"] .feedback-notice-dialog #import-result-content.error .import-result-title{color:#ffaaa2}

/* Consistent sizes for all import summary values. */
.import-result-stats dd,.import-result-uploads dd{font-size:28px}
@media(max-width:480px){.import-result-stats dd,.import-result-uploads dd{font-size:22px}}

.import-result-uploads .import-result-usage{transform:translateY(-5px)}
.import-result-uploads .import-result-usage dd{font-size:40px;line-height:1}
.import-result-uploads .import-result-usage dd small{font-size:24px}
.import-result-uploads .import-result-usage dt{font-size:20px;line-height:1.3}
@media(max-width:480px){.import-result-uploads .import-result-usage{transform:translateY(-3px)}.import-result-uploads .import-result-usage dd{font-size:29px}.import-result-uploads .import-result-usage dd small{font-size:17px}.import-result-uploads .import-result-usage dt{font-size:16px}}

/* Align the upload captions on one shared baseline. */
.import-result-uploads{grid-template-rows:auto auto;row-gap:7px;align-items:baseline}
.import-result-uploads>div{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-items:baseline}
.import-result-uploads>div dd{grid-row:1;order:initial;align-self:baseline}
.import-result-uploads>div dt{grid-row:2;align-self:baseline}
.import-result-uploads>.import-result-usage{transform:none}

.import-result-uploads .import-result-usage dt{font-size:16px}
@media(max-width:480px){.import-result-uploads .import-result-usage dt{font-size:14px}}

.import-result-uploads .import-result-usage dd{font-size:44px}
@media(max-width:480px){.import-result-uploads .import-result-usage dd{font-size:32px}}

footer>.footer-brand-row{display:flex;flex:1 0 100%;width:100%;flex-direction:column;align-items:center;gap:8px;margin-top:14px;text-align:center}
footer .footer-brand-row>.sprite-counter{flex:0 1 auto;width:auto;margin:0;font-size:14px}
footer .footer-brand-row>.sprite-counter strong{margin-left:0}
footer .footer-brand-row>.footer-brand{flex:0 1 auto;width:auto;font-size:14px;font-weight:700}


#import-result-content .import-result-errors{margin-top:36px;padding:6px 22px 8px;color:#111}
#import-result-content .import-result-errors h3{margin:0 0 16px;font-size:19px;line-height:1.4;font-weight:600;color:inherit}
#import-result-content .import-result-errors ul{list-style:none;margin:0;padding:0}
#import-result-content .import-result-errors li{font-size:17px;line-height:1.55;overflow-wrap:anywhere}
#import-result-content .import-result-errors code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:calc(.95em - 1px);background:none;padding:0;color:inherit}
[data-theme="dark"] #import-result-content .import-result-errors{color:#e5ecfa}
@media(max-width:480px){#import-result-content .import-result-errors{margin-top:26px;padding-inline:10px}#import-result-content .import-result-errors h3{font-size:17px}#import-result-content .import-result-errors li{font-size:15px}}

#import-result-content .import-result-errors h3{font-size:17px}
#import-result-content .import-result-errors li{font-size:15px}
@media(max-width:480px){#import-result-content .import-result-errors h3{font-size:16px}#import-result-content .import-result-errors li{font-size:14px}}

.gallery-search{display:flex;align-items:center;gap:18px;padding:18px 22px 8px}
.gallery-search[hidden]{display:none}
.gallery-search-field{display:flex;align-items:center;position:relative;flex:1;max-width:520px;min-width:0;color:#6b7890}
.gallery-search-field>svg{position:absolute;left:14px;width:20px;height:20px;pointer-events:none}
.gallery-search-field input{width:100%;min-width:0;min-height:44px;padding:10px 48px 10px 43px;border:1px solid #ccd4e4;border-radius:9px;background:#fff;color:#182236;font:inherit;font-size:16px}
.gallery-search-field input::-webkit-search-cancel-button{-webkit-appearance:none}
.gallery-search-field input:focus-visible{outline:2px solid #719bff;outline-offset:2px}
.gallery-search-field button{position:absolute;right:2px;width:40px;min-height:40px;padding:0;border:0;background:transparent;box-shadow:none;color:inherit;font-size:24px}
.gallery-search-field button[hidden]{display:none}
.gallery-search-count{font-size:14px;color:#64748b;white-space:nowrap}
[data-theme="dark"] .gallery-search-field input{background:#192336;border-color:#465163;color:#e5ecfa}
[data-theme="dark"] .gallery-search-field,[data-theme="dark"] .gallery-search-count{color:#bccae0}
@media(max-width:600px){.gallery-search{flex-direction:column;align-items:stretch;gap:8px;padding:16px 14px 8px}.gallery-search-field{max-width:none;width:100%}}

.copy-all-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:20px}
.copy-all-row>#copy-all-tags{grid-column:2;align-self:start}
.copy-all-row>.gallery-search{grid-column:3;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:0;width:100%;max-width:360px;justify-self:end}
.copy-all-row>.gallery-search[hidden]{display:none}
.copy-all-row .gallery-search-field{max-width:none;width:100%}
.copy-all-row .gallery-search-count{text-align:right;font-size:13px}
@media(max-width:900px){.copy-all-row{grid-template-columns:auto minmax(0,1fr)}.copy-all-row>#copy-all-tags{grid-column:1}.copy-all-row>.gallery-search{grid-column:2}}
@media(max-width:600px){.copy-all-row{grid-template-columns:minmax(0,1fr);gap:14px}.copy-all-row>#copy-all-tags{grid-column:1;justify-self:center}.copy-all-row>.gallery-search{grid-column:1;max-width:none}.copy-all-row .gallery-search-count{text-align:left}}

.copy-all-row>.gallery-search{max-width:240px}
.gallery-search-field>svg{left:auto;right:16px}
.gallery-search-field input{padding:10px 48px 10px 16px}
.gallery-search.has-query .gallery-search-field>svg{display:none}
@media(max-width:600px){.copy-all-row>.gallery-search{max-width:none}}

.copy-all-row>.gallery-search{width:var(--gallery-card-width,100%);max-width:none}

@media(max-width:600px){.copy-all-row>.gallery-search{justify-self:center}}

@media(max-width:600px){.copy-all-row>.gallery-search{width:var(--gallery-copy-width,var(--gallery-card-width,100%));max-width:100%}}

@media(max-width:600px){.copy-all-row>#copy-all-tags{width:100%;justify-self:stretch}.copy-all-row>.gallery-search{width:100%}}

.license-dialog .license-overview [data-copy="paidHeading"]{color:#235bea}
[data-theme="dark"] .license-dialog .license-overview [data-copy="paidHeading"]{color:#a3bdff}

#copy-all-tags{position:relative}
#copy-all-tags .copy-all-confirmation{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#235bea}
#copy-all-tags.is-copied .copy-all-label{visibility:hidden}
[data-theme="dark"] #copy-all-tags .copy-all-confirmation{color:#a5bfff}

.card .copy{position:relative}
.card .copy .copy-all-confirmation{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#235bea}
.card .copy.is-copied .copy-all-label{visibility:hidden}
[data-theme="dark"] .card .copy .copy-all-confirmation{color:#a5bfff}

/* Matching heights for the filters, copy button and search field. */
.html-export-options .gallery-filters select,#copy-all-tags,.gallery-search-field input{height:45px;min-height:45px;padding-top:0;padding-bottom:0;line-height:1.2}
.gallery-search-field button{height:37px;min-height:37px}

.copy-all-row>#copy-all-tags{width:max-content;min-width:min(260px,100%);max-width:100%;justify-self:center;white-space:nowrap;line-height:1.2}
@media(max-width:600px){.copy-all-row>#copy-all-tags{width:100%}}

.html-export-options .gallery-filters select,#copy-all-tags,.gallery-search-field input{font-size:15px;font-weight:400}

/* Compact filters beside Retina at intermediate widths. */
@media(min-width:601px) and (max-width:1000px){
 .html-export-options{display:grid;grid-template-columns:22px max-content max-content minmax(0,1fr);gap:20px 24px;align-items:center}
 .html-export-options>.html-export-icon{grid-column:1;grid-row:1}
 .html-export-options>label{justify-self:start}
 .html-export-options>label[data-compat-has-3]{grid-column:2;grid-row:1}
 .html-export-options>label[data-compat-has-6]{grid-column:3;grid-row:1}
 .html-export-options>label[data-compat-has-7]{grid-column:4;grid-row:1}
 .html-export-options>label[data-compat-has-4]{grid-column:2;grid-row:2}
 .html-export-options .gallery-filters{grid-column:3/-1;grid-row:2;display:grid;grid-template-columns:auto minmax(0,.85fr) minmax(0,1.15fr);gap:8px;width:100%;max-width:420px;margin:0;justify-self:start;min-width:0}
 .html-export-options .gallery-filters label{min-width:0}
 .html-export-options .gallery-filters select{width:100%;max-width:100%;min-width:0;padding-left:8px;padding-right:8px}
}

#copy-all-tags .copy-all-label{display:block;white-space:nowrap;overflow-wrap:normal;word-break:normal}

@media(max-width:600px){
 .html-export-options .gallery-filters{margin-top:24px;row-gap:16px}
}
@media(max-width:450px){
 .html-export-options .gallery-filters{margin-top:36px;row-gap:16px}
}

@media(max-width:760px){.copy-all-row{padding-top:26px}}

/* Two-column options and right-aligned filters, matching the reference. */
@media(min-width:850px){
 .html-export-options{display:grid;grid-template-columns:22px max-content max-content minmax(16px,1fr) auto;grid-template-rows:auto auto;column-gap:24px;row-gap:8px;align-items:center;padding:14px 22px}
 .html-export-options>.html-export-icon{grid-column:1;grid-row:1;align-self:center}
 .html-export-options>label{justify-self:start}
 .html-export-options>label[data-compat-has-3]{grid-column:2;grid-row:1}
 .html-export-options>label[data-compat-has-4]{grid-column:2;grid-row:2}
 .html-export-options>label[data-compat-has-6]{grid-column:3;grid-row:1}
 .html-export-options>label[data-compat-has-7]{grid-column:3;grid-row:2}
 .html-export-options .gallery-filters{grid-column:5;grid-row:1/3;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;width:auto;max-width:none;margin:0;justify-self:end}
 .html-export-options .gallery-filters label{flex:0 1 auto}
 .html-export-options .gallery-filters select{flex:none;width:auto;max-width:210px;padding-left:12px;padding-right:12px}
 .html-export-options .gallery-filters select[data-format]{width:140px;min-width:140px;padding-left:8px;padding-right:6px}
 .html-export-options .gallery-filters select[data-sort]{width:208px}
 .copy-all-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
 .copy-all-row>#copy-all-tags{grid-column:2}
 .copy-all-row>.gallery-search{grid-column:3}
}

/* Intermediate layout with stacked filter controls. */
@media(min-width:650px) and (max-width:849px){
 .html-export-options{display:grid;grid-template-columns:22px max-content max-content minmax(0,1fr);grid-template-rows:auto auto;column-gap:18px;row-gap:10px;align-items:center;padding:14px 22px}
 .html-export-options>.html-export-icon{grid-column:1;grid-row:1}
 .html-export-options>label{justify-self:start}
 .html-export-options>label[data-compat-has-3]{grid-column:2;grid-row:1}
 .html-export-options>label[data-compat-has-4]{grid-column:2;grid-row:2}
 .html-export-options>label[data-compat-has-6]{grid-column:3;grid-row:1}
 .html-export-options>label[data-compat-has-7]{grid-column:3;grid-row:2}
 .html-export-options .gallery-filters{grid-column:4;grid-row:1/3;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 8px;width:260px;max-width:100%;min-width:0;margin:0;justify-self:end}
 .html-export-options .gallery-sort-prefix{grid-column:1;grid-row:1}
 .html-export-options .gallery-filters>label[data-compat-has-8]{grid-column:2;grid-row:1}
 .html-export-options .gallery-filters>label[data-compat-has-9]{grid-column:2;grid-row:2}
 .html-export-options .gallery-filters select{width:100%;max-width:100%;min-width:0;padding-left:10px;padding-right:8px}
}

/* Medium widths: options together, filters in their own full-width row. */
@media(min-width:501px) and (max-width:849px){
 .html-export-options{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 22px}
 .html-export-options>.html-export-icon{flex:0 0 22px}
 .html-export-options>label{flex:0 0 auto;white-space:nowrap}
 .html-export-options .gallery-filters{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);flex:0 0 100%;width:100%;max-width:none;min-width:0;margin:22px 0 0;gap:12px;align-items:center}
 .html-export-options .gallery-sort-prefix{display:inline-flex;grid-column:1;grid-row:1}
 .html-export-options .gallery-filters>label[data-compat-has-8]{grid-column:2;grid-row:1}
 .html-export-options .gallery-filters>label[data-compat-has-9]{grid-column:3;grid-row:1}
 .html-export-options .gallery-filters>label{width:100%;min-width:0}
 .html-export-options .gallery-filters select{width:100%;max-width:100%;min-width:0;flex:auto;padding-left:12px;padding-right:8px}
}

@media(min-width:501px) and (max-width:649px){
 .html-export-options{display:grid;grid-template-columns:22px max-content max-content minmax(0,1fr);gap:12px 14px}
 .html-export-options>.html-export-icon{grid-column:1;grid-row:1}
 .html-export-options>label[data-compat-has-3]{grid-column:2;grid-row:1}
 .html-export-options>label[data-compat-has-4]{grid-column:3;grid-row:1}
 .html-export-options>label[data-compat-has-6]{grid-column:4;grid-row:1}
 .html-export-options>label[data-compat-has-7]{grid-column:2/-1;grid-row:2}
 .html-export-options .gallery-filters{grid-column:1/-1;grid-row:3;margin-top:32px}
}

@media(max-width:450px){.html-export-options .gallery-sort-prefix{display:inline-flex;grid-column:1/-1;grid-row:auto;justify-self:start;justify-content:flex-start}}

/* Narrow intermediate view: aligned options and full-width stacked filters. */
@media(min-width:451px) and (max-width:649px){
 .html-export-options{display:grid;grid-template-columns:22px max-content max-content minmax(0,1fr);gap:14px 10px}
 .html-export-options>.html-export-icon{grid-column:1;grid-row:1}
 .html-export-options>label{justify-self:start}
 .html-export-options>label[data-compat-has-3]{grid-column:2;grid-row:1}
 .html-export-options>label[data-compat-has-4]{grid-column:3;grid-row:1}
 .html-export-options>label[data-compat-has-6]{grid-column:4;grid-row:1}
 .html-export-options>label[data-compat-has-7]{grid-column:2/-1;grid-row:2}
 .html-export-options .gallery-filters{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:none;margin:24px 0 0;gap:16px}
 .html-export-options .gallery-sort-prefix{display:inline-flex;grid-column:1;grid-row:1;justify-self:center}
 .html-export-options .gallery-filters>label[data-compat-has-8]{grid-column:1;grid-row:2}
 .html-export-options .gallery-filters>label[data-compat-has-9]{grid-column:1;grid-row:3}
 .html-export-options .gallery-filters select{width:100%;min-width:0;max-width:100%}
}

@media(min-width:850px){
 .html-export-options{grid-template-columns:22px repeat(4,max-content) minmax(0,1fr);grid-template-rows:auto auto;gap:20px 14px}
 .html-export-options>label[data-compat-has-3]{grid-column:2;grid-row:1}
 .html-export-options>label[data-compat-has-4]{grid-column:3;grid-row:1}
 .html-export-options>label[data-compat-has-6]{grid-column:4;grid-row:1}
 .html-export-options>label[data-compat-has-7]{grid-column:5;grid-row:1}
 .html-export-options .gallery-filters{grid-column:1/-1;grid-row:2}
}
@media(min-width:1100px){
 .html-export-options{grid-template-columns:22px repeat(4,max-content) minmax(0,1fr) auto;grid-template-rows:auto}
 .html-export-options .gallery-filters{grid-column:7;grid-row:1}
}

@media(min-width:850px) and (max-width:1099px){
 .html-export-options{grid-template-columns:22px max-content max-content minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:20px;row-gap:8px}
 .html-export-options>label[data-compat-has-3]{grid-column:2;grid-row:1}
 .html-export-options>label[data-compat-has-4]{grid-column:2;grid-row:2}
 .html-export-options>label[data-compat-has-6]{grid-column:3;grid-row:1}
 .html-export-options>label[data-compat-has-7]{grid-column:3;grid-row:2}
 .html-export-options .gallery-filters{grid-column:5;grid-row:1/3;align-self:center}
}

/* Switch to the next smaller options layout before the side-by-side view gets tight. */
@media(min-width:850px) and (max-width:949px){
 .html-export-options{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 22px}
 .html-export-options>.html-export-icon{flex:0 0 22px}
 .html-export-options>label{flex:0 0 auto;white-space:nowrap}
 .html-export-options .gallery-filters{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);flex:0 0 100%;width:100%;max-width:none;min-width:0;margin:22px 0 0;gap:12px;align-items:center}
 .html-export-options .gallery-sort-prefix{grid-column:1;grid-row:1}
 .html-export-options .gallery-filters>label[data-compat-has-8]{grid-column:2;grid-row:1}
 .html-export-options .gallery-filters>label[data-compat-has-9]{grid-column:3;grid-row:1}
 .html-export-options .gallery-filters>label{width:100%;min-width:0}
 .html-export-options .gallery-filters select[data-format],.html-export-options .gallery-filters select[data-sort]{width:100%;max-width:100%;min-width:0}
}

.copy-all-row>#copy-all-tags{width:var(--gallery-card-width,100%);min-width:0;max-width:100%;justify-self:center}

.copy-all-row.has-two-columns{grid-template-columns:minmax(0,1fr)}
.copy-all-row.has-two-columns>#copy-all-tags{grid-column:1;grid-row:1;width:100%}
.copy-all-row.has-two-columns>.gallery-search{grid-column:1;grid-row:2}

.copy-all-row.has-many-columns{grid-template-columns:repeat(var(--gallery-columns),minmax(0,1fr));column-gap:var(--gallery-column-gap)}
.copy-all-row.has-many-columns>#copy-all-tags{grid-column:var(--gallery-copy-start)/span 2;grid-row:1;width:100%}
.copy-all-row.has-many-columns>.gallery-search{grid-column:var(--gallery-columns);grid-row:1;width:100%}

.copy-all-row.has-five-columns>#copy-all-tags{grid-column:3;grid-row:1;width:100%}

.copy-all-row.has-five-columns.needs-wide-copy>#copy-all-tags{grid-column:1/-1;width:max-content;min-width:0;padding-left:24px;padding-right:24px;justify-self:center}

.import-result-stats dd,.import-result-uploads dd{font-weight:400}
.import-result-uploads .import-result-usage dd,.import-result-uploads .import-result-usage dt{font-weight:700}
.clear-undo-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);background:#edf2ff;color:#25324b;font-size:15px}
.clear-undo-notice[hidden]{display:none}
.clear-undo-notice button{flex-shrink:0;color:#235bea;border:1px solid #ccd4e4;background:#fff;padding:8px 14px}
[data-theme="dark"] .clear-undo-notice{background:#202c40;color:#edf3ff}
@media(max-width:480px){.clear-undo-notice{flex-wrap:wrap;padding:14px}}

.card>.preview{position:relative}
.card>.preview>.card-sprite-source{position:absolute;left:12px;bottom:8px;margin:0;max-width:calc(100% - 24px);background:rgba(224,233,255,.85);pointer-events:none}
[data-theme="dark"] .card>.preview>.card-sprite-source{background:rgba(38,61,95,.9)}

.import-progress-dialog[open],.import-progress-dialog::backdrop{animation:none!important;transition:none!important}

.card .preview img.preview-pending,.card .preview img:not([src]){opacity:0}

.sprite-size.sprite-size-full .sprite-size-fill{background:linear-gradient(to right,var(--blue) 0 calc(100% - 12px),#dc354f calc(100% - 12px) 100%)}
[data-theme="dark"] .sprite-size.sprite-size-full .sprite-size-fill{background:linear-gradient(to right,var(--blue) 0 calc(100% - 12px),#f2778c calc(100% - 12px) 100%)}

.sprite-size .sprite-size-fill,.sprite-size.sprite-size-warning .sprite-size-fill,.sprite-size.sprite-size-full .sprite-size-fill,[data-theme="dark"] .sprite-size.sprite-size-warning .sprite-size-fill,[data-theme="dark"] .sprite-size.sprite-size-full .sprite-size-fill{background:var(--blue)}

.import-result-uploads .import-result-usage.over-limit dd,[data-theme="dark"] .import-result-uploads .import-result-usage.over-limit dd{color:#b42332}

.tile-toggle-row{display:flex;justify-content:center;padding:18px 22px 0}
.tile-toggle-row[hidden],#grid[hidden]{display:none}
.tile-toggle-row button{font-size:15px;font-weight:400;min-height:45px;color:#235bea}
[data-theme="dark"] .tile-toggle-row button{background:#202c40;color:#c4cede;border-color:#3e506d}
@media(max-width:600px){.tile-toggle-row{padding:16px 14px 0}.tile-toggle-row button{width:100%}}

.copy-all-row>.tile-toggle-row{grid-column:1;grid-row:1;padding:0;justify-content:flex-start;align-self:start;min-width:0}
.copy-all-row>.tile-toggle-row button{max-width:100%;white-space:normal}
.copy-all-row.tiles-collapsed{padding-bottom:22px}
.copy-all-row.has-two-columns>.tile-toggle-row,.copy-all-row.has-three-columns>.tile-toggle-row{grid-column:1/-1;grid-row:1}
.copy-all-row.has-two-columns>#copy-all-tags,.copy-all-row.has-three-columns>#copy-all-tags{grid-row:2}
.copy-all-row.has-two-columns>.gallery-search{grid-row:3}
.copy-all-row.has-three-columns>.gallery-search{grid-row:2}
@media(max-width:600px){
 .copy-all-row>.tile-toggle-row{grid-column:1/-1;grid-row:1;width:100%}
 .copy-all-row>#copy-all-tags{grid-row:2}
 .copy-all-row>.gallery-search{grid-row:3}
 .copy-all-row.tiles-collapsed{padding-bottom:20px}
}

.copy-all-row>.tile-toggle-row{width:100%}
.copy-all-row>.tile-toggle-row button{width:var(--gallery-card-width,100%);max-width:100%;height:45px;min-height:45px;padding:0 16px;border:1px solid #ccd4e4;border-radius:9px;background:#fff;color:#25324b;font-size:15px;font-weight:400;line-height:1.2;box-shadow:0 2px 5px #23345810}
.copy-all-row>.tile-toggle-row button:hover:not(:disabled){background:#e3ebfc;border-color:#bdcbe0;color:#25324b;box-shadow:0 2px 5px #23345810}
[data-theme="dark"] .copy-all-row>.tile-toggle-row button{background:#202c40;border-color:#3e506d;color:#c4cede}
[data-theme="dark"] .copy-all-row>.tile-toggle-row button:hover:not(:disabled){background:#293951;border-color:#647995;color:#eef3fc}
@media(max-width:600px){.copy-all-row>.tile-toggle-row button{width:100%}}

.copy-all-row .gallery-search-field input{height:45px;min-height:45px;border:1px solid #ccd4e4;border-radius:9px;background:#fff;color:#25324b;font-size:15px;font-weight:400;box-shadow:0 2px 5px #23345810}
.copy-all-row .gallery-search-field input::placeholder{color:#6b7890;opacity:1}
[data-theme="dark"] .copy-all-row .gallery-search-field input{background:#202c40;border-color:#3e506d;color:#c4cede}
[data-theme="dark"] .copy-all-row .gallery-search-field input::placeholder{color:#adbed8}

#copy-all-tags .copy-all-label{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap}
#copy-all-tags .copy-code-icon{width:20px;height:18px;flex:none}

.copy-all-row>.tile-toggle-row button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.tile-toggle-icon{color:var(--blue);font-size:18px;line-height:1;flex:none}

.copy-all-row .gallery-search-field input{background:#edf1f7;box-shadow:none}
[data-theme="dark"] .copy-all-row .gallery-search-field input{box-shadow:none}

.copy-all-row>.tile-toggle-row button{width:max-content;min-width:var(--gallery-card-width,0px);max-width:none;white-space:nowrap;flex-shrink:0}
@media(max-width:600px){.copy-all-row>.tile-toggle-row button{width:100%;min-width:0;max-width:100%}}

@media(min-width:601px){
 .copy-all-row.has-three-columns{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
 .copy-all-row.has-three-columns>.tile-toggle-row{grid-column:1;grid-row:1;width:100%}
 .copy-all-row.has-three-columns>.tile-toggle-row button{width:100%;min-width:0;max-width:100%}
 .copy-all-row.has-three-columns>#copy-all-tags{grid-column:2;grid-row:1;width:100%;min-width:0}
 .copy-all-row.has-three-columns>.gallery-search{grid-column:3;grid-row:1;width:100%}
}

@media(min-width:601px) and (max-width:700px){
 .copy-all-row.has-three-columns{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gallery-column-gap)}
 .copy-all-row.has-three-columns>.tile-toggle-row button,.copy-all-row.has-three-columns>#copy-all-tags{padding-inline:10px}
 .copy-all-row.has-three-columns .gallery-search-field input{padding-left:10px;padding-right:32px}
 .copy-all-row.has-three-columns .gallery-search-field>svg{right:10px;width:16px}
}

@media(max-width:767px){
 .copy-all-row,.copy-all-row.has-many-columns,.copy-all-row.has-two-columns,.copy-all-row.has-three-columns{grid-template-columns:minmax(0,1fr);gap:14px}
 .copy-all-row>.tile-toggle-row,.copy-all-row.has-three-columns>.tile-toggle-row{grid-column:1/-1;grid-row:1;width:100%}
 .copy-all-row>.tile-toggle-row button{width:100%;min-width:0;max-width:100%}
 .copy-all-row>#copy-all-tags,.copy-all-row.has-many-columns>#copy-all-tags,.copy-all-row.has-three-columns>#copy-all-tags{grid-column:1/-1;grid-row:2;width:100%;min-width:0}
 .copy-all-row>.gallery-search,.copy-all-row.has-many-columns>.gallery-search,.copy-all-row.has-three-columns>.gallery-search{grid-column:1/-1;grid-row:3;width:100%;max-width:none}
}

#copy-all-tags,.copy-all-row>.tile-toggle-row button{background:#edf2ff;color:#25324b;border-color:#ccd4e4}
#copy-all-tags:hover:not(:disabled),.copy-all-row>.tile-toggle-row button:hover:not(:disabled){background:#e3ebfc}
.copy-all-row .gallery-search-field input{background:#fff;box-shadow:none}

/* Collapsed tiles have no measurable grid: use an independent actions layout. */
#gallery-actions.tiles-collapsed{container-type:inline-size;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start;--collapsed-control-width:calc((100cqw - 48px)/4)}
#gallery-actions.tiles-collapsed>.tile-toggle-row{grid-column:1;grid-row:1;width:100%;width:min(100%,var(--collapsed-control-width));min-width:0;justify-self:start}
#gallery-actions.tiles-collapsed>.tile-toggle-row button{width:100%;min-width:0;max-width:100%}
#gallery-actions.tiles-collapsed>#copy-all-tags{grid-column:2;grid-row:1;width:min(100%,var(--collapsed-control-width));min-width:0;max-width:100%;padding-inline:10px;justify-self:center}
#gallery-actions.tiles-collapsed>.gallery-search{grid-column:3;grid-row:1;width:min(100%,var(--collapsed-control-width));min-width:0;max-width:none;justify-self:end}
@media(min-width:1100px){#gallery-actions.tiles-collapsed{--collapsed-control-width:calc((100cqw - 64px)/5)}}
@media(max-width:899px){#gallery-actions.tiles-collapsed{--collapsed-control-width:100%}}
@media(max-width:767px){
 #gallery-actions.tiles-collapsed{grid-template-columns:minmax(0,1fr);gap:14px;--collapsed-control-width:100%}
 #gallery-actions.tiles-collapsed>.tile-toggle-row{grid-column:1;grid-row:1}
 #gallery-actions.tiles-collapsed>#copy-all-tags{grid-column:1;grid-row:2;width:100%}
 #gallery-actions.tiles-collapsed>.gallery-search{grid-column:1;grid-row:3}
}

/* Gallery buttons match the example button's colors, weight and shadow. */
#gallery-actions>#copy-all-tags,#gallery-actions>.tile-toggle-row button{background:#edf2fe;color:var(--blue);font-weight:600;border-color:#ccd4e4;box-shadow:0 2px 5px #23345810}
#gallery-actions>#copy-all-tags:hover:not(:disabled),#gallery-actions>.tile-toggle-row button:hover:not(:disabled){background:#fff;color:var(--blue);box-shadow:0 2px 5px #23345810}
[data-theme="dark"] #gallery-actions>#copy-all-tags,[data-theme="dark"] #gallery-actions>.tile-toggle-row button{background:#202c40;color:#b6cbff;border-color:#3e506d}
[data-theme="dark"] #gallery-actions>#copy-all-tags:hover:not(:disabled),[data-theme="dark"] #gallery-actions>.tile-toggle-row button:hover:not(:disabled){background:#293951}

/* Highlight only the occupied upload capacity above the account allowance. */
.sprite-size.sprite-size-warning .sprite-size-fill,[data-theme="dark"] .sprite-size.sprite-size-warning .sprite-size-fill{background:linear-gradient(to right,var(--blue) 0 var(--allowed-share,100%),#b42332 var(--allowed-share,100%) 100%)}

/* Show the completed capacity value immediately, without intermediate widths. */
.sprite-size .sprite-size-fill{transition:none;animation:none}

/* Match the apply-to-all panel in both import dialogs. */
.duplicate-images-dialog .replacement-apply-all{align-items:flex-start;padding:14px;background:#f4f6fb;border:0;border-radius:10px;margin:20px 0;gap:12px}
.duplicate-images-dialog .replacement-apply-all strong{font-size:15px}
[data-theme="dark"] .duplicate-images-dialog .replacement-apply-all{background:#182840;border-color:#3b4d69}

.import-result-premium{margin:20px 0;padding:18px 22px;background:#f4f6fb;border-radius:10px}
#import-result-content .import-result-premium p{margin:0 0 14px;font-size:15px;line-height:1.5;color:#25324b}
.import-result-premium button{font-size:15px}
[data-theme="dark"] .import-result-premium{background:#182840}
[data-theme="dark"] #import-result-content .import-result-premium p{color:#c4cede}

#import-result-content .import-result-capacity p{margin:0}


/* Keep the original download-button geometry while showing preparation status. */
#export[aria-busy="true"]{position:relative}
#export .export-button-label{margin:0;visibility:hidden}
#export .export-button-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0 8px;white-space:nowrap;font:inherit}

dialog[aria-labelledby="download-capacity-title"]>p{white-space:pre-line}

footer .sprite-counter,footer .sprite-counter strong,[data-theme="dark"] footer .sprite-counter,[data-theme="dark"] footer .sprite-counter strong{color:inherit}

.toolbar #upload-size.over-maximum,[data-theme="dark"] .toolbar #upload-size.over-maximum{color:#b42332}

.import-result-uploads dd.upload-over-limit,[data-theme="dark"] .import-result-uploads dd.upload-over-limit{color:#b42332}

.import-result-uploads .import-result-usage.over-limit dd{font-size:36px;white-space:nowrap}
@media(max-width:600px){.import-result-uploads .import-result-usage.over-limit dd{font-size:26px}}

/* Preserve the upload hint break on wide desktops; let intermediate widths wrap naturally. */
.upload-wide-break{display:none}
@media(min-width:1200px){.upload-wide-break{display:initial}}

/* Keep the download button width stable while showing active ZIP processing. */
#export .export-button-status{gap:9px}
#export .export-button-progress{position:absolute;inset:0 auto 0 0;margin:0;width:0;background:var(--blue);pointer-events:none;transition:width .25s ease}
#export[aria-busy="true"]{overflow:hidden}
#export .export-button-status{z-index:1}
#export[aria-busy="true"]{opacity:1;background:linear-gradient(#ffffff59,#ffffff59),var(--blue);border-color:var(--blue);color:#fff;cursor:progress;pointer-events:none;box-shadow:none}
@media(prefers-reduced-motion:reduce){#export .export-button-progress{transition:none}}


.account-upgrade{margin:20px 0;padding:20px;border:1px solid var(--line);border-radius:12px;background:#f4f6fb}
.account-upgrade h3{margin:0 0 8px;font-size:18px}
.account-upgrade p{margin:0 0 16px}
[data-theme="dark"] .account-upgrade{background:#20293a}

/* Icon-only dismiss controls, with translated accessible names. */
.popup-close-icon,.license-dialog .license-close,.account-dialog .account-close{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;font-size:30px;font-weight:400;line-height:1}
.account-dialog .popup-close-icon,.license-dialog .popup-close-icon{position:absolute;top:14px;right:14px;margin:0}
.copy-all-dialog h2,.license-dialog h2{padding-right:50px}

/* Account overview follows the generator's cards, type and blue accents. */
.account-dialog.is-signed-in{width:min(560px,calc(100vw - 32px));padding:28px;color:#182236}
.account-dialog.is-signed-in h2{padding-right:44px;font-size:26px;letter-spacing:-.035em}
.account-summary{padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:#fff}
.account-plan,.account-upgrade-kicker{display:inline-block;color:var(--blue);font-size:11px;line-height:1.4;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.account-plan{padding:4px 8px;border-radius:5px;background:#edf3ff}
.account-dialog .account-summary .account-email{margin:10px 0 4px;font-size:17px;color:#182236;overflow-wrap:anywhere;text-align:left}
.account-dialog .account-summary .account-allowance{margin:0;font-size:14px;line-height:1.5}
.account-dialog .account-upgrade{margin:16px 0;padding:20px;background:#edf3ff;border-color:#dbe5fc}
.account-upgrade h3{font-size:20px;letter-spacing:-.025em;margin:7px 0 14px;line-height:1.3}
.account-upgrade-benefits{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:9px;font-size:15px;color:#25324b}
.account-upgrade-benefits li::before{content:'✓';color:var(--blue);font-weight:700;margin-right:10px}
.account-dialog .account-upgrade p{font-size:13px;line-height:1.55;margin:0 0 16px}
.account-upgrade-button{width:100%;font-size:15px;min-height:46px}
.account-dialog.is-signed-in .account-logout{font-size:14px;min-height:40px;padding:8px 14px}
.account-dialog.is-signed-in .account-google{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}
.account-dialog.is-signed-in .account-legal{border-top:1px solid var(--line);padding-top:16px;margin-top:20px;font-size:12px}
[data-theme="dark"] .account-dialog.is-signed-in{color:#e5ecf9}
[data-theme="dark"] .account-summary{background:#20293a}
[data-theme="dark"] .account-dialog .account-summary .account-email,[data-theme="dark"] .account-upgrade-benefits{color:#e5ecf9}
[data-theme="dark"] .account-dialog .account-upgrade{background:#1d304c;border-color:#35445e}
[data-theme="dark"] .account-plan{background:#1d304c;color:#9cb8ff}
@media(max-width:600px){.account-dialog.is-signed-in{padding:24px 18px}.account-dialog.is-signed-in h2{font-size:23px}.account-summary,.account-dialog .account-upgrade{padding:16px}.account-upgrade h3{font-size:18px}}


/* PREMIUM checkout mirrors the account and generator cards. */
.license-dialog{width:min(600px,calc(100vw - 32px));padding:28px}
.license-dialog h2{font-size:26px;letter-spacing:-.035em;padding-right:44px}
.license-dialog>p[data-copy="description"]{font-size:14px;line-height:1.6;margin:0 0 20px}
.license-premium-card{padding:22px;border:1px solid #dbe5fc;border-radius:12px;background:#edf3ff}
.license-premium-label{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--blue)}
.license-price-row{display:flex;align-items:baseline;gap:14px;margin:10px 0 16px;flex-wrap:wrap}
.license-price-row strong{font-size:40px;line-height:1.1;letter-spacing:-.04em;color:#182236}
.license-price-row span{font-size:13px;color:#5d6980}
.license-benefits{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px;font-size:15px}
.license-benefits li::before{content:'✓';margin-right:10px;font-weight:700;color:var(--blue)}
.license-dialog .license-pay{width:100%;margin:0;min-height:46px;font-size:15px}
.license-dialog [data-copy="paymentNote"]{font-size:12px;line-height:1.6;margin:12px 0 0}
.license-restore-panel{border:1px solid var(--line);border-radius:10px;margin-top:20px;padding:15px 16px}
.license-restore-panel summary{font-size:14px;font-weight:600;cursor:pointer}
.license-restore-panel .license-restore-form{border:0;padding:16px 0 0;margin:0}
.license-restore-panel label{font-size:14px}
.license-restore-panel button{font-size:14px;width:100%}
.license-dialog .license-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;border-top:1px solid var(--line);padding-top:16px;margin-top:20px;font-size:12px}
[data-theme="dark"] .license-premium-card{background:#1d304c;border-color:#35445e}
[data-theme="dark"] .license-price-row strong{color:#edf3ff}
[data-theme="dark"] .license-price-row span{color:#adbed8}
@media(max-width:600px){.license-dialog{padding:24px 18px}.license-dialog h2{font-size:23px}.license-premium-card{padding:18px}}

/* Slightly larger checkout typography. */
.license-dialog h2{font-size:28px}
.license-dialog>p[data-copy="description"]{font-size:16px}
.license-premium-label{font-size:14px}
.license-price-row strong{font-size:42px}
.license-price-row span{font-size:15px}
.license-benefits{font-size:17px}
.license-dialog .license-pay{font-size:17px}
.license-dialog [data-copy="paymentNote"]{font-size:14px}
.license-restore-panel summary,.license-restore-panel label,.license-restore-panel button{font-size:16px}
.license-restore-panel textarea{font-size:15px}
.license-dialog .license-legal{font-size:14px}
@media(max-width:600px){.license-dialog h2{font-size:25px}}

.account-dialog .account-google-connection{display:flex;align-items:center;gap:9px;margin:12px 0 0;font-size:14px;line-height:1.5}
.account-google-connection img{display:block;flex:0 0 20px;width:20px;height:20px}
.account-google-connection[hidden]{display:none!important}

/* Plan comparison before sign-in uses the same restrained cards as the account. */
.license-before-signin .license-overview{display:grid;gap:14px;margin:20px 0;font-size:16px;line-height:1.55}
.license-before-signin .license-overview>div{margin:0;padding:18px 20px;border:1px solid var(--line);border-radius:12px}
.license-before-signin .license-overview dt{font-size:17px;margin:0 0 6px}
.license-before-signin .license-overview dd{text-align:left;hyphens:none;-webkit-hyphens:none}
.license-before-signin .license-overview .license-plan-premium{background:#edf3ff;border-color:#dbe5fc;padding:20px}
.license-before-signin .license-plan-premium dt{font-size:13px;letter-spacing:.09em}
.license-before-signin .license-overview-price{font-size:42px;gap:12px;margin:12px 0 8px}
.license-before-signin .license-overview-price s{font-size:20px}
.license-before-signin .license-overview-offer{display:inline-block;margin:0 0 16px;padding:4px 9px;background:#dfe9ff;border-radius:5px;font-size:13px;font-weight:600}
.license-plan-benefit{display:block;margin:0 0 7px;color:#25324b;font-size:16px}
.license-plan-benefit::before{content:'✓';color:var(--blue);font-weight:700;margin-right:9px}
.license-plan-description{display:block;margin-top:14px;padding-top:12px;border-top:1px solid #d3dff5;font-size:14px}
.license-before-signin .license-overview .license-plan-account{padding:2px 0;border:0;border-radius:0}
.license-before-signin .license-plan-account dt{font-size:15px}
.license-before-signin .license-plan-account dd{font-size:14px}
.license-before-signin .license-signin{font-size:17px;min-height:48px}
.license-dialog #license-signin-note{font-size:14px;line-height:1.55;text-align:left;hyphens:none;-webkit-hyphens:none}
[data-theme="dark"] .license-before-signin .license-overview .license-plan-premium{background:#1d304c;border-color:#35445e}
[data-theme="dark"] .license-plan-benefit{color:#e5ecf9}
[data-theme="dark"] .license-before-signin .license-overview-offer{background:#293f62;color:#bfd1ff}
[data-theme="dark"] .license-plan-description{border-color:#35445e}
@media(max-width:600px){.license-before-signin .license-overview>div,.license-before-signin .license-overview .license-plan-premium{padding:16px}.license-before-signin .license-overview .license-plan-account{padding:2px 0}}


.import-result-stats dd.upload-over-limit{color:#b42332}

.import-result-uploads .import-result-usage dd,.import-result-uploads .import-result-usage.over-limit dd,[data-theme="dark"] .import-result-uploads .import-result-usage dd,[data-theme="dark"] .import-result-uploads .import-result-usage.over-limit dd{color:var(--blue)}

/* Exactly one Retina HTML output; keep its choices together and allow wrapping. */
.html-export-options .retina-output-modes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;grid-column:4/6;grid-row:1;min-width:0}
.html-export-options .retina-output-modes label{white-space:nowrap}
.html-export-options .retina-output-modes[hidden]{display:none!important}
@media(max-width:1099px){.html-export-options .retina-output-modes{grid-column:1/-1;grid-row:auto;flex-basis:100%}.html-export-options .gallery-filters{grid-row:auto}}

.html-export-options .retina-output-modes label{gap:7px}

/* Slightly smaller typography across the export options and filters. */
.html-export-options>label,.html-export-options .retina-output-modes label,.html-export-options .gallery-sort-prefix{font-size:calc(15px * var(--mobile-font-scale, 1) - 1px)}
.html-export-options .gallery-filters select{font-size:14px}

/* Action buttons and search text: one pixel smaller. */
#gallery-actions>#copy-all-tags,#gallery-actions>.tile-toggle-row button,#gallery-actions .gallery-search-field input{font-size:14px}

/* Advanced settings typography: one pixel smaller. */
.project-settings,.project-settings summary,.project-settings [data-reset],.project-settings [data-open]{font-size:14px}
.project-settings-note,.project-settings [data-status],.project-settings .project-srcset-note{font-size:13px}

/* Align the desktop sort dropdown width with the search field. */
@media(min-width:950px){.html-export-options .gallery-filters select[data-sort]{width:var(--gallery-search-width,208px);max-width:none}}

/* Keep the advanced-settings toggle limited to its visible label. */
.project-settings summary{width:fit-content;max-width:100%}

/* One shared surface for Retina and all three output options. */
.html-export-options .retina-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;grid-column:3/6;grid-row:1;min-width:0;border-radius:5px}
.html-export-options .retina-controls>label{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:calc(15px * var(--mobile-font-scale, 1) - 1px)}
.html-export-options .retina-controls .retina-output-modes{flex-basis:auto}
.html-export-options .retina-controls[data-compat-has-10]{background:#edf2ff;box-shadow:0 0 0 6px #edf2ff}
[data-theme="dark"] .html-export-options .retina-controls[data-compat-has-10]{background:#293241;box-shadow:0 0 0 6px #293241}
@media(max-width:1099px){.html-export-options .retina-controls{grid-column:1/-1;grid-row:auto;flex-basis:100%}}

/* Compact controls earlier, with aligned checkboxes and a content-sized highlight. */
.html-export-options .retina-controls{width:fit-content;max-width:100%;justify-self:start;flex-basis:auto}
@media(max-width:1199px){
 .html-export-options{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto auto;gap:20px 14px}
 .html-export-options>.html-export-icon{grid-column:1;grid-row:1}
 .html-export-options>label[data-compat-has-3]{grid-column:2;grid-row:1;justify-self:start}
 .html-export-options .retina-controls{grid-column:2;grid-row:2;flex-basis:auto}
 .html-export-options .gallery-filters{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);width:100%;max-width:none;margin:0;gap:12px;justify-self:stretch}
 .html-export-options .gallery-sort-prefix{grid-column:1;grid-row:1;justify-self:start}
 .html-export-options .gallery-filters>label[data-compat-has-8]{grid-column:2;grid-row:1}
 .html-export-options .gallery-filters>label[data-compat-has-9]{grid-column:3;grid-row:1}
 .html-export-options .gallery-filters select[data-format],.html-export-options .gallery-filters select[data-sort]{width:100%;min-width:0;max-width:100%}
}
@media(max-width:767px){
 .html-export-options .gallery-filters{grid-template-columns:minmax(0,1fr)}
 .html-export-options .gallery-sort-prefix{grid-column:1;grid-row:1}
 .html-export-options .gallery-filters>label[data-compat-has-8]{grid-column:1;grid-row:2}
 .html-export-options .gallery-filters>label[data-compat-has-9]{grid-column:1;grid-row:3}
}


/* Wider intermediate view: checkboxes side by side; narrower views stay stacked. */
@media(min-width:768px) and (max-width:1199px){
 .html-export-options{grid-template-columns:22px max-content minmax(0,1fr);align-items:start;column-gap:18px}
 .html-export-options>label[data-compat-has-3]{grid-column:2;grid-row:1}
 .html-export-options .retina-controls{grid-column:3;grid-row:1;align-self:start}
 .html-export-options .gallery-filters{grid-column:1/-1;grid-row:2}
}

/* Intermediate toolbar: metadata left, actions right, download on its own row. */
@media(min-width:601px) and (max-width:899px){
 .toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px 8px}
 .toolbar h2{grid-column:1;grid-row:1}
 .toolbar .actions{display:contents}
 .toolbar #background{grid-column:2;grid-row:1}
 .toolbar #clear{grid-column:3;grid-row:1}
 .toolbar #export{grid-column:1/-1;grid-row:2;justify-self:end;width:max-content;max-width:100%}
}

/* Keep the full toolbar on one line from 900px upwards. */
@media(min-width:900px){
 .toolbar{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between}
 .toolbar .actions{display:flex;flex-wrap:nowrap;width:auto;margin-left:auto}
}

/* Smallest toolbar: heading, preview/clear row, full-width download. */
@media(max-width:600px){
 .toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 8px;align-items:center}
 .toolbar h2{grid-column:1/-1;grid-row:1;white-space:normal}
 .toolbar .actions{display:contents}
 .toolbar #background{grid-column:1;grid-row:2;justify-self:start;padding-left:0;text-align:left}
 .toolbar #clear{grid-column:2;grid-row:2;justify-self:end}
 .toolbar #export{grid-column:1/-1;grid-row:3;width:100%;min-width:0;white-space:normal}
}

/* Emphasize the sprite count like the usage figure, on the white stats surface. */
.import-result-stats .import-result-count dd{font-size:36px;line-height:1;font-weight:700;color:var(--blue)}
.import-result-stats .import-result-count dt{font-size:16px;line-height:1.3;font-weight:700}
@media(max-width:600px){.import-result-stats .import-result-count dd{font-size:26px}}
@media(max-width:480px){.import-result-stats .import-result-count dt{font-size:14px}}

/* Use identical number sizes for file count and upload usage. */
.import-result-stats .import-result-count dd,
.import-result-uploads .import-result-usage dd,
.import-result-uploads .import-result-usage.over-limit dd{font-size:44px}
@media(max-width:480px){
 .import-result-stats .import-result-count dd,
 .import-result-uploads .import-result-usage dd,
 .import-result-uploads .import-result-usage.over-limit dd{font-size:32px}
}

/* Fit visible artwork inside a consistent preview area. */
.preview-fit{display:block;position:relative;overflow:hidden;flex:none}
.card .preview .preview-fit img{position:absolute;max-width:none;max-height:none;margin:0}

#clear-workspace-description{white-space:pre-line}

/* Undo notice: compact hierarchy and a quiet remaining-time indicator. */
.clear-undo-notice{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;padding:18px 22px 21px;background:#edf2ff;overflow:hidden}
.clear-undo-notice::after{content:"";position:absolute;bottom:0;left:0;width:var(--undo-remaining,100%);height:3px;background:var(--blue);transition:width .25s linear}
.clear-undo-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.clear-undo-copy strong{font-size:16px;line-height:1.3;color:#182236}
.clear-undo-copy>span{font-size:14px;line-height:1.5;color:#5d6980}
.clear-undo-countdown{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:8px 10px;border:1px solid #d5e0ff;border-radius:8px;background:#fff;color:var(--blue);font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.clear-undo-notice button{background:var(--blue);border-color:var(--blue);color:#fff;padding:10px 18px;font-size:15px}
.clear-undo-notice button:hover:not(:disabled){background:#164bcc;border-color:#164bcc;color:#fff}
[data-theme="dark"] .clear-undo-copy strong{color:#edf3ff}
[data-theme="dark"] .clear-undo-copy>span{color:#bccae0}
[data-theme="dark"] .clear-undo-countdown{background:#182236;border-color:#465a78;color:#b6cbff}
@media(max-width:480px){.clear-undo-notice{grid-template-columns:minmax(0,1fr) auto;padding:16px 14px 19px;gap:12px}.clear-undo-copy{grid-column:1;grid-row:1}.clear-undo-countdown{grid-column:2;grid-row:1}.clear-undo-notice button{grid-column:1/-1;width:100%}}

.image-editor-text-actions{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}
.image-editor .image-editor-text-actions button,.image-editor .image-editor-text-actions button:hover:not(:disabled){margin:0;border:0;padding:0;background:transparent;box-shadow:none;color:var(--blue);font:inherit;text-decoration:underline;text-underline-offset:3px}
[data-theme="dark"] .image-editor .image-editor-text-actions button{color:#b6cbff}

/* Animate the time bar continuously rather than in whole-second steps. */
.clear-undo-notice::after{width:100%;transform-origin:left center;transition:none;animation:none}
.clear-undo-notice:not([hidden])::after{animation:undo-time-remaining 30s linear forwards}
@keyframes undo-time-remaining{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.clear-undo-notice:not([hidden])::after{animation:none;display:none}}

.restore-progress-dialog{text-align:center;width:min(620px,calc(100vw - 32px))}
.restore-progress-dialog h2,.restore-progress-dialog p{text-align:center;padding-right:0;text-wrap:balance}
.restore-progress-dialog .import-spinner{margin-left:auto;margin-right:auto}

 dialog.account-dialog.restore-progress-dialog p:not(.account-email){width:100%;max-width:none;margin-inline:auto;padding-inline:0;text-align:center;text-align-last:center}

.import-upgrade-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:16px}
.import-upgrade-row>span{font-size:16px;line-height:1.5;color:#000;font-weight:700}
.import-upgrade-row>button{white-space:normal}

[data-theme="dark"] .import-upgrade-row>span{color:#edf3ff}

/* Image customization: consistent form hierarchy and primary save action. */
.card .image-editor{margin:14px 0 8px;font-size:14px}
.card .image-editor summary{padding:10px 12px;border:1px solid #dbe4f7;border-radius:8px;background:#fff;color:#235bea;font-size:14px;font-weight:600;line-height:1.4}
.card .image-editor summary:focus-visible{outline:2px solid #719bff;outline-offset:2px}
.card .image-editor[open] summary{margin-bottom:16px}
.card .image-editor form{gap:12px;margin-top:0;padding:0 2px 4px}
.card .image-editor label{font-size:13px;line-height:1.4;gap:6px;color:#25324b}
.card .image-editor .image-size-heading{margin:0;font-size:13px;color:#25324b;font-weight:600}
.card .image-size-fields{gap:10px}
.card .image-editor input[type="text"],.card .image-editor input[type="number"],.card .image-editor textarea{min-height:40px;padding:9px 10px;border:1px solid #ccd4e4;border-radius:8px;background:#fff;color:#182236;font-size:14px;font-weight:400;line-height:1.4}
.card .image-editor textarea{min-height:76px}
.card .image-editor input:focus-visible,.card .image-editor textarea:focus-visible{outline:2px solid #719bff;outline-offset:2px}
.card .image-editor textarea:disabled{background:#f4f6fb;color:#748099}
.card .image-editor small{display:block;font-size:12px;line-height:1.5;color:#69758b;margin:-3px 0 4px}
.card .image-name-field{gap:8px}
.card .image-name-field>span{font-size:12px;color:#69758b;white-space:nowrap}
.card .image-editor .image-decorative{gap:8px;font-size:13px;font-weight:400}
.card .image-decorative input{width:16px;height:16px;margin:0;accent-color:#235bea;flex:none}
.card .image-editor-text-actions{justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.card .image-editor .image-editor-text-actions button{font-size:13px;min-height:32px}
.card .image-editor button[type="submit"]{width:100%;min-height:42px;padding:10px 14px;border:1px solid #235bea;border-radius:8px;background:#235bea;color:#fff;font-size:14px;font-weight:600;box-shadow:0 3px 8px #235bea18}
.card .image-editor button[type="submit"]:hover:not(:disabled){background:#164bcc;color:#fff;border-color:#164bcc}
[data-theme="dark"] .card .image-editor summary{background:#253650;border-color:#3e506d;color:#b6cbff}
[data-theme="dark"] .card .image-editor label{color:#e5ecf9}
[data-theme="dark"] .card .image-editor .image-size-heading,[data-theme="dark"] .card .image-editor small,[data-theme="dark"] .card .image-name-field>span{color:#adbed8}
[data-theme="dark"] .card .image-editor input[type="text"],[data-theme="dark"] .card .image-editor input[type="number"],[data-theme="dark"] .card .image-editor textarea{background:#182236;color:#e5ecf9;border-color:#465a78}
[data-theme="dark"] .card .image-editor textarea:disabled{background:#202a3b;color:#adbed8}

.project-settings [data-reset]{font-weight:400;background:transparent;border:0;border-radius:0;color:#235bea;box-shadow:none;padding:0;min-height:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.project-settings [data-reset]:hover:not(:disabled){background:transparent;color:#164bcc;box-shadow:none}
[data-theme="dark"] .project-settings [data-reset]{color:#91b4ff}
[data-theme="dark"] .project-settings [data-reset]:hover:not(:disabled){color:#bed2ff}

.project-settings-actions{justify-content:flex-end}
.project-settings .project-settings-actions{margin-top:24px}

/* Text actions keep their appearance on hover. */
.card .image-editor .image-editor-text-actions button,
.card .image-editor .image-editor-text-actions button:hover:not(:disabled){background:transparent;border:0;box-shadow:none;color:var(--blue);font-family:inherit;font-size:13px;font-weight:400;line-height:1.4;letter-spacing:normal;text-decoration:underline;transform:none;filter:none;opacity:1;transition:none}
[data-theme="dark"] .card .image-editor .image-editor-text-actions button,
[data-theme="dark"] .card .image-editor .image-editor-text-actions button:hover:not(:disabled){color:#b6cbff}

.project-settings-actions{flex-wrap:wrap}

.clear-undo-notice{grid-template-columns:minmax(0,1fr) auto auto auto}
.clear-undo-notice .clear-undo-cancel,.clear-undo-notice .clear-undo-cancel:hover:not(:disabled){padding:8px 0;border:0;background:transparent;box-shadow:none;color:#235bea;font-size:14px;font-weight:400;line-height:1.4;text-decoration:underline;text-underline-offset:3px;transition:none}
[data-theme="dark"] .clear-undo-notice .clear-undo-cancel,[data-theme="dark"] .clear-undo-notice .clear-undo-cancel:hover:not(:disabled){color:#b6cbff}
@media(max-width:480px){.clear-undo-notice{grid-template-columns:minmax(0,1fr) auto}.clear-undo-notice button.primary{grid-column:1;grid-row:2}.clear-undo-notice .clear-undo-cancel{grid-column:2;grid-row:2;width:auto}}

.quick-guide-files{margin:12px 0 24px;padding-left:24px;color:inherit;line-height:1.6}
.quick-guide-files li{margin:6px 0;overflow-wrap:anywhere}
.quick-guide-files code{font-size:.9em}

.quick-guide-size-note{margin:16px 0;padding:16px 20px;background:#edf2ff;border:1px solid #dbe4f7;border-left:3px solid #235bea;border-radius:8px;color:#25324b;font-size:15px;line-height:1.6}
.quick-guide-size-note>strong{display:block;color:#182236;margin-bottom:6px}
.quick-guide-size-note ul{margin:0;padding-left:20px}
.quick-guide-size-note li+li{margin-top:6px}
.quick-guide-size-note p{margin:0;font-size:inherit;color:inherit}
[data-theme="dark"] .quick-guide-size-note{background:#202e45;border-color:#3e506d;border-left-color:#9ab4ff;color:#c4cede}
[data-theme="dark"] .quick-guide-size-note>strong{color:#edf3ff}

.quick-guide-size-note{background:#fff;border:0;border-radius:0;padding:16px 20px}
[data-theme="dark"] .quick-guide-size-note{background:transparent;border:0}

#kurzanleitung>h3{margin-top:40px;margin-bottom:12px}
#kurzanleitung>h3~h3{margin-top:48px}
#kurzanleitung>h3.folder-structure-heading{margin-top:51px;margin-bottom:10px}
#kurzanleitung>.folder-structure-heading+.embed-example{margin-top:0}
#kurzanleitung .background-html-intro,#kurzanleitung .background-code-intro{margin-bottom:6px}
#kurzanleitung h3[data-compat-has-11]{margin-bottom:18px}
#kurzanleitung .background-html-intro{margin-top:0}
#kurzanleitung .background-code-intro{margin-top:22px}
#kurzanleitung .background-javascript-block{width:100%;max-width:760px}
#kurzanleitung .background-javascript-block>p{margin-top:32px;margin-bottom:10px}
#kurzanleitung .background-javascript-block>p+pre,
#kurzanleitung .background-javascript-block>p+.copyable-code{margin-top:0}
#kurzanleitung .background-javascript-block>p>strong{font-weight:600}
#kurzanleitung .background-html-intro+.quick-guide-size-note[hidden]+:is(pre,.copyable-code),
#kurzanleitung .background-html-intro+:is(pre,.copyable-code),
#kurzanleitung .background-code-intro+.background-css-block,
#kurzanleitung .background-css-block>pre,
#kurzanleitung .background-css-block>.copyable-code{margin-top:0}

#kurzanleitung .quick-guide-size-note{background:transparent;padding:0;font-size:calc(17px * var(--mobile-font-scale, 1));line-height:1.6}

#kurzanleitung .quick-guide-size-note{background:#edf2ff;border:1px solid #dbe4f7;border-left:3px solid #235bea;border-radius:8px;padding:16px 20px;color:#25324b}
#kurzanleitung .quick-guide-size-note>strong{display:inline;margin:0;color:inherit}
[data-theme="dark"] #kurzanleitung .quick-guide-size-note{background:#202e45;border-color:#3e506d;border-left-color:#9ab4ff;color:#edf3ff}

p.generator-footnote{font-size:calc(13px * var(--mobile-font-scale, 1));line-height:1.6;margin-top:12px;margin-bottom:0}
p.generator-footnote+p.generator-footnote{margin-top:8px}

.pricing-summary .pricing-note.generator-footnote{font-size:calc(13px * var(--mobile-font-scale, 1));line-height:1.6}

#kurzanleitung .quick-guide-size-note,[data-theme="dark"] #kurzanleitung .quick-guide-size-note{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}

#image-variant-help p.generator-footnote{font-size:calc(13px * var(--mobile-font-scale, 1));line-height:1.6;margin-top:16px}

#kurzanleitung .quick-guide-size-note{color:#5d6980}
[data-theme="dark"] #kurzanleitung .quick-guide-size-note{color:#b4c1d8}

.guide pre + .local-note{margin-top:48px}

p.generator-footnote,
.pricing-summary .pricing-note.generator-footnote,
#image-variant-help p.generator-footnote,
.guide .reference-note,
.replace-icons-dialog #replace-icons-description .replacement-footnote{font-size:15px;line-height:1.6}

@media(max-width:480px){.clear-undo-notice .clear-undo-cancel{grid-column:1;justify-self:start}.clear-undo-notice button.primary{grid-column:2;width:auto}}

.brand-name-inline{color:#235bea}
.intro-title .brand-name-inline{color:inherit}



footer > .footer-help-navigation{display:flex;flex:1 0 100%;width:100%;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 24px;margin:0 0 12px}
footer > .footer-help-navigation a,footer > .footer-help-navigation a:hover{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--blue);text-decoration:none;transform:none;filter:none;opacity:1;transition:none}
footer > .legal-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px}
@media(max-width:600px){footer > .footer-help-navigation,footer > .legal-nav{gap:4px 18px}}
@media print{body footer .footer-help-navigation{display:none!important}}

footer{max-width:none;padding:36px max(24px,calc((100% - 1180px)/2)) 30px;background:var(--blue);color:#fff}
[data-theme="dark"] footer{background:#235bea;color:#fff}
footer a,footer .footer-help-navigation a,footer .footer-help-navigation a:hover,footer .legal-nav a,footer .footer-languages a,footer .privacy-settings{color:#fff}
footer a,footer a:hover,footer .privacy-settings,footer .privacy-settings:hover{text-decoration:none}
footer > .footer-help-navigation a,footer > .footer-help-navigation a:hover{text-decoration:none}
footer > .footer-languages a,footer > .footer-languages a:hover{text-decoration:underline;text-underline-offset:3px}

.not-found-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:#f6f8fc;color:var(--ink,#182236)}
.not-found{width:min(100%,640px);padding:clamp(28px,6vw,56px);border:1px solid var(--line,#dce4f0);border-radius:20px;background:#fff;box-shadow:0 18px 55px #17263c12;text-align:center}
.not-found .brand{justify-content:center;margin-bottom:44px;color:inherit;text-decoration:none}
.not-found h1{margin:12px 0 16px;font-size:clamp(30px,5vw,48px);line-height:1.1;letter-spacing:-.04em}
.not-found>p:not(.eyebrow):not(.not-found-language){max-width:480px;margin:0 auto 28px;font-size:18px;line-height:1.55}
.not-found .button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border-radius:9px;background:#235bea;color:#fff;font-weight:700;text-decoration:none}
.not-found-language{margin:28px 0 0;font-size:14px}.not-found-language a{text-underline-offset:3px}
[data-theme="dark"] .not-found-page{background:#101d35;color:#edf3ff}[data-theme="dark"] .not-found{background:#16263e;border-color:#465a78}
footer .footer-help-navigation a{color:#fff}
footer .support-tool,[data-theme="dark"] footer .support-tool{background:#235bea;border-color:transparent;border-radius:0;box-shadow:0 0 0 100vmax #235bea;clip-path:inset(-36px -100vmax -32px)}
footer .support-description,footer .support-note,[data-theme="dark"] footer .support-description,[data-theme="dark"] footer .support-note{color:#fff}
footer .support-button,[data-theme="dark"] footer .support-button{background:#fff;border-color:#fff;color:#235bea}
footer .support-button:hover,[data-theme="dark"] footer .support-button:hover{background:#edf3ff;border-color:#edf3ff}
footer>.footer-brand-row{background:transparent;color:inherit;margin:14px 0 0;padding:0;width:100%}
footer .sprite-counter,footer .sprite-counter strong,[data-theme="dark"] footer .sprite-counter,[data-theme="dark"] footer .sprite-counter strong{color:#fff}

header:not(.has-navigation) .navigation-links{flex-wrap:wrap}

.project-file-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:18px 0 0;max-width:100%}
.project-file-format-hint{font-size:13px;color:var(--muted,#68758d)}
.project-file-status{display:block;margin:0}

/* More breathing room for reading text and consecutive paragraphs. */
main p{line-height:1.85}
main p + p{margin-top:32px}
main .guide p,main .legal-page p{line-height:1.85}
main p.generator-footnote,
.pricing-summary .pricing-note.generator-footnote,
#image-variant-help p.generator-footnote,
.guide .reference-note{line-height:1.85}
main p.generator-footnote + p.generator-footnote{margin-top:28px}
.retina-technique-description li p{line-height:1.85}

/* Separate the comparison paragraphs and the individual benefits clearly. */
main .sprite-comparison p{margin-top:0;margin-bottom:32px}
main .sprite-comparison p + p{margin-top:32px}
main .sprite-comparison h3{margin-top:40px;margin-bottom:20px}
main .sprite-comparison h3:first-child{margin-top:0}
main .sprite-comparison pre{margin-top:24px;margin-bottom:32px}
main .img-advantages ul{row-gap:40px}
@media(min-width:761px){main .sprite-comparison > .sprite-comparison-continuation{margin-top:0}}
@media(max-width:760px){main .img-advantages ul{row-gap:32px}}

main .img-advantages li,main .guide-steps li{line-height:1.85}

.layers-diagram{box-shadow:0 0 22px rgba(35,91,234,.12)}
[data-theme="dark"] .layers-diagram{box-shadow:0 0 24px rgba(90,135,255,.16)}

.pricing-grid > .pricing-plan{box-shadow:none}
.tutorial-player{box-shadow:0 6px 24px rgba(35,91,234,.16)}
[data-theme="dark"] .pricing-grid > .pricing-plan{box-shadow:none}
[data-theme="dark"] .tutorial-player{box-shadow:0 6px 26px rgba(90,135,255,.2)}

.workspace{box-shadow:0 0 22px rgba(35,91,234,.12)}
[data-theme="dark"] .workspace{box-shadow:0 0 24px rgba(90,135,255,.16)}

.browser-table-wrap{box-shadow:0 0 22px rgba(35,91,234,.12)}
[data-theme="dark"] .browser-table-wrap{box-shadow:0 0 24px rgba(90,135,255,.16)}




.pricing-grid > .pricing-plan-paid{box-shadow:inset 0 3px 0 var(--blue),0 2px 8px #23345804}
[data-theme="dark"] .pricing-grid > .pricing-plan-paid{box-shadow:inset 0 3px 0 #8caeff}












/* Highlight.js: readable syntax colours on the existing dark code panels. */
main pre code.hljs{color:#dfebff;background:transparent;padding:0}
main pre code .hljs-tag,main pre code .hljs-name{color:#9ecbff}
main pre code .hljs-attr,main pre code .hljs-attribute{color:#d2a8ff}
main pre code .hljs-string{color:#a5e8c5}
main pre code .hljs-comment{color:#a8b6ca;font-style:italic}
main pre code .hljs-selector-tag,main pre code .hljs-selector-class,main pre code .hljs-selector-id{color:#9ecbff}
main pre code .hljs-selector-pseudo,main pre code .hljs-keyword,main pre code .hljs-built_in{color:#ffb3ba}
main pre code .hljs-number,main pre code .hljs-literal{color:#ffd38a}

.gallery-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 24px;border-top:1px solid var(--line);color:#5d6980;font-size:15px}
.gallery-pagination[hidden]{display:none}
.gallery-page-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gallery-page-controls select{font:inherit;min-height:44px;padding:8px 12px;border:1px solid #ccd4e4;border-radius:9px;background:#fff;color:#25324b}
#grid{scroll-margin-top:calc(var(--sticky-header-height,100px) + 20px)}
[data-theme="dark"] .gallery-pagination{color:#b4c1d8}
[data-theme="dark"] .gallery-page-controls select{background:#16263e;color:#edf3ff;border-color:#465a78}
@media(max-width:600px){.gallery-pagination{padding:18px 12px;justify-content:center}.gallery-page-controls{justify-content:center}}

.gallery-page-numbers{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gallery-page-numbers button{min-width:44px;padding:8px 12px}
.gallery-page-numbers span{padding:0 4px}
.gallery-page-numbers button[aria-current="page"]{background:#235bea;border-color:#235bea;color:#fff}
[data-theme="dark"] .gallery-page-numbers button[aria-current="page"]{background:#315ed4;border-color:#6489ed;color:#fff}

.gallery-page-controls [hidden]{display:none!important}

/* Arrow shapes: UXWing line-angle-left-icon and line-angle-right-icon. */
.gallery-page-controls button[data-prev],.gallery-page-controls button[data-next]{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.gallery-page-controls .pagination-arrow{display:block;flex:none;width:10px;height:18px}

.duplicate-images-dialog .replacement-names{padding-left:0}
.duplicate-images-dialog .replacement-names>div+div{margin-top:12px}

@media(max-width:600px){.gallery-pagination .gallery-page-numbers{display:none}}

@media(max-width:480px){
 .gallery-pagination{flex-direction:column;gap:16px;text-align:center}
 .gallery-pagination .gallery-page-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:320px;gap:16px 24px}
 .gallery-page-controls select[data-page-size]{grid-column:1/-1;justify-self:center;max-width:100%}
 .gallery-page-controls button[data-prev]{grid-column:1;grid-row:2}
 .gallery-page-controls button[data-next]{grid-column:2;grid-row:2}
 .gallery-page-controls button[data-prev],.gallery-page-controls button[data-next]{padding:10px 12px;min-width:0;gap:8px}
}

.account-dialog .account-summary .account-email{display:flex;align-items:center;gap:7px}
.account-email-icon{width:20px;height:20px;flex:0 0 20px;color:var(--blue)}
.account-email>span{min-width:0;overflow-wrap:anywhere}
[data-theme="dark"] .account-email-icon{color:#8caeff}

.browser-guide .browser-version-year{font-weight:400}

#retina-title{scroll-margin-top:var(--navigation-gap,25px)}

.project-settings-body .project-background{display:flex;align-items:center;gap:10px;grid-column:1 / -1;margin-top:16px}
.project-settings .project-background input{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--blue)}



.html-export-options .retina-controls>label .retina-background-note{margin-left:-4px}


.project-settings .project-uniform{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:16px}
.project-settings .project-uniform input{width:18px;height:18px;min-height:0;padding:0;margin:0;accent-color:var(--blue)}
.project-uniform-size input{max-width:160px}

.project-settings .project-uniform-note{grid-column:1/-1;margin:0;font-size:13px;line-height:1.6}

.project-settings .project-uniform[hidden],.project-settings .project-uniform-note[hidden],.project-settings .project-uniform-size[hidden]{display:none!important}

.project-settings .project-uniform-size{grid-column:1/-1;display:flex;align-items:flex-end;gap:12px;max-width:420px}
.project-uniform-size label{flex:1;min-width:0}.project-uniform-size input{width:100%;max-width:none}
.project-uniform-size .icon-size-link{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:8px;margin-bottom:1px}
.icon-size-link[aria-pressed="true"]{color:#235bea;background:#edf2ff;border-color:#235bea}.icon-size-link[aria-pressed="false"]{color:#667085;background:transparent}

.project-uniform-size.is-disabled label{opacity:.45}.project-uniform-size.is-disabled input{cursor:not-allowed}

.project-uniform-size .icon-size-link{width:30px;height:30px;min-height:30px;padding:5px;margin-bottom:8px;border-color:transparent;border-radius:5px;box-shadow:none}
.project-uniform-size .icon-size-link svg{width:17px;height:17px}
.project-uniform-size .icon-size-link[aria-pressed="true"]{color:#526f9c;background:#edf2f9;border-color:transparent}
.project-uniform-size .icon-size-link[aria-pressed="false"]{color:#8490a2;background:transparent;border-color:transparent}
.project-uniform-size .icon-size-link:hover:not(:disabled){background:#e3eaf5;box-shadow:none}
[data-theme="dark"] .project-uniform-size .icon-size-link[aria-pressed="true"]{background:#25354a;color:#a9bddb}

.project-settings .project-uniform-size input{height:44px;box-sizing:border-box}
.project-uniform-size .icon-size-link{height:44px;min-height:44px;margin-bottom:0}
.project-uniform-size .icon-size-link[aria-pressed],
.project-uniform-size .icon-size-link:hover:not(:disabled),
[data-theme="dark"] .project-uniform-size .icon-size-link[aria-pressed]{background:transparent;border-color:transparent;box-shadow:none}

.project-settings .project-scale-svg{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:32px}
.project-settings .project-scale-svg input{width:18px;height:18px;min-height:0;padding:0;margin:0;accent-color:var(--blue)}
.project-settings .project-scale-svg[hidden]{display:none!important}

.project-settings .project-scale-svg{align-items:flex-start}
.project-scale-svg .scale-svg-text{display:flex;flex-direction:column;gap:3px}
.project-scale-svg small{font-size:13px;line-height:1.4;font-weight:400}
.project-settings .project-scale-svg input{margin-top:2px}

.project-scale-svg [data-scale-title]{font-weight:700}

.card .image-editor .image-scale-svg{display:flex;align-items:flex-start;gap:8px;font-weight:400}
.card .image-editor .image-scale-svg[hidden]{display:none}
.card .image-scale-svg input{width:16px;height:16px;margin:3px 0 0;accent-color:#235bea;flex:none}
.card .image-scale-svg strong,.card .image-scale-svg small{display:block}
.card .image-scale-svg small{margin:0;font-size:13px}
.card .image-editor .image-optimize{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:400}
.card .image-editor .image-optimize[hidden]{display:none}
.card .image-optimize input{width:16px;height:16px;margin:0;accent-color:#235bea;flex:none}

.card .image-size-fields.is-scale-locked label{color:#748099}
.card .image-size-fields input:disabled{background:#f4f6fb;color:#748099;cursor:not-allowed}
[data-theme="dark"] .card .image-size-fields.is-scale-locked label{color:#adbed8}
[data-theme="dark"] .card .image-size-fields input:disabled{background:#202a3b;color:#adbed8}

.project-scale-svg.is-disabled{opacity:.5;cursor:not-allowed}
.project-scale-svg.is-disabled input{cursor:not-allowed}

.card .image-scale-svg.is-disabled{opacity:.5;cursor:not-allowed}
.card .image-scale-svg.is-disabled input{cursor:not-allowed}

.project-retina-density{display:inline-flex;align-items:center;gap:6px;margin:0 8px;font-weight:400}
.project-retina-density[hidden]{display:none}
.project-retina-density select{width:auto;min-width:65px;padding:5px 8px;font:inherit;border:1px solid #cbd5eb;border-radius:6px;background:var(--surface,#fff);color:inherit}

.html-export-options .retina-controls>.project-retina-density{flex:0 0 auto;gap:8px;margin:0 4px;white-space:nowrap}
.html-export-options .project-retina-density select{flex:0 0 auto;width:72px;min-width:72px;box-sizing:border-box}

.html-export-options .retina-controls>.project-retina-density{margin:0;gap:0}

/* Density beside Retina; markup selection in advanced settings. */
.html-export-options .retina-density-radios{display:flex;align-items:center;gap:14px}
.html-export-options .retina-density-radios[hidden]{display:none}
.html-export-options .retina-density-radios label{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:14px}
.project-settings .retina-output-modes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;grid-column:1/-1;margin:12px 0 0}
.project-settings .retina-output-modes[hidden]{display:none}
.project-settings .retina-output-modes label{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:14px;font-weight:400}
.project-settings .retina-output-modes input{width:18px;min-width:18px;height:18px;margin:0;padding:0;accent-color:#235bea}

/* Group advanced Retina settings and the optional background output. */
.project-settings .project-retina-section{grid-column:1/-1;margin-top:36px}
.project-settings .project-retina-section[hidden]{display:none}
.project-settings .project-retina-section h3,.project-settings .project-optional-section h3{margin:0 0 12px;font-size:17px;line-height:1.3;font-weight:600}
.project-settings .project-output-question{margin:0 0 8px;font-size:14px;color:inherit}
.project-settings .project-retina-section .retina-output-modes{margin:0;gap:12px 20px}
.project-settings .project-retina-section .project-scale-svg{margin-top:24px}
.project-settings .project-optional-section{grid-column:1/-1;margin-top:20px;padding:18px 20px;background:#edf2ff;border-radius:10px}
.project-settings .project-optional-section .project-background{margin:0}
.project-settings .project-optional-section .project-background>span{font-weight:700}
.project-settings .project-optional-section .project-background{align-items:flex-start}
.project-settings .project-optional-section .project-background input{margin-top:2px}
.project-settings .project-optional-section .project-background>span{display:flex;flex-direction:column;gap:3px}
.project-settings .project-optional-section .project-background strong{font-size:14px;line-height:1.5;font-weight:600}
.project-settings .project-optional-section .project-background small{font-size:14px;line-height:1.5;font-weight:400}
.project-settings .project-optional-section .project-background-repeat{display:grid;gap:6px;margin:20px 0 0 28px;font-size:14px;font-weight:400}
.project-settings .project-optional-section .project-background-repeat.is-disabled{opacity:.5}
.project-settings .project-optional-section .project-background-repeat[hidden]{display:none!important}
.project-settings .project-optional-section .project-background-repeat select{width:250px;max-width:100%;min-height:38px}
.project-settings .project-optional-section .project-background-repeat small{font-size:13px;line-height:1.45;font-weight:400}
.project-settings .project-optional-section .project-background-repeat small[hidden]{display:none}
.project-settings .project-optional-section .project-background-container{display:grid;gap:7px;margin:10px 0 0 28px;font-size:14px;font-weight:400}
.project-settings .project-optional-section .project-background-container-options{display:flex;align-items:center;gap:18px}
.project-settings .project-optional-section .project-background-container-options label{display:flex;align-items:center;gap:6px}
.project-settings .project-optional-section .project-background-container input{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--blue)}
.project-settings .project-optional-section .project-background-container-note{font-size:13px;line-height:1.45;font-weight:400;color:#235bea}
.project-settings .project-optional-section .project-background-container-note[hidden]{display:none}
.project-settings .project-optional-section .project-background-container.is-disabled{opacity:.5}
.project-settings .project-optional-section .project-background-responsive{display:grid;gap:7px;margin:20px 0 0 28px;font-size:14px;font-weight:400}
.project-settings .project-optional-section .project-background-responsive-options{display:flex;align-items:center;gap:18px}
.project-settings .project-optional-section .project-background-responsive-options label{display:flex;align-items:center;gap:6px}
.project-settings .project-optional-section .project-background-responsive input{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--blue)}
.project-settings .project-optional-section .project-background-responsive.is-disabled{opacity:.5}
.project-settings .project-background-javascript-note{font-size:13px;line-height:1.45;font-weight:400;color:#235bea}
.project-settings .project-background-javascript-note[hidden]{display:none}
.body-image-warning-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin-top:24px}
.project-settings .project-lossless-compression{display:flex;align-items:flex-start;gap:10px;grid-column:1/-1;margin-top:44px}
.project-settings .project-lossless-compression input{width:18px;height:18px;min-height:0;padding:0;margin:2px 0 0;accent-color:var(--blue);flex:none}
.project-settings .project-lossless-compression>span{display:flex;flex-direction:column;gap:3px}
.project-settings .project-lossless-compression strong{font-size:14px;line-height:1.5}
.project-settings .project-lossless-compression small{font-size:14px;line-height:1.5;font-weight:400}
[data-theme="dark"] .project-settings .project-optional-section{background:#293241}

.html-export-options .retina-controls[data-compat-has-10]:not(.retina-background-active){padding:8px 12px;box-sizing:border-box}

.html-export-options .retina-controls[data-compat-has-10],
[data-theme="dark"] .html-export-options .retina-controls[data-compat-has-10]{background:transparent;box-shadow:none;border:0}

.project-settings .project-optional-section{position:relative;margin-top:28px}


.project-settings .project-retina-section{margin-top:12px}

.project-settings .project-optional-section,
[data-theme="dark"] .project-settings .project-optional-section{background:transparent;padding:0;border-radius:0}
.html-export-options .retina-controls[data-compat-has-10]{background:#edf2ff;box-shadow:0 0 0 6px #edf2ff;border-radius:5px;padding:8px 12px}
[data-theme="dark"] .html-export-options .retina-controls[data-compat-has-10]{background:#293241;box-shadow:0 0 0 6px #293241}

.project-settings .project-output-question{font-weight:700}

.project-settings .project-optional-section{box-sizing:border-box;padding:18px 22px;background:#eaf1ff;border-left:4px solid #6289e0;border-radius:0 8px 8px 0}
[data-theme="dark"] .project-settings .project-optional-section{padding:18px 22px;background:#1b2d49;border-left-color:#86a9ff;border-radius:0 8px 8px 0}

.html-export-options .retina-controls[data-compat-has-10]:not(.retina-background-active){padding:4px 6px}

.project-settings .project-optional-section{width:fit-content;max-width:100%;justify-self:start}

.project-settings .project-output-question{margin-bottom:3px}

/* Desktop layout: output selection left, SVG scaling right. */
@media(min-width:760px){
 .project-settings .project-retina-section{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:56px;row-gap:0;align-items:start}
 .project-settings .project-retina-section[hidden]{display:none}
 .project-settings .project-retina-section h3{grid-column:1/-1;margin-bottom:18px}
 .project-settings .project-output-question{grid-column:1;grid-row:2}
 .project-settings .project-retina-section .retina-output-modes{grid-column:1;grid-row:3}
 .project-settings .project-retina-section .project-scale-svg{grid-column:2;grid-row:2/4;margin-top:0}
}

.project-settings .project-retina-section{border-top:1px solid var(--line,#d9e0ef);padding-top:18px}

.project-settings .project-optional-section,
[data-theme="dark"] .project-settings .project-optional-section{width:100%;max-width:100%;box-sizing:border-box;padding:18px 0 0;background:transparent;border:0;border-top:1px solid var(--line,#d9e0ef);border-radius:0;box-shadow:none}

.project-settings .project-retina-section{border-top:0;padding-top:0;margin-top:40px}

.project-settings .project-settings-body{margin-top:32px}
.project-settings .project-paths-heading{grid-column:1/-1;margin:0 0 2px;font-size:17px;line-height:1.3;font-weight:600}

.project-settings .project-retina-section{border-top:1px solid var(--line,#d9e0ef);padding-top:18px}

.project-settings .project-retina-section{margin-top:16px;padding-top:32px}

/* Equal 32px spacing on both sides of each settings separator (16px grid gap). */
.project-settings .project-retina-section,
.project-settings .project-optional-section,
[data-theme="dark"] .project-settings .project-optional-section{margin-top:16px;padding-top:32px;padding-bottom:0;margin-bottom:0}

.project-settings .project-optional-section h3{color:inherit}

@media(min-width:760px){
 .project-settings .project-retina-section,
 .project-settings .project-optional-section{display:grid;grid-template-columns:minmax(0,calc(36.5% - 56px)) minmax(0,1fr);column-gap:122px;align-items:start}
 .project-settings .project-retina-section .retina-output-modes{flex-wrap:nowrap}
 .project-settings .project-optional-section{row-gap:14px}
 .project-settings .project-optional-section h3{grid-column:1/-1;margin-bottom:0}
 .project-settings .project-optional-section .project-background,
 .project-settings .project-optional-section .project-lossless-compression{grid-column:auto;margin:0}
 .project-settings .project-optional-section .project-background{grid-column:1;grid-row:2}
 .project-settings .project-optional-section .project-background-container{grid-column:1;grid-row:3}
 .project-settings .project-optional-section .project-background-responsive{grid-column:1;grid-row:4}
 .project-settings .project-optional-section .project-background-repeat{grid-column:1;grid-row:5}
 .project-settings .project-optional-section .project-lossless-compression{grid-column:2;grid-row:2/4}
}
@media(min-width:760px) and (max-width:999px){
 .project-settings .project-retina-section,
 .project-settings .project-optional-section{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
 .project-settings .project-retina-section .retina-output-modes{flex-wrap:wrap}
}
/* Preserve the desktop spacing (20px margin + 14px grid gap) when stacked. */
@media(max-width:759px){
 .project-settings .project-optional-section .project-background-responsive,
 .project-settings .project-optional-section .project-background-repeat{margin-top:34px}
 .project-settings .project-optional-section .project-background-container{margin-top:24px}
}

.project-settings .project-retina-section.is-disabled h3,
.project-settings .project-retina-section.is-disabled .project-output-question,
.project-settings .project-retina-section.is-disabled .retina-output-modes,
.project-settings .project-retina-section.is-disabled .project-scale-svg{opacity:.5}
.project-settings .project-retina-section.is-disabled label,.project-settings .project-retina-section.is-disabled input{cursor:not-allowed}

/* Align the Retina settings columns with matching title and body typography. */
.project-settings .project-output-question,
.project-settings .project-scale-svg [data-scale-title]{font-size:14px;line-height:1.5;font-weight:700}
.project-settings .retina-output-modes label,
.project-settings .project-scale-svg small{font-size:14px;line-height:1.5;font-weight:400}
.project-settings .project-scale-svg .scale-svg-text{display:grid;grid-template-rows:auto auto;align-content:start;gap:3px;margin:0;padding:0}
.project-settings .project-scale-svg [data-scale-title],
.project-settings .project-scale-svg small{display:block;margin:0;padding:0}
.project-settings .project-output-question{padding:0;align-self:start}
.project-settings .project-retina-section .project-scale-svg{align-self:start}

.export-summary-dialog{width:min(600px,calc(100vw - 32px))}
.export-summary-files .export-file-description{display:inline-block;max-width:100%;vertical-align:top;overflow-wrap:normal}

.project-settings .project-output-question.is-disabled,
.project-settings .retina-output-modes.is-disabled{opacity:.5}
.project-settings .retina-output-modes.is-disabled label,
.project-settings .retina-output-modes.is-disabled input{cursor:not-allowed}

/* Keep Retina checkbox geometry stable in every toggle/background state. */
.html-export-options .retina-controls,
.html-export-options .retina-controls[data-compat-has-10],
.html-export-options .retina-controls[data-compat-has-10]:not(.retina-background-active){padding:4px 6px 4px 0;box-sizing:border-box}
.html-export-options .retina-density-radios[hidden]{display:flex;visibility:hidden;pointer-events:none}

/* Export overview: compact settings, readable file rows and a clear action area. */
.export-summary-dialog{width:min(580px,calc(100vw - 32px));padding:26px;scrollbar-gutter:auto}
.export-summary-dialog h2{margin:0;font-size:26px;line-height:1.2;letter-spacing:-.5px}
.export-summary-dialog p[data-count]{margin:8px 0 20px;font-size:14px;line-height:1.5;color:#65718a}
.export-settings{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 24px;padding:16px;background:#f4f6fc;border:1px solid #e2e7f2;border-radius:10px}
.export-settings dt{font-size:12px;line-height:1.4;color:#65718a;margin-bottom:5px}
.export-settings dd{margin:0;font-size:14px;line-height:1.4;font-weight:600}
.export-summary-dialog p[data-package]{margin:0 0 8px;font-size:18px;line-height:1.5;font-weight:700;color:inherit}
.export-summary-dialog .export-summary-files{list-style:none;padding:0;margin:0;line-height:1.4}
.export-summary-dialog .export-summary-files li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;margin:0;padding:12px 0;border-bottom:1px solid #e6eaf2}
.export-file-type{display:flex;align-items:center;justify-content:center;width:36px;height:40px;border:1px solid #dbe3f3;border-radius:7px;background:#f4f7ff;color:#4163a7;font-size:10px;font-weight:700;letter-spacing:.3px}
.export-file-info{min-width:0}
.export-summary-files .export-file-info code{display:block;font-size:13px;line-height:1.5;overflow-wrap:anywhere;background:none;padding:0;color:inherit}
.export-summary-files .export-file-info .export-file-description{display:block;font-size:12px;line-height:1.5;margin-top:2px;color:#65718a}
.export-summary-dialog .export-file-size{font-size:12px;font-variant-numeric:tabular-nums;color:#65718a;text-align:right}
.export-summary-dialog p[data-note]{margin:16px 0 20px;font-size:12px;line-height:1.6;color:#65718a}
.export-summary-dialog [data-vector-retina],.export-summary-dialog .export-background-note{padding:12px 14px;font-size:13px;line-height:1.5;border-left-width:3px;border-radius:0 7px 7px 0}
.export-summary-dialog .clear-workspace-actions{gap:10px;flex-direction:row;flex-wrap:nowrap;padding-top:0}
.export-summary-dialog .clear-workspace-actions button{font-size:16px;min-height:44px;padding:11px 18px;border-radius:9px}
.export-summary-dialog .clear-workspace-actions [data-cancel]{flex:1 1 0;min-width:0;background:transparent;box-shadow:none}
.export-summary-dialog .clear-workspace-actions [data-download]{flex:1 1 0;min-width:0}
[data-theme="dark"] .export-settings{background:#1d304a;border-color:#384a66}
[data-theme="dark"] .export-settings dt,[data-theme="dark"] .export-summary-dialog p[data-count],[data-theme="dark"] .export-summary-dialog p[data-note],[data-theme="dark"] .export-file-info .export-file-description,[data-theme="dark"] .export-summary-dialog .export-file-size{color:#b0bfd5}
[data-theme="dark"] .export-summary-dialog .export-summary-files li{border-color:#384a66}
[data-theme="dark"] .export-file-type{background:#243956;color:#b7ceff;border-color:#405574}
@media(max-width:480px){.export-summary-dialog{padding:20px;width:calc(100vw - 24px)}.export-summary-dialog h2{font-size:24px}.export-settings{gap:12px;padding:12px}.export-summary-dialog .export-summary-files li{gap:9px;grid-template-columns:32px minmax(0,1fr) auto}.export-file-type{width:30px;height:36px;font-size:9px}.export-summary-files .export-file-info code{font-size:12px}.export-summary-dialog .clear-workspace-actions button{padding:10px 12px}}

.export-file-type{white-space:nowrap;overflow-wrap:normal;letter-spacing:0;font-size:9px}
@media(max-width:480px){.export-summary-dialog .export-summary-files li{grid-template-columns:minmax(0,1fr) auto}.export-summary-dialog .export-file-type{display:none}}

.export-summary-dialog .export-summary-files li{grid-template-columns:minmax(0,1fr) auto}


/* Improve readability of secondary text in the download overview. */
.export-summary-files .export-file-info .export-file-description,
.export-summary-dialog .export-file-size,
.export-summary-dialog p[data-note],
.export-summary-dialog [data-vector-retina]{font-size:14px}

.export-summary-dialog p[data-count],
[data-theme="dark"] .export-summary-dialog p[data-count]{color:var(--blue)}

/* Download contents: aligned filenames and descriptions without list bullets. */
#kurzanleitung>.lead{font-size:calc(20px * var(--mobile-font-scale, 1));font-weight:400;line-height:1.6;color:#5d6980;margin-bottom:28px}
#kurzanleitung .quick-guide-files{list-style:none;margin:0 0 32px;padding:0;width:100%;max-width:760px;border-top:1px solid var(--line,#d9e0ef)}
#kurzanleitung .quick-guide-files li{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);align-items:baseline;gap:12px 20px;margin:0;padding:14px 0;border-bottom:1px solid var(--line,#d9e0ef);line-height:1.5}
#kurzanleitung .quick-guide-files code{font-size:15px;overflow-wrap:anywhere;background:none;padding:0;color:inherit}
#kurzanleitung .quick-guide-file-description{font-size:14px;color:#65718a}
[data-theme="dark"] #kurzanleitung .quick-guide-file-description{color:#b0bfd5}
@media(max-width:600px){#kurzanleitung .quick-guide-files li{grid-template-columns:minmax(0,1fr);gap:3px;padding:12px 0}#kurzanleitung .quick-guide-files code{font-size:14px}}

@media(min-width:601px){#kurzanleitung .quick-guide-files li{grid-template-columns:minmax(0,313px) minmax(0,1fr)}}

#kurzanleitung .quick-guide-file-name{display:flex;align-items:center;gap:6px;min-width:0}
#kurzanleitung .quick-guide-file-name code{min-width:0}
.quick-guide-file-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px;color:#5273af}
.quick-guide-file-icon svg{display:block;width:20px;height:20px}
[data-theme="dark"] .quick-guide-file-icon{color:#a5bff2}
@media(max-width:600px){#kurzanleitung .quick-guide-file-description{padding-left:32px}}

.quick-guide-file-icon{background-color:currentColor;-webkit-mask:var(--file-icon) center/contain no-repeat;mask:var(--file-icon) center/contain no-repeat}
.quick-guide-icon-image{--file-icon:url('../assets/site-sprite.svg#download-image')}
.quick-guide-icon-css-file{--file-icon:url('../assets/site-sprite.svg#download-css-file')}
.quick-guide-icon-html-file{--file-icon:url('../assets/site-sprite.svg#download-html-file')}
.quick-guide-icon-text-file-line{--file-icon:url('../assets/site-sprite.svg#download-text-file-line')}

.quick-guide-file-icon{flex-basis:26px;width:26px;height:26px}
@media(max-width:600px){#kurzanleitung .quick-guide-file-description{padding-left:38px}}

/* Retina explanation: a readable comparison followed by embedding choices. */
#technik .retina-technique{margin:36px 0 56px}
#technik .retina-technique>h3{font-size:24px;line-height:1.3;margin-bottom:16px;letter-spacing:-.02em}
#technik .retina-technique-description p{font-size:16px;line-height:1.65;hyphens:none;text-align:left}
#technik .retina-technique-description>.retina-overview-intro{max-width:78ch;margin-bottom:24px}
.retina-density-comparison{max-width:760px;margin:0 0 24px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.retina-density-comparison table{border-collapse:collapse;width:100%;text-align:left;font-size:15px}
.retina-density-comparison caption{text-align:left;padding:16px 20px;font-weight:600;background:#edf2ff;color:#253a65}
.retina-density-comparison th,.retina-density-comparison td{padding:12px 20px;border-top:1px solid var(--line);line-height:1.5}
.retina-density-comparison thead th{font-size:12px;font-weight:600;color:#65718a}
.retina-density-comparison tbody th{color:var(--blue);white-space:nowrap}
.retina-density-comparison th span{display:inline-block;font-size:11px;font-weight:500;margin-left:6px;color:#65718a}
#technik .retina-method-heading{font-size:18px;margin:30px 0 14px}
.retina-method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 20px}
.retina-method-card{padding:22px;background:#fff;border:1px solid var(--line);border-radius:12px;min-width:0}
#technik .retina-method-card h5,#technik .retina-background-option h5{font-size:18px;line-height:1.35;margin:0 0 10px;color:inherit}
#technik .retina-method-card p,#technik .retina-background-option p{margin:0;font-size:15px;line-height:1.65}
.retina-technique-description code{white-space:normal;overflow-wrap:anywhere;font-size:.9em}
.retina-background-option{padding:22px 24px;border:1px solid #cfdaf0;border-radius:12px;background:#edf2ff;margin-bottom:24px}
.retina-optional-badge{display:inline-block;margin-bottom:10px;color:#235bea;font-size:12px;font-weight:700;letter-spacing:.02em}
#technik .retina-technique-description>.generator-footnote{border-top:1px solid var(--line);padding-top:20px;font-size:14px;line-height:1.7}
.retina-technique-description>.generator-footnote>strong{display:block;color:#182236;font-size:15px;margin-bottom:6px}
[data-theme="dark"] .retina-method-card,[data-theme="dark"] .retina-density-comparison{background:#1b2b43}
[data-theme="dark"] .retina-density-comparison caption,[data-theme="dark"] .retina-background-option{background:#223650;color:#dce7fa;border-color:#405574}
[data-theme="dark"] .retina-density-comparison thead th,[data-theme="dark"] .retina-density-comparison th span{color:#b0bfd5}
[data-theme="dark"] .retina-technique-description>.generator-footnote>strong{color:#edf3ff}
@media(max-width:900px){.retina-method-grid{grid-template-columns:1fr}.retina-method-card{padding:20px}}
@media(max-width:480px){.retina-density-comparison th,.retina-density-comparison td{padding:10px;font-size:13px}.retina-density-comparison caption{padding:14px;font-size:14px}.retina-density-comparison th span{display:block;margin-left:0}.retina-background-option{padding:18px}#technik .retina-technique>h3{font-size:22px}}

/* Retina guide: quiet editorial layout with aligned labels and descriptions. */
#technik .retina-technique-description{max-width:960px}
.retina-density-comparison{max-width:760px;border:0;border-radius:0;background:transparent}
.retina-density-comparison caption{padding:0 0 12px;background:transparent;color:inherit}
.retina-density-comparison th,.retina-density-comparison td{padding:12px 16px 12px 0}
.retina-density-comparison tbody tr:last-child{border-bottom:1px solid var(--line)}
.retina-density-comparison tbody th{color:inherit}
.retina-method-grid{display:block;margin-bottom:0;border-top:1px solid var(--line)}
.retina-method-card{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;padding:24px 0;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
#technik .retina-method-card h5{margin:0;font-size:17px;line-height:1.65}
#technik .retina-method-card p{font-size:16px;line-height:1.7;max-width:70ch}
.retina-background-option{display:grid;grid-template-columns:180px minmax(0,1fr);gap:0 28px;padding:24px 0;margin:0 0 24px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
.retina-optional-badge{grid-column:1;grid-row:1;margin:0 0 6px;font-size:12px;color:#65718a;font-weight:500}
#technik .retina-background-option h5{grid-column:1;grid-row:2;font-size:17px;line-height:1.5;margin:0}
#technik .retina-background-option p{grid-column:2;grid-row:1/3;font-size:16px;line-height:1.7;max-width:70ch}
#technik .retina-technique-description>.generator-footnote{border-top:0;padding-top:0;max-width:85ch}
[data-theme="dark"] .retina-method-card,[data-theme="dark"] .retina-density-comparison,[data-theme="dark"] .retina-density-comparison caption,[data-theme="dark"] .retina-background-option{background:transparent}
[data-theme="dark"] .retina-optional-badge{color:#b0bfd5}
@media(max-width:650px){.retina-method-card,.retina-background-option{display:block;padding:20px 0}#technik .retina-method-card h5,#technik .retina-background-option h5{margin-bottom:8px}.retina-optional-badge{margin-bottom:4px}#technik .retina-method-card p,#technik .retina-background-option p{font-size:15px}}

/* General embedding comparison, with resolution as supporting information. */
#technik .retina-technique-description{max-width:none}
#technik .retina-technique-description>.embedding-intro{width:100%;max-width:none;margin-bottom:24px;font-size:calc(20px * var(--mobile-font-scale,1))}
.embedding-table-wrap{width:100%;overflow-x:auto;margin:0 0 24px;border-bottom:1px solid var(--line)}
.embedding-comparison{width:100%;min-width:760px;table-layout:fixed;border-collapse:collapse;text-align:left;font-size:15px;line-height:1.6}
.embedding-comparison caption{text-align:left;font-weight:700;font-size:18px;padding:0 0 16px;color:inherit}
.embedding-comparison th,.embedding-comparison td{padding:18px 20px;vertical-align:top;border-top:1px solid var(--line);hyphens:none;overflow-wrap:break-word}
.embedding-comparison th:first-child{width:19%;padding-left:0}
.embedding-comparison thead th{font-size:13px;font-weight:600;color:#65718a;background:transparent}
.embedding-comparison tbody th{font-size:16px;font-weight:700;color:inherit}
.embedding-comparison td{color:#5d6980}
.embedding-comparison code{font-size:.9em;white-space:nowrap}
.embedding-comparison .caniuse-link{color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.embedding-comparison .caniuse-link:hover,.embedding-comparison .caniuse-link:focus-visible{color:#174fc9}
.embedding-optional{display:block;margin-top:4px;color:var(--blue);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
#technik .retina-technique-description>.embedding-note{max-width:95ch;font-size:14px;line-height:1.7;margin:0 0 16px}
.embedding-note strong{color:#182236}
[data-theme="dark"] .embedding-comparison td,[data-theme="dark"] .embedding-comparison thead th{color:#b0bfd5}
[data-theme="dark"] .embedding-note strong{color:#edf3ff}
.embedding-table-wrap:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

/* Stack comparison rows on narrow screens while retaining their column labels. */
@media(max-width:800px){
 .embedding-table-wrap{overflow:visible;border-bottom:0}
 .embedding-comparison{min-width:0;table-layout:auto;display:block}
 .embedding-comparison caption{display:block;font-size:18px}
 .embedding-comparison thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .embedding-comparison tbody{display:block}
 .embedding-comparison tbody tr{display:block;padding:20px 0;border-top:1px solid var(--line)}
 .embedding-comparison tbody tr:last-child{border-bottom:1px solid var(--line)}
 .embedding-comparison tbody th:first-child{display:block;width:auto;padding:0 0 16px;border:0;font-size:18px}
 .embedding-comparison tbody td{display:block;padding:0;border:0;font-size:15px;line-height:1.65}
 .embedding-comparison tbody td+td{margin-top:14px}
 .embedding-comparison tbody td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:#65718a}
 .embedding-optional{display:inline-block;margin:0 0 0 10px;vertical-align:middle}
 [data-theme="dark"] .embedding-comparison tbody td::before{color:#b0bfd5}
}

#technik .retina-technique>.eyebrow{font-size:calc(17px * var(--mobile-font-scale,1));font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);margin:0 0 12px;line-height:1.6;text-align:left}
#technik .retina-technique>h2{font-size:calc(clamp(27px,4vw,36px) * var(--mobile-font-scale,1));font-weight:700;letter-spacing:-.03em;line-height:1.2;margin:0 0 24px}

.embedding-comparison{min-width:640px}
.embedding-comparison th:first-child{width:22%}
@media(max-width:800px){.embedding-comparison{min-width:0}.embedding-comparison tbody th:first-child{width:auto}}

#technik .retina-technique{border-top:1px solid var(--line);padding-top:36px}

#technik .formats-title{border-top:1px solid var(--line);padding-top:36px;margin:36px 0 24px;font-size:calc(clamp(27px,4vw,36px) * var(--mobile-font-scale,1));font-weight:700;letter-spacing:-.03em;line-height:1.2}
#technik .formats-title::before{content:"Dateiformate";display:block;font-size:calc(17px * var(--mobile-font-scale,1));font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);margin:0 0 12px;line-height:1.6}
html[lang="en"] #technik .formats-title::before{content:"File formats"}

/* Shared layout for the page's main content headings. */
main{--section-gap:77px;--section-heading-gap:42px}
main :is(#kurzanleitung,.pricing-summary,#technik,#img-vorteile,.browser-guide,.faq,.tutorial-section),
#technik .retina-technique{
 border-top:1px solid var(--line);margin-top:var(--section-gap);padding-top:var(--section-gap);margin-bottom:0;
}
main :is(#quick-help-title,#pricing-title,#guide-title,#advantages-title,#browser-title,#faq-title),
#technik .retina-technique>h2,
main .tutorial-section>h2,
#technik .formats-title{
 font-size:calc(clamp(27px,4vw,36px) * var(--mobile-font-scale,1));font-weight:700;letter-spacing:-.03em;line-height:1.2;margin:0 0 var(--section-heading-gap);text-align:left;
}
main :is(#kurzanleitung,.pricing-summary,.guide-heading,#img-vorteile,.browser-guide,.faq,.tutorial-section)>.eyebrow,
#technik .retina-technique>.eyebrow,
#technik .formats-title::before{
 font-size:calc(17px * var(--mobile-font-scale,1));font-weight:700;letter-spacing:.13em;line-height:1.6;text-transform:uppercase;color:var(--blue);margin:0 0 12px;text-align:left;
}
#technik .formats-title{border-top:1px solid var(--line);margin-top:305px;padding-top:75px}
#technik .retina-technique>.reference-note{margin-bottom:0}
[data-theme="dark"] main :is(#kurzanleitung,.pricing-summary,.guide-heading,#img-vorteile,.browser-guide,.faq,.tutorial-section)>.eyebrow,
[data-theme="dark"] #technik .retina-technique>.eyebrow,
[data-theme="dark"] #technik .formats-title::before{color:#a3bdff}
@media(max-width:760px){main{--section-gap:53px;--section-heading-gap:32px}}
@media(max-width:760px){#technik .formats-title{margin-top:235px;padding-top:62px}#technik .retina-technique>.reference-note{margin-bottom:0}}

#kurzanleitung{margin-top:77px;padding-top:77px}
@media(max-width:760px){#kurzanleitung{margin-top:53px;padding-top:53px}}

#technik .formats-intro{max-width:none;margin:0 0 28px;font-size:calc(20px * var(--mobile-font-scale,1));line-height:1.6;text-align:left;hyphens:none}

#technik .embedding-comparison code{font-weight:700}
.browser-guide tfoot td{font-size:14px;line-height:1.6}

/* Soft outward glow and gentle enlargement of the hovered format tile. */
@media(hover:hover) and (pointer:fine){
 .format-grid>article{position:relative;transition:transform .25s ease,box-shadow .3s ease,border-color .3s ease}
 .format-grid>article:hover{transform:scale(1.015);z-index:1;border-color:#8aaaff;box-shadow:0 0 0 1px rgb(43 94 255 / 12%),0 0 24px 4px rgb(43 94 255 / 20%)}
}
@media(prefers-reduced-motion:reduce){
 .format-grid>article{transition:none}
 .format-grid>article:hover{transform:none}
}


/* Identify the language of each code sample directly in its code panel. */
:is(.guide,.help) pre[data-code-type]{position:relative;padding-top:42px}
:is(.guide,.help) pre[data-code-type]::before{content:attr(data-code-type);position:absolute;top:13px;left:18px;color:#a9c2f8;font-family:Inter,ui-sans-serif,sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1;text-transform:uppercase}

/* Highlight only Retina, keeping the optional AVIF fallback outside. */
.html-export-options .retina-controls[data-compat-has-10],
[data-theme="dark"] .html-export-options .retina-controls[data-compat-has-10]{background:transparent;box-shadow:none}
.html-export-options .retina-highlight{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;min-width:0;border-radius:5px}
.html-export-options .retina-highlight>label{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:calc(15px * var(--mobile-font-scale, 1) - 1px)}
.html-export-options .retina-highlight>.project-retina-density{flex:0 0 auto;margin:0;gap:0;white-space:nowrap}
.html-export-options .retina-highlight>label .retina-background-note{margin-left:-4px}
.html-export-options .retina-highlight[data-compat-has-12]{background:#edf2ff;box-shadow:0 0 0 6px #edf2ff}
[data-theme="dark"] .html-export-options .retina-highlight[data-compat-has-12]{background:#293241;box-shadow:0 0 0 6px #293241}


/* Compact download summary, with full filenames still readable. */
.export-summary-dialog{padding:22px}
.export-summary-dialog h2{font-size:23px;line-height:1.2}
.export-summary-dialog p[data-count]{margin:6px 0 12px;font-size:13px}
.export-summary-dialog p[data-package]{margin:0 0 4px;font-size:16px}
.export-summary-dialog .export-summary-files li{padding:7px 0;gap:8px 12px;align-items:start}
.export-summary-dialog .export-file-info code{font-family:inherit;font-size:13px;font-weight:400;line-height:1.4}

.export-summary-dialog .export-file-info .export-file-description{font-size:12px;line-height:1.3;margin-top:1px}
.export-summary-dialog .export-file-size{font-size:12px;line-height:1.35;padding-top:1px}
.export-summary-dialog p[data-note]{margin:10px 0 12px;font-size:12px;line-height:1.4}
.export-summary-dialog [data-vector-retina],.export-summary-dialog .export-background-note{padding:8px 10px;font-size:12px;line-height:1.4}
.export-summary-dialog p[data-vector-retina]{font-size:14px;line-height:1.5}
@media(max-width:480px){.export-summary-dialog{padding:18px}.export-summary-dialog h2{font-size:22px}}

@supports not (grid-template-rows:subgrid){.pricing-grid{align-items:stretch}.pricing-plan{display:flex;flex-direction:column;grid-row:auto}.pricing-table{display:table;grid-row:auto;width:100%}.pricing-table tbody{display:table-row-group}.pricing-table tr{display:table-row}.pricing-plan-action{margin-top:auto}.import-result-uploads>div{grid-template-rows:auto auto;grid-row:auto}}
@supports not (width:1cqw){#gallery-actions.tiles-collapsed{--collapsed-control-width:100%}}
dialog:not([open]){display:none}
dialog + .backdrop{position:fixed;inset:0;background:rgba(16,29,53,.5)}

/* Anchor headings receive programmatic focus, including in Firefox 80. */
main h1[tabindex="-1"]:focus,
main h2[tabindex="-1"]:focus,
main section[tabindex="-1"]:focus { outline: none; }

/* Center header button labels independently of native browser button metrics. */
:is(body>header,body>:where(.site-header-stack)>header) .site-controls .account-button,
:is(body>header,body>:where(.site-header-stack)>header) .language-switch > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  padding-top: 0;
  padding-bottom: 0;
}

#kurzanleitung .avif-fallback-guide { width: 100%; max-width: 760px; padding-top: 10px; }

#kurzanleitung .avif-fallback-code { margin-top: 16px; }
#kurzanleitung .avif-fallback-code > summary { width: fit-content; max-width: 100%; cursor: pointer; color: var(--blue); font-weight: 600; }

/* Separate gallery controls from the visible image tiles. */
#gallery-actions { position: relative; }
#gallery-actions:not(.tiles-collapsed) { margin-bottom: 0; padding-top: 22px; padding-bottom: 0; }
@media(max-width:600px){#gallery-actions:not(.tiles-collapsed){padding-top:14px;padding-bottom:0}}


/* Smooth hover zoom stays inside the preview. */
.card .preview{overflow:hidden}
.card .preview .preview-fit{transition:transform .65s cubic-bezier(.22,1,.36,1);transform-origin:center}
@media(prefers-reduced-motion:reduce){.card .preview .preview-fit{transition:none}}

/* Refined download package overview. */
.export-summary-dialog{width:min(620px,calc(100vw - 32px));padding:28px;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 80px #10203b30}
.export-summary-dialog h2{font-size:25px;line-height:1.25;letter-spacing:-.5px}
.export-summary-dialog p[data-count]{font-size:14px;color:#65718a;margin:8px 0 24px}
.export-summary-dialog p[data-package]{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;color:#65718a}
.export-summary-dialog .export-summary-files{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#f8faff}
.export-summary-dialog .export-summary-files li{grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;margin:0;border-bottom:1px solid var(--line)}
.export-summary-dialog .export-summary-files li:last-child{border-bottom:0}
.export-summary-dialog .export-file-type{display:flex;width:40px;height:44px;background:#edf2ff;border:1px solid #dbe4fb;border-radius:8px;font-size:10px;font-weight:600;color:#2859b5}
.export-summary-dialog .export-file-info code{font-family:inherit;font-size:14px;font-weight:400;line-height:1.45}
.export-summary-dialog .export-file-info .export-file-description{font-size:12px;line-height:1.4;margin-top:3px}
.export-summary-dialog .export-file-size{font-size:12px;white-space:nowrap;align-self:center;padding:0;font-variant-numeric:tabular-nums}
.export-summary-dialog p[data-note]{font-size:12px;line-height:1.6;margin:14px 0 22px}
.export-summary-dialog .clear-workspace-actions{border-top:1px solid var(--line);padding-top:18px;gap:12px}
.export-summary-dialog .clear-workspace-actions button{font-size:14px;font-weight:600}
[data-theme="dark"] .export-summary-dialog .export-summary-files{background:#19283d}
[data-theme="dark"] .export-summary-dialog .export-file-type{background:#243956;border-color:#405574;color:#b7ceff}
[data-theme="dark"] .export-summary-dialog p[data-package]{color:#b0bfd5}
@media(max-width:480px){.export-summary-dialog{padding:18px}.export-summary-dialog h2{font-size:22px}.export-summary-dialog .export-summary-files li{padding:12px 10px;gap:8px;grid-template-columns:34px minmax(0,1fr) auto}.export-summary-dialog .export-file-type{width:32px;height:38px;font-size:9px}.export-summary-dialog .export-file-info code{font-size:13px}.export-summary-dialog .clear-workspace-actions{flex-wrap:wrap}}

.export-summary-dialog p[data-count]{color:var(--blue)}
[data-theme="dark"] .export-summary-dialog p[data-count]{color:#a5bfff}

.export-summary-dialog .export-file-info code{font-weight:500}

/* This notice is rendered only when JavaScript is disabled. */
#no-js-container>p{margin:0;padding:16px max(24px,calc((100% - 1180px)/2));background:#fff;color:#5d6980;font-size:14px;text-align:center}
#no-js-container a{color:var(--blue);overflow-wrap:anywhere;text-underline-offset:3px}
@media(max-width:760px){#no-js-container>p{padding:16px}}

/* Safari 15 has no :focus-visible: retain a visible keyboard focus. */
@supports not selector(:focus-visible){
 button:focus,a:focus,input:focus,select:focus,textarea:focus,summary:focus,[tabindex="0"]:focus{outline:3px solid #719bff;outline-offset:3px}
 :is(body>header,body>:where(.site-header-stack)>header) a:focus,:is(body>header,body>:where(.site-header-stack)>header) button:focus,.navigation-panel a:focus,.navigation-panel button:focus{outline-color:#fff}
}

/* Keep the no-JavaScript notice and navigation together without fixed heights. */
.site-header-stack{position:sticky;top:0;z-index:60}
.site-header-stack>header{position:relative;top:auto}
@media(max-width:1120px){.site-header-stack{transition:transform 240ms ease-out}}
@media(prefers-reduced-motion:reduce){.site-header-stack{transition:none}}

#kurzanleitung .embed-example{width:100%;max-width:none}
.embed-example-image.is-dynamic{border:1px solid var(--line);background:#f8faff}
.embed-diagram{display:grid;grid-template-columns:minmax(200px,.25fr) minmax(0,.75fr);text-align:left}
.embed-diagram-files{min-width:0;padding:22px;color:#526785;border-right:1px solid var(--line)}
.embed-diagram-root{font:600 16px/1.5 ui-monospace,monospace;margin-bottom:20px;color:#365886}
.embed-diagram-files ul{list-style:none;margin:0;padding-left:15px;border-left:1px solid #d5deee}
.embed-diagram-files li{position:relative;margin:0;padding:6px 0 6px 10px;font:12px/1.65 ui-monospace,monospace;overflow-wrap:anywhere}
.embed-diagram-files li::before{content:'';position:absolute;left:-15px;top:20px;width:20px;border-top:1px solid #d5deee}
.embed-diagram-files li>ul{margin-top:7px}
.embed-diagram-files li>span{display:inline-block;padding:4px 6px;border-radius:6px}
.diagram-folder{font-weight:600;color:#5275bc}
.diagram-css{background:#e9eeff;color:#3c5dad}
.diagram-image{background:#e0f5ee;color:#267c68}
.embed-diagram-editor{min-width:0;background:#282a36;color:#dfebff;display:flex;flex-direction:column}
.embed-diagram-tabs{position:relative;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:15px 14px 15px 108px;background:#21222c;border-bottom:1px solid #363845}
.embed-diagram-tabs::before{content:'';position:absolute;left:22px;top:25px;width:14px;height:14px;border-radius:50%;background:#ff5f57;box-shadow:24px 0 #ffbd2e,48px 0 #28c840}
.embed-diagram-tabs button{min-width:0;padding:6px 9px;border:1px solid transparent;background:transparent;color:#c4cde0;font:12px/1.5 ui-monospace,monospace;overflow-wrap:anywhere;box-shadow:none}
.embed-diagram-tabs button[aria-pressed="true"]{background:#363845;border-color:#565d78;color:#fff}
.embed-diagram-tabs button{scroll-margin-top:calc(var(--sticky-header-height,80px) + 24px)}
.embed-diagram-tabs button:hover{background:#363845}
.embed-diagram-copy-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.embed-diagram-copy-status{font:12px/1.5 sans-serif;color:#c4cde0;max-width:180px}
.embed-diagram-tabs .embed-diagram-copy{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;padding:8px}
.embed-diagram-copy img{display:block;width:18px!important;min-width:0!important;height:18px!important}
.embed-diagram-code{white-space:pre-wrap;overflow-wrap:anywhere;padding:28px;max-height:580px;overflow:auto;font:15px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2;flex:1}
.embed-diagram-code .hljs-tag,.embed-diagram-code .hljs-name,.embed-diagram-code .hljs-selector-class{color:#9ecbff}
.embed-diagram-code .hljs-attr,.embed-diagram-code .hljs-attribute{color:#d2a8ff}
.embed-diagram-code .hljs-string{color:#a5e8c5}
.embed-diagram-code .hljs-comment{color:#a8b6ca}
.embed-diagram-code .hljs-number,.embed-diagram-code .hljs-literal{color:#ffd38a}
.embed-diagram-code .hljs-keyword,.embed-diagram-code .hljs-built_in{color:#ffb3ba}
.embed-diagram-result{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:18px 24px;background:#fff;color:#63728c;font-size:12px;line-height:1.6}
.embed-diagram-id{padding:5px 12px;background:#fff6e4;border:1px solid #eed8a7;border-radius:20px;color:#936922;font-family:ui-monospace,monospace;overflow-wrap:anywhere}
.embed-diagram-motif{display:grid;place-items:center;margin-left:auto;padding:8px;border:1px solid var(--line);border-radius:10px;color:#3265ef;background:#f8faff}
[data-theme="dark"] .embed-example-image.is-dynamic,[data-theme="dark"] .embed-diagram-result{background:#19283d;color:#b4c1d8}
[data-theme="dark"] .embed-diagram-root,[data-theme="dark"] .diagram-folder{color:#a5bfff}
[data-theme="dark"] .embed-diagram-files{color:#b4c1d8}
@media(max-width:1100px){.embed-diagram{grid-template-columns:minmax(0,1fr)}.embed-diagram-files{border-right:0;border-bottom:1px solid var(--line)}.embed-diagram-code{padding:20px 16px;font-size:14px}.embed-diagram-tabs{padding-left:102px}}

.embed-diagram-tabs{color:#c4cde0;font:13px/1.5 ui-monospace,monospace;min-height:52px}

/* Match the tutorial preview glow to the interactive example. */
.tutorial-external-preview{box-shadow:0 0 16px 3px rgba(35,91,234,.14),0 0 32px 6px rgba(35,91,234,.09)}
[data-theme="dark"] .tutorial-external-preview{box-shadow:0 0 16px 3px rgba(90,135,255,.19),0 0 32px 6px rgba(90,135,255,.12)}

/* Present the settings reset action as a text link. */

/* Keep AVIF beside alt text when the options wrap to multiple rows. */
@media(max-width:767px){
 .html-export-options{grid-template-columns:22px max-content minmax(0,1fr);gap:12px 10px}
 .html-export-options .retina-controls{display:contents}
 .html-export-options .retina-controls>.avif-fallback-control{grid-column:3;grid-row:1;justify-self:start}
 .html-export-options .retina-highlight{grid-column:2/-1;grid-row:2;justify-self:start}
 .html-export-options .gallery-filters{grid-row:3}
}

.card-body .replace-image{display:block;min-width:0;min-height:38px;padding:8px 14px;border:1px solid #cbd5e9;border-radius:8px;background:#edf2ff;box-shadow:none;color:var(--blue);font-size:13px;text-decoration:none;text-align:center}
[data-theme="dark"] .card-body .replace-image{color:#a5bfff;background:#243550;border-color:#405574}

.card-body .image-editor .replace-image{font-weight:400;width:100%;box-sizing:border-box;text-align:center}

.card-body .image-editor .replace-image-hint{display:block;margin-top:-6px;font-weight:400;line-height:1.5}


/* Balance the upload area's vertical spacing, including without project controls. */
#drop{padding-top:32px;padding-bottom:32px}
#drop>div>h2:first-child{margin-top:0}
#drop .project-file-status:empty{display:none}
#drop>div>p.small:not(.upload-free-note){margin-bottom:0}
@media(max-width:760px){#drop{padding-top:24px;padding-bottom:24px}}

/* Allow moving the entire tile by its image preview. */
.grid .card .preview{cursor:move;touch-action:none;user-select:none;-webkit-user-select:none}
.grid .card .preview img{-webkit-user-drag:none}
.grid .card.dragging .preview{cursor:move}


/* Thematic footer columns, retaining the site's existing colors. */
footer .footer-link-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;width:100%;flex:1 0 100%;margin:12px 0 28px;text-align:left}
footer .footer-grouped-navigation{display:contents}
footer .footer-link-group{min-width:0}
footer .footer-link-group h2{margin:0 0 18px;color:inherit;font-size:15px;font-weight:700;line-height:1.4}
footer .footer-link-group a,footer .footer-link-group .privacy-settings{display:block;width:fit-content;max-width:100%;margin:0 0 10px;padding:0;min-height:0;color:inherit;font-size:15px;line-height:1.6;font-weight:400;text-align:left;text-decoration:none;overflow-wrap:anywhere}
footer .footer-link-group a:hover,footer .footer-link-group .privacy-settings:hover{text-decoration:none;color:inherit;background:transparent;box-shadow:none;transform:none;filter:none;opacity:1}
footer .footer-link-group .privacy-settings[hidden]{display:none}
@media(max-width:900px){footer .footer-link-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}}
@media(max-width:480px){footer .footer-link-columns{grid-template-columns:minmax(0,1fr);gap:26px}}
@media print{footer .footer-link-columns{display:none}}

/* Consistent weight for all third-level headings. */
h3{font-weight:600}

strong{font-weight:600}

h4{font-weight:600}

/* Animate the existing dropzone colors. */
#drop.dropzone{transition:background-color .25s ease,border-color .25s ease}
@media(prefers-reduced-motion:reduce){#drop.dropzone{transition:none}}

/* Privacy categories start collapsed; choices remain independently selectable. */
details.consent-category{padding-top:0;padding-bottom:0}
.consent-category>summary{display:list-item;padding:12px 4px;cursor:pointer}
.consent-category[open]>summary{border-bottom:1px solid var(--line)}
.consent-category[open]{padding-bottom:6px}

html body>footer>.footer-note[hidden]{display:none!important}

/* Animation export notice: justified paragraphs with language-aware hyphenation. */
dialog.account-dialog.animation-export-dialog>p{text-align:justify;text-align-last:auto;-webkit-hyphens:auto;hyphens:auto;}

@media(max-width:379px){
 .html-export-options{padding:14px 12px;column-gap:8px}
 .html-export-options>label,.html-export-options .avif-fallback-control{font-size:13px;gap:6px;white-space:nowrap}
}

/* Match informational popup headings to the blue site header. */
.feedback-notice-dialog #import-result-content:not(.error) .import-result-title{color:var(--blue);}

/* Social profile links share the footer color and wrap on small screens. */
footer > .footer-social{display:flex;flex:1 0 100%;width:100%;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px;margin:20px 0 0}
footer .footer-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;box-sizing:border-box;padding:10px;color:inherit;border-radius:8px}
footer .footer-social svg{display:block;flex:none;width:24px;height:24px;fill:currentColor}
footer .footer-social a:hover{background:transparent;text-decoration:none;box-shadow:none;transform:none;filter:none;opacity:1;color:inherit}
footer .footer-social a{-webkit-tap-highlight-color:transparent}
footer .footer-social a:active{background:transparent;box-shadow:none;transform:none}
footer .footer-social a:focus{outline:none}
footer .footer-social a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media print{footer > .footer-social{display:none}}

/* Static hamburger; the panel has a separate static close icon. */
.navigation-toggle>.navigation-hamburger,.navigation-close>.navigation-hamburger{display:inline-block;position:relative;width:20px;height:16px;flex:0 0 20px;pointer-events:none}
.navigation-hamburger i{position:absolute;left:0;top:7px;width:20px;height:2px;background:currentColor;border-radius:2px;transform-origin:center;transition:none}
.navigation-hamburger i:nth-child(1){transform:translateY(-6px)}
.navigation-hamburger i:nth-child(3){transform:translateY(6px)}
.navigation-close .navigation-hamburger i:nth-child(1){transform:rotate(45deg)}
.navigation-close .navigation-hamburger i:nth-child(2){opacity:0;transform:scaleX(0)}
.navigation-close .navigation-hamburger i:nth-child(3){transform:rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.navigation-hamburger i{transition:none!important;animation:none!important}}

.navigation-toggle,.navigation-close,.navigation-hamburger,.navigation-hamburger i{animation:none!important;transition:none!important}

/* Text selection uses the header blue in both themes. */
::selection{background-color:#235bea;color:#fff;text-shadow:none}
::-moz-selection{background-color:#235bea;color:#fff;text-shadow:none}

.image-color-editor{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:16px 0}.image-color-editor[hidden]{display:none}.image-color-editor label{display:flex;align-items:center;gap:12px}.image-color-editor input[type="color"]{width:52px;height:40px;padding:3px;cursor:pointer}.image-color-editor small{flex-basis:100%}


/* Batch sizing follows the optional settings flow, without legacy size-control styles. */
.project-settings .project-optional-section>.project-batch-size{display:block;grid-column:1/-1;grid-row:6;width:100%;min-width:0;max-width:none;margin:28px 0 24px;padding:0;border:0}
.project-settings .project-batch-size h3{font-size:14px;font-weight:600;line-height:1.5;margin:0 0 14px}
.project-settings .project-batch-size .uniform-size-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-left:28px}
.project-settings .project-batch-size .uniform-size-controls label{display:flex;flex:0 1 160px;flex-direction:column;align-items:stretch;gap:6px;min-width:120px;font-size:14px;font-weight:400}
.project-settings .project-batch-size .uniform-size-controls label+label{flex-basis:120px}
.project-settings .project-batch-size :is(input,select){width:100%;max-width:none;min-height:44px;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:inherit;color:inherit;background:transparent}
.project-settings .project-batch-size button{flex:0 0 auto;white-space:nowrap;font-size:14px}
.project-settings .project-batch-size p{display:block;max-width:70ch;margin:12px 0 0 28px;font-size:14px;line-height:1.5;color:#5d6980}
.project-settings .project-batch-size [data-uniform-status]:empty{display:none}
.project-settings .project-optional-section>.project-lossless-compression{grid-column:1/-1;grid-row:7;margin:0}
[data-theme="dark"] .project-settings .project-batch-size p{color:#adbed8}
@media(max-width:480px){.project-settings .project-batch-size .uniform-size-controls{margin-left:0}.project-settings .project-batch-size p{margin-left:0}.project-settings .project-batch-size button{width:100%}}

.project-settings .project-batch-size .uniform-size-axis{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:0;padding:0;border:0;min-width:0}
.project-settings .project-batch-size .uniform-size-axis legend{padding:0;margin-bottom:10px;font-size:14px}
.project-settings .project-batch-size .uniform-size-axis label{display:flex;flex:0 0 auto;flex-direction:row;align-items:center;gap:7px;min-width:0;min-height:44px;margin:0}
.project-settings .project-batch-size .uniform-size-axis input[type="radio"]{appearance:auto;-webkit-appearance:radio;width:18px;height:18px;min-height:0;max-width:18px;flex:none;margin:0;padding:0;accent-color:#235bea}
.project-settings .project-batch-size .uniform-size-controls>label{flex-basis:120px}

.project-settings .project-batch-size .uniform-size-controls>label{flex:0 0 90px;min-width:0}.project-settings .project-batch-size input[data-uniform-value]{width:90px;max-width:100%}

.project-settings .project-batch-size button[data-uniform-apply]{width:auto;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;color:#235bea;font-weight:400;text-decoration:underline;text-underline-offset:.2em;box-shadow:none;cursor:pointer}
.project-settings .project-batch-size button[data-uniform-apply]:hover:not(:disabled){background:transparent;color:#235bea;box-shadow:none}
[data-theme="dark"] .project-settings .project-batch-size button[data-uniform-apply]{color:#9ab4ff}

/* Match the compact label spacing of the responsive radio group. */
.project-settings .project-batch-size .uniform-size-axis legend{margin-bottom:7px;line-height:1.5}
.project-settings .project-batch-size .uniform-size-axis label{min-height:0;line-height:1.5}

.project-settings .project-batch-size .uniform-size-toggle{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-weight:600}
.project-settings .project-batch-size .uniform-size-toggle input[type="checkbox"]{appearance:auto;-webkit-appearance:checkbox;width:18px;height:18px;min-height:0;max-width:18px;flex:none;margin:2px 0 0;padding:0;accent-color:#235bea}
.project-settings .project-batch-size.is-disabled .uniform-size-controls,.project-settings .project-batch-size.is-disabled [data-uniform-note]{opacity:.45}
.project-settings .project-batch-size.is-disabled .uniform-size-controls :is(input,button){cursor:not-allowed}

/* Keep the axis choice and pixel field close together. */
.project-settings .project-batch-size .uniform-size-controls{justify-content:flex-start;column-gap:12px}
.project-settings .project-batch-size .uniform-size-axis{flex:0 0 auto;width:auto;max-width:none;padding:0;margin:0;column-gap:12px}
.project-settings .project-batch-size .uniform-size-axis label{flex:0 0 auto;width:auto;padding:0;margin:0}

/* Optional tools: background, uniform sizes and optimisation in three columns. */
.project-settings .project-batch-size .uniform-size-controls{display:grid;grid-template-columns:90px minmax(0,1fr);column-gap:16px;row-gap:24px;align-items:end}
.project-settings .project-batch-size .uniform-size-axis{grid-column:1/-1;justify-self:start}
.project-settings .project-batch-size .uniform-size-controls>label{grid-column:1;min-width:0}
.project-settings .project-batch-size button[data-uniform-apply]{grid-column:2;justify-self:start;white-space:normal;text-align:left}
.project-settings .project-batch-size p{margin-top:24px;text-align:left}
@media(min-width:768px){
 .project-settings .project-optional-section{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr);column-gap:32px;row-gap:14px;align-items:start}
 .project-settings .project-optional-section>h3{grid-column:1/-1;grid-row:1;margin-bottom:6px}
 .project-settings .project-optional-section>.project-background{grid-column:1;grid-row:2;margin:0}
 .project-settings .project-optional-section>.project-background-container{grid-column:1;grid-row:3;margin-top:16px}
 .project-settings .project-optional-section>.project-background-responsive{grid-column:1;grid-row:4;margin-top:20px}
 .project-settings .project-optional-section>.project-background-repeat{grid-column:1;grid-row:5;margin-top:20px}
 .project-settings .project-optional-section>.project-batch-size{grid-column:2;grid-row:2/6;margin:0;padding:0;min-width:0}
 .project-settings .project-optional-section>.project-batch-size h3{margin-bottom:28px}
 .project-settings .project-optional-section>.project-lossless-compression{grid-column:3;grid-row:2/6;margin:0;min-width:0}
}
@media(min-width:768px) and (max-width:1099px){
 .project-settings .project-optional-section{grid-template-columns:repeat(2,minmax(0,1fr))}
 .project-settings .project-optional-section>.project-lossless-compression{grid-column:1/-1;grid-row:6;margin-top:24px}
}
@media(max-width:767px){
 .project-settings .project-optional-section{display:block}
 .project-settings .project-optional-section>.project-background{margin-top:20px}
 .project-settings .project-optional-section>.project-batch-size{margin:28px 0}
 .project-settings .project-optional-section>.project-lossless-compression{margin-top:24px}
}

.project-settings .project-batch-size [data-uniform-note]{white-space:pre-line}

.project-settings .project-batch-size [data-uniform-note],[data-theme="dark"] .project-settings .project-batch-size [data-uniform-note]{font-size:14px;line-height:1.5;font-weight:400;color:inherit}

.project-settings .project-batch-size [data-uniform-note]{margin-top:10px}

#import-result-content .feedback-size-note{margin:20px 0 0;padding:18px 22px;border-left:4px solid #6289e0;border-radius:0 10px 10px 0;background:#eaf1ff;color:#5d6980;font-size:17px;font-weight:400;line-height:1.65}
[data-theme="dark"] #import-result-content .feedback-size-note{background:#1b2d49;color:#c0d1ef;border-left-color:#86a9ff}

/* Align the SVG scaling and uniform sizing controls on the same column edge. */
@media(min-width:768px){
 .project-settings .project-retina-section{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr);column-gap:32px}
 .project-settings .project-retina-section .project-scale-svg{grid-column:2/-1}
 .project-settings .project-retina-section .retina-output-modes{flex-wrap:wrap}
}
@media(min-width:768px) and (max-width:1099px){
 .project-settings .project-retina-section{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Stack Retina and optional settings at the same breakpoint. */
@media(max-width:767px){
 .project-settings .project-retina-section{display:block}
 .project-settings .project-retina-section .project-scale-svg{margin-top:24px}
 .project-settings .project-retina-section .retina-output-modes{flex-wrap:wrap}
}

/* Local walkthrough loads on demand; the full tutorial remains linked below. */
.tutorial-short-preview{position:relative;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 0 16px 3px rgba(35,91,234,.14)}
.tutorial-short-preview video{display:block;width:100%;height:auto;aspect-ratio:400/203}
.tutorial-short-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:12px;max-width:90%;padding:16px 24px;border:2px solid #fff;border-radius:10px;background:#235bea;color:#fff;font:inherit;font-weight:600;cursor:pointer;box-shadow:0 4px 24px #0005}
.tutorial-short-start,.tutorial-short-start:hover:not(:disabled),[data-theme="dark"] .tutorial-short-start,[data-theme="dark"] .tutorial-short-start:hover:not(:disabled){background:#235bea;color:#fff;border-color:#fff;box-shadow:0 4px 24px #0005;transform:translate(-50%,-50%);filter:none;opacity:1;transition:none}
.tutorial-short-start[hidden]{display:none}
.tutorial-short-start:focus-visible{outline:3px solid #fff;outline-offset:4px}
.tutorial-full-guide{margin:18px 0 0}
.tutorial-full-guide a{text-decoration:underline;text-underline-offset:.2em}

.tutorial-full-guide a,.tutorial-full-guide a:visited,.tutorial-full-guide a:hover,.tutorial-full-guide a:active{color:#235bea}

/* Neutral gray outer shadow around the video preview. */
.tutorial-short-preview{border:0;box-shadow:0 0 20px 5px rgba(80,80,80,.16),0 0 40px 10px rgba(80,80,80,.08)}

/* The complete poster is a keyboard-accessible play button. */
.tutorial-short-preview .tutorial-short-start,.tutorial-short-preview .tutorial-short-start:hover:not(:disabled),[data-theme="dark"] .tutorial-short-preview .tutorial-short-start,[data-theme="dark"] .tutorial-short-preview .tutorial-short-start:hover:not(:disabled){inset:0;left:0;top:0;width:100%;height:100%;max-width:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;color:#fff;transition:none}
.tutorial-start-badge{display:flex;align-items:center;justify-content:center;gap:12px;max-width:90%;padding:16px 24px;border:2px solid #fff;border-radius:10px;background:#235bea;color:#fff;font-weight:600;box-shadow:0 4px 24px #0005;pointer-events:none}
.tutorial-short-preview .tutorial-short-start:focus-visible{outline:0}
.tutorial-short-preview .tutorial-short-start:focus-visible .tutorial-start-badge{outline:3px solid #fff;outline-offset:4px}
.tutorial-short-preview .tutorial-short-start[hidden]{display:none}

/* Accessible local video player, matching the site's header blue. */
.tutorial-custom-player{background:var(--surface,#fff);box-shadow:0 0 20px 5px rgba(80,80,80,.16),0 0 40px 10px rgba(80,80,80,.08)}
.tutorial-custom-player .tutorial-short-preview{box-shadow:none}
.tutorial-controls{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#235bea;color:#fff}
.tutorial-controls button,.tutorial-controls button:hover:not(:disabled),[data-theme="dark"] .tutorial-controls button,[data-theme="dark"] .tutorial-controls button:hover:not(:disabled){display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-height:44px;padding:8px;border:0;border-radius:6px;background:transparent;color:#fff;box-shadow:none;transform:none;transition:none;font-size:22px}
.tutorial-controls button[hidden]{display:none}
.tutorial-controls button:focus-visible,.tutorial-controls input:focus-visible{outline:2px solid white;outline-offset:2px}
.tutorial-controls .tutorial-time{white-space:nowrap;font-size:13px;font-variant-numeric:tabular-nums}
.tutorial-controls input[type="range"]{flex:1;min-width:30px;width:100%;height:24px;padding:0;border:0;background:transparent;accent-color:#fff;cursor:pointer}
.tutorial-controls input:disabled{opacity:.5;cursor:default}
.tutorial-player-status{margin:0;padding:12px 16px;color:inherit;font-size:14px}
.tutorial-player-status[hidden]{display:none}
.tutorial-custom-player:fullscreen{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;margin:0;padding:0;box-sizing:border-box;overflow:hidden;background:#000;box-shadow:none}
.tutorial-custom-player:fullscreen .tutorial-short-preview{min-width:0;min-height:0;width:100%;height:100%;position:relative}
.tutorial-custom-player:fullscreen video{position:absolute;inset:0;width:100%;height:100%;max-height:100%;aspect-ratio:auto;object-fit:contain;object-position:center center}
.tutorial-custom-player:fullscreen .tutorial-controls{position:absolute;inset:auto 0 0;box-sizing:border-box;min-width:0;width:100%;margin:0;padding:12px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
@media(max-width:480px){.tutorial-controls{gap:6px;padding:6px}.tutorial-controls .tutorial-time{font-size:11px}}

/* Overlay player inspired by the reference: dark controls and a round play badge. */
.tutorial-custom-player{position:relative;background:#000}
.tutorial-custom-player .tutorial-controls{position:absolute;left:0;right:0;bottom:0;z-index:2;background:rgba(18,31,48,.60);padding:8px 12px;gap:10px}
.tutorial-custom-player .tutorial-controls [data-player-play]{order:0}
.tutorial-custom-player .tutorial-controls [data-player-seek]{order:1;accent-color:#235bea}
.tutorial-custom-player .tutorial-controls .tutorial-time{order:2}
.tutorial-custom-player .tutorial-controls [data-player-fullscreen]{order:3}
.tutorial-custom-player .tutorial-player-status{position:absolute;left:12px;right:12px;bottom:64px;z-index:3;background:#fff;color:#182236;border-radius:6px}
@media(max-width:480px){.tutorial-custom-player .tutorial-controls{padding:4px 6px;gap:5px}}

/* Touch devices use the browser video controls after playback starts. */
.tutorial-custom-player .tutorial-controls[hidden]{display:none}

/* Fullscreen controls overlay the centered video without resizing it. */
.tutorial-custom-player:fullscreen .tutorial-controls{transition:opacity .2s ease}
.tutorial-custom-player:fullscreen.tutorial-controls-idle{cursor:none}
.tutorial-custom-player:fullscreen.tutorial-controls-idle .tutorial-controls{opacity:0;pointer-events:none}
.tutorial-custom-player:fullscreen.tutorial-controls-idle .tutorial-short-start{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.tutorial-custom-player:fullscreen .tutorial-controls{transition:none}}

/* Explicit range styling avoids Safari's native white track border. */
.tutorial-controls input[type="range"]{-webkit-appearance:none;appearance:none;border:0;box-shadow:none;outline:0;border-radius:0}
.tutorial-controls input[type="range"]::-webkit-slider-runnable-track{height:5px;border:0;border-radius:3px;background:linear-gradient(to right,#235bea 0%,#235bea var(--seek-progress,0%),rgba(255,255,255,.6) var(--seek-progress,0%),rgba(255,255,255,.6) 100%);box-shadow:none}
.tutorial-controls input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-4.5px;border:0;border-radius:50%;background:#235bea;box-shadow:none}
.tutorial-controls input[type="range"]::-moz-range-track{height:5px;border:0;border-radius:3px;background:linear-gradient(to right,#235bea 0%,#235bea var(--seek-progress,0%),rgba(255,255,255,.6) var(--seek-progress,0%),rgba(255,255,255,.6) 100%);box-shadow:none}
.tutorial-controls input[type="range"]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#235bea;box-shadow:none}
.tutorial-controls input[type="range"]:focus-visible{outline:2px solid #235bea;outline-offset:3px}

[data-theme="dark"] .card .image-editor .image-size-heading{color:#e5ecf9}

.faq-share-action{display:flex;justify-content:flex-end;margin:0 0 6px}.faq-share-action .heading-share{margin-inline-start:0}

.account-deletion-dialog{max-width:560px;width:calc(100% - 40px);max-height:85vh;overflow:auto;padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--panel,#fff);color:var(--text,#172238)}
.account-deletion-dialog::backdrop{background:rgba(20,30,50,.55)}
.account-deletion-dialog p{line-height:1.55;margin:0 0 28px}.account-deletion-dialog p[role="status"]:empty{display:none}.account-deletion-dialog button{margin:8px 8px 0 0}.account-delete{display:block;margin:18px 0 0 auto;color:#bc2032}

.license-dialog .license-withdrawal-consent{display:flex;align-items:flex-start;gap:12px;margin:24px 0 18px;font-size:calc(14px * var(--mobile-font-scale, 1));line-height:1.6;font-weight:600;color:#000;cursor:pointer}
.license-dialog .license-withdrawal-consent input{flex:0 0 18px;width:18px;height:18px;margin:3px 0 0;padding:0;accent-color:#235bea;cursor:pointer}
.license-dialog .license-withdrawal-consent span{display:block;min-width:0;font-weight:600;overflow-wrap:break-word}
.license-dialog .license-withdrawal-consent input:focus-visible{outline:3px solid #719bff;outline-offset:3px}
[data-theme="dark"] .license-dialog .license-withdrawal-consent{color:#edf3ff}

.license-withdrawal-consent[hidden]{display:none}

.license-dialog .license-withdrawal-consent span,
.license-dialog [data-copy="paymentNote"]{text-align:justify;text-align-last:start;-webkit-hyphens:auto;hyphens:auto;word-break:normal;overflow-wrap:break-word}

.license-dialog .license-paypal.is-consent-blocked{opacity:.45;pointer-events:none;user-select:none}

.consent-actions button:is([data-consent="essential"],[data-consent="save"]),
.consent-actions button:is([data-consent="essential"],[data-consent="save"]):hover:not(:disabled){background:transparent;border-color:#c2cee3;border-radius:11px;box-shadow:none;color:#234674;font-weight:600;text-decoration:none;cursor:pointer}
[data-theme="dark"] .consent-actions button:is([data-consent="essential"],[data-consent="save"]),
[data-theme="dark"] .consent-actions button:is([data-consent="essential"],[data-consent="save"]):hover:not(:disabled){background:transparent;border-color:#526a8e;color:#e5ecf9;box-shadow:none}

.consent-platform a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Consistent start badge typography and play symbol. */
.tutorial-start-badge{font-size:18px;line-height:1.2;padding:14px 24px;white-space:nowrap;flex:0 0 auto}
.tutorial-start-badge>span:first-child{display:block;width:16px;height:18px;font-size:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:16px solid #fff}



/* Keep the account deletion text unchanged on pointer hover. */
.account-dialog .account-delete,
.account-dialog .account-delete:hover:not(:disabled),
[data-theme="dark"] .account-dialog .account-delete,
[data-theme="dark"] .account-dialog .account-delete:hover:not(:disabled){background:transparent;border-color:transparent;color:#bc2032;box-shadow:none;transform:none;filter:none;text-decoration:none;transition:none}

/* Center the deletion dialog in the viewport, including the dialog fallback. */
dialog.account-deletion-dialog{position:fixed;top:50%;left:50%;right:auto;bottom:auto;margin:0;transform:translate(-50%,-50%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}

/* Keep selected site navigation text readable in both themes. */
body > header::selection,
body > header *::selection,
.site-header-stack > header::selection,
.site-header-stack > header *::selection { background: #fff; color: #235bea; }
body > footer::selection,
body > footer *::selection { background: #fff; color: #25324b; }

/* Invert selection on the light support button. */
body > footer .support-button::selection,
body > footer .support-button *::selection { background: #235bea; color: #fff; }

/* Selection on the blue premium unlock button. */
.pricing-unlock::selection,
.pricing-unlock *::selection { background: #fff; color: #235bea; }

/* Selection on the sprite download button. */
#export::selection,
#export *::selection { background: #fff; color: #235bea; }

/* Invert selection on light header controls. */
header .account-button::selection,
header .account-button *::selection,
header .language-switch [data-language][aria-pressed="true"]::selection,
header .language-switch [data-language][aria-pressed="true"] *::selection { background: #235bea; color: #fff; }

/* Optional domestic invoice request, separate from required withdrawal consent. */
.license-dialog .license-german-invoice{display:flex;align-items:flex-start;gap:12px;margin:18px 0 24px;font-size:14px;line-height:1.6;cursor:pointer}
.license-dialog .license-german-invoice input{flex:0 0 18px;width:18px;height:18px;margin:3px 0 0;accent-color:#235bea}
.license-dialog .license-german-invoice[hidden]{display:none}

/* Keep premium project controls hidden until account state is known. */
.project-file-actions[hidden]{display:none}






/* Voluntary support: accessible choice of payment methods. */
.support-options-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:28px;border:1px solid var(--line);border-radius:14px;background:#fff;color:#182236;overflow:auto}
.support-options-dialog::backdrop{background:#101d35a6}
.support-options-dialog form{display:flex;justify-content:flex-end;margin:0 0 8px}
.support-options-dialog .support-close{font-size:26px;line-height:1;min-width:44px;padding:8px}
.support-options-dialog h2{font-size:24px;line-height:1.25;margin:0 0 16px}
.support-options-dialog h3{font-size:18px;margin:56px 0 12px}
.support-options-dialog p{font-size:16px;line-height:1.55;text-align:left}
.support-options-dialog .support-paypal{display:inline-flex;padding:12px 20px;border-radius:8px;margin-top:12px;text-decoration:none}
.support-options-dialog dl{margin:12px 0 16px}
.support-options-dialog dt{font-size:14px;margin-top:12px;color:#5d6980}
.support-options-dialog dd{margin:4px 0 0;font-size:17px}
.support-options-dialog .support-iban{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;user-select:all}
.support-options-dialog .support-copy-status{min-height:1.55em;font-size:14px;margin:8px 0}
.support-options-dialog .support-disclaimer{border-top:1px solid var(--line);padding-top:16px;margin-top:16px;font-size:14px}
[data-theme="dark"] .support-options-dialog{background:#182236;color:#edf3ff;border-color:#3e506d}
[data-theme="dark"] .support-options-dialog p,[data-theme="dark"] .support-options-dialog dt{color:#bdcee9}



/* Source: css/print.css */
@media print {
/* Print-only layout, shared by the German and English pages. */
@page {
  size: A4;
  margin: 16mm 14mm 18mm;
}

@media print {
  html, body {
    background: #fff !important;
    color: #111 !important;
    font-size: 11pt !important;
    height: auto !important;
    overflow: visible !important;
  }
  body { margin: 0 !important; padding: 0 !important; }
  body * {
    color: #111 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-color: #bbb !important;
    animation: none !important;
    transition: none !important;
  }

  /* Screen controls and overlays are not part of the printed document. */
  .site-navigation, .navigation-toggle, .navigation-panel, .navigation-backdrop,
  .navigation-links, .site-controls, header .privacy,
  .dropzone, .workspace, #feedback, .guide-link, .method-link,
  .heading-share, .heading-share-fallback, .pricing-plan-action,
  .consent-banner, .consent-overlay, .consent-backdrop, .consent-settings,
  .account-dialog, .license-dialog, .license-backdrop, dialog,
  .withdrawal-form, .withdrawal-actions, .support-button, .privacy-settings,
  button:not(.image-layer), input, select, textarea,
  [hidden] {
    display: none !important;
  }

  dialog::backdrop { display: none !important; }

  header, .has-navigation {
    position: static !important;
    display: block !important;
    min-height: 0 !important;
    padding: 0 0 4mm !important;
    margin: 0 0 6mm !important;
    border-bottom: 1px solid #bbb !important;
  }
  .brand-heading, .brand {
    font-size: 12pt !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
  }
  .brand-mark { width: 28px !important; height: 28px !important; }
  main, .legal-page, footer {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  section, aside, article { scroll-margin: 0 !important; }
  main > .method-note { display: block; margin: 0 0 6mm !important; }
  main > .help, main > .pricing-summary, main > .guide,
  .guide > .img-advantages, .guide > .browser-guide, .guide > .faq {
    margin-top: 8mm !important;
    padding-top: 6mm !important;
  }
  main > .pricing-summary {
    break-before: page;
    page-break-before: always;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .pricing-summary > .eyebrow {
    break-after: avoid;
    page-break-after: avoid;
  }
  .pricing-grid, .pricing-plan { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, h4, summary {
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
    line-height: 1.25 !important;
  }
  h2, .intro-title, .legal-title { font-size: 18pt !important; margin: 0 0 4mm !important; }
  h3 { font-size: 13pt !important; margin: 6mm 0 3mm !important; }
  h4, summary { font-size: 11pt !important; }
  p, li, address, td, th, dd, dt {
    font-size: 11pt !important;
    line-height: 1.5 !important;
    text-align: left !important;
    orphans: 3;
    widows: 3;
  }
  p { margin: 2.5mm 0 !important; max-width: none !important; }
  p.lead { font-size: 13pt !important; }
  p.eyebrow, .legal-date, figcaption { font-size: 9pt !important; }
  .local-note { padding: 4mm !important; margin: 5mm 0 !important; }
  a { text-decoration: underline; overflow-wrap: anywhere; }

  html body #img-vorteile > ul {
    display: block !important;
    column-count: 1 !important;
    column-width: auto !important;
    column-gap: normal !important;
  }
  html body #img-vorteile > ul > li {
    display: block !important;
    width: auto !important;
    min-width: 0;
    margin: 0 0 5mm !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .sprite-comparison { columns: auto !important; margin-top: 6mm; }
  .sprite-comparison > .sprite-comparison-continuation { break-before: auto !important; }
  .guide-columns { display: block !important; margin: 5mm 0 !important; }
  .format-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4mm !important; margin: 5mm 0 !important; break-inside: avoid; }
  .format-grid article { margin: 0 !important; padding: 4mm; min-width: 0; break-inside: avoid; }
  .layer-explainer { margin: 8mm 0 !important; }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5mm; }
  .pricing-plan { padding: 4mm !important; }
  .pricing-price strong { font-size: 24pt !important; }
  .pricing-table, .browser-guide table { width: 100%; table-layout: fixed; }
  th, td { padding: 2mm !important; overflow-wrap: anywhere; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }

  pre, .embed-code {
    max-width: 100% !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
    font-size: 9pt !important;
    line-height: 1.45 !important;
    padding: 4mm !important;
    border: 1px solid #bbb !important;
    background: #f5f5f5 !important;
    break-inside: avoid;
  }
  pre code { font-size: inherit !important; white-space: inherit !important; }
  code { overflow-wrap: anywhere; }
  figure, .embed-example { max-width: 100% !important; margin: 5mm 0 !important; break-inside: avoid; }
  .embed-example-image { overflow: visible !important; min-width: 0 !important; }
  img, svg { max-width: 100%; }
  .embed-example img { width: 100% !important; min-width: 0 !important; height: auto !important; }
  .layers-diagram {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) !important;
    gap: 3mm !important;
    padding: 4mm !important;
  }
  .layers-diagram > * { min-width: 0; }
  .layer-file-heading { flex-wrap: wrap !important; }
  .layer-file-heading > span { margin-left: 0; }
  .layer-file-heading > code { white-space: normal; overflow-wrap: anywhere; }
  .layer-item-copy strong, .layer-result strong { font-size: 10pt !important; }
  .layer-item-copy code, .layer-result span, .layer-selection-label { font-size: 8pt !important; }
  .layer-stack .image-layer { min-height: 0; padding: 2mm; }
  .layer-preview-canvas { padding: 2mm; min-height: 30mm; }
  .layer-preview-heading { padding: 2mm; font-size: 9pt !important; }
  .selection-arrow { transform: none !important; width: 100%; height: 24px; }
  .sprite-highlights { gap: 3mm !important; padding: 4mm !important; }
  .sprite-highlights strong { font-size: 10pt !important; }

  /* Modern browsers can expose collapsed answers without changing the page. */
  .faq details::details-content { display: block; content-visibility: visible; }
  .faq details { margin: 4mm 0; }
  .faq summary { list-style: none; padding: 0 !important; font-weight: 700; }
  .faq summary::marker, .faq summary::-webkit-details-marker { display: none; content: ''; }
  .faq summary::after { display: none !important; }
  footer { display: block !important; margin-top: 8mm !important; padding-top: 4mm !important; border-top: 1px solid #bbb; }
  footer, footer p, footer a, footer span { font-size: 8pt !important; }
  html body > footer, html body > footer * { text-align: center !important; }
  html body > footer > .footer-note, html body > footer > .footer-brand, html body > footer > .sprite-counter { display: block !important; width: 100% !important; max-width: none !important; margin-inline: 0 !important; }
  body footer .legal-nav, body footer .legal-nav *, body footer .support-tool, body footer .support-tool * { display: none !important; visibility: hidden !important; }
  html body #img-vorteile {
    break-before: page;
    page-break-before: always;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  html body #img-vorteile > ul {
    columns: auto !important;
    overflow: visible !important;
  }
  html body #img-vorteile > ul > li {
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
    overflow: visible !important;
  }
  html body .guide > .faq {
    break-before: page;
    page-break-before: always;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .faq > .eyebrow { break-after: avoid; page-break-after: avoid; }
  .faq details { break-inside: avoid; page-break-inside: avoid; }
}

@media print{html body code{font-size:9pt!important}}

@media print{html body :is(h1,h2,h3,h4,h5,h6) code{font-size:inherit!important}}


/* Keep long documentation readable across printed pages. */
@media print {
  html { color-scheme: light; }
  main, .guide, .help, .legal-page { min-width: 0 !important; }
  html body .copyable-code,
  html body pre,
  html body .faq details {
    break-inside: auto !important;
    page-break-inside: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body pre code {
    display: block;
    white-space: pre-wrap !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.45 !important;
  }
  html body :is(.guide, .help) pre[data-code-type]::before {
    position: static !important;
    display: block;
    margin-bottom: 3mm;
    color: #333 !important;
  }
  html body .copyable-code { width: 100% !important; max-width: none !important; }
  html body .pricing-summary,
  html body .pricing-grid,
  html body .format-grid {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
  html body .pricing-summary,
  html body #img-vorteile,
  html body .guide > .faq {
    break-before: auto !important;
    page-break-before: auto !important;
    margin-top: 8mm !important;
  }
  .footer-help-navigation, .footer-languages,
  html body > footer > .sprite-counter,
  .tutorial-overlay, .tutorial-player,
  video, iframe { display: none !important; }
  .tutorial-preview { display: block !important; padding: 0 !important; height: auto !important; }
  .tutorial-preview img { display: none !important; }
  .tutorial-external-preview::after {
    content: "Video: " attr(href);
    display: block;
    font-size: 9pt;
    overflow-wrap: anywhere;
  }
  .tutorial-section { margin: 6mm 0 !important; padding: 0 !important; }
  html body > footer { break-inside: avoid; }
}

/* Compact code examples without decorative browser-window chrome. */
@media print {
  html body main .copyable-code {
    border: 1px solid #bbb !important;
    border-radius: 0 !important;
    margin: 3mm 0 5mm !important;
  }
  html body main .copyable-code .code-copy-toolbar {
    min-height: 0 !important;
    padding: 2mm 4mm !important;
    border: 0 !important;
    border-bottom: 1px solid #ddd !important;
    break-after: avoid;
    page-break-after: avoid;
  }
  html body main .copyable-code .code-copy-toolbar::before {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
  }
  html body main .copyable-code .code-language {
    margin: 0 !important;
    margin-right: auto !important;
    font-size: 8pt !important;
  }
  html body main .copyable-code > pre {
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 3mm 4mm !important;
    background: transparent !important;
  }
  html body main .copyable-code > pre::before { content: none !important; display: none !important; }
  html body .tutorial-custom-player { display: none !important; }
}

/* Apply the same print treatment to standalone and wrapped code blocks. */
@media print {
  html body pre {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 3mm 0 5mm !important;
    padding: 3mm 4mm !important;
    border: 1px solid #bbb !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 9pt !important;
    line-height: 1.45 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
  }
  html body pre::before, html body pre::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
  }
  html body pre[data-code-type]::before {
    content: attr(data-code-type) !important;
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 2mm !important;
    padding: 0 0 2mm !important;
    border: 0 !important;
    border-bottom: 1px solid #ddd !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111 !important;
    font-size: 8pt !important;
    line-height: 1.5 !important;
  }
  html body main .copyable-code > pre::before { content: none !important; display: none !important; }
}

/* The interactive embedding diagram has its own editor toolbar. */
@media print {
  html body .embed-diagram-tabs,
  html body .embed-diagram-tabs::before,
  html body .embed-diagram-copy-actions { display: none !important; }
  html body .embed-diagram-editor { display: block !important; min-width: 0 !important; }
  html body .embed-diagram-code {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    padding: 3mm 4mm !important;
    font-size: 9pt !important;
    line-height: 1.45 !important;
  }
}

}

/* Source: css/dialog-polyfill.css */
dialog {
  position: absolute;
  left: 0; right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background: white;
  color: black;
  display: block;
}

dialog:not([open]) {
  display: none;
}

dialog + .backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.1);
}

._dialog_overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
}

dialog.fixed {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
}