/* ============================================================
   JS Notes — stylesheet
   Design: "the margin notes" — a warm, highlighter-amber accent
   on an ink-navy reading surface, built for long-form learning.
   ============================================================ */

:root{
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --radius: 10px;
  --header-h: 64px;
  --sidebar-w: 280px;
  --toc-w: 240px;
  --max-content: 760px;
}

[data-theme="dark"]{
  --bg: #0F1420;
  --bg-raised: #161D2E;
  --bg-inset: #0A0E17;
  --border: #262f45;
  --text: #E9E6DE;
  --text-dim: #A7ADBE;
  --text-mute: #6E7789;
  --accent: #E8A33D;
  --accent-ink: #1B1300;
  --accent-2: #4FD1C5;
  --danger: #E8735B;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --code-bg: #0A0E17;
}

[data-theme="white"]{
  --bg: #FFFFFF;
  --bg-raised: #F7F7F7;
  --bg-inset: #EFEFEF;
  --border: #DEDEDE;
  --text: #111111;
  --text-dim: #444444;
  --text-mute: #888888;
  --accent: #B5760A;
  --accent-ink: #FFF8EE;
  --accent-2: #0E8074;
  --danger: #C24328;
  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --code-bg: #1A1A1A;
}

[data-theme="darker"]{
  --bg: #1A1A1A;
  --bg-raised: #242424;
  --bg-inset: #111111;
  --border: #333333;
  --text: #E8E8E8;
  --text-dim: #AAAAAA;
  --text-mute: #666666;
  --accent: #E8A33D;
  --accent-ink: #1B1300;
  --accent-2: #4FD1C5;
  --danger: #E8735B;
  --shadow: 0 10px 30px rgba(0,0,0,.5);
  --code-bg: #111111;
}

[data-theme="pink"]{
  --bg: #FDF0F5;
  --bg-raised: #FFF5F8;
  --bg-inset: #F9E3EC;
  --border: #F0C4D8;
  --text: #2D1520;
  --text-dim: #6B3A4E;
  --text-mute: #B07090;
  --accent: #C4286A;
  --accent-ink: #FFF0F5;
  --accent-2: #9B27AF;
  --danger: #D03030;
  --shadow: 0 10px 30px rgba(180,60,100,.12);
  --code-bg: #1A0B12;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--accent-2); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width:100%; }
::selection{ background: var(--accent); color: var(--accent-ink); }

/* ---------- Themed scrollbars (Firefox + WebKit) ---------- */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-corner{ background: transparent; }
::-webkit-scrollbar-thumb{
  background-color: var(--border);
  border-radius: 8px;
  border: 3px solid var(--bg);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background-color: var(--text-mute);
  background-clip: padding-box;
}
/* Panels with a different surface color need a matching thumb border */
#sidebar::-webkit-scrollbar-thumb,
#toc::-webkit-scrollbar-thumb{ border-color: var(--bg); }
pre::-webkit-scrollbar{ height: 9px; }
pre::-webkit-scrollbar-thumb{
  background-color: #333333;
  border: 2px solid #111111;
  background-clip: padding-box;
}
pre::-webkit-scrollbar-thumb:hover{
  background-color: #666666;
}
pre{ scrollbar-color: #333333 transparent; }

/* ---------- Scroll progress ---------- */
#scroll-progress{
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index: 200; transition: width .1s linear;
}

/* ---------- Header ---------- */
#site-header{
  position: sticky; top:0; z-index: 150;
  height: var(--header-h);
  display:flex; align-items:center; gap:16px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-weight:700; font-size:1.05rem;
  color: var(--text); white-space:nowrap;
}
.brand .mark{
  width:28px; height:28px; border-radius:4px;
  background: #F7DF1E;
  display:flex; align-items:center; justify-content:center;
  color:#000; font-weight:900; font-family: var(--font-mono); font-size:.8rem;
  letter-spacing:-.5px; flex-shrink:0;
}
#menu-toggle{
  display:none; background:none; border:1px solid var(--border); border-radius:8px;
  width:36px; height:36px; color:var(--text); cursor:pointer;
}

