

<!DOCTYPE html>

<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <link rel="stylesheet" href="/assets/css/just-the-docs-default.css">

  <link rel="stylesheet" href="/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet">

  <style id="jtd-nav-activation">
  
    .site-nav ul li a {
      background-image: none;
    }

  </style>

  

  
    <script src="/assets/js/vendor/lunr.min.js"></script>
  

  <script src="/assets/js/just-the-docs.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  



  <!-- Begin Jekyll SEO tag v2.8.0 -->
<title>scratchpad | my personal notes, diagrams, and random thoughts</title>
<meta name="generator" content="Jekyll v4.4.1" />
<meta property="og:title" content="scratchpad" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="my personal notes, diagrams, and random thoughts" />
<meta property="og:description" content="my personal notes, diagrams, and random thoughts" />
<link rel="canonical" href="https://myscratchpad.netlify.app/assets/css/just-the-docs-head-nav.css" />
<meta property="og:url" content="https://myscratchpad.netlify.app/assets/css/just-the-docs-head-nav.css" />
<meta property="og:site_name" content="scratchpad" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="scratchpad" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebPage","description":"my personal notes, diagrams, and random thoughts","headline":"scratchpad","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://myscratchpad.netlify.app/assets/img/logo.svg"}},"url":"https://myscratchpad.netlify.app/assets/css/just-the-docs-head-nav.css"}</script>
<!-- End Jekyll SEO tag -->


  <style>
@font-face {
  font-family: "Iosevka";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/iosevka@5.0.0/files/iosevka-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Iosevka";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/iosevka@5.0.0/files/iosevka-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
}
body, .site-nav, .main-content, h1, h2, h3, h4, h5, h6, p, li, td, th {
  font-family: "Iosevka", monospace !important;
  font-variant-ligatures: common-ligatures contextual !important;
  font-feature-settings: "liga" 1, "calt" 1 !important;
}
code, pre, .highlight {
  font-family: "Iosevka", monospace !important;
  font-variant-ligatures: common-ligatures contextual !important;
  font-feature-settings: "liga" 1, "calt" 1 !important;
}
mjx-container { font-family: unset !important; }
mjx-container * {
  font-family: unset !important;
  font-feature-settings: unset !important;
  font-variant-ligatures: unset !important;
  font-size: unset !important;
}
.site-logo { width: 1.2rem !important; height: 1.2rem !important; }
.site-title::after {
  content: "scratchpad";
  font-family: "Iosevka", monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  margin-left: 0.5rem;
  color: var(--sidebar-color);
}
.site-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}
#edit-this-page { display: none !important; }
#edit-this-page + p { display: none !important; }
.d-flex.mt-2 { display: none !important; }
body.page-home .site-footer { display: none !important; }
body.page-home .search { display: none !important; }
.main-content { max-width: 100% !important; padding: 2rem 3rem !important; }
.main-content-wrap { max-width: 1400px !important; }
a { color: #e8731a !important; cursor: pointer !important; }
a:hover { color: #ffaa55 !important; text-decoration: underline !important; }
.nav-list .nav-list-item .nav-list-link.active { color: #e8731a !important; font-weight: 700 !important; }
label.nav-list-expander { cursor: pointer !important; }
.search-input:focus { outline: none !important; border-color: #e8731a !important; box-shadow: 0 0 0 2px rgba(232,115,26,0.3) !important; }
.search-input { font-family: "Iosevka", monospace !important; outline: none !important; }
/* ⌘ K badge next to search */
.search-input-wrap {
  display: flex !important;
  align-items: center !important;
}
.search-input-wrap::after {
  content: "⌘ K";
  font-family: "Iosevka", monospace;
  font-size: 0.62rem;
  color: #444;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  margin-left: 0.5rem;
  white-space: nowrap;
  pointer-events: none;
  flex-shrink: 0;
}
[data-theme="light"] .search-input-wrap::after { color: #aaa; border-color: #ddd; }

/* ── search overlay ── */
#sp-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#sp-search-overlay.active { display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }

#sp-search-modal {
  width: min(580px, 90vw);
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
[data-theme="light"] #sp-search-modal {
  background: #fdf6e3;
  border-color: #e8dfc8;
  box-shadow: 0 24px 80px rgba(0,0,0,0.15);
}

#sp-search-modal-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #1e1e1e;
}
[data-theme="light"] #sp-search-modal-input-wrap { border-bottom-color: #e8dfc8; }

#sp-search-modal-input-wrap svg { color: #555; flex-shrink: 0; }
[data-theme="light"] #sp-search-modal-input-wrap svg { color: #93a1a1; }

#sp-search-modal-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: "Iosevka", monospace;
  font-size: 0.95rem;
  color: #ccc;
  caret-color: #e8731a;
}
[data-theme="light"] #sp-search-modal-input { color: #44434d; }
#sp-search-modal-input::placeholder { color: #444; }
[data-theme="light"] #sp-search-modal-input::placeholder { color: #93a1a1; }

/* results pane inside modal */
#sp-search-modal-results {
  max-height: 400px;
  overflow-y: auto;
}
#sp-search-modal-results .search-results {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-height: none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* hints bar */
#sp-search-hints {
  display: flex;
  gap: 1.2rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid #1a1a1a;
  font-family: "Iosevka", monospace;
  font-size: 0.65rem;
  color: #444;
}
[data-theme="light"] #sp-search-hints { border-top-color: #e8dfc8; color: #93a1a1; }

