:root{
  --bg:#0b0b0b;
  --surface:#0f0f12;
  --muted:#9aa0a6;
  --text:#e6eef6;
  --accent:#00d1b2;
  --accent-2:#7c5cff;
}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);}
.navbar-dark .navbar-nav .nav-link{color:var(--muted);}
.navbar-brand{font-weight:700; color:var(--text);}
.site-hero{background:linear-gradient(120deg, rgba(124,92,255,0.06), rgba(0,209,178,0.04)); border-bottom:1px solid rgba(255,255,255,0.04);}
.card{background:var(--surface); color:var(--text); border:1px solid rgba(255,255,255,0.04);}
.card .card-title{font-family: "Roboto Mono", SFMono-Regular, Menlo, Monaco, "Courier New", monospace;}
.btn-primary{background:var(--accent); border-color:transparent;}
.btn-light{background:#111; color:var(--text); border:1px solid rgba(255,255,255,0.04);}
.site-footer{background:transparent; color:var(--muted);}
table.table{background:transparent; color:var(--text);} 
pre{background:#071018; color:var(--muted); padding:1rem; border-radius:6px;}
img{border:1px solid rgba(255,255,255,0.03);}
.container a{color:var(--accent);} 
.carousel-visual{max-height:480px; object-fit:cover;}
/* Captions placed below carousel visuals */
.carousel-caption-below{
  background:linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,0.04);
  position:relative;
  z-index:1; /* captions sit above slide but leave room for controls */
  max-width:calc(100% - 128px); /* leave room for prev/next controls */
  margin:0 auto;
  padding:0.75rem 1rem;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.carousel-caption-below h3{color:var(--accent); margin-bottom:0.25rem}
.carousel-caption-below p{margin-bottom:0.5rem}

/* Ensure carousel controls stay on top and clickable */
.carousel-control-prev,
.carousel-control-next{
  z-index:10;
  width:56px; /* narrower controls to avoid overlapping caption buttons */
}
.carousel-control-prev .carousel-control-prev-icon,
.carousel-control-next .carousel-control-next-icon{
  background-size:20px 20px;
}
@media (prefers-contrast: more){
  :root{--text:#ffffff; --muted:#cfd8dc}
}