#search-box{ position:relative; flex:1; max-width: 420px; margin-left: 8px; }
#search-input{
  width:100%; padding:9px 12px 9px 36px; border-radius:8px;
  border:1px solid var(--border); background: var(--bg-inset); color:var(--text);
  font-family: var(--font-body); font-size:.92rem;
}
#search-box::before{
  content:"⌕"; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--text-mute); font-size:1rem; pointer-events:none;
}
.kbd-hint{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family: var(--font-mono); font-size:.72rem; color:var(--text-mute);
  border:1px solid var(--border); border-radius:5px; padding:1px 5px;
  background: var(--bg-raised);
}
#search-results{
  display:none; position:absolute; top:calc(100% + 8px); left:0; right:0;
  background: var(--bg-raised); border:1px solid var(--border); border-radius:10px;
  box-shadow: var(--shadow); max-height: 340px; overflow:auto; z-index:100;
}
#search-results.show{ display:block; }
.search-hit{ display:flex; justify-content:space-between; gap:10px; padding:10px 14px; color:var(--text); border-bottom:1px solid var(--border); }
.search-hit:last-child{ border-bottom:none; }
.search-hit:hover{ background: var(--bg-inset); text-decoration:none; }
.hit-title{ font-family: var(--font-display); font-size:.9rem; }
.hit-cat{ font-size:.75rem; color: var(--text-mute); white-space:nowrap; }
.search-empty{ padding:14px; color:var(--text-mute); font-size:.85rem; }

.header-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
#theme-toggle{
  width:38px; height:38px; border-radius:9px; border:1px solid var(--border);
  background: var(--bg-raised); color: var(--text); cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
#theme-toggle::after{ content:"🌙"; }
[data-theme="white"] #theme-toggle::after{ content:"☀️"; }
[data-theme="darker"] #theme-toggle::after{ content:"🌑"; }
[data-theme="pink"] #theme-toggle::after{ content:"🌸"; }

/* ---------- Layout ---------- */
#layout{
  display:grid;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr) var(--toc-w);
  max-width: 1440px; margin:0 auto;
}
#sidebar{
  border-right: 1px solid var(--border);
  height: calc(100vh - var(--header-h));
  position: sticky; top: var(--header-h);
  overflow-y:auto; padding: 22px 14px;
}
#sidebar-nav ul{ list-style:none; padding:0; margin:0; }
.nav-cat{ margin-bottom: 4px; }
.nav-cat-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; color: var(--text-dim); cursor:pointer;
  font-family: var(--font-display); font-size:.8rem; letter-spacing:.04em;
  text-transform: uppercase; padding: 10px 8px;
}
.nav-cat-toggle:hover{ color: var(--text); }
.chev{ transition: transform .18s ease; }
.nav-cat.open .chev{ transform: rotate(180deg); }
.nav-list{ list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; }
.nav-cat.open .nav-list{ max-height: 2000px; }
.nav-item{ font-size:.9rem; }
.nav-item a{
  display:block; color: var(--text-dim); padding:7px 10px 7px 14px;
  border-left: 2px solid transparent; border-radius: 0 6px 6px 0;
}
.nav-item a:hover{ color: var(--text); text-decoration:none; background: var(--bg-inset); }
.nav-item.active a{
  color: var(--accent); border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-weight:600;
}
.nav-item.soon{
  display:flex; justify-content:space-between; align-items:center; padding:7px 10px 7px 14px;
  color: var(--text-mute); font-size:.87rem;
}
.nav-item.soon > span:first-child{ flex:1; min-width:0; }
.tag{
  font-family: var(--font-mono); font-size:.65rem; border:1px solid var(--border);
  border-radius:4px; padding:1px 5px; color: var(--text-mute);
}

main{ min-width:0; padding: 40px clamp(20px,4vw,56px) 80px; }
#breadcrumb{ font-size:.85rem; color: var(--text-mute); margin-bottom: 18px; }
#breadcrumb a{ color: var(--text-mute); }
#breadcrumb .current{ color: var(--text); }
#breadcrumb .sep{ margin: 0 6px; }

#toc{
  border-left: 1px solid var(--border);
  height: calc(100vh - var(--header-h));
  position: sticky; top: var(--header-h);
  padding: 26px 20px; overflow-y:auto;
}
#toc.empty{ visibility:hidden; }
#toc h4{ font-family: var(--font-display); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color: var(--text-mute); margin: 0 0 10px; }
#toc-list{ list-style:none; margin:0; padding:0; border-left:1px solid var(--border); }
#toc-list li a{
  display:block; font-size:.85rem; color: var(--text-dim); padding:6px 0 6px 14px;
}
#toc-list li a:hover{ color: var(--accent); text-decoration:none; }
#reading-time{
  display:block; margin-top: 20px; padding-top:16px; border-top:1px solid var(--border);
  font-size:.78rem; color: var(--text-mute);
}

