:root{
  --bg:#0f1320; --card:#141826; --muted:#a1acbd; --text:#eaf0ff; --primary:#4c88ff; --accent:#06c167;
}
:root.light{ --bg:#ffffff; --card:#f7f8fb; --muted:#5a6475; --text:#0b1220; --primary:#2f6bff; --accent:#06c167; }
*{box-sizing:border-box}
html,body{height:100%} html{scroll-behavior:smooth}
body{margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text); line-height:1.7}
.container{width:min(1100px,92%); margin:0 auto}
.header{position:sticky; top:0; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid color-mix(in srgb, var(--text) 10%, transparent); z-index:50}
.header .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; gap:12px; align-items:center}
.brand img{width:44px; height:44px; border-radius:12px}
.brand h1{font-size:1.2rem; margin:0}
.nav{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.nav a{text-decoration:none; opacity:.9; padding:8px 10px; border-radius:10px}
.nav a:hover{background:color-mix(in srgb, var(--text) 10%, transparent)}
.btn{padding:10px 14px; border-radius:12px; border:1px solid color-mix(in srgb, var(--text) 15%, transparent); background:color-mix(in srgb, var(--bg) 70%, var(--card)); cursor:pointer}
.btn.primary{background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 20%, white), var(--primary)); border:0; color:white}
.btn.ghost{background:transparent}
.hero{padding:72px 0 24px; text-align:center}
.hero h2{font-size:clamp(1.6rem, 2.5vw + 1rem, 2.6rem); margin:0 0 10px}
.hero p{color:var(--muted); margin:0 auto 20px; max-width:820px}
.grid{display:grid; gap:18px}
.grid.cols-2{grid-template-columns:1fr}
@media(min-width:900px){ .grid.cols-2{grid-template-columns:1fr 1fr} }
.card{background:var(--card); border:1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius:18px; padding:18px; box-shadow:0 8px 30px rgba(0,0,0,0.18)}
.footer{padding:30px 0; color:var(--muted)}
.pills{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding-left:0}
.pills li{padding:8px 12px; background:color-mix(in srgb, var(--bg) 75%, var(--card)); border:1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius:999px}
.timeline > article{padding:12px 0; border-bottom:1px dashed color-mix(in srgb, var(--text) 18%, transparent)}
.timeline > article:last-child{border-bottom:0}
.meta{color:var(--muted); margin-top:-6px}
.post{max-width:780px; margin:0 auto}
img{max-width:100%; height:auto}
a{color:#bcd3ff}
input,textarea{width:100%; padding:10px 12px; border-radius:12px; border:1px solid color-mix(in srgb, var(--text) 15%, transparent); background:color-mix(in srgb, var(--bg) 70%, var(--card)); color:var(--text)}
label{display:grid; gap:6px}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}