:root { color-scheme: light; --ink:#18201d; --paper:#f7f5ef; --card:#fff; --accent:#5c4bd8; --line:#dedbd1; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 system-ui,sans-serif; color:var(--ink); background:var(--paper); }
.site-header { min-height:72px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(247,245,239,.95); }
.brand { font-weight:800; font-size:1.2rem; color:var(--ink); text-decoration:none; }
nav { display:flex; gap:1rem; } nav a { color:var(--ink); }
main { width:min(1080px,90vw); margin:0 auto; padding:4rem 0; }
.hero { max-width:850px; margin:2rem 0 5rem; } .hero h1 { font-size:clamp(2.6rem,7vw,5.8rem); line-height:.97; letter-spacing:-.055em; margin:.3em 0; }
.hero p:not(.eyebrow) { max-width:650px; font-size:1.25rem; color:#4f5954; }
.eyebrow { text-transform:uppercase; letter-spacing:.15em; font-size:.75rem; font-weight:800; color:var(--accent); }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.5rem; margin-bottom:1.5rem; box-shadow:0 12px 35px rgba(30,30,20,.05); }
.narrow { max-width:560px; } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }
.page-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2rem; }
h1,h2 { line-height:1.1; } label { display:grid; gap:.4rem; margin:1rem 0; font-weight:650; }
input { width:100%; padding:.8rem; font:inherit; border:1px solid #aaa69b; border-radius:9px; }
button,.button { display:inline-block; border:0; border-radius:999px; background:var(--accent); color:white; padding:.75rem 1.15rem; font:inherit; font-weight:750; text-decoration:none; cursor:pointer; }
button.secondary { background:#e5e1d6; color:var(--ink); } .metric { font-size:2rem; font-weight:800; }
table { width:100%; border-collapse:collapse; } th,td { text-align:left; padding:.7rem; border-bottom:1px solid var(--line); } code { overflow-wrap:anywhere; }
.inline-form { display:inline-flex; gap:.45rem; align-items:center; margin:.2rem; }
.inline-form input[type=number] { max-width:10rem; } .inline-form select { min-width:7rem; }
@media (max-width:600px) { main { padding:2rem 0; } .page-heading { align-items:start; flex-direction:column; } table { display:block; overflow:auto; } }