.sp-hint {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.sp-hint kbd {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  font-family: "Iosevka", monospace;
  font-size: 0.62rem;
  color: #666;
  line-height: 1.5;
}
[data-theme="light"] .sp-hint kbd { background: #eee8d5; border-color: #d5cfc4; color: #93a1a1; }
input:focus { outline: none !important; }
.side-bar { width: 18rem !important; min-width: 18rem !important; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #e8731a; border-radius: 3px; }
.site-title { font-family: "Iosevka", monospace !important; font-weight: 700 !important; letter-spacing: 0.05em !important; }
.table-of-contents { font-size: 0.85rem !important; border-left: 2px solid #e8731a !important; padding-left: 1rem !important; }
table { border-collapse: collapse !important; width: 100% !important; }
td, th { padding: 0.5rem 1rem !important; border: 1px solid #444 !important; }

/* ── headings & hr ── */
/* h1 underline, h2 faint underline, h3-h6 none */
h1 { border-bottom: 1px solid #333 !important; padding-bottom: 0.3em !important; }
h2 { border-bottom: 1px solid #252525 !important; padding-bottom: 0.2em !important; }
h3, h4, h5, h6 { border-bottom: none !important; }
/* hide hr that immediately follows h1 (between title and TOC) */
h1 + hr { display: none !important; }
/* hide hr after h5, h6 */
h5 + hr, h6 + hr { display: none !important; }
hr { background-color: #252525 !important; border: none !important; height: 1px !important; }

/* ── theme toggle button in header ── */
.sp-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  gap: 0.4rem;
  color: #555;
  font-family: "Iosevka", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  transition: color 0.2s;
  white-space: nowrap;
  outline: none;
}
.sp-theme-toggle:hover { color: #e8731a; }
.sp-theme-toggle svg { flex-shrink: 0; }

/* ── code blocks: dark (solarized dark palette) ── */
div.highlighter-rouge { position: relative; }
div.highlight, .highlight {
  background: #002b36 !important;
  border: 1px solid #073642 !important;
  border-radius: 6px !important;
  padding: 1.1rem 1.2rem !important;
}
/* solarized dark syntax */
.highlight      { color: #839496 !important; }
.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kr  { color: #cb4b16 !important; font-style: normal !important; }
.highlight .kt  { color: #268bd2 !important; }
.highlight .nf,
.highlight .nd  { color: #268bd2 !important; }
.highlight .nc  { color: #b58900 !important; }
.highlight .s,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .si  { color: #2aa198 !important; }
.highlight .c,
.highlight .c1,
.highlight .cm  { color: #586e75 !important; font-style: italic !important; }
.highlight .mi,
.highlight .mf,
.highlight .m   { color: #d33682 !important; }
.highlight .no,
.highlight .kc  { color: #268bd2 !important; }
.highlight .n,
.highlight .nx  { color: #839496 !important; }
.highlight .nv  { color: #859900 !important; }
:not(pre) > code {
  background: #073642 !important;
  border: 1px solid #0a4555 !important;
  border-radius: 3px !important;
  color: #93a1a1 !important;
  padding: 0.15em 0.35em !important;
}

/* ── code blocks: light (solarized light palette) ── */
[data-theme="light"] div.highlight,
[data-theme="light"] .highlight {
  background: #fdf6e3 !important;
  border-color: #eee8d5 !important;
  color: #657b83 !important;
}
[data-theme="light"] .highlight .k,
[data-theme="light"] .highlight .kd,
[data-theme="light"] .highlight .kn,
[data-theme="light"] .highlight .kr  { color: #cb4b16 !important; }
[data-theme="light"] .highlight .kt  { color: #268bd2 !important; }
[data-theme="light"] .highlight .nf,
[data-theme="light"] .highlight .nd  { color: #268bd2 !important; }
[data-theme="light"] .highlight .nc  { color: #b58900 !important; }
[data-theme="light"] .highlight .s,
[data-theme="light"] .highlight .s2,
[data-theme="light"] .highlight .sb,
[data-theme="light"] .highlight .sc,
[data-theme="light"] .highlight .sd,
[data-theme="light"] .highlight .si  { color: #2aa198 !important; }
[data-theme="light"] .highlight .c,
[data-theme="light"] .highlight .c1,
[data-theme="light"] .highlight .cm  { color: #93a1a1 !important; font-style: italic !important; }
[data-theme="light"] .highlight .mi,
[data-theme="light"] .highlight .mf,
[data-theme="light"] .highlight .m   { color: #d33682 !important; }
[data-theme="light"] .highlight .no,
[data-theme="light"] .highlight .kc  { color: #268bd2 !important; }
[data-theme="light"] .highlight .n,
[data-theme="light"] .highlight .nx  { color: #657b83 !important; }
[data-theme="light"] .highlight .nv  { color: #859900 !important; }
[data-theme="light"] :not(pre) > code {
  background: #eee8d5 !important;
  border-color: #ddd6bf !important;
  color: #cb4b16 !important;
}

/* ── light theme: global ── */
[data-theme="light"] h1 { border-bottom-color: #ddd !important; }
[data-theme="light"] h2 { border-bottom-color: #e8e8e8 !important; }
[data-theme="light"] hr { background-color: #e6e1e8 !important; }
[data-theme="light"] td,
[data-theme="light"] th { border-color: #ddd !important; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #eee; }

/* ── copy button — just text, no overflow ── */
.highlight .copy-button { display: none !important; }
.sp-copy-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: #586e75;
  cursor: pointer;
  font-family: "Iosevka", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.3rem;
  transition: color 0.15s;
  z-index: 10;
  white-space: nowrap;
  outline: none !important;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1;
}
.sp-copy-btn:hover { color: #e8731a; }
.sp-copy-btn:focus, .sp-copy-btn:active { outline: none !important; box-shadow: none !important; }
.sp-copy-btn.copied { color: #859900; }
.sp-copy-btn::after {
  content: "copied!";
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  background: #002b36;
  border: 1px solid #859900;
  color: #859900;
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}
.sp-copy-btn.copied::after { display: block; }
[data-theme="light"] .sp-copy-btn { color: #93a1a1; }
[data-theme="light"] .sp-copy-btn:hover { color: #cb4b16; }
[data-theme="light"] .sp-copy-btn.copied { color: #859900; }
[data-theme="light"] .sp-copy-btn::after { background: #fdf6e3; }

/* ── code tabs ── */
.code-tabs { margin: 1.5rem 0; }
.code-tabs-nav { display: flex; border-bottom: 1px solid #073642; }
[data-theme="light"] .code-tabs-nav { border-bottom-color: #eee8d5; }
.code-tabs-nav button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #586e75;
  cursor: pointer;
  font-family: "Iosevka", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-bottom: -1px;
  padding: 0.35rem 1rem;
  transition: color 0.15s;
  outline: none;
}
[data-theme="light"] .code-tabs-nav button { color: #93a1a1; }
.code-tabs-nav button:hover { color: #839496; }
[data-theme="light"] .code-tabs-nav button:hover { color: #657b83; }
.code-tabs-nav button.active { border-bottom-color: #e8731a; color: #e8731a; }
.code-tab-panel { display: none; }
.code-tab-panel.active { display: block; }
.code-tab-panel > div.highlighter-rouge {
  border-radius: 0 0 6px 6px !important;
  border-top: none !important;
  margin-top: 0 !important;
}

/* ── reading progress bar ── */
#sp-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: #e8731a;
  z-index: 9999;
  transition: width 0.1s linear;
  pointer-events: none;
}
body.page-home #sp-progress { display: none; }

/* ── callout blocks ── */
/* in markdown: > [!note] text, > [!warning] text, > [!tip] text, > [!important] text */
.main-content blockquote {
  border-left: 2px solid #2a2a2a !important;
  padding: 0.8rem 1.2rem !important;
  margin: 1.5rem 0 !important;
  color: #777 !important;
  font-style: normal !important;
  background: none !important;
}
.main-content blockquote p { margin: 0 !important; color: inherit !important; }
/* callout blocks — obsidian style: tinted bg, vivid icon+text */
.main-content blockquote {
  border-radius: 4px !important;
  padding: 0.7rem 1rem !important;
  margin: 1.2rem 0 !important;
  font-style: normal !important;
  background-color: transparent !important;
}
/* dark theme — use box-shadow inset as bg so nothing overrides it */
.callout-note      { border-left-color: #268bd2 !important; box-shadow: inset 0 0 0 999px rgba(38,139,210,0.13) !important; }
.callout-warning   { border-left-color: #b58900 !important; box-shadow: inset 0 0 0 999px rgba(181,137,0,0.13)   !important; }
.callout-tip       { border-left-color: #859900 !important; box-shadow: inset 0 0 0 999px rgba(133,153,0,0.13)   !important; }
.callout-important { border-left-color: #cb4b16 !important; box-shadow: inset 0 0 0 999px rgba(203,75,22,0.13)   !important; }

.callout-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  line-height: 1.7;
}
.callout-row svg { flex-shrink: 0; }
/* vivid text+icon colors in dark */
.callout-note      .callout-row,
.callout-note      .callout-row svg { color: #5aa7d4; }
.callout-warning   .callout-row,
.callout-warning   .callout-row svg { color: #d4a017; }
.callout-tip       .callout-row,
.callout-tip       .callout-row svg { color: #a6c132; }
.callout-important .callout-row,
.callout-important .callout-row svg { color: #e0673a; }

/* light theme */
[data-theme="light"] .main-content blockquote { box-shadow: none !important; border-left-color: #ddd !important; }
[data-theme="light"] .callout-note      { border-left-color: #268bd2 !important; box-shadow: inset 0 0 0 999px rgba(38,139,210,0.08) !important; }
[data-theme="light"] .callout-warning   { border-left-color: #b58900 !important; box-shadow: inset 0 0 0 999px rgba(181,137,0,0.08)   !important; }
[data-theme="light"] .callout-tip       { border-left-color: #859900 !important; box-shadow: inset 0 0 0 999px rgba(133,153,0,0.08)   !important; }
[data-theme="light"] .callout-important { border-left-color: #cb4b16 !important; box-shadow: inset 0 0 0 999px rgba(203,75,22,0.08)   !important; }
[data-theme="light"] .callout-note      .callout-row,
[data-theme="light"] .callout-note      .callout-row svg { color: #1a6fa0; }
[data-theme="light"] .callout-warning   .callout-row,
[data-theme="light"] .callout-warning   .callout-row svg { color: #8a6600; }
[data-theme="light"] .callout-tip       .callout-row,
[data-theme="light"] .callout-tip       .callout-row svg { color: #5a7000; }
[data-theme="light"] .callout-important .callout-row,
[data-theme="light"] .callout-important .callout-row svg { color: #a03010; }
</style>

<link rel="icon" type="image/svg+xml" href="/assets/img/logo.svg">
<link rel="stylesheet" href="/assets/css/just-the-docs-dark.css"  id="sp-theme-dark">
<link rel="stylesheet" href="/assets/css/just-the-docs-light.css" id="sp-theme-light" disabled>

<meta name="build-date" content="March 23, 2026">



<script>
(function () {
  var dark = localStorage.getItem('sp-theme') !== 'light';
  document.getElementById('sp-theme-dark').disabled  = !dark;
  document.getElementById('sp-theme-light').disabled = dark;
  document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
})();
</script>

<script>
window.MathJax = {
  tex: {
    inlineMath: [["$", "$"], ["\\(", "\\)"]],
    displayMath: [["$$", "$$"], ["\\[", "\\]"]],
    processEscapes: true
  },
  options: { skipHtmlTags: ["script", "noscript", "style", "textarea", "pre"] }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {

  // ── mermaid ──────────────────────────────────────────────────
  document.querySelectorAll("code.language-mermaid").forEach(function (el) {
    const div = document.createElement("div");
    div.className = "mermaid";
    div.textContent = el.textContent;
    el.parentElement.replaceWith(div);
  });
  mermaid.initialize({ startOnLoad: true, theme: localStorage.getItem('sp-theme') !== 'light' ? 'dark' : 'default' });

  // ── auto code tabs ───────────────────────────────────────────
  const visited = new Set();
  document.querySelectorAll(".main-content div.highlighter-rouge").forEach(function (block) {
    if (visited.has(block) || block.closest(".code-tab-panel, .code-tabs")) return;
    const group = [block];
    let sib = block.nextElementSibling;
    while (sib && sib.classList.contains("highlighter-rouge") && !sib.closest(".code-tab-panel, .code-tabs")) {
      group.push(sib);
      sib = sib.nextElementSibling;
    }
    if (group.length < 2) return;
    group.forEach(b => visited.add(b));
    function getLang(el) {
      const m = el.className.match(/language-(\S+)/);
      return m ? m[1] : "code";
    }
    const placeholder = document.createElement("span");
    block.parentNode.insertBefore(placeholder, block);
    const wrapper = document.createElement("div");
    wrapper.className = "code-tabs";
    const nav = document.createElement("div");
    nav.className = "code-tabs-nav";
    wrapper.appendChild(nav);
    group.forEach(function (el, i) {
      const btn = document.createElement("button");
      btn.textContent = getLang(el);
      if (i === 0) btn.classList.add("active");
      nav.appendChild(btn);
      const panel = document.createElement("div");
      panel.className = "code-tab-panel" + (i === 0 ? " active" : "");
      panel.appendChild(el);
      wrapper.appendChild(panel);
    });
    placeholder.parentNode.replaceChild(wrapper, placeholder);
    nav.querySelectorAll("button").forEach(function (btn, i) {
      btn.addEventListener("click", function () {
        nav.querySelectorAll("button").forEach(b => b.classList.remove("active"));
        wrapper.querySelectorAll(".code-tab-panel").forEach(p => p.classList.remove("active"));
        btn.classList.add("active");
        wrapper.querySelectorAll(".code-tab-panel")[i].classList.add("active");
      });
    });
  });

  // ── copy button ──────────────────────────────────────────────
  document.querySelectorAll("div.highlighter-rouge").forEach(function (block) {
    const btn = document.createElement("button");
    btn.className = "sp-copy-btn";
    btn.textContent = "copy";
    block.appendChild(btn);
    btn.addEventListener("click", function () {
      const code = block.querySelector("pre.highlight code") || block.querySelector("code");
      navigator.clipboard.writeText(code.innerText).then(function () {
        btn.textContent = "copied";
        btn.classList.add("copied");
        setTimeout(function () {
          btn.textContent = "copy";
          btn.classList.remove("copied");
        }, 1500);
      });
    });
  });

  // ── page meta → footer ───────────────────────────────────────
  const isNote     = document.querySelector("meta[name='is-note'][content='true']");
  const footerMeta = document.getElementById("sp-footer-meta");
  if (isNote && footerMeta) {
    const buildDate = document.querySelector("meta[name='build-date']");
    const pageDate  = document.querySelector("meta[name='page-date']");
    if (buildDate) {
      let text = "";
      if (pageDate && pageDate.content) text += "published: " + pageDate.content + "  ·  ";
      text += "last updated: " + buildDate.content;
      footerMeta.textContent = text;
      const pipe = document.getElementById("sp-meta-pipe");
      if (pipe) pipe.style.display = "inline";
    }
  }

  // ── theme toggle ─────────────────────────────────────────────
  const themeBtn   = document.getElementById("sp-theme-btn");
  const iconSun    = document.getElementById("sp-icon-sun");
  const iconMoon   = document.getElementById("sp-icon-moon");
  const darkSheet  = document.getElementById("sp-theme-dark");
  const lightSheet = document.getElementById("sp-theme-light");

  function applyTheme(dark) {
    darkSheet.disabled  = !dark;
    lightSheet.disabled = dark;
    document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
    if (iconSun)  iconSun.style.display  = dark ? 'block' : 'none';
    if (iconMoon) iconMoon.style.display = dark ? 'none'  : 'block';
    const label = document.getElementById('sp-theme-label');
    if (label) label.textContent = dark ? 'light' : 'dark';
    localStorage.setItem('sp-theme', dark ? 'dark' : 'light');
  }

  applyTheme(localStorage.getItem('sp-theme') !== 'light');

  if (themeBtn) {
    themeBtn.addEventListener("click", function () {
      applyTheme(document.documentElement.getAttribute('data-theme') !== 'dark');
    });
  }

  // ── search overlay ────────────────────────────────────────────
  var overlay   = document.createElement('div');
  overlay.id    = 'sp-search-overlay';

  var modal     = document.createElement('div');
  modal.id      = 'sp-search-modal';

  // input row
  var inputWrap = document.createElement('div');
  inputWrap.id  = 'sp-search-modal-input-wrap';
  inputWrap.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>';
  var modalInput = document.createElement('input');
  modalInput.id          = 'sp-search-modal-input';
  modalInput.type        = 'text';
  modalInput.placeholder = 'Search scratchpad (⌘ K)';
  modalInput.autocomplete = 'off';
  inputWrap.appendChild(modalInput);

  // results container — we'll move the real #search-results here
  var resultsPane = document.createElement('div');
  resultsPane.id  = 'sp-search-modal-results';

  // hints bar
  var hints = document.createElement('div');
  hints.id  = 'sp-search-hints';
  hints.innerHTML =
    '<span class="sp-hint"><kbd>↑</kbd> <kbd>↓</kbd> navigate</span>' +
    '<span class="sp-hint"><kbd>enter</kbd> open</span>' +
    '<span class="sp-hint"><kbd>esc</kbd> close</span>';

  modal.appendChild(inputWrap);
  modal.appendChild(resultsPane);
  modal.appendChild(hints);
  overlay.appendChild(modal);
  document.body.appendChild(overlay);

  // move the real just-the-docs search-results div into our modal
  var realResults = document.getElementById('search-results');
  if (realResults) resultsPane.appendChild(realResults);

  var realInput = document.getElementById('search-input');

  function openSearch() {
    overlay.classList.add('active');
    // clear both inputs
    modalInput.value = '';
    if (realInput) {
      realInput.value = '';
      // trigger jtd's keyup handler to clear results
      realInput.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 0, bubbles: true }));
    }
    setTimeout(function() { modalInput.focus(); }, 30);
  }

  function closeSearch() {
    overlay.classList.remove('active');
    modalInput.blur();
    // clear real input and fire jtd escape (keyCode 27) to hide its results + clear active
    if (realInput) {
      realInput.value = '';
      realInput.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 27, bubbles: true }));
      // remove any lingering .active class on results
      document.querySelectorAll('.search-result.active').forEach(function(el) {
        el.classList.remove('active');
      });
    }
  }

  if (realInput && modalInput) {
    // typing: sync text then fire jtd's keyup to run search
    modalInput.addEventListener('input', function() {
      realInput.value = modalInput.value;
      realInput.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 0, bubbles: true }));
    });

    // arrow keys + enter: forward keydown to realInput so jtd's nav logic runs
    modalInput.addEventListener('keydown', function(e) {
      if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13) {
        e.preventDefault();
        realInput.dispatchEvent(new KeyboardEvent('keydown', {
          keyCode: e.keyCode, which: e.keyCode, bubbles: true, cancelable: true
        }));
      }
    });
  }

  // Cmd/Ctrl+K opens
  document.addEventListener('keydown', function(e) {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault();
      if (overlay.classList.contains('active')) { closeSearch(); } else { openSearch(); }
    }
    if (e.key === 'Escape' && overlay.classList.contains('active')) {
      e.preventDefault();
      e.stopPropagation();
      closeSearch();
    }
  }, true); // capture phase so we beat jtd's own escape handler

  // click backdrop closes
  overlay.addEventListener('click', function(e) {
    if (e.target === overlay) closeSearch();
  });

  // prevent jtd's document.click from hiding results when clicking inside modal
  modal.addEventListener('click', function(e) {
    e.stopPropagation();
  });

  // clicking the header search bar opens modal
  if (realInput) {
    realInput.addEventListener('focus', function() {
      realInput.blur();
      openSearch();
    });
  }

  // ── reading progress bar ─────────────────────────────────────
  var bar = document.createElement('div');
  bar.id = 'sp-progress';
  document.body.prepend(bar);
  window.addEventListener('scroll', function () {
    var doc = document.documentElement;
    var scrolled = doc.scrollTop || document.body.scrollTop;
    var total = doc.scrollHeight - doc.clientHeight;
    bar.style.width = total > 0 ? (scrolled / total * 100) + '%' : '0%';
  });

  // ── callout blocks ───────────────────────────────────────────
  // > [!note] text   > [!warning] text   > [!tip] text   > [!important] text
  var CALLOUT_ICONS = {
    note:      '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
    warning:   '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
    tip:       '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
    important: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>'
  };
  document.querySelectorAll('.main-content blockquote').forEach(function (bq) {
    var first = bq.querySelector('p');
    if (!first) return;
    var text = first.textContent;
    var m = text.match(/^\[!(note|warning|tip|important)\]\s*/i);
    if (!m) return;
    var type = m[1].toLowerCase();
    bq.classList.add('callout-' + type);

    var row = document.createElement('div');
    row.className = 'callout-row';
    row.innerHTML = (CALLOUT_ICONS[type] || '') + '<span>' + text.slice(m[0].length).trim() + '</span>';
    first.replaceWith(row);

    // handle multiline callouts
    bq.querySelectorAll('p').forEach(function(p) {
      var extra = document.createElement('div');
      extra.className = 'callout-row';
      extra.innerHTML = '<span style="width:14px;flex-shrink:0;"></span><span>' + p.textContent + '</span>';
      p.replaceWith(extra);
    });
  });

});
</script>


</head>

<body>
  <a class="skip-to-main" href="#main-content">Skip to main content</a>
  <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  <symbol id="svg-link" viewBox="0 0 24 24">
  <title>Link</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
  </svg>
</symbol>

  <symbol id="svg-menu" viewBox="0 0 24 24">
  <title>Menu</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
    <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
  </svg>
</symbol>

  <symbol id="svg-arrow-right" viewBox="0 0 24 24">
  <title>Expand</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
    <polyline points="9 18 15 12 9 6"></polyline>
  </svg>
</symbol>

  <!-- Feather. MIT License: https://github.com/feathericons/feather/blob/master/LICENSE -->
<symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
  <title id="svg-external-link-title">(external link)</title>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
</symbol>

  
    <symbol id="svg-doc" viewBox="0 0 24 24">
  <title>Document</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
  </svg>
</symbol>

    <symbol id="svg-search" viewBox="0 0 24 24">
  <title>Search</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
    <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
</symbol>

  
  
</svg>

  
    <header class="side-bar">
  <div class="site-header">
    <a href="/" class="site-title lh-tight">
  <div class="site-logo" role="img" aria-label="scratchpad"></div>

</a>
    <button id="menu-button" class="site-button btn-reset" aria-label="Menu" aria-expanded="false">
      <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
    </button>
  </div>

  <nav aria-label="Main" id="site-nav" class="site-nav">
  
  
    <ul class="nav-list"><li class="nav-list-item"><a href="/" class="nav-list-link">scratchpad</a></li><li class="nav-list-item"><a href="/rust/" class="nav-list-link">Rust</a></li><li class="nav-list-item"><a href="/til/" class="nav-list-link">TIL</a></li></ul>
  
</nav>


<div class="d-md-block d-none site-footer">
  
  
    <div style="padding: 1rem 0; font-size: 0.85rem;">
  <a href="https://github.com/Chaganti-Reddy/scratchpad" target="_blank">GitHub</a> ·
  <a href="/scratchpad/feed.xml" target="_blank">RSS</a>
</div>

  
  </div>
</header>

  
  <div class="main" id="top">
    <div id="main-header" class="main-header">
  
    

<div class="search" role="search">
  <div class="search-input-wrap">
    <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search scratchpad (⌘ K)" autocomplete="off">
    <label for="search-input" class="search-label">
      <span class="sr-only">Search scratchpad (⌘ K)</span>
      <svg viewBox="0 0 24 24" class="search-icon" aria-hidden="true"><use xlink:href="#svg-search"></use></svg>
    </label>
  </div>
  <div id="search-results" class="search-results"></div>
</div>

  
  <button id="sp-theme-btn" class="sp-theme-toggle" aria-label="Toggle theme">
  <svg id="sp-icon-sun" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="5"/>
    <line x1="12" y1="1"  x2="12" y2="3"/>
    <line x1="12" y1="21" x2="12" y2="23"/>
    <line x1="4.22" y1="4.22"   x2="5.64" y2="5.64"/>
    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
    <line x1="1"  y1="12" x2="3"  y2="12"/>
    <line x1="21" y1="12" x2="23" y2="12"/>
    <line x1="4.22"  y1="19.78" x2="5.64"  y2="18.36"/>
    <line x1="18.36" y1="5.64"  x2="19.78" y2="4.22"/>
  </svg>
  <svg id="sp-icon-moon" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
  </svg>
  <span id="sp-theme-label">light</span>
</button>

  
</div>

    <div class="main-content-wrap">
      
      <div id="main-content" class="main-content">
        <main>
          
            <h.site-nav ul li a {
  background-image: linear-gradient(-90deg, rgb(31.6333333333, 30.8222222222, 34.8777777778) 0%, rgba(31.6333333333, 30.8222222222, 34.8777777778, 0.8) 80%, rgba(31.6333333333, 30.8222222222, 34.8777777778, 0) 100%);
}

          

          
            
          
        </main>
        
<hr>
<footer>
  

  <div class="footer-custom" style="display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;padding:0.6rem 0;font-size:0.82rem;">
  <span id="sp-footer-meta" style="font-style:italic;font-size:0.72rem;color:#555;"></span>
  <span id="sp-meta-pipe" style="display:none;color:#333;">|</span>
  <a href="https://linkedin.com/in/chaganti-reddy" target="_blank">LinkedIn</a>
  <span style="color:#555;">·</span>
  <a href="mailto:chagantivenkataramireddy1@gmail.com">Mail</a>
  
  <span style="color:#555;">·</span>
  <a href="https://github.com/Chaganti-Reddy/scratchpad/tree/main/assets/css/just-the-docs-head-nav.css" target="_blank">Edit</a>
  
</div>

<button id="back-to-top" onclick="window.scrollTo({top:0,behavior:'smooth'})" style="background:#111;border:1px solid #e8731a;color:#e8731a;width:2.2rem;height:2.2rem;padding:0;cursor:pointer;border-radius:4px;transition:all 0.2s;position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:center;" onmouseover="this.style.background='#e8731a';this.style.color='#111'" onmouseout="this.style.background='#111';this.style.color='#e8731a'">
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
    <line x1="12" y1="19" x2="12" y2="5"/>
    <polyline points="5 12 12 5 19 12"/>
  </svg>
</button>

<script>
const _btt = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
  if (window.scrollY > 300) { _btt.style.opacity='1'; _btt.style.pointerEvents='auto'; }
  else { _btt.style.opacity='0'; _btt.style.pointerEvents='none'; }
});
</script>


  
    <div class="d-flex mt-2">
      
      
        <p class="text-small mb-0">
          <a href="https://github.com/Chaganti-Reddy/scratchpad/tree/main/./assets/css/just-the-docs-head-nav.css" id="edit-this-page">Edit this page on GitHub</a>
        </p>
      
    </div>
  <div class="d-md-none mt-4 fs-2">
    
    
      <div style="padding: 1rem 0; font-size: 0.85rem;">
  <a href="https://github.com/Chaganti-Reddy/scratchpad" target="_blank">GitHub</a> ·
  <a href="/scratchpad/feed.xml" target="_blank">RSS</a>
</div>

    
  </div>
</footer>

      </div>
    </div>
    
      

<div class="search-overlay"></div>

    
  </div>

  
</body>
</html>

