:root { --ink:#172333; --muted:#647286; --line:#dde3ea; --accent:#2474eb; --bg:#f7f9fc; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; } body { min-height:100vh; margin:0; } header { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 max(6vw,30px); background:#fff; border-bottom:1px solid var(--line); } .wordmark { color:var(--ink); font-weight:800; letter-spacing:.06em; text-decoration:none; } .wordmark span { color:var(--accent); } .hero,.workspace { max-width:1040px; margin:0 auto; padding:13vh 6vw; } .hero h1 { margin:12px 0 20px; font-size:clamp(2.5rem,6vw,5rem); line-height:1.02; letter-spacing:-.06em; } .lead { max-width:550px; color:var(--muted); font-size:1.1rem; line-height:1.65; } .eyebrow { color:var(--accent); font-size:.76rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; } .button { display:inline-block; border:0; border-radius:7px; padding:.75rem 1.1rem; background:var(--accent); color:#fff; font:inherit; font-weight:700; text-decoration:none; cursor:pointer; } .secondary { background:#eef4ff; color:#1c60ca; } footer { padding:2rem 6vw; color:var(--muted); font-size:.86rem; } .centered { display:grid; place-items:center; padding:2rem; } .card { width:min(100%,420px); padding:2.5rem; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 18px 60px #17233312; } .card h1 { margin:1.6rem 0 .3rem; } .card>p,.muted { color:var(--muted); } form { margin-top:1.5rem; } label { display:block; margin:1rem 0; font-size:.88rem; font-weight:700; } input { width:100%; margin-top:.45rem; padding:.78rem .85rem; border:1px solid #cbd5e1; border-radius:7px; font:inherit; } form .button { width:100%; margin-top:.6rem; } .error { min-height:1.25rem; color:#bf2437; font-size:.88rem; } .workspace { padding-top:8vh; } .workspace h1 { font-size:2.4rem; letter-spacing:-.04em; } .account { display:flex; align-items:center; gap:1rem; color:var(--muted); font-size:.9rem; } .text-button { border:0; padding:0; background:transparent; color:#1c60ca; font:inherit; cursor:pointer; } .search-bar { display:flex; gap:.7rem; max-width:760px; } .search-bar input { margin:0; } .search-bar .button { width:auto; margin:0; } .results { display:grid; gap:1rem; max-width:760px; margin-top:1.4rem; } .result { padding:1.25rem; border:1px solid var(--line); border-radius:9px; background:#fff; } .result h2 { margin:0 0 .45rem; font-size:1.08rem; } .result p { margin:.4rem 0; line-height:1.5; white-space:pre-wrap; } .meta { color:var(--muted); font-size:.8rem; } @media (max-width:560px) { .search-bar { flex-direction:column; } .search-bar .button { width:100%; } }