:root {
  --nginx-green: #009639;
  --nginx-green-light: #00c853;
  --nginx-green-glow: rgba(0,200,83,0.15);
  --nginx-green-subtle: rgba(0,200,83,0.07);
  --bg-deep: #06090f;
  --bg-primary: #0b1120;
  --bg-secondary: #111827;
  --bg-card: #151f30;
  --bg-card-hover: #1a2740;
  --bg-elevated: #1e2d45;
  --bg-code: #0a0f1a;
  --text-primary: #e8edf5;
  --text-secondary: #8899aa;
  --text-muted: #4a5568;
  --text-accent: #4ade80;
  --border-subtle: rgba(255,255,255,0.05);
  --border-default: rgba(255,255,255,0.08);
  --border-focus: rgba(0,200,83,0.4);
  --syn-keyword: #ff7b72;
  --syn-string: #a5d6ff;
  --syn-comment: #4a5568;
  --syn-directive: #d2a8ff;
  --syn-variable: #ffa657;
  --syn-value: #79c0ff;
  --syn-bracket: #8899aa;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-serif: 'Source Serif 4', 'Charter', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
}

/* ── Light Theme ── */
[data-theme="light"] {
  --nginx-green: #008a34;
  --nginx-green-light: #009639;
  --nginx-green-glow: rgba(0,150,57,0.1);
  --nginx-green-subtle: rgba(0,150,57,0.06);
  --bg-deep: #f7f9fb;
  --bg-primary: #f0f3f7;
  --bg-secondary: #e8ecf2;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f7fa;
  --bg-elevated: #e2e8f0;
  --bg-code: #f4f6f9;
  --text-primary: #1a202c;
  --text-secondary: #4a5568;
  --text-muted: #94a3b8;
  --text-accent: #007d32;
  --border-subtle: rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.1);
  --border-focus: rgba(0,150,57,0.4);
  --syn-keyword: #cf222e;
  --syn-string: #0550ae;
  --syn-comment: #6e7781;
  --syn-directive: #8250df;
  --syn-variable: #953800;
  --syn-value: #0550ae;
  --syn-bracket: #6e7781;
}

