:root { --ink:#17211d; --muted:#657169; --paper:#f8f7f2; --line:#d8ddd4; --mint:#b7f397; --mint-dark:#1b3529; --warm:#f1eee5; --danger:#9d3b2b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; }
button,a { font:inherit; }
button { cursor:pointer; }
.page-shell { width:min(100% - 32px, 920px); margin:auto; padding:22px 0 72px; }
.site-header { display:flex; justify-content:space-between; align-items:center; padding:0 0 38px; font-size:.82rem; letter-spacing:.06em; }
.wordmark { color:var(--ink); font-weight:850; text-decoration:none; letter-spacing:.11em; }
.header-note { color:var(--muted); }
.tool { background:#fff; border:1px solid var(--line); border-radius:24px; padding:clamp(24px,5vw,54px); box-shadow:0 16px 40px rgba(22,35,28,.055); }
.eyebrow { margin:0 0 10px; color:#4d6255; font-size:.72rem; font-weight:800; letter-spacing:.12em; }
h1,h2 { letter-spacing:-.045em; line-height:1.04; }
h1 { margin:0; font-size:clamp(2.3rem,7vw,4.7rem); max-width:700px; }
h2 { margin:0 0 12px; font-size:clamp(1.45rem,3vw,2.2rem); }
.lede { margin:18px 0 30px; color:var(--muted); font-size:1.06rem; }
.drop-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:258px; padding:24px; border:1.5px dashed #aab7ac; border-radius:17px; text-align:center; background:#fcfdf9; transition:.18s ease; }
.drop-zone:hover,.drop-zone:focus-visible,.drop-zone.is-dragging { outline:none; border-color:var(--mint-dark); background:#f1faec; }
.drop-icon { display:grid; width:44px; height:44px; place-items:center; margin-bottom:13px; border-radius:50%; color:var(--mint-dark); background:var(--mint); font-size:1.9rem; line-height:1; }
.drop-zone strong { font-size:1.1rem; }.drop-zone span:not(.drop-icon),.drop-zone small { color:var(--muted); }.drop-zone small { margin-top:13px; font-size:.78rem; }
.secondary-button,.primary-button,.download-button { border:0; border-radius:999px; text-decoration:none; font-weight:750; transition:transform .15s ease,background .15s ease; }
.secondary-button { margin-top:14px; padding:10px 17px; color:var(--ink); background:#e8ece5; }.secondary-button:hover { background:#dce5d7; }
.selected-file { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-top:12px; padding:11px 2px; font-size:.9rem; }.file-name { overflow-wrap:anywhere; font-weight:650; }
.text-button { border:0; color:var(--danger); background:transparent; text-decoration:underline; }
.actions { margin-top:20px; }.primary-button,.download-button { display:inline-flex; justify-content:center; align-items:center; min-height:49px; padding:13px 22px; color:#102116; background:var(--mint); }.primary-button:hover:not(:disabled),.download-button:hover { background:#9fe277; transform:translateY(-1px); }.primary-button:disabled { cursor:not-allowed; opacity:.46; }
.status { margin-top:18px; padding:13px 15px; border-left:3px solid var(--mint-dark); background:#f2f5ef; color:#405348; font-size:.92rem; }.status.error { border-color:var(--danger); color:#7a2c21; background:#fff3f0; }
.result { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:24px; padding:22px; border-radius:16px; background:var(--mint-dark); color:#fff; }.result .eyebrow { color:#b9d8be; }.result h2 { font-size:1.6rem; }.result p { margin:0; color:#d8e6da; }.download-button { flex:0 0 auto; color:#112315; background:#d2ffbc; }
.privacy-note { display:flex; gap:15px; align-items:flex-start; margin:22px 0 60px; padding:18px 20px; border-radius:13px; background:var(--warm); }.privacy-note span { color:#355d43; font-size:1.4rem; }.privacy-note p { margin:0; color:#46524a; }.privacy-note strong { color:var(--ink); }
.content-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-bottom:62px; }.content-grid article { padding-right:16px; }.content-grid p:not(.eyebrow),.faq details p { color:var(--muted); }.content-grid h2 { font-size:1.55rem; }
.faq { padding-top:28px; border-top:1px solid var(--line); }.faq > h2 { margin-bottom:25px; }.faq details { border-top:1px solid var(--line); padding:17px 0; }.faq details:last-child { border-bottom:1px solid var(--line); }.faq summary { cursor:pointer; font-weight:720; }.faq details p { margin:11px 32px 0 0; }
code { padding:.1em .28em; background:#eceee9; border-radius:4px; }
.site-nav { display:flex; gap:16px; flex-wrap:wrap; }
.site-nav a { color:var(--muted); text-decoration:none; font-size:.82rem; letter-spacing:.06em; font-weight:650; }
.site-nav a:hover { color:var(--ink); }
.site-footer { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; margin-top:56px; padding-top:22px; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted); }
.site-footer nav { display:flex; gap:16px; flex-wrap:wrap; }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover { color:var(--ink); text-decoration:underline; }
.footer-brand { margin:0; color:var(--ink); font-weight:850; letter-spacing:.11em; font-size:.8rem; }
.prose { background:#fff; border:1px solid var(--line); border-radius:24px; padding:clamp(24px,5vw,54px); box-shadow:0 16px 40px rgba(22,35,28,.055); }
.prose h1 { margin:0 0 8px; font-size:clamp(2rem,5vw,3.2rem); }
.prose h2 { margin:34px 0 10px; font-size:1.35rem; }
.prose p,.prose li { color:var(--muted); }
.prose ul { padding-left:20px; }
.prose a { color:var(--mint-dark); }
.back-link { display:inline-block; margin-top:28px; color:var(--mint-dark); font-weight:750; text-decoration:none; }
@media (max-width:650px) { .page-shell { width:min(100% - 24px,920px); padding-top:17px; }.site-header { flex-wrap:wrap; gap:10px; padding-bottom:25px; }.site-nav { gap:13px; font-size:.78rem; }.tool { border-radius:18px; padding:25px 18px; }.drop-zone { min-height:236px; }.result { align-items:stretch; flex-direction:column; }.download-button { width:100%; }.content-grid { grid-template-columns:1fr; gap:10px; margin-bottom:42px; }.content-grid article { padding:9px 0; }.privacy-note { margin-bottom:43px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }