:root{font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:#182437;background:#f4f6fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}.top{height:70px;padding:0 max(22px,calc((100vw - 1180px)/2));background:#fff;border-bottom:1px solid #e5e9f0;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:850;letter-spacing:-.5px}.brand-icon{background:#405af5;color:#fff;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;font-size:25px}.brand small{font-size:9px;letter-spacing:1.4px;color:#96a0b0;margin-left:4px}.secure{font-size:12px;color:#167969;background:#e6f8f2;padding:8px 12px;border-radius:40px}.layout{max-width:1180px;margin:auto;padding:34px 22px}.intro{margin-bottom:29px}.eyebrow{color:#445cf2;font-size:11px;font-weight:800;letter-spacing:1.8px;margin-bottom:14px}h1{font-size:clamp(30px,4vw,48px);line-height:1.3;letter-spacing:-1.8px;margin:0 0 12px}h1 em{font-style:normal;color:#405af5}.intro p{margin:0;color:#677286;font-size:14px;line-height:1.9}.workspace{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.panel{background:#fff;border:1px solid #e8ecf2;border-radius:16px;padding:23px;box-shadow:0 5px 24px #17244106;min-width:0}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:10px}.section-title h2{margin:0;color:#445cf2;font-size:14px}.section-title h2 span{color:#202d42;font-size:17px;margin-left:8px}.quiet{border:0;background:transparent;color:#7b8798;font-size:12px}.quiet:hover{color:#405af5}.drop{border:2px dashed #cfd7f4;background:#f7f9ff;min-height:203px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;text-align:center;transition:.15s}.drop:hover,.drop.drag{border-color:#405af5;background:#eff2ff}.drop:focus-visible{outline:3px solid #889aff}.drop-symbol{font-size:32px;color:#405af5}.drop strong{font-size:15px}.drop span{font-size:12px;color:#778499}.drop small{font-size:10px;color:#9aa4b4}.list-heading{display:flex;justify-content:space-between;align-items:center;margin-top:23px}.list-heading h3{font-size:13px;margin:0}.list-heading h3 span{font-size:11px;border-radius:30px;color:#5368dd;background:#eef0ff;padding:3px 7px;margin-left:5px}.list-heading>span{color:#8c96a5;font-size:12px}.file-list{list-style:none;margin:12px 0 0;padding:0;max-height:310px;overflow:auto}.file-list li{display:flex;align-items:center;gap:11px;padding:9px 7px;border-radius:8px;border-bottom:1px solid #f1f3f7;cursor:pointer}.file-list li:hover,.file-list li.active{background:#f1f4ff}.file-list .empty{justify-content:center;color:#9aa4b2;font-size:12px;min-height:70px;cursor:default}.thumb{width:49px;height:49px;object-fit:cover;background:#f2f3f7;border-radius:7px}.file-name{min-width:0;flex:1}.file-name strong{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-name span{display:block;font-size:11px;color:#8490a2;margin-top:5px}.state{font-size:11px;color:#64748b;white-space:nowrap}.state.done{color:#148267}.state.error{color:#d14040}.setting{margin:0 0 24px}.setting>label:first-child{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:10px}.setting>label strong{color:#405af5}select,.inline input[type=number]{width:100%;border:1px solid #dfe5ee;border-radius:9px;padding:11px;background:#fff;outline-color:#405af5}.setting input[type=range]{accent-color:#405af5;width:100%}.endpoints{display:flex;justify-content:space-between;color:#9aa4b2;font-size:11px}.inline{display:flex;gap:14px;align-items:center}.inline input{max-width:175px}.check{font-size:12px;font-weight:500!important;display:flex!important;align-items:center;gap:6px;cursor:pointer}.check input{accent-color:#405af5}.checks{display:grid;gap:12px}.hint{font-size:11px;color:#99a3b2;margin:8px 0 0}.primary,.secondary{border:0;border-radius:10px;padding:13px 16px;font-weight:750;font-size:13px}.primary{background:#425af5;color:#fff;flex:1}.primary:not(:disabled):hover{background:#2943ea}.secondary{background:#ebefff;color:#4055d6;width:100%}.secondary:not(:disabled):hover{background:#e0e7ff}.actions{display:flex;align-items:center;gap:10px}.progress-wrap{margin:16px 0}.progress-label{display:flex;justify-content:space-between;font-size:11px;color:#778397;margin-bottom:7px}progress{height:8px;width:100%;accent-color:#405af5}.notice{min-height:20px;font-size:12px;color:#577087;line-height:1.6}.preview-panel{margin-top:20px}.preview-empty{height:250px;display:grid;place-items:center;background:#f7f9fc;border-radius:12px;color:#98a3b4;font-size:13px}.compare{height:390px;position:relative;overflow:hidden;border-radius:12px;background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 50%/24px 24px;touch-action:pan-y}.compare>img,.after-clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.after-clip{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}.after-clip img{max-width:none}.handle{position:absolute;left:50%;top:0;bottom:0;border-left:2px solid white;filter:drop-shadow(0 0 2px #333);pointer-events:none}.handle span{position:absolute;top:50%;left:-23px;background:#fff;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;font-weight:bold;color:#405af5}.compare>input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.compare-meta{display:flex;gap:20px;align-items:center;margin-top:16px;flex-wrap:wrap}.compare-meta>div{display:flex;flex-direction:column;gap:4px}.compare-meta span{font-size:10px;letter-spacing:1px;color:#94a0b2}.compare-meta strong{font-size:13px}.compact{width:auto;margin-left:auto}footer{text-align:center;color:#9aa4b3;font-size:11px;line-height:2;margin:25px 0 0}.fine{font-size:11px;color:#929db0}@media(max-width:780px){.workspace{grid-template-columns:1fr}.top{height:61px}.brand small{display:none}.secure{font-size:10px}.layout{padding:25px 14px}.panel{padding:16px}.compare{height:260px}h1{letter-spacing:-1px}}

/* v2: responsive high-resolution comparison and live feedback */
.compare{overflow:hidden;touch-action:pan-y;--zoom:1;}
.compare img{transform:scale(var(--zoom));transform-origin:center center;}
.zoom-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 2px;color:#6b7280;font-size:13px}
.zoom-bar input{width:125px;accent-color:#2563eb}.zoom-bar strong{color:#111827;min-width:45px}
#preview-status{margin-left:auto;color:#3b82f6}
.file-list{max-height:420px;overflow-y:auto;contain:content}

.page-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 23px}.page-nav a{padding:9px 15px;border-radius:10px;background:#fff;border:1px solid #e0e6f0;text-decoration:none;color:#435268;font-size:13px;font-weight:700}.page-nav a[aria-current="page"],.page-nav a:hover{background:#425af5;color:white}.doc-panel{max-width:920px;margin:auto;background:#fff;border:1px solid #e8ecf2;border-radius:16px;padding:clamp(20px,4vw,42px);box-shadow:0 5px 24px #17244106}.doc-panel h2{margin:34px 0 12px;font-size:21px}.doc-panel h3{margin:24px 0 10px;font-size:16px}.doc-panel p,.doc-panel li{line-height:1.9;color:#3d4b5f}.doc-panel li{margin-bottom:6px}.doc-panel table{border-collapse:collapse;width:100%;font-size:13px}.doc-panel td,.doc-panel th{border-bottom:1px solid #e4e8f0;padding:11px;text-align:left;vertical-align:top}.doc-panel th{width:35%;background:#f8faff}.doc-panel code{background:#f0f4ff;padding:2px 5px;border-radius:4px;overflow-wrap:anywhere}.doc-panel .note{border-left:4px solid #425af5;background:#f4f6ff;padding:14px 16px;border-radius:5px}.doc-panel a{color:#4055d6}@media(max-width:650px){.doc-panel th{width:40%}}

/* v10: consistent action buttons and visible conversion progress */
.actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:12px}
.actions .primary,.actions .secondary{width:100%;min-width:0;min-height:68px;flex:none;display:flex;align-items:center;justify-content:center;padding:14px 15px;font-size:14px;line-height:1.55;text-align:center;white-space:normal;overflow-wrap:anywhere}
.actions #cancel:not([hidden]){grid-column:1/-1;justify-self:stretch;background:#fff1f2;border:1px solid #fecdd3;color:#9f1239;border-radius:10px;min-height:42px;font-size:13px;font-weight:750}
.progress-wrap:not([hidden]){display:block;margin:20px 0 14px;padding:20px 18px 17px;background:#f2f5ff;border:1px solid #cbd5ff;border-radius:16px}
.progress-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.progress-heading strong{font-size:16px;color:#26376b}
#progress-percent{font-size:34px;font-weight:850;letter-spacing:-1px;color:#3555e8;line-height:1;font-variant-numeric:tabular-nums}
.progress-wrap .progress-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:13px;color:#405475}
#progress-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
#progress-count{font-size:15px;color:#26376b;white-space:nowrap;font-variant-numeric:tabular-nums}
.progress-wrap progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:22px;border:none;border-radius:999px;overflow:hidden;background:#dce4ff}
.progress-wrap progress::-webkit-progress-bar{background:#dce4ff;border-radius:999px}
.progress-wrap progress::-webkit-progress-value{background:linear-gradient(90deg,#405af5,#19a6bc);border-radius:999px;transition:width .2s}
.progress-wrap progress::-moz-progress-bar{background:linear-gradient(90deg,#405af5,#19a6bc);border-radius:999px}
.progress-help{font-size:11px;color:#6d7c9a;margin:10px 0 0}
@media(max-width:480px){.actions{grid-template-columns:1fr}.actions .primary,.actions .secondary{min-height:56px}.progress-wrap:not([hidden]){padding:16px 13px}#progress-percent{font-size:29px}.progress-wrap .progress-label{font-size:12px}}