.lead {
  max-width: 750px;
}
.hero-line{display:block}
html[lang="en"] .intro h1{font-family:"DM Sans","Noto Sans JP",sans-serif;letter-spacing:-.05em}
html[lang="en"] .hero-line{white-space:nowrap}

.main-nav { display: flex; gap: 24px; margin-left: auto; margin-right: 28px; }
.language-picker{display:flex;align-items:center;gap:6px;margin-right:14px;color:var(--muted);font-size:11px}.language-picker select{border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);padding:7px 25px 7px 9px;font:inherit;font-size:11px;cursor:pointer}
.topbar:not(:has(.main-nav)) .language-picker{margin-left:auto}
.main-nav a, footer a { color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; }
.editor-actions{display:flex!important;gap:12px!important}.clear-button{color:#9a5d55!important}.file-list{position:relative}.drop-indicator{position:absolute;z-index:8;pointer-events:none;border-radius:999px;background:var(--lime);box-shadow:0 0 0 3px rgba(215,240,88,.22);animation:dropPulse .65s ease-in-out infinite alternate}.drop-indicator span{position:absolute;background:var(--ink);color:#fff;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:700;white-space:nowrap}.drop-indicator.vertical span{left:50%;top:50%;transform:translate(-50%,-50%)}.drop-indicator.horizontal span{left:50%;top:50%;transform:translate(-50%,-50%)}@keyframes dropPulse{to{background:var(--green);box-shadow:0 0 0 5px rgba(29,114,83,.16)}}
.file-card{contain:layout style}.thumb{position:relative}.thumb:not(.thumb-ready):after{content:"";position:absolute;inset:35%;border:2px solid #cbd4cc;border-top-color:var(--green);border-radius:50%;animation:thumbLoad 1s linear infinite}.thumb img{transition:opacity .18s}.thumb img:not([data-thumb-ready]){opacity:0}.thumb img[data-thumb-ready]{opacity:1}@keyframes thumbLoad{to{transform:rotate(360deg)}}
.main-nav a:hover, footer a:hover { color: var(--green); }
@media (min-width: 781px) {
  .topbar { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; column-gap:14px; justify-content:initial; }
  .topbar .brand { grid-column:1; }
  .topbar .main-nav { grid-column:2; justify-self:end; margin:0; }
  .topbar .language-picker { grid-column:3; margin:0; }
  .topbar .privacy-pill { grid-column:4; }
}
@media (min-width:781px) and (max-width:900px) {
  .topbar .main-nav { display:none; }
}
.ad-slot { border: 1px dashed #cbd2cc; background: rgba(255,255,255,.48); color: #929a96; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ad-slot { display: none !important; }
.ad-slot-wide { min-height: 112px; margin-top: 30px; }
.ad-slot span { font-size: 8px; letter-spacing: .16em; }
.ad-slot p { font-size: 10px; margin: 7px 0 0; }
footer { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand nav" "disclosure disclosure"; row-gap: 20px; }
footer > div { grid-area: brand; }
footer > div p { margin: 4px 0 0; }
footer nav { grid-area: nav; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 15px; white-space: nowrap; }
.associate-disclosure { grid-area: disclosure; padding-top: 14px; border-top: 1px solid var(--line); color: #8a928e; font-size: 9px; line-height: 1.6; }
.amazon-section { margin-top: 30px; padding: 30px; background: linear-gradient(145deg,#fff 0%,#fff 66%,#fff8ec 100%); border: 1px solid #e8ddd0; border-radius: 20px; box-shadow: var(--shadow); }
.amazon-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.affiliate-label { display:inline-flex;align-items:center;gap:6px;margin:0 0 8px;padding:5px 8px;border-radius:999px;background:#fff1db;color:#8c5611;font-size:8px;font-weight:700;letter-spacing:.1em; }
.amazon-head h2 { margin: 0 0 7px; font-size: 19px; letter-spacing: -.03em; }
.amazon-head div > p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.amazon-head button { border: 1px solid var(--line); background: #f8faf7; color: var(--green); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.amazon-head button:hover { background: var(--soft); }
.amazon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.amazon-card { min-width:0;display:flex;flex-direction:column;border:1px solid #e5ddd3;border-radius:16px;padding:0;overflow:hidden;text-decoration:none;color:var(--ink);background:#fff;transition:.18s; }
.amazon-card:hover { border-color:#e5a744;transform:translateY(-3px);box-shadow:0 14px 30px rgba(91,61,24,.13); }
.amazon-visual{position:relative;display:grid;place-items:center;aspect-ratio:1.55;background:#f6f3ed;border-bottom:1px solid #ece8e1;overflow:hidden}
.amazon-ad-badge{position:absolute;left:10px;top:10px;padding:3px 6px;border:1px solid #cec8c0;border-radius:5px;background:rgba(255,255,255,.92);color:#74716d;font-size:7px;font-weight:700;letter-spacing:.1em}
.amazon-visual>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .28s ease}.amazon-card:hover .amazon-visual>img{transform:scale(1.035)}
.amazon-image-note{position:absolute;right:8px;bottom:7px;padding:3px 6px;border-radius:5px;background:rgba(255,255,255,.82);color:#77746f;font-size:7px;backdrop-filter:blur(4px)}
.amazon-mark { width:82px;height:82px;display:grid;place-items:center;border-radius:20px;background:#fff;color:var(--green);box-shadow:0 10px 28px rgba(30,69,52,.12);transform:rotate(-2deg); }
.amazon-mark svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.amazon-card-copy{display:flex;flex:1;flex-direction:column;padding:16px}
.amazon-card strong { display:block;font-size:14px;margin-bottom:5px; }
.amazon-card-copy>span { display:block;color:var(--muted);font-size:10px;line-height:1.55;margin-bottom:14px; }
.amazon-cta{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:auto;padding:10px 12px;border-radius:9px;background:#ff9900;color:#17202b;font-size:10px;font-weight:800;box-shadow:inset 0 -1px 0 rgba(0,0,0,.13)}
.amazon-card:hover .amazon-cta{background:#ffad2f}.amazon-cta i{font-style:normal;font-size:14px;transition:transform .18s}.amazon-card:hover .amazon-cta i{transform:translateX(3px)}
.amazon-card-copy small{display:block;margin-top:7px;color:#8b8f8c;font-size:8px;text-align:center}
.amazon-note { margin: 15px 0 0; color: #929a96; font-size: 9px; }
.guide-feature{margin-top:30px;padding:34px;background:var(--ink);color:#fff;border-radius:20px}.guide-feature-head{max-width:700px}.guide-feature-head h2{margin:5px 0 10px;font-size:25px}.guide-feature-head>p:last-child{color:#bcc8c1;font-size:12px;line-height:1.8}.guide-links{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}.guide-links a{display:grid;grid-template-columns:28px 1fr;gap:5px 12px;padding:20px;border:1px solid rgba(255,255,255,.14);border-radius:14px;color:#fff;text-decoration:none;background:rgba(255,255,255,.04)}.guide-links a:hover{border-color:var(--lime);transform:translateY(-2px)}.guide-links span{grid-row:1/3;color:var(--lime);font-size:10px;font-weight:700}.guide-links strong{font-size:13px}.guide-links small{color:#aebbb4;font-size:10px;line-height:1.6}.guide-callout{background:var(--ink);color:#fff;border-radius:18px;padding:28px;margin:28px 0}.guide-callout h2{color:var(--lime)}.guide-callout p{color:#d0d8d3!important}.guide-checklist{display:grid;gap:12px;padding:0!important;list-style:none}.guide-checklist li{position:relative;padding-left:28px}.guide-checklist li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}

.conversion-overview{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:48px;margin-top:30px;padding:42px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.conversion-overview-copy h2{margin:8px 0 18px;font-size:clamp(25px,3vw,39px);line-height:1.25;letter-spacing:-.045em}.conversion-overview-copy>p:not(.eyebrow){margin:0;color:var(--muted);font-size:12px;line-height:1.9}.conversion-links{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:22px}.conversion-links a{color:var(--green);font-size:11px;font-weight:700;text-underline-offset:4px}.conversion-points{display:grid;align-content:start}.conversion-points article{display:grid;grid-template-columns:34px 1fr;gap:4px 13px;padding:18px 0;border-bottom:1px solid var(--line)}.conversion-points article:first-child{padding-top:2px}.conversion-points article:last-child{border-bottom:0;padding-bottom:0}.conversion-points span{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--lime);font-size:9px;font-weight:700}.conversion-points h3{margin:3px 0 2px;font-size:13px}.conversion-points p{margin:0;color:var(--muted);font-size:10px;line-height:1.65}

.result-actions{grid-column:1/-1;display:grid;gap:8px}.result .result-actions a{grid-column:auto}.result-actions button{border:1px solid #b8d0c0;border-radius:9px;background:#fff;color:var(--green);padding:9px 10px;font:inherit;font-size:11px;font-weight:700;cursor:pointer}.result-actions button:hover{border-color:var(--green);background:#f8fcf8}.result-actions button span,.result-actions button small{display:block}.result-actions button small{margin-top:2px;color:var(--muted);font-size:8px;font-weight:500}
.result-actions .google-drive-button{border-color:#d8dce5;color:#26344a}.result-actions .google-drive-button>span{display:flex;align-items:center;justify-content:center;gap:7px}.result-actions .google-drive-button b{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,#4285f4 0 46%,#34a853 46% 68%,#fbbc05 68% 84%,#ea4335 84%);color:#fff;font-size:10px}.result-actions button:disabled{opacity:.58;cursor:wait}
.tool-share{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 10px;margin-top:2px;padding-top:12px;border-top:1px solid rgba(29,114,83,.14)}.result .tool-share>span{margin:0;color:var(--ink);font-size:10px;font-weight:700}.tool-share button{grid-column:2;grid-row:1/3;border:1px solid #9eb9a8;border-radius:999px;background:transparent;color:var(--green);padding:8px 11px;font:inherit;font-size:9px;font-weight:700;cursor:pointer;white-space:nowrap}.tool-share button:hover{background:#fff;border-color:var(--green)}.tool-share small{color:var(--muted);font-size:8px;line-height:1.4}
.result .support-card{grid-column:1/-1;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:3px 10px;align-items:center;margin-top:2px;padding:9px;border:1px solid rgba(29,114,83,.16);border-radius:11px;background:rgba(255,255,255,.72);color:var(--ink);text-align:left;text-decoration:none;transition:.18s}.result .support-card:hover{border-color:rgba(29,114,83,.42);background:#fff;transform:translateY(-1px)}.support-card img{width:52px;height:52px;object-fit:contain}.support-card-copy{min-width:0}.result .support-card-copy strong{font-size:10px}.result .support-card-copy small{margin-top:3px;color:var(--muted);font-size:8px;line-height:1.45}.result .support-card>b{color:var(--green);font-size:12px}.footer-support{display:inline-block;margin-top:7px;color:var(--green);font-size:9px;font-weight:700;text-decoration:none}.footer-support:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width: 780px) {
  .main-nav { display: none; }
  .language-picker{margin-left:auto;margin-right:10px}.language-picker span{display:none}
  .lead br { display: none; }
  footer { grid-template-columns: 1fr; grid-template-areas: "brand" "nav" "disclosure"; gap: 16px; }
  footer nav { justify-content: flex-start; gap: 13px; max-width: none; }
  .amazon-section { padding: 22px; }
  .amazon-head { align-items: flex-start; }
  .amazon-grid { grid-template-columns: 1fr; }
  .guide-feature{padding:24px}.guide-links{grid-template-columns:1fr}
  .conversion-overview{grid-template-columns:1fr;gap:28px;padding:26px}.conversion-overview-copy h2 br{display:none}
}

@media (max-width: 520px) {
  html[lang="en"] .intro h1{font-size:8vw}
  .amazon-head { display: block; }
  .amazon-head button { margin-top: 15px; }
}

.pdf-file-card { cursor: default; }
.pdf-file-icon {
  aspect-ratio: 1.2;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #eef4ee, #dfeadf);
  color: var(--green);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .08em;
}

#quality { cursor: pointer; touch-action: pan-y; -webkit-user-drag: none; }
#quality:active { cursor: grabbing; }

.pdf-thumb { display:grid; place-items:center; background:linear-gradient(145deg,#eef4ee,#dfeadf); }
.pdf-thumb img { grid-area:1/1; }
.pdf-thumb-label { grid-area:1/1; color:var(--green); font-size:22px; font-weight:800; letter-spacing:.08em; }
.pdf-thumb.preview-ready .pdf-thumb-label { display:none; }

.dropzone { position:relative; }
.drop-mascot { position:absolute; right:34px; bottom:calc(100% - 1px); width:112px; height:90px; overflow:hidden; pointer-events:none; }
.drop-mascot svg { display:block; width:100%; height:100%; transform:translateY(74%); transform-origin:center bottom; transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.dropzone:hover .drop-mascot svg,.dropzone.dragover .drop-mascot svg { transform:translateY(12%); }
.mascot-head { fill:#fffdf5; stroke:var(--ink); stroke-width:3; stroke-linejoin:round; }
.mascot-fold { fill:none; stroke:var(--green); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.mascot-eye { fill:var(--ink); }
.mascot-nose { fill:var(--lime); stroke:var(--ink); stroke-width:2; }
.mascot-smile,.mascot-fingers { fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; }
.mascot-hand { fill:#fffdf5; stroke:var(--ink); stroke-width:3; stroke-linejoin:round; }

@media (max-width:620px) {
  .drop-mascot { right:13px; width:82px; height:68px; }
}

.action-mascot { position:absolute; right:34px; bottom:calc(100% - 1px); width:112px; height:90px; overflow:hidden; pointer-events:none; }
.action-mascot svg { display:block; width:100%; height:100%; transform:translateY(74%); transform-origin:center bottom; transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.settings:hover .action-mascot svg { transform:translateY(12%); }

@media (max-width:780px) {
  .action-mascot { right:13px; width:82px; height:68px; }
}
.brand-mark{overflow:hidden;background:transparent!important}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
