/* SocialBar Blog — Minimal CSS */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#000;color:#f5f5f5;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* Layout */
.max-w-6xl{max-width:72rem}
.max-w-3xl{max-width:48rem}
.max-w-2xl{max-width:42rem}
.max-w-xs{max-width:20rem}
.mx-auto{margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem;padding-right:1rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}

/* Spacing */
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}
.mt-auto{margin-top:auto}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}

/* Flexbox */
.flex{display:flex}
.inline-block{display:inline-block}
.block{display:block}
.hidden{display:none}
.grid{display:grid}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}

/* Grid */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}

/* Typography */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.font-medium{font-weight:500}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.tracking-tight{letter-spacing:-.025em}
.tracking-wider{letter-spacing:.05em}
.tracking-wide{letter-spacing:.025em}
.uppercase{text-transform:uppercase}
.leading-relaxed{line-height:1.75}
.text-center{text-align:center}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.no-underline{text-decoration:none!important}

/* Colors */
.bg-black\/95{background:rgba(0,0,0,.95)}
.bg-\[\#121212\]{background:#121212}
.bg-\[\#262626\]{background:#262626}
.bg-\[\#CFFF00\]{background:#CFFF00}
.bg-\[\#CFFF00\]\/5{background:rgba(207,255,0,.05)}
.bg-\[\#CFFF00\]\/10{background:rgba(207,255,0,.1)}
.text-\[\#f5f5f5\]{color:#f5f5f5}
.text-\[\#a8a8a8\]{color:#a8a8a8}
.text-\[\#CFFF00\]{color:#CFFF00}
.text-black{color:#000}
.text-white{color:#fff}

/* Borders */
.border{border:1px solid}
.border-t{border-top:1px solid}
.border-b{border-bottom:1px solid}
.border-\[\#262626\]{border-color:#262626}
.border-\[\#CFFF00\]\/20{border-color:rgba(207,255,0,.2)}
.border-\[\#CFFF00\]\/30{border-color:rgba(207,255,0,.3)}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.overflow-hidden{overflow:hidden}

/* Positioning */
.sticky{position:sticky}
.top-0{top:0}
.z-50{z-index:50}
.relative{position:relative}

/* Effects */
.backdrop-blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.transition-colors{transition:color .15s,background-color .15s,border-color .15s}
.transition-all{transition:all .15s}

/* Sizing */
.w-7{width:1.75rem}
.h-7{height:1.75rem}
.h-16{height:4rem}
.w-full{width:100%}

/* Hover states */
.hover\:text-white:hover{color:#fff}
.hover\:text-\[\#CFFF00\]:hover{color:#CFFF00}
.hover\:bg-\[\#b8e600\]:hover{background:#b8e600}
.hover\:bg-\[\#CFFF00\]\/10:hover{background:rgba(207,255,0,.1)}
.hover\:bg-\[\#CFFF00\]\/20:hover{background:rgba(207,255,0,.2)}
.hover\:border-\[\#CFFF00\]:hover{border-color:#CFFF00}
.hover\:border-\[\#CFFF00\]\/30:hover{border-color:rgba(207,255,0,.3)}
.group:hover .group-hover\:text-\[\#CFFF00\]{color:#CFFF00}

/* Antialiased */
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Blog post content styling */
.blog-content{color:#d4d4d4;font-size:.95rem;line-height:1.85}
.blog-content h1{color:#f5f5f5;font-size:1.5rem;font-weight:800;margin:2rem 0 .75rem}
.blog-content h2{color:#f5f5f5;font-size:1.25rem;font-weight:700;margin:1.75rem 0 .75rem}
.blog-content h3{color:#f5f5f5;font-size:1.1rem;font-weight:600;margin:1.5rem 0 .5rem}
.blog-content p{margin-bottom:.875rem}
.blog-content a{color:#CFFF00;text-decoration:underline}
.blog-content a:hover{color:#b8e600}
.blog-content ul,.blog-content ol{margin:.5rem 0 .875rem 1.5rem}
.blog-content li{margin-bottom:.25rem}
.blog-content blockquote{border-left:3px solid #CFFF00;padding-left:1rem;margin:1rem 0;color:#a8a8a8;font-style:italic}
.blog-content img{border-radius:.5rem;margin:1rem 0}
.blog-content pre{background:#121212;border:1px solid #262626;border-radius:.5rem;padding:1rem;overflow-x:auto;margin:1rem 0}
.blog-content code{background:#121212;padding:.125rem .375rem;border-radius:.25rem;font-size:.875rem}
.blog-content strong{color:#f5f5f5}

/* Responsive */
@media(min-width:640px){
    .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .sm\:inline{display:inline}
}
@media(min-width:768px){
    .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .md\:text-3xl{font-size:1.875rem;line-height:2.25rem}
    .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
}
@media(min-width:1024px){
    .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Animation for gradient text */
@keyframes liquidShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}