:root{--bg:#f7f6f2;--fg:#16181a;--mut:#4a4f54;--card:#fff;--line:#e3e1da;--link:#0f5c63;--on-link:#fff;--tag:#d9ecee;--tag-fg:#0a3f44;--beta:#f6e3c4;--beta-fg:#6b4300}
@media(prefers-color-scheme:dark){:root{--bg:#121415;--fg:#eceae4;--mut:#a3a8ac;--card:#1b1e20;--line:#2c3033;--link:#6cc4cc;--on-link:#0b2427;--tag:#173a3e;--tag-fg:#a9e0e5;--beta:#3d2d10;--beta-fg:#f1cf8e}}
*{box-sizing:border-box}
body{margin:0 auto;max-width:60rem;padding:2rem 1.5rem 3rem;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
header p,small{color:var(--mut)}
a{color:var(--link)}
.brand{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;margin-bottom:3.5rem}
.logo{font:700 1.15rem ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:-.02em;color:var(--fg);text-decoration:none}
.logo b{color:var(--link)}
.hero{max-width:40rem;margin-bottom:3.5rem}
.hero h1{margin:0 0 1rem;font-size:clamp(2rem,6vw,3.5rem);line-height:1.05;letter-spacing:-.03em}
.hero p{margin:0;font-size:1.2rem;color:var(--mut)}
.label{margin:0 0 1rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:600}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))}
.card{display:flex;gap:1rem;background:var(--card);border:1px solid var(--line);padding:1.25rem;border-radius:1rem;color:var(--fg);text-decoration:none;transition:transform .15s,border-color .15s}
.card:hover,.card:focus-visible{border-color:var(--link);transform:translateY(-2px)}
.card img{width:56px;height:56px;border-radius:.75rem;flex:none}
.card h2{margin:0 0 .25rem;font-size:1.2rem}
.card p{margin:0 0 .4rem;color:var(--mut);font-size:.95rem;line-height:1.45}
.tag{font-size:.75rem;font-weight:600;background:var(--tag);color:var(--tag-fg);padding:.1rem .5rem;border-radius:99px;vertical-align:middle;margin-left:.25rem}
.tag.beta{background:var(--beta);color:var(--beta-fg)}
nav{margin-bottom:1.5rem}
nav a{display:inline-block;padding:.5rem 0}
.project{display:flex;gap:1rem;align-items:center}
.project img{border-radius:.9rem}
.project h1,.project p{margin:0}
.links{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.25rem 0}
.btn{display:inline-block;background:var(--link);color:var(--on-link);padding:.7rem 1.1rem;border-radius:.6rem;text-decoration:none;font-weight:600}
.btn:hover{opacity:.9}
.btn.alt{background:var(--card);color:var(--fg);border:1px solid var(--line)}
.prose{max-width:44rem}
.shot{max-width:100%;height:auto;border-radius:.75rem}
footer{margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--line)}
code{word-break:break-all}
.shots{display:flex;gap:1rem}
.shots img{flex:1;min-width:0;height:auto;border-radius:.75rem}
a:focus-visible{outline:2px solid var(--link);outline-offset:2px}