:root{
  --bg:#f7f7f4;
  --panel:#ffffff;
  --text:#191919;
  --muted:#646464;
  --line:#e5e5df;
  --accent:#4f46e5;
}

:root[data-theme="dark"]{
  --bg:#0f1115;
  --panel:#151922;
  --text:#f2f3f5;
  --muted:#a2a8b4;
  --line:#2a3040;
  --accent:#8b9bff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  display:flex;
  flex-direction:column;
}
main{flex:1}
.container{width:min(800px,92vw);margin:0 auto}
.topbar{position:sticky;top:0;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:700;text-decoration:none;color:var(--text);font-size:18px}
.nav nav{display:flex;align-items:center;gap:12px}
.nav nav a{color:var(--muted);text-decoration:none}
.nav nav a:hover{color:var(--text)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:0;background:none;color:var(--text);padding:0;cursor:pointer;transition:.15s ease}
.theme-toggle:hover{color:var(--accent);transform:translateY(-1px)}
.theme-toggle .icon{width:22px;height:22px}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block}
:root[data-theme="light"] .theme-toggle .icon-sun{display:none}
.hero{padding:52px 0 52px}
.hero-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.avatar{width:160px;height:160px;border-radius:999px;object-fit:cover;border:2px solid var(--line)}
h1{font-size:clamp(30px,4vw,38px);line-height:1.14;margin:8px 0 12px;font-weight:700}
.lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--muted);max-width:680px}
.social-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.social-row a{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--text);text-decoration:none;transition:.15s ease;border:0;background:none;border-radius:0}
.social-row a:hover{color:var(--accent);transform:translateY(-1px)}
.social-row svg{width:22px;height:22px}
.section{padding:26px 0}
.divider{border:0;border-top:1px solid var(--line);margin:0}
.post-item{padding:8px 0 14px;border-bottom:1px solid var(--line)}
.post-item h3{margin:0 0 6px;font-size:24px;line-height:1.25}
.post-item h3 a{display:inline-block;width:fit-content;color:var(--text);text-decoration:none}
.post-item h3 a:hover{color:var(--accent)}
.post-item h3 a::after{content:"";display:block;width:0;height:2px;background:currentColor;transition:width .22s ease;opacity:.5}
.post-item h3 a:hover::after{width:100%}
.post-meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;margin-bottom:10px}
.meta-icon{display:inline-flex;align-items:center;line-height:1}
.meta-icon svg{width:15px;height:15px}
.post-excerpt{margin:0;color:var(--muted);font-size:16px;line-height:1.6;max-width:800px}
.post-page{max-width:800px}
.post-full{font-size:17px;line-height:1.7}
.post-full p{margin:0 0 14px}

.post-enter{animation:postIn .55s cubic-bezier(.22,1,.36,1)}
@keyframes postIn{
  from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(2px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

body.is-leaving main{animation:pageOut .24s ease forwards}
@keyframes pageOut{from{opacity:1;transform:translateY(0)}to{opacity:.12;transform:translateY(8px)}}

@media (prefers-reduced-motion: reduce){
  .post-enter,body.is-leaving main{animation:none !important}
  .post-item h3 a::after{transition:none}
}
.footer{border-top:1px solid var(--line);margin-top:42px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:18px 0;color:var(--muted)}
.footer p{margin:0}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--accent)}
.footer-social{margin-top:0}
@media (max-width:900px){
  .hero-wrap{flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .hero-wrap > div{display:flex;flex-direction:column;align-items:center}
  .hero .social-row{justify-content:center}
}

@media (max-width:620px){
  .section#posts,.post-item,.post-item h3,.post-meta,.post-excerpt{ text-align:left }
  .section#posts .social-row{justify-content:flex-start}

  .footer-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .footer-social{justify-content:flex-start}

  .brand{font-size:16px}
  .post-item h3{font-size:21px}
  .post-full{font-size:16px}
}