.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s-lg) var(--s-xxl);}

.topbar{
  position:sticky;top:0;z-index:20;
  background:#131313;border-bottom:1px solid var(--c-hairline);
}
.topbar-inner{
  max-width:var(--container);margin:0 auto;padding:0 var(--s-lg);
  min-height:var(--nav-h);display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:var(--s-xs);
  font-family:var(--font-display);font-weight:400;letter-spacing:1px;
  font-size:20px;text-transform:uppercase;color:var(--c-ink);
}
.brand .mark{width:14px;height:14px;border-radius:50%;
  background:var(--c-primary);box-shadow:0 0 0 3px rgba(60,255,208,0.18);}
.topbar .spacer{flex:1;}

.intro{padding:var(--s-xl) 0 var(--s-md);}
.intro h1{margin:6px 0 10px;}
.intro .lead{color:var(--c-ink-muted);font-size:15px;max-width:780px;line-height:1.6;}
.badges{display:flex;gap:var(--s-xs);flex-wrap:wrap;margin-top:var(--s-md);}

.tabs{display:flex;gap:var(--s-lg);margin:var(--s-md) 0 var(--s-lg);
  border-bottom:1px solid var(--c-hairline);}
.tab{
  background:none;border:none;cursor:pointer;padding:10px 2px;
  font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:1.2px;
  color:var(--c-ink-subtle);border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;margin-bottom:-1px;
}
.tab:hover{color:var(--c-ink);}
.tab.active{color:var(--c-primary);border-bottom-color:var(--c-primary);}

.panel{
  position:relative;background:var(--c-surface-1);
  border:1px solid var(--c-hairline);border-radius:var(--r-card);
  padding:var(--s-lg);margin-bottom:var(--s-md);
}
.panel.xl{border-radius:var(--r-feature);}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);
  margin-bottom:var(--s-sm);}

.row{display:flex;gap:var(--s-md);flex-wrap:wrap;}
.col{flex:1;min-width:300px;}

.footer{border-top:1px solid var(--c-hairline);margin-top:var(--s-xl);
  padding:var(--s-xl) 0;color:var(--c-ink-subtle);font-size:12px;line-height:1.7;}
.footer a{color:var(--c-ink-muted);}
.footer a:hover{color:var(--c-link-hover);}

@media (max-width:780px){
  .col{min-width:100%;}
  .intro{padding-top:var(--s-lg);}
}

@media (max-width:560px){
  .wrap{padding-left:var(--s-sm);padding-right:var(--s-sm);}
  .topbar-inner{padding-left:var(--s-sm);padding-right:var(--s-sm);}
}