:root { --ink:#14211e; --paper:#fbfaf5; --line:#d9ded2; --muted:#6a746f; --accent:#d9f34d; --accent-deep:#b8d92d; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.5 Arial, Helvetica, sans-serif; }
button, textarea { font:inherit; }
.top { display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:0 auto; padding:24px; }
.brand { color:var(--ink); font-size:24px; font-weight:800; text-decoration:none; }
.brand i { display:inline-grid; width:17px; height:17px; margin-right:8px; transform:rotate(45deg); background:var(--accent); }
.top span { color:var(--muted); font-size:13px; }
.hero { position:relative; overflow:hidden; min-height:470px; color:#f8f6ed; background:#1a2421 url('/assets/images/documen-hero.png') center/cover no-repeat; }
.hero::before { position:absolute; inset:0; background:rgba(15, 25, 23, .58); content:''; }
.hero-inner { position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:104px 24px 94px; }
.eyebrow { display:inline-flex; margin:0 0 20px; padding:6px 10px; border:1px solid rgba(248,246,237,.38); color:#edf3e5; font-size:12px; font-weight:700; letter-spacing:0; text-transform:uppercase; }
h1 { max-width:780px; margin:0; font-size:clamp(42px,6vw,78px); line-height:.98; letter-spacing:0; }
.hero p:last-child { max-width:590px; margin:28px 0 0; color:rgba(248,246,237,.88); font-size:20px; }
.workspace { max-width:1180px; margin:0 auto; padding:64px 24px 90px; }
.workspace-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.workspace h2 { margin:0; font-size:28px; }
.workspace-head p { max-width:430px; margin:0; color:var(--muted); font-size:14px; }
.analyzer { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.85fr); gap:1px; border:1px solid var(--ink); background:var(--ink); box-shadow:10px 10px 0 var(--accent); }
.editor, .answer { min-height:430px; padding:28px; background:#fff; }
.editor { background:#f4f6ee; }
label { display:block; margin-bottom:12px; font-size:14px; font-weight:700; }
textarea { width:100%; min-height:260px; padding:0; border:0; color:var(--ink); background:transparent; outline:0; resize:vertical; font-size:17px; line-height:1.55; }
.file-picker { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding:13px 14px; border:1px dashed #aeb9aa; color:var(--ink); cursor:pointer; }
.file-picker span { font-size:14px; font-weight:800; }
.file-picker small { color:var(--muted); font-weight:400; }
.file-picker input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.file-picker:focus-within, .file-picker:hover { border-color:var(--ink); background:rgba(217,243,77,.2); }
.actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; }
.actions small { color:var(--muted); font-size:12px; }
.submit { min-height:46px; border:1px solid var(--ink); padding:0 20px; color:var(--ink); background:var(--accent); font-weight:800; cursor:pointer; transition:transform .16s ease, background .16s ease; }
.submit:hover { transform:translate(-2px,-2px); }
.submit:hover { background:var(--accent-deep); }
.submit:disabled { cursor:wait; opacity:.65; }
.answer { display:flex; flex-direction:column; }
.answer-top { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:13px; }
.answer-dot { width:9px; height:9px; background:var(--accent-deep); border-radius:50%; }
.answer h3 { margin:54px 0 10px; font-size:26px; }
.answer > p { margin:0; color:var(--muted); }
.result { display:grid; gap:18px; margin-top:28px; }
.result[hidden] { display:none; }
.result section { padding-top:14px; border-top:1px solid var(--line); }
.result h4 { margin:0 0 7px; font-size:13px; text-transform:uppercase; }
.result p, .result li { margin:0; color:#34413b; }
.result ul { margin:0; padding-left:18px; }
.notice { max-width:760px; margin:20px 0 0; color:var(--muted); font-size:12px; }
footer { border-top:1px solid var(--line); padding:26px 24px; color:var(--muted); font-size:13px; }
footer span { display:block; max-width:1180px; margin:0 auto; }
@media (max-width:760px) { .top { padding:18px 20px; } .top span { display:none; } .hero { min-height:410px; background-position:62% center; } .hero-inner { padding:72px 20px; } .hero p:last-child { font-size:18px; } .workspace { padding:48px 20px 64px; } .workspace-head { align-items:start; flex-direction:column; } .analyzer { grid-template-columns:1fr; box-shadow:6px 6px 0 var(--accent); } .editor, .answer { min-height:0; padding:22px; } .file-picker { align-items:flex-start; flex-direction:column; } .answer h3 { margin-top:38px; } }