:root{
  --code-bg: #1e1e1e;
  --monokai-bg: #272822;
  --gutter-bg: #1b1b1b;
  --gutter-sep: #2a2a2a;
  --gutter-color: #7a7a7a;
  --code-border: #3c3c3c;
  --inline-chip: rgba(60,60,60,0.8);
  --fg: #ddd;
  --vscode-fg: #d4d4d4;
  --gutter-width: 3.5rem;   /* VS Code-like gutter width */
  --line-padding-x: 16px;   /* horizontal padding inside the code pane */
}

/* --- Base markdown vibe (light touch) --- */
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", sans-serif;
  font-size: 14px; line-height: 1.5; word-wrap: break-word;
}
img{ max-width:100%; height:auto; }
a{ text-decoration:none; } a:hover{ text-decoration:underline; }
table{ border-collapse:collapse; } table th{ text-align:left; }

/* --- Inline code chip (dark) --- */
:not(pre):not(.hljs) > code{
  font-family: "Fira Code", Consolas, Menlo, monospace;
  font-size: .9em;
  background: var(--inline-chip);
  color: #e6e6e6;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: pre-wrap;
}

/* --- Fenced code base --- */
pre{
  background: var(--code-bg) !important;
  border: 1px solid var(--code-border);
  border-radius: 6px;
  margin: 1.2em 0;
  padding: 0;               /* we'll pad inside the code area */
  overflow: auto;           /* vertical scroll if tall */
}
pre code{
  display:block;
  font-family: "Fira Code", Consolas, Menlo, monospace;
  font-size: .9em;
  color: var(--vscode-fg);
  white-space: pre-wrap !important;  /* your preference: wrap long lines */
  word-break: break-word;
}

/* --- Highlight.js Monokai token colors --- */
.hljs{
  background: var(--monokai-bg);
  color: var(--fg);
}
.hljs-tag,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-strong,
.hljs-name { color:#f92672; }
.hljs-code { color:#66d9ef; }
.hljs-class .hljs-title { color:#fff; }
.hljs-attribute,
.hljs-symbol,
.hljs-regexp,
.hljs-link { color:#bf79db; }
.hljs-string,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-section,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable { color:#a6e22e; }
.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta { color:#75715e; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-selector-id { font-weight:bold; }

/* --- Disable ligatures globally for code --- */
pre code, code{
  font-variant-ligatures:none;
  -webkit-font-variant-ligatures:none;
  font-feature-settings:"liga" 0, "calt" 0, "clig" 0;
}

/* --- Dark thin scrollbars for code --- */
pre::-webkit-scrollbar, .hljs::-webkit-scrollbar{ height:8px; width:8px; }
pre::-webkit-scrollbar-track, .hljs::-webkit-scrollbar-track{ background:var(--code-bg); }
pre::-webkit-scrollbar-thumb, .hljs::-webkit-scrollbar-thumb{ background:var(--code-border); border-radius:6px; }
pre::-webkit-scrollbar-thumb:hover, .hljs::-webkit-scrollbar-thumb:hover{ background:#555; }
pre, .hljs{ scrollbar-color: var(--code-border) var(--code-bg); scrollbar-width: thin; }

/* =========================================================
   VS CODE-STYLE LINE NUMBERS (GUTTER)
   ========================================================= */
pre.with-gutter{
  position: relative;
  background: var(--monokai-bg) !important; /* match hljs background */
  border: 1px solid var(--code-border);
  border-radius: 6px;
}
pre.with-gutter code.hljs{
  padding: 10px var(--line-padding-x) 10px calc(var(--gutter-width) + var(--line-padding-x));
  counter-reset: linenumber;
  position: relative;
}

/* each logical line becomes a block; we number them via counter */
pre.with-gutter code.hljs .code-line{
  display:block;
  position:relative;
  min-height: 1.5em; /* keeps empty lines visible */
}

/* number column */
pre.with-gutter code.hljs .code-line::before{
  counter-increment: linenumber;
  content: counter(linenumber);
  position:absolute;
  left: calc(-1 * var(--gutter-width));
  width: calc(var(--gutter-width) - 10px);
  text-align:right;
  color: var(--gutter-color);
  padding-right: 10px;
  user-select: none;
  opacity: .9;
}

/* vertical separator to the right of gutter */
pre.with-gutter::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left: var(--gutter-width);
  width:1px;
  background: var(--gutter-sep);
  pointer-events:none;
  border-top-left-radius:6px;
  border-bottom-left-radius:6px;
}

/* gutter background */
pre.with-gutter::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:0;
  width: var(--gutter-width);
  background: var(--gutter-bg);
  border-top-left-radius:6px;
  border-bottom-left-radius:6px;
}

/* =========================================================
   VS CODE-STYLE MAC TERMINAL CHROME (BASH/SH ONLY)
   ========================================================= */
.code-terminal{
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--code-border);
  margin: 1.2em 0;
}
.code-terminal .term-bar{
  background:#2d2d2d;
  color:#cfcfcf;
  font: 500 12px/1 "Segoe UI", system-ui, -apple-system, sans-serif;
  padding: 8px 12px;
  display:flex; align-items:center; gap:8px;
}
.code-terminal .term-dots{
  display:inline-flex; gap:6px; margin-right:8px;
}
.code-terminal .dot{
  width:10px; height:10px; border-radius:50%;
  display:inline-block;
}
.code-terminal .dot.red{ background:#ff5f56; }
.code-terminal .dot.yellow{ background:#ffbd2e; }
.code-terminal .dot.green{ background:#27c93f; }
.code-terminal .term-title{
  opacity:.85;
}

/* nest the actual code block */
.code-terminal pre{
  margin:0; border:0; border-radius:0;
}

/* ensure terminal + gutter play nicely */
.code-terminal pre.with-gutter::before{
  border-radius:0;
}
.code-terminal pre.with-gutter::after{
  border-radius:0;
}