/* Light theme component overrides */
[data-theme="light"] .navbar::before{background:rgba(247,249,251,0.8)}
[data-theme="light"] .page-switcher{background:rgba(255,255,255,0.92);box-shadow:0 4px 24px rgba(0,0,0,0.08)}
[data-theme="light"] .page-switcher button:hover{background:rgba(0,0,0,0.04)}
[data-theme="light"] .page-switcher button.active{box-shadow:0 0 16px rgba(0,150,57,0.2)}
[data-theme="light"] .nav-search-btn{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .nav-search-btn:hover{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.12)}
[data-theme="light"] .nav-search-btn kbd{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .nav-links a:hover{background:rgba(0,0,0,0.04)}
[data-theme="light"] .feature-card::after{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,150,57,0.04),transparent 60%)}
[data-theme="light"] .feature-card:hover{box-shadow:0 16px 48px rgba(0,0,0,0.08),0 0 0 1px rgba(0,150,57,0.1)}
[data-theme="light"] .module-card::after{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,150,57,0.03),transparent 50%)}
[data-theme="light"] .module-card:hover{box-shadow:0 8px 32px rgba(0,0,0,0.06)}
[data-theme="light"] .hero-terminal::before{background:linear-gradient(135deg,rgba(0,150,57,0.15),transparent 40%,transparent 60%,rgba(56,139,253,0.1))}
[data-theme="light"] .hero-terminal-inner{background:var(--bg-code)}
[data-theme="light"] .term-header{background:rgba(0,0,0,0.02)}
[data-theme="light"] .hero-glow.g1{background:radial-gradient(circle,rgba(0,150,57,0.06),transparent 70%)}
[data-theme="light"] .hero-glow.g2{background:radial-gradient(circle,rgba(56,139,253,0.04),transparent 70%)}
[data-theme="light"] .hero-glow.g3{background:radial-gradient(circle,rgba(210,168,255,0.04),transparent 70%)}
[data-theme="light"] .hero-badge{background:linear-gradient(135deg,rgba(0,150,57,0.06),rgba(0,150,57,0.02));border-color:rgba(0,150,57,0.12)}
[data-theme="light"] .hero-gradient{background:linear-gradient(135deg,#007d32 0%,#009639 30%,#0550ae 60%,#8250df 100%);-webkit-background-clip:text;background-clip:text;background-size:200% auto}
[data-theme="light"] .stat-number{background:linear-gradient(135deg,var(--text-primary),#007d32);-webkit-background-clip:text;background-clip:text}
[data-theme="light"] .stats-inner{background:rgba(0,0,0,0.04)}
[data-theme="light"] .code-block::before{background:linear-gradient(90deg,transparent,rgba(0,150,57,0.2),transparent)}
[data-theme="light"] .code-head{background:rgba(0,0,0,0.02)}
[data-theme="light"] .code-body .cl:hover{background:rgba(0,0,0,0.02)}
[data-theme="light"] .cmd-palette{background:var(--bg-card);box-shadow:0 25px 80px rgba(0,0,0,0.15)}
[data-theme="light"] .cmd-palette-overlay{background:rgba(0,0,0,0.25)}
[data-theme="light"] .cmd-item:hover,.cmd-item.selected{background:rgba(0,150,57,0.06)}
[data-theme="light"] .cmd-item-icon{background:rgba(0,0,0,0.03)}
[data-theme="light"] .cmd-item-badge{background:rgba(0,0,0,0.04)}
[data-theme="light"] .var-card.expanded{box-shadow:0 4px 20px rgba(0,0,0,0.06)}
[data-theme="light"] .dir-card.expanded{box-shadow:0 4px 20px rgba(0,0,0,0.06)}
[data-theme="light"] .dir-meta-row{background:rgba(0,0,0,0.02)}
[data-theme="light"] .var-gotcha{background:rgba(217,119,6,0.06);border-color:rgba(217,119,6,0.15)}
[data-theme="light"] .dir-note{background:rgba(37,99,235,0.04);border-color:rgba(37,99,235,0.12)}
[data-theme="light"] .mini-code{background:var(--bg-code)}
[data-theme="light"] body::before{opacity:0.55}
[data-theme="light"] .footer{background:var(--bg-primary)}

/* ── Theme Toggle ── */
.theme-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:transparent;cursor:pointer;color:var(--text-muted);transition:all 0.3s ease;position:relative;overflow:hidden;flex-shrink:0}
.theme-toggle:hover{border-color:var(--border-default);color:var(--text-primary);background:rgba(255,255,255,0.04)}
[data-theme="light"] .theme-toggle:hover{background:rgba(0,0,0,0.04)}
.theme-toggle svg{width:18px;height:18px;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);position:absolute}
.theme-toggle .sun-icon{opacity:0;transform:rotate(-90deg) scale(0.5)}
.theme-toggle .moon-icon{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-toggle .sun-icon{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-toggle .moon-icon{opacity:0;transform:rotate(90deg) scale(0.5)}

/* Smooth theme transition */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after{
  transition:background-color 0.4s ease,color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease !important;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-sans);background:var(--bg-deep);color:var(--text-primary);line-height:1.6;overflow-x:hidden}

/* ── Ambient background ──
   CSS-only replacement for the old <canvas> particle network. Two soft
   radial gradients fixed to the viewport. No JS, no animation, no
   compositor wake-ups — same vibe at zero runtime cost. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 800px 600px at 15% 18%, rgba(0,200,83,0.08), transparent 62%),
    radial-gradient(ellipse 700px 500px at 85% 82%, rgba(56,139,253,0.06), transparent 62%),
    radial-gradient(ellipse 500px 400px at 50% 50%, rgba(210,168,255,0.04), transparent 70%);
}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-deep)}
::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--nginx-green)}

/* ── Reveal Animations ──
   CSS-only fade-in on page load. Content is fully visible by default so
   anything that goes wrong with JS (slow mobile, blocker, parse error) still
   shows the page. Animation only runs on desktop where it pays for itself,
   and never under reduced-motion. No IntersectionObserver, no body class. */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px){
  @keyframes reveal-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
  .reveal{animation:reveal-in 0.8s cubic-bezier(0.16,1,0.3,1) both}
  .reveal-delay-1{animation-delay:0.1s}
  .reveal-delay-2{animation-delay:0.2s}
  .reveal-delay-3{animation-delay:0.3s}
  .reveal-delay-4{animation-delay:0.4s}
}

/* ── Navbar ── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 32px;transition:all 0.4s cubic-bezier(0.16,1,0.3,1)}
.navbar::before{content:'';position:absolute;inset:0;background:rgba(6,9,15,0.6);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--border-subtle);opacity:0;transition:opacity 0.4s}
/* CSS-only scroll-driven backdrop solidify (Chrome 115+, Firefox 130+).
   Older browsers keep the transparent navbar — graceful degradation. */
@supports (animation-timeline: scroll()){
  .navbar::before{
    animation:navbar-solidify linear both;
    animation-timeline:scroll(root);
    animation-range:0 60px;
  }
  @keyframes navbar-solidify{to{opacity:1}}
}
.navbar-inner{max-width:1320px;margin:0 auto;height:68px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-primary)}
.logo-mark{width:38px;height:38px;position:relative;display:flex;align-items:center;justify-content:center}
.logo-mark svg{width:38px;height:38px}
.logo-text{font-family:var(--font-mono);font-weight:800;font-size:19px;letter-spacing:-0.5px}
.logo-text span{color:var(--nginx-green-light)}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-links a{text-decoration:none;color:var(--text-secondary);font-size:14px;font-weight:500;padding:8px 18px;border-radius:var(--radius-sm);transition:all 0.25s;position:relative}
.nav-links a:hover{color:var(--text-primary);background:rgba(255,255,255,0.04)}
.nav-links a.active{color:var(--text-accent)}
.nav-links a.active::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;background:var(--nginx-green-light);border-radius:50%;box-shadow:0 0 8px var(--nginx-green-light)}
.nav-search-btn{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.04);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:8px 14px;color:var(--text-muted);font-size:13px;cursor:pointer;transition:all 0.25s;font-family:var(--font-sans)}
.nav-search-btn:hover{border-color:var(--border-default);color:var(--text-secondary);background:rgba(255,255,255,0.06)}
.nav-search-btn kbd{font-family:var(--font-sans);font-size:11px;background:rgba(255,255,255,0.06);padding:2px 7px;border-radius:4px;border:1px solid var(--border-subtle)}

/* ── Page Switcher ── */
.page-switcher{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:999;display:flex;gap:4px;background:rgba(21,31,48,0.9);backdrop-filter:blur(20px);padding:6px;border-radius:var(--radius-lg);border:1px solid var(--border-default);box-shadow:0 8px 40px rgba(0,0,0,0.5)}
.page-switcher button{background:transparent;border:none;color:var(--text-secondary);font-family:var(--font-sans);font-size:13px;font-weight:500;padding:10px 20px;border-radius:var(--radius-md);cursor:pointer;transition:all 0.25s;white-space:nowrap}
.page-switcher button:hover{background:rgba(255,255,255,0.05);color:var(--text-primary)}
.page-switcher button.active{background:var(--nginx-green);color:white;box-shadow:0 0 20px rgba(0,200,83,0.3)}

