:root{ --bg:#0b0c10; --card:#13141a; --ink:#f5f7ff; --muted:#b5b8c6; --accent:#e50914; --ring:#ff6672; --gap:clamp(14px,2vw,24px); --radius:18px; --shadow:0 14px 30px rgba(0,0,0,.5); --blur:12px; --bp-mobile:760px; }
*{box-sizing:border-box} html,body{height:100%} body{margin:0;font:16px/1.7 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--ink);background:var(--bg)}
.content-container{max-width:1200px;margin:0 auto;padding:0 var(--gap)}
.topbar{position:sticky;top:0;z-index:10000;backdrop-filter:blur(var(--blur));background:linear-gradient(180deg,rgba(10,10,14,.9),rgba(10,10,14,.55) 65%,transparent);border-bottom:1px solid rgba(255,255,255,.06)}
.topbar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px var(--gap);min-height:56px}
.logo{font-weight:900;font-size:clamp(20px,2.2vw,28px);letter-spacing:.2px;text-decoration:none}
.logo .brand{color:#fff}.logo .x{color:var(--accent)}
.nav .menu,.mobile-menu-list{list-style:none;margin:0;padding:0}
.nav .menu{display:flex;gap:16px;align-items:center}
.nav .menu>li{margin:0;padding:0}
.nav .menu>li>a{color:var(--ink);text-decoration:none;font-weight:600;padding:10px 12px;border-radius:12px;position:relative}
.nav .menu>li>a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .25s ease}
.nav .menu>li>a:hover::after{transform:scaleX(1);transform-origin:left}
.hamburger{display:none;inline-size:42px;block-size:42px;border:0;background:transparent;border-radius:12px;cursor:pointer;position:relative;margin-left:auto;color:var(--ink);z-index:10001}
.hamburger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.hamburger .bar{position:absolute;left:10px;right:10px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease,top .25s ease}
.hamburger .b1{top:13px}.hamburger .b2{top:20px}.hamburger .b3{top:27px}
.hamburger.active .b1{top:20px;transform:rotate(45deg)} .hamburger.active .b2{opacity:0} .hamburger.active .b3{top:20px;transform:rotate(-45deg)}
#mobileMenu[hidden]{display:none}
#mobileMenu{position:fixed;inset:0;z-index:10000;padding:0}
#mobileMenu .overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s ease}
#mobileMenu .panel{position:absolute;top:0;right:0;bottom:0;width:min(84vw,380px);background:linear-gradient(0deg, rgba(229,9,20,.08), rgba(229,9,20,.08)), var(--card);border-left:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:18px}
#mobileMenu .title{font-weight:800;margin-bottom:6px}
#mobileMenu .mobile-menu-list a{display:block;padding:14px 10px;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:600}
#mobileMenu .mobile-menu-list a:hover{background:rgba(255,255,255,.06)}
#mobileMenu.active .overlay{opacity:1} #mobileMenu.active .panel{transform:translateX(0)}
.section{padding:28px 0} .post-title{margin:0 0 .25rem}
.meta{opacity:.75;font-size:.9rem;display:flex;align-items:center;gap:.5rem}
.site-footer{border-top:1px solid rgba(255,255,255,.06);margin-top:40px;color:var(--muted)}
.foot-inner{max-width:1200px;margin:0 auto;padding:20px var(--gap);display:flex;justify-content:space-between;flex-wrap:wrap}
@media (max-width:760px){ .nav{display:none} .hamburger{display:inline-block} }