* { box-sizing:border-box; }
html { scroll-behavior: auto; } /* controlled via JS */
body { font-family: 'Inter', sans-serif; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:99px; }
.dark ::-webkit-scrollbar-thumb { background:#374151; }

/* ── Layout ── */
.sidebar { position:fixed; top:0; left:0; height:100vh; width:260px; overflow-y:auto; z-index:40; }
.content-wrap { max-width: 1100px; margin: 0 auto; }

/* ── Sticky header ── */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(229,231,235,0.8);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.dark .sticky-header {
  background: rgba(38,38,38,0.85);
  border-bottom-color: rgba(64,64,64,0.8);
}
.sticky-header.scrolled {
  box-shadow: 0 1px 16px rgba(0,0,0,0.07);
}
.dark .sticky-header.scrolled {
  box-shadow: 0 1px 16px rgba(0,0,0,0.35);
}

/* ── Section reveal (scroll-driven) ── */
.section-block {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.section-block.visible { opacity:1; transform:none; }

/* ── Nav click transition overlay ── */
#nav-flash {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  opacity: 0;
  background: rgba(37,99,235,0.06);
  transition: opacity 0.15s ease;
}
.dark #nav-flash { background: rgba(96,165,250,0.07); }
#nav-flash.flash { opacity: 1; }

/* ── Smooth section highlight on nav click ── */
.section-block.nav-highlight {
  animation: sectionPop 0.45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes sectionPop {
  0%   { opacity:0.4; transform: translateY(10px) scale(0.995); }
  100% { opacity:1;   transform: translateY(0)    scale(1); }
}

/* ── Active nav indicator ── */
.nav-link { position: relative; }
.nav-link.active-nav { background:#eff6ff; color:#2563eb; }
.dark .nav-link.active-nav { background:rgba(37,99,235,.12); color:#60a5fa; }
.nav-link.active-nav::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: #2563eb;
  border-radius: 0 3px 3px 0;
}
.dark .nav-link.active-nav::before { background: #60a5fa; }

/* ── Progress bar ── */
#progress-bar {
  position: fixed;
  top: 0; left: 260px;
  height: 2px;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  z-index: 50;
  width: 0%;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

.code-tree span { display:block; line-height:1.85; }