/* ── Pages ── */
.page{display:none;position:relative;z-index:1}
.page.active{display:block}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:15px;font-weight:600;text-decoration:none;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);cursor:pointer;border:none;position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(135deg,var(--nginx-green),var(--nginx-green-light));color:white;box-shadow:0 4px 24px rgba(0,200,83,0.25)}
.btn-primary:hover{box-shadow:0 8px 40px rgba(0,200,83,0.4);transform:translateY(-2px) scale(1.02)}
.btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);opacity:0;transition:opacity 0.3s}
.btn-primary:hover::after{opacity:1}
.btn-ghost{background:transparent;color:var(--text-primary);border:1px solid var(--border-default);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--nginx-green);background:var(--nginx-green-subtle);transform:translateY(-2px)}

/* ── Hero ── */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 32px 80px;position:relative;overflow:hidden}
.hero-glow{position:absolute;width:700px;height:700px;border-radius:50%;filter:blur(150px);pointer-events:none}
.hero-glow.g1{background:radial-gradient(circle,rgba(0,200,83,0.12),transparent 70%);top:-200px;right:-100px;animation:glow-float 18s ease-in-out infinite}
.hero-glow.g2{background:radial-gradient(circle,rgba(56,139,253,0.08),transparent 70%);bottom:-200px;left:-150px;animation:glow-float 22s ease-in-out infinite reverse}
.hero-glow.g3{background:radial-gradient(circle,rgba(210,168,255,0.06),transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation:glow-pulse 10s ease-in-out infinite}
@keyframes glow-float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-40px) scale(1.1)}66%{transform:translate(-30px,30px) scale(0.9)}}
@keyframes glow-pulse{0%,100%{opacity:0.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}}

.hero-content{text-align:center;max-width:960px;position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(0,200,83,0.08),rgba(0,200,83,0.02));border:1px solid rgba(0,200,83,0.15);border-radius:100px;padding:8px 22px;font-size:13px;color:var(--text-accent);margin-bottom:28px;font-weight:500;animation:badge-glow 3s ease-in-out infinite}
@keyframes badge-glow{0%,100%{box-shadow:0 0 0 rgba(0,200,83,0)}50%{box-shadow:0 0 20px rgba(0,200,83,0.1)}}
.hero-badge .pulse{width:8px;height:8px;background:var(--nginx-green-light);border-radius:50%;position:relative}
.hero-badge .pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--nginx-green-light);animation:pulse-ring 2s ease-out infinite}
@keyframes pulse-ring{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2)}}

