:root { color-scheme: light; --ink:#16231d; --muted:#59645f; --paper:#f5f2e9; --card:#fffdf7; --green:#174f3a; --line:#d7d9cf; --acid:#c8f169; --orange:#e67d43; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--green); font-weight:750; }
header,footer { display:flex; justify-content:space-between; gap:20px; align-items:center; width:min(980px,calc(100% - 40px)); margin:0 auto; padding:24px 0; }
header { border-bottom:1px solid var(--line); }
footer { margin-top:70px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
.brand { display:flex; gap:10px; align-items:center; color:var(--ink); text-decoration:none; }
.brand span { display:grid; place-items:center; width:42px; height:34px; color:white; background:var(--green); border-radius:8px; font-size:12px; }
main { width:min(900px,calc(100% - 40px)); margin:0 auto; padding:82px 0 40px; }
.eyebrow { color:var(--green); font-size:13px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
h1 { max-width:880px; margin:.2em 0; font-size:clamp(42px,7vw,72px); line-height:1.02; letter-spacing:-.045em; }
h2 { margin-top:50px; font-size:clamp(26px,4vw,38px); line-height:1.15; }
.lede { max-width:770px; color:var(--muted); font-size:20px; }
aside { max-width:800px; margin:34px 0; padding:22px 24px; border-left:5px solid var(--orange); border-radius:0 12px 12px 0; background:var(--card); }
.audit-box { margin:42px 0; padding:30px; border:1px solid var(--line); border-radius:20px; background:var(--card); box-shadow:0 16px 50px rgba(20,43,32,.08); }
.audit-box h2 { margin-top:0; }
.audit-picker { display:grid; gap:12px; padding:26px; text-align:center; border:2px dashed #9ca49d; border-radius:14px; background:#faf9f4; }
.audit-picker input { width:100%; max-width:540px; margin:0 auto; padding:12px; border:1px solid var(--line); border-radius:9px; background:white; }
.audit-picker span { color:var(--muted); font-size:14px; }
.audit-results { margin-top:30px; }
.audit-score { display:flex; flex-wrap:wrap; gap:18px; align-items:baseline; padding:24px; color:white; background:var(--green); border-radius:14px; }
.audit-score strong { color:var(--acid); font-size:48px; line-height:1; }
.audit-score span { color:rgba(255,255,255,.82); }
.audit-findings { display:grid; gap:10px; margin:18px 0 0; padding:0; list-style:none; }
.audit-findings li { margin:0; padding:17px 18px; border:1px solid var(--line); border-radius:11px; background:white; }
.audit-findings strong { display:block; margin-bottom:3px; }
.audit-findings .pass strong { color:var(--green); }
.audit-findings .warn strong { color:#9b3f23; }
.limit { padding:14px 16px; border-left:4px solid var(--orange); background:#fff5eb; }
.details { max-width:800px; }
code { padding:2px 5px; border-radius:4px; background:#e6eee8; }
@media (max-width:640px) { main { padding-top:52px; } .audit-box { padding:20px; } header,footer { align-items:flex-start; flex-direction:column; } }