
:root{--brand-500:#0d6efd;--link:#0d6efd;--link-dark:#66b2ff;--text:#212529;--bg:#ffffff;--muted:#6c757d;--card:#ffffff;--border:rgba(0,0,0,.1)}
html,body{height:100%}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg) url('/assets/images/background.webp') repeat}
html[data-theme="dark"]{--text:#e9ecef;--bg:#121212;--card:#1e1e1e;--border:rgba(255,255,255,.12)}
html[data-theme="dark"] body{background:var(--bg) url('/assets/images/background.webp') repeat}
html[data-theme="dark"] a{color:var(--link-dark)}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
.navbar{box-shadow:0 2px 10px rgba(0,0,0,.05)}
.card{border:1px solid var(--border);background:var(--card);border-radius:1rem}
.code-block{position:relative;border:1px solid rgba(13,110,253,.2);border-radius:.75rem;padding:1rem;background:rgba(13,110,253,.03);overflow:auto}
.copy-btn{position:absolute;top:.5rem;right:.5rem}
.sidebar-wrap{position:sticky;top:1rem}
.sidebar{border:1px solid var(--border);border-radius:.75rem;background:var(--card)}
.sidebar .list-group-item{background:transparent;border:0}
.sidebar .list-group-item a{display:block;padding:.35rem 0}
.sidebar .accordion-button{background:transparent}
#sidebarToggle{display:none}@media (max-width:991.98px){#sidebarToggle{display:inline-flex}}
.code-editor{width:100%;height:220px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:.75rem;border:1px solid var(--border);border-radius:.5rem;background:var(--card);color:var(--text)}
.output-console{width:100%;height:180px;background:#000;color:#0f0;border-radius:.5rem;padding:.75rem;overflow:auto}
html[data-font='sm']{font-size:14px}html[data-font='md']{font-size:16px}html[data-font='lg']{font-size:18px}
/* Font size classes */
body.font-sm { font-size: 14px; }
body.font-md { font-size: 16px; } /* default */
body.font-lg { font-size: 18px; }

/* Dark mode styles */
html[data-theme='dark'] {
  background-color: #121212;
  color: #e0e0e0;
}

html[data-theme='dark'] a {
  color: #90caf9;
}

html[data-theme='dark'] .navbar,
html[data-theme='dark'] .card,
html[data-theme='dark'] .border-bottom {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

/* Prevent code overflow on mobile */
.code-shell { white-space: pre-wrap; word-break: break-word; }

/* Optional: subtle code frame */
pre.code-shell { padding: 1rem; border: 1px solid rgba(0,0,0,.08); border-radius: .5rem; background: #f8f9fa; }



/* Global Bootstrap overrides (affects all components) */
:root {
  /* Typography */
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bs-body-font-size: 0.85rem;   /* default ~16px => ~15.2px  --bs-body-font-size: 0.95rem; */
  --bs-body-line-height: 2; /* 1.7 */
  --bs-body-color: #333;
  --bs-heading-color: #111;

  /* Spacing refinements */
  --bs-border-radius: .6rem;
}

/* Headings (slightly smaller & tighter) */
h1, .h1 { font-size: 1.6rem; margin-bottom: 1rem; } /* 1.9rem */
h2, .h2 { font-size: 1.45rem; margin: 1.2rem 0 .75rem; }
h3, .h3 { font-size: 1.2rem; margin: 1rem 0 .5rem; }

/* Text rhythm */
p, li { margin-bottom: .45rem; } /* .65rem */
.lead { font-size: .85rem; line-height: 2; } /* font-size: 1.05rem; line-height: 1.75 */

/* List groups a bit denser */
.list-group-item { padding: .6rem .9rem; }

/* ToC styling */
.toc {
  border-left: 3px solid #0d6efd;
  padding-left: 1rem;
  margin-bottom: 2rem;
}
.toc a { text-decoration: none; color: #0d6efd; }
.toc a:hover { text-decoration: underline; }

/* Code */
pre, code { font-size: .9rem; line-height: 1.6; }

/* Optional: better readable code blocks */
pre, code, .code-block { font-size: .9rem; line-height: 1.6; }

/* in style.css */
.blog-post {
  font-size: 1rem;   /* smaller text */
  line-height: 1.6;  /* better readability */
}
.blog-post h1, .blog-post h2 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}