:root { --bg:#f7f7f5; --sidebar:#efefec; --text:#1f2328; --muted:#667085; --border:#d7d7d2; --accent:#3b82f6; --active:#deded9; }
body.dark { --bg:#17191d; --sidebar:#202328; --text:#f5f5f5; --muted:#a6adb7; --border:#34383f; --accent:#3b82f6; --active:#2c3036; }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#17191d; color-scheme:light dark; }
html, body { margin:0; min-height:100%; }
body { font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); transition:background .2s ease,color .2s ease; }
a { color:inherit; text-decoration:none; }

.sidebar { position:fixed; inset:0 auto 0 0; z-index:1; width:300px; height:100vh; display:flex; flex-direction:column; padding:28px 18px 22px; background:var(--sidebar); border-right:1px solid var(--border); }
.profile { display:flex; justify-content:center; margin:10px 0 28px; }
.profile-photo { width:135px; height:135px; overflow:hidden; border-radius:50%; background:#d2d2cd; }
.profile-photo img { width:100%; height:100%; display:block; object-fit:cover; }

.sidebar-nav { display:flex; flex-direction:column; gap:5px; }
.sidebar-nav a { padding:13px 16px; border-radius:7px; font-size:1rem; }
.sidebar-nav a:hover, .sidebar-nav a.active { background:var(--active); }
.sidebar-nav a.active { font-weight:600; }

.sidebar-footer { margin-top:auto; display:flex; justify-content:center; align-items:center; gap:14px; padding-top:18px; }
.sidebar-footer a, .theme-toggle { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; }
.sidebar-footer a { color:var(--muted); }
.sidebar-footer a:hover, .theme-toggle:hover { background:var(--active); color:var(--text); }
.sidebar-footer svg { width:22px; height:22px; fill:currentColor; }
.theme-toggle { border:0; background:transparent; color:var(--text); font-size:1.3rem; cursor:pointer; }

.content { margin-left:300px; min-height:100vh; display:flex; justify-content:center; background:var(--bg); }
.content-stacked { flex-direction:column; align-items:center; }

.hero, .page-section { width:100%; max-width:900px; padding:90px 50px; }
.eyebrow { margin-bottom:14px; color:var(--accent); font-size:.8rem; font-weight:700; letter-spacing:.14em; }
.hero h1, .page-section h1 { margin:0; font-size:2.8rem; line-height:1.05; }
.hero h2 { margin:16px 0; color:var(--muted); font-size:1.3rem; font-weight:600; }
.hero p { max-width:610px; margin-top:22px; font-size:1.08rem; line-height:1.75; }
.hero-buttons { display:flex; gap:14px; margin-top:32px; }

.button { padding:11px 18px; border-radius:7px; font-weight:600; transition:transform .15s ease,background .15s ease; }
.button:hover { transform:translateY(-1px); }
.button.primary { background:var(--accent); color:#fff; }
.button.secondary { border:1px solid var(--border); }

.page-section { padding-top:80px; padding-bottom:80px; }
.page-intro { max-width:650px; color:var(--muted); font-size:1.08rem; line-height:1.7; }

.lab-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:42px; }
.lab-card, .blog-card { padding:24px; border:1px solid var(--border); border-radius:10px; background:var(--sidebar); }
.lab-card h2, .blog-card h2 { margin:0 0 10px; font-size:1.25rem; }
.lab-card p { margin-bottom:0; color:var(--muted); }

.blog-list { display:flex; flex-direction:column; gap:18px; margin-top:42px; }
.blog-card { transition:transform .15s ease,border-color .15s ease; }
.blog-card:hover { transform:translateY(-2px); border-color:var(--accent); }
.blog-card p { margin:0 0 12px; color:var(--muted); }
.blog-card span { font-size:.85rem; color:var(--muted); }

.resume-grid { display:grid; gap:22px; margin-top:42px; }
.resume-block { padding:26px; border:1px solid var(--border); border-radius:10px; background:var(--sidebar); }
.resume-block h2 { margin:0 0 18px; font-size:1.25rem; }
.resume-block p { color:var(--muted); line-height:1.7; }

.clean-list, .detail-list { margin:0; padding:0; list-style:none; }
.clean-list { display:grid; gap:18px; }
.clean-list li { display:flex; flex-direction:column; gap:5px; }
.clean-list span { color:var(--muted); line-height:1.55; }

.detail-list { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.detail-list li, .tag-list span { padding:7px 11px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:.9rem; }
.tag-list { display:flex; flex-wrap:wrap; gap:9px; }
.resume-cta .button { display:inline-block; margin-top:8px; }

.contact-form { max-width:700px; margin-top:42px; }
.form-row { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.form-field { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.form-field label { font-size:.92rem; font-weight:650; }
.form-field input, .form-field textarea { width:100%; border:1px solid var(--border); border-radius:8px; padding:12px 14px; background:var(--sidebar); color:var(--text); font:inherit; outline:none; transition:border-color .15s ease,box-shadow .15s ease; }
.form-field textarea { min-height:180px; resize:vertical; line-height:1.55; }
.form-field input:focus, .form-field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }

.form-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-submit { border:0; font:inherit; cursor:pointer; }
.form-status { min-height:1.5em; margin:14px 0 0; color:var(--muted); font-size:.92rem; }
.contact-alternative { margin-top:30px; color:var(--muted); }
.contact-alternative a { color:var(--accent); font-weight:600; }

@media (max-width:850px) {
  .sidebar { position:static; width:100%; height:auto; border-right:0; border-bottom:1px solid var(--border); }
  .profile { margin-bottom:18px; }
  .profile-photo { width:95px; height:95px; }
  .sidebar-footer { margin-top:20px; }
  .content { margin-left:0; }
  .hero, .page-section { padding:55px 25px; }
  .hero h1, .page-section h1 { font-size:2.8rem; }
  .hero-buttons { flex-wrap:wrap; }
}

@media (max-width:700px) {
  .lab-grid, .form-row { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none!important; }
}