@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Lexend:wght@400;500;600;700;800&display=swap');

:root { --ink:#18181b; --muted:#71717a; --line:rgba(24,24,27,.11); --paper:#fff; --panel:#fff; --green:#04c147; --green-deep:#038f34; --soft-green:#e6f7ed; --serif:'Lexend', sans-serif; --sans:'Lexend', sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.site-shell { min-height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.site-main { flex:1; }
.frame { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }
.narrow { width:min(720px, calc(100% - 48px)); }
.site-header { position:relative; z-index:10; border-bottom:1px solid var(--line); background:rgba(250,250,249,.86); backdrop-filter:blur(14px); }
.header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:18px; font-weight:800; letter-spacing:-.05em; }
.brand-logo { display:block; max-height:33px; width:auto; max-width:180px; }
.brand-mark { width:28px; height:28px; fill:var(--green); }
.site-nav { display:flex; align-items:center; gap:23px; font-size:13px; font-weight:700; }
.site-nav .nav { display:contents; }
.site-nav .nav a { color:#52525b; transition:color .2s ease; }
.site-nav .nav a:hover, .site-nav .nav .nav-current a { color:var(--ink); }
.status-link { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; color:var(--green-deep)!important; border:1px solid #9be3b1; border-radius:6px; font-size:11px; letter-spacing:-.02em; background:rgba(230,247,237,.5); }
.status-link i, .pulse { display:inline-block; width:7px; height:7px; border-radius:100%; background:var(--green); box-shadow:0 0 0 3px rgba(4,193,71,.13); }
.menu-toggle { display:none; border:0; background:transparent; padding:7px 0 7px 7px; }
.menu-toggle span { display:block; width:21px; height:2px; margin:4px; background:var(--ink); }
.home-hero { position:relative; background:linear-gradient(115deg,#fff 0%,#fff 54%,#f0fdf4 100%); border-bottom:1px solid var(--line); overflow:hidden; }
.home-hero:before { content:""; position:absolute; width:600px; height:600px; right:-330px; top:-400px; border:1px solid rgba(4,193,71,.13); border-radius:45%; transform:rotate(-23deg); box-shadow:0 0 0 62px rgba(4,193,71,.025),0 0 0 124px rgba(4,193,71,.02); }
.hero-grid { display:grid; grid-template-columns:1fr 420px; align-items:center; gap:96px; min-height:462px; padding-block:72px; }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--green-deep); font:500 11px/1 var(--mono); text-transform:uppercase; letter-spacing:.1em; }
h1,h2,h3,p { margin-top:0; }
.hero-copy h1, .archive-hero h1, .post-header h1, .error-page h1 { max-width:760px; margin:20px 0 20px; font-size:clamp(44px,5.5vw,74px); line-height:.96; letter-spacing:-.065em; font-weight:700; }
h1 em { color:var(--green-deep); font-family:var(--serif); font-weight:600; letter-spacing:-.08em; }
.hero-copy p, .archive-hero p { max-width:530px; color:var(--muted); font-size:17px; line-height:1.65; }
.status-panel { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 18px 35px rgba(24,24,27,.06); }
.status-panel:before,.card-topline { content:""; display:block; height:2px; background:linear-gradient(90deg,transparent,var(--green),transparent); opacity:.8; }
.status-panel-head { display:flex; justify-content:space-between; padding:17px 20px 14px; color:var(--muted); font:500 10px/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--line); }
.status-panel-head span:last-child { color:var(--green-deep); }
.status-ok { display:flex; align-items:center; gap:11px; padding:22px 20px; background:#fbfffc; font-size:14px; }
.status-ok i { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--soft-green); }
.status-row { display:flex; justify-content:space-between; padding:12px 20px; border-top:1px solid var(--line); color:#52525b; font-size:12px; }
.status-row b { color:var(--green-deep); font-weight:700; }
.status-panel-link { display:flex; justify-content:space-between; padding:15px 20px; color:#3f3f46; border-top:1px solid var(--line); font-size:12px; font-weight:700; transition:background .2s; }
.status-panel-link:hover { background:#fafafa; }.status-panel-link span { color:var(--green-deep); }
.latest-section { padding-block:92px 108px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:29px; }
.section-heading h2 { margin:8px 0 0; font-size:32px; letter-spacing:-.055em; }.section-heading>a { color:#52525b; font-size:13px; font-weight:700; }.section-heading>a span { color:var(--green-deep); margin-left:5px; }
.archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.post-card { position:relative; display:flex; flex-direction:column; min-height:282px; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:9px; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.post-card:hover { transform:translateY(-4px); border-color:rgba(4,193,71,.4); box-shadow:0 15px 27px rgba(24,24,27,.07); }.post-card-link { position:absolute; inset:0; z-index:1; }.card-topline { flex:0 0 2px; }.card-content { padding:22px 22px 16px; }.post-card-meta { display:flex; align-items:center; flex-wrap:wrap; gap:9px; color:#8a8a92; font:400 10px/1.2 var(--mono); letter-spacing:.01em; text-transform:uppercase; }.tag-pill { position:relative; z-index:2; display:inline-flex; padding:5px 7px; color:var(--green-deep); background:var(--soft-green); border-radius:4px; font:500 9px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; }.post-card h2 { margin:15px 0 10px; font-size:20px; line-height:1.18; letter-spacing:-.045em; }.post-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }.card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding:15px 22px; border-top:1px solid var(--line); color:#8a8a92; font:400 10px/1 var(--mono); }.read-more { color:#3f3f46; font-family:var(--sans); font-size:11px; font-weight:700; }.read-more b { color:var(--green-deep); font-size:16px; vertical-align:-1px; }
.archive-hero { padding-block:88px 65px; border-bottom:1px solid var(--line); }.archive-hero h1 { max-width:820px; font-size:clamp(43px,5vw,66px); }.archive-hero + .archive-grid { padding-top:34px; padding-bottom:42px; }
.pagination { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:23px 0 68px; color:var(--muted); border-top:1px solid var(--line); font:400 11px var(--mono); }.pagination a { font-family:var(--sans); font-size:12px; font-weight:700; color:#3f3f46; }.pagination a:last-child { text-align:right; }
.post-header { padding-top:94px; padding-bottom:42px; text-align:center; }.post-header .post-card-meta { justify-content:center; }.post-header h1 { margin-inline:auto; font-size:clamp(42px,5.6vw,70px); }.post-dek { max-width:600px; margin:0 auto; color:var(--muted); font:500 20px/1.45 var(--serif); }.post-byline { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:28px; color:#71717a; font-size:12px; text-align:left; }.post-byline img { width:31px; height:31px; border-radius:50%; object-fit:cover; }.post-byline a { color:var(--ink); font-weight:700; }.post-byline small { display:block; margin-top:3px; color:#a1a1aa; font:10px var(--mono); }
.feature-image { margin-bottom:46px; }.feature-image img { display:block; width:100%; max-height:690px; border-radius:9px; object-fit:cover; }.feature-image figcaption { margin-top:9px; color:#a1a1aa; text-align:center; font-size:11px; }.post-content { padding-bottom:65px; color:#3f3f46; font-size:18px; line-height:1.72; }.post-content > * { max-width:100%; }.post-content h2,.post-content h3,.post-content h4 { margin:2.1em 0 .65em; color:var(--ink); line-height:1.13; letter-spacing:-.045em; }.post-content h2 { font-size:32px; }.post-content h3 { font-size:24px; }.post-content a { color:var(--green-deep); text-decoration:underline; text-decoration-color:#9be3b1; text-underline-offset:3px; }.post-content blockquote { margin:1.8em 0; padding:6px 0 6px 24px; border-left:3px solid var(--green); color:var(--ink); font:600 27px/1.25 var(--serif); }.post-content code { padding:2px 5px; background:#f0f0ef; border-radius:3px; font:13px var(--mono); }.post-content pre { overflow:auto; padding:20px; color:#e4e4e7; background:#18181b; border-radius:8px; font-size:13px; }.post-content pre code { padding:0; background:transparent; }.post-content img { border-radius:7px; }.post-content hr { border:0; border-top:1px solid var(--line); margin:2.5em 0; }.post-content figcaption { color:#a1a1aa; text-align:center; font-size:11px; }
.post-content .kg-width-wide { width:min(980px, calc(100vw - 48px)); max-width:none; margin:2em 50% 2em; transform:translateX(-50%); }
.post-content .kg-width-full { width:100vw; max-width:none; margin:2em 50% 2em; transform:translateX(-50%); }
.post-content .kg-width-wide img,.post-content .kg-width-full img { width:100%; }
.post-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0 88px; border-top:1px solid var(--line); color:#71717a; font-size:12px; }.post-footer>div { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }.post-footer>div>span { color:#a1a1aa; }.post-footer>div a { color:#3f3f46; font-weight:700; }.back-top { color:var(--green-deep); font-weight:700; white-space:nowrap; }
.author-hero { display:flex; align-items:center; gap:25px; }.author-hero img { width:92px; height:92px; border-radius:50%; object-fit:cover; }.author-hero h1 { margin:13px 0; }
.error-page { display:grid; grid-template-columns:150px 1fr; align-items:center; gap:42px; min-height:62vh; }.error-code { color:var(--green); font:700 clamp(74px,10vw,128px)/1 var(--serif); letter-spacing:-.09em; }.error-page h1 { margin-top:16px; font-size:52px; }.error-page p { max-width:450px; color:var(--muted); line-height:1.6; }.button { display:inline-flex; align-items:center; gap:18px; margin-top:17px; padding:12px 14px; border-radius:6px; color:#fff; background:var(--green-deep); font-size:13px; font-weight:700; }.button span { font-size:18px; }
.site-footer { position:relative; overflow:hidden; border-top:1px solid #e4e4e7; background:#fafafa; }
.footer-glow { position:absolute; inset:0; background:linear-gradient(to bottom,#fff,rgba(249,250,251,.8)); pointer-events:none; }
.footer-inner { position:relative; width:min(1280px, calc(100% - 48px)); display:grid; grid-template-columns:1fr 2fr; gap:32px; padding-block:80px; color:#4b5563; }
.footer-main p { max-width:320px; margin:24px 0; font-size:14px; line-height:1.7; }.footer-brand { display:flex; align-items:center; gap:12px; color:#111827; font-size:20px; font-weight:700; letter-spacing:-.035em; }.footer-mark { width:40px; height:40px; fill:var(--green); }.footer-socials { display:flex; gap:16px; }.footer-socials a { display:grid; width:40px; height:40px; place-items:center; color:#9ca3af; border:1px solid #e5e7eb; border-radius:12px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); font-size:16px; font-weight:700; transition:.2s ease; }.footer-socials a:hover { color:#03ad40; border-color:#c1edce; background:#e6f7ed; box-shadow:0 4px 8px rgba(0,0,0,.08); transform:translateY(-1px); }.footer-socials svg { width:18px; height:18px; fill:currentColor; }
.footer-links { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }.footer-links h2 { margin:0 0 16px; color:#111827; font-size:14px; font-weight:600; letter-spacing:-.02em; }.footer-links>div { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }.footer-links>div>a:not(.sponsor-button) { color:#4b5563; font-size:14px; line-height:1.7; transition:color .2s; }.footer-links>div>a:not(.sponsor-button):hover { color:#03ad40; }.sponsor-button { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; color:#fff; border-radius:12px; background:#111827; box-shadow:0 1px 2px rgba(0,0,0,.08); font-size:14px; font-weight:600; transition:background .2s,box-shadow .2s; }.sponsor-button:hover { background:#1f2937; box-shadow:0 4px 8px rgba(0,0,0,.12); }.sponsor-button span { color:#f87171; }
.footer-bottom { grid-column:1 / -1; display:flex; justify-content:space-between; gap:30px; margin-top:64px; padding-top:32px; color:#9ca3af; border-top:1px solid #e5e7eb; font-size:12px; line-height:1.6; }.footer-bottom p { margin:0; }.footer-bottom a { color:#03ad40; font-weight:500; }
@media (max-width:800px) { .frame,.narrow { width:min(100% - 32px, 1180px); }.header-inner { min-height:66px; }.menu-toggle { display:block; }.site-nav { display:none; position:absolute; top:66px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:10px 16px 16px; border-bottom:1px solid var(--line); background:#fff; box-shadow:0 12px 20px rgba(24,24,27,.04); }.site-nav.is-open { display:flex; }.site-nav .nav { display:flex; flex-direction:column; }.site-nav .nav a,.status-link { padding:13px 6px; border-radius:0; }.status-link { justify-content:center; margin-top:7px; border-radius:6px; }.hero-grid { grid-template-columns:1fr; gap:42px; min-height:0; padding-block:62px; }.hero-copy h1 { font-size:55px; }.archive-grid { grid-template-columns:repeat(2,1fr); }.latest-section { padding-block:65px; }.archive-hero { padding-block:65px 46px; }.post-header { padding-top:65px; }.feature-image { width:100%; margin-bottom:38px; }.feature-image img { border-radius:0; }.footer-inner { grid-template-columns:1fr; gap:14px; }.footer-meta { justify-content:space-between; }.error-page { grid-template-columns:1fr; gap:8px; }.error-page h1 { font-size:43px; } }
@media (max-width:520px) { .hero-copy h1 { font-size:46px; }.archive-grid { grid-template-columns:1fr; }.section-heading h2 { font-size:28px; }.section-heading>a { white-space:nowrap; }.post-header h1 { font-size:43px; }.post-dek { font-size:18px; }.post-content { font-size:17px; }.post-content h2 { font-size:28px; }.post-footer { align-items:flex-start; flex-direction:column; }.author-hero { align-items:flex-start; }.author-hero img { width:62px; height:62px; }.footer-divider { display:none; } }

@media (max-width:1000px) { .footer-inner { grid-template-columns:1fr; gap:46px; }.footer-links { grid-template-columns:repeat(2,1fr); max-width:620px; }.footer-bottom { margin-top:20px; } }
@media (max-width:520px) { .footer-inner { gap:40px; padding-top:58px; }.footer-links { grid-template-columns:1fr 1fr; gap:34px 22px; }.footer-bottom { flex-direction:column; gap:7px; margin-top:8px; }.footer-sponsor { grid-column:1 / -1; }.footer-socials a { width:36px; height:36px; } }