:root{
  --bg: #f5f7fb;
  --card: #ffffff;
  --muted: #6b7280;
  --accent: #059669;
  --accent-2: #10b981;
  --glass: rgba(255,255,255,0.6);
  --code-bg: #0b1220;
}

/* Page base */
html,body{height:100%;}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, var(--bg) 0%, #eef3f8 100%);
  color: #0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1100px;margin:0 auto;padding:1.25rem}

/* Hero */
.hero-name{font-size:2.05rem;line-height:1;letter-spacing:-0.02em}
.hero-name{background:linear-gradient(90deg,#ecfdf5 0%, #bbf7d0 50%, #10b981 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.hero-sub{opacity:0.95;font-weight:500}

.bg-pattern{opacity:0.08}

/* Override the Tailwind hero gradient with a refined palette */
/* keep original tailwind gradient classes (green) intact; no override needed */

/* Navigation */
nav a{color:rgba(255,255,255,0.95);transition:all .18s}
nav a.secondary{background:white;color:var(--accent);padding:.55rem 1rem;border-radius:999px;font-weight:700}

/* Cards */
.card{background:var(--card);border-radius:14px;padding:1.35rem;margin-bottom:1.25rem;position:relative;overflow:hidden}
.card .section-title{font-size:1.1rem;color:#071123}
.card small{color:var(--muted)}

/* Section title accent */
.section-title{display:flex;align-items:center;gap:.75rem;padding-bottom:.5rem}
.section-title::after{left:auto;right:0;height:6px;width:48px;border-radius:6px;background:var(--accent)}

/* TOC aside */
.toc-aside{position:sticky;top:84px}
.toc-aside a{display:block;padding:.45rem 0;color:var(--muted);transition:all .16s}
.toc-aside a:hover{color:var(--accent-2);transform:translateX(6px)}
.toc-aside a.active-toc{color:var(--accent);font-weight:700}

/* Videos and images */
video, .image-container{border-radius:12px;box-shadow:0 10px 30px rgba(2,6,23,0.08)}

/* Code blocks */
pre{background:var(--code-bg);color:#e6eef6;padding:1rem;border-radius:10px;overflow:auto;border:1px solid rgba(255,255,255,0.03)}
pre code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;font-size:0.92rem}
.copy-btn{background:rgba(255,255,255,0.04);color:#c9eede;border:1px solid rgba(255,255,255,0.03)}

/* Back to top */
.back-to-top{right:1rem;bottom:1.25rem;padding:.6rem .7rem;font-weight:700}

/* Footer */
footer{background:#071229}
footer a{color:#9ae6b4}

/* Responsive tweaks */
@media (min-width: 768px){
  .hero-name{font-size:2.85rem}
  .container{padding:2rem}
}

/* subtle entrance */
.card{transform:translateY(0);transition:transform .36s cubic-bezier(.2,.9,.3,1),box-shadow .36s}
.card:hover{transform:translateY(-6px)}