:root { color-scheme: light; --ink:#17221d; --muted:#65736c; --paper:#f4f1e9; --card:#fffdf8; --green:#166b4f; --green2:#0d513b; --line:#d9ded7; --danger:#a63b32; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; font-family:"Yu Gothic UI","Hiragino Sans",system-ui,sans-serif; color:var(--ink); background:radial-gradient(circle at 15% 0,#e0efe5 0,transparent 32rem),var(--paper); }
main { width:min(920px,calc(100% - 32px)); margin:0 auto; padding:72px 0 32px; }
header { margin-bottom:30px; }
.topline { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.language { display:flex; align-items:center; grid-auto-flow:column; white-space:nowrap; }
.language select { min-height:38px; }
.eyebrow { margin:0 0 12px; color:var(--green); font-size:.75rem; font-weight:800; letter-spacing:.2em; }
h1 { margin:0; max-width:760px; font-family:Georgia,"Yu Mincho",serif; font-size:clamp(2.25rem,7vw,4.8rem); line-height:1.08; letter-spacing:-.04em; }
.lead { color:var(--muted); font-size:1.05rem; }
.panel { padding:clamp(18px,4vw,38px); background:var(--card); border:1px solid #e4e1d8; border-radius:24px; box-shadow:0 22px 70px rgb(28 43 35 / 9%); }
.drop-zone { min-height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:2px dashed #96ad9f; border-radius:18px; background:#f6faf6; cursor:pointer; text-align:center; transition:.18s; }
.drop-zone:hover,.drop-zone:focus,.drop-zone.drag { border-color:var(--green); background:#edf7f0; outline:none; transform:translateY(-1px); }
.drop-zone input { position:absolute; width:1px; height:1px; opacity:0; }
.drop-zone strong { font-size:1.18rem; }
.drop-zone span,.drop-zone small { color:var(--muted); }
.drop-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--green); color:white!important; font-size:2rem; font-weight:300; }
.settings { display:flex; flex-wrap:wrap; gap:14px; margin:24px 0; align-items:end; }
label { display:grid; gap:7px; color:var(--muted); font-size:.86rem; font-weight:700; }
select,input { min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); font:inherit; }
.custom-size { display:flex; align-items:end; gap:8px; }
.custom-size input { width:120px; }
.ratio-control { display:flex; align-items:center; gap:7px; color:var(--ink); }
.file-list { display:grid; gap:10px; margin-top:18px; }
.file-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px 15px; background:#f7f7f2; border-radius:12px; }
.file-row strong,.file-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-row small { color:var(--muted); margin-top:3px; }
.file-row button { border:0; background:transparent; color:var(--danger); cursor:pointer; font-weight:700; }
.actions { display:flex; gap:10px; margin-top:22px; }
.reward-explanation { margin-top:18px; padding:12px 14px; border-left:4px solid var(--green); border-radius:8px; background:#edf7f0; color:var(--green2); font-weight:700; line-height:1.55; }
.mock-control { margin-top:14px; width:min(100%, 360px); }
.ad-message { margin:14px 0 0; color:var(--green2); font-weight:700; line-height:1.55; }
.ad-message.error { color:var(--danger); }
button { min-height:46px; padding:0 20px; border-radius:11px; border:1px solid transparent; font:inherit; font-weight:800; cursor:pointer; }
button:disabled { opacity:.45; cursor:not-allowed; }
.primary { background:var(--green); color:white; }
.primary:hover:not(:disabled) { background:var(--green2); }
.secondary { border-color:var(--line); background:white; color:var(--ink); }
.overall { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; margin-top:18px; }
progress { width:100%; accent-color:var(--green); }
.downloads { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.results { margin-top:32px; padding:clamp(18px,4vw,30px); background:var(--card); border:1px solid #e4e1d8; border-radius:24px; box-shadow:0 22px 70px rgb(28 43 35 / 6%); }
.results h2 { margin:0; font-size:1.35rem; }
.results > p { margin:8px 0 0; color:var(--muted); line-height:1.6; }
.display-ad { margin-top:26px; min-height:90px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fffdf8; text-align:center; color:var(--muted); }
.display-ad > p { margin:0 0 10px; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.download { display:inline-flex; align-items:center; min-height:42px; padding:0 14px; border-radius:10px; background:#e9f3ed; color:var(--green2); text-decoration:none; font-weight:800; }
.download.zip { background:var(--green); color:white; }
.result-card { overflow:hidden; width:min(100%, 330px); border:1px solid var(--line); border-radius:12px; background:white; }
.result-card img { display:block; width:100%; height:auto; max-height:280px; object-fit:contain; background:#f5f5f2; }
.result-card p { margin:0; padding:10px 12px; color:var(--muted); font-size:.82rem; line-height:1.45; }
.error { color:var(--danger)!important; }
.privacy { margin:26px 4px; color:var(--muted); }
.privacy h2 { color:var(--ink); font-size:1rem; }
.privacy p { line-height:1.8; }
footer { padding:24px; text-align:center; color:var(--muted); font-size:.82rem; }
.footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; padding:0 20px 28px; font-size:.82rem; }
.footer-nav a { color:var(--green2); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media(max-width:600px) { main{padding-top:34px}.panel{border-radius:18px}.topline{align-items:center}.language span{display:none}.settings{display:grid}.custom-size{align-items:center}.actions{display:grid}.actions button,.actions a{width:100%;justify-content:center}.download{font-size:.86rem} }