:root { color-scheme: light; --bg:#f5f7f8; --surface:#fff; --text:#162433; --muted:#607080; --line:#dfe6e9; --accent:#176b5b; --accent-soft:#e8f3ef; --code:#eef2f4; }
* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin:0; background:var(--bg); color:var(--text); font-size:16px; line-height:1.65; }
a { color:var(--accent); text-decoration-thickness:.08em; text-underline-offset:.18em; }
a:hover { text-decoration-thickness:.14em; }
.site-header { background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); }
.nav, main, .site-footer { width:min(100% - 2rem,760px); margin-inline:auto; }
.nav { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { color:var(--text); font-weight:750; letter-spacing:-.02em; text-decoration:none; }
.nav-links { display:flex; gap:1rem; }
.nav-links a { color:var(--muted); text-decoration:none; }
.nav-links a:hover { color:var(--accent); }
main { padding-block:4rem; min-height:calc(100vh - 145px); }
.hero { padding-block:1.5rem 2.5rem; }
.eyebrow { color:var(--accent); font-size:.82rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.2; letter-spacing:-.025em; }
h1 { margin:.4rem 0 1rem; font-size:clamp(2.2rem,7vw,3.8rem); }
h2 { margin-top:2.5rem; font-size:1.45rem; }
h3 { margin:0 0 .45rem; font-size:1.08rem; }
.lead { max-width:630px; color:var(--muted); font-size:1.12rem; }
.note-list { display:grid; gap:1rem; margin-top:1.25rem; }
.note-card { display:block; padding:1.25rem 1.35rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:inherit; text-decoration:none; }
.note-card:hover { border-color:#adcac3; box-shadow:0 8px 24px rgba(22,36,51,.06); }
.note-card p { margin:0; color:var(--muted); }
.meta { color:var(--muted); font-size:.9rem; }
.tag { display:inline-block; margin-bottom:.7rem; padding:.18rem .55rem; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:.76rem; font-weight:700; }
.article-header { padding-bottom:1.6rem; border-bottom:1px solid var(--line); }
.article-header h1 { font-size:clamp(2rem,6vw,3rem); }
article { max-width:700px; }
article li + li { margin-top:.45rem; }
code { padding:.12rem .32rem; border-radius:4px; background:var(--code); font:.9em ui-monospace,SFMono-Regular,Consolas,monospace; }
pre { overflow-x:auto; padding:1rem; border:1px solid var(--line); border-radius:8px; background:#101820; color:#e8f0f2; }
pre code { padding:0; background:transparent; color:inherit; }
.callout { margin-block:1.5rem; padding:1rem 1.1rem; border-left:4px solid var(--accent); background:var(--accent-soft); }
.site-footer { padding-block:1.3rem; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; }
.footer-row { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
@media (max-width:520px) { main { padding-block:2.5rem; } .nav { min-height:58px; } .hero { padding-top:.5rem; } }