:root{
  --b33-bg:#0b1220;
  --b33-ink:#e5e7eb;
  --b33-muted:#9ca3af;
  --b33-surface:#0f1a2e;
  --b33-accent:#a78bfa;
}

body{background:radial-gradient(900px 500px at 20% 10%, rgba(167,139,250,.16), transparent 60%), var(--b33-bg);color:var(--b33-ink)}

.b33-shell{display:grid;grid-template-columns: 300px minmax(0,1fr);min-height:100vh}
.b33-left{background:rgba(15,26,46,.88);border-right:1px solid rgba(255,255,255,.10)}
.b33-left-inner{position:sticky;top:0;max-height:100vh;overflow:auto;padding:16px}

#logo img{width:52px;height:52px;object-fit:contain;border-radius:14px;background:#fff;border:1px solid rgba(255,255,255,.14)}
.b33-title{margin-top:10px;font-weight:800}
.b33-tagline{color:var(--b33-muted);font-size:.9rem}

.b33-menu .item{color:var(--b33-ink)!important}
.b33-menu .item.active{background:rgba(167,139,250,.16)!important}

.b33-main{padding:18px}
.b33-paper{background:rgba(15,26,46,.85)!important;border:1px solid rgba(255,255,255,.10)!important;color:var(--b33-ink)!important}
.b33-h1{color:var(--b33-ink)!important}
.b33-desc{color:var(--b33-muted)}

.b33-timeline{position:relative;display:grid;gap:14px;margin:16px 0 18px}
.b33-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom, rgba(167,139,250,.55), rgba(167,139,250,.05))}
.b33-event{display:grid;grid-template-columns: 1fr 1fr}
.b33-leftside{justify-items:end}
.b33-rightside{justify-items:start}
.b33-card{width:min(520px, 92%);background:rgba(15,26,46,.85)!important;border:1px solid rgba(255,255,255,.10)!important;color:var(--b33-ink)!important}
.b33-card .header{color:var(--b33-ink)!important}

@media (max-width: 980px){
  .b33-shell{grid-template-columns: 1fr}
  .b33-left{position:fixed;inset:0 auto 0 0;width:300px;transform:translateX(0);transition:transform .2s ease;z-index:20}
  .b33-left[data-hidden="true"]{transform:translateX(-100%)}
  .b33-line{left:12px}
  .b33-event{grid-template-columns: 1fr}
  .b33-leftside,.b33-rightside{justify-items:start}
  .b33-card{margin-left:22px}
}

.b33-fab{position:fixed;right:16px;bottom:86px;z-index:30}

#footer{padding:28px 0;border-top:1px solid rgba(255,255,255,.10)}
#footer .social{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
#footer .social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:rgba(15,26,46,.85);border:1px solid rgba(255,255,255,.10);text-decoration:none;color:var(--b33-ink)}
#footer p{margin:0;color:var(--b33-muted)}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}