:root {
  --bg:#fffefb; --ink:#25262a; --muted:#77777b; --line:#e9e7e2;
  --primary:#e86e3c; --primary-dark:#c55026; --soft:#fff0e7;
  --radius:20px; font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--bg); font-synthesis:none;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; font-size:16px; line-height:1.65; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.45; }
img { max-width:100%; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.25; letter-spacing:-.035em; }
h2,h3 { font-weight:600; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid #b3a0ef; outline-offset:5px; }
.icon { flex-shrink:0; display:inline-block; vertical-align:middle; }
.container { width:100%; max-width:1280px; padding-inline:40px; margin-inline:auto; }
.eyebrow { color:var(--primary); font-size:12px; font-weight:600; letter-spacing:.13em; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:12px 25px; background:var(--primary); color:white; border:1px solid var(--primary); border-radius:10px; font-weight:600; font-size:15px; transition:background .18s,transform .18s; }
.button:hover:enabled,a.button:hover { background:var(--primary-dark); transform:translateY(-1px); }
.text-button { border:0; background:none; color:var(--primary); font-size:14px; padding:8px; }
.header { position:relative; z-index:20; border-bottom:1px solid var(--line); background:var(--bg); }
.header-inner { height:80px; display:flex; align-items:center; gap:32px; }
.brand { display:inline-flex; gap:10px; align-items:center; font-size:27px; font-weight:750; letter-spacing:-1.4px; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; background:var(--ink); border-radius:11px; color:#ffa66e; }
.brand-mark .icon { width:26px; height:26px; stroke-width:1.7; }
.brand-dot { color:var(--primary); }
.header nav { margin-inline:auto; display:flex; gap:32px; align-items:center; font-size:14px; font-weight:500; color:#625b73; }
.header nav a:hover,.footer a:hover { color:var(--primary); }
.language-switch { margin-left:auto; position:relative; flex-shrink:0; }
.language-switch summary { display:flex; gap:8px; align-items:center; list-style:none; border:1px solid var(--line); border-radius:10px; padding:8px 13px; font-size:14px; font-weight:500; cursor:pointer; background:white; min-height:42px; }
.language-switch summary::-webkit-details-marker { display:none; }
.language-switch summary>.icon:first-child { width:17px; height:17px; color:var(--muted); }
.language-switch summary>.icon:last-child { width:12px; height:12px; transform:rotate(90deg); color:var(--muted); transition:transform .15s; }
.language-switch[open] summary { border-color:#b8a6e7; background:#f8f5ff; }
.language-switch[open] summary>.icon:last-child { transform:rotate(-90deg); }
.language-menu { position:absolute; right:0; top:calc(100% + 9px); width:184px; padding:6px; background:white; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 40px #32234e18; z-index:30; }
.language-menu a { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; min-height:44px; font-size:14px; border-radius:7px; }
.language-menu a:hover { background:#f7f4fc; }
.language-menu a[aria-current] { color:var(--primary); background:var(--soft); }
.language-menu .icon { width:16px; height:16px; }
.home-top { --break:0; --merge:0; background:radial-gradient(ellipse at 50% 0,#fff4e4,transparent 60%); padding-bottom:60px; border-bottom:1px solid var(--line); overflow:clip; }
.hero { text-align:center; padding-top:55px; padding-bottom:33px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid #ecdccf; border-radius:100px; background:#fffdf8; font-size:11px; }
.hero-eyebrow .icon { width:14px; height:14px; }
.hero h1 { font-size:clamp(44px,5vw,66px); font-weight:700; letter-spacing:-3.3px; line-height:1.08; margin:19px 0 22px; }
.headline-line { display:block; }
.headline-accent { color:var(--primary); font-family:Georgia,"Times New Roman",serif; font-style:italic; font-weight:400; letter-spacing:-2.9px; }
.headline-piece { display:inline-block; transform:translate(calc(var(--break) * var(--dx)),calc(var(--break) * var(--dy))) rotate(calc(var(--break) * var(--turn))); opacity:calc(1 - var(--break) * .7); will-change:transform; }
.hero-description { font-size:17px; color:var(--muted); max-width:530px; margin-inline:auto; line-height:1.65; }
.hero-badges { margin-top:23px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:24px; color:#645b76; font-size:13px; }
.hero-badges span { display:flex; align-items:center; gap:6px; }
.hero-badges .icon { width:15px; height:15px; color:var(--primary); }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; }
.section-heading h2 { font-size:22px; }
.section-heading>span { color:var(--muted); font-size:14px; }
.tools-section { max-width:970px; }
.tools-section .section-heading { margin-bottom:24px; }
.tools-section .section-heading h2 { font-size:18px; }
.tools-section .section-heading>span { font-size:13px; }
.tool-grid { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; position:relative; isolation:isolate; }
.tool-grid::before { content:''; position:absolute; z-index:-1; inset:calc(var(--merge) * -12px) 0; background:#efebe5; border:1px solid #e3dfd8; border-radius:28px; opacity:var(--merge); transform:scaleX(calc(.85 + var(--merge) * .15)); }
.tile-slot { width:calc((100% - 80px) / 5); aspect-ratio:1; min-width:0; transform:translateX(calc(var(--slot) * -12px * var(--merge))) rotate(calc(var(--slot) * -2deg * var(--merge))) scale(calc(1 - var(--merge) * .1)); }
.tile-slot:focus-within,.tile-slot:hover { z-index:3; }
.purple { --accent:#6942b5; --wash:#eee5ff; --surface:#fcfaff; }
.blue { --accent:#276fac; --wash:#e0efff; --surface:#f9fcff; }
.orange { --accent:#a26017; --wash:#ffeccd; --surface:#fffdf9; }
.green { --accent:#247956; --wash:#dbf3e5; --surface:#f8fdfb; }
.pink { --accent:#ae496c; --wash:#ffe3ec; --surface:#fffbfd; }
.tool-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; aspect-ratio:1; min-width:0; width:100%; height:100%; border:1px solid transparent; border-radius:20px; padding:15px 10px; color:var(--ink); background:var(--wash); transition:transform .38s cubic-bezier(.22,1.4,.35,1),box-shadow .3s,border-color .3s; text-align:center; }
.tool-card h3 { font-size:15px; line-height:1.3; letter-spacing:-.35px; margin:0; font-weight:650; }
.tile-meta { font-size:10px; letter-spacing:.035em; color:var(--accent); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(hover:hover) and (pointer:fine) { .tool-card:hover { transform:rotate(-7deg) scale(1.13); border-color:var(--accent); box-shadow:0 14px 25px #30251d17; } .tile-slot:nth-child(even) .tool-card:hover { transform:rotate(7deg) scale(1.13); } }
.tool-card:focus-visible { transform:scale(1.06); }
.tile-glyph { height:65px; width:76px; position:relative; display:block; color:var(--accent); flex-shrink:0; }
.file-source { position:absolute; left:9px; top:0; width:37px; height:47px; border:2px solid #b8a0e3; background:#f8f4ff; border-radius:7px; font-size:23px; font-weight:650; line-height:43px; transform:rotate(-10deg); }
.file-target { position:absolute; bottom:0; right:6px; width:45px; height:43px; border:2px solid var(--accent); border-radius:8px; color:var(--accent); font-size:12px; font-weight:700; line-height:39px; transform:rotate(7deg); }
.checker { background:repeating-conic-gradient(#fff 0% 25%,#e3d7fa 0% 50%) 50%/10px 10px; }
.pixel-grid { position:absolute; display:grid; grid-template-columns:repeat(2,15px); gap:4px; left:7px; top:8px; transform:rotate(-7deg); }
.pixel-grid i { width:15px; height:15px; background:#84b7e4; border-radius:4px; }
.pixel-grid i:nth-child(2) { background:#b0d3f2; }.pixel-grid i:nth-child(3) { background:#4c92cb; }
.webp-stamp { position:absolute; right:4px; bottom:0; display:flex; align-items:center; justify-content:center; flex-direction:column; width:43px; height:48px; background:var(--accent); color:white; border-radius:11px; box-shadow:0 3px 0 #b0d0e7; font-weight:700; font-size:25px; line-height:1.05; transform:rotate(8deg); }
.webp-stamp>span { font-size:7px; letter-spacing:.08em; margin-top:2px; }
.photo-frame { position:absolute; top:2px; left:9px; width:53px; height:46px; border:2px solid var(--accent); background:#fff8e9; border-radius:7px; display:grid; place-items:center; transform:rotate(-8deg); }
.photo-frame .icon { width:29px; height:29px; }
.photo-frame>span { position:absolute; bottom:-14px; left:5px; padding:0 4px; font-size:9px; font-weight:600; background:#ffeccd; }
.webp-label { position:absolute; right:0; bottom:1px; color:#fff9ef; background:var(--accent); border-radius:5px; padding:3px 6px; font-size:10px; font-weight:650; transform:rotate(6deg); }
.compression-bars { position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:7px; }
.compression-bars i { display:block; width:50px; height:8px; border-radius:3px; background:#7fbea3; }
.compression-bars i:nth-child(2) { width:35px; background:#4a9676; }.compression-bars i:nth-child(3) { width:22px; background:var(--accent); }
.compression-icon { position:absolute; bottom:0; right:1px; display:grid; place-items:center; width:31px; height:31px; border:3px solid var(--wash); border-radius:9px; background:var(--accent); color:white; }
.compression-icon .icon { width:18px; height:18px; }
.resize-bounds { position:absolute; inset:2px 6px 8px; border:1.5px dashed #d28aa3; border-radius:10px; transform:rotate(7deg); }
.resize-inner { position:absolute; left:9px; top:7px; display:grid; place-items:center; width:39px; height:34px; background:#fff4f7; border:1.5px solid var(--accent); border-radius:6px; }
.resize-inner .icon { width:24px; height:24px; }.dimension-label { position:absolute; bottom:-8px; left:11px; padding:0 4px; background:var(--wash); font-size:10px; font-weight:650; }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:24px; }
.tool-icon { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:15px; color:var(--accent); background:var(--wash); flex-shrink:0; }
.tool-icon .icon { width:26px; height:26px; }
.popular { font-size:12px; font-weight:500; color:var(--accent); background:var(--wash); padding:3px 7px; border-radius:5px; }
.card-number { color:#a29bac; font-size:12px; }
.card-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:25px; }
.card-caption { font-size:10px; letter-spacing:.025em; color:#898092; white-space:nowrap; }
.card-action { color:var(--accent); font-size:12px; font-weight:600; background:var(--wash); padding:5px 9px; border-radius:6px; white-space:nowrap; }
.tool-card:hover .card-action { color:white; background:var(--accent); }
.privacy-section { padding-top:42px; }
.privacy-strip { display:flex; align-items:center; gap:24px; background:#292338; color:white; border-radius:var(--radius); padding:31px 36px; }
.privacy-symbol { display:grid; place-items:center; width:62px; height:62px; border:1px solid #5a506f; background:#3c334d; color:#c9b6ff; border-radius:18px; flex-shrink:0; }
.privacy-symbol .icon { width:27px; height:27px; }
.privacy-strip .eyebrow { color:#b7a2e8; font-size:10px; letter-spacing:.12em; margin-bottom:7px; }
.privacy-strip h2 { font-size:25px; margin-bottom:7px; letter-spacing:-.7px; }
.privacy-strip p:not(.eyebrow) { color:#b6acc8; font-size:14px; max-width:670px; }
.privacy-tag { display:flex; align-items:center; gap:7px; color:#d1c5e6; border:1px solid #524763; border-radius:100px; font-size:12px; padding:8px 13px; margin-left:auto; white-space:nowrap; }
.privacy-tag .icon { width:15px; height:15px; }
.how-section { padding-top:76px; padding-bottom:68px; }
.how-section .eyebrow { margin-bottom:12px; }
.how-section h2 { font-size:33px; letter-spacing:-1.3px; }
.how-section .section-heading p:not(.eyebrow) { margin-top:10px; color:var(--muted); font-size:15px; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:27px; }
.step { position:relative; border:1px solid var(--line); background:white; border-radius:16px; padding:26px 27px; }
.step-number { position:absolute; right:25px; top:23px; color:#aaa1b7; font-size:13px; }
.step-symbol { display:grid; place-items:center; width:38px; height:38px; background:#f5f1fc; border-radius:10px; color:#967cbe; margin-bottom:21px; }
.step-symbol .icon { width:19px; height:19px; }
.step h3 { font-size:19px; margin-bottom:7px; }
.step p { font-size:14px; color:var(--muted); }
.faq-section { display:grid; grid-template-columns:1fr 1.55fr; gap:80px; padding-top:12px; padding-bottom:75px; }
.faq-section .eyebrow { margin-bottom:13px; }
.faq-section h2 { font-size:30px; max-width:290px; }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { list-style:none; display:flex; justify-content:space-between; gap:20px; cursor:pointer; font-size:15px; font-weight:500; padding:18px 0; }
.faq-list details:first-child summary { padding-top:0; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary>span { display:grid; place-items:center; width:24px; height:24px; color:var(--primary); font-size:20px; line-height:1; flex-shrink:0; transition:transform .15s; }
.faq-list details[open] summary>span { transform:rotate(45deg); }
.faq-list details p { color:var(--muted); font-size:14px; padding:0 22px 20px 0; line-height:1.8; }
.footer { border-top:1px solid var(--line); background:white; }
.footer-main { display:flex; justify-content:space-between; align-items:center; gap:35px; padding:36px 0 30px; }
.footer .brand { font-size:24px; }
.footer .brand-mark { width:32px; height:32px; border-radius:10px; }
.footer p { color:var(--muted); font-size:14px; margin-top:10px; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:14px 22px; max-width:670px; color:#655b76; font-size:13px; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding:21px 0; border-top:1px solid var(--line); color:#8a8197; font-size:12px; }
.footer-bottom>span:last-child { display:flex; gap:6px; align-items:center; }
.footer-bottom .icon { width:13px; height:13px; }
.tool-page { background:radial-gradient(ellipse at 0 0,#eee9ff60,transparent 45%); }
.breadcrumb { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; padding-top:24px; }
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb>span:nth-child(2) { color:#b6afc2; }
.tool-nav { display:flex; gap:6px; padding:7px; border:1px solid var(--line); border-radius:13px; background:#f7f4fc; margin:22px 0 0; overflow-x:auto; scrollbar-width:thin; }
.tool-nav a { display:flex; align-items:center; justify-content:center; flex:1; gap:7px; white-space:nowrap; padding:11px 12px; color:#786e87; font-size:14px; font-weight:500; border-radius:8px; }
.tool-nav a:hover { color:var(--primary); }
.tool-nav a.active { background:white; color:var(--primary); box-shadow:0 2px 6px #30244509; }
.tool-nav .icon { width:17px; height:17px; }
.tool-heading { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:34px 0 28px; }
.tool-heading .eyebrow { letter-spacing:.06em; font-size:12px; }
.tool-heading h1 { display:flex; gap:13px; align-items:center; font-size:38px; letter-spacing:-1.5px; margin:12px 0 14px; }
.tool-heading .tool-icon { width:45px; height:45px; border-radius:12px; }
.tool-heading>div>p:last-child { color:var(--muted); font-size:15px; max-width:690px; }
.tool-private { display:flex; align-items:center; gap:7px; background:#f0ecf8; color:#7a638f; border:1px solid #e8e0f2; padding:8px 12px; border-radius:100px; font-size:12px; white-space:nowrap; }
.tool-private .icon { width:15px; height:15px; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 310px; background:white; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:0 5px 30px #3f296b05; }
.upload-panel { min-width:0; padding:25px; }
.dropzone { min-height:340px; padding:28px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1.5px dashed #d5c8f1; background:linear-gradient(145deg,#faf8ff,#fdfcff); border-radius:14px; transition:background .18s,border-color .18s; text-align:center; }
.dropzone.dragover { border-color:var(--primary); background:#eee6ff; }
.upload-icon { display:grid; place-items:center; width:61px; height:61px; background:#ece5fd; color:var(--primary); border-radius:19px; margin-bottom:20px; }
.upload-icon .icon { width:27px; height:27px; }
.dropzone h2 { font-size:24px; margin-bottom:8px; letter-spacing:-.6px; }
.dropzone p { color:var(--muted); font-size:15px; margin-bottom:22px; }
.accepted { color:#81748e; font-size:12px; letter-spacing:.08em; margin-top:20px; }
.dropzone small { color:#8c8298; font-size:12px; margin-top:5px; }
.settings { padding:28px 25px; border-left:1px solid var(--line); display:flex; flex-direction:column; }
.settings h2 { display:flex; align-items:center; font-size:17px; margin-bottom:27px; letter-spacing:-.3px; }
.settings h2::before { content:''; display:inline-block; width:4px; height:17px; border-radius:2px; background:#c1a9ec; margin-right:9px; }
.quality-label { display:flex; justify-content:space-between; align-items:center; font-size:14px; margin-bottom:12px; }
.quality-label output { background:var(--soft); color:var(--primary); padding:3px 9px; border-radius:6px; font-size:13px; font-weight:600; }
input[type=range] { width:100%; accent-color:var(--primary); cursor:pointer; margin:8px 0 13px; }
.setting-note { color:var(--muted); font-size:13px; line-height:1.7; margin-bottom:23px; }
.process-button { width:100%; margin-top:auto; }
.small-note { color:var(--muted); font-size:12px; line-height:1.7; margin-top:13px; }
.local-note { display:flex; align-items:flex-start; gap:7px; border-top:1px solid var(--line); color:#8c819b; font-size:12px; margin-top:19px; padding-top:16px; }
.local-note .icon { width:14px; height:14px; margin-top:3px; }
.fixed-format { padding:18px 15px; border:1px solid var(--line); background:#faf8ff; border-radius:12px; display:flex; align-items:center; gap:12px; margin-bottom:30px; color:var(--primary); }
.fixed-format span { display:block; color:var(--muted); font-size:12px; }
.fixed-format strong { font-size:18px; }
.fixed-format>.icon:last-child { margin-left:auto; width:18px; }
.field-label { font-size:14px; margin-bottom:8px; }
select { width:100%; padding:10px 12px; border:1px solid #dbd3e8; background:white; border-radius:8px; color:var(--ink); font-size:14px; margin-bottom:25px; }
.dimensions { display:flex; gap:13px; }
.dimensions label { min-width:0; flex:1; font-size:14px; }
.number-wrap { display:flex; align-items:center; background:white; border:1px solid #dbd3e8; border-radius:8px; padding:10px; margin-top:8px; }
.number-wrap input { width:100%; min-width:0; border:0; color:var(--ink); background:none; font-size:14px; }
.number-wrap>span { font-size:12px; color:var(--muted); }
.checkbox-label { display:flex; align-items:center; gap:8px; font-size:14px; margin:20px 0 13px; }
input[type=checkbox] { accent-color:var(--primary); width:17px; height:17px; }
.queue-heading { display:flex; align-items:center; justify-content:space-between; margin-top:22px; font-size:14px; }
.queue-heading strong span { color:var(--muted); font-weight:400; }
.file-list { list-style:none; padding:0; margin:0; }
.file-row { display:flex; align-items:center; min-width:0; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.file-thumb { width:44px; height:44px; object-fit:contain; border:1px solid var(--line); border-radius:7px; background:repeating-conic-gradient(#eeeaf4 0% 25%,white 0% 50%) 50%/12px 12px; }
.file-meta { flex:1; min-width:0; }
.file-name { display:block; overflow-wrap:anywhere; font-size:14px; font-weight:500; }
.file-info { color:var(--muted); font-size:12px; }
.remove-button { padding:10px; border:0; border-radius:8px; background:none; color:var(--muted); }
.remove-button:hover { background:#fcecec; color:#ab4c4c; }
.remove-button .icon { width:17px; height:17px; }
.message { background:#fff2ec; color:#984a35; padding:13px; margin-top:15px; border-radius:8px; font-size:14px; overflow-wrap:anywhere; }
.results { padding-top:35px; }
.results .section-heading p { color:var(--muted); font-size:14px; margin-top:8px; }
.result-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.result-card { min-width:0; padding:17px; border:1px solid var(--line); border-radius:14px; background:white; }
.result-preview { display:block; height:165px; width:100%; object-fit:contain; border-radius:9px; background:repeating-conic-gradient(#eeeaf4 0% 25%,white 0% 50%) 50%/16px 16px; margin-bottom:14px; }
.result-name { font-size:15px; overflow-wrap:anywhere; font-weight:500; }
.result-detail { color:var(--muted); font-size:12px; margin-top:7px; }
.size-change { display:inline-block; color:#348065; background:#eaf6ef; font-size:12px; padding:3px 7px; border-radius:5px; margin:11px 0 14px; }
.size-change.increased { color:#9b6f2b; background:#fff3db; }
.result-card .button { width:100%; font-size:14px; min-height:44px; padding:9px; background:var(--soft); color:var(--primary); border-color:#e7def9; }
.result-card .button:hover { background:#e7ddfc; }
.result-card .button .icon { width:17px; height:17px; }
.tool-explanation { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:65px 0; }
.tool-explanation .eyebrow { margin-bottom:12px; }
.tool-explanation h2 { font-size:25px; margin-bottom:28px; }
.tool-steps { padding:0; margin:0; list-style:none; display:grid; gap:18px; color:#6f657e; font-size:14px; }
.tool-steps li { display:flex; align-items:center; gap:13px; }
.tool-steps span { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; background:var(--soft); color:var(--primary); flex-shrink:0; font-size:12px; }
.tool-privacy { display:flex; gap:13px; padding:22px; margin-top:27px; background:#f1edf8; border:1px solid #e7e0f0; border-radius:12px; }
.tool-privacy>.icon { color:var(--primary); width:19px; margin-top:2px; }
.tool-privacy h3 { font-size:15px; margin-bottom:7px; }
.tool-privacy p { color:var(--muted); font-size:13px; }
.tool-privacy p+p { margin-top:8px; }
.related { border-top:1px solid var(--line); padding:32px 0 50px; }
.related h2 { font-size:24px; margin-bottom:23px; }
.related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.related-grid a { display:flex; align-items:center; gap:11px; padding:16px; border:1px solid var(--line); background:white; border-radius:12px; font-size:14px; font-weight:500; }
.related-grid a:hover { border-color:#bca9e1; background:#fdfbff; }
.related-grid .tool-icon { width:35px; height:35px; border-radius:10px; }
.related-grid .tool-icon .icon { width:19px; height:19px; }
.not-found { padding-top:110px; padding-bottom:110px; }
.not-found h1 { font-size:44px; margin:17px 0; }
.not-found p:not(.eyebrow) { color:var(--muted); margin-bottom:27px; }
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2,html[lang="zh-CN"] h3 { letter-spacing:-.015em; }
html[lang="zh-CN"] .hero h1 { line-height:1.24; font-size:clamp(40px,5vw,64px); }
html[lang="zh-CN"] .eyebrow { letter-spacing:.15em; }
@media(max-width:1100px) {
  .container { padding-inline:30px; }
  .tool-grid { gap:16px; }
  .tile-slot { width:calc((100% - 64px) / 5); }
  .card-bottom { margin-top:20px; }
  .card-caption { font-size:12px; }
  .card-action { font-size:13px; }
  .privacy-strip { padding:27px; }
  .privacy-tag { display:none; }
  .workspace { grid-template-columns:minmax(0,1fr) 285px; }
  .tool-private { display:none; }
  .tool-nav a { padding:10px; font-size:13px; }
  .tool-nav .icon { display:none; }
}
@media(max-width:760px) {
  .header-inner { height:72px; gap:20px; }
  .brand { font-size:25px; }
  .header nav { gap:19px; }
  .header nav a:nth-child(n+2) { display:none; }
  .hero { padding-top:41px; padding-bottom:35px; }
  .hero h1 { font-size:50px; letter-spacing:-2.5px; }
  .hero-description { font-size:16px; max-width:480px; }
  .hero-badges { gap:16px; font-size:12px; }
  .tool-grid { gap:12px; }
  .tile-slot { width:calc((100% - 48px) / 5); }
  .tool-card { border-radius:15px; padding:12px 6px; gap:7px; }
  .tool-card h3 { font-size:12px; }
  .tile-glyph { transform:scale(.8); height:56px; margin-bottom:-5px; }
  .tile-meta { font-size:9px; }
  .card-top { margin-bottom:20px; }
  .tool-card>p { max-width:390px; }
  .section-heading>span { display:none; }
  .section-heading h2 { font-size:21px; }
  .home-top { padding-bottom:30px; }
  .privacy-section { padding-top:30px; }
  .privacy-strip { gap:18px; }
  .privacy-symbol { width:50px; height:50px; border-radius:14px; }
  .privacy-strip h2 { font-size:22px; }
  .how-section { padding-top:52px; padding-bottom:45px; }
  .how-section h2 { font-size:29px; }
  .steps { gap:14px; }
  .step { padding:21px 19px; }
  .step-number { right:19px; }
  .step h3 { font-size:18px; }
  .step p { font-size:13px; }
  .faq-section { grid-template-columns:1fr; gap:27px; padding-bottom:50px; }
  .faq-section h2 { max-width:none; font-size:29px; }
  .footer-main { align-items:flex-start; flex-direction:column; gap:25px; }
  .footer-links { justify-content:flex-start; }
  .footer-bottom { flex-direction:column; gap:9px; }
  .tool-heading { padding-top:26px; padding-bottom:25px; }
  .tool-heading h1 { font-size:33px; letter-spacing:-1px; }
  .tool-heading>div>p:last-child { font-size:14px; }
  .tool-nav a { flex:none; padding:8px 11px; }
  .workspace { grid-template-columns:1fr; }
  .settings { border-left:0; border-top:1px solid var(--line); }
  .settings h2 { margin-bottom:24px; }
  .process-button { margin-top:10px; }
  .fixed-format { margin-bottom:12px; }
  .result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tool-explanation { grid-template-columns:1fr; gap:35px; padding:45px 0; }
  .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .tools-section { max-width:450px; }
  .tool-grid { gap:12px; }
  .tile-slot { width:calc((100% - 24px) / 3); transform:translateX(calc(var(--mobile-slot) * -5px * var(--merge))) rotate(calc(var(--mobile-slot) * -3deg * var(--merge))) scale(calc(1 - var(--merge) * .06)); }
  .tool-card { padding:12px 8px; gap:7px; border-radius:17px; }
  .tile-glyph { transform:scale(.83); height:58px; }
  .tool-card h3 { font-size:13px; }
  .tile-meta { display:none; }
}
@media(max-width:440px) {
  .container { padding-inline:20px; }
  .header-inner { gap:12px; height:68px; }
  .header nav { display:none; }
  .brand { font-size:24px; gap:8px; }
  .brand-mark { width:32px; height:32px; border-radius:10px; }
  .language-switch summary { padding:7px 10px; font-size:13px; gap:7px; }
  .language-switch summary>.icon:first-child { width:16px; height:16px; }
  .hero { padding-top:34px; padding-bottom:32px; }
  .hero h1 { font-size:43px; letter-spacing:-2px; margin:18px 0 20px; }
  .hero-description { font-size:15px; }
  .hero-eyebrow { font-size:10px; letter-spacing:.08em; }
  .hero-badges { gap:9px 13px; font-size:11px; margin-top:19px; }
  .hero-badges .icon { width:13px; height:13px; }
  .section-heading { margin-bottom:17px; }
  .section-heading h2 { font-size:19px; }
  .tool-icon { width:41px; height:41px; border-radius:13px; }
  .tool-icon .icon { width:23px; height:23px; }
  .popular { font-size:12px; padding:2px 6px; }
  .card-top { margin-bottom:18px; }
  .card-bottom { gap:9px; margin-top:19px; }
  .card-caption { font-size:10px; }
  .card-action { font-size:12px; padding:5px 8px; }
  .privacy-strip { display:block; padding:25px; border-radius:17px; }
  .privacy-symbol { margin-bottom:18px; width:45px; height:45px; }
  .privacy-symbol .icon { width:21px; height:21px; }
  .privacy-strip h2 { font-size:23px; margin-top:9px; }
  .privacy-strip p:not(.eyebrow) { font-size:13px; }
  .steps { grid-template-columns:1fr; gap:13px; }
  .step { padding:23px 23px 23px 80px; }
  .step-symbol { position:absolute; top:25px; left:23px; }
  .step h3 { padding-right:25px; }
  .step p { font-size:14px; }
  .step-number { top:21px; }
  .how-section h2 { font-size:27px; }
  .faq-section h2 { font-size:26px; }
  .faq-list summary { font-size:14px; }
  .tool-heading h1 { font-size:29px; gap:10px; }
  .tool-heading .tool-icon { width:38px; height:38px; border-radius:11px; }
  .tool-heading .eyebrow { font-size:11px; }
  .tool-nav { margin-top:17px; }
  .upload-panel { padding:17px; }
  .dropzone { min-height:326px; padding:25px 13px; }
  .dropzone h2 { font-size:22px; }
  .dropzone p { font-size:14px; }
  .dropzone small { font-size:11px; }
  .settings { padding:25px; }
  .result-grid,.related-grid { grid-template-columns:1fr; }
  .related-grid a { min-height:67px; }
  .tool-explanation h2 { font-size:23px; }
  html[lang="zh-CN"] .hero h1 { font-size:40px; }
  html[lang="zh-CN"] .hero-badges { font-size:11px; }
  html[lang="zh-CN"] .tool-heading h1 { font-size:27px; }
  .not-found h1 { font-size:33px; }
}
@media(max-width:360px) {
  .hero h1 { font-size:36px; }
  html[lang="zh-CN"] .hero h1 { font-size:36px; }
  .hero-badges { gap:7px 9px; }
  .tool-card h3 { font-size:12px; }
  .tool-card { gap:3px; padding:9px 4px; border-radius:14px; }
  .tile-glyph { transform:scale(.67); height:49px; margin-top:-4px; }
  .card-top { align-items:flex-start; }
  .popular { padding:2px 4px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
  .headline-piece,.tile-slot,.tool-card,.tool-card:hover { transform:none!important; opacity:1!important; }
  .tool-grid::before { opacity:0!important; }
}

@media(min-width:601px) and (max-width:900px) {
  .tools-section { max-width:560px; }
  .tool-grid { gap:16px; }
  .tile-slot { width:calc((100% - 32px) / 3); transform:translateX(calc(var(--mobile-slot) * -8px * var(--merge))) rotate(calc(var(--mobile-slot) * -3deg * var(--merge))) scale(calc(1 - var(--merge) * .06)); }
  .tool-card h3 { font-size:14px; }
}
@media(max-width:440px) {
  .tool-card { padding:8px 5px; gap:5px; }
  .tile-glyph { height:46px; transform:scale(.72); margin-bottom:0; }
  .tool-card h3 { font-size:12px; line-height:1.2; }
}
@media(max-width:360px) {
  .tool-card { padding:6px 3px; gap:3px; }
  .tile-glyph { height:38px; transform:scale(.60); }
  .tool-card h3 { font-size:11px; }
}