/* ========================================================================== DESIGN SYSTEM - MONCHO.CLOUD 2026 ========================================================================== */
:root { --bg-color-main: #06060c; --bg-color-sec: #0c0b14; --bg-card: rgba(16, 15, 27, 0.6); --border-color: rgba(255, 255, 255, 0.08); --border-glow: rgba(99, 102, 241, 0.3); --primary-color: #6366f1; --secondary-color: #a855f7; --accent-color: #06b6d4; --text-main: #f3f4f6; --text-sec: #9ca3af; --text-muted: #6b7280; --primary-gradient: linear-gradient(135deg, #06b6d4 0%, #6366f1 50%, #a855f7 100%); --text-gradient: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%); --font-heading: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'Fira Code', monospace; --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --shadow-glow: 0 8px 32px 0 rgba(99, 102, 241, 0.08); }

* { box-sizing: border-box; margin: 0; padding: 0; }

body { background-color: var(--bg-color-main); color: var(--text-main); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; position: relative; min-height: 100vh; display: flex; flex-direction: column; }

body::before { content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; background: radial-gradient(600px circle at var(--cursor-x, -1000px) var(--cursor-y, -1000px), rgba(99, 102, 241, 0.08), transparent 80%); pointer-events: none; }

a { color: var(--primary-color); text-decoration: none; transition: var(--transition-smooth); }

a:hover { color: var(--accent-color); }

img { max-width: 100%; height: auto; border-radius: 8px; }

/* ========================================================================== BACKGROUND ANIMATION & EFFECTS ========================================================================== */
.blob-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; pointer-events: none; }

.blob { position: absolute; border-radius: 50%; filter: blur(150px); opacity: 0.15; animation: float 25s infinite alternate ease-in-out; }

.blob-purple { background: var(--secondary-color); width: 50vw; height: 50vw; top: -10vw; right: -10vw; }

.blob-blue { background: var(--accent-color); width: 40vw; height: 40vw; bottom: 10vh; left: -10vw; animation-delay: -5s; }

@keyframes float { 0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4vw, 5vh) scale(1.1); }
  100% { transform: translate(-2vw, -3vh) scale(0.95); } }

/* ========================================================================== TYPOGRAPHY UTILITIES ========================================================================== */
.text-gradient { background: var(--text-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ========================================================================== HEADER / NAVBAR ========================================================================== */
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(6, 6, 12, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); transition: var(--transition-smooth); }

.site-header.scrolled { background: rgba(6, 6, 12, 0.85); border-bottom-color: rgba(99, 102, 241, 0.15); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); }

.header-wrapper { max-width: 1200px; margin: 0 auto; padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; }

.logo-area { display: flex; align-items: center; }

.logo-container { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid var(--primary-color); box-shadow: 0 0 12px var(--border-glow); margin-right: 0.75rem; transition: var(--transition-smooth); }

.logo-image { width: 100%; height: 100%; object-fit: cover; }

.logo-text { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.5px; color: var(--text-main); }

.site-title:hover .logo-container { transform: rotate(15deg) scale(1.05); border-color: var(--accent-color); box-shadow: 0 0 16px rgba(6, 182, 212, 0.5); }

.site-title:hover .logo-text { background: var(--text-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.site-nav { position: relative; }

.site-nav .nav-trigger { display: none; }

.site-nav .trigger { display: flex; gap: 2rem; }

.site-nav .page-link { color: var(--text-sec); font-family: var(--font-heading); font-weight: 500; font-size: 1rem; position: relative; padding: 0.25rem 0; }

.site-nav .page-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary-gradient); transition: var(--transition-smooth); border-radius: 2px; }

.site-nav .page-link:hover { color: var(--text-main); }

.site-nav .page-link:hover::after { width: 100%; }

/* Hamburger mobile nav styles */
.nav-trigger-label { display: none; flex-direction: column; justify-content: space-between; width: 22px; height: 16px; cursor: pointer; z-index: 1001; }