/* ---------- Article typography ---------- */
article#content{ max-width: var(--max-content); }
#content h1{
  font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.5rem);
  margin: 0 0 6px; line-height:1.15;
}
.lede{ color: var(--text-dim); font-size:1.1rem; margin: 0 0 30px; }
#content h2{
  font-family: var(--font-display); font-size:1.4rem; margin: 46px 0 14px;
  padding-bottom:8px; border-bottom: 1px dashed var(--border);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
#content h3{ font-family: var(--font-display); font-size:1.12rem; margin: 26px 0 10px; color: var(--text); }
#content p{ margin: 0 0 16px; color: var(--text); }
#content ul, #content ol{ margin: 0 0 16px; padding-left: 22px; }
#content li{ margin-bottom:6px; }
#content strong{ color: var(--accent); font-weight:700; }

/* callouts */
.callout{
  border-radius: var(--radius); padding: 14px 16px; margin: 18px 0;
  border: 1px solid var(--border); background: var(--bg-raised); font-size:.95rem;
}
.callout-title{ font-family: var(--font-display); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; display:flex; align-items:center; gap:6px;}
.callout.tip{ border-left:3px solid var(--accent-2); }
.callout.tip .callout-title{ color: var(--accent-2); }
.callout.warn{ border-left:3px solid var(--danger); }
.callout.warn .callout-title{ color: var(--danger); }
.callout.note{ border-left:3px solid var(--accent); }
.callout.note .callout-title{ color: var(--accent); }

/* analogy / visual boxes */
.analogy{
  background: var(--bg-inset); border-radius: var(--radius); padding: 16px 18px; margin: 18px 0;
  border: 1px dashed var(--border);
}
.analogy .callout-title{ color: var(--text-dim); }

/* code */
/* Code blocks: the copy button lives in its own toolbar strip above the
   scrollable code, so it can never sit on top of (or get covered by) code
   or comments, no matter how long a line is or how far it's scrolled. */