.hero h1{font-size:clamp(46px,7vw,80px);font-weight:900;line-height:1.02;letter-spacing:-3px;margin-bottom:24px}
.hero-gradient{background:linear-gradient(135deg,#00c853 0%,#4ade80 30%,#a5d6ff 60%,#d2a8ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% auto;animation:gradient-shift 6s ease-in-out infinite}
@keyframes gradient-shift{0%,100%{background-position:0% center}50%{background-position:100% center}}

.hero-sub{font-size:19px;color:var(--text-secondary);line-height:1.7;max-width:640px;margin:0 auto 36px;font-weight:400}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── Hero Terminal ── */
.hero-terminal{margin-top:56px;text-align:left;max-width:680px;margin-left:auto;margin-right:auto;border-radius:var(--radius-lg);overflow:hidden;position:relative}
.hero-terminal::before{content:'';position:absolute;inset:-1px;border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(0,200,83,0.2),transparent 40%,transparent 60%,rgba(79,192,255,0.15));z-index:0;pointer-events:none}
.hero-terminal-inner{position:relative;z-index:1;background:var(--bg-code);border-radius:var(--radius-lg);overflow:hidden}
.term-header{display:flex;align-items:center;gap:8px;padding:14px 18px;background:rgba(255,255,255,0.03);border-bottom:1px solid var(--border-subtle)}
.term-dot{width:12px;height:12px;border-radius:50%}
.term-dot.r{background:#ff5f57}.term-dot.y{background:#febc2e}.term-dot.g{background:#28c840}
.term-title{flex:1;text-align:center;font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}
.term-body{padding:20px 24px;font-family:var(--font-mono);font-size:13.5px;line-height:2;min-height:200px}
.term-body .p{color:var(--nginx-green-light)}
.term-body .c{color:var(--text-primary)}
.term-body .o{color:var(--text-secondary)}
.term-body .h{color:var(--syn-string)}
.term-body .d{color:var(--syn-directive)}
.term-body .v{color:var(--syn-variable)}
.term-body .k{color:var(--syn-keyword)}
.term-body .cursor{display:inline-block;width:9px;height:18px;background:var(--nginx-green-light);animation:blink 1s step-end infinite;vertical-align:middle;margin-left:2px;border-radius:1px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
#typed-output .line{opacity:0;transform:translateX(-5px);animation:line-appear 0.3s forwards;white-space:pre}
@keyframes line-appear{to{opacity:1;transform:translateX(0)}}

/* ── Stats ── */
.stats-banner{max-width:1320px;margin:0 auto;padding:0 32px}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle)}
.stat-item{background:var(--bg-card);padding:32px 24px;text-align:center;transition:background 0.3s}
.stat-item:hover{background:var(--bg-card-hover)}
.stat-number{font-family:var(--font-mono);font-size:42px;font-weight:800;letter-spacing:-2px;background:linear-gradient(135deg,var(--text-primary),var(--text-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-label{font-size:13px;color:var(--text-muted);margin-top:4px;font-weight:500}

/* ── Section Headers ── */
.section-label{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:2.5px;color:var(--nginx-green-light);margin-bottom:16px;display:block}
.section-title{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-1px;margin-bottom:14px}
.section-desc{color:var(--text-secondary);font-size:16px;max-width:600px;line-height:1.7}

/* ── Feature Cards ── */
.features{padding:100px 32px;max-width:1320px;margin:0 auto}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.feature-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:32px 28px;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden;cursor:pointer}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--nginx-green-light),transparent);opacity:0;transition:opacity 0.4s}
.feature-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,200,83,0.06),transparent 60%);opacity:0;transition:opacity 0.4s;pointer-events:none}
.feature-card:hover{transform:translateY(-6px);border-color:rgba(0,200,83,0.15);box-shadow:0 20px 60px rgba(0,0,0,0.3),0 0 40px rgba(0,200,83,0.05)}
.feature-card:hover::before,.feature-card:hover::after{opacity:1}
.feature-icon{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.feature-icon.green{background:rgba(0,200,83,0.1);color:var(--nginx-green-light)}
.feature-icon.blue{background:rgba(56,139,253,0.1);color:#58a6ff}
.feature-icon.purple{background:rgba(210,168,255,0.1);color:#d2a8ff}
.feature-card h3{font-size:18px;font-weight:700;margin-bottom:10px;letter-spacing:-0.3px}
.feature-card p{font-size:14px;color:var(--text-secondary);line-height:1.65}
.feature-stat{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-family:var(--font-mono);font-size:12px;color:var(--text-accent);background:var(--nginx-green-subtle);padding:5px 14px;border-radius:100px}

/* ── Code Preview ── */
.code-section{max-width:1320px;margin:0 auto;padding:0 32px 100px}
.code-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.code-text h2{font-size:34px;font-weight:800;letter-spacing:-0.5px;margin-bottom:16px}
.code-text p{color:var(--text-secondary);font-size:15px;line-height:1.7;margin-bottom:24px}
.checklist{list-style:none;display:flex;flex-direction:column;gap:14px}
.checklist li{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text-secondary)}
.checklist .ck{width:22px;height:22px;min-width:22px;border-radius:50%;background:linear-gradient(135deg,var(--nginx-green),var(--nginx-green-light));display:flex;align-items:center;justify-content:center;color:white;font-size:11px;font-weight:700}
.code-block{background:var(--bg-code);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.code-block::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,200,83,0.3),transparent)}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:rgba(255,255,255,0.02);border-bottom:1px solid var(--border-subtle)}
.code-fname{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.code-tab{display:flex;gap:2px}
.code-tab button{font-family:var(--font-sans);font-size:11px;padding:4px 12px;border-radius:4px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all 0.2s}
.code-tab button.active{background:rgba(0,200,83,0.1);color:var(--text-accent)}
.code-body{padding:18px 22px;font-family:var(--font-mono);font-size:13px;line-height:1.9;overflow-x:auto;counter-reset:line}
.code-body .cl{display:block;padding:0 0 0 40px;position:relative;border-radius:4px;transition:background 0.15s;white-space:pre}
.code-body .cl:hover{background:rgba(255,255,255,0.02)}
.code-body .cl::before{counter-increment:line;content:counter(line);position:absolute;left:0;width:28px;text-align:right;color:var(--text-muted);font-size:12px;user-select:none;opacity:0.5}
.code-body .kw{color:var(--syn-keyword)}.code-body .dir{color:var(--syn-directive)}.code-body .str{color:var(--syn-string)}.code-body .cmt{color:var(--syn-comment);font-style:italic}.code-body .v{color:var(--syn-variable)}.code-body .val{color:var(--syn-value)}.code-body .br{color:var(--syn-bracket)}

/* ── Modules ── */
.modules-hero{padding:140px 32px 48px;text-align:center;position:relative}
.modules-hero::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--border-default),transparent)}
.module-grid{max-width:1320px;margin:0 auto;padding:48px 32px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.module-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:28px;transition:all 0.35s cubic-bezier(0.16,1,0.3,1);cursor:pointer;position:relative;overflow:hidden}
.module-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,200,83,0.04),transparent 50%);opacity:0;transition:opacity 0.35s;pointer-events:none}
.module-card:hover{border-color:rgba(0,200,83,0.2);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.3)}
.module-card:hover::after{opacity:1}
.module-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.module-name{font-family:var(--font-mono);font-size:16px;font-weight:700}
.module-tag{font-size:10px;font-weight:700;padding:4px 12px;border-radius:100px;text-transform:uppercase;letter-spacing:0.8px}
.module-tag.dynamic{background:rgba(0,200,83,0.1);color:#4ade80}
.module-tag.filter{background:rgba(56,139,253,0.1);color:#58a6ff}
.module-tag.upstream{background:rgba(210,168,255,0.1);color:#d2a8ff}
.module-tag.security{background:rgba(255,123,114,0.1);color:#ff7b72}
.module-tag.streaming{background:rgba(255,166,87,0.1);color:#ffa657}
.module-desc{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:14px}
.module-meta{display:flex;gap:20px;font-size:12px;color:var(--text-muted)}
.module-meta span{display:flex;align-items:center;gap:5px}

/* ── Variables Reference ── */
.vars-hero{padding:140px 32px 24px;text-align:center}
.vars-hero h1{font-size:48px;font-weight:900;letter-spacing:-2px;margin-bottom:8px}
.vars-hero p{color:var(--text-secondary);font-size:16px}

.search-bar{max-width:860px;margin:28px auto 20px;padding:0 32px}
.search-wrap{position:relative}
.search-wrap .s-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;transition:color 0.25s}
.search-wrap:focus-within .s-icon{color:var(--nginx-green-light)}
.search-input{width:100%;padding:18px 100px 18px 56px;background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:15px;color:var(--text-primary);outline:none;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
.search-input::placeholder{color:var(--text-muted)}
.search-input:focus{border-color:var(--nginx-green);box-shadow:0 0 0 4px rgba(0,200,83,0.1),0 8px 32px rgba(0,0,0,0.3)}
.search-count{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:12px;color:var(--text-muted);background:var(--bg-secondary);padding:5px 12px;border-radius:100px}

.filter-row{max-width:860px;margin:0 auto 32px;padding:0 32px;display:flex;gap:8px;flex-wrap:wrap}
.filter-chip{padding:8px 18px;border-radius:100px;font-size:13px;font-weight:500;background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;transition:all 0.25s;font-family:var(--font-sans)}
.filter-chip:hover{border-color:var(--border-default);background:var(--bg-card-hover)}
.filter-chip.active{background:rgba(0,200,83,0.08);border-color:rgba(0,200,83,0.25);color:var(--text-accent)}

.vars-list{max-width:900px;margin:0 auto;padding:0 32px 80px;display:flex;flex-direction:column;gap:8px}
.var-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
.var-card:hover{border-color:rgba(0,200,83,0.15)}
.var-card.expanded{border-color:rgba(0,200,83,0.25);box-shadow:0 4px 24px rgba(0,0,0,0.2),0 0 30px rgba(0,200,83,0.04)}
.var-header{display:flex;align-items:center;padding:16px 22px;cursor:pointer;gap:14px}
.var-name{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--syn-variable);flex-shrink:0}
.var-brief{font-size:13px;color:var(--text-muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.var-module-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:0.6px;white-space:nowrap}
.var-module-badge.http{background:rgba(0,200,83,0.08);color:var(--text-accent)}
.var-module-badge.stream{background:rgba(56,139,253,0.08);color:#58a6ff}
.var-module-badge.tp{background:rgba(210,168,255,0.08);color:#d2a8ff}
.var-expand{color:var(--text-muted);font-size:12px;transition:transform 0.3s;margin-left:8px}
.var-card.expanded .var-expand{transform:rotate(180deg)}
.var-body{max-height:0;overflow:hidden;transition:max-height 0.5s cubic-bezier(0.16,1,0.3,1)}
.var-card.expanded .var-body{max-height:600px}
.var-body-inner{padding:0 22px 22px;border-top:1px solid var(--border-subtle)}
.var-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
.var-detail h4{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted);margin-bottom:8px;font-weight:600}
.var-detail p{font-size:14px;color:var(--text-secondary);line-height:1.6}
.mini-code{background:var(--bg-code);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:14px 18px;font-family:var(--font-mono);font-size:12px;line-height:1.8;overflow-x:auto}
.var-gotcha{display:flex;gap:10px;margin-top:16px;padding:12px 16px;background:rgba(255,166,87,0.04);border:1px solid rgba(255,166,87,0.12);border-radius:var(--radius-sm)}
.var-gotcha .warn{color:#ffa657;font-size:16px;flex-shrink:0}
.var-gotcha p{font-size:13px;color:var(--text-secondary);line-height:1.5}
.var-related{margin-top:14px}
.var-related-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.var-related-tag{font-family:var(--font-mono);font-size:12px;padding:4px 12px;border-radius:6px;background:var(--nginx-green-subtle);color:var(--text-accent);cursor:pointer;transition:all 0.2s;border:1px solid transparent}
.var-related-tag:hover{background:rgba(0,200,83,0.12);border-color:rgba(0,200,83,0.2)}

/* ── Command Palette ── */
.cmd-palette-overlay{position:fixed;inset:0;background:rgba(6,9,15,0.7);backdrop-filter:blur(8px);z-index:9999;display:none;align-items:flex-start;justify-content:center;padding-top:20vh}
.cmd-palette-overlay.open{display:flex}
.cmd-palette{width:580px;max-height:480px;background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,0.6);animation:palette-in 0.2s cubic-bezier(0.16,1,0.3,1)}
@keyframes palette-in{from{opacity:0;transform:scale(0.96) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.cmd-input-wrap{padding:16px 20px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:12px}
.cmd-input-wrap svg{color:var(--text-muted);flex-shrink:0}
.cmd-input{flex:1;background:none;border:none;font-family:var(--font-sans);font-size:16px;color:var(--text-primary);outline:none}
.cmd-input::placeholder{color:var(--text-muted)}
.cmd-results{max-height:360px;overflow-y:auto;padding:8px}
.cmd-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-sm);cursor:pointer;transition:background 0.15s}
.cmd-item:hover,.cmd-item.selected{background:rgba(0,200,83,0.08)}
.cmd-item-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;background:rgba(255,255,255,0.04);flex-shrink:0}
.cmd-item-text{flex:1}
.cmd-item-title{font-size:14px;font-weight:500;color:var(--text-primary)}
.cmd-item-desc{font-size:12px;color:var(--text-muted)}
.cmd-item-badge{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);padding:2px 8px;background:rgba(255,255,255,0.04);border-radius:4px}
.cmd-empty{padding:32px;text-align:center;color:var(--text-muted);font-size:14px}

/* ── Footer ── */
.footer{border-top:1px solid var(--border-subtle);padding:60px 32px 40px;margin-top:60px}
.footer-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.footer-brand p{font-size:14px;color:var(--text-muted);margin-top:14px;line-height:1.6;max-width:300px}
.footer-col h4{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:16px;font-weight:600}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:var(--text-secondary);text-decoration:none;transition:color 0.2s}
.footer-col a:hover{color:var(--nginx-green-light)}
.footer-bottom{max-width:1320px;margin:36px auto 0;padding-top:24px;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}

/* ── Directives Reference ── */
.dir-hero{padding:140px 32px 24px;text-align:center}
.dir-hero h1{font-size:48px;font-weight:900;letter-spacing:-2px;margin-bottom:8px}
.dir-hero p{color:var(--text-secondary);font-size:16px}

.dir-search-bar{max-width:860px;margin:28px auto 20px;padding:0 32px}
.dir-filter-row{max-width:860px;margin:0 auto 32px;padding:0 32px;display:flex;gap:8px;flex-wrap:wrap}

.dir-list{max-width:960px;margin:0 auto;padding:0 32px 80px;display:flex;flex-direction:column;gap:10px}

.dir-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
.dir-card:hover{border-color:rgba(210,168,255,0.15)}
.dir-card.expanded{border-color:rgba(210,168,255,0.25);box-shadow:0 4px 24px rgba(0,0,0,0.2),0 0 30px rgba(210,168,255,0.04)}
.dir-header{display:flex;align-items:center;padding:16px 22px;cursor:pointer;gap:12px}
.dir-card-name{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--syn-directive);flex-shrink:0}
.dir-card-brief{font-size:13px;color:var(--text-muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dir-context-badges{display:flex;gap:4px;flex-shrink:0}
.dir-ctx{font-size:9px;font-weight:700;padding:3px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}
.dir-ctx.main{background:rgba(0,200,83,0.08);color:var(--text-accent)}
.dir-ctx.srv{background:rgba(56,139,253,0.08);color:#58a6ff}
.dir-ctx.loc{background:rgba(210,168,255,0.08);color:#d2a8ff}
.dir-ctx.up{background:rgba(255,166,87,0.08);color:#ffa657}
.dir-ctx.evt{background:rgba(255,123,114,0.08);color:#ff7b72}
.dir-card-expand{color:var(--text-muted);font-size:12px;transition:transform 0.3s;margin-left:8px}
.dir-card.expanded .dir-card-expand{transform:rotate(180deg)}
.dir-body{max-height:0;overflow:hidden;transition:max-height 0.5s cubic-bezier(0.16,1,0.3,1)}
.dir-card.expanded .dir-body{max-height:700px}
.dir-body-inner{padding:0 22px 22px;border-top:1px solid var(--border-subtle)}
.dir-meta-row{display:flex;gap:24px;margin-top:14px;padding:12px 16px;background:rgba(255,255,255,0.02);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);flex-wrap:wrap}
.dir-meta-item{display:flex;flex-direction:column;gap:2px}
.dir-meta-label{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600}
.dir-meta-value{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary)}
.dir-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
.dir-detail h4{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted);margin-bottom:8px;font-weight:600}
.dir-detail p{font-size:14px;color:var(--text-secondary);line-height:1.6}
.dir-note{display:flex;gap:10px;margin-top:14px;padding:10px 14px;background:rgba(56,139,253,0.04);border:1px solid rgba(56,139,253,0.12);border-radius:var(--radius-sm)}
.dir-note .info-icon{color:#58a6ff;font-size:14px;flex-shrink:0;margin-top:1px}
.dir-note p{font-size:13px;color:var(--text-secondary);line-height:1.5}

/* ── Reference index (variables/directives) — compact rows grouped by module ── */
.ref-list{max-width:960px;margin:0 auto;padding:0 32px 80px;display:flex;flex-direction:column;gap:32px}
.ref-group{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  overflow:hidden;
  /* Skip layout + paint for off-screen module groups. Massive win on the
     /directives/ index where 2204 rows used to render in one go. The
     intrinsic-size hint keeps the scrollbar honest and avoids CLS. */
  content-visibility:auto;
  contain-intrinsic-size:auto 800px;
}
.ref-group.empty{display:none}
.ref-group-head{display:flex;align-items:baseline;justify-content:space-between;padding:14px 22px;margin:0;background:rgba(255,255,255,0.02);border-bottom:1px solid var(--border-subtle);font-size:14px;font-weight:600;letter-spacing:-0.2px;color:var(--text-primary)}
.ref-group-name{font-family:var(--font-sans)}
.ref-group-count{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:var(--bg-secondary);padding:3px 10px;border-radius:100px}
.ref-group-body{display:flex;flex-direction:column}
.ref-row{display:grid;grid-template-columns:200px 1fr auto;align-items:center;gap:16px;padding:11px 22px;text-decoration:none;color:inherit;border-top:1px solid var(--border-subtle);transition:background 0.15s}
.ref-row:first-child{border-top:none}
.ref-row:hover{background:rgba(0,200,83,0.04)}
.ref-name{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--syn-variable);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-name.dir{color:var(--syn-directive);font-weight:700}
.ref-summary{font-size:13px;color:var(--text-secondary);line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ref-flag{font-size:9px;font-weight:700;padding:3px 9px;border-radius:100px;text-transform:uppercase;letter-spacing:0.6px;background:rgba(0,200,83,0.08);color:var(--text-accent);white-space:nowrap}
.ref-contexts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}

/* ── Detail page — stacked sections (variables / directives) ── */
.detail-stack{display:flex;flex-direction:column;gap:36px;margin-top:24px}
.detail-stack .var-detail,.detail-stack .dir-detail{width:100%}
.detail-stack .mini-code{max-height:none}

/* ── Reading Typography (Medium-style article) ── */

/* Article hero: tighter, more editorial */
.article-hero{
  padding:128px 32px 28px;
  text-align:center;
  max-width:820px;
  margin:0 auto;
}
.article-hero .section-label{
  font-size:11px;
  letter-spacing:3.4px;
  margin-bottom:20px;
}
.article-title{
  font-family:var(--font-sans);
  font-size:clamp(48px,6.4vw,72px);
  font-weight:800;
  letter-spacing:-2.6px;
  line-height:1.04;
  margin:0 0 28px;
  text-wrap:balance;
}
.vars-hero p.article-lede,
.dir-hero p.article-lede,
.article-hero p.article-lede{
  font-family:var(--font-serif);
  font-size:clamp(20px,2.1vw,24px);
  font-weight:400;
  font-style:italic;
  line-height:1.45;
  color:var(--text-secondary);
  max-width:640px;
  margin:0 auto 24px;
  text-wrap:pretty;
  letter-spacing:-0.005em;
}
.article-byline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  font-family:var(--font-sans);
  font-size:14px;
  color:var(--text-secondary);
}
.byline-badge{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.7px;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:100px;
  background:rgba(0,200,83,0.08);
  color:var(--text-accent);
}
.byline-badge.http{background:rgba(0,200,83,0.08);color:var(--text-accent)}
.byline-badge.stream{background:rgba(56,139,253,0.1);color:#58a6ff}
.byline-badge.tp{background:rgba(210,168,255,0.1);color:#d2a8ff}
.byline-badge.dir-badge{background:rgba(210,168,255,0.1);color:#d2a8ff}
.byline-sep{color:var(--text-muted);opacity:0.5}
.byline-meta{font-weight:500;color:var(--text-secondary)}
.byline-contexts{display:inline-flex;gap:4px;flex-wrap:wrap}

/* Article card: drop the chrome, let prose breathe */
.article-card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.article-card .var-body,
.article-card .dir-body{max-height:none;overflow:visible}
.article-card .var-body-inner,
.article-card .dir-body-inner{
  padding:28px 0 56px !important;
  border-top:none !important;
  max-width:660px;
  margin:0 auto;
}

/* Section heading: real H2 — generous, comfortable */
.section-h{
  font-family:var(--font-sans);
  font-size:24px;
  font-weight:700;
  letter-spacing:-0.6px;
  color:var(--text-primary);
  margin:0 0 20px;
  padding:0;
  border:none;
  display:flex;
  align-items:center;
  gap:14px;
  text-transform:none;
  line-height:1.18;
}
.section-h::before{
  content:'';
  display:block;
  width:28px;
  height:2px;
  background:var(--nginx-green-light);
  border-radius:2px;
  flex-shrink:0;
}

/* Prose: serif body, 22px / 1.62 / ~60ch — comfortable, not overbearing */
.prose{
  font-family:var(--font-serif);
  font-size:22px;
  line-height:1.62;
  color:var(--text-primary);
  font-weight:400;
  letter-spacing:-0.003em;
  text-align:justify;
  text-justify:inter-word;
  text-wrap:pretty;
  hyphens:auto;
  -webkit-hyphens:auto;
  hyphenate-limit-chars:6 3 3;
  -webkit-hyphenate-limit-before:3;
  -webkit-hyphenate-limit-after:3;
  font-feature-settings:"kern" 1,"liga" 1,"clig" 1,"calt" 1,"onum" 1;
  -webkit-font-feature-settings:"kern" 1,"liga" 1,"clig" 1,"calt" 1,"onum" 1;
}
.prose p{
  margin:0 0 1.35em;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  font-family:inherit;
}
.prose p:last-child{margin-bottom:0}

/* Drop cap — solid serif letter with shape-outside so the surrounding
   text follows a circular arc around it (proper book typography flow,
   not a rectangular gap). */
.prose.has-dropcap .dropcap{
  float:left;
  font-family:var(--font-serif);
  font-size:4.4em;
  line-height:0.88;
  font-weight:700;
  color:var(--nginx-green);
  margin:0.06em 0.04em -0.04em 0;
  padding:0;
  /* Circular contour: text hugs the letter rather than the bounding box. */
  shape-outside:circle(48% at 42% 52%);
  -webkit-shape-outside:circle(48% at 42% 52%);
  shape-margin:0.18em;
  -webkit-shape-margin:0.18em;
  text-indent:0;
  user-select:none;
}
@media(max-width:760px){
  .prose.has-dropcap .dropcap{
    font-size:3.8em;
  }
}

/* Inline code spans produced by the prose filter — refined, lower-contrast */
.prose code,
.var-gotcha code,
.dir-note code,
.var-related code{
  font-family:var(--font-mono);
  font-size:0.78em;
  font-weight:500;
  padding:2px 8px 3px;
  border-radius:5px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border-subtle);
  color:var(--text-primary);
  white-space:nowrap;
  letter-spacing:-0.01em;
  vertical-align:0.07em;
}
.prose code.ic-var,
.var-gotcha code.ic-var{
  background:rgba(255,166,87,0.1);
  border-color:rgba(255,166,87,0.22);
  color:var(--syn-variable);
}
.prose code.ic-dir,
.var-gotcha code.ic-dir{
  background:rgba(210,168,255,0.08);
  border-color:rgba(210,168,255,0.2);
  color:var(--syn-directive);
}
[data-theme="light"] .prose code{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .prose code.ic-var,
[data-theme="light"] .var-gotcha code.ic-var{background:rgba(149,56,0,0.06);border-color:rgba(149,56,0,0.16)}
[data-theme="light"] .prose code.ic-dir,
[data-theme="light"] .var-gotcha code.ic-dir{background:rgba(130,80,223,0.05);border-color:rgba(130,80,223,0.16)}

/* Article rule: classic three-asterism separator (typographer's standard) */
.article-rule{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:56px 0;
  font-family:var(--font-serif);
  font-size:22px;
  letter-spacing:1.2em;
  color:var(--text-muted);
  text-indent:1.2em; /* compensates trailing letter-spacing */
  user-select:none;
}
.article-rule span::before{content:'\002A \002A \002A'} /* * * * */

/* Optional meta rail (e.g. Contexts) under prose */
.article-meta-rail{
  margin-top:20px;
  padding:14px 20px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
[data-theme="light"] .article-meta-rail{background:rgba(0,0,0,0.02)}
.meta-rail-item{display:flex;flex-direction:column;gap:2px}
.meta-rail-label{
  font-family:var(--font-sans);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text-muted);
}
.meta-rail-value{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-secondary);
}

/* Detail-stack: vertical rhythm */
.detail-stack{display:flex;flex-direction:column;gap:0;margin-top:16px}
.detail-stack > .var-detail + .var-detail,
.detail-stack > .dir-detail + .dir-detail{margin-top:56px}
.detail-stack .var-detail,.detail-stack .dir-detail{width:100%}

/* Mini code block: roomier, monospace tuned */
.detail-stack .mini-code{
  padding:22px 26px;
  font-size:13.5px;
  line-height:1.85;
  border-radius:var(--radius-md);
  background:var(--bg-code);
  border:1px solid var(--border-subtle);
  max-height:none;
  position:relative;
}
.detail-stack .mini-code::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,200,83,0.25),transparent);
}
.detail-stack .mini-code pre{font-family:var(--font-mono);color:var(--text-primary)}

/* Gotchas: editorial callouts */
.article-callouts{display:flex;flex-direction:column;gap:14px}
.article-callouts .var-gotcha{margin-top:0}
.var-gotcha{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 20px;
  background:rgba(255,166,87,0.04);
  border:none;
  border-left:3px solid rgba(255,166,87,0.45);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.var-gotcha .warn{
  font-size:16px;
  line-height:1.4;
  margin-top:1px;
  color:#ffa657;
  flex-shrink:0;
}
.var-gotcha p{
  font-family:var(--font-serif);
  font-size:18px;
  line-height:1.5;
  color:var(--text-secondary);
  font-style:italic;
  letter-spacing:-0.005em;
}

/* Related variables/directives at the bottom */
.var-related{margin-top:0}
.var-related .section-h{margin-bottom:14px}
.var-related-tags{display:flex;gap:8px;flex-wrap:wrap}
.var-related-tag{
  font-family:var(--font-mono);
  font-size:13px;
  padding:6px 14px;
  border-radius:6px;
  background:rgba(255,255,255,0.04);
  color:var(--text-primary);
  text-decoration:none;
  border:1px solid var(--border-subtle);
  transition:all 0.2s;
}
.var-related-tag:hover{
  background:var(--nginx-green-subtle);
  border-color:rgba(0,200,83,0.3);
  color:var(--text-accent);
  transform:translateY(-1px);
}
[data-theme="light"] .var-related-tag{background:rgba(0,0,0,0.03)}

/* Back link — Medium-style underlined sans link */
.article-back{margin-top:56px;text-align:center}
.article-back a{
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:500;
  color:var(--text-secondary);
  text-decoration:none;
  border-bottom:1px solid var(--border-default);
  padding-bottom:2px;
  transition:all 0.2s;
}
.article-back a:hover{
  color:var(--text-accent);
  border-color:var(--nginx-green-light);
}

/* Tighten directive meta-row on the article layout */
.article-card .dir-meta-row{
  margin:0 0 36px;
  padding:18px 22px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
}
[data-theme="light"] .article-card .dir-meta-row{background:rgba(0,0,0,0.02)}

@media(max-width:760px){
  .article-hero{padding:104px 24px 20px}
  .article-card .var-body-inner,
  .article-card .dir-body-inner{padding:20px 24px 36px !important}
  /* Mobile prose: left-align (justify produces big word-spacing rivers at
     narrow widths) and flatten the dropcap (shape-outside fights justified
     text on phones). */
  .prose{font-size:21px;line-height:1.55;text-align:left}
  .prose.has-dropcap .dropcap{
    shape-outside:none;
    -webkit-shape-outside:none;
    font-size:3.2em;
  }
  .section-h{font-size:24px}
  .article-title{letter-spacing:-1.4px;font-size:clamp(38px,9vw,56px)}
  .article-lede{font-size:21px}
  .var-gotcha p{font-size:18px}
  .article-rule{margin:40px 0;font-size:18px}
  /* Hero on home: kill the 100vh that creates an apparent empty viewport on
     phones; keep the dramatic full-bleed feel for desktop only. */
  .hero{min-height:auto;padding:84px 24px 48px}
}

/* ── Responsive ── */
@media(max-width:900px){
  .feature-grid,.module-grid{grid-template-columns:1fr}
  .code-grid{grid-template-columns:1fr}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px}
  .var-detail-grid{grid-template-columns:1fr}
  .page-switcher{bottom:12px;gap:2px;padding:4px}
  .page-switcher button{padding:8px 14px;font-size:12px}
  .nav-links,.nav-search-btn{display:none}
  .dir-detail-grid,.dir-card .dir-detail-grid{grid-template-columns:1fr}
  .ref-row{grid-template-columns:1fr;gap:6px;padding:12px 18px}
  .ref-name{font-size:13px}
  .ref-contexts{justify-content:flex-start}
}