:root{
  --bg:#0b1220;
  --panel:#0f1b33;
  --ink:#e5e7eb;
  --muted:#9aa7b8;
  --brand:#a78bfa;
  --brand2:#22d3ee;
  --line:rgba(229,231,235,.12);
}

body.theme-b0004{background:radial-gradient(1200px 600px at 20% 0%, rgba(167,139,250,.16), transparent 55%), radial-gradient(900px 500px at 80% 10%, rgba(34,211,238,.14), transparent 60%), var(--bg); color:var(--ink);} 

#logo a{color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:.3px;}

.rail{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:76px;
  background:rgba(15,27,51,.72);
  border-right:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(10px);
  z-index:30;
}

.rail .railbtn{display:flex; align-items:center; justify-content:center; height:56px; color:var(--muted);}
.rail .railbtn.is-active{color:var(--ink);} 

.drawer{
  position:fixed;
  top:0;
  left:76px;
  bottom:0;
  width:300px;
  background:rgba(15,27,51,.92);
  border-right:1px solid var(--line);
  transform:translateX(-110%);
  transition:transform .2s ease;
  z-index:25;
}
.drawer.is-open{transform:translateX(0);} 

.shell{margin-left:76px; padding:1.25rem 1.25rem 0;}

.masonry{column-count:3; column-gap:1rem;}
.masonry .mcard{break-inside:avoid; margin:0 0 1rem; background:rgba(15,27,51,.88); border:1px solid var(--line); border-radius:14px; padding:1rem;}

.controls{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem;}

.badge{background:rgba(167,139,250,.18); color:var(--ink);} 

#footer{margin-top:1.75rem; padding:1.75rem 0; border-top:1px solid var(--line);} 

a{color:var(--brand2);} a:hover{text-decoration:underline;}

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

@media (max-width: 1100px){
  .masonry{column-count:2;}
}
@media (max-width: 720px){
  .masonry{column-count:1;}
  .drawer{left:0; width:82vw;}
  .shell{margin-left:0; padding:1rem;}
  .rail{display:none;}
}