.code-block{
  background: #111111; border-radius: var(--radius);
  margin: 14px 0; border:1px solid #333333; overflow:hidden;
}
.code-toolbar{
  display:flex; align-items:center; justify-content:flex-end;
  padding: 7px 10px; gap:8px;
  background: #1e1e1e;
  border-bottom: 1px solid #333333;
}
.code-block pre{
  background: transparent; border-radius:0; padding: 16px 18px 18px;
  overflow-x:auto; margin:0; border:none;
}
/* Fallback: a bare <pre> not (yet) wrapped by JS still looks correct */
pre{
  background: #111111; border-radius: var(--radius); padding: 18px 18px 16px;
  overflow-x:auto; margin: 14px 0; border:1px solid #333333;
}
code{ font-family: var(--font-mono); font-size:.86rem; }
:not(pre) > code{
  background: var(--bg-inset); padding: 2px 6px; border-radius:5px; color: var(--accent);
  border:1px solid var(--border);
}
pre code{ color:#E9E6DE; line-height:1.65; display:block; }
.copy-btn{
  flex-shrink:0; background: #242424;
  color: #AAAAAA; border:1px solid #333333; border-radius:6px;
  font-family: var(--font-mono); font-size:.7rem; padding:5px 10px; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; line-height:1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.copy-btn:hover{ background: #111111; color: #E8E8E8; border-color: #666666; }
.copy-btn:active{ transform: translateY(1px); }
.copy-btn.copied{ color: var(--accent-2); border-color: var(--accent-2); }
/* ── VS Code Default Dark+ syntax highlighting for HTML code blocks ── */
/* These token classes mirror the exact colors from VS Code's default theme */

/* HTML tag angle brackets  < > and </  */
.hl-punct    { color: #808080; }
/* HTML tag names  div, p, h1, a … */
.hl-tag      { color: #569CD6; }
/* HTML attribute names  href, class, src … */
.hl-attr     { color: #9CDCFE; }
/* HTML attribute values  "…"  */
.hl-val      { color: #CE9178; }
/* HTML comments  <!-- … --> */
.hl-comment  { color: #6A9955; font-style: italic; }
/* DOCTYPE keyword */
.hl-doctype  { color: #569CD6; }
/* Entity references  &amp; &lt; &nbsp; */
.hl-entity   { color: #569CD6; }
/* Plain text content between tags */
.hl-text     { color: #D4D4D4; }

/* Legacy token classes kept for any JS-lesson pages that still use them */
.tok-kw{ color:#569CD6; } .tok-str{ color:#CE9178; } .tok-com{ color:#6A9955; font-style:italic;}
.tok-num{ color:#B5CEA8; } .tok-fn{ color:#DCDCAA; }

/* ── VS Code Default Dark+ syntax highlighting for JS code blocks ── */
/* Colors taken directly from VS Code's default dark_plus.json theme        */
.js-keyword    { color: #569CD6; }                /* const let var function class new typeof etc */
.js-control    { color: #C586C0; }                /* if else for while return throw try catch …  */
.js-string     { color: #CE9178; }                /* "strings" 'strings' `template literals`     */
.js-comment    { color: #6A9955; font-style: italic; } /* // line  /* block */                   */
.js-number     { color: #B5CEA8; }                /* 42  3.14  0xFF  0b1010  900n               */
.js-fn         { color: #DCDCAA; }                /* function calls: log() push() myFn()         */
.js-variable   { color: #9CDCFE; }                /* local variables and identifiers             */
.js-builtin    { color: #9CDCFE; }                /* console Math JSON document etc (singletons) */
.js-class      { color: #4EC9B0; }                /* Number String Array Promise Error etc (constructors/classes) */
.js-property   { color: #9CDCFE; }                /* .property access on objects                 */
.js-regex      { color: #D16969; }                /* /regex/gi                                   */
.js-punct      { color: #D4D4D4; }                /* ; , .                                       */
.js-operator   { color: #D4D4D4; }                /* = + - * / % === !== && || ?? ...            */
/* Rainbow bracket-pair colorisation — matches VS Code Default Dark+ bracket pair colours */
.js-bracket-1  { color: #FFD700; }                /* depth 1 → gold    e.g. outer (){}[]         */
.js-bracket-2  { color: #DA70D6; }                /* depth 2 → orchid  e.g. nested (){}[]        */
.js-bracket-3  { color: #179FFF; }                /* depth 3 → blue    e.g. deep (){}[]          */

/* ── VS Code Default Dark+ syntax highlighting for CSS code blocks ── */
.css-selector  { color: #D7BA7D; }
.css-prop      { color: #9CDCFE; }
.css-value     { color: #CE9178; }
.css-unit      { color: #B5CEA8; }
.css-hex       { color: #CE9178; }
.css-fn        { color: #DCDCAA; }
.css-at        { color: #C586C0; }
.css-comment   { color: #6A9955; font-style: italic; }
.css-brace     { color: #D4D4D4; }
.css-punct     { color: #D4D4D4; }
.css-important { color: #569CD6; font-weight: bold; }

/* explain-line breakdown blocks */
.line-breakdown{ list-style:none; margin: 10px 0 20px; padding:0; border-left:2px solid var(--accent); }
.line-breakdown li{ padding: 4px 0 4px 14px; font-size:.92rem; color: var(--text-dim); }
.line-breakdown code{ color: var(--accent); }

/* tables */
table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:.92rem; }
th, td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); }
th{ font-family: var(--font-display); color: var(--text-dim); font-weight:600; }

/* quiz / exercise / challenge */
.exercise, .quiz, .challenge{
  border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin: 20px 0;
  background: var(--bg-raised);
}
.exercise h4, .quiz h4, .challenge h4{
  margin:0 0 10px; font-family: var(--font-display); font-size:.95rem;
  display:flex; align-items:center; gap:8px;
}
details.qa{ border-top:1px dashed var(--border); margin-top:10px; padding-top:10px; }
details.qa summary{ cursor:pointer; color: var(--accent-2); font-size:.9rem; }
details.qa p{ margin-top:8px; }

.related-list{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; padding:0; list-style:none; }
.related-list a{
  display:inline-block; border:1px solid var(--border); border-radius:20px; padding:6px 14px;
  font-size:.85rem; color: var(--text-dim);
}
.related-list a:hover{ color:var(--accent); border-color: var(--accent); text-decoration:none; }

.mdn-ref{
  font-size:.82rem; color: var(--text-mute); margin-top:8px; padding-top:10px; border-top:1px solid var(--border);
}

/* prev/next pager */
#pager{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top: 50px; }
.pager-btn{
  border:1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
  display:flex; flex-direction:column; gap:4px; color: var(--text);
}
.pager-btn:hover{ border-color: var(--accent); text-decoration:none; }
.pager-btn.next{ text-align:right; align-items:flex-end; }
.pager-label{ font-size:.72rem; color: var(--text-mute); font-family: var(--font-mono); }
.pager-title{ font-family: var(--font-display); font-size:.92rem; }

/* back to top */
#back-to-top{
  position: fixed; bottom: 26px; right: 26px; width:44px; height:44px; border-radius:50%;
  background: var(--accent); color: var(--accent-ink); border:none; font-size:1.1rem;
  cursor:pointer; opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease;
  box-shadow: var(--shadow); z-index:120;
}
#back-to-top.show{ opacity:1; pointer-events:auto; }
#back-to-top:hover{ transform: translateY(-3px); }

/* ---------- Home page ---------- */
.hero{ padding: 64px clamp(20px,5vw,80px) 30px; max-width:1100px; margin:0 auto; }
.hero .eyebrow{
  font-family: var(--font-mono); font-size:.8rem; color: var(--accent);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; display:block;
}
.hero h1{ font-family: var(--font-display); font-size: clamp(2.4rem,5vw,3.6rem); line-height:1.08; margin:0 0 18px; max-width: 14ch; }
.hero p.sub{ font-size:1.15rem; color: var(--text-dim); max-width: 60ch; margin:0 0 30px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  font-family: var(--font-display); font-weight:600; padding: 12px 22px; border-radius:9px;
  display:inline-block; border:1px solid var(--border);
}
.btn.primary{ background: var(--accent); color: var(--accent-ink); border-color:var(--accent); }
.btn.primary:hover{ text-decoration:none; filter:brightness(1.06); }
.btn.ghost{ color: var(--text); }
.btn.ghost:hover{ text-decoration:none; border-color: var(--accent); }

#progress-summary{ max-width: 460px; margin: 26px 0 0; }
.progress-track{ height:8px; border-radius:5px; background: var(--bg-inset); overflow:hidden; border:1px solid var(--border);}
.progress-fill{ height:100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
#progress-summary p{ font-size:.85rem; color: var(--text-mute); margin: 8px 0 0; }

.home-grid{
  max-width:1100px; margin: 30px auto 80px; padding: 0 clamp(20px,5vw,80px);
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:18px;
}
.cat-card{
  border:1px solid var(--border); border-radius: 14px; padding:22px; background: var(--bg-raised);
}
.cat-card h3{ font-family: var(--font-display); margin:0 0 6px; font-size:1.05rem; }
.cat-card p{ color: var(--text-mute); font-size:.85rem; margin:0 0 14px; }
.cat-card .count{ font-family: var(--font-mono); font-size:.75rem; color: var(--accent); }

.feature-strip{
  max-width:1100px; margin:0 auto 70px; padding: 0 clamp(20px,5vw,80px);
  display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:16px;
}
.feature{ padding:18px; border-left:2px solid var(--accent); }
.feature h4{ font-family: var(--font-display); margin:0 0 6px; font-size:.95rem; }
.feature p{ color: var(--text-mute); font-size:.85rem; margin:0; }

footer.site-footer{
  text-align:center; padding: 30px; color: var(--text-mute); font-size:.82rem;
  border-top:1px solid var(--border);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  #layout{ grid-template-columns: var(--sidebar-w) minmax(0,1fr); }
  #toc{ display:none; }
}
@media (max-width: 860px){
  #menu-toggle{ display:flex; align-items:center; justify-content:center; }
  #layout{ grid-template-columns: 1fr; }
  #sidebar{
    position: fixed; left:0; top:var(--header-h); bottom:0; width: 84vw; max-width:320px;
    background: var(--bg); z-index: 140; transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow);
  }
  #sidebar.open{ transform: translateX(0); }
  #search-box{ display:none; }
  main{ padding: 28px 18px 70px; }
  #pager{ grid-template-columns: 1fr; }
}

/* ── Code Runner Live Editor styling ── */
.editor-wrapper {
  position: relative !important;
  width: 100% !important;
  min-height: 220px !important;
  background: #111111 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Base styles shared by highlight pre and the textarea to ensure 100% pixel-perfect caret alignment */
.editor-highlight-pre,
.editor-textarea {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.86rem !important;
  line-height: 1.65 !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
  box-sizing: border-box !important;
  border: none !important;
  outline: none !important;
  overflow: auto !important;
}

.editor-highlight-pre {
  background: #111111 !important;
  color: #e9e6de !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.editor-highlight-code {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: #e9e6de !important;
}

.editor-textarea {
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: #e9e6de !important;
  z-index: 2 !important;
  resize: none !important;
}