.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

.header{border-bottom:1px solid rgba(0,0,0,.08);padding:14px 0;background:#fff;position:sticky;top:0;z-index:10}
.header-wrap{display:flex;align-items:center;gap:14px;justify-content:space-between}
#logo img{display:block;height:34px;width:auto}
.site-title{font-weight:800}
.tagline{opacity:.7}
.header-ads{min-width:180px;max-width:340px}

.timeline{padding:18px 0}
.timeline .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px}
.timeline-rail{position:absolute;left:20px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,rgba(155,89,182,.2),rgba(52,152,219,.2))}
.timeline-entry{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:16px;position:relative}
.timeline-entry:before{content:"";position:absolute;left:-14px;top:18px;width:14px;height:14px;border-radius:50%;background:#9b59b6;box-shadow:0 0 0 6px rgba(155,89,182,.12)}
.timeline-side{border:1px dashed rgba(0,0,0,.2);border-radius:14px;background:#fff;padding:12px}

.footer{border-top:1px solid rgba(0,0,0,.08);padding:12px 0;margin-bottom:68px}
.footer-wrap{display:flex;gap:12px;align-items:center;justify-content:space-between}
.social{display:flex;gap:.75rem;flex-wrap:wrap}

.tabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid rgba(0,0,0,.08)}
.tabbar ul{margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;list-style:none;padding:6px}
.tabbar a{display:block;text-align:center;padding:10px 8px;border-radius:12px;text-decoration:none}
.tabbar li.active a{background:rgba(155,89,182,.12);font-weight:800}

@media (max-width: 900px){
  .timeline .wrap{grid-template-columns:1fr}
  .header-ads{display:none}
}