:root{
  --bg: #000000;
  --elev: #000000;
  --text: #ffffff;
  --muted: #cccccc;
  --brand:#5b9bff;
  --brand-2:#7df3d4;
  --card:#1a1a1a;
  --border:#333333;
  --shadow: 0 8px 30px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#000000; --elev:#000000; --text:#ffffff; --muted:#cccccc;
    --brand:#5b9bff; --brand-2:#7df3d4; --card:#1a1a1a; --border:#333333; --shadow: 0 8px 30px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html,body{padding:0;margin:0}
html{overflow-y:scroll}
body{
  background:linear-gradient(180deg,var(--bg),var(--elev));
  color:var(--text);
  font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1080px;margin:0 auto;padding:0 24px}
.nav{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(180%) blur(12px);
  background:color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:800; letter-spacing:.3px; display:flex; align-items:center; gap:10px;}
.brand img{height:32px; width:auto}
.brand-badge{width:28px; height:28px; border-radius:8px;
  background:conic-gradient(from 180deg,var(--brand),var(--brand-2)); box-shadow:var(--shadow);}
.nav a{color:var(--text);opacity:.9;margin-left:18px}
.nav a:hover{opacity:1}
.hero{padding:72px 0 40px; text-align:center}
.hero-logo{height:100px; width:auto; margin:0 auto 24px; display:block}
h1{font-size:44px; line-height:1.1; margin:0 0 12px}
.sub{color:var(--muted); font-size:18px; margin:0 auto 24px; max-width:760px}
.cta{display:inline-flex; gap:12px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:10px; border:1px solid var(--border);
  background:linear-gradient(180deg,color-mix(in oklab,var(--brand) 12%, transparent),transparent);
  color:var(--text); font-weight:600; box-shadow:var(--shadow); transition:.2s transform;
}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:transparent}
section{padding:36px 0}
section h2{font-size:24px;margin:0 0 16px}
.grid{display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid-3{display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:1024px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.grid-3{grid-template-columns:1fr}}
.skills-grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:16px 0;}
.skills-grid section h4{margin:0 0 12px; font-size:16px; color:var(--text)}
.skills-grid ul{padding:0; list-style:none; margin:0;}
.skills-grid li{margin:6px 0; font-size:14px; color:var(--text)}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px;
  box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px)}
.card h3{margin:0 0 8px; font-size:18px}
.meta{color:var(--muted); font-size:14px;margin-top:8px}
.card a{display:inline-block;margin-top:10px}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; padding:0; list-style:none}
.tag{border:1px solid var(--border); padding:4px 8px; border-radius:999px; font-size:12px; color:var(--muted)}
.gallery{margin:16px 0}
.gallery-container{position:relative; display:flex; align-items:center; justify-content:center; min-height:200px}
.gallery-img{width:100%; height:auto; object-fit:contain; border-radius:8px; border:1px solid var(--border); cursor:pointer; transition:opacity 0.2s}
.gallery-img:hover{opacity:0.9}
.gallery-controls{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:12px; flex-wrap:wrap}
.gallery-nav-btn{background:transparent; border:1px solid var(--border); color:var(--text); padding:6px 12px; cursor:pointer; border-radius:4px; transition:background 0.2s; font-size:14px}
.gallery-nav-btn:hover{background:rgba(91,155,255,0.1)}
.gallery-counter{font-size:12px; color:var(--muted); white-space:nowrap}
.lightbox-img{cursor: pointer; transition: opacity 0.2s;}
.lightbox-img:hover{opacity: 0.8}
.lightbox{display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.9); animation:fadeIn 0.3s}
.lightbox.active{display:flex; align-items:center; justify-content:center}
.lightbox-content{position:relative; max-width:90%; max-height:90vh; display:flex; align-items:center; justify-content:center}
.lightbox-content img{max-width:100%; max-height:90vh; border-radius:8px}
.lightbox-close{position:absolute; top:20px; right:30px; color:#fff; font-size:40px; font-weight:bold; cursor:pointer; z-index:1001}
.lightbox-close:hover{color:#ccc}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
footer{border-top:1px solid var(--border); padding:28px 0; color:var(--muted); text-align:center}
.i{display:inline-block; width:16px; height:16px; border-radius:3px}
.blog-layout{display:grid; grid-template-columns:240px 1fr; gap:32px; margin-top:32px}
.blog-sidebar{position:sticky; top:80px; height:fit-content}
.blog-nav a{display:block; margin-bottom:8px; font-size:14px; color:var(--text); padding:8px 12px; border-radius:4px; transition:background 0.2s}
.blog-nav a:hover{background:rgba(91,155,255,0.1)}
.blog-content{line-height:1.8}
.blog-content h2{margin-top:32px; margin-bottom:16px; font-size:20px}
.blog-content p{margin-bottom:16px}
.blog-content code{background:var(--card); padding:2px 6px; border-radius:3px; font-size:13px}
.blog-content pre{background:var(--card); border:1px solid var(--border); padding:16px; border-radius:8px; overflow-x:auto; margin:16px 0}
@media(max-width:768px){.blog-layout{grid-template-columns:1fr; gap:24px} .blog-sidebar{position:static}}