.nav-trigger-label .hamburger-line { width: 100%; height: 2px; background-color: var(--text-main); transition: var(--transition-smooth); border-radius: 2px; }

/* ========================================================================== PAGE CONTENT MAIN CONTAINER ========================================================================== */
.page-content { flex: 1; margin-top: 80px; padding: 3rem 2rem; max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; }

/* ========================================================================== HERO SECTION ========================================================================== */
.hero-section { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: center; padding: 4rem 0 6rem 0; }

@media (max-width: 992px) { .hero-section { grid-template-columns: 1fr; gap: 3rem; padding: 2rem 0 4rem 0; } }

.hero-content { display: flex; flex-direction: column; align-items: flex-start; }

.hero-badge { display: flex; align-items: center; gap: 0.5rem; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.2); color: #a5b4fc; padding: 0.5rem 1rem; border-radius: 50px; font-family: var(--font-heading); font-weight: 500; font-size: 0.85rem; margin-bottom: 1.5rem; box-shadow: inset 0 0 12px rgba(99, 102, 241, 0.05); }

.pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); animation: pulse-animation 1.8s infinite; }

@keyframes pulse-animation { 0% { transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
  70% { transform: scale(1);
    box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
  100% { transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }

.hero-title { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 800; line-height: 1.15; letter-spacing: -1px; margin-bottom: 1.5rem; }

@media (max-width: 576px) { .hero-title { font-size: 2.5rem; } }

.hero-subtitle { color: var(--text-sec); font-size: 1.15rem; line-height: 1.6; margin-bottom: 2.5rem; max-width: 600px; }

.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Button UI Components */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 0.75rem 1.75rem; border-radius: 12px; font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; cursor: pointer; transition: var(--transition-smooth); text-decoration: none; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; border: none; }

.btn i { display: inline-flex; align-items: center; justify-content: center; font-size: 0.875em; line-height: 1; }

.btn-primary { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #ffffff !important; box-shadow: 0 2px 12px rgba(99, 102, 241, 0.3); position: relative; overflow: hidden; }

.btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s ease; }

.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45); color: #ffffff !important; }

.btn-primary:hover::before { opacity: 1; }

.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35); }

.btn-secondary { background: rgba(255, 255, 255, 0.06); color: var(--text-main) !important; border: 1.5px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(99, 102, 241, 0.5); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2); color: var(--text-main) !important; }

.btn-secondary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

/* Terminal Card Component */
.hero-card { background: #08080f; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-glow); transition: var(--transition-smooth); width: 100%; max-width: 440px; margin: 0 auto; }

.hero-card:hover { border-color: var(--border-glow); box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15); transform: translateY(-4px); }

.card-header-bar { background: rgba(255, 255, 255, 0.03); padding: 0.75rem 1rem; display: flex; align-items: center; border-bottom: 1px solid var(--border-color); }

.dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; display: inline-block; }

