:root{font-family:"DM Sans",system-ui,-apple-system,sans-serif;color:#142925;background:#f7f8f4;--ink:#142925;--muted:#50615b;--line:#dce4db;--accent:#185842;--wash:#e9f3e9;--paper:#fff;line-height:1.6}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
a{color:var(--accent);text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.65}
:focus-visible{outline:3px solid #326eb1;outline-offset:3px}
header{border-bottom:1px solid var(--line);background:var(--paper)}
.bar,.footer-inner{width:min(100% - 36px,1060px);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;color:var(--ink)}
.mark{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:var(--accent);color:white;font-size:17px}
nav{display:flex;gap:20px;flex-wrap:wrap;font-size:.91rem}
main{width:min(100% - 36px,960px);margin:auto}
.hero{max-width:730px;margin:56px auto 27px;text-align:center}
h1,h2,h3{line-height:1.15;letter-spacing:-.035em}
h1{font-size:clamp(2.25rem,6vw,4rem);margin:0 0 15px}
h2{font-size:clamp(1.45rem,3vw,2rem);margin:0 0 16px}
h3{font-size:1.07rem;letter-spacing:-.015em;margin:0 0 6px}
.hero p{font-size:1.09rem;color:var(--muted);margin:0 auto;max-width:630px}
.tool{background:var(--paper);border:1px solid var(--line);border-radius:19px;padding:clamp(14px,4vw,29px);box-shadow:0 12px 34px #2146330d}
fieldset{min-width:0;border:0;padding:0;margin:0}
.drop{display:grid;justify-items:center;gap:7px;text-align:center;background:var(--wash);border:2px dashed #abc7b7;border-radius:13px;padding:23px 10px;cursor:pointer;position:relative}
.drop.dragging,.drop:hover{border-color:var(--accent)}
.drop:focus-within{outline:3px solid #326eb1;outline-offset:3px}
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop strong{font-size:1.15rem}
.drop small,.hint,li small,#status,footer{color:var(--muted)}
.plus{display:grid;place-items:center;background:var(--paper);width:37px;height:37px;border-radius:10px;color:var(--accent);font-size:1.5rem;font-weight:700;line-height:1}
.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:13px;margin:19px 0}
.settings label{display:grid;gap:4px;font-size:.89rem;font-weight:700}
.settings input,.settings select{width:100%;min-height:42px;color:var(--ink);border:1px solid #adbbb3;border-radius:8px;padding:6px 9px;background:white}
.settings input[type=color]{padding:4px}
.primary,.subtle{border-radius:8px;padding:8px 14px;border:1px solid #aec4b8;color:var(--accent);background:#fff;font-weight:750}
.primary{background:var(--accent);color:white;border-color:var(--accent);padding:10px 17px}
.primary:hover{filter:brightness(.9)}
.subtle:hover{background:var(--wash)}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px}
.actions #status{margin:0;font-size:.88rem;overflow-wrap:anywhere}
.queue{list-style:none;padding:0;margin:0}
.queue li{display:flex;justify-content:space-between;gap:9px;align-items:center;border-bottom:1px solid var(--line);padding:8px 0;overflow-wrap:anywhere}
.queue li small{display:block}
.queue li.failed small{color:#982e25}
#results:not(:empty){margin-top:8px}
.content{max-width:740px;margin:45px auto}
.content section{margin:36px 0}
.content p{margin:0 0 13px}
.content li+li{margin-top:6px}
details{border-top:1px solid var(--line);padding:12px 0}
summary{font-weight:750;cursor:pointer}
details p{padding-top:9px}
footer{border-top:1px solid var(--line);background:var(--paper);font-size:.88rem}
@media(max-width:540px){.hero{margin-top:33px}.bar,.footer-inner{gap:8px}.bar nav{gap:12px}.queue button{padding:6px 8px}}
.advanced{border:1px solid var(--line);border-radius:9px;margin:12px 0;padding:8px 12px}
.advanced summary{font-size:.9rem;color:var(--accent)}
.advanced .settings{margin:10px 0 2px}
.primary,.subtle{min-height:42px}
footer nav{gap:14px}
@media(max-width:480px){.bar nav,.footer-inner nav{font-size:.85rem;gap:12px}.queue li .subtle{min-height:40px}.drop{padding-top:17px;padding-bottom:17px}}
.kb-settings{display:grid;gap:8px;margin:16px 0}
.kb-settings label{font-weight:750;font-size:.9rem}
.kb-settings input{width:min(100%,180px);min-height:42px;border:1px solid #adbbb3;border-radius:8px;padding:6px 9px;color:var(--ink);background:#fff}
.kb-presets{display:flex;flex-wrap:wrap;gap:6px}
.kb-presets button{font-size:.85rem;padding:6px 10px}
.kb-presets button[aria-pressed=true]{background:var(--wash);border-color:var(--accent)}
