:root{
  --bs-accent:#0d6efd; /* primary accent */
  --hero-height: min(680px, 75vh);
}
body{font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}

/* Hero / jumbotron */
.hero{
  min-height: var(--hero-height);
  display:flex;
  align-items:center;
  background-image: linear-gradient(rgba(10,10,10,0.45), rgba(10,10,10,0.45)), url('https://images.unsplash.com/photo-1506619216599-9d16b4cb1f6b?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&s=');
  background-size:cover;
  background-position:center center;
  color: #fff;
}

.hero .lead{color:rgba(255,255,255,0.92)}

/* Feature cards */
.feature-card{border:0; border-radius:1rem; box-shadow:0 8px 30px rgba(18, 38, 63, 0.08)}

/* Subtle page container */
.page-wrap{padding-top:3.5rem; padding-bottom:3.5rem}

footer{background:#0f1724; color:#d1d5db; padding:2rem 0}

/* Utilities */
.btn-ghost{
  background:transparent; border:1px solid rgba(255,255,255,0.18); color:#fff
}

@media (max-width:720px){
  .hero{padding:4rem 1rem}
  .hero h1{font-size:1.9rem}
}
.snippet-wrap {
  margin-bottom: 2rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  background: #fff;
}

.snippet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f7f7f7;
  border-bottom: 1px solid #ddd;
  padding: 6px 10px;
}

.snippet-header strong {
  font-size: 14px;
  color: #333;
}

.btn-copy {
  appearance: none;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s;
}

.btn-copy:active { transform: translateY(1px); }
.btn-copy.success {
  background: #e6ffed;
  border-color: #7be495;
}

pre.code-block {
  margin: 0;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  overflow: auto;
  max-height: 400px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
}

pre.line-numbers .line-numbers-rows { border-right: 1px solid #ccc; }
pre.line-numbers .line-numbers-rows > span:before { color: #888; }

.load-status {
  font-size: 12px;
  color: #777;
  margin-left: 6px;
}