.dot.red { background-color: #ef4444; }

.dot.yellow { background-color: #f59e0b; }

.dot.green { background-color: #10b981; }

.terminal-title { margin-left: auto; margin-right: auto; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }

.terminal-body { padding: 1.5rem; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.6; }

.terminal-line { color: #38bdf8; }

.cmd-prompt { color: #f43f5e; font-weight: bold; }

.json-content { margin-left: 0.5rem; color: #e2e8f0; }

.json-bracket { color: #f59e0b; }

.json-key { color: #f472b6; }

.json-val { color: #34d399; }

/* ========================================================================== BLOG POSTS FEED SECTION ========================================================================== */
.posts-section { padding: 4rem 0; border-top: 1px solid var(--border-color); }

.section-header { margin-bottom: 3rem; text-align: left; }

.section-title { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; margin-bottom: 0.5rem; }

.section-subtitle { color: var(--text-sec); font-size: 1.1rem; }

.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2rem; margin-bottom: 3.5rem; }

.post-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; position: relative; overflow: hidden; transition: var(--transition-smooth); display: flex; flex-direction: column; height: 100%; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

.post-card:hover { transform: translateY(-4px); border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 10px 30px rgba(99, 102, 241, 0.1); }

.post-card:hover .post-card-glow { opacity: 0.1; }

.post-card-glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 0%, var(--primary-color) 0%, transparent 70%); opacity: 0; transition: var(--transition-smooth); pointer-events: none; z-index: 1; }

.post-card-content { padding: 2rem; z-index: 2; display: flex; flex-direction: column; height: 100%; }

.post-card-meta { display: flex; gap: 1.25rem; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1rem; align-items: center; }

.post-card-meta i { margin-right: 0.25rem; }

.post-card-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.75rem; }

.post-card-title a { color: var(--text-main); }

.post-card-title a:hover { background: var(--text-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.post-card-excerpt { color: var(--text-sec); font-size: 0.925rem; margin-bottom: 1.5rem; flex-grow: 1; }

.post-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 1.25rem; }

.post-card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tag-badge { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); color: var(--text-sec); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500; text-transform: lowercase; }

.post-card-link { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; color: var(--accent-color); display: inline-flex; align-items: center; gap: 0.35rem; }

.post-card-link i { transition: var(--transition-smooth); }

.post-card-link:hover i { transform: translateX(3px); }

.rss-wrapper { text-align: center; }

.rss-btn { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.9rem; transition: var(--transition-smooth); }

.rss-btn:hover { color: #f97316; }

/* ========================================================================== POST CONTENT / ARTICLE VIEWER ========================================================================== */
.post-container, .page-container { max-width: 800px; margin: 0 auto; padding: 2rem 0 6rem 0; }

.post-back-btn { margin-bottom: 2.5rem; }

.post-back-btn a { color: var(--text-muted); font-family: var(--font-heading); font-weight: 500; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.5rem; }

.post-back-btn a:hover { color: var(--text-main); }

.post-article { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 3rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-glow); }

@media (max-width: 576px) { .post-article { padding: 1.5rem; } }

.post-header, .page-header { border-bottom: 1px solid var(--border-color); padding-bottom: 2rem; margin-bottom: 2.5rem; }

.post-meta-top { display: flex; gap: 1.5rem; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem; }

.post-meta-top i { margin-right: 0.25rem; }

.post-title, .page-title { font-family: var(--font-heading); font-size: 2.75rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.25rem; letter-spacing: -0.5px; }

@media (max-width: 576px) { .post-title, .page-title { font-size: 2rem; } }

.post-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.post-categories .tag-badge { padding: 0.3rem 0.75rem; font-size: 0.8rem; background: rgba(99, 102, 241, 0.08); border-color: rgba(99, 102, 241, 0.15); color: #a5b4fc; }

/* Markdown styling inside posts */
.post-content, .page-content { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.75; color: #e2e8f0; /* Tables */ /* Images */ /* Inline Code */ /* Pre-formatted block code override */ }

.post-content p, .page-content p { margin-bottom: 1.5rem; }

.post-content h2, .post-content h3, .post-content h4, .page-content h2, .page-content h3, .page-content h4 { font-family: var(--font-heading); color: var(--text-main); font-weight: 700; margin-top: 2.5rem; margin-bottom: 1rem; }

.post-content h2, .page-content h2 { font-size: 1.75rem; border-left: 4px solid var(--primary-color); padding-left: 0.75rem; }

.post-content h3, .page-content h3 { font-size: 1.4rem; }

.post-content h4, .page-content h4 { font-size: 1.15rem; }

.post-content ul, .post-content ol, .page-content ul, .page-content ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }

.post-content ul li, .post-content ol li, .page-content ul li, .page-content ol li { margin-bottom: 0.5rem; }

.post-content a:not(.btn), .page-content a:not(.btn) { color: var(--accent-color); border-bottom: 1px solid rgba(6, 182, 212, 0.3); padding-bottom: 1px; }

.post-content a:not(.btn):hover, .page-content a:not(.btn):hover { border-bottom-color: var(--accent-color); color: #fff; }

.post-content blockquote, .page-content blockquote { background: rgba(255, 255, 255, 0.02); border-left: 4px solid var(--secondary-color); padding: 1rem 1.5rem; margin: 1.5rem 0; border-radius: 0 8px 8px 0; color: var(--text-sec); font-style: italic; }

.post-content blockquote p:last-child, .page-content blockquote p:last-child { margin-bottom: 0; }

.post-content hr, .page-content hr { border: 0; height: 1px; background: var(--border-color); margin: 2.5rem 0; }

.post-content table, .page-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.95rem; }

.post-content table th, .post-content table td, .page-content table th, .page-content table td { padding: 0.75rem 1rem; border: 1px solid var(--border-color); text-align: left; }

.post-content table th, .page-content table th { background: rgba(255, 255, 255, 0.04); color: var(--text-main); font-weight: 600; }

.post-content table tr:nth-child(even), .page-content table tr:nth-child(even) { background: rgba(255, 255, 255, 0.01); }

.post-content img, .page-content img { display: block; margin: 2rem auto; max-width: 100%; border: 1px solid var(--border-color); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }

.post-content img[src*="it_works.png"], .post-content img[src*="moncho.png"], .page-content img[src*="it_works.png"], .page-content img[src*="moncho.png"] { border-color: var(--border-glow); }

.post-content code, .page-content code { font-family: var(--font-mono); font-size: 0.85em; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); padding: 0.2rem 0.4rem; border-radius: 4px; color: #f472b6; }

.post-content pre, .page-content pre { margin: 1.5rem 0; padding: 1.25rem; overflow-x: auto; border-radius: 8px; border: 1px solid var(--border-color); background: #07070c !important; }

.post-content pre code, .page-content pre code { background: none; border: none; padding: 0; border-radius: 0; color: inherit; font-size: 0.875rem; }

/* Post footer card styling */
.post-footer-card { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

.author-info { display: flex; align-items: center; gap: 1.25rem; }

.author-avatar-container { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid var(--primary-color); box-shadow: 0 0 10px rgba(99, 102, 241, 0.2); }

.author-avatar { width: 100%; height: 100%; object-fit: cover; }

.author-bio h4 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.2rem; color: var(--text-main); }

.author-bio p { font-size: 0.875rem; color: var(--text-sec); margin-bottom: 0; }

.post-share { display: flex; align-items: center; gap: 1rem; color: var(--text-muted); font-size: 0.9rem; }

.post-share a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-color); color: var(--text-sec); background: rgba(255, 255, 255, 0.02); transition: var(--transition-smooth); }

.post-share a:hover { color: #fff; transform: translateY(-2px); }

.post-share a.twitter:hover { background: #1da1f2; border-color: #1da1f2; }

.post-share a.linkedin:hover { background: #0077b5; border-color: #0077b5; }

/* Post Navigation buttons at the bottom */
.post-navigation { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

@media (max-width: 576px) { .post-navigation { grid-template-columns: 1fr; gap: 1rem; } }

.post-navigation .nav-prev a, .post-navigation .nav-next a { display: flex; flex-direction: column; padding: 1.5rem; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-color); transition: var(--transition-smooth); height: 100%; }

.post-navigation .nav-prev a:hover, .post-navigation .nav-next a:hover { border-color: var(--primary-color); box-shadow: var(--shadow-glow); transform: translateY(-2px); }

.post-navigation .nav-prev a:hover .nav-label, .post-navigation .nav-next a:hover .nav-label { color: var(--accent-color); }

.post-navigation .nav-next a { align-items: flex-end; text-align: right; }

.post-navigation .nav-label { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem; }

.post-navigation .nav-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--text-main); line-height: 1.3; }

/* ========================================================================== FOOTER SECTION ========================================================================== */
.site-footer { background: var(--bg-color-sec); border-top: 1px solid var(--border-color); padding: 4rem 2rem 2.5rem 2rem; margin-top: auto; position: relative; z-index: 10; }

.footer-wrapper { max-width: 1200px; margin: 0 auto; }

.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 4rem; margin-bottom: 3.5rem; }

@media (max-width: 768px) { .footer-top { grid-template-columns: 1fr; gap: 2.5rem; } }

.footer-col-info { display: flex; flex-direction: column; align-items: flex-start; }

.footer-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; margin-bottom: 0.75rem; background: var(--text-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.footer-desc { color: var(--text-sec); font-size: 0.95rem; margin-bottom: 1.5rem; max-width: 320px; }

.cc-badge { opacity: 0.8; transition: var(--transition-smooth); }

.cc-badge:hover { opacity: 1; }

.footer-heading { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; color: var(--text-main); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.25rem; }

.footer-links-list { list-style: none; }

.footer-links-list li { margin-bottom: 0.75rem; }

.footer-links-list a { color: var(--text-sec); font-size: 0.95rem; }

.footer-links-list a:hover { color: var(--text-main); padding-left: 4px; }

.footer-social-links { display: flex; gap: 1rem; }

.social-link { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-color); color: var(--text-sec); background: rgba(255, 255, 255, 0.02); font-size: 1.1rem; transition: var(--transition-smooth); }

.social-link:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05); }

.social-link.github:hover { background: #24292e; border-color: #24292e; }

.social-link.twitter:hover { background: #000; border-color: #333; }

.social-link.linkedin:hover { background: #0077b5; border-color: #0077b5; }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 1.5rem; font-size: 0.85rem; color: var(--text-muted); }

@media (max-width: 576px) { .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; } }

.footer-bottom a { color: var(--text-sec); }

.footer-bottom a:hover { color: var(--text-main); }

/* ========================================================================== MOBILE RESPONSIVENESS OVERLAY ========================================================================== */
@media (max-width: 768px) { .site-nav { /* Hamburger Line Animations */ } .site-nav .nav-trigger-label { display: flex; } .site-nav .trigger { position: fixed; top: 80px; left: 0; width: 100%; height: 0; background: rgba(6, 6, 12, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; overflow: hidden; transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-bottom: 0 solid var(--border-color); } .site-nav .page-link { font-size: 1.5rem; } .site-nav .nav-trigger:checked ~ .trigger { height: calc(100vh - 80px); border-bottom-width: 1px; } .site-nav .nav-trigger:checked ~ .nav-trigger-label .line-1 { transform: translateY(7px) rotate(45deg); } .site-nav .nav-trigger:checked ~ .nav-trigger-label .line-2 { opacity: 0; } .site-nav .nav-trigger:checked ~ .nav-trigger-label .line-3 { transform: translateY(-7px) rotate(-45deg); } }

/* ========================================================================== SYNTAX HIGHLIGHTING (ROUGE / MONOKAI TECH ACCENTS) ========================================================================== */
.highlight { color: #f8f8f2; /* Comment */ /* Error */ /* Keyword */ /* Literal */ /* Name */ /* Operator */ /* Punctuation */ /* Comment.Multiline */ /* Comment.Preproc */ /* Comment.Single */ /* Comment.Special */ /* Generic.Deleted */ /* Generic.Emph */ /* Generic.Inserted */ /* Generic.Strong */ /* Generic.Subheading */ /* Keyword.Constant */ /* Keyword.Declaration */ /* Keyword.Namespace */ /* Keyword.Pseudo */ /* Keyword.Reserved */ /* Keyword.Type */ /* Literal.Date */ /* Literal.Number */ /* Literal.String */ /* Name.Attribute */ /* Name.Builtin */ /* Name.Class */ /* Name.Constant */ /* Name.Decorator */ /* Name.Entity */ /* Name.Exception */ /* Name.Function */ /* Name.Label */ /* Name.Namespace */ /* Name.Other */ /* Name.Property */ /* Name.Tag */ /* Name.Variable */ /* Operator.Word */ /* Text.Whitespace */ /* Literal.Number.Float */ /* Literal.Number.Hex */ /* Literal.Number.Integer */ /* Literal.Number.Oct */ /* Literal.String.Backtick */ /* Literal.String.Char */ /* Literal.String.Doc */ /* Literal.String.Double */ /* Literal.String.Escape */ /* Literal.String.Heredoc */ /* Literal.String.Interpol */ /* Literal.String.Other */ /* Literal.String.Regex */ /* Literal.String.Single */ /* Literal.String.Symbol */ /* Name.Builtin.Pseudo */ /* Name.Variable.Instance */ /* Literal.Number.Integer.Long */ }

.highlight .c { color: #75715e; font-style: italic; }

.highlight .err { color: #960050; background-color: #1e0010; }

.highlight .k { color: #66d9ef; font-weight: bold; }

.highlight .l { color: #ae81ff; }

.highlight .n { color: #f8f8f2; }

.highlight .o { color: #f92672; font-weight: bold; }

.highlight .p { color: #f8f8f2; }

.highlight .cm { color: #75715e; font-style: italic; }

.highlight .cp { color: #75715e; font-weight: bold; }

.highlight .c1 { color: #75715e; font-style: italic; }

.highlight .cs { color: #75715e; font-style: italic; font-weight: bold; }

.highlight .gd { color: #f92672; }

.highlight .ge { font-style: italic; }

.highlight .gi { color: #a6e22e; }

.highlight .gs { font-weight: bold; }

.highlight .gu { color: #75715e; }

.highlight .kc { color: #66d9ef; font-weight: bold; }

.highlight .kd { color: #66d9ef; font-style: italic; }

.highlight .kn { color: #f92672; font-weight: bold; }

.highlight .kp { color: #66d9ef; }

.highlight .kr { color: #66d9ef; font-weight: bold; }

.highlight .kt { color: #66d9ef; font-weight: bold; }

.highlight .ld { color: #e6db74; }

.highlight .m { color: #ae81ff; }

.highlight .s { color: #e6db74; }

.highlight .na { color: #a6e22e; }

.highlight .nb { color: #f8f8f2; }

.highlight .nc { color: #a6e22e; font-weight: bold; }

.highlight .no { color: #66d9ef; }

.highlight .nd { color: #a6e22e; font-weight: bold; }

.highlight .ni { color: #f8f8f2; }

.highlight .ne { color: #a6e22e; font-weight: bold; }

.highlight .nf { color: #a6e22e; }

.highlight .nl { color: #f8f8f2; }

.highlight .nn { color: #f8f8f2; }

.highlight .nx { color: #a6e22e; }

.highlight .py { color: #f8f8f2; }

.highlight .nt { color: #f92672; font-weight: bold; }

.highlight .nv { color: #f8f8f2; }

.highlight .ow { color: #f92672; font-weight: bold; }

.highlight .w { color: #f8f8f2; }

.highlight .mf { color: #ae81ff; }

.highlight .mh { color: #ae81ff; }

.highlight .mi { color: #ae81ff; }

.highlight .mo { color: #ae81ff; }

.highlight .sb { color: #e6db74; }

.highlight .sc { color: #e6db74; }

.highlight .sd { color: #75715e; }

.highlight .s2 { color: #e6db74; }

.highlight .se { color: #ae81ff; }

.highlight .sh { color: #e6db74; }

.highlight .si { color: #e6db74; }

.highlight .sx { color: #e6db74; }

.highlight .sr { color: #e6db74; }

.highlight .s1 { color: #e6db74; }

.highlight .ss { color: #e6db74; }

.highlight .bp { color: #f8f8f2; }

.highlight .vi { color: #f8f8f2; }

.highlight .il { color: #ae81ff; }

/* ========================================================================== LOAD MORE & FADE INUP ANIMATION ========================================================================== */
.load-more-container { text-align: center; margin: 3.5rem 0 1rem 0; }

@keyframes fadeInUp { from { opacity: 0;
    transform: translateY(20px); }
  to { opacity: 1;
    transform: translateY(0); } }

.post-card.fade-in-up { animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/*# sourceMappingURL=main.css.map */