:root {
--bg:      #07070e;
--bg2:     #0b0b16;
--surface: #0f0f1c;
--card:    #121221;
--border:  rgba(255,255,255,0.06);
--border2: rgba(255,255,255,0.11);
--text:    #eeeef8;
--text2:   #9494b8;
--text3:   #4a4a6a;
--accent:  #6c63ff;
--mono:    'JetBrains Mono', monospace;
--post-accent: #6c63ff;
} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
background: var(--bg); color: var(--text);
font-family: 'Plus Jakarta Sans', sans-serif;
line-height: 1.6; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; } body::before {
content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
opacity: 0.45;
} .blob { position: fixed; border-radius: 50%; filter: blur(130px); pointer-events: none; z-index: 0; animation: blobdrift 16s ease-in-out infinite alternate; }
.blob-1 { width: 700px; height: 700px; top: -250px; left: -150px; background: #6c63ff; opacity: 0.06; }
.blob-2 { width: 500px; height: 500px; top: 40%; right: -180px; background: #00d4ff; opacity: 0.045; animation-delay: -6s; }
.blob-3 { width: 400px; height: 400px; bottom: 5%; left: 20%; background: #ff4d8d; opacity: 0.03; animation-delay: -11s; }
@keyframes blobdrift { from { transform: translate(0,0) scale(1); } to { transform: translate(25px,20px) scale(1.06); } } .site-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 500;
height: 62px; display: flex; align-items: center; justify-content: space-between;
padding: 0 40px;
background: rgba(7,7,14,0.75); backdrop-filter: blur(28px) saturate(180%);
border-bottom: 1px solid var(--border); transition: box-shadow 0.2s;
}
.site-nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
.nav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); }
.nav-avatar { width: 33px; height: 33px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(108,99,255,0.5); box-shadow: 0 0 12px rgba(108,99,255,0.25); }
.nav-name { font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; }
.nav-online { font-family: var(--mono); font-size: 0.6rem; color: #00ffb3; background: rgba(0,255,179,0.07); border: 1px solid rgba(0,255,179,0.18); padding: 2px 8px; border-radius: 4px; display: flex; align-items: center; gap: 5px; }
.nav-online::before { content: '●'; font-size: 0.5rem; animation: ping 2s ease infinite; }
@keyframes ping { 0%,100%{opacity:1} 50%{opacity:0.4} }
.nav-links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links li a { color: var(--text2); font-size: 0.82rem; font-weight: 500; padding: 6px 13px; border-radius: 7px; transition: all 0.15s; display: block; }
.nav-links li a:hover, .nav-links li.current-menu-item a { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-links li.current-menu-item a { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-cta { display: flex; align-items: center; gap: 7px; background: var(--accent); color: #fff; border: none; padding: 7px 17px; border-radius: 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 0 20px rgba(108,99,255,0.28); }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 28px rgba(108,99,255,0.45); } .search-form { display: flex; align-items: center; gap: 0; }
.search-field { background: rgba(255,255,255,0.05); border: 1px solid var(--border2); color: var(--text); padding: 6px 14px; border-radius: 8px 0 0 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; outline: none; width: 180px; transition: border-color 0.2s; }
.search-field:focus { border-color: var(--accent); }
.search-submit { background: var(--surface); border: 1px solid var(--border2); border-left: none; color: var(--text2); padding: 6px 12px; border-radius: 0 8px 8px 0; cursor: pointer; transition: all 0.15s; }
.search-submit:hover { background: var(--card); color: var(--text); } .hero {
min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
align-items: center; gap: 56px;
padding: 80px 40px 40px; max-width: 1200px; margin: 0 auto;
position: relative; z-index: 1;
}
.hero-left { display: flex; flex-direction: column; }
.hero-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.72rem; color: #00d4ff; background: rgba(0,212,255,0.06); border: 1px solid rgba(0,212,255,0.14); padding: 6px 16px; border-radius: 50px; margin-bottom: 28px; width: fit-content; }
.pill-dot { width: 6px; height: 6px; background: #00ffb3; border-radius: 50%; animation: pd 2s ease infinite; }
@keyframes pd { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }
.hero-title { font-size: clamp(1.9rem, 3.2vw, 2.85rem); font-weight: 800; line-height: 1.13; letter-spacing: -0.035em; margin-bottom: 18px; }
.hero-title .grad { background: linear-gradient(125deg, var(--accent) 0%, #00d4ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { color: var(--text2); font-size: 0.98rem; line-height: 1.75; max-width: 430px; margin-bottom: 32px; }
.hero-btns { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 44px; }
.btn-primary { background: var(--accent); color: #fff; padding: 12px 26px; border-radius: 10px; font-weight: 700; font-size: 0.88rem; transition: all 0.2s; box-shadow: 0 0 24px rgba(108,99,255,0.28); display: inline-flex; align-items: center; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 36px rgba(108,99,255,0.45); }
.btn-ghost { color: var(--text2); padding: 12px 26px; border-radius: 10px; font-size: 0.88rem; font-weight: 500; border: 1px solid var(--border2); transition: all 0.2s; display: inline-flex; align-items: center; }
.btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.22); }
.hero-stats { display: flex; gap: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
.hstat { display: flex; flex-direction: column; gap: 2px; }
.hstat-n { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; }
.hstat-l { font-size: 0.7rem; color: var(--text3); letter-spacing: 0.04em; text-transform: uppercase; }
.hero-right { display: flex; flex-direction: column; gap: 10px; } .hero-post { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; transition: all 0.22s; position: relative; overflow: hidden; --post-accent: #6c63ff; }
.hero-post::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--post-accent); opacity: 0; transition: opacity 0.22s; }
.hero-post:hover { transform: translateX(5px); border-color: color-mix(in srgb, var(--post-accent) 35%, transparent); }
.hero-post:hover::before { opacity: 1; }
.hero-post-thumb, .hero-post-thumb img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.hero-post-thumb-ph { width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.hero-post-info { flex: 1; min-width: 0; }
.hero-post-title { font-size: 0.86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.hero-post-meta { font-size: 0.7rem; color: var(--text3); }
.hero-post-badge { font-family: var(--mono); font-size: 0.6rem; padding: 3px 9px; border-radius: 5px; font-weight: 600; flex-shrink: 0; background: color-mix(in srgb, var(--post-accent) 12%, transparent); color: var(--post-accent); border: 1px solid color-mix(in srgb, var(--post-accent) 25%, transparent); } .page-wrap { max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: 1fr 300px; gap: 32px; padding: 48px 40px 0; align-items: start; position: relative; z-index: 1; }
.page-main { min-width: 0; }
.page-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 20px; }
.section { max-width: 1200px; margin: 0 auto; padding: 64px 40px; position: relative; z-index: 1; }
.section.with-sidebar { max-width: none; padding: 0 0 48px; }
.section-divider { max-width: 1200px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; }
.section-divider hr { border: none; border-top: 1px solid var(--border); }
.sec-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.sec-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.sec-title::before { content: ''; width: 4px; height: 16px; background: var(--accent); border-radius: 3px; box-shadow: 0 0 10px rgba(108,99,255,0.5); }
.sec-link { font-size: 0.8rem; color: var(--accent); font-weight: 600; }
.sec-count { font-family: var(--mono); font-size: 0.65rem; color: var(--text3); } .cats { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 28px; }
.cat { padding: 7px 16px; border-radius: 50px; border: 1px solid var(--border); font-size: 0.8rem; font-weight: 600; color: var(--text2); cursor: pointer; background: transparent; font-family: 'Plus Jakarta Sans', sans-serif; transition: all 0.15s; }
.cat:hover { border-color: var(--border2); color: var(--text); }
.cat.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 16px rgba(108,99,255,0.3); } .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .post-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: all 0.28s; position: relative; --post-accent: #6c63ff; }
.post-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--post-accent); opacity: 0; transition: opacity 0.28s; z-index: 2; }
.post-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--post-accent) 35%, transparent); box-shadow: 0 14px 44px rgba(0,0,0,0.35), 0 0 0 1px color-mix(in srgb, var(--post-accent) 18%, transparent); }
.post-card:hover::before { opacity: 1; }
.card-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--surface); flex-shrink: 0; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s, filter 0.3s; filter: brightness(0.88) saturate(0.9); }
.post-card:hover .card-thumb img { transform: scale(1.05); filter: brightness(1) saturate(1.05); }
.card-thumb-ph { width: 100%; height: 100%; background: linear-gradient(135deg, color-mix(in srgb, var(--post-accent) 12%, #0f0f1c), #0f0f1c); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; }
.card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: color-mix(in srgb, var(--post-accent) 11%, transparent); color: var(--post-accent); border: 1px solid color-mix(in srgb, var(--post-accent) 24%, transparent); }
.card-title { font-size: 0.92rem; font-weight: 700; line-height: 1.38; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-excerpt { font-size: 0.78rem; color: var(--text2); line-height: 1.65; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; border-top: 1px solid var(--border); font-size: 0.7rem; color: var(--text3); transition: border-color 0.28s; }
.post-card:hover .card-footer { border-color: color-mix(in srgb, var(--post-accent) 18%, transparent); }
.card-read { color: var(--post-accent); font-weight: 700; font-size: 0.72rem; display: flex; align-items: center; gap: 4px; transition: gap 0.2s; }
.post-card:hover .card-read { gap: 8px; }
.card-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--post-accent); box-shadow: 0 0 6px var(--post-accent); } .post-card.big { grid-column: span 2; min-height: 340px; }
.post-card.big .card-thumb { position: absolute; inset: 0; aspect-ratio: unset; height: 100%; }
.post-card.big .card-thumb img { filter: brightness(0.5) saturate(0.85); }
.post-card.big:hover .card-thumb img { transform: scale(1.04); filter: brightness(0.6) saturate(1); }
.post-card.big .card-thumb-ph { font-size: 5rem; background: linear-gradient(160deg, color-mix(in srgb, var(--post-accent) 22%, #080814), #080814); }
.card-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(5,5,14,0.05) 0%, rgba(5,5,14,0.4) 35%, rgba(5,5,14,0.88) 70%, rgba(5,5,14,0.97) 100%); }
.card-glow { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); width: 70%; height: 140px; background: var(--post-accent); border-radius: 50%; filter: blur(70px); opacity: 0; z-index: 1; transition: opacity 0.3s; }
.post-card.big:hover .card-glow { opacity: 0.14; }
.post-card.big .card-body { position: relative; z-index: 2; justify-content: flex-end; min-height: 340px; padding: 28px; gap: 12px; }
.post-card.big .card-badge { background: color-mix(in srgb, var(--post-accent) 18%, rgba(0,0,0,0.5)); backdrop-filter: blur(8px); }
.post-card.big .card-title { font-size: 1.4rem; -webkit-line-clamp: 2; letter-spacing: -0.025em; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.7); }
.post-card.big .card-excerpt { font-size: 0.85rem; color: rgba(200,200,220,0.65); -webkit-line-clamp: 2; }
.post-card.big .card-footer { border-top-color: rgba(255,255,255,0.08); color: rgba(180,180,210,0.45); } .recent-list { display: flex; flex-direction: column; }
.recent-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 11px; transition: background 0.15s; --post-accent: #6c63ff; }
.recent-item:hover { background: rgba(255,255,255,0.03); }
.recent-num { font-family: var(--mono); font-size: 0.65rem; color: var(--text3); min-width: 22px; }
.recent-thumb, .recent-thumb img { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.recent-thumb-ph { width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.recent-info { flex: 1; min-width: 0; }
.recent-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-meta { font-size: 0.68rem; color: var(--text3); }
.recent-badge { font-family: var(--mono); font-size: 0.58rem; padding: 3px 9px; border-radius: 5px; font-weight: 600; white-space: nowrap; flex-shrink: 0; background: color-mix(in srgb, var(--post-accent) 10%, transparent); color: var(--post-accent); border: 1px solid color-mix(in srgb, var(--post-accent) 22%, transparent); } .banner-ad-wrap { max-width: 1340px; margin: 0 auto; padding: 28px 40px 0; position: relative; z-index: 1; display: flex; justify-content: center; }
.ad-unit { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.ad-label { font-family: var(--mono); font-size: 0.55rem; color: var(--text3); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding: 6px; border-bottom: 1px solid var(--border); background: var(--surface); }
.ad-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 260px; background: linear-gradient(160deg, rgba(108,99,255,0.03), transparent); padding: 20px; }
.ad-ph-label { font-family: var(--mono); font-size: 0.55rem; color: var(--text3); letter-spacing: 0.1em; text-transform: uppercase; }
.ad-ph-size   { font-family: var(--mono); font-size: 0.65rem; color: var(--text3); background: var(--surface); border: 1px solid var(--border); padding: 3px 10px; border-radius: 4px; }
.ad-inline { width: 100%; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-height: 90px; margin: 36px 0; }
.ad-infeed { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; min-height: 200px; align-items: center; justify-content: center; } .nl-wrap { max-width: 1200px; margin: 0 auto; padding: 48px 40px 80px; position: relative; z-index: 1; }
.nl-box { background: linear-gradient(135deg, rgba(108,99,255,0.07), rgba(0,212,255,0.03)); border: 1px solid rgba(108,99,255,0.18); border-radius: 20px; padding: 44px 48px; display: flex; align-items: center; justify-content: space-between; gap: 40px; position: relative; overflow: hidden; }
.nl-box::before { content: ''; position: absolute; top: -120px; right: -120px; width: 380px; height: 380px; background: var(--accent); border-radius: 50%; filter: blur(130px); opacity: 0.06; pointer-events: none; }
.nl-left h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 5px; }
.nl-left p { color: var(--text2); font-size: 0.88rem; }
.nl-form-simple { display: flex; gap: 9px; flex-shrink: 0; }
.nl-input { background: rgba(255,255,255,0.05); border: 1px solid var(--border2); color: var(--text); padding: 11px 18px; border-radius: 10px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.85rem; width: 230px; outline: none; transition: border-color 0.2s; }
.nl-input:focus { border-color: var(--accent); }
.nl-input::placeholder { color: var(--text3); }
.nl-modal { position: fixed; inset: 0; z-index: 999; background: rgba(4,4,12,0.9); backdrop-filter: blur(16px); display: none; align-items: center; justify-content: center; padding: 40px; }
.nl-modal.open { display: flex; }
.nl-modal-inner { background: var(--surface); border: 1px solid var(--border2); border-radius: 20px; padding: 40px; max-width: 440px; width: 100%; position: relative; text-align: center; }
.nl-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text2); font-size: 1rem; cursor: pointer; }
.nl-modal-inner h3 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 8px; }
.nl-modal-inner p { color: var(--text2); margin-bottom: 24px; } .about-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.about-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(108,99,255,0.4); }
.about-name { font-weight: 700; font-size: 0.9rem; }
.about-bio { font-size: 0.75rem; color: var(--text2); line-height: 1.5; }
.about-yt { background: var(--accent); color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 0.78rem; font-weight: 700; width: 100%; text-align: center; display: block; transition: all 0.2s; box-shadow: 0 0 14px rgba(108,99,255,0.25); }
.about-yt:hover { transform: translateY(-1px); box-shadow: 0 4px 22px rgba(108,99,255,0.4); } .read-progress { position: fixed; top: 62px; left: 0; right: 0; height: 3px; z-index: 400; background: var(--border); }
.read-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--post-accent), #00d4ff); transition: width 0.1s linear; }
.single-wrap { max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding: 100px 40px 60px; align-items: start; position: relative; z-index: 1; }
.single-article { min-width: 0; }
.single-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 18px; }
.article-hero { width: 100%; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; margin-bottom: 40px; border: 1px solid var(--border); position: relative; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9); display: block; }
.article-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--post-accent), #00d4ff); }
.article-header { margin-bottom: 32px; }
.article-meta-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.article-badge { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 6px; font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: color-mix(in srgb, var(--post-accent) 12%, transparent); color: var(--post-accent); border: 1px solid color-mix(in srgb, var(--post-accent) 28%, transparent); }
.article-reading-time, .article-date { font-size: 0.72rem; color: var(--text3); }
.article-title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.035em; margin-bottom: 16px; }
.article-subtitle { font-size: 1.05rem; color: var(--text2); line-height: 1.7; border-left: 3px solid var(--post-accent); padding-left: 16px; margin-bottom: 24px; }
.author-row { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 36px; }
.author-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(108,99,255,0.35); flex-shrink: 0; }
.author-info { flex: 1; }
.author-name { font-size: 0.88rem; font-weight: 700; }
.author-bio { font-size: 0.72rem; color: var(--text2); }
.author-share { display: flex; gap: 8px; }
.share-btn { width: 34px; height: 34px; border-radius: 8px; background: var(--card); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; cursor: pointer; transition: all 0.15s; color: var(--text2); }
.share-btn:hover { border-color: var(--post-accent); background: color-mix(in srgb, var(--post-accent) 10%, transparent); } .article-content { font-family: 'Lora', Georgia, serif; font-size: 1.05rem; line-height: 1.85; color: #d8d8ee; }
.article-content p { margin-bottom: 24px; }
.article-content h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.025em; color: var(--text); margin: 40px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.article-content h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--text); margin: 28px 0 12px; }
.article-content strong { color: var(--text); font-weight: 700; }
.article-content a { color: var(--post-accent); border-bottom: 1px solid color-mix(in srgb, var(--post-accent) 35%, transparent); transition: border-color 0.15s; }
.article-content a:hover { border-color: var(--post-accent); }
.article-content ul, .article-content ol { padding-left: 24px; margin-bottom: 24px; }
.article-content li { margin-bottom: 8px; }
.article-content img { border-radius: 12px; margin: 24px 0; border: 1px solid var(--border); } .toc { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.toc-title { font-size: 0.72rem; font-weight: 700; color: var(--text2); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.toc-title::before { content: ''; width: 3px; height: 14px; background: var(--post-accent); border-radius: 2px; }
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.toc-item a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 0.8rem; color: var(--text2); transition: all 0.15s; border-left: 2px solid transparent; }
.toc-item.active a, .toc-item a:hover { color: var(--text); background: rgba(255,255,255,0.04); border-left-color: var(--post-accent); padding-left: 14px; }
.toc-item.toc-sub a { padding-left: 20px; font-size: 0.75rem; }
.toc-item.toc-sub.active a { padding-left: 24px; } .callout { background: color-mix(in srgb, var(--accent) 07%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-left: 3px solid var(--accent); border-radius: 12px; padding: 20px 24px; margin: 28px 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.92rem; line-height: 1.65; }
.callout-title { font-weight: 700; color: var(--accent); margin-bottom: 6px; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--mono); } .table-wrap { overflow-x: auto; margin: 28px 0; }
.compare-table { width: 100%; border-collapse: collapse; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.88rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.compare-table th { background: var(--surface); padding: 14px 18px; font-weight: 700; text-align: left; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text2); border-bottom: 1px solid var(--border2); }
.compare-table td { padding: 13px 18px; border-bottom: 1px solid var(--border); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:hover td { background: rgba(255,255,255,0.02); } .article-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 40px 0 32px; }
.tag { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border2); font-size: 0.75rem; font-weight: 500; color: var(--text2); transition: all 0.15s; }
.tag:hover { color: var(--text); border-color: var(--post-accent); background: color-mix(in srgb, var(--post-accent) 08%, transparent); } .related { margin-top: 48px; }
.related-title { font-size: 1rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.related-title::before { content: ''; width: 4px; height: 16px; background: var(--post-accent); border-radius: 3px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.related-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; transition: all 0.2s; --post-accent: #6c63ff; }
.related-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--post-accent) 35%, transparent); }
.related-thumb, .related-thumb img { width: 100px; height: 80px; flex-shrink: 0; object-fit: cover; filter: brightness(0.85); }
.related-thumb-ph { width: 100px; height: 80px; flex-shrink: 0; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.related-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.related-badge { font-family: var(--mono); font-size: 0.55rem; color: var(--post-accent); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.related-title-text { font-size: 0.8rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pagination { display: flex; gap: 6px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.pagination .page-numbers { padding: 8px 16px; border-radius: 9px; border: 1px solid var(--border); color: var(--text2); font-size: 0.85rem; font-weight: 600; transition: all 0.15s; }
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--text); }
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; } .breadcrumbs { font-size: 0.75rem; color: var(--text3); margin-bottom: 28px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumbs a { color: var(--text2); transition: color 0.15s; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { color: var(--text3); } .portfolio-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 120px; padding-bottom: 60px; }
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pcard { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: all 0.28s; position: relative; --pa: #6c63ff; }
.pcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pa); opacity: 0; transition: opacity 0.28s; z-index: 2; }
.pcard:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--pa) 38%, transparent); box-shadow: 0 14px 44px rgba(0,0,0,0.35); }
.pcard:hover::before { opacity: 1; }
.p-thumb { aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.4s; background: linear-gradient(160deg, color-mix(in srgb, var(--pa) 15%, #0f0f1c), #0a0a16); }
.p-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pcard:hover .p-thumb { transform: scale(1.04); }
.p-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.p-top { display: flex; align-items: center; justify-content: space-between; }
.p-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: color-mix(in srgb, var(--pa) 11%, transparent); color: var(--pa); border: 1px solid color-mix(in srgb, var(--pa) 24%, transparent); }
.p-year { font-family: var(--mono); font-size: 0.62rem; color: var(--text3); }
.p-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pa); box-shadow: 0 0 6px var(--pa); }
.p-title { font-size: 0.94rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.p-desc { font-size: 0.78rem; color: var(--text2); line-height: 1.65; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-tools { display: flex; gap: 5px; flex-wrap: wrap; }
.p-tool { font-family: var(--mono); font-size: 0.58rem; padding: 3px 8px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border2); color: var(--text3); }
.p-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border); transition: border-color 0.28s; }
.pcard:hover .p-foot { border-color: color-mix(in srgb, var(--pa) 18%, transparent); }
.p-read { color: var(--pa); font-weight: 700; font-size: 0.72rem; display: flex; align-items: center; gap: 4px; transition: gap 0.2s; }
.pcard:hover .p-read { gap: 8px; } .contact-strip { display: none; align-items: center; gap: 9px; flex-wrap: wrap; padding: 18px 22px; background: var(--surface); border: 1px solid var(--border2); border-radius: 14px; margin-bottom: 20px; }
.contact-strip.active { display: flex; }
.contact-label { font-size: 0.72rem; font-weight: 700; color: var(--text2); margin-right: 4px; flex-shrink: 0; }
.cbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 9px; border: 1px solid var(--border2); font-size: 0.8rem; font-weight: 600; color: var(--text2); transition: all 0.18s; background: var(--card); white-space: nowrap; }
.cbtn:hover { transform: translateY(-2px); }
.cbtn.tg:hover { color:#2aabee;border-color:#2aabee;background:rgba(42,171,238,0.08); }
.cbtn.wa:hover { color:#25d366;border-color:#25d366;background:rgba(37,211,102,0.08); }
.cbtn.ig:hover { color:#e1306c;border-color:#e1306c;background:rgba(225,48,108,0.08); }
.cbtn.tt:hover { color:#ff0050;border-color:#ff0050;background:rgba(255,0,80,0.08); }
.cbtn.yt:hover { color:#ff4444;border-color:#ff4444;background:rgba(255,68,68,0.08); }
.cbtn.gm:hover { color:#ea4335;border-color:#ea4335;background:rgba(234,67,53,0.08); }
.toggle-btn { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--border2); color: var(--text3); font-size: 0.8rem; font-weight: 600; padding: 9px 18px; border-radius: 9px; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; transition: all 0.18s; margin-bottom: 8px; }
.toggle-btn:hover { border-color: var(--accent); color: var(--accent); } .error-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 100px 40px 60px; position: relative; z-index: 1; }
.error-inner { text-align: center; max-width: 600px; }
.error-code { font-size: 8rem; font-weight: 800; letter-spacing: -0.05em; background: linear-gradient(125deg, var(--accent), #00d4ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 16px; }
.error-title { font-size: 2rem; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.025em; }
.error-sub { color: var(--text2); margin-bottom: 32px; }
.error-btns { margin-bottom: 32px; }
.error-search { margin-bottom: 40px; }
.error-recent { text-align: left; } .archive-wrap { position: relative; z-index: 1; }
.archive-hero { max-width: 1200px; margin: 0 auto; padding: 120px 40px 56px; }
.archive-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.035em; margin-bottom: 12px; }
.archive-desc { color: var(--text2); max-width: 500px; margin-bottom: 20px; }
.archive-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--text3); } .site-footer { border-top: 1px solid var(--border); position: relative; z-index: 1; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 32px 40px; display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--text3); }
.footer-brand { font-weight: 700; font-size: 0.9rem; color: var(--text); display: flex; align-items: center; gap: 9px; }
.footer-brand img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.footer-links { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; }
.footer-links li a, .footer-links a { color: var(--text3); transition: color 0.15s; }
.footer-links li a:hover, .footer-links a:hover { color: var(--text); }   .anim { opacity: 0; transform: translateY(18px); animation: fadeup 0.5s ease forwards; }
@keyframes fadeup { to { opacity:1; transform:none; } }
.anim:nth-child(1){animation-delay:.06s} .anim:nth-child(2){animation-delay:.12s}
.anim:nth-child(3){animation-delay:.18s} .anim:nth-child(4){animation-delay:.24s}
.anim:nth-child(5){animation-delay:.30s} .comments-wrap { margin-top: 56px; border-top: 1px solid var(--border); padding-top: 48px; }
.comments-section { display: flex; flex-direction: column; gap: 32px; }
.comments-title { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comments-title::before { content: ''; width: 4px; height: 16px; background: var(--post-accent, var(--accent)); border-radius: 3px; box-shadow: 0 0 10px rgba(108,99,255,0.4); } .comments-list { list-style: none; display: flex; flex-direction: column; gap: 16px; padding: 0; }
.comment-item { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.comment-item.depth-2 { margin-left: 32px; }
.comment-item.depth-3 { margin-left: 56px; }
.comment-body { padding: 20px 22px; }
.comment-author-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.comment-avatar-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border2); flex-shrink: 0; }
.comment-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.comment-author-name { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.comment-date { font-size: 0.68rem; color: var(--text3); }
.comment-actions { display: flex; gap: 10px; align-items: center; }
.comment-reply a, .comment-edit { font-size: 0.72rem; color: var(--accent); font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
.comment-reply a:hover, .comment-edit:hover { opacity: 0.75; }
.comment-text { font-size: 0.88rem; line-height: 1.75; color: var(--text2); }
.comment-text p { margin-bottom: 10px; }
.comment-text p:last-child { margin-bottom: 0; }
.comment-pending { font-size: 0.75rem; color: #f0a500; background: rgba(240,165,0,0.08); border: 1px solid rgba(240,165,0,0.18); border-radius: 7px; padding: 7px 12px; margin-bottom: 12px; }
.comments-closed { font-size: 0.82rem; color: var(--text3); text-align: center; padding: 16px; background: var(--surface); border-radius: 10px; border: 1px solid var(--border); } .comment-form { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.comment-form h3, .comment-form #reply-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.comment-form #reply-title::before { content: ''; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; }
.comment-form #cancel-comment-reply-link { font-size: 0.72rem; color: var(--text3); margin-left: 12px; }
.cf-row { display: flex; flex-direction: column; gap: 7px; }
.cf-row label { font-size: 0.75rem; font-weight: 600; color: var(--text2); }
.cf-row label span { color: var(--accent); }
.cf-row input, .cf-row textarea {
background: var(--card); border: 1px solid var(--border2); color: var(--text);
padding: 11px 15px; border-radius: 10px; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.85rem; outline: none; transition: border-color 0.2s; width: 100%;
}
.cf-row input:focus, .cf-row textarea:focus { border-color: var(--accent); }
.cf-row textarea { resize: vertical; min-height: 120px; line-height: 1.65; }
.cf-row input::placeholder, .cf-row textarea::placeholder { color: var(--text3); }
.cf-half { width: 100%; }
.cf-check { flex-direction: row; align-items: center; }
.cf-check label { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 0.78rem; font-weight: 400; color: var(--text2); }
.cf-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.comment-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.comment-submit { margin-top: 4px; border: none; cursor: pointer; align-self: flex-start; }  @media (max-width: 1024px) {
.site-nav { padding: 0 24px; }
.nav-links { display: none; }
.search-field { width: 140px; }
.hero {
grid-template-columns: 1fr 1fr;
gap: 32px;
padding: 90px 32px 40px;
}
.hero-title { font-size: 1.9rem; }
.page-wrap  { padding: 32px 24px 0; grid-template-columns: 1fr; }
.page-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.posts-grid { grid-template-columns: 1fr 1fr; }
.post-card.big { grid-column: span 2; }
.single-wrap { grid-template-columns: 1fr; padding: 90px 24px 48px; }
.single-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.section { padding: 48px 24px; }
.nl-wrap { padding: 32px 24px 48px; }
.nl-box  { flex-direction: column; gap: 24px; padding: 32px; }
.projects-grid { grid-template-columns: 1fr 1fr; }
.related-grid  { grid-template-columns: 1fr 1fr; }
} @media (max-width: 768px) { .site-nav { padding: 0 18px; height: 56px; }
.nav-links { display: none; }
.nav-right .search-form { display: none; }
.nav-cta { padding: 6px 14px; font-size: 0.78rem; }
.nav-online { display: none; } .hero {
grid-template-columns: 1fr;
min-height: auto;
padding: 80px 20px 40px;
gap: 28px;
}
.hero-pill { font-size: 0.62rem; }
.hero-title { font-size: 1.75rem; }
.hero-sub { font-size: 0.85rem; max-width: 100%; }
.hero-btns { flex-wrap: wrap; }
.btn-primary, .btn-ghost { padding: 10px 18px; font-size: 0.82rem; width: 100%; text-align: center; justify-content: center; }
.hero-stats { gap: 20px; }
.hstat-n { font-size: 1.2rem; }
.hero-right { display: none; }  .page-wrap {
padding: 24px 16px 0;
grid-template-columns: 1fr;
gap: 0;
} .page-sidebar {
position: static;
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 32px;
padding: 0 16px 32px;
} .posts-grid { grid-template-columns: 1fr; gap: 12px; }
.post-card.big { grid-column: span 1; min-height: 260px; }
.post-card.big .card-body { min-height: 260px; padding: 20px; }
.post-card.big .card-title { font-size: 1.1rem; } .cats { gap: 6px; }
.cat { padding: 6px 12px; font-size: 0.75rem; } .section { padding: 32px 16px; }
.section-divider { padding: 0 16px; }
.sec-hdr { flex-wrap: wrap; gap: 8px; } .banner-ad-wrap { padding: 16px 16px 0; } .single-wrap {
grid-template-columns: 1fr;
padding: 72px 16px 40px;
gap: 0;
}
.single-sidebar {
position: static;
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 32px;
}
.article-title { font-size: 1.5rem; }
.article-hero { border-radius: 12px; margin-bottom: 28px; }
.article-content { font-size: 0.95rem; }
.article-content h2 { font-size: 1.15rem; }
.author-row { flex-wrap: wrap; gap: 10px; }
.author-share { width: 100%; justify-content: flex-start; }
.related-grid { grid-template-columns: 1fr; }
.toc { display: none; }  .archive-hero { padding: 90px 20px 36px; }
.archive-title { font-size: 1.6rem; } .portfolio-hero { padding: 90px 20px 40px; }
.projects-grid { grid-template-columns: 1fr; }
.contact-strip { gap: 7px; }
.cbtn { padding: 7px 12px; font-size: 0.75rem; } .nl-wrap { padding: 24px 16px 40px; }
.nl-box { padding: 24px 20px; flex-direction: column; gap: 20px; border-radius: 14px; }
.nl-left h2 { font-size: 1.2rem; }
.nl-form-simple { flex-direction: column; width: 100%; }
.nl-input { width: 100%; }
.nl-form-simple .btn-primary { width: 100%; justify-content: center; } .footer-inner { flex-direction: column; gap: 16px; text-align: center; padding: 24px 20px; }
.footer-links { flex-wrap: wrap; justify-content: center; gap: 14px; } .error-wrap { padding: 80px 20px 40px; }
.error-code { font-size: 5rem; }
.error-title { font-size: 1.5rem; } .pagination { gap: 4px; }
.pagination .page-numbers { padding: 7px 12px; font-size: 0.8rem; } .comment-form-author,
.comment-form-email {
display: block !important;
width: 100% !important;
margin-right: 0 !important;
}
#alexis-cf { padding: 20px !important; }
} @media (max-width: 480px) {
.hero-title { font-size: 1.55rem; }
.hero-stats { gap: 16px; }
.hstat-n { font-size: 1.1rem; }
.post-card.big { min-height: 220px; }
.article-title { font-size: 1.3rem; }
.nav-cta span { display: none; } } .nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
}
.nav-hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--text2);
border-radius: 2px;
transition: all 0.2s;
}
@media (max-width: 768px) {
.nav-hamburger { display: flex; }
.nav-links {
display: flex !important;
position: fixed;
top: 56px;
left: 0;
right: 0;
background: rgba(7,7,14,0.97);
backdrop-filter: blur(28px);
border-bottom: 1px solid var(--border);
flex-direction: column;
padding: 16px 20px 24px;
gap: 4px;
z-index: 499;
transform: translateY(-110%);
transition: transform 0.25s ease;
}
.nav-links.open { transform: translateY(0); }
.nav-links li a { padding: 11px 16px; font-size: 0.92rem; border-radius: 10px; }
} .nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .alexis-ci .children {
list-style: none !important;
padding: 0 !important;
margin: 12px 0 0 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
} .alexis-ci .children .alexis-ci {
background: #080814 !important;
border: 1px solid rgba(108,99,255,0.15) !important;
border-left: 3px solid #6c63ff !important;
border-radius: 10px !important;
margin-left: 20px !important;
position: relative !important;
} .alexis-ci .children .alexis-ci::before {
content: '↩' !important;
position: absolute !important;
top: 18px !important;
left: -22px !important;
font-size: 0.75rem !important;
color: #6c63ff !important;
opacity: 0.6 !important;
} .alexis-ci .children .children .alexis-ci {
margin-left: 16px !important;
border-left-color: #00d4ff !important;
}
.alexis-ci .children .children .alexis-ci::before {
color: #00d4ff !important;
} .alexis-ci-reply-to {
font-family: 'JetBrains Mono', monospace;
font-size: 0.6rem;
color: #6c63ff;
background: rgba(108,99,255,0.08);
border: 1px solid rgba(108,99,255,0.18);
padding: 2px 8px;
border-radius: 4px;
margin-bottom: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
} .share-bottom { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:20px 24px; background:rgba(108,99,255,0.06); border:1px solid rgba(108,99,255,0.15); border-radius:16px; margin:32px 0; }
.share-bottom-label { font-size:0.85rem; font-weight:700; color:#9494b8; white-space:nowrap; }.lazy-hidden,.entry img.lazy-hidden, img.thumbnail.lazy-hidden {
background-color: #ffffff;
background-image: url(//alexisramirez.club/wp-content/plugins/a3-lazy-load/assets/css/loading.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
}
figure.wp-block-image img.lazy-hidden {
min-width: 150px;
}
picture source[type="image/webp"] {
display: block;
}.clear{clear:both}.nobr{white-space:nowrap}.lazy-hidden,.entry img.lazy-hidden,img.thumbnail.lazy-hidden{background-color:#fff}.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}ol,ul{box-sizing:border-box}:root :where(.wp-block-list.has-background){padding:1.25em 2.375em}