* { box-sizing: border-box; }
:root { --bg:#f6f7f9; --card:#fff; --border:#e2e5e9; --text:#17191c; --dim:#626b75; --accent:#2554ff; --accent-dim:#edf1ff; }
@media (prefers-color-scheme: dark) { :root { --bg:#111315; --card:#191c20; --border:#2b3036; --text:#f0f2f4; --dim:#a6adb6; --accent:#6f8cff; --accent-dim:#232d51; } }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
.base-shell { max-width:960px; margin:0 auto; padding:56px 32px 80px; }
header { margin-bottom:42px; }
.brand { font-size:21px; font-weight:750; letter-spacing:.02em; }
header p { margin:7px 0 0; color:var(--dim); }
.projects { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
.project { min-height:300px; display:flex; flex-direction:column; justify-content:space-between; padding:24px; background:var(--card); border:1px solid var(--border); border-radius:18px; transition:transform .18s ease-out,border-color .18s ease-out; }
.project:hover { transform:translateY(-2px); }
.project:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.project.primary { border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); }
.project-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mark { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--border); color:var(--dim); font-size:12px; font-weight:750; }
.primary .mark { background:var(--accent-dim); color:var(--accent); }
.state { padding:5px 10px; border-radius:99px; background:var(--border); color:var(--dim); font-size:11px; font-weight:650; }
.state.active { background:var(--accent-dim); color:var(--accent); }
h1 { margin:0 0 9px; font-size:25px; letter-spacing:-.035em; }
.project p { max-width:34ch; margin:0; color:var(--dim); font-size:14px; line-height:1.5; }
.project strong { color:var(--accent); font-size:14px; }
@media (prefers-reduced-motion:reduce) { .project { transition:none; } }
@media (max-width:680px) { .base-shell { padding:32px 18px 48px; } .projects { grid-template-columns:1fr; } .project { min-height:230px; } }