diff --git a/.eleventy.js b/.eleventy.js
index cc6fcf2..19bc592 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,4 +1,6 @@
 const markdownIt = require("markdown-it");
+const fs = require("fs");
+const nodePath = require("path");
 
 function normalizePathPrefix(rawPathPrefix = "/") {
   if (!rawPathPrefix || rawPathPrefix === "/") {
@@ -24,7 +26,7 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addPassthroughCopy({ "assets/img": "img" });
   eleventyConfig.addPassthroughCopy({ "assets/css": "css" });
-  eleventyConfig.addPassthroughCopy("CNAME");
+  eleventyConfig.addPassthroughCopy({ "assets/js": "js" });
   eleventyConfig.addPassthroughCopy(".nojekyll");
   eleventyConfig.addPassthroughCopy({ "assets/img/favicon.png": "favicon.png" });
 
@@ -32,10 +34,63 @@ module.exports = function (eleventyConfig) {
     return new Date(dateObj).toISOString().split('T')[0];
   });
 
+  eleventyConfig.addFilter("fileLastModified", function (inputPath, langCode) {
+    if (!inputPath) {
+      return null;
+    }
+
+    try {
+      const normalizedPath = String(inputPath).replace(/^\.\/+/, "");
+      const absolutePath = nodePath.resolve(process.cwd(), normalizedPath);
+      const stats = fs.statSync(absolutePath);
+      const locale = langCode === "uz" ? "uz-UZ" : "en-US";
+      return new Intl.DateTimeFormat(locale, {
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      }).format(stats.mtime);
+    } catch (_error) {
+      return null;
+    }
+  });
+
   eleventyConfig.addFilter("urlencode", function (str) {
     return encodeURIComponent(str);
   });
 
+  eleventyConfig.addFilter("padStart", function (value, length, char) {
+    return String(value).padStart(length || 2, char || "0");
+  });
+
+  eleventyConfig.addFilter("displayTutorialTitle", function (value) {
+    if (typeof value !== "string") {
+      return value;
+    }
+
+    const original = value.trim();
+    if (!original) {
+      return value;
+    }
+
+    let title = original.replace(/\s+/g, " ");
+    const titleBeforeLeadingStrip = title;
+
+    // Remove common tutorial title wrappers that redundantly include "Python".
+    title = title.replace(/\s*\(\s*Python\s*\)\s*$/i, "");
+    title = title.replace(/\s+(?:to|in|with|for|on)\s+Python$/i, "");
+    title = title.replace(/\s+Python$/i, "");
+    title = title.replace(/^Python'(?:ga|ni|da|ning)\s+/i, "");
+    title = title.replace(/^Python(?:ga|ni|da|ning)\s+/i, "");
+    title = title.replace(/^Python\s+/i, "");
+
+    title = title.trim();
+    if (titleBeforeLeadingStrip !== title && /^[a-z]/.test(title)) {
+      title = title.charAt(0).toUpperCase() + title.slice(1);
+    }
+
+    return title || original;
+  });
+
   eleventyConfig.addFilter("getTutorialNav", function (tutorials, currentUrl) {
     if (!Array.isArray(tutorials) || !currentUrl) {
       return { first: null, prev: null, next: null };
@@ -52,7 +107,13 @@ module.exports = function (eleventyConfig) {
   });
 
   eleventyConfig.addCollection("tutorials", function (collectionApi) {
-    return collectionApi.getFilteredByGlob("tutorial/**/*.md").sort((a, b) => {
+    return collectionApi.getFilteredByGlob("content/en/tutorial/**/*.md").sort((a, b) => {
+      return (a.data.order || 0) - (b.data.order || 0);
+    });
+  });
+
+  eleventyConfig.addCollection("tutorialsUz", function (collectionApi) {
+    return collectionApi.getFilteredByGlob("content/uz/tutorial/**/*.md").sort((a, b) => {
       return (a.data.order || 0) - (b.data.order || 0);
     });
   });
@@ -62,6 +123,7 @@ module.exports = function (eleventyConfig) {
   });
 
   eleventyConfig.addWatchTarget("./assets/css/");
+  eleventyConfig.addWatchTarget("./assets/js/");
   eleventyConfig.addWatchTarget("./tailwind.css");
 
   eleventyConfig.setServerOptions({
diff --git a/.eleventyignore b/.eleventyignore
index 7502bba..fa28076 100644
--- a/.eleventyignore
+++ b/.eleventyignore
@@ -2,6 +2,8 @@ README.md
 CONTRIBUTING.md
 CODE_OF_CONDUCT.md
 LICENSE
+.github/**/*.md
+docs/**/*.md
 node_modules
 _site
 tailwind.css
diff --git a/CONTRIBUTING.md b/.github/CONTRIBUTING.md
similarity index 65%
rename from CONTRIBUTING.md
rename to .github/CONTRIBUTING.md
index 5a49eb9..9e695e1 100644
--- a/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -25,8 +25,15 @@ Thank you for contributing.
 
 - Keep tutorials clear, practical, and beginner-friendly.
 - Use consistent front matter (`layout`, `title`, `order`, `permalink`).
+- Place tutorials under `content/{en|uz}/tutorial/{basic|intermediate|advanced}/`.
+- Use locale-first permalinks only:
+  - English tutorial: `/en/tutorial/{slug}/`
+  - Uzbek tutorial: `/uz/tutorial/{slug}/`
+- Use `lang: en` or `lang: uz` in localized pages/tutorials.
+- Wrap code-related prose tokens in inline code (for example: `if`, `else`, `for`, `while`, `True`, `False`, `None`, `{}`).
 - Add descriptive image `alt` text.
 - Verify internal links and JSON-LD output with `npm run check`.
+- Keep localized repository docs under `docs/i18n/uz/` (these are not website pages).
 
 ## Pull Request Checklist
 
diff --git a/CNAME b/CNAME
deleted file mode 100644
index 73894c6..0000000
--- a/CNAME
+++ /dev/null
@@ -1 +0,0 @@
-belajarpython.com
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
deleted file mode 100644
index dcd51e4..0000000
--- a/CODE_OF_CONDUCT.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Code of Conduct
-
-## Our Commitment
-
-We are committed to providing a friendly, safe, and inclusive environment for everyone.
-
-## Expected Behavior
-
-- Be respectful and constructive in discussions.
-- Focus feedback on ideas and implementation.
-- Welcome contributors with different backgrounds and experience levels.
-
-## Unacceptable Behavior
-
-- Harassment, hate speech, or personal attacks.
-- Trolling, intimidation, or repeated disruptive behavior.
-- Sharing private information without consent.
-
-## Enforcement
-
-Project maintainers may remove, edit, or reject contributions and interactions that violate this code of conduct.
-
-## Scope
-
-This code of conduct applies to all project spaces, including issues, pull requests, and discussions.
-
-## Contact
-
-If you experience or witness unacceptable behavior, open a private issue or contact the maintainers through the repository contact channels.
diff --git a/LICENSE b/LICENSE
old mode 100755
new mode 100644
index e1bc751..7271da8
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Belajarpython
+Copyright (c) 2026 Valikhujaev Yakhyokhuja
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/README.md b/README.md
index 6ea915c..2620d7a 100755
--- a/README.md
+++ b/README.md
@@ -4,44 +4,56 @@
 
 ---
 
-# [Belajarpython](https://www.belajarpython.com/) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/belajarpythoncom/belajarpython.com/blob/main/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./CONTRIBUTING.md)
+# [Belajarpython](https://www.belajarpython.com/) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/codeuzhub/python-lessons/blob/main/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/codeuzhub/python-lessons/blob/main/.github/CONTRIBUTING.md)
 
-Belajarpython adalah situs kolaboratif tutorial pemrograman Python bahasa Indonesia
+Belajarpython is a collaborative platform for learning Python.
 
-- **Ikuti Tutorial:** Mulai belajar bahasa pemrograman python dari tingkat dasar dengan tutorial yang dikhususkan untuk pemula agar lebih cepat mempelajari bahasa pemrograman python.
-- **Baca Artikel:** Baca artikel terbaru dan terpopuler tentang bahasa pemrograman python dengan beragam topik. Artikel dibuat oleh komunitas dan ditujukan untuk komunitas.
-- **Ajukan Pertanyaan:** Ajukan setiap pertanyaan yang anda temui tentang bahasa pemrograman python. Setiap orang di komunitas akan segera menyelesaikan setiap pertanyaan pengguna.
+- **Follow Tutorials:** Start learning Python from the basics with beginner-focused tutorials designed to help you progress faster.
+- **Read Articles:** Explore the latest and most popular Python articles across a wide range of topics. Content is created by the community for the community.
+- **Ask Questions:** Ask any Python-related question you run into. Community members are ready to help you solve it.
 
-## Kontribusi
+## Contributing
 
-Belajarpython adalah situs terbuka (open source) yang dikembangkan oleh developer untuk developer. Semua orang baik dari kalangan :trollface: developer, :man: mahasiswa, :older_woman: pengajar, bahkan :baby: anak kecil yang baru mempelajari bahasa pemrograman python bisa ikut memberikan :heart: kontribusinya [disini](./CONTRIBUTING.md)
+Belajarpython is an open-source website built by developers for developers. Everyone is welcome to contribute: :trollface: developers, :man: students, :older_woman: educators, and even :baby: young beginners who are just learning Python can share their :heart: contributions [here](https://github.com/codeuzhub/python-lessons/blob/main/.github/CONTRIBUTING.md).
 
-### [Code of Conduct](./CODE_OF_CONDUCT.md)
+### [Contribution Guide](https://github.com/codeuzhub/python-lessons/blob/main/.github/CONTRIBUTING.md)
 
-Belajarpython telah mengadopsi Kode Etik yang kami harapkan akan diikuti oleh peserta proyek terbuka ini. Mohon baca [full text](./CODE_OF_CONDUCT.md) sehingga anda dapat mengerti aksi apa yang yang bisa dan tidak bisa ditoleransi.
-
-### [Panduan Kontribusi](./CONTRIBUTING.md)
-
-Baca [panduan kontribusi](./CONTRIBUTING.md) dari kami untuk mempelajari tentang proses pengembangan konten disini.
+Read our [contribution guide](https://github.com/codeuzhub/python-lessons/blob/main/.github/CONTRIBUTING.md) to learn about the content development workflow.
 
 ### Good First Issues
 
-Untuk membantu Anda membuat kaki Anda basah dan membuat Anda terbiasa dengan proses kontribusi kami, kami memiliki daftar [good first issues](https://github.com/belajarpythoncom/belajarpython.com/issues) yang mengandung bug yang memiliki lingkup yang relatif terbatas. Ini adalah tempat yang bagus untuk memulai.
+To help you get started and become familiar with our contribution process, we maintain a list of [good first issues](https://github.com/codeuzhub/python-lessons/issues) with relatively small scope. It is a great place to begin.
 
-## Pengembangan Lokal
+## Local Development
 
 ```bash
 npm ci
 npm run dev
 ```
 
-Build produksi:
+Production build:
 
 ```bash
 npm run build
 npm run check
 ```
 
+## Content Structure
+
+- English homepage: `content/en/index.md` (`/en/`)
+- Uzbek homepage: `content/uz/index.md` (`/uz/`)
+- English tutorials: `content/en/tutorial/{basic,intermediate,advanced}/*.md`
+- Uzbek tutorials: `content/uz/tutorial/{basic,intermediate,advanced}/*.md`
+
+Canonical tutorial URLs:
+
+- English: `/en/tutorial/{slug}/`
+- Uzbek: `/uz/tutorial/{slug}/`
+
+Root `/` redirects to `/en/`.
+
+Uzbek repository docs are stored in `docs/i18n/uz/` (repo-only, not website pages).
+
 ### License
 
 Belajarpython is [MIT licensed](./LICENSE).
diff --git a/_includes/editor-helpers.njk b/_includes/editor-helpers.njk
new file mode 100644
index 0000000..0c675b6
--- /dev/null
+++ b/_includes/editor-helpers.njk
@@ -0,0 +1,238 @@
+<style>
+.editor-with-lines {
+  display: flex;
+  min-height: 100%;
+}
+.editor-with-lines > pre {
+  flex: 1;
+  min-width: 0;
+}
+.editor-line-numbers {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  min-width: 2rem;
+  padding-right: 0.75rem;
+  padding-left: 0.5rem;
+  text-align: right;
+  -webkit-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  color: rgba(100, 116, 139, 0.7);
+  border-right: 1px solid rgba(100, 116, 139, 0.25);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  white-space: pre;
+  overflow: hidden;
+}
+</style>
+<script>
+(function () {
+  if (window.EditorHelpers) {
+    return;
+  }
+
+  function getCaretOffset(container) {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      return null;
+    }
+
+    const range = selection.getRangeAt(0);
+    if (!container.contains(range.endContainer)) {
+      return null;
+    }
+
+    const preCaretRange = range.cloneRange();
+    preCaretRange.selectNodeContents(container);
+    preCaretRange.setEnd(range.endContainer, range.endOffset);
+    return preCaretRange.toString().length;
+  }
+
+  function getSelectionOffsets(container) {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      return null;
+    }
+
+    const range = selection.getRangeAt(0);
+    if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) {
+      return null;
+    }
+
+    const startRange = range.cloneRange();
+    startRange.selectNodeContents(container);
+    startRange.setEnd(range.startContainer, range.startOffset);
+
+    const endRange = range.cloneRange();
+    endRange.selectNodeContents(container);
+    endRange.setEnd(range.endContainer, range.endOffset);
+
+    return {
+      start: startRange.toString().length,
+      end: endRange.toString().length
+    };
+  }
+
+  function setCaretOffset(container, offset) {
+    const safeOffset = Math.max(0, offset || 0);
+    const selection = window.getSelection();
+    if (!selection) {
+      return;
+    }
+
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+    let currentOffset = 0;
+    let targetNode = null;
+    let targetOffset = 0;
+    let node = walker.nextNode();
+
+    while (node) {
+      const nextOffset = currentOffset + node.nodeValue.length;
+      if (safeOffset <= nextOffset) {
+        targetNode = node;
+        targetOffset = safeOffset - currentOffset;
+        break;
+      }
+      currentOffset = nextOffset;
+      node = walker.nextNode();
+    }
+
+    const range = document.createRange();
+    if (targetNode) {
+      range.setStart(targetNode, targetOffset);
+    } else {
+      range.selectNodeContents(container);
+      range.collapse(false);
+    }
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+
+  function renderHighlightedEditable(editor, language, baseClassName) {
+    const source = editor.textContent || "";
+    const caretOffset = getCaretOffset(editor);
+
+    if (window.hljs) {
+      const highlighted = hljs.highlight(source, {
+        language,
+        ignoreIllegals: true
+      }).value;
+      editor.innerHTML = highlighted;
+      editor.className = `${baseClassName} hljs`;
+    } else {
+      editor.textContent = source;
+      editor.className = baseClassName;
+    }
+
+    if (caretOffset !== null) {
+      setCaretOffset(editor, Math.min(caretOffset, (editor.textContent || "").length));
+    }
+
+    if (typeof editor._updateLineNumbers === "function") {
+      editor._updateLineNumbers();
+    }
+  }
+
+  function parseEditorClass(editor) {
+    const baseClassName = (editor.className || "")
+      .split(/\s+/)
+      .filter((cls) => cls && cls !== "hljs")
+      .join(" ");
+    const match = baseClassName.match(/language-([a-z0-9-]+)/i);
+    return {
+      baseClassName: baseClassName,
+      language: match ? match[1] : "python"
+    };
+  }
+
+  function createLineNumbers(editor) {
+    const pre = editor.closest("pre");
+    if (!pre || !pre.parentElement) {
+      return null;
+    }
+
+    const parent = pre.parentElement;
+
+    const wrapper = document.createElement("div");
+    wrapper.className = "editor-with-lines";
+    parent.insertBefore(wrapper, pre);
+
+    const gutter = document.createElement("div");
+    gutter.className = "editor-line-numbers";
+    gutter.setAttribute("aria-hidden", "true");
+    wrapper.appendChild(gutter);
+    wrapper.appendChild(pre);
+
+    function syncStyles() {
+      const codeStyle = window.getComputedStyle(editor);
+      const preStyle = window.getComputedStyle(pre);
+      gutter.style.fontSize = codeStyle.fontSize;
+      gutter.style.lineHeight = codeStyle.lineHeight;
+      gutter.style.fontFamily = codeStyle.fontFamily;
+      const topPad = (parseFloat(preStyle.paddingTop) || 0) + (parseFloat(codeStyle.paddingTop) || 0);
+      const bottomPad = (parseFloat(preStyle.paddingBottom) || 0) + (parseFloat(codeStyle.paddingBottom) || 0);
+      gutter.style.paddingTop = topPad + "px";
+      gutter.style.paddingBottom = bottomPad + "px";
+    }
+
+    function update() {
+      const lineCount = (editor.textContent || "").split("\n").length;
+      const lines = [];
+      for (let i = 1; i <= lineCount; i++) {
+        lines.push(i);
+      }
+      gutter.textContent = lines.join("\n");
+    }
+
+    return { gutter, update, syncStyles };
+  }
+
+  function makeEditable(editor, language, baseClassName) {
+    editor.setAttribute("contenteditable", "true");
+    editor.setAttribute("spellcheck", "false");
+
+    const lineNumbers = createLineNumbers(editor);
+
+    let highlightQueued = false;
+    const queueHighlight = () => {
+      if (highlightQueued) {
+        return;
+      }
+      highlightQueued = true;
+      requestAnimationFrame(() => {
+        highlightQueued = false;
+        renderHighlightedEditable(editor, language, baseClassName);
+      });
+    };
+
+    editor.addEventListener("input", queueHighlight);
+    editor.addEventListener("paste", (event) => {
+      event.preventDefault();
+      const text = (event.clipboardData || window.clipboardData).getData("text");
+      document.execCommand("insertText", false, text);
+    });
+    editor.addEventListener("focus", () => {
+      editor.className = `${baseClassName} hljs`;
+    });
+
+    renderHighlightedEditable(editor, language, baseClassName);
+
+    if (lineNumbers) {
+      lineNumbers.syncStyles();
+      lineNumbers.update();
+      editor._updateLineNumbers = lineNumbers.update;
+    }
+
+    return { queueHighlight, lineNumbers };
+  }
+
+  window.EditorHelpers = {
+    getCaretOffset,
+    getSelectionOffsets,
+    setCaretOffset,
+    renderHighlightedEditable,
+    parseEditorClass,
+    makeEditable
+  };
+})();
+</script>
diff --git a/_includes/footer.njk b/_includes/footer.njk
new file mode 100644
index 0000000..3965a16
--- /dev/null
+++ b/_includes/footer.njk
@@ -0,0 +1,121 @@
+{% set footerVariant = footerVariant or 'compact' %}
+{% set currentUrl = page.url or '/' %}
+{% set isUzPage = (lang or '') == 'uz' or currentUrl == '/uz/' or currentUrl.startsWith('/uz/') %}
+{% set homeUrl = '/uz/' if isUzPage else '/en/' %}
+{% set tutorialUrl = '/uz/tutorial/what-is-python/' if isUzPage else '/en/tutorial/what-is-python/' %}
+{% set githubRepoUrl = 'https://github.com/codeuzhub/python-lessons' %}
+{% set githubProfileUrl = 'https://github.com/yakhyo' %}
+{% set linkedinUrl = 'https://www.linkedin.com/in/y-valikhujaev/' %}
+{% set youtubeUrl = 'https://www.youtube.com/@codeuz' %}
+{% set telegramUrl = 'https://t.me/valikhujaev' %}
+{% set contributeUrl = githubRepoUrl + '/blob/main/.github/CONTRIBUTING.md' %}
+{% set issueUrl = githubRepoUrl + '/issues' %}
+{% set siteLabel = "Python Lessons" %}
+{% set taglineText = "Python tutorials in English and Uzbek." if not isUzPage else "Python darslari ingliz va o'zbek tillarida." %}
+{% set quickLinksLabel = "Quick Links" if not isUzPage else "Tezkor havolalar" %}
+{% set projectLabel = "Project" if not isUzPage else "Loyiha" %}
+{% set homeLabel = "Home" if not isUzPage else "Bosh sahifa" %}
+{% set tutorialLabel = "Tutorials" if not isUzPage else "Darslar" %}
+{% set toolsLabel = "Online IDE" if not isUzPage else "Onlayn IDE" %}
+{% set joinGithubLabel = "Join on GitHub" if not isUzPage else "GitHub'da qo'shiling" %}
+{% set contributeLabel = "Contributing Guide" if not isUzPage else "Hissa qo'shish qo'llanmasi" %}
+{% set issueLabel = "Report an Issue" if not isUzPage else "Muammo haqida yozing" %}
+{% set compactTutorialLabel = "Tutorial Index" if not isUzPage else "Darslar ro'yxati" %}
+{% set licenseLabel = "MIT Licensed" if not isUzPage else "MIT litsenziyasi asosida" %}
+{% set brandLabel = "code uz" %}
+{% set compactFooterShowLinks = compactFooterShowLinks if compactFooterShowLinks is defined else true %}
+
+{% if footerVariant == 'full' %}
+  <footer class="mt-12 border-t border-slate-200 bg-slate-900 text-slate-200">
+    <div class="mx-auto max-w-6xl px-4 py-10 md:px-10 md:py-12">
+      <div class="grid gap-8 md:grid-cols-3">
+        <div>
+          <a href="{{ homeUrl | url }}" class="text-xl font-semibold tracking-wide text-white no-underline hover:text-secondary-400">
+            {{ siteLabel }}
+          </a>
+          <p class="mt-3 max-w-md text-sm leading-6 text-slate-300">
+            {{ taglineText }}
+          </p>
+        </div>
+        <div>
+          <h2 class="text-xs font-semibold uppercase tracking-wide text-slate-400">{{ quickLinksLabel }}</h2>
+          <ul class="mt-3 space-y-2 text-sm">
+            <li>
+              <a href="{{ homeUrl | url }}" class="text-slate-200 no-underline hover:text-secondary-400">{{ homeLabel }}</a>
+            </li>
+            <li>
+              <a href="{{ tutorialUrl | url }}" class="text-slate-200 no-underline hover:text-secondary-400">{{ tutorialLabel }}</a>
+            </li>
+            <li>
+              <a href="{{ '/online-python-ide/' | url }}" target="_blank" rel="noopener" class="text-slate-200 no-underline hover:text-secondary-400">{{ toolsLabel }}</a>
+            </li>
+          </ul>
+        </div>
+        <div>
+          <h2 class="text-xs font-semibold uppercase tracking-wide text-slate-400">{{ projectLabel }}</h2>
+          <ul class="mt-3 space-y-2 text-sm">
+            <li>
+              <a href="{{ githubRepoUrl }}" class="text-slate-200 no-underline hover:text-secondary-400">{{ joinGithubLabel }}</a>
+            </li>
+            <li>
+              <a href="{{ contributeUrl }}" class="text-slate-200 no-underline hover:text-secondary-400">{{ contributeLabel }}</a>
+            </li>
+            <li>
+              <a href="{{ issueUrl }}" class="text-slate-200 no-underline hover:text-secondary-400">{{ issueLabel }}</a>
+            </li>
+            <li>
+              <a href="{{ '/LICENSE' | url }}" class="text-slate-200 no-underline hover:text-secondary-400">{{ licenseLabel }}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="mt-8 flex flex-col gap-2 border-t border-slate-800 pt-4 text-xs text-slate-400 md:flex-row md:items-center md:justify-between">
+        <p>© 2026 {{ siteLabel }} | {{ brandLabel }}</p>
+        <div class="flex items-center gap-3 text-base">
+          <a href="{{ githubProfileUrl }}" class="text-slate-300 no-underline hover:text-secondary-400" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
+            <i class="fa-brands fa-github" aria-hidden="true"></i>
+          </a>
+          <a href="{{ linkedinUrl }}" class="text-slate-300 no-underline hover:text-secondary-400" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
+            <i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
+          </a>
+          <a href="{{ youtubeUrl }}" class="text-slate-300 no-underline hover:text-secondary-400" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
+            <i class="fa-brands fa-youtube" aria-hidden="true"></i>
+          </a>
+          <a href="{{ telegramUrl }}" class="text-slate-300 no-underline hover:text-secondary-400" target="_blank" rel="noopener noreferrer" aria-label="Telegram">
+            <i class="fa-brands fa-telegram" aria-hidden="true"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+  </footer>
+{% else %}
+  <footer class="mt-10 border-t border-slate-200 bg-white">
+    <div class="mx-auto max-w-4xl px-4 py-6 text-sm md:px-6">
+      {% if compactFooterShowLinks %}
+        <div class="flex flex-wrap items-center gap-x-5 gap-y-2">
+          <a href="{{ tutorialUrl | url }}" class="text-slate-700 no-underline hover:text-primary-500">{{ compactTutorialLabel }}</a>
+          <a href="{{ githubProfileUrl }}" class="text-slate-700 no-underline hover:text-primary-500" target="_blank" rel="noopener noreferrer">GitHub</a>
+          <a href="{{ issueUrl }}" class="text-slate-700 no-underline hover:text-primary-500">{{ issueLabel }}</a>
+          <a href="{{ '/LICENSE' | url }}" class="text-slate-700 no-underline hover:text-primary-500">{{ licenseLabel }}</a>
+        </div>
+      {% endif %}
+      <div class="{{ 'mt-4 border-t border-slate-200 pt-3' if compactFooterShowLinks else '' }} flex flex-col gap-2 text-xs text-slate-500 md:flex-row md:items-center md:justify-between">
+        <p>© 2026 {{ siteLabel }} | {{ brandLabel }}</p>
+        <div class="flex items-center gap-3 text-base text-slate-500">
+          <a href="{{ githubProfileUrl }}" class="text-slate-500 no-underline hover:text-primary-500" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
+            <i class="fa-brands fa-github" aria-hidden="true"></i>
+          </a>
+          <a href="{{ linkedinUrl }}" class="text-slate-500 no-underline hover:text-primary-500" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
+            <i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
+          </a>
+          <a href="{{ youtubeUrl }}" class="text-slate-500 no-underline hover:text-primary-500" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
+            <i class="fa-brands fa-youtube" aria-hidden="true"></i>
+          </a>
+          <a href="{{ telegramUrl }}" class="text-slate-500 no-underline hover:text-primary-500" target="_blank" rel="noopener noreferrer" aria-label="Telegram">
+            <i class="fa-brands fa-telegram" aria-hidden="true"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+  </footer>
+{% endif %}
diff --git a/_includes/head.njk b/_includes/head.njk
index b45d725..360002e 100644
--- a/_includes/head.njk
+++ b/_includes/head.njk
@@ -1,10 +1,11 @@
 <head>
   {% set langCode = lang or 'en' %}
+  {% set tutorialDisplayTitle = (title | displayTutorialTitle) if title else title %}
   {% set pageDescription = description or site.description %}
   {% if isHomepage %}
     {% set pageTitle = "Python Programming Tutorial | " + site.name %}
   {% elif isTutorial %}
-    {% set pageTitle = title + " - Complete Tutorial Basic to Advanced" %}
+    {% set pageTitle = tutorialDisplayTitle + " - Complete Tutorial Basic to Advanced" %}
   {% elif title %}
     {% set pageTitle = title + " | " + site.name %}
   {% else %}
@@ -71,14 +72,14 @@
       {"@context":"https://schema.org","@type":"WebSite","@id":"{{ site.url }}/#website","url":"{{ site.url }}","name":"{{ site.name }}","description":"{{ pageDescription }}","inLanguage":"{{ 'uz-UZ' if langCode == 'uz' else 'en-US' }}"}
     </script>
     <script type="application/ld+json">
-      {"@context":"https://schema.org","@type":"EducationalOrganization","@id":"{{ site.url }}/#organization","name":"{{ site.name }}","url":"{{ site.url }}","logo":"{{ site.url }}/img/logos/logo-belajarpython-square.png","description":"Complete Python Tutorial for Beginners to Advanced","foundingDate":"2015","sameAs":["https://github.com/belajarpythoncom"],"areaServed":{"@type":"Country","name":"Global"},"teaches":["Python Programming","Data Science","Machine Learning","Web Development"]}
+      {"@context":"https://schema.org","@type":"EducationalOrganization","@id":"{{ site.url }}/#organization","name":"{{ site.name }}","url":"{{ site.url }}","logo":"{{ site.url }}/img/logos/logo-belajarpython-square.png","description":"Complete Python Tutorial for Beginners to Advanced","foundingDate":"2015","sameAs":["https://github.com/codeuzhub/python-lessons"],"areaServed":{"@type":"Country","name":"Global"},"teaches":["Python Programming","Data Science","Machine Learning","Web Development"]}
     </script>
     <script type="application/ld+json">
       {"@context":"https://schema.org","@type":"ItemList","itemListElement":[{"@type":"Course","position":1,"name":"Basic Python Tutorial","description":"Learn Python basics from installation to OOP concepts","provider":{"@type":"Organization","name":"{{ site.name }}"},"educationalLevel":"Beginner","inLanguage":"en","isAccessibleForFree":true}]}
     </script>
   {% else %}
     <script type="application/ld+json">
-      {"@context":"https://schema.org","@type":"Article","headline":"{{ title }}","description":"{{ pageDescription }}","url":"{{ site.url }}{{ page.url }}","inLanguage":"{{ 'uz-UZ' if langCode == 'uz' else 'en-US' }}","publisher":{"@type":"Organization","name":"{{ site.name }}","logo":{"@type":"ImageObject","url":"{{ site.url }}/img/logos/logo-belajarpython-square.png"}}}
+      {"@context":"https://schema.org","@type":"Article","headline":"{{ tutorialDisplayTitle if isTutorial else title }}","description":"{{ pageDescription }}","url":"{{ site.url }}{{ page.url }}","inLanguage":"{{ 'uz-UZ' if langCode == 'uz' else 'en-US' }}","publisher":{"@type":"Organization","name":"{{ site.name }}","logo":{"@type":"ImageObject","url":"{{ site.url }}/img/logos/logo-belajarpython-square.png"}}}
     </script>
   {% endif %}
 
diff --git a/_includes/landing.njk b/_includes/landing.njk
index 082965d..ec58439 100644
--- a/_includes/landing.njk
+++ b/_includes/landing.njk
@@ -1,5 +1,8 @@
-<section id="materi" class="py-8 md:py-14">
-  {% set tutorialList = tutorialItems or collections.tutorials %}
+<section id="materials" class="py-8 md:py-14">
+  {% set currentUrl = page.url or '/' %}
+  {% set isUzPage = (lang or '') == 'uz' or currentUrl == '/uz/' or currentUrl.startsWith('/uz/') %}
+  {% set defaultTutorialList = collections.tutorialsUz if (isUzPage and collections.tutorialsUz) else collections.tutorials %}
+  {% set tutorialList = tutorialItems or defaultTutorialList %}
   <div class="mx-auto max-w-4xl px-4 md:px-10">
     <div class="text-left md:text-center mb-4 md:mb-16">
       <h2 class="text-xl md:text-4xl font-bold text-[#29618a] mb-2 md:mb-4">Python Tutorial Content List</h2>
@@ -9,29 +12,38 @@
     </div>
     <!-- Level Tabs -->
     <div class="max-w-4xl mx-auto mb-8">
-      <div class="relative scrollbar-hide-wrapper">
+      <div class="relative">
         <div class="flex flex-nowrap gap-2 py-3 md:gap-4 justify-start md:justify-center overflow-x-auto md:overflow-visible pb-2
-            md:pb-0 scrollbar-hide-inner no-scrollbar px-2 md:px-0">
+            md:pb-0 no-scrollbar px-2 md:px-0">
           <button
             class="level-tab active bg-primary-800 text-white px-5 pr-9 mr-1 py-2 md:px-6 md:py-3 rounded-full font-medium text-sm
-              md:text-base border-2 border-primary-900 shadow-lg transform scale-110 hover:scale-115 transition-all duration-300
+              md:text-base border-2 border-primary-900 shadow-lg transform scale-110 hover:scale-[1.15] transition-all duration-300
               whitespace-nowrap"
-            data-level="dasar">
-            <i class="fa-solid fa-medal text-[18px] md:text-[20px] translate-y-[-1px] mr-2 md:mr-0 inline-block" style="color: #cd7f32;" aria-hidden="true"></i>
+            data-level="basic">
+            <img
+              src="{{ '/img/icons/bronze.svg' | url }}"
+              alt="Basic Level"
+              class="w-5 h-5 md:w-6 md:h-6 translate-y-[-2px] mr-2 md:mr-0 inline-block">
               Basic Level
             </button>
             <button
               class="level-tab bg-slate-200 text-slate-600 px-5 pr-9 mr-1 py-2 md:px-6 md:py-3 rounded-full font-medium text-sm
                 md:text-base border-2 border-slate-300 hover:bg-slate-300 transition-all duration-300 whitespace-nowrap"
-              data-level="menengah">
-              <i class="fa-solid fa-medal text-[18px] md:text-[20px] translate-y-[-1px] mr-2 md:mr-0 inline-block" style="color: #9ca3af;" aria-hidden="true"></i>
+              data-level="intermediate">
+              <img
+                src="{{ '/img/icons/silver.svg' | url }}"
+                alt="Intermediate Level"
+                class="w-5 h-5 md:w-6 md:h-6 translate-y-[-2px] mr-2 md:mr-0 inline-block">
                 Intermediate Level
               </button>
               <button
                 class="level-tab bg-slate-200 text-slate-600 px-5 pr-9 mr-1 py-2 md:px-6 md:py-3 rounded-full font-medium text-sm
                   md:text-base border-2 border-slate-300 hover:bg-slate-300 transition-all duration-300 whitespace-nowrap"
                 data-level="advanced">
-                <i class="fa-solid fa-medal text-[18px] md:text-[20px] translate-y-[-1px] mr-2 md:mr-0 inline-block" style="color: #d4af37;" aria-hidden="true"></i>
+                <img
+                  src="{{ '/img/icons/gold.svg' | url }}"
+                  alt="Advanced Level"
+                  class="w-5 h-5 md:w-6 md:h-6 translate-y-[-2px] mr-2 md:mr-0 inline-block">
                   Advanced Level
                 </button>
                 </div>
@@ -43,7 +55,7 @@
                 <div class="flex flex-col md:flex-row items-center md:items-start gap-4 md:gap-6">
                   <div class="flex items-center gap-4 w-full md:w-auto">
                     <div class="flex-shrink-0">
-                      <i id="level-icon" class="fa-solid fa-medal text-[56px] md:text-[80px] leading-none" style="color: #cd7f32;" aria-hidden="true"></i>
+                      <img src="{{ '/img/icons/bronze.svg' | url }}" alt="Basic Level" class="w-14 md:w-20 h-14 md:h-20" id="level-icon">
                     </div>
                       <div class="md:hidden">
                         <h3 class="text-xl font-bold text-slate-800" id="level-title-mobile">Basic Level</h3>
@@ -61,15 +73,15 @@
               </div>
               <div class="max-w-4xl text-[15px] md:text-lg mx-auto bg-white overflow-hidden -mt-4 md:mt-0 tutorial-list-container">
                 {% for tutorial in tutorialList %}
-                  {% set tutorialLevel = "dasar" %}
+                  {% set tutorialLevel = "basic" %}
                   {% if tutorial.data.order > 32 %}
                     {% set tutorialLevel = "advanced" %}
                   {% elif tutorial.data.order > 21 %}
-                    {% set tutorialLevel = "menengah" %}
+                    {% set tutorialLevel = "intermediate" %}
                   {% endif %}
                   <a href="{{ tutorial.url }}" class="group flex items-center py-3 px-2 md:px-8 border-b border-slate-100 hover:bg-yellow-50 transition-colors" data-level="{{ tutorialLevel }}">
-                    <span class="text-slate-400 font-medium md:mr-10 w-8">{{ tutorial.data.order }}.</span>
-                    <span class="text-[#306b96] font-medium group-hover:text-[#1d5883] transition-colors">{{ tutorial.data.title }}</span>
+                    <span class="text-slate-400 font-medium md:mr-10 w-8">{{ tutorial.data.order | padStart }}.</span>
+                    <span class="text-[#306b96] font-medium group-hover:text-[#1d5883] transition-colors">{{ tutorial.data.title | displayTutorialTitle }}</span>
                   </a>
                 {% endfor %}
               </div>
@@ -86,26 +98,29 @@
               const levelIcon = document.getElementById('level-icon');
               // Level content configuration
               const levelContent = {
-                dasar: {
+                basic: {
                   title: 'Basic Level',
                   description: 'Start your Python adventure from the basics! Learn fundamental concepts like variables, data types, operators, and contr' +
                       'ol structures. Suitable for beginners new to programming.',
-                  iconClass: 'fa-solid fa-medal text-[56px] md:text-[80px] leading-none',
-                  iconColor: '#cd7f32'
+                  iconSrc: "{{ '/img/icons/bronze.svg' | url }}",
+                  iconAlt: "Basic Level",
+                  iconClass: 'w-14 md:w-20 h-14 md:h-20'
                 },
-                menengah: {
+                intermediate: {
                   title: 'Intermediate Level',
                   description: 'Develop your Python skills further. Master concepts like modules, file I/O, exceptions, and Object-Oriented Programming ' +
                       '(OOP). Aimed at those who understand Python basics and want to expand their capabilities.',
-                  iconClass: 'fa-solid fa-medal text-[56px] md:text-[80px] leading-none',
-                  iconColor: '#9ca3af'
+                  iconSrc: "{{ '/img/icons/silver.svg' | url }}",
+                  iconAlt: "Intermediate Level",
+                  iconClass: 'w-14 md:w-20 h-14 md:h-20'
                 },
                 advanced: {
                   title: 'Advanced Level',
                   description: 'Dive deep into advanced Python techniques. Learn type hints, decorators, iterators, generators, and professional program' +
                       'ming techniques like multithreading and async/await.',
-                  iconClass: 'fa-solid fa-medal text-[56px] md:text-[80px] leading-none',
-                  iconColor: '#d4af37'
+                  iconSrc: "{{ '/img/icons/gold.svg' | url }}",
+                  iconAlt: "Advanced Level",
+                  iconClass: 'w-14 md:w-20 h-14 md:h-20'
                 },
               };
               function filterTutorials(selectedLevel) { // Update level content
@@ -120,8 +135,9 @@
                   levelDescription.textContent = content.description;
                 
                 if (levelIcon) {
+                  levelIcon.src = content.iconSrc;
+                  levelIcon.alt = content.iconAlt;
                   levelIcon.className = content.iconClass;
-                  levelIcon.style.color = content.iconColor;
                 }
                 // Filter tutorials
                 tutorialItems.forEach(item => {
@@ -136,18 +152,18 @@
                 tab.addEventListener('click', function () { // Update active tab styles
                   tabs.forEach(t => {
                     t.classList.remove(
-                      'active', 'bg-primary-800', 'text-white', 'border-primary-900', 'shadow-lg', 'transform', 'scale-110', 'hover:scale-115'
+                      'active', 'bg-primary-800', 'text-white', 'border-primary-900', 'shadow-lg', 'transform', 'scale-110', 'hover:scale-[1.15]'
                     );
                     t.classList.add('bg-slate-200', 'text-slate-600', 'border-slate-300', 'hover:bg-slate-300');
                   });
                   this.classList.add(
-                    'active', 'bg-primary-800', 'text-white', 'border-primary-900', 'shadow-lg', 'transform', 'scale-110', 'hover:scale-115'
+                    'active', 'bg-primary-800', 'text-white', 'border-primary-900', 'shadow-lg', 'transform', 'scale-110', 'hover:scale-[1.15]'
                   );
                   this.classList.remove('bg-slate-200', 'text-slate-600', 'border-slate-300', 'hover:bg-slate-300');
                   filterTutorials(this.dataset.level);
                 });
               });
               // Initialize with default level
-              filterTutorials('dasar');
+              filterTutorials('basic');
             });
           </script>
diff --git a/_includes/navbar.njk b/_includes/navbar.njk
index f55afa4..ce47542 100644
--- a/_includes/navbar.njk
+++ b/_includes/navbar.njk
@@ -1,31 +1,125 @@
-<nav class="h-16 bg-primary-500 text-white {{ 'fixed top-0 left-0 right-0 z-[60] shadow-md' if not isHomepage }}">
-    <div class="relative flex items-center justify-center md:justify-between pt-3 max-w-7xl px-4 md:px-10 mx-auto">
-        {% if isTutorial %}
-            <button
-                id="mobile-tutorial-sidebar-toggle"
-                class="absolute left-4 top-4 md:hidden text-white focus:outline-none"
-                aria-label="Toggle Sidebar">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
-                </svg>
-            </button>
-        {% endif %}
-        <a href="{{ '/' | url }}" class="z-10">
-            <img class="h-10 pt-1" src="{{ '/img/logo-belajarpython-140.png' | url }}" alt="logo-belajarpython"/>
-        </a>
-        <div class="hidden md:flex items-center justify-end">
-            <div class="mr-5 flex gap-5">
-                <a class="text-white text-opacity-70 hover:text-opacity-100" href="{{ '/tutorial/what-is-python/' | url }}">Tutorial</a>
-            </div>
-            <a
-                class="flex h-9 items-center rounded-full bg-gradient-to-l from-secondary-500 to-secondary-400 px-7 text-sm text-black"
-                href="https://github.com/belajarpythoncom/belajarpython.com">
-                <span class="-mt-0.5">Join on Github</span>
-                <img class="ml-2 h-4 button-github-yellow-img" src="{{ '/img/icon-github.svg' | url }}"/>
+{% set currentUrl = page.url or '/' %}
+{% set isEnTutorial = currentUrl.startsWith('/en/tutorial/') %}
+{% set isUzTutorial = currentUrl.startsWith('/uz/tutorial/') %}
+{% set isUzPage = (lang or '') == 'uz' or currentUrl == '/uz/' or currentUrl.startsWith('/uz/') %}
+{% set enUrl = currentUrl | replace('/uz/tutorial/', '/en/tutorial/') if isUzTutorial else '/en/' %}
+{% set uzUrl = currentUrl | replace('/en/tutorial/', '/uz/tutorial/') if isEnTutorial else '/uz/' %}
+{% set homeUrl = '/uz/' if isUzPage else '/en/' %}
+{% set tutorialUrl = '/uz/tutorial/what-is-python/' if isUzPage else '/en/tutorial/what-is-python/' %}
+{% set tutorialLabel = "Darslar" if isUzPage else "Tutorial" %}
+{% set githubLabel = "GitHub'da qo'shiling" if isUzPage else "Join on Github" %}
+{% set ideLabel = "Onlayn IDE" if isUzPage else "Online IDE" %}
+{% set languageSwitchUrl = '/uz/' if not isUzPage else '/en/' %}
+{% if currentUrl == '/' %}
+  {% set languageSwitchUrl = '/uz/' %}
+{% elif currentUrl == '/en/' %}
+  {% set languageSwitchUrl = '/uz/' %}
+{% elif currentUrl == '/uz/' %}
+  {% set languageSwitchUrl = '/en/' %}
+{% elif isEnTutorial %}
+  {% set languageSwitchUrl = uzUrl %}
+{% elif isUzTutorial %}
+  {% set languageSwitchUrl = enUrl %}
+{% endif %}
+{% set languageSwitchAriaLabel = "Switch to English" if isUzPage else "Switch to Uzbek" %}
+{% set languageSwitchCode = "EN" if isUzPage else "UZ" %}
+
+<nav class="{{ 'py-1.5' if isToolPage else 'py-2.5 md:py-3' }} bg-primary-500 text-white {{ 'fixed top-0 left-0 right-0 z-[60] shadow-md' if not isHomepage }}">
+    <div class="flex items-center justify-between max-w-7xl px-4 md:px-10 mx-auto">
+        <div class="flex items-center gap-3">
+            {% if isTutorial %}
+                <button
+                    id="mobile-tutorial-sidebar-toggle"
+                    class="md:hidden text-white focus:outline-none"
+                    aria-label="Toggle Sidebar">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+                    </svg>
+                </button>
+            {% endif %}
+            <a href="{{ homeUrl | url }}">
+                <img class="{{ 'h-6' if isToolPage else 'h-8 md:h-9' }}" src="{{ '/img/logo-belajarpython-140.png' | url }}" alt="logo-belajarpython"/>
             </a>
         </div>
+        {% if not isToolPage %}
+        <div class="flex items-center">
+            <div class="md:hidden flex items-center gap-2">
+                <a
+                    class="inline-flex items-center gap-1 bg-white/10 hover:bg-white/20 px-2 py-1 rounded-full text-[11px] font-medium text-white whitespace-nowrap transition-colors"
+                    href="{{ '/online-python-ide/' | url }}"
+                    target="_blank"
+                    rel="noopener">
+                    <i class="fa-solid fa-terminal text-[9px]" aria-hidden="true"></i>
+                    IDE
+                </a>
+                <a
+                    href="{{ languageSwitchUrl | url }}"
+                    aria-label="{{ languageSwitchAriaLabel }}"
+                    class="inline-flex items-center gap-1.5 rounded-full bg-white/10 hover:bg-white/20 px-2 py-1 text-[11px] font-bold leading-none text-white transition-colors">
+                    <span
+                        aria-hidden="true"
+                        class="relative h-5 w-5 overflow-hidden rounded-full border border-white/20">
+                        {% if not isUzPage %}
+                            <span
+                                class="absolute inset-0"
+                                style="background: linear-gradient(to bottom, #1eb6f0 0 31%, #ce1126 31% 35%, #ffffff 35% 65%, #ce1126 65% 69%, #1eb53a 69% 100%);"></span>
+                        {% else %}
+                            <span
+                                class="absolute inset-0"
+                                style="background: repeating-linear-gradient(to bottom, #b22234 0 14.3%, #ffffff 14.3% 28.6%);"></span>
+                            <span class="absolute left-0 top-0 h-[55%] w-[45%] bg-[#3c3b6e]"></span>
+                        {% endif %}
+                    </span>
+                    <span>{{ languageSwitchCode }}</span>
+                </a>
+            </div>
+            <div class="hidden md:flex items-center justify-end">
+                <div class="mr-5 flex items-center gap-4">
+                    <a
+                        class="text-center text-white/80 hover:text-white whitespace-nowrap"
+                        href="{{ tutorialUrl | url }}">
+                        {{ tutorialLabel }}
+                    </a>
+                    <a
+                        class="inline-flex items-center gap-1.5 bg-white/10 hover:bg-white/20 px-3 py-1 rounded-full text-sm font-medium text-white whitespace-nowrap transition-colors"
+                        href="{{ '/online-python-ide/' | url }}"
+                        target="_blank"
+                        rel="noopener">
+                        <i class="fa-solid fa-terminal text-[10px]" aria-hidden="true"></i>
+                        {{ ideLabel }}
+                    </a>
+                    <a
+                        href="{{ languageSwitchUrl | url }}"
+                        aria-label="{{ languageSwitchAriaLabel }}"
+                        class="inline-flex items-center gap-1.5 rounded-full bg-white/10 hover:bg-white/20 px-2.5 py-1 text-xs font-bold leading-none text-white transition-colors">
+                        <span
+                            aria-hidden="true"
+                            class="relative h-5 w-5 overflow-hidden rounded-full border border-white/20">
+                            {% if not isUzPage %}
+                                <span
+                                    class="absolute inset-0"
+                                    style="background: linear-gradient(to bottom, #1eb6f0 0 31%, #ce1126 31% 35%, #ffffff 35% 65%, #ce1126 65% 69%, #1eb53a 69% 100%);"></span>
+                            {% else %}
+                                <span
+                                    class="absolute inset-0"
+                                    style="background: repeating-linear-gradient(to bottom, #b22234 0 14.3%, #ffffff 14.3% 28.6%);"></span>
+                                <span class="absolute left-0 top-0 h-[55%] w-[45%] bg-[#3c3b6e]"></span>
+                            {% endif %}
+                        </span>
+                        <span>{{ languageSwitchCode }}</span>
+                    </a>
+                </div>
+                <a
+                    class="inline-flex min-w-[13rem] px-5 py-2 items-center justify-center rounded-full bg-gradient-to-l from-secondary-500 to-secondary-400 text-sm text-black whitespace-nowrap"
+                    href="https://github.com/codeuzhub/python-lessons">
+                    <span class="-mt-0.5">{{ githubLabel }}</span>
+                    <i class="fa-brands fa-github ml-2 text-lg" aria-hidden="true"></i>
+                </a>
+            </div>
+        </div>
+        {% endif %}
     </div>
 </nav>
 {% if not isHomepage %}
-    <div class="h-16"></div>
+    <div class="{{ 'h-9' if isToolPage else 'h-14' }}"></div>
 {% endif %}
diff --git a/_includes/pyodide-runtime.njk b/_includes/pyodide-runtime.njk
new file mode 100644
index 0000000..c44471e
--- /dev/null
+++ b/_includes/pyodide-runtime.njk
@@ -0,0 +1,203 @@
+<script>
+  (function () {
+    if (window.PyRuntime) {
+      return;
+    }
+
+    const PYODIDE_CDN = "https://cdn.jsdelivr.net/pyodide/v0.27.5/full/pyodide.js";
+    const WORKER_URL = "{{ '/js/pyodide-worker.js' | url }}";
+    const DEFAULT_TIMEOUT_MS = 30000;
+
+    let worker = null;
+    let runCounter = 0;
+    const pendingRuns = new Map();
+
+    let scriptPromise = null;
+    let mainThreadPyodidePromise = null;
+
+    function toErrorMessage(err) {
+      if (!err) {
+        return "Unknown error";
+      }
+      if (typeof err === "string") {
+        return err;
+      }
+      return err.message || String(err);
+    }
+
+    function ensurePyodideScript() {
+      if (window.loadPyodide) {
+        return Promise.resolve();
+      }
+      if (!scriptPromise) {
+        scriptPromise = new Promise((resolve, reject) => {
+          const script = document.createElement("script");
+          script.src = PYODIDE_CDN;
+          script.async = true;
+          script.onload = () => resolve();
+          script.onerror = () => reject(new Error("Failed to load Pyodide runtime"));
+          document.head.appendChild(script);
+        });
+      }
+      return scriptPromise;
+    }
+
+    async function getMainThreadPyodide() {
+      if (!mainThreadPyodidePromise) {
+        await ensurePyodideScript();
+        mainThreadPyodidePromise = loadPyodide();
+      }
+      return mainThreadPyodidePromise;
+    }
+
+    function flushPendingWithError(message) {
+      for (const [id, pending] of pendingRuns.entries()) {
+        clearTimeout(pending.timeoutId);
+        pending.reject(new Error(message));
+        pendingRuns.delete(id);
+      }
+    }
+
+    function attachWorkerHandlers(instance) {
+      instance.onmessage = (event) => {
+        const payload = event.data || {};
+        const pending = pendingRuns.get(payload.id);
+        if (!pending) {
+          return;
+        }
+
+        clearTimeout(pending.timeoutId);
+        pendingRuns.delete(payload.id);
+
+        if (payload.type === "result") {
+          pending.resolve({
+            stdout: payload.stdout || "",
+            stderr: payload.stderr || ""
+          });
+          return;
+        }
+
+        if (payload.type === "error") {
+          const detail = [payload.stderr, payload.error].filter(Boolean).join("\n");
+          pending.reject(new Error(detail || "Python execution failed"));
+          return;
+        }
+
+        pending.reject(new Error("Unknown worker response"));
+      };
+
+      instance.onerror = (event) => {
+        const message = event && event.message ? event.message : "Pyodide worker crashed";
+        flushPendingWithError(message);
+      };
+    }
+
+    function ensureWorker() {
+      if (worker) {
+        return worker;
+      }
+
+      worker = new Worker(WORKER_URL);
+      attachWorkerHandlers(worker);
+      return worker;
+    }
+
+    function resetWorker() {
+      if (worker) {
+        worker.terminate();
+        worker = null;
+      }
+    }
+
+    async function runInWorker(code, options = {}) {
+      const timeoutMs = Number(options.timeoutMs) > 0 ? Number(options.timeoutMs) : DEFAULT_TIMEOUT_MS;
+      const globals = options.globals && typeof options.globals === "object" ? options.globals : {};
+      const id = ++runCounter;
+      const workerInstance = ensureWorker();
+
+      return new Promise((resolve, reject) => {
+        const timeoutId = setTimeout(() => {
+          pendingRuns.delete(id);
+          resetWorker();
+          reject(new Error(`Execution timed out after ${Math.round(timeoutMs / 1000)}s`));
+        }, timeoutMs);
+
+        pendingRuns.set(id, { resolve, reject, timeoutId });
+        workerInstance.postMessage({
+          type: "run",
+          id,
+          code: code || "",
+          globals
+        });
+      });
+    }
+
+    async function runOnMainThread(code, options = {}) {
+      const globals = options.globals && typeof options.globals === "object" ? options.globals : {};
+      const py = await getMainThreadPyodide();
+
+      const stdoutBuffer = [];
+      const stderrBuffer = [];
+
+      py.setStdout({
+        batched: (str) => {
+          stdoutBuffer.push(str);
+        }
+      });
+
+      py.setStderr({
+        batched: (str) => {
+          stderrBuffer.push(str);
+        }
+      });
+
+      for (const [key, value] of Object.entries(globals)) {
+        py.globals.set(key, value);
+      }
+
+      try {
+        await py.runPythonAsync(code || "");
+        return {
+          stdout: stdoutBuffer.join("\n"),
+          stderr: stderrBuffer.join("\n")
+        };
+      } finally {
+        for (const key of Object.keys(globals)) {
+          try {
+            py.globals.delete(key);
+          } catch (_err) {
+            // Ignore cleanup failures.
+          }
+        }
+      }
+    }
+
+    async function run(code, options = {}) {
+      const useWorker = options.useWorker !== false;
+      if (useWorker) {
+        return runInWorker(code, options);
+      }
+
+      return runOnMainThread(code, options);
+    }
+
+    async function warmup(options = {}) {
+      const useWorker = options.useWorker !== false;
+      if (useWorker) {
+        return runInWorker("pass", {
+          timeoutMs: options.timeoutMs || DEFAULT_TIMEOUT_MS,
+          globals: {}
+        });
+      }
+      await getMainThreadPyodide();
+      return { stdout: "", stderr: "" };
+    }
+
+    window.PyRuntime = {
+      run,
+      warmup,
+      resetWorker,
+      version: "pyodide-0.25.0"
+    };
+  })();
+</script>
diff --git a/_includes/python-ast-transform-runtime.njk b/_includes/python-ast-transform-runtime.njk
index 975e228..6442d32 100644
--- a/_includes/python-ast-transform-runtime.njk
+++ b/_includes/python-ast-transform-runtime.njk
@@ -1,88 +1,7 @@
-<script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
+{% include "editor-helpers.njk" %}{% include "pyodide-runtime.njk" %}
 <script>
   (function () {
-    let pyodidePromise = null;
-
-    async function getPyodide() {
-      if (!pyodidePromise) {
-        pyodidePromise = loadPyodide();
-      }
-      return pyodidePromise;
-    }
-
-    function getCaretOffset(container) {
-      const selection = window.getSelection();
-      if (!selection || selection.rangeCount === 0) {
-        return null;
-      }
-
-      const range = selection.getRangeAt(0);
-      if (!container.contains(range.endContainer)) {
-        return null;
-      }
-
-      const preCaretRange = range.cloneRange();
-      preCaretRange.selectNodeContents(container);
-      preCaretRange.setEnd(range.endContainer, range.endOffset);
-      return preCaretRange.toString().length;
-    }
-
-    function setCaretOffset(container, offset) {
-      const safeOffset = Math.max(0, offset || 0);
-      const selection = window.getSelection();
-      if (!selection) {
-        return;
-      }
-
-      const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
-      let currentOffset = 0;
-      let targetNode = null;
-      let targetOffset = 0;
-      let node = walker.nextNode();
-
-      while (node) {
-        const nextOffset = currentOffset + node.nodeValue.length;
-        if (safeOffset <= nextOffset) {
-          targetNode = node;
-          targetOffset = safeOffset - currentOffset;
-          break;
-        }
-        currentOffset = nextOffset;
-        node = walker.nextNode();
-      }
-
-      const range = document.createRange();
-      if (targetNode) {
-        range.setStart(targetNode, targetOffset);
-      } else {
-        range.selectNodeContents(container);
-        range.collapse(false);
-      }
-      range.collapse(true);
-      selection.removeAllRanges();
-      selection.addRange(range);
-    }
-
-    function renderHighlightedEditable(editor, language, baseClassName) {
-      const source = editor.textContent || "";
-      const caretOffset = getCaretOffset(editor);
-
-      if (window.hljs) {
-        const highlighted = hljs.highlight(source, {
-          language,
-          ignoreIllegals: true
-        }).value;
-        editor.innerHTML = highlighted;
-        editor.className = `${baseClassName} hljs`;
-      } else {
-        editor.textContent = source;
-        editor.className = baseClassName;
-      }
-
-      if (caretOffset !== null) {
-        setCaretOffset(editor, Math.min(caretOffset, (editor.textContent || "").length));
-      }
-    }
+    const { renderHighlightedEditable, parseEditorClass, makeEditable } = window.EditorHelpers;
 
     function getRunCode(mode) {
       if (mode === "minify") {
@@ -145,33 +64,8 @@ except Exception as e:
         return;
       }
 
-      const baseClassName = (editor.className || "").split(/\s+/).filter((cls) => cls && cls !== "hljs").join(" ");
-      const languageMatch = baseClassName.match(/language-([a-z0-9-]+)/i);
-      const editorLanguage = languageMatch ? languageMatch[1] : "python";
-      let highlightQueued = false;
-      const queueHighlight = () => {
-        if (highlightQueued) {
-          return;
-        }
-        highlightQueued = true;
-        requestAnimationFrame(() => {
-          highlightQueued = false;
-          renderHighlightedEditable(editor, editorLanguage, baseClassName);
-        });
-      };
-
-      editor.setAttribute("contenteditable", "true");
-      editor.setAttribute("spellcheck", "false");
-      editor.addEventListener("input", queueHighlight);
-      editor.addEventListener("paste", (event) => {
-        event.preventDefault();
-        const text = (event.clipboardData || window.clipboardData).getData("text");
-        document.execCommand("insertText", false, text);
-      });
-      editor.addEventListener("focus", () => {
-        editor.className = `${baseClassName} hljs`;
-      });
-      renderHighlightedEditable(editor, editorLanguage, baseClassName);
+      const { baseClassName, language: editorLanguage } = parseEditorClass(editor);
+      makeEditable(editor, editorLanguage, baseClassName);
 
       runBtn.addEventListener("click", async () => {
         output.textContent = config.runningOutputText;
@@ -179,19 +73,15 @@ except Exception as e:
         runBtn.disabled = true;
 
         try {
-          const py = await getPyodide();
-          py.globals.set("input_code", editor.textContent || "");
-
           const runCode = getRunCode(config.mode);
-          let stdout = "";
-          py.setStdout({
-            batched: (str) => {
-              stdout += str + "\\n";
+          const result = await window.PyRuntime.run(runCode, {
+            timeoutMs: 12000,
+            useWorker: true,
+            globals: {
+              input_code: editor.textContent || ""
             }
           });
-          await py.runPythonAsync(runCode);
-
-          output.textContent = stdout;
+          output.textContent = [result.stdout, result.stderr].filter(Boolean).join("\\n");
           status.textContent = "Done";
         } catch (err) {
           output.textContent = "Error: " + err.message;
diff --git a/_includes/python-runner.njk b/_includes/python-runner.njk
index 04beee4..1750d05 100644
--- a/_includes/python-runner.njk
+++ b/_includes/python-runner.njk
@@ -170,103 +170,58 @@
 .code-runner-container:hover {
     border-color: var(--runner-accent);
     box-shadow: 0 0 20px rgba(56, 189, 248, 0.1);
-}</style><script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script><script>
+}
+/* Copy button for non-Python code blocks */
+.code-block-wrapper {
+    position: relative;
+}
+.code-copy-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    border: none;
+    background: rgba(255, 255, 255, 0.08);
+    color: #94a3b8;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s, color 0.2s, background 0.2s;
+    z-index: 5;
+    padding: 0;
+}
+.code-block-wrapper:hover .code-copy-btn {
+    opacity: 1;
+}
+.code-copy-btn:hover {
+    color: #f8fafc;
+    background: rgba(255, 255, 255, 0.15);
+}
+.code-copy-btn.copied {
+    color: #22c55e;
+}</style>{% include "editor-helpers.njk" %}{% include "pyodide-runtime.njk" %}<script>
 (function () {
-    let pyodidePromise = null;
-    async function getPyodide() {
-        if (! pyodidePromise) {
-            pyodidePromise = loadPyodide();
-        }
-        return pyodidePromise;
-    }
-
-    function getCaretOffset(container) {
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0) {
-            return null;
-        }
-
-        const range = selection.getRangeAt(0);
-        if (!container.contains(range.endContainer)) {
-            return null;
-        }
-
-        const preCaretRange = range.cloneRange();
-        preCaretRange.selectNodeContents(container);
-        preCaretRange.setEnd(range.endContainer, range.endOffset);
-        return preCaretRange.toString().length;
-    }
-
-    function setCaretOffset(container, offset) {
-        const safeOffset = Math.max(0, offset || 0);
-        const selection = window.getSelection();
-        if (!selection) {
-            return;
-        }
-
-        const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
-        let currentOffset = 0;
-        let targetNode = null;
-        let targetOffset = 0;
-        let node = walker.nextNode();
-
-        while (node) {
-            const nextOffset = currentOffset + node.nodeValue.length;
-            if (safeOffset <= nextOffset) {
-                targetNode = node;
-                targetOffset = safeOffset - currentOffset;
-                break;
-            }
-            currentOffset = nextOffset;
-            node = walker.nextNode();
-        }
-
-        const range = document.createRange();
-        if (targetNode) {
-            range.setStart(targetNode, targetOffset);
-        } else {
-            range.selectNodeContents(container);
-            range.collapse(false);
-        }
-        range.collapse(true);
-        selection.removeAllRanges();
-        selection.addRange(range);
-    }
-
-    function renderHighlightedEditable(block, language, baseClassName) {
-        const source = block.textContent || '';
-        const caretOffset = getCaretOffset(block);
-
-        if (window.hljs) {
-            const highlighted = hljs.highlight(source, {
-                language,
-                ignoreIllegals: true
-            }).value;
-            block.innerHTML = highlighted;
-            block.className = `${baseClassName} hljs`;
-        } else {
-            block.textContent = source;
-            block.className = baseClassName;
-        }
-
-        if (caretOffset !== null) {
-            setCaretOffset(block, Math.min(caretOffset, (block.textContent || '').length));
-        }
-    }
+    const { renderHighlightedEditable, parseEditorClass, makeEditable } = window.EditorHelpers;
 
     function initRunners() {
-        const pythonBlocks = document.querySelectorAll('pre > code.language-python');
+        const configuredMode = window.PY_RUNNER_MODE || document.documentElement.getAttribute('data-python-runner-mode') || 'auto';
+        const selector = configuredMode === 'opt-in'
+            ? 'pre > code.language-python[data-runnable]'
+            : 'pre > code.language-python';
+        const pythonBlocks = document.querySelectorAll(selector);
         pythonBlocks.forEach((block, index) => {
             if (block.closest('.code-runner-container')) 
                 return;
             
-            // Already initialized
             const pre = block.parentElement;
-            const baseClassName = (block.className || '').split(/\s+/).filter((cls) => cls && cls !== 'hljs').join(' ') || 'language-python';
-            const languageMatch = baseClassName.match(/language-([a-z0-9-]+)/i);
-            const editorLanguage = languageMatch ? languageMatch[1] : 'python';
-            const initialCode = block.textContent || '';
-            const originalCode = initialCode.trim();
+            const parsed = parseEditorClass(block);
+            const baseClassName = parsed.baseClassName || 'language-python';
+            const editorLanguage = parsed.language;
+            const originalCode = (block.textContent || '').trim();
             // Create container
             const container = document.createElement('div');
             container.className = 'code-runner-container';
@@ -275,7 +230,7 @@
             header.className = 'code-runner-header';
             header.innerHTML = `
                     <div class="code-runner-title">
-                        <img src="{{ '/img/icons/icon-python.ico' | url }}" width="20" height="20" alt="Logo Python" style="display: block;">
+                        <i class="fa-brands fa-python text-xl leading-none" aria-hidden="true"></i>
                         <span>Interactive Python <span class="hidden md:inline">Editor</span></span>
                     </div>
                     <div class="code-runner-actions">
@@ -312,104 +267,130 @@
             editorWrapper.appendChild(pre);
             container.appendChild(editorWrapper);
             container.appendChild(output);
-            // Make block editable
-            block.setAttribute('contenteditable', 'true');
-            block.setAttribute('spellcheck', 'false');
-            let highlightQueued = false;
-            const queueHighlight = () => {
-                if (highlightQueued) {
-                    return;
-                }
-                highlightQueued = true;
-                requestAnimationFrame(() => {
-                    highlightQueued = false;
-                    renderHighlightedEditable(block, editorLanguage, baseClassName);
-                });
-            };
-
-            block.addEventListener('input', queueHighlight);
-            block.addEventListener('paste', (event) => {
-                event.preventDefault();
-                const text = (event.clipboardData || window.clipboardData).getData('text');
-                document.execCommand('insertText', false, text);
-            });
-            block.addEventListener(
-                'focus',
-                () => {
-                    block.className = `${baseClassName} hljs`;
-                }
-            );
-            renderHighlightedEditable(block, editorLanguage, baseClassName);
+            makeEditable(block, editorLanguage, baseClassName);
             const runBtn = header.querySelector(`#run-btn-${index}`);
             const resetBtn = header.querySelector(`#reset-btn-${index}`);
             const copyBtn = header.querySelector(`#copy-btn-${index}`);
             const statusBadge = header.querySelector(`#status-${index}`);
+
             copyBtn.addEventListener('click', async () => {
-                await navigator.clipboard.writeText(block.innerText);
-                statusBadge.textContent = 'Copied!';
+                try {
+                    await navigator.clipboard.writeText(block.innerText);
+                    statusBadge.textContent = 'Copied!';
+                } catch (err) {
+                    statusBadge.textContent = 'Copy failed';
+                }
                 setTimeout(() => (statusBadge.textContent = ''), 2000);
             });
-            runBtn.addEventListener('click', async () => {
+
+            async function runCode() {
                 output.classList.add('active');
                 output.classList.remove('error');
                 output.textContent = '';
-                if (!window.pyodideInstance) {
-                    loadingOverlay.style.display = 'flex';
-                    statusBadge.textContent = 'Loading...';
-                    try {
-                        window.pyodideInstance = await getPyodide();
-                    } catch (err) {
-                        output.classList.add('error');
-                        output.textContent = 'Failed to load Python engine: ' + err.message;
-                        loadingOverlay.style.display = 'none';
-                        return;
-                    }
-                    loadingOverlay.style.display = 'none';
-                }
+                loadingOverlay.style.display = 'flex';
                 statusBadge.textContent = 'Running...';
                 runBtn.disabled = true;
                 try {
-                    const py = window.pyodideInstance;
-                    let stdoutContent = '';
-                    py.setStdout({
-                        batched: (str) => {
-                            stdoutContent += str + '\n';
-                            output.textContent = stdoutContent;
-                        }
+                    const result = await window.PyRuntime.run(block.textContent || '', {
+                        timeoutMs: 30000,
+                        useWorker: true
                     });
-                    const code = block.textContent || '';
-                    await py.runPythonAsync(code);
-                    
                     statusBadge.textContent = 'Done';
-                    if (! stdoutContent) {
+                    if (!result.stdout && !result.stderr) {
                         output.textContent = '(Executed successfully, no output)';
+                    } else {
+                        output.innerHTML = '';
+                        if (result.stdout) {
+                            const el = document.createElement('span');
+                            el.textContent = result.stdout;
+                            output.appendChild(el);
+                        }
+                        if (result.stderr) {
+                            if (result.stdout) output.appendChild(document.createTextNode('\n'));
+                            const el = document.createElement('span');
+                            el.style.color = '#fbbf24';
+                            el.textContent = result.stderr;
+                            output.appendChild(el);
+                        }
                     }
                 } catch (err) {
                     output.classList.add('error');
                     output.textContent = err.message;
                     statusBadge.textContent = 'Error';
                 } finally {
+                    loadingOverlay.style.display = 'none';
                     runBtn.disabled = false;
+                    output.scrollTop = output.scrollHeight;
                     setTimeout(() => {
-                        if (statusBadge.textContent !== 'Error') 
-                            statusBadge.textContent = '';
-                        
+                        if (statusBadge.textContent !== 'Error') statusBadge.textContent = '';
                     }, 3000);
                 }
+            }
+
+            // Ctrl+Enter / Cmd+Enter to run
+            block.addEventListener('keydown', (e) => {
+                if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                    e.preventDefault();
+                    runCode();
+                }
             });
+
+            runBtn.addEventListener('click', runCode);
+
             resetBtn.addEventListener('click', () => {
                 block.textContent = originalCode;
                 renderHighlightedEditable(block, editorLanguage, baseClassName);
-                
                 output.classList.remove('active');
+                output.innerHTML = '';
                 statusBadge.textContent = 'Reset';
                 setTimeout(() => statusBadge.textContent = '', 2000);
             });
         });
     }
+    function initCopyButtons() {
+        const copySvg = '<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="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>';
+        const checkSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+
+        document.querySelectorAll('pre > code').forEach(function (block) {
+            if (block.closest('.code-runner-container')) return;
+            if (block.classList.contains('language-python')) return;
+
+            var pre = block.parentElement;
+            if (pre.parentElement && pre.parentElement.classList.contains('code-block-wrapper')) return;
+
+            var wrapper = document.createElement('div');
+            wrapper.className = 'code-block-wrapper';
+            pre.parentNode.insertBefore(wrapper, pre);
+            wrapper.appendChild(pre);
+
+            var btn = document.createElement('button');
+            btn.className = 'code-copy-btn';
+            btn.setAttribute('title', 'Copy');
+            btn.setAttribute('aria-label', 'Copy code');
+            btn.innerHTML = copySvg;
+            wrapper.appendChild(btn);
+
+            btn.addEventListener('click', function () {
+                var text = block.textContent || '';
+                navigator.clipboard.writeText(text).then(function () {
+                    btn.innerHTML = checkSvg;
+                    btn.classList.add('copied');
+                    setTimeout(function () {
+                        btn.innerHTML = copySvg;
+                        btn.classList.remove('copied');
+                    }, 2000);
+                });
+            });
+        });
+    }
+
+    function initAll() {
+        initRunners();
+        initCopyButtons();
+    }
     if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initRunners);
+        document.addEventListener('DOMContentLoaded', initAll);
     } else {
-        initRunners();
+        initAll();
     }
 })();</script>
diff --git a/_includes/python-split-editor-tool.njk b/_includes/python-split-editor-tool.njk
index 1bea9a2..f8ecc1e 100644
--- a/_includes/python-split-editor-tool.njk
+++ b/_includes/python-split-editor-tool.njk
@@ -18,7 +18,7 @@
         <span id="status-badge" class="text-xs text-white/80 font-medium w-20 text-right">Ready</span>
         <button id="run-btn" class="{{ toolRunButtonClass }}">
           {% if toolRunIcon %}
-            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-4 h-4">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
               <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd" />
             </svg>
           {% endif %}
@@ -34,7 +34,7 @@
   </header>
 
   <div class="flex-1 flex min-h-0">
-    <div class="w-1/2 flex flex-col border-r border-slate-700">
+    <div class="w-[55%] flex flex-col border-r border-slate-700">
       {% if toolEditorTopBar %}
         <div class="bg-slate-800 px-4 py-2 text-xs text-slate-400 font-medium flex justify-between items-center border-b border-slate-700">
           <span>{{ toolEditorTopBar }}</span>
@@ -48,7 +48,7 @@
       </div>
     </div>
 
-    <div class="w-1/2 flex flex-col {{ toolOutputPaneClass }}">
+    <div class="w-[45%] flex flex-col {{ toolOutputPaneClass }}">
       {% if toolOutputHeader %}
         <div class="bg-slate-800 px-4 py-2 text-xs text-slate-400 font-medium border-b border-slate-700">
           {{ toolOutputHeader }}
diff --git a/_includes/python-tool-runner.njk b/_includes/python-tool-runner.njk
index a78a0cd..406bc88 100644
--- a/_includes/python-tool-runner.njk
+++ b/_includes/python-tool-runner.njk
@@ -117,7 +117,6 @@
   border-left: 1px solid var(--tool-border);
 }
 
-/* Loading overlay */
 .tool-loading {
   position: absolute;
   inset: 0;
@@ -142,196 +141,175 @@
   margin-bottom: 0.5rem;
 }
 
+.tool-output-stdout {
+  color: var(--tool-output-text);
+}
+.tool-output-stderr {
+  color: #fbbf24;
+}
+.tool-output-error {
+  color: var(--tool-error);
+}
+
 </style>
 
-<script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
+{% include "editor-helpers.njk" %}{% include "pyodide-runtime.njk" %}
 <script>
 (function() {
-  let pyodidePromise = null;
-  async function getPyodide() {
-    if (!pyodidePromise) {
-      pyodidePromise = loadPyodide();
-    }
-    return pyodidePromise;
-  }
-
-  function getCaretOffset(container) {
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0) {
-      return null;
-    }
-
-    const range = selection.getRangeAt(0);
-    if (!container.contains(range.endContainer)) {
-      return null;
-    }
-
-    const preCaretRange = range.cloneRange();
-    preCaretRange.selectNodeContents(container);
-    preCaretRange.setEnd(range.endContainer, range.endOffset);
-    return preCaretRange.toString().length;
-  }
-
-  function setCaretOffset(container, offset) {
-    const safeOffset = Math.max(0, offset || 0);
-    const selection = window.getSelection();
-    if (!selection) {
-      return;
-    }
-
-    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
-    let currentOffset = 0;
-    let targetNode = null;
-    let targetOffset = 0;
-    let node = walker.nextNode();
-
-    while (node) {
-      const nextOffset = currentOffset + node.nodeValue.length;
-      if (safeOffset <= nextOffset) {
-        targetNode = node;
-        targetOffset = safeOffset - currentOffset;
-        break;
-      }
-      currentOffset = nextOffset;
-      node = walker.nextNode();
-    }
-
-    const range = document.createRange();
-    if (targetNode) {
-      range.setStart(targetNode, targetOffset);
-    } else {
-      range.selectNodeContents(container);
-      range.collapse(false);
-    }
-    range.collapse(true);
-    selection.removeAllRanges();
-    selection.addRange(range);
-  }
-
-  function renderHighlightedEditable(editor, language, baseClassName) {
-    const source = editor.textContent || "";
-    const caretOffset = getCaretOffset(editor);
-
-    if (window.hljs) {
-      const highlighted = hljs.highlight(source, {
-        language,
-        ignoreIllegals: true
-      }).value;
-      editor.innerHTML = highlighted;
-      editor.className = `${baseClassName} hljs`;
-    } else {
-      editor.textContent = source;
-      editor.className = baseClassName;
-    }
-
-    if (caretOffset !== null) {
-      setCaretOffset(editor, Math.min(caretOffset, (editor.textContent || "").length));
-    }
-  }
-
-  window.initPythonTool = function(editorId, outputId, runBtnId, resetBtnId, statusId) {
+  const {
+    getSelectionOffsets,
+    setCaretOffset,
+    renderHighlightedEditable,
+    parseEditorClass,
+    makeEditable
+  } = window.EditorHelpers;
+
+  window.initPythonTool = function(editorId, outputId, runBtnId, resetBtnId, statusId, options) {
     const editor = document.getElementById(editorId);
     const output = document.getElementById(outputId);
     const runBtn = document.getElementById(runBtnId);
     const resetBtn = document.getElementById(resetBtnId);
     const status = document.getElementById(statusId);
-    const baseClassName = (editor.className || "").split(/\s+/).filter((cls) => cls && cls !== "hljs").join(" ");
-    const languageMatch = baseClassName.match(/language-([a-z0-9-]+)/i);
-    const editorLanguage = languageMatch ? languageMatch[1] : "python";
-
+    const { baseClassName, language: editorLanguage } = parseEditorClass(editor);
+    const timeoutMs = (options && options.timeoutMs) || 30000;
     const initialCode = editor.textContent || "";
     editor.textContent = initialCode;
-    
-    // Store original code for reset
     const originalCode = editor.textContent || "";
-    
-    // Loading overlay logic (simple implementation)
+
     const loadingOverlay = document.createElement('div');
     loadingOverlay.className = 'tool-loading';
     loadingOverlay.innerHTML = '<div class="tool-spinner"></div><div>Initializing Python...</div>';
     editor.parentElement.appendChild(loadingOverlay);
 
-    // Make editable
-    editor.setAttribute('contenteditable', 'true');
-    editor.setAttribute('spellcheck', 'false');
-    let highlightQueued = false;
-    const queueHighlight = () => {
-        if (highlightQueued) {
-            return;
-        }
-        highlightQueued = true;
-        requestAnimationFrame(() => {
-            highlightQueued = false;
-            renderHighlightedEditable(editor, editorLanguage, baseClassName);
-        });
-    };
+    makeEditable(editor, editorLanguage, baseClassName);
 
-    editor.addEventListener('input', queueHighlight);
-    editor.addEventListener('paste', (event) => {
-        event.preventDefault();
-        const text = (event.clipboardData || window.clipboardData).getData('text');
-        document.execCommand('insertText', false, text);
-    });
-    editor.addEventListener('focus', () => {
-        editor.className = `${baseClassName} hljs`;
-    });
-    renderHighlightedEditable(editor, editorLanguage, baseClassName);
+    const applyEditorText = (nextSource, nextCaretOffset) => {
+        editor.textContent = nextSource;
+        renderHighlightedEditable(editor, editorLanguage, baseClassName);
+        setCaretOffset(editor, Math.min(nextCaretOffset, nextSource.length));
+    };
 
-    runBtn.addEventListener('click', async () => {
+    async function runCode() {
         output.textContent = '';
-        output.classList.remove('text-red-400');
-        
-        if (!window.pyodideInstance) {
-            loadingOverlay.classList.add('active');
-            status.textContent = 'Loading Engine...';
-            try {
-                window.pyodideInstance = await getPyodide();
-            } catch (err) {
-                output.textContent = 'Failed to load Python: ' + err.message;
-                output.classList.add('text-red-400');
-                loadingOverlay.classList.remove('active');
-                return;
-            }
-            loadingOverlay.classList.remove('active');
-        }
-
+        output.innerHTML = '';
+        loadingOverlay.classList.add('active');
         status.textContent = 'Running...';
         runBtn.disabled = true;
-        
+
         try {
-            const py = window.pyodideInstance;
-            let stdoutContent = '';
-            py.setStdout({
-                batched: (str) => {
-                    stdoutContent += str + '\n';
-                    output.textContent = stdoutContent;
-                }
-            });
-            
             const code = editor.textContent || "";
-            await py.runPythonAsync(code);
-            
+            const result = await window.PyRuntime.run(code, {
+                timeoutMs: timeoutMs,
+                useWorker: true
+            });
+
             status.textContent = 'Done';
-            if (!stdoutContent) {
+
+            if (!result.stdout && !result.stderr) {
                 output.textContent = '(Executed successfully, no output)';
+            } else {
+                output.innerHTML = '';
+                if (result.stdout) {
+                    const stdoutEl = document.createElement('span');
+                    stdoutEl.className = 'tool-output-stdout';
+                    stdoutEl.textContent = result.stdout;
+                    output.appendChild(stdoutEl);
+                }
+                if (result.stderr) {
+                    if (result.stdout) output.appendChild(document.createTextNode('\n'));
+                    const stderrEl = document.createElement('span');
+                    stderrEl.className = 'tool-output-stderr';
+                    stderrEl.textContent = result.stderr;
+                    output.appendChild(stderrEl);
+                }
             }
         } catch (err) {
-            output.classList.add('text-red-400');
-            output.textContent = err.message;
+            const errorEl = document.createElement('span');
+            errorEl.className = 'tool-output-error';
+            errorEl.textContent = err.message;
+            output.innerHTML = '';
+            output.appendChild(errorEl);
             status.textContent = 'Error';
         } finally {
+            loadingOverlay.classList.remove('active');
             runBtn.disabled = false;
-            setTimeout(() => { 
-                if (status.textContent !== 'Error') status.textContent = 'Ready'; 
+            output.scrollTop = output.scrollHeight;
+            setTimeout(() => {
+                if (status.textContent !== 'Error') status.textContent = 'Ready';
             }, 2000);
         }
+    }
+
+    editor.addEventListener('keydown', (event) => {
+        // Ctrl+Enter / Cmd+Enter to run
+        if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+            event.preventDefault();
+            runCode();
+            return;
+        }
+
+        const offsets = getSelectionOffsets(editor);
+        if (!offsets) return;
+
+        const tabText = '    ';
+        const source = editor.textContent || '';
+        const { start, end } = offsets;
+
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const lineStart = source.lastIndexOf('\n', Math.max(0, start - 1)) + 1;
+            const linePrefix = source.slice(lineStart, start);
+            const baseIndentMatch = linePrefix.match(/^[ \t]*/);
+            const baseIndent = baseIndentMatch ? baseIndentMatch[0] : '';
+            const shouldIncreaseIndent = /:\s*(#.*)?$/.test(linePrefix.trimEnd());
+            const insertText = `\n${baseIndent}${shouldIncreaseIndent ? tabText : ''}`;
+            const nextSource = source.slice(0, start) + insertText + source.slice(end);
+            applyEditorText(nextSource, start + insertText.length);
+            return;
+        }
+
+        if (event.key !== 'Tab') return;
+        event.preventDefault();
+
+        if (start !== end) {
+            const lineStart = source.lastIndexOf('\n', Math.max(0, start - 1)) + 1;
+            const rawLineEnd = source.indexOf('\n', end);
+            const lineEnd = rawLineEnd === -1 ? source.length : rawLineEnd;
+            const block = source.slice(lineStart, lineEnd);
+            const lines = block.split('\n');
+            const transformedLines = event.shiftKey
+                ? lines.map((line) => line.replace(/^ {1,4}/, ''))
+                : lines.map((line) => `${tabText}${line}`);
+            const nextBlock = transformedLines.join('\n');
+            const nextSource = source.slice(0, lineStart) + nextBlock + source.slice(lineEnd);
+            applyEditorText(nextSource, lineStart + nextBlock.length);
+            return;
+        }
+
+        if (event.shiftKey) {
+            const lineStart = source.lastIndexOf('\n', Math.max(0, start - 1)) + 1;
+            const prefix = source.slice(lineStart, start);
+            const removable = prefix.match(/ {1,4}$/);
+            if (!removable) return;
+            const removeCount = removable[0].length;
+            const removeStart = start - removeCount;
+            const nextSource = source.slice(0, removeStart) + source.slice(start);
+            applyEditorText(nextSource, removeStart);
+            return;
+        }
+
+        const nextSource = source.slice(0, start) + tabText + source.slice(end);
+        applyEditorText(nextSource, start + tabText.length);
     });
 
+    runBtn.addEventListener('click', runCode);
+
     if (resetBtn) {
         resetBtn.addEventListener('click', () => {
              editor.textContent = originalCode;
              renderHighlightedEditable(editor, editorLanguage, baseClassName);
              output.textContent = '';
+             output.innerHTML = '';
              status.textContent = 'Reset';
         });
     }
diff --git a/_includes/sidebar-list.njk b/_includes/sidebar-list.njk
index 0a9c47e..38b1a28 100644
--- a/_includes/sidebar-list.njk
+++ b/_includes/sidebar-list.njk
@@ -1,20 +1,23 @@
 <!-- Basic Level -->
-{% set tutorialList = tutorialItems or collections.tutorials %}
-<div class="flex items-center gap-2 px-4 py-3 bg-slate-50 mb-2 border border-slate-100 relative">
-  <i class="fa-solid fa-medal text-[18px] leading-none" style="color: #cd7f32;" aria-hidden="true"></i>
+{% set currentUrl = page.url or '/' %}
+{% set isUzPage = (lang or '') == 'uz' or currentUrl == '/uz/' or currentUrl.startsWith('/uz/') %}
+{% set defaultTutorialList = collections.tutorialsUz if (isUzPage and collections.tutorialsUz) else collections.tutorials %}
+{% set tutorialList = tutorialItems or defaultTutorialList %}
+<div class="flex items-center gap-2 px-4 py-3 bg-slate-50 mb-2 border border-slate-100">
+  <img src="{{ '/img/icons/bronze.svg' | url }}" alt="Basic Level" class="w-5 h-5">
   <span class="font-bold text-slate-700 text-xs uppercase tracking-wider">Basic Level</span>
 </div>
-<ul class="leading-normal mb-6" data-level-list="basic">
+<ul class="leading-normal mb-6">
   {% for tutorial in tutorialList %}
     {% if tutorial.data.order <= 21 %}
       {% set isActive = page.url == tutorial.url %}
-      <li class="border-l-2 {{ 'border-primary-500 bg-primary-50/30' if isActive else 'border-slate-100' }} py-[6px] relative group">
+      <li class="border-l-2 {{ 'border-primary-500 bg-primary-50/30' if isActive else 'border-slate-100' }} py-[6px]">
         <a
           href="{{ tutorial.url }}"
           data-sidebar-link="true"
           data-active="{{ 'true' if isActive else 'false' }}"
-          class="{{ 'font-bold text-primary-500' if isActive else 'font-medium text-slate-400' }} hover:text-primary-500 leading-relaxed px-4 block transition-colors text-sm">
-          {{ tutorial.data.order }}. {{ tutorial.data.title }}
+          class="{{ 'font-medium text-primary-500' if isActive else 'font-medium text-slate-400' }} hover:text-primary-500 leading-relaxed px-4 block transition-colors text-sm">
+          {{ tutorial.data.order | padStart }}. {{ tutorial.data.title | displayTutorialTitle }}
         </a>
       </li>
     {% endif %}
@@ -22,11 +25,11 @@
 </ul>
 
 <!-- Intermediate Level -->
-<div class="flex items-center gap-2 px-4 py-3 bg-slate-50 rounded mb-2 border border-slate-100 relative">
-  <i class="fa-solid fa-medal text-[18px] leading-none" style="color: #9ca3af;" aria-hidden="true"></i>
+<div class="flex items-center gap-2 px-4 py-3 bg-slate-50 rounded mb-2 border border-slate-100">
+  <img src="{{ '/img/icons/silver.svg' | url }}" alt="Intermediate Level" class="w-5 h-5">
   <span class="font-bold text-slate-700 text-xs uppercase tracking-wider">Intermediate</span>
 </div>
-<ul class="leading-normal mb-6" data-level-list="intermediate">
+<ul class="leading-normal mb-6">
   {% for tutorial in tutorialList %}
     {% if tutorial.data.order > 21 and tutorial.data.order <= 32 %}
       {% set isActive = page.url == tutorial.url %}
@@ -35,8 +38,8 @@
           href="{{ tutorial.url }}"
           data-sidebar-link="true"
           data-active="{{ 'true' if isActive else 'false' }}"
-          class="{{ 'font-bold text-primary-500' if isActive else 'font-medium text-slate-400' }} hover:text-primary-500 leading-relaxed px-4 block transition-colors text-sm">
-          {{ tutorial.data.order }}. {{ tutorial.data.title }}
+          class="{{ 'font-medium text-primary-500' if isActive else 'font-medium text-slate-400' }} hover:text-primary-500 leading-relaxed px-4 block transition-colors text-sm">
+          {{ tutorial.data.order | padStart }}. {{ tutorial.data.title | displayTutorialTitle }}
         </a>
       </li>
     {% endif %}
@@ -44,11 +47,11 @@
 </ul>
 
 <!-- Advanced Level -->
-<div class="flex items-center gap-2 px-4 py-3 bg-slate-50 rounded mb-2 border border-slate-100 relative">
-  <i class="fa-solid fa-medal text-[18px] leading-none" style="color: #d4af37;" aria-hidden="true"></i>
+<div class="flex items-center gap-2 px-4 py-3 bg-slate-50 rounded mb-2 border border-slate-100">
+  <img src="{{ '/img/icons/gold.svg' | url }}" alt="Advanced Level" class="w-5 h-5">
   <span class="font-bold text-slate-700 text-xs uppercase tracking-wider">Advanced</span>
 </div>
-<ul class="leading-normal mb-6" data-level-list="advanced">
+<ul class="leading-normal mb-6">
   {% for tutorial in tutorialList %}
     {% if tutorial.data.order > 32 %}
       {% set isActive = page.url == tutorial.url %}
@@ -57,8 +60,8 @@
           href="{{ tutorial.url }}"
           data-sidebar-link="true"
           data-active="{{ 'true' if isActive else 'false' }}"
-          class="{{ 'font-bold text-primary-500' if isActive else 'font-medium text-slate-400' }} hover:text-primary-500 leading-relaxed px-4 block transition-colors text-sm">
-          {{ tutorial.data.order }}. {{ tutorial.data.title }}
+          class="{{ 'font-medium text-primary-500' if isActive else 'font-medium text-slate-400' }} hover:text-primary-500 leading-relaxed px-4 block transition-colors text-sm">
+          {{ tutorial.data.order | padStart }}. {{ tutorial.data.title | displayTutorialTitle }}
         </a>
       </li>
     {% endif %}
diff --git a/_includes/sidebar.njk b/_includes/sidebar.njk
index 82a6fab..b4f5730 100644
--- a/_includes/sidebar.njk
+++ b/_includes/sidebar.njk
@@ -1,3 +1,3 @@
-<sidebar class="hidden md:block md:w-3/12 sticky top-24 self-start h-[calc(100vh-6rem)] overflow-y-auto custom-scrollbar pr-4">
+<aside id="tutorial-sidebar-desktop" data-sidebar-scroll="desktop" class="hidden md:block md:w-3/12 sticky top-24 self-start h-[calc(100vh-6rem)] overflow-y-auto custom-scrollbar pr-4">
     {% include "sidebar-list.njk" %}
-</sidebar>
\ No newline at end of file
+</aside>
diff --git a/_layouts/base.njk b/_layouts/base.njk
index 7bc2bb4..53c6d96 100644
--- a/_layouts/base.njk
+++ b/_layouts/base.njk
@@ -1,5 +1,8 @@
 <!DOCTYPE html>
-{% set tutorialItems = collections.tutorials %}
+{% set currentUrl = page.url or '/' %}
+{% set isUzPage = (lang or '') == 'uz' or currentUrl == '/uz/' or currentUrl.startsWith('/uz/') %}
+{% set tutorialItems = collections.tutorialsUz if (isUzPage and collections.tutorialsUz) else collections.tutorials %}
+{% set useBrandIconFont = true %}
 <html lang="{{ lang or 'en' }}" class="scroll-smooth">
   {% include "head.njk" %}
   <body class="overflow-x-hidden">
@@ -11,12 +14,14 @@
         {% if isTutorial %}
           {% include "sidebar.njk" %}
         {% endif %}
-        <main class="w-full min-w-0 pb-10 px-4 {{ 'md:w-9/12 tutorial' if isTutorial else 'md:w-12/12' }}">
+        <main class="w-full min-w-0 pb-10 px-4 {{ 'md:w-9/12 tutorial' if isTutorial else 'md:w-full' }}">
           <h1 class="text-primary-500 font-medium text-3xl mb-3">{{ title }}</h1>
           {{ content | safe }}
         </main>
       </div>
     {% endif %}
+    {% set footerVariant = 'full' if isHomepage else 'compact' %}
+    {% include "footer.njk" %}
     {% include "analytics.njk" %}
   </body>
 </html>
diff --git a/_layouts/tool-fullscreen.njk b/_layouts/tool-fullscreen.njk
new file mode 100644
index 0000000..4334e74
--- /dev/null
+++ b/_layouts/tool-fullscreen.njk
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+  {% set useBrandIconFont = true %}
+  {% set isToolPage = true %}
+  {% include "head.njk" %}
+  <body class="h-full flex flex-col bg-slate-50 dark:bg-slate-900 overflow-hidden">
+    <main class="flex-1 flex flex-col h-full min-h-0">
+       {{ content | safe }}
+    </main>
+    {% include "analytics.njk" %}
+  </body>
+</html>
diff --git a/_layouts/tool-simple.njk b/_layouts/tool-simple.njk
index 58b04bf..886cd25 100644
--- a/_layouts/tool-simple.njk
+++ b/_layouts/tool-simple.njk
@@ -1,5 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" class="scroll-smooth">
+  {% set useBrandIconFont = true %}
+  {% set isToolPage = true %}
   {% include "head.njk" %}
   <body class="overflow-x-hidden bg-slate-50 dark:bg-slate-900">
     {% include "navbar.njk" %}
@@ -8,6 +10,8 @@
              {{ content | safe }}
         </main>
     </div>
+    {% set footerVariant = 'compact' %}
+    {% include "footer.njk" %}
     {% include "analytics.njk" %}
   </body>
 </html>
diff --git a/_layouts/tool-split.njk b/_layouts/tool-split.njk
index baf902e..6f79319 100644
--- a/_layouts/tool-split.njk
+++ b/_layouts/tool-split.njk
@@ -1,5 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" class="h-full">
+  {% set useBrandIconFont = true %}
+  {% set isToolPage = true %}
   {% include "head.njk" %}
   <body class="h-full flex flex-col bg-slate-50 dark:bg-slate-900 overflow-hidden">
     {% include "navbar.njk" %}
diff --git a/_layouts/tutorial.njk b/_layouts/tutorial.njk
index e1e9fc4..83ce65b 100644
--- a/_layouts/tutorial.njk
+++ b/_layouts/tutorial.njk
@@ -1,5 +1,7 @@
 <!DOCTYPE html>
-{% set tutorialItems = collections.tutorials %}
+{% set currentUrl = page.url or '/' %}
+{% set isUzPage = (lang or '') == 'uz' or currentUrl == '/uz/' or currentUrl.startsWith('/uz/') %}
+{% set tutorialItems = collections.tutorialsUz if (isUzPage and collections.tutorialsUz) else collections.tutorials %}
 <html lang="{{ lang or 'en' }}">
   {% set isTutorial = true %}
   {% set useBrandIconFont = true %}
@@ -12,13 +14,14 @@
       class="fixed inset-0 bg-black/50 z-[70] hidden transition-opacity duration-300 opacity-0 md:hidden"></div>
     <div
       id="tutorial-sidebar-drawer"
+      data-sidebar-scroll="mobile"
       class="fixed top-0 left-0 h-full w-4/5 max-w-[280px] bg-white z-[80] transform -translate-x-full transition-transform
         duration-300 md:hidden overflow-y-auto custom-scrollbar shadow-2xl">
       <div class="p-4 md:p-6">
         <div class="flex justify-between items-center mb-6">
           <h2 class="text-xl font-bold text-primary-500">Tutorial Material</h2>
           <button id="close-tutorial-sidebar" class="text-slate-400 hover:text-slate-600 focus:outline-none">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
             </svg>
           </button>
@@ -32,7 +35,7 @@
       {% include "sidebar.njk" %}
       <main class="w-full min-w-0 pb-2 px-4 md:w-9/12 tutorial">
         <div class="flex flex-col md:flex-row justify-between items-center mb-5 gap-4">
-          <h1 class="text-primary-500 font-medium text-3xl flex-1">{{ title }}</h1>
+          <h1 class="text-primary-500 font-medium text-3xl flex-1">{{ title | displayTutorialTitle }}</h1>
           <div class="flex flex-col items-start justify-center md:items-end shrink-0 gap-[10px]">
             <span class="text-xs text-slate-500 pl-[30px] font-medium uppercase tracking-wide text-center">Share to</span>
             <div class="flex items-center gap-2.5">
@@ -74,36 +77,43 @@
         {{ content | safe }}
         {% set tutorialNav = tutorialItems | getTutorialNav(page.url) %}
         <div class="mt-8">
-          <p class="mb-6 text-sm text-slate-500">
+          {% set sourcePath = sourceInputPath or page.inputPath %}
+          {% set lastEditedDate = sourcePath | fileLastModified(lang or 'en') %}
+          <p class="mb-2 text-sm text-slate-500">
             <a
-              href="https://github.com/belajarpythoncom/belajarpython.com/blob/main/{{ (sourceInputPath or page.inputPath) | replace('./', '') }}"
+              href="https://github.com/codeuzhub/python-lessons/blob/main/{{ sourcePath | replace('./', '') }}"
               class="hover:text-primary-500">
               Edit this tutorial
             </a>
           </p>
+          {% if lastEditedDate %}
+            <p class="mb-6 text-xs text-slate-400">
+              {{ "Oxirgi yangilangan" if (lang or 'en') == 'uz' else "Last updated" }}: {{ lastEditedDate }}
+            </p>
+          {% endif %}
           <div class="flex justify-between gap-x-2 md:gap-x-4">
             <div class="flex justify-start">
               {% if tutorialNav.prev %}
-                <a href="{{ tutorialNav.prev.url }}" class="text-primary-300 hover:text-primary-300 flex h-10 md:h-12 items-center rounded-full bg-blue-500 bg-opacity-20 px-4 md:px-8 text-sm md:text-base hover:no-underline">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="mr-1 h-4 w-4 md:h-5 md:w-5" viewbox="0 0 20 20" fill="currentColor">
+                <a href="{{ tutorialNav.prev.url }}" class="no-underline text-primary-300 hover:text-primary-300 flex h-10 md:h-12 items-center rounded-full bg-blue-500 bg-opacity-20 px-4 md:px-8 text-sm md:text-base shadow-xl hover:no-underline hover:shadow">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="mr-1 h-4 w-4 md:h-5 md:w-5" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.707-10.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L9.414 11H13a1 1 0 100-2H9.414l1.293-1.293z" clip-rule="evenodd" />
                   </svg>
-                  <span class="-mt-0.5">{{ tutorialNav.prev.data.title }}</span>
+                  <span class="-mt-0.5">{{ tutorialNav.prev.data.title | displayTutorialTitle }}</span>
                 </a>
               {% endif %}
             </div>
             <div class="flex justify-end">
               {% if tutorialNav.next %}
-                <a href="{{ tutorialNav.next.url }}" class="flex h-10 md:h-12 items-center rounded-full bg-gradient-to-l from-yellow-500 to-yellow-400 px-4 md:px-8 text-sm md:text-base text-black shadow-xl hover:text-black hover:no-underline hover:shadow">
-                  <span class="-mt-0.5">{{ tutorialNav.next.data.title }}</span>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4 md:h-5 md:w-5" viewbox="0 0 20 20" fill="currentColor">
+                <a href="{{ tutorialNav.next.url }}" class="no-underline flex h-10 md:h-12 items-center rounded-full bg-gradient-to-l from-yellow-500 to-yellow-400 px-4 md:px-8 text-sm md:text-base text-black shadow-xl hover:text-black hover:no-underline hover:shadow">
+                  <span class="-mt-0.5">{{ tutorialNav.next.data.title | displayTutorialTitle }}</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4 md:h-5 md:w-5" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" />
                   </svg>
                 </a>
               {% else %}
-                <a href="{{ tutorialNav.first.url }}" class="flex h-10 md:h-12 items-center rounded-full bg-gradient-to-l from-yellow-500 to-yellow-400 px-4 md:px-8 text-sm md:text-base text-black shadow-xl hover:text-black hover:no-underline hover:shadow">
+                <a href="{{ tutorialNav.first.url }}" class="no-underline flex h-10 md:h-12 items-center rounded-full bg-gradient-to-l from-yellow-500 to-yellow-400 px-4 md:px-8 text-sm md:text-base text-black shadow-xl hover:text-black hover:no-underline hover:shadow">
                   <span class="-mt-0.5">Back to Start</span>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4 md:h-5 md:w-5" viewbox="0 0 20 20" fill="currentColor">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4 md:h-5 md:w-5" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" />
                   </svg>
                 </a>
@@ -113,46 +123,94 @@
         </div>
       </main>
     </div>
+    {% set footerVariant = 'compact' %}
+    {% set compactFooterShowLinks = false %}
+    {% include "footer.njk" %}
     {% include "analytics.njk" %}
     <script>
-      document.addEventListener('DOMContentLoaded', function () {
-        function findScrollableParent(el) {
-          let node = el ? el.parentElement : null;
-          while (node && node !== document.body) {
-            const style = window.getComputedStyle(node);
-            const overflowY = style.overflowY;
-            const isScrollable = (overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight;
-            if (isScrollable) {
-              return node;
+      (function () {
+        const toggleBtn = document.getElementById('mobile-tutorial-sidebar-toggle');
+        const closeBtn = document.getElementById('close-tutorial-sidebar');
+        const overlay = document.getElementById('tutorial-sidebar-overlay');
+        const desktopSidebar = document.getElementById('tutorial-sidebar-desktop');
+        const drawer = document.getElementById('tutorial-sidebar-drawer');
+        const body = document.body;
+        const DESKTOP_SCROLL_KEY = 'tutorial_sidebar_scroll_desktop';
+        const MOBILE_SCROLL_KEY = 'tutorial_sidebar_scroll_mobile';
+
+        function getSavedScroll(key) {
+          try {
+            const value = window.sessionStorage.getItem(key);
+            if (value === null) {
+              return null;
             }
-            node = node.parentElement;
+            const parsed = Number.parseInt(value, 10);
+            return Number.isNaN(parsed) ? null : parsed;
+          } catch (_error) {
+            return null;
+          }
+        }
+
+        function saveScroll(key, value) {
+          try {
+            window.sessionStorage.setItem(key, String(Math.max(0, value || 0)));
+          } catch (_error) {
           }
-          return null;
         }
 
-        function scrollActiveSidebarItemIntoView() {
-          const activeLinks = document.querySelectorAll('[data-sidebar-link="true"][data-active="true"]');
-          activeLinks.forEach((link) => {
-            const scrollParent = findScrollableParent(link);
-            if (scrollParent) {
-              const parentRect = scrollParent.getBoundingClientRect();
-              const linkRect = link.getBoundingClientRect();
-              const offsetTop = linkRect.top - parentRect.top + scrollParent.scrollTop;
-              scrollParent.scrollTop = Math.max(0, offsetTop - scrollParent.clientHeight / 2 + linkRect.height / 2);
+        function persistSidebarScrollPosition() {
+          if (desktopSidebar) {
+            saveScroll(DESKTOP_SCROLL_KEY, desktopSidebar.scrollTop);
+          }
+
+          if (drawer) {
+            saveScroll(MOBILE_SCROLL_KEY, drawer.scrollTop);
+          }
+        }
+
+        function restoreSidebarScrollPosition() {
+          if (desktopSidebar) {
+            const savedDesktopScroll = getSavedScroll(DESKTOP_SCROLL_KEY);
+            if (savedDesktopScroll !== null) {
+              desktopSidebar.scrollTop = savedDesktopScroll;
+            }
+          }
+
+          if (drawer) {
+            const savedMobileScroll = getSavedScroll(MOBILE_SCROLL_KEY);
+            if (savedMobileScroll !== null) {
+              drawer.scrollTop = savedMobileScroll;
             }
-          });
+          }
         }
 
-        scrollActiveSidebarItemIntoView();
+        // Restore immediately to avoid visible jump.
+        restoreSidebarScrollPosition();
+        window.requestAnimationFrame(restoreSidebarScrollPosition);
+        window.addEventListener('load', restoreSidebarScrollPosition, { once: true });
+
+        if (desktopSidebar) {
+          desktopSidebar.addEventListener('scroll', function () {
+            saveScroll(DESKTOP_SCROLL_KEY, desktopSidebar.scrollTop);
+          }, { passive: true });
+        }
+
+        if (drawer) {
+          drawer.addEventListener('scroll', function () {
+            saveScroll(MOBILE_SCROLL_KEY, drawer.scrollTop);
+          }, { passive: true });
+        }
+
+        const sidebarLinks = document.querySelectorAll('[data-sidebar-link="true"]');
+        sidebarLinks.forEach((link) => {
+          link.addEventListener('click', persistSidebarScrollPosition, { passive: true });
+        });
+
+        window.addEventListener('pagehide', persistSidebarScrollPosition);
 
-        const toggleBtn = document.getElementById('mobile-tutorial-sidebar-toggle');
-        const closeBtn = document.getElementById('close-tutorial-sidebar');
-        const overlay = document.getElementById('tutorial-sidebar-overlay');
-        const drawer = document.getElementById('tutorial-sidebar-drawer');
-        const body = document.body;
         function toggleSidebar() {
-          const isOpen = ! drawer.classList.contains('-translate-x-full');
-          if (! isOpen) { // Open
+          const isOpen = !drawer.classList.contains('-translate-x-full');
+          if (!isOpen) { // Open
             overlay.classList.remove('hidden');
             setTimeout(() => {
               overlay.classList.add('opacity-100');
@@ -168,16 +226,17 @@
             body.classList.remove('overflow-hidden');
           }
         }
-        if (toggleBtn) 
+
+        if (toggleBtn) {
           toggleBtn.addEventListener('click', toggleSidebar);
-        
-        if (closeBtn) 
+        }
+        if (closeBtn) {
           closeBtn.addEventListener('click', toggleSidebar);
-        
-        if (overlay) 
+        }
+        if (overlay) {
           overlay.addEventListener('click', toggleSidebar);
-        
-      });
+        }
+      })();
     </script>
     {% include "python-runner.njk" %}
   </body>
diff --git a/assets/css/base.css b/assets/css/base.css
index bcd5cc1..3df5fdc 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -1 +1,2707 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.left-0{left:0}.left-4{left:1rem}.right-0{right:0}.top-0{top:0}.top-24{top:6rem}.top-4{top:1rem}.isolate{isolation:isolate}.z-10{z-index:10}.z-\[60\]{z-index:60}.z-\[70\]{z-index:70}.z-\[80\]{z-index:80}.m-0{margin:0}.-mx-4{margin-left:-1rem;margin-right:-1rem}.mx-auto{margin-left:auto;margin-right:auto}.-mt-0\.5{margin-top:-.125rem}.-mt-10{margin-top:-2.5rem}.-mt-4{margin-top:-1rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-5{margin-right:1.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-10{height:2.5rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-3{height:.75rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[calc\(100vh-6rem\)\]{height:calc(100vh - 6rem)}.h-auto{height:auto}.h-full{height:100%}.min-h-0{min-height:0}.min-h-\[100px\]{min-height:100px}.min-h-\[200px\]{min-height:200px}.min-h-\[48px\]{min-height:48px}.min-h-full{min-height:100%}.w-1\/2{width:50%}.w-12{width:3rem}.w-20{width:5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-4\/5{width:80%}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.min-w-0{min-width:0}.min-w-fit{min-width:-moz-fit-content;min-width:fit-content}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-\[280px\]{max-width:280px}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.translate-y-\[-1px\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-1px\]{--tw-translate-y:-1px}.scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1}.scale-110,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-\[10px\]{gap:10px}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.scroll-smooth{scroll-behavior:smooth}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-b-3xl{border-bottom-right-radius:1.5rem;border-bottom-left-radius:1.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-none{border-style:none}.border-\[\#1e1e1e\]{--tw-border-opacity:1;border-color:rgb(30 30 30/var(--tw-border-opacity,1))}.border-\[\#252526\]{--tw-border-opacity:1;border-color:rgb(37 37 38/var(--tw-border-opacity,1))}.border-\[\#414141\]{--tw-border-opacity:1;border-color:rgb(65 65 65/var(--tw-border-opacity,1))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-primary-500{--tw-border-opacity:1;border-color:rgb(42 88 128/var(--tw-border-opacity,1))}.border-primary-700{--tw-border-opacity:1;border-color:rgb(29 63 91/var(--tw-border-opacity,1))}.border-primary-800{--tw-border-opacity:1;border-color:rgb(28 58 85/var(--tw-border-opacity,1))}.border-primary-900{--tw-border-opacity:1;border-color:rgb(30 41 51/var(--tw-border-opacity,1))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-white\/30{border-color:hsla(0,0%,100%,.3)}.bg-\[\#007acc\]{--tw-bg-opacity:1;background-color:rgb(0 122 204/var(--tw-bg-opacity,1))}.bg-\[\#0f172a\]{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-\[\#1e1e1e\]{--tw-bg-opacity:1;background-color:rgb(30 30 30/var(--tw-bg-opacity,1))}.bg-\[\#1e293b\]{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.bg-\[\#252526\]{--tw-bg-opacity:1;background-color:rgb(37 37 38/var(--tw-bg-opacity,1))}.bg-\[\#282c34\]{--tw-bg-opacity:1;background-color:rgb(40 44 52/var(--tw-bg-opacity,1))}.bg-\[\#2d2d2d\]{--tw-bg-opacity:1;background-color:rgb(45 45 45/var(--tw-bg-opacity,1))}.bg-\[\#333333\]{--tw-bg-opacity:1;background-color:rgb(51 51 51/var(--tw-bg-opacity,1))}.bg-\[\#37373d\]{--tw-bg-opacity:1;background-color:rgb(55 55 61/var(--tw-bg-opacity,1))}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.bg-primary-500{--tw-bg-opacity:1;background-color:rgb(42 88 128/var(--tw-bg-opacity,1))}.bg-primary-800{--tw-bg-opacity:1;background-color:rgb(28 58 85/var(--tw-bg-opacity,1))}.bg-primary-900\/50{background-color:rgba(30,41,51,.5)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21/var(--tw-bg-opacity,1))}.bg-opacity-20{--tw-bg-opacity:0.2}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-l{background-image:linear-gradient(to left,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-primary-600,.from-primary-700{--tw-gradient-from:#1d3f5b var(--tw-gradient-from-position);--tw-gradient-to:rgba(29,63,91,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-secondary-500{--tw-gradient-from:#fdd03f var(--tw-gradient-from-position);--tw-gradient-to:rgba(253,208,63,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-yellow-500{--tw-gradient-from:#eab308 var(--tw-gradient-from-position);--tw-gradient-to:rgba(234,179,8,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-primary-800{--tw-gradient-to:#1c3a55 var(--tw-gradient-to-position)}.to-primary-900{--tw-gradient-to:#1e2933 var(--tw-gradient-to-position)}.to-secondary-400{--tw-gradient-to:#ffdf76 var(--tw-gradient-to-position)}.to-yellow-400{--tw-gradient-to:#facc15 var(--tw-gradient-to-position)}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-\[6px\]{padding-top:6px;padding-bottom:6px}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pl-\[30px\]{padding-left:30px}.pr-4{padding-right:1rem}.pr-9{padding-right:2.25rem}.pt-1{padding-top:.25rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[15px\]{font-size:15px}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.text-\[56px\]{font-size:56px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.leading-none{line-height:1}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#0A66C2\]{--tw-text-opacity:1;color:rgb(10 102 194/var(--tw-text-opacity,1))}.text-\[\#25D366\]{--tw-text-opacity:1;color:rgb(37 211 102/var(--tw-text-opacity,1))}.text-\[\#29618a\]{--tw-text-opacity:1;color:rgb(41 97 138/var(--tw-text-opacity,1))}.text-\[\#306b96\]{--tw-text-opacity:1;color:rgb(48 107 150/var(--tw-text-opacity,1))}.text-\[\#858585\]{--tw-text-opacity:1;color:rgb(133 133 133/var(--tw-text-opacity,1))}.text-\[\#cccccc\]{--tw-text-opacity:1;color:rgb(204 204 204/var(--tw-text-opacity,1))}.text-\[\#d4d4d4\]{--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-200{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-green-300{--tw-text-opacity:1;color:rgb(134 239 172/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-primary-100{--tw-text-opacity:1;color:rgb(224 242 254/var(--tw-text-opacity,1))}.text-primary-200{--tw-text-opacity:1;color:rgb(186 230 253/var(--tw-text-opacity,1))}.text-primary-300{--tw-text-opacity:1;color:rgb(55 118 171/var(--tw-text-opacity,1))}.text-primary-500{--tw-text-opacity:1;color:rgb(42 88 128/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/80{color:hsla(0,0%,100%,.8)}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.text-opacity-70{--tw-text-opacity:0.7}.no-underline{text-decoration-line:none}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-90{opacity:.9}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-inner{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgba(0,0,0,.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.shadow-yellow-900\/20{--tw-shadow-color:rgba(113,63,18,.2);--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.brightness-125{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.brightness-125{--tw-brightness:brightness(1.25)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}main blockquote{border-left:4px solid #e8e8e8;padding-left:15px;color:#e2b215;font-size:18px;letter-spacing:-1px;font-style:italic}main hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}main p{margin-top:0;margin-bottom:1.3rem}main .tutorial a,main a{color:#007be4}main .tutorial a:hover,main a{text-decoration:underline}main .tutorial a:hover{color:#e2b215}main pre{max-width:100%;overflow-x:auto;border-radius:.5rem}main pre code{display:block;overflow-x:auto;white-space:pre;border:none;background:transparent;padding:0}main code{background-color:#eee;padding:2px 4px;font-size:.9em;border:1px solid #e0e0e0;border-radius:3px;word-break:break-all}main h1{font-size:3rem;font-weight:600}main h2{font-size:2.2rem;font-weight:600;margin-top:24px}main h3{font-size:1.7rem;font-weight:600;margin-top:23px}main h4{font-size:1.4rem;font-weight:600;margin-top:22px}main h5{font-size:1.2rem;font-weight:600;margin-top:21px}main h6{font-size:1rem;font-weight:600;margin-top:20px}main ol{list-style:number}main ol,main ul{padding-left:30px;margin-bottom:1.3rem}main ul{list-style:square}main table{border-collapse:collapse;width:100%}main table td,main table th{border:1px solid #ddd;padding:10px}main table tr:nth-child(2n){background-color:#f2f2f2}main table tr:hover{background-color:#dfe6ed}main table th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#c4d4e3;color:#000}main kbd{padding:.15rem .35rem;font-size:87.5%;color:#fff;margin:0 2px;background-color:#212529;border-radius:.2rem}main{word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}main,main img{max-width:100%}main img{height:auto}main table{display:block;overflow-x:auto;white-space:nowrap}main code,main pre{max-width:100%;overflow-wrap:normal;word-break:normal}@media (max-width:768px){main h1{font-size:2.2rem!important}main h2{font-size:1.8rem!important}main h3{font-size:1.5rem!important}}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:#f1f5f9;border-radius:10px}.custom-scrollbar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#94a3b8}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.selection\:bg-blue-500\/30 ::-moz-selection{background-color:rgba(59,130,246,.3)}.selection\:bg-blue-500\/30 ::selection{background-color:rgba(59,130,246,.3)}.selection\:bg-blue-500\/30::-moz-selection{background-color:rgba(59,130,246,.3)}.selection\:bg-blue-500\/30::selection{background-color:rgba(59,130,246,.3)}.focus-within\:border-blue-500:focus-within{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.hover\:bg-\[\#2a2d2e\]:hover{--tw-bg-opacity:1;background-color:rgb(42 45 46/var(--tw-bg-opacity,1))}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.hover\:bg-green-500:hover{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.hover\:bg-indigo-500:hover{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.hover\:bg-slate-300:hover{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}.hover\:bg-slate-700:hover{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:bg-yellow-300:hover{--tw-bg-opacity:1;background-color:rgb(253 224 71/var(--tw-bg-opacity,1))}.hover\:bg-yellow-50:hover{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity,1))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:text-primary-300:hover{--tw-text-opacity:1;color:rgb(55 118 171/var(--tw-text-opacity,1))}.hover\:text-primary-500:hover{--tw-text-opacity:1;color:rgb(42 88 128/var(--tw-text-opacity,1))}.hover\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:text-opacity-100:hover{--tw-text-opacity:1}.hover\:no-underline:hover{text-decoration-line:none}.hover\:opacity-80:hover{opacity:.8}.hover\:shadow:hover{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.hover\:shadow-xl:hover,.hover\:shadow:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.group:hover .group-hover\:text-\[\#1d5883\]{--tw-text-opacity:1;color:rgb(29 88 131/var(--tw-text-opacity,1))}@media (min-width:768px){.md\:mb-16{margin-bottom:4rem}.md\:mb-4{margin-bottom:1rem}.md\:mr-0{margin-right:0}.md\:mr-10{margin-right:2.5rem}.md\:mt-0{margin-top:0}.md\:block{display:block}.md\:inline{display:inline}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-12{height:3rem}.md\:h-5{height:1.25rem}.md\:h-auto{height:auto}.md\:w-1\/3{width:33.333333%}.md\:w-3\/12{width:25%}.md\:w-5{width:1.25rem}.md\:w-9\/12{width:75%}.md\:w-auto{width:auto}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:items-end{align-items:flex-end}.md\:justify-center{justify-content:center}.md\:justify-between{justify-content:space-between}.md\:gap-4{gap:1rem}.md\:gap-6{gap:1.5rem}.md\:gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.md\:overflow-visible{overflow:visible}.md\:border-l{border-left-width:1px}.md\:border-t-0{border-top-width:0}.md\:p-6{padding:1.5rem}.md\:p-8{padding:2rem}.md\:px-0{padding-left:0;padding-right:0}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:py-3{padding-top:.75rem;padding-bottom:.75rem}.md\:pb-0{padding-bottom:0}.md\:pr-20{padding-right:5rem}.md\:text-center{text-align:center}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-\[20px\]{font-size:20px}.md\:text-\[80px\]{font-size:80px}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (prefers-color-scheme:dark){.dark\:border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.dark\:border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.dark\:bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.dark\:bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.dark\:bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.dark\:bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity,1))}.dark\:text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.dark\:text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.dark\:text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.dark\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}}
\ No newline at end of file
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+/*
+! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+
+.\!container {
+  width: 100% !important;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .\!container {
+    max-width: 640px !important;
+  }
+
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .\!container {
+    max-width: 768px !important;
+  }
+
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .\!container {
+    max-width: 1024px !important;
+  }
+
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .\!container {
+    max-width: 1280px !important;
+  }
+
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .\!container {
+    max-width: 1536px !important;
+  }
+
+  .container {
+    max-width: 1536px;
+  }
+}
+
+.visible {
+  visibility: visible;
+}
+
+.collapse {
+  visibility: collapse;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.inset-0 {
+  inset: 0px;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.left-4 {
+  left: 1rem;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.top-24 {
+  top: 6rem;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.top-\[13px\] {
+  top: 13px;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-\[60\] {
+  z-index: 60;
+}
+
+.z-\[70\] {
+  z-index: 70;
+}
+
+.z-\[80\] {
+  z-index: 80;
+}
+
+.m-0 {
+  margin: 0px;
+}
+
+.-mx-4 {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.-mt-0\.5 {
+  margin-top: -0.125rem;
+}
+
+.-mt-10 {
+  margin-top: -2.5rem;
+}
+
+.-mt-4 {
+  margin-top: -1rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-14 {
+  height: 3.5rem;
+}
+
+.h-16 {
+  height: 4rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-48 {
+  height: 12rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-7 {
+  height: 1.75rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-9 {
+  height: 2.25rem;
+}
+
+.h-\[55\%\] {
+  height: 55%;
+}
+
+.h-\[calc\(100vh-6rem\)\] {
+  height: calc(100vh - 6rem);
+}
+
+.h-full {
+  height: 100%;
+}
+
+.min-h-0 {
+  min-height: 0px;
+}
+
+.min-h-\[100px\] {
+  min-height: 100px;
+}
+
+.min-h-\[200px\] {
+  min-height: 200px;
+}
+
+.min-h-\[48px\] {
+  min-height: 48px;
+}
+
+.min-h-full {
+  min-height: 100%;
+}
+
+.w-1\.5 {
+  width: 0.375rem;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-14 {
+  width: 3.5rem;
+}
+
+.w-20 {
+  width: 5rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-4\/5 {
+  width: 80%;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.w-\[210px\] {
+  width: 210px;
+}
+
+.w-\[2px\] {
+  width: 2px;
+}
+
+.w-\[45\%\] {
+  width: 45%;
+}
+
+.w-\[55\%\] {
+  width: 55%;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.min-w-0 {
+  min-width: 0px;
+}
+
+.min-w-\[13rem\] {
+  min-width: 13rem;
+}
+
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.max-w-4xl {
+  max-width: 56rem;
+}
+
+.max-w-5xl {
+  max-width: 64rem;
+}
+
+.max-w-6xl {
+  max-width: 72rem;
+}
+
+.max-w-7xl {
+  max-width: 80rem;
+}
+
+.max-w-\[280px\] {
+  max-width: 280px;
+}
+
+.max-w-md {
+  max-width: 28rem;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-shrink {
+  flex-shrink: 1;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.-translate-x-full {
+  --tw-translate-x: -100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-\[-2px\] {
+  --tw-translate-y: -2px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-110 {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cursor-col-resize {
+  cursor: col-resize;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.resize-none {
+  resize: none;
+}
+
+.resize {
+  resize: both;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-1\.5 {
+  gap: 0.375rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-2\.5 {
+  gap: 0.625rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-6 {
+  gap: 1.5rem;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
+.gap-\[10px\] {
+  gap: 10px;
+}
+
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+
+.gap-x-5 {
+  -moz-column-gap: 1.25rem;
+       column-gap: 1.25rem;
+}
+
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
+
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.self-start {
+  align-self: flex-start;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.scroll-smooth {
+  scroll-behavior: smooth;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.rounded-none {
+  border-radius: 0px;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.rounded-b-3xl {
+  border-bottom-right-radius: 1.5rem;
+  border-bottom-left-radius: 1.5rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-x {
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
+.border-l-2 {
+  border-left-width: 2px;
+}
+
+.border-r {
+  border-right-width: 1px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-none {
+  border-style: none;
+}
+
+.border-\[\#334155\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
+}
+
+.border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
+}
+
+.border-primary-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(42 88 128 / var(--tw-border-opacity, 1));
+}
+
+.border-primary-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(29 63 91 / var(--tw-border-opacity, 1));
+}
+
+.border-primary-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 41 51 / var(--tw-border-opacity, 1));
+}
+
+.border-slate-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
+}
+
+.border-slate-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
+}
+
+.border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
+}
+
+.border-slate-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
+}
+
+.border-slate-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
+}
+
+.border-slate-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+.border-white\/30 {
+  border-color: rgb(255 255 255 / 0.3);
+}
+
+.border-white\/20 {
+  border-color: rgb(255 255 255 / 0.2);
+}
+
+.bg-\[\#0a0f1a\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(10 15 26 / var(--tw-bg-opacity, 1));
+}
+
+.bg-\[\#0f172a\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
+}
+
+.bg-\[\#1e293b\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
+}
+
+.bg-\[\#282c34\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(40 44 52 / var(--tw-bg-opacity, 1));
+}
+
+.bg-\[\#3c3b6e\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(60 59 110 / var(--tw-bg-opacity, 1));
+}
+
+.bg-black\/50 {
+  background-color: rgb(0 0 0 / 0.5);
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+}
+
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+}
+
+.bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
+}
+
+.bg-indigo-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
+}
+
+.bg-primary-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(42 88 128 / var(--tw-bg-opacity, 1));
+}
+
+.bg-primary-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(28 58 85 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-500\/50 {
+  background-color: rgb(100 116 139 / 0.5);
+}
+
+.bg-slate-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-950 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
+.bg-white\/20 {
+  background-color: rgb(255 255 255 / 0.2);
+}
+
+.bg-yellow-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
+}
+
+.bg-white\/10 {
+  background-color: rgb(255 255 255 / 0.1);
+}
+
+.bg-opacity-20 {
+  --tw-bg-opacity: 0.2;
+}
+
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-l {
+  background-image: linear-gradient(to left, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.from-primary-600 {
+  --tw-gradient-from: #234c6e var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(35 76 110 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-secondary-500 {
+  --tw-gradient-from: #fdd03f var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(253 208 63 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-yellow-500 {
+  --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-primary-800 {
+  --tw-gradient-to: #1c3a55 var(--tw-gradient-to-position);
+}
+
+.to-secondary-400 {
+  --tw-gradient-to: #ffdf76 var(--tw-gradient-to-position);
+}
+
+.to-yellow-400 {
+  --tw-gradient-to: #facc15 var(--tw-gradient-to-position);
+}
+
+.p-0 {
+  padding: 0px;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.py-\[6px\] {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.pb-10 {
+  padding-bottom: 2.5rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
+.pl-\[30px\] {
+  padding-left: 30px;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pr-4 {
+  padding-right: 1rem;
+}
+
+.pr-9 {
+  padding-right: 2.25rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-\[10px\] {
+  font-size: 10px;
+}
+
+.text-\[11px\] {
+  font-size: 11px;
+}
+
+.text-\[15px\] {
+  font-size: 15px;
+}
+
+.text-\[20px\] {
+  font-size: 20px;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.text-\[9px\] {
+  font-size: 9px;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.leading-6 {
+  line-height: 1.5rem;
+}
+
+.leading-none {
+  line-height: 1;
+}
+
+.leading-normal {
+  line-height: 1.5;
+}
+
+.leading-relaxed {
+  line-height: 1.625;
+}
+
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
+.tracking-wider {
+  letter-spacing: 0.05em;
+}
+
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
+
+.text-\[\#0A66C2\] {
+  --tw-text-opacity: 1;
+  color: rgb(10 102 194 / var(--tw-text-opacity, 1));
+}
+
+.text-\[\#25D366\] {
+  --tw-text-opacity: 1;
+  color: rgb(37 211 102 / var(--tw-text-opacity, 1));
+}
+
+.text-\[\#29618a\] {
+  --tw-text-opacity: 1;
+  color: rgb(41 97 138 / var(--tw-text-opacity, 1));
+}
+
+.text-\[\#306b96\] {
+  --tw-text-opacity: 1;
+  color: rgb(48 107 150 / var(--tw-text-opacity, 1));
+}
+
+.text-\[\#e2e8f0\] {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+
+.text-blue-200 {
+  --tw-text-opacity: 1;
+  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
+}
+
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+}
+
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+}
+
+.text-green-300 {
+  --tw-text-opacity: 1;
+  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
+}
+
+.text-green-400 {
+  --tw-text-opacity: 1;
+  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
+}
+
+.text-primary-100 {
+  --tw-text-opacity: 1;
+  color: rgb(224 242 254 / var(--tw-text-opacity, 1));
+}
+
+.text-primary-300 {
+  --tw-text-opacity: 1;
+  color: rgb(55 118 171 / var(--tw-text-opacity, 1));
+}
+
+.text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgb(42 88 128 / var(--tw-text-opacity, 1));
+}
+
+.text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-200 {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-300 {
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-700 {
+  --tw-text-opacity: 1;
+  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-900 {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.text-white\/80 {
+  color: rgb(255 255 255 / 0.8);
+}
+
+.text-yellow-400 {
+  --tw-text-opacity: 1;
+  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
+}
+
+.no-underline {
+  text-decoration-line: none;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
+.opacity-90 {
+  opacity: 0.9;
+}
+
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-yellow-900\/20 {
+  --tw-shadow-color: rgb(113 63 18 / 0.2);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.outline {
+  outline-style: solid;
+}
+
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.brightness-125 {
+  --tw-brightness: brightness(1.25);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.grayscale {
+  --tw-grayscale: grayscale(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.backdrop-filter {
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-\[filter\] {
+  transition-property: filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+main blockquote {
+  margin: 1rem 0 1.25rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid #d9e2ec;
+  border-left: 4px solid #93c5fd;
+  border-radius: 0.75rem;
+  background-color: #f8fafc;
+  color: #334155;
+  font-size: 1rem;
+  letter-spacing: normal;
+  font-style: normal;
+}
+
+main blockquote p {
+  margin-bottom: 0.75rem;
+}
+
+main blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+main hr {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, .1);
+}
+
+main p {
+  margin-top: 0;
+  margin-bottom: 1.3rem;
+}
+
+main .tutorial a {
+  color: #007BE4;
+}
+
+main a {
+  color: #007BE4;
+  text-decoration: underline;
+}
+
+main .tutorial a:hover {
+  color: #e2b215;
+  text-decoration: underline;
+}
+
+main pre {
+  max-width: 100%;
+  overflow-x: auto;
+  border-radius: 0.5rem;
+}
+
+main pre code {
+  display: block;
+  overflow-x: auto;
+  white-space: pre;
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+
+main code {
+  background-color: #eee;
+  padding: 2px 4px;
+  font-size: 0.9em;
+  border: 1px solid #e0e0e0;
+  border-radius: 3px;
+  word-break: break-all;
+}
+
+main h1 {
+  font-size: 3rem;
+  font-weight: 600;
+}
+
+main h2 {
+  font-size: 2.2rem;
+  font-weight: 600;
+  margin-top: 24px;
+}
+
+main h3 {
+  font-size: 1.7rem;
+  font-weight: 600;
+  margin-top: 23px;
+}
+
+main h4 {
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin-top: 22px;
+}
+
+main h5 {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-top: 21px;
+}
+
+main h6 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-top: 20px;
+}
+
+main ol {
+  list-style-type: decimal;
+  padding-left: 30px;
+  margin-bottom: 1.3rem;
+}
+
+main ul {
+  list-style: square;
+  padding-left: 30px;
+  margin-bottom: 1.3rem;
+}
+
+main table {
+  border-collapse: collapse;
+  width: 100%;
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+main table td,
+main table th {
+  border: 1px solid #ddd;
+  padding: 10px;
+}
+
+main table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+main table tr:hover {
+  background-color: #dfe6ed;
+}
+
+main table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #c4d4e3;
+  color: black;
+}
+
+main kbd {
+  padding: 0.15rem 0.35rem;
+  font-size: 87.5%;
+  color: #fff;
+  margin: 0 2px 0 2px;
+  background-color: #212529;
+  border-radius: 0.2rem;
+}
+
+/* Fix Overflow Mobile */
+
+main {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
+}
+
+main img {
+  max-width: 100%;
+  height: auto;
+}
+
+main pre,
+main code {
+  max-width: 100%;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+/* Heading responsive sizes */
+
+@media (max-width: 768px) {
+  main h1 {
+    font-size: 2.2rem !important;
+  }
+
+  main h2 {
+    font-size: 1.8rem !important;
+  }
+
+  main h3 {
+    font-size: 1.5rem !important;
+  }
+}
+
+/* Custom Scrollbar */
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+.selection\:bg-blue-500\/30 *::-moz-selection {
+  background-color: rgb(59 130 246 / 0.3);
+}
+
+.selection\:bg-blue-500\/30 *::selection {
+  background-color: rgb(59 130 246 / 0.3);
+}
+
+.selection\:bg-blue-500\/30::-moz-selection {
+  background-color: rgb(59 130 246 / 0.3);
+}
+
+.selection\:bg-blue-500\/30::selection {
+  background-color: rgb(59 130 246 / 0.3);
+}
+
+.focus-within\:border-blue-500:focus-within {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
+}
+
+.hover\:scale-\[1\.15\]:hover {
+  --tw-scale-x: 1.15;
+  --tw-scale-y: 1.15;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:border-slate-400:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
+}
+
+.hover\:bg-blue-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-green-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-indigo-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-slate-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-slate-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-yellow-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-yellow-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-white\/20:hover {
+  background-color: rgb(255 255 255 / 0.2);
+}
+
+.hover\:text-black:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-primary-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 118 171 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-primary-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(42 88 128 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-secondary-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 223 118 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-slate-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-slate-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.hover\:no-underline:hover {
+  text-decoration-line: none;
+}
+
+.hover\:opacity-80:hover {
+  opacity: 0.8;
+}
+
+.hover\:shadow:hover {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:shadow-xl:hover {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
+}
+
+.focus-visible\:ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:ring-white\/70:focus-visible {
+  --tw-ring-color: rgb(255 255 255 / 0.7);
+}
+
+.focus-visible\:ring-offset-2:focus-visible {
+  --tw-ring-offset-width: 2px;
+}
+
+.focus-visible\:ring-offset-primary-500:focus-visible {
+  --tw-ring-offset-color: #2a5880;
+}
+
+.active\:bg-blue-700:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
+}
+
+.group:hover .group-hover\:text-\[\#1d5883\] {
+  --tw-text-opacity: 1;
+  color: rgb(29 88 131 / var(--tw-text-opacity, 1));
+}
+
+.group:hover .group-hover\:grayscale-0 {
+  --tw-grayscale: grayscale(0);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.dark\:border-slate-600:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
+}
+
+.dark\:border-slate-700:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
+}
+
+.dark\:bg-slate-700:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
+}
+
+.dark\:bg-slate-800:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
+}
+
+.dark\:bg-slate-900:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
+}
+
+.dark\:bg-slate-950:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
+}
+
+.dark\:text-slate-200:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
+}
+
+.dark\:text-slate-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+
+.dark\:text-slate-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
+}
+
+.dark\:text-white:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+@media (min-width: 768px) {
+  .md\:mb-16 {
+    margin-bottom: 4rem;
+  }
+
+  .md\:mb-4 {
+    margin-bottom: 1rem;
+  }
+
+  .md\:mr-0 {
+    margin-right: 0px;
+  }
+
+  .md\:mr-10 {
+    margin-right: 2.5rem;
+  }
+
+  .md\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .md\:block {
+    display: block;
+  }
+
+  .md\:inline {
+    display: inline;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:h-12 {
+    height: 3rem;
+  }
+
+  .md\:h-20 {
+    height: 5rem;
+  }
+
+  .md\:h-5 {
+    height: 1.25rem;
+  }
+
+  .md\:h-6 {
+    height: 1.5rem;
+  }
+
+  .md\:h-auto {
+    height: auto;
+  }
+
+  .md\:h-9 {
+    height: 2.25rem;
+  }
+
+  .md\:w-20 {
+    width: 5rem;
+  }
+
+  .md\:w-3\/12 {
+    width: 25%;
+  }
+
+  .md\:w-5 {
+    width: 1.25rem;
+  }
+
+  .md\:w-6 {
+    width: 1.5rem;
+  }
+
+  .md\:w-9\/12 {
+    width: 75%;
+  }
+
+  .md\:w-\[45\%\] {
+    width: 45%;
+  }
+
+  .md\:w-\[55\%\] {
+    width: 55%;
+  }
+
+  .md\:w-auto {
+    width: auto;
+  }
+
+  .md\:w-full {
+    width: 100%;
+  }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:items-start {
+    align-items: flex-start;
+  }
+
+  .md\:items-end {
+    align-items: flex-end;
+  }
+
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:justify-center {
+    justify-content: center;
+  }
+
+  .md\:justify-between {
+    justify-content: space-between;
+  }
+
+  .md\:gap-4 {
+    gap: 1rem;
+  }
+
+  .md\:gap-6 {
+    gap: 1.5rem;
+  }
+
+  .md\:gap-x-4 {
+    -moz-column-gap: 1rem;
+         column-gap: 1rem;
+  }
+
+  .md\:overflow-visible {
+    overflow: visible;
+  }
+
+  .md\:border-t-0 {
+    border-top-width: 0px;
+  }
+
+  .md\:p-6 {
+    padding: 1.5rem;
+  }
+
+  .md\:p-8 {
+    padding: 2rem;
+  }
+
+  .md\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .md\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .md\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .md\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .md\:py-12 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
+  .md\:py-14 {
+    padding-top: 3.5rem;
+    padding-bottom: 3.5rem;
+  }
+
+  .md\:py-16 {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
+  .md\:py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .md\:pb-0 {
+    padding-bottom: 0px;
+  }
+
+  .md\:pr-20 {
+    padding-right: 5rem;
+  }
+
+  .md\:text-center {
+    text-align: center;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .md\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .md\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
+  .md\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .md\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+}
diff --git a/assets/img/icon-github.svg b/assets/img/icon-github.svg
deleted file mode 100644
index a2426a9..0000000
--- a/assets/img/icon-github.svg
+++ /dev/null
@@ -1,59 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="438.549px" height="438.549px" viewBox="0 0 438.549 438.549" style="enable-background:new 0 0 438.549 438.549;"
-	 xml:space="preserve">
-<g>
-	<path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365
-		c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63
-		c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996
-		c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136
-		c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559
-		c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559
-		c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997
-		c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851
-		c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136
-		c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41
-		c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126
-		c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817
-		c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994
-		c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849
-		c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24
-		c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979
-		c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146
-		c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995
-		c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906
-		C438.536,184.851,428.728,148.168,409.132,114.573z"/>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
diff --git a/assets/img/icons/bronze.svg b/assets/img/icons/bronze.svg
new file mode 100644
index 0000000..5f99db5
--- /dev/null
+++ b/assets/img/icons/bronze.svg
@@ -0,0 +1,28 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2001_539)">
+<mask id="path-1-inside-1_2001_539" fill="white">
+<path d="M1.5 2.9C1.5 1.85066 2.35066 1 3.4 1L16.6 1C17.6493 1 18.5 1.85066 18.5 2.9V10.9C18.5 15.3735 14.5333 19 10 19C5.46667 19 1.5 15.3735 1.5 10.9V2.9Z"/>
+</mask>
+<path d="M1.5 2.9C1.5 1.85066 2.35066 1 3.4 1L16.6 1C17.6493 1 18.5 1.85066 18.5 2.9V10.9C18.5 15.3735 14.5333 19 10 19C5.46667 19 1.5 15.3735 1.5 10.9V2.9Z" fill="url(#paint0_linear_2001_539)"/>
+<path d="M16.5 2.9V10.9H20.5V2.9H16.5ZM3.5 10.9V2.9H-0.5V10.9H3.5ZM10 17C6.45415 17 3.5 14.1554 3.5 10.9H-0.5C-0.5 16.5916 4.47919 21 10 21V17ZM16.5 10.9C16.5 14.1554 13.5459 17 10 17V21C15.5208 21 20.5 16.5916 20.5 10.9H16.5ZM3.4 3L16.6 3L16.6 -1L3.4 -1L3.4 3ZM3.5 2.9C3.5 2.95523 3.45523 3 3.4 3L3.4 -1C1.24609 -1 -0.5 0.746093 -0.5 2.9H3.5ZM20.5 2.9C20.5 0.746091 18.7539 -0.999999 16.6 -1L16.6 3C16.5448 3 16.5 2.95523 16.5 2.9H20.5Z" fill="white" fill-opacity="0.4" mask="url(#path-1-inside-1_2001_539)"/>
+</g>
+<g clip-path="url(#paint1_angular_2001_539_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 0.003 -0.003 0 10 9.5)"><foreignObject x="-1333.33" y="-1333.33" width="2666.67" height="2666.67"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(255, 255, 255, 1) 0deg,rgba(224, 224, 224, 1) 360deg);height:100%;width:100%;opacity:1"></div></foreignObject></g></g><path d="M9.69757 6.68436C9.82427 6.43855 10.1757 6.43855 10.3024 6.68436L11.1074 8.24607C11.1398 8.30898 11.191 8.3602 11.2539 8.39262L12.8156 9.19757C13.0615 9.32427 13.0615 9.67573 12.8156 9.80243L11.2539 10.6074C11.191 10.6398 11.1398 10.691 11.1074 10.7539L10.3024 12.3156C10.1757 12.5615 9.82427 12.5615 9.69757 12.3156L8.89262 10.7539C8.8602 10.691 8.80898 10.6398 8.74607 10.6074L7.18436 9.80243C6.93855 9.67573 6.93855 9.32427 7.18436 9.19757L8.74607 8.39262C8.80898 8.3602 8.8602 8.30898 8.89262 8.24607L9.69757 6.68436Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87999999523162842,&#34;g&#34;:0.87999999523162842,&#34;b&#34;:0.87999999523162842,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87999999523162842,&#34;g&#34;:0.87999999523162842,&#34;b&#34;:0.87999999523162842,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;transform&#34;:{&#34;m00&#34;:3.6739405577555036e-16,&#34;m01&#34;:-6.0,&#34;m02&#34;:13.0,&#34;m10&#34;:6.0,&#34;m11&#34;:3.6739405577555036e-16,&#34;m12&#34;:6.50},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
+<g clip-path="url(#paint2_angular_2001_539_clip_path)" data-figma-skip-parse="true"><g transform="matrix(-0.003 0 0 -0.003 10 9.5)"><foreignObject x="-1333.33" y="-1333.33" width="2666.67" height="2666.67"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(255, 255, 255, 1) 0deg,rgba(224, 224, 224, 1) 360deg);height:100%;width:100%;opacity:0.5"></div></foreignObject></g></g><path d="M9.69757 6.68436C9.82427 6.43855 10.1757 6.43855 10.3024 6.68436L11.1074 8.24607C11.1398 8.30898 11.191 8.3602 11.2539 8.39262L12.8156 9.19757C13.0615 9.32427 13.0615 9.67573 12.8156 9.80243L11.2539 10.6074C11.191 10.6398 11.1398 10.691 11.1074 10.7539L10.3024 12.3156C10.1757 12.5615 9.82427 12.5615 9.69757 12.3156L8.89262 10.7539C8.8602 10.691 8.80898 10.6398 8.74607 10.6074L7.18436 9.80243C6.93855 9.67573 6.93855 9.32427 7.18436 9.19757L8.74607 8.39262C8.80898 8.3602 8.8602 8.30898 8.89262 8.24607L9.69757 6.68436Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87843137979507446,&#34;g&#34;:0.87843137979507446,&#34;b&#34;:0.87843137979507446,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87843137979507446,&#34;g&#34;:0.87843137979507446,&#34;b&#34;:0.87843137979507446,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;transform&#34;:{&#34;m00&#34;:-6.0,&#34;m01&#34;:-6.3918976448557041e-13,&#34;m02&#34;:13.0,&#34;m10&#34;:-2.8473786371253917e-13,&#34;m11&#34;:-6.0,&#34;m12&#34;:12.50},&#34;opacity&#34;:0.50,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
+<path d="M9.31836 6.34863C9.64906 5.88402 10.3509 5.88402 10.6816 6.34863L10.7471 6.45508L11.5283 7.9707L13.0449 8.75293C13.6519 9.06584 13.6519 9.93416 13.0449 10.2471L11.5283 11.0283L10.7471 12.5449C10.4342 13.1519 9.56584 13.1519 9.25293 12.5449L8.4707 11.0283L6.95508 10.2471C6.34814 9.93416 6.34814 9.06584 6.95508 8.75293L8.4707 7.9707L9.25293 6.45508L9.31836 6.34863Z" stroke="black" stroke-opacity="0.16"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.04492 13.7125L14.7574 1H16.6002C17.6495 1 18.5002 1.85066 18.5002 2.9V5.74252L6.15281 18.0899C4.29662 17.1668 2.80362 15.6065 2.04492 13.7125Z" fill="white" fill-opacity="0.32"/>
+<defs>
+<filter id="filter0_d_2001_539" x="1.5" y="1" width="17" height="18.95" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.95"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.24 0 0 0 0 0.118652 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2001_539"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2001_539" result="shape"/>
+</filter>
+<clipPath id="paint1_angular_2001_539_clip_path"><path d="M9.69757 6.68436C9.82427 6.43855 10.1757 6.43855 10.3024 6.68436L11.1074 8.24607C11.1398 8.30898 11.191 8.3602 11.2539 8.39262L12.8156 9.19757C13.0615 9.32427 13.0615 9.67573 12.8156 9.80243L11.2539 10.6074C11.191 10.6398 11.1398 10.691 11.1074 10.7539L10.3024 12.3156C10.1757 12.5615 9.82427 12.5615 9.69757 12.3156L8.89262 10.7539C8.8602 10.691 8.80898 10.6398 8.74607 10.6074L7.18436 9.80243C6.93855 9.67573 6.93855 9.32427 7.18436 9.19757L8.74607 8.39262C8.80898 8.3602 8.8602 8.30898 8.89262 8.24607L9.69757 6.68436Z"/></clipPath><clipPath id="paint2_angular_2001_539_clip_path"><path d="M9.69757 6.68436C9.82427 6.43855 10.1757 6.43855 10.3024 6.68436L11.1074 8.24607C11.1398 8.30898 11.191 8.3602 11.2539 8.39262L12.8156 9.19757C13.0615 9.32427 13.0615 9.67573 12.8156 9.80243L11.2539 10.6074C11.191 10.6398 11.1398 10.691 11.1074 10.7539L10.3024 12.3156C10.1757 12.5615 9.82427 12.5615 9.69757 12.3156L8.89262 10.7539C8.8602 10.691 8.80898 10.6398 8.74607 10.6074L7.18436 9.80243C6.93855 9.67573 6.93855 9.32427 7.18436 9.19757L8.74607 8.39262C8.80898 8.3602 8.8602 8.30898 8.89262 8.24607L9.69757 6.68436Z"/></clipPath><linearGradient id="paint0_linear_2001_539" x1="9.9999" y1="22.6306" x2="9.9999" y2="1.22501" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8C4500"/>
+<stop offset="1" stop-color="#D1A66E"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/img/icons/gold.svg b/assets/img/icons/gold.svg
new file mode 100644
index 0000000..0b76092
--- /dev/null
+++ b/assets/img/icons/gold.svg
@@ -0,0 +1,25 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2001_549)">
+<path d="M12.0854 18.801C10.8419 19.733 9.1581 19.733 7.91462 18.801L1.96272 14.3398C0.719241 13.4077 0.198919 11.7556 0.673887 10.2475L2.94731 3.02913C3.42228 1.52105 4.7845 0.5 6.32153 0.5H13.6785C15.2155 0.5 16.5777 1.52105 17.0527 3.02913L19.3261 10.2475C19.8011 11.7556 19.2808 13.4077 18.0373 14.3398L12.0854 18.801Z" fill="url(#paint0_linear_2001_549)"/>
+<path d="M6.32129 1.5H13.6787C14.7619 1.50011 15.7495 2.22129 16.0986 3.3291L18.3721 10.5479C18.7226 11.6607 18.3334 12.8685 17.4375 13.54L11.4854 18.001C10.5974 18.6663 9.40256 18.6663 8.51465 18.001L2.5625 13.54C1.6666 12.8685 1.27744 11.6607 1.62793 10.5479L3.90137 3.3291C4.25048 2.22129 5.23809 1.50011 6.32129 1.5Z" stroke="white" stroke-opacity="0.4" stroke-width="2"/>
+</g>
+<g clip-path="url(#paint1_angular_2001_549_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 0.003 -0.003 0 10 9.80005)"><foreignObject x="-1333.33" y="-1333.33" width="2666.67" height="2666.67"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(255, 255, 255, 1) 0deg,rgba(224, 224, 224, 1) 360deg);height:100%;width:100%;opacity:1"></div></foreignObject></g></g><path d="M9.69757 6.98441C9.82427 6.7386 10.1757 6.7386 10.3024 6.98441L11.1074 8.54612C11.1398 8.60902 11.191 8.66025 11.2539 8.69267L12.8156 9.49762C13.0615 9.62432 13.0615 9.97578 12.8156 10.1025L11.2539 10.9074C11.191 10.9398 11.1398 10.9911 11.1074 11.054L10.3024 12.6157C10.1757 12.8615 9.82427 12.8615 9.69757 12.6157L8.89262 11.054C8.8602 10.9911 8.80898 10.9398 8.74607 10.9074L7.18436 10.1025C6.93855 9.97578 6.93855 9.62432 7.18436 9.49762L8.74607 8.69267C8.80898 8.66025 8.8602 8.60902 8.89262 8.54612L9.69757 6.98441Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87999999523162842,&#34;g&#34;:0.87999999523162842,&#34;b&#34;:0.87999999523162842,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87999999523162842,&#34;g&#34;:0.87999999523162842,&#34;b&#34;:0.87999999523162842,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;transform&#34;:{&#34;m00&#34;:3.6739405577555036e-16,&#34;m01&#34;:-6.0,&#34;m02&#34;:13.0,&#34;m10&#34;:6.0,&#34;m11&#34;:3.6739405577555036e-16,&#34;m12&#34;:6.8000488281250},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
+<g clip-path="url(#paint2_angular_2001_549_clip_path)" data-figma-skip-parse="true"><g transform="matrix(-0.003 0 0 -0.003 10 9.80005)"><foreignObject x="-1333.33" y="-1333.33" width="2666.67" height="2666.67"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(255, 255, 255, 1) 0deg,rgba(224, 224, 224, 1) 360deg);height:100%;width:100%;opacity:0.5"></div></foreignObject></g></g><path d="M9.69757 6.98441C9.82427 6.7386 10.1757 6.7386 10.3024 6.98441L11.1074 8.54612C11.1398 8.60902 11.191 8.66025 11.2539 8.69267L12.8156 9.49762C13.0615 9.62432 13.0615 9.97578 12.8156 10.1025L11.2539 10.9074C11.191 10.9398 11.1398 10.9911 11.1074 11.054L10.3024 12.6157C10.1757 12.8615 9.82427 12.8615 9.69757 12.6157L8.89262 11.054C8.8602 10.9911 8.80898 10.9398 8.74607 10.9074L7.18436 10.1025C6.93855 9.97578 6.93855 9.62432 7.18436 9.49762L8.74607 8.69267C8.80898 8.66025 8.8602 8.60902 8.89262 8.54612L9.69757 6.98441Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87843137979507446,&#34;g&#34;:0.87843137979507446,&#34;b&#34;:0.87843137979507446,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87843137979507446,&#34;g&#34;:0.87843137979507446,&#34;b&#34;:0.87843137979507446,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;transform&#34;:{&#34;m00&#34;:-6.0,&#34;m01&#34;:-6.3918976448557041e-13,&#34;m02&#34;:13.0,&#34;m10&#34;:-2.8473786371253917e-13,&#34;m11&#34;:-6.0,&#34;m12&#34;:12.8000488281250},&#34;opacity&#34;:0.50,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
+<path d="M9.31836 6.64868C9.64906 6.18407 10.3509 6.18407 10.6816 6.64868L10.7471 6.75513L11.5283 8.27075L13.0449 9.05298C13.6519 9.36589 13.6519 10.2342 13.0449 10.5471L11.5283 11.3284L10.7471 12.845C10.4342 13.4519 9.56584 13.4519 9.25293 12.845L8.4707 11.3284L6.95508 10.5471C6.34814 10.2342 6.34814 9.36589 6.95508 9.05298L8.4707 8.27075L9.25293 6.75513L9.31836 6.64868Z" stroke="black" stroke-opacity="0.16"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.16064 14.4877L15.5792 1.06921C16.2604 1.51511 16.7914 2.19816 17.0531 3.02907L18.263 6.87067L7.01064 18.123L2.16064 14.4877Z" fill="white" fill-opacity="0.32"/>
+<defs>
+<filter id="filter0_d_2001_549" x="0.5" y="0.5" width="19" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.300741 0 0 0 0 0.171852 0 0 0 0 0.0192593 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2001_549"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2001_549" result="shape"/>
+</filter>
+<clipPath id="paint1_angular_2001_549_clip_path"><path d="M9.69757 6.98441C9.82427 6.7386 10.1757 6.7386 10.3024 6.98441L11.1074 8.54612C11.1398 8.60902 11.191 8.66025 11.2539 8.69267L12.8156 9.49762C13.0615 9.62432 13.0615 9.97578 12.8156 10.1025L11.2539 10.9074C11.191 10.9398 11.1398 10.9911 11.1074 11.054L10.3024 12.6157C10.1757 12.8615 9.82427 12.8615 9.69757 12.6157L8.89262 11.054C8.8602 10.9911 8.80898 10.9398 8.74607 10.9074L7.18436 10.1025C6.93855 9.97578 6.93855 9.62432 7.18436 9.49762L8.74607 8.69267C8.80898 8.66025 8.8602 8.60902 8.89262 8.54612L9.69757 6.98441Z"/></clipPath><clipPath id="paint2_angular_2001_549_clip_path"><path d="M9.69757 6.98441C9.82427 6.7386 10.1757 6.7386 10.3024 6.98441L11.1074 8.54612C11.1398 8.60902 11.191 8.66025 11.2539 8.69267L12.8156 9.49762C13.0615 9.62432 13.0615 9.97578 12.8156 10.1025L11.2539 10.9074C11.191 10.9398 11.1398 10.9911 11.1074 11.054L10.3024 12.6157C10.1757 12.8615 9.82427 12.8615 9.69757 12.6157L8.89262 11.054C8.8602 10.9911 8.80898 10.9398 8.74607 10.9074L7.18436 10.1025C6.93855 9.97578 6.93855 9.62432 7.18436 9.49762L8.74607 8.69267C8.80898 8.66025 8.8602 8.60902 8.89262 8.54612L9.69757 6.98441Z"/></clipPath><linearGradient id="paint0_linear_2001_549" x1="10.0002" y1="20.364" x2="10.0002" y2="-1.59713" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F07E00"/>
+<stop offset="1" stop-color="#F7F4CF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/img/icons/icon-python.ico b/assets/img/icons/icon-python.ico
deleted file mode 100644
index c9efc58..0000000
Binary files a/assets/img/icons/icon-python.ico and /dev/null differ
diff --git a/assets/img/icons/platinum.svg b/assets/img/icons/platinum.svg
new file mode 100644
index 0000000..40a102f
--- /dev/null
+++ b/assets/img/icons/platinum.svg
@@ -0,0 +1,25 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2001_554)">
+<path d="M11.732 19.5291C10.6603 20.157 9.33975 20.157 8.26795 19.5291L2.73205 16.2864C1.66025 15.6586 1 14.4984 1 13.2427V6.75729C1 5.50165 1.66025 4.3414 2.73205 3.71358L8.26795 0.470863C9.33974 -0.156954 10.6603 -0.156954 11.732 0.470863L17.2679 3.71358C18.3397 4.3414 19 5.50165 19 6.75729V13.2427C19 14.4984 18.3397 15.6586 17.2679 16.2864L11.732 19.5291Z" fill="url(#paint0_linear_2001_554)"/>
+<path d="M8.77344 1.33398C9.53308 0.889013 10.4669 0.889013 11.2266 1.33398L16.7627 4.57617C17.5239 5.02208 17.9998 5.85163 18 6.75684V13.2432C17.9998 14.1484 17.5239 14.9779 16.7627 15.4238L11.2266 18.666C10.4669 19.111 9.53308 19.111 8.77344 18.666L3.2373 15.4238C2.47607 14.9779 2.00016 14.1484 2 13.2432V6.75684C2.00016 5.85163 2.47607 5.02208 3.2373 4.57617L8.77344 1.33398Z" stroke="white" stroke-opacity="0.4" stroke-width="2"/>
+</g>
+<g clip-path="url(#paint1_angular_2001_554_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 0.003 -0.003 0 10 10.2)"><foreignObject x="-1333.33" y="-1333.33" width="2666.67" height="2666.67"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(255, 255, 255, 1) 0deg,rgba(224, 224, 224, 1) 360deg);height:100%;width:100%;opacity:1"></div></foreignObject></g></g><path d="M9.69757 7.38431C9.82427 7.1385 10.1757 7.1385 10.3024 7.38431L11.1074 8.94602C11.1398 9.00893 11.191 9.06015 11.2539 9.09258L12.8156 9.89752C13.0615 10.0242 13.0615 10.3757 12.8156 10.5024L11.2539 11.3073C11.191 11.3397 11.1398 11.391 11.1074 11.4539L10.3024 13.0156C10.1757 13.2614 9.82427 13.2614 9.69757 13.0156L8.89262 11.4539C8.8602 11.391 8.80898 11.3397 8.74607 11.3073L7.18436 10.5024C6.93855 10.3757 6.93855 10.0242 7.18436 9.89752L8.74607 9.09258C8.80898 9.06015 8.8602 9.00893 8.89262 8.94602L9.69757 7.38431Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87999999523162842,&#34;g&#34;:0.87999999523162842,&#34;b&#34;:0.87999999523162842,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87999999523162842,&#34;g&#34;:0.87999999523162842,&#34;b&#34;:0.87999999523162842,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;transform&#34;:{&#34;m00&#34;:3.6739405577555036e-16,&#34;m01&#34;:-6.0,&#34;m02&#34;:13.0,&#34;m10&#34;:6.0,&#34;m11&#34;:3.6739405577555036e-16,&#34;m12&#34;:7.1999511718750},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
+<g clip-path="url(#paint2_angular_2001_554_clip_path)" data-figma-skip-parse="true"><g transform="matrix(-0.003 0 0 -0.003 10 10.2)"><foreignObject x="-1333.33" y="-1333.33" width="2666.67" height="2666.67"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(255, 255, 255, 1) 0deg,rgba(224, 224, 224, 1) 360deg);height:100%;width:100%;opacity:0.5"></div></foreignObject></g></g><path d="M9.69757 7.38431C9.82427 7.1385 10.1757 7.1385 10.3024 7.38431L11.1074 8.94602C11.1398 9.00893 11.191 9.06015 11.2539 9.09258L12.8156 9.89752C13.0615 10.0242 13.0615 10.3757 12.8156 10.5024L11.2539 11.3073C11.191 11.3397 11.1398 11.391 11.1074 11.4539L10.3024 13.0156C10.1757 13.2614 9.82427 13.2614 9.69757 13.0156L8.89262 11.4539C8.8602 11.391 8.80898 11.3397 8.74607 11.3073L7.18436 10.5024C6.93855 10.3757 6.93855 10.0242 7.18436 9.89752L8.74607 9.09258C8.80898 9.06015 8.8602 9.00893 8.89262 8.94602L9.69757 7.38431Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87843137979507446,&#34;g&#34;:0.87843137979507446,&#34;b&#34;:0.87843137979507446,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87843137979507446,&#34;g&#34;:0.87843137979507446,&#34;b&#34;:0.87843137979507446,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;transform&#34;:{&#34;m00&#34;:-6.0,&#34;m01&#34;:-6.3918976448557041e-13,&#34;m02&#34;:13.0,&#34;m10&#34;:-2.8473786371253917e-13,&#34;m11&#34;:-6.0,&#34;m12&#34;:13.1999511718750},&#34;opacity&#34;:0.50,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
+<path d="M9.31836 7.04858C9.64906 6.58397 10.3509 6.58397 10.6816 7.04858L10.7471 7.15503L11.5283 8.67065L13.0449 9.45288C13.6519 9.76579 13.6519 10.6341 13.0449 10.947L11.5283 11.7283L10.7471 13.2449C10.4342 13.8518 9.56584 13.8518 9.25293 13.2449L8.4707 11.7283L6.95508 10.947C6.34814 10.6341 6.34814 9.76579 6.95508 9.45288L8.4707 8.67065L9.25293 7.15503L9.31836 7.04858Z" stroke="black" stroke-opacity="0.16"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.23682 14.5205L13.9734 1.78394L17.2678 3.71363C17.9603 4.11932 18.4811 4.74734 18.7629 5.47977L6.02637 18.2163L2.73186 16.2865C2.03933 15.8808 1.51862 15.2529 1.23682 14.5205Z" fill="white" fill-opacity="0.32"/>
+<defs>
+<filter id="filter0_d_2001_554" x="1" y="0" width="18" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0201802 0 0 0 0 0.16 0 0 0 0 0.29982 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2001_554"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2001_554" result="shape"/>
+</filter>
+<clipPath id="paint1_angular_2001_554_clip_path"><path d="M9.69757 7.38431C9.82427 7.1385 10.1757 7.1385 10.3024 7.38431L11.1074 8.94602C11.1398 9.00893 11.191 9.06015 11.2539 9.09258L12.8156 9.89752C13.0615 10.0242 13.0615 10.3757 12.8156 10.5024L11.2539 11.3073C11.191 11.3397 11.1398 11.391 11.1074 11.4539L10.3024 13.0156C10.1757 13.2614 9.82427 13.2614 9.69757 13.0156L8.89262 11.4539C8.8602 11.391 8.80898 11.3397 8.74607 11.3073L7.18436 10.5024C6.93855 10.3757 6.93855 10.0242 7.18436 9.89752L8.74607 9.09258C8.80898 9.06015 8.8602 9.00893 8.89262 8.94602L9.69757 7.38431Z"/></clipPath><clipPath id="paint2_angular_2001_554_clip_path"><path d="M9.69757 7.38431C9.82427 7.1385 10.1757 7.1385 10.3024 7.38431L11.1074 8.94602C11.1398 9.00893 11.191 9.06015 11.2539 9.09258L12.8156 9.89752C13.0615 10.0242 13.0615 10.3757 12.8156 10.5024L11.2539 11.3073C11.191 11.3397 11.1398 11.391 11.1074 11.4539L10.3024 13.0156C10.1757 13.2614 9.82427 13.2614 9.69757 13.0156L8.89262 11.4539C8.8602 11.391 8.80898 11.3397 8.74607 11.3073L7.18436 10.5024C6.93855 10.3757 6.93855 10.0242 7.18436 9.89752L8.74607 9.09258C8.80898 9.06015 8.8602 9.00893 8.89262 8.94602L9.69757 7.38431Z"/></clipPath><linearGradient id="paint0_linear_2001_554" x1="10.0002" y1="20.5437" x2="10.0002" y2="-0.543717" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0078F0"/>
+<stop offset="1" stop-color="#CFE3F7"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/img/icons/silver.svg b/assets/img/icons/silver.svg
new file mode 100644
index 0000000..75e2066
--- /dev/null
+++ b/assets/img/icons/silver.svg
@@ -0,0 +1,32 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2001_544)">
+<path d="M12.569 18.9359C11.1502 20.3547 8.84982 20.3547 7.43099 18.9359L1.06412 12.569C-0.354706 11.1502 -0.354706 8.84982 1.06412 7.43099L7.43099 1.06412C8.84982 -0.354706 11.1502 -0.354706 12.569 1.06412L18.9359 7.43099C20.3547 8.84982 20.3547 11.1502 18.9359 12.569L12.569 18.9359Z" fill="url(#paint0_linear_2001_544)"/>
+<path d="M8.1377 1.77148C9.16599 0.743186 10.834 0.743186 11.8623 1.77148L18.2285 8.1377C19.2568 9.16599 19.2568 10.834 18.2285 11.8623L11.8623 18.2285C10.834 19.2568 9.16599 19.2568 8.1377 18.2285L1.77148 11.8623C0.743186 10.834 0.743186 9.16599 1.77148 8.1377L8.1377 1.77148Z" stroke="white" stroke-opacity="0.4" stroke-width="2"/>
+</g>
+<g clip-path="url(#paint1_angular_2001_544_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 0.003 -0.003 0 10 10.2)"><foreignObject x="-1333.33" y="-1333.33" width="2666.67" height="2666.67"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(255, 255, 255, 1) 0deg,rgba(224, 224, 224, 1) 360deg);height:100%;width:100%;opacity:1"></div></foreignObject></g></g><path d="M9.69757 7.38431C9.82427 7.1385 10.1757 7.1385 10.3024 7.38431L11.1074 8.94602C11.1398 9.00893 11.191 9.06015 11.2539 9.09258L12.8156 9.89752C13.0615 10.0242 13.0615 10.3757 12.8156 10.5024L11.2539 11.3073C11.191 11.3397 11.1398 11.391 11.1074 11.4539L10.3024 13.0156C10.1757 13.2614 9.82427 13.2614 9.69757 13.0156L8.89262 11.4539C8.8602 11.391 8.80898 11.3397 8.74607 11.3073L7.18436 10.5024C6.93855 10.3757 6.93855 10.0242 7.18436 9.89752L8.74607 9.09258C8.80898 9.06015 8.8602 9.00893 8.89262 8.94602L9.69757 7.38431Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87999999523162842,&#34;g&#34;:0.87999999523162842,&#34;b&#34;:0.87999999523162842,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87999999523162842,&#34;g&#34;:0.87999999523162842,&#34;b&#34;:0.87999999523162842,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;transform&#34;:{&#34;m00&#34;:3.6739405577555036e-16,&#34;m01&#34;:-6.0,&#34;m02&#34;:13.0,&#34;m10&#34;:6.0,&#34;m11&#34;:3.6739405577555036e-16,&#34;m12&#34;:7.1999511718750},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
+<g clip-path="url(#paint2_angular_2001_544_clip_path)" data-figma-skip-parse="true"><g transform="matrix(-0.003 0 0 -0.003 10 10.2)"><foreignObject x="-1333.33" y="-1333.33" width="2666.67" height="2666.67"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(255, 255, 255, 1) 0deg,rgba(224, 224, 224, 1) 360deg);height:100%;width:100%;opacity:0.5"></div></foreignObject></g></g><path d="M9.69757 7.38431C9.82427 7.1385 10.1757 7.1385 10.3024 7.38431L11.1074 8.94602C11.1398 9.00893 11.191 9.06015 11.2539 9.09258L12.8156 9.89752C13.0615 10.0242 13.0615 10.3757 12.8156 10.5024L11.2539 11.3073C11.191 11.3397 11.1398 11.391 11.1074 11.4539L10.3024 13.0156C10.1757 13.2614 9.82427 13.2614 9.69757 13.0156L8.89262 11.4539C8.8602 11.391 8.80898 11.3397 8.74607 11.3073L7.18436 10.5024C6.93855 10.3757 6.93855 10.0242 7.18436 9.89752L8.74607 9.09258C8.80898 9.06015 8.8602 9.00893 8.89262 8.94602L9.69757 7.38431Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87843137979507446,&#34;g&#34;:0.87843137979507446,&#34;b&#34;:0.87843137979507446,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.87843137979507446,&#34;g&#34;:0.87843137979507446,&#34;b&#34;:0.87843137979507446,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;transform&#34;:{&#34;m00&#34;:-6.0,&#34;m01&#34;:-6.3918976448557041e-13,&#34;m02&#34;:13.0,&#34;m10&#34;:-2.8473786371253917e-13,&#34;m11&#34;:-6.0,&#34;m12&#34;:13.1999511718750},&#34;opacity&#34;:0.50,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
+<path d="M9.31836 7.04858C9.64906 6.58397 10.3509 6.58397 10.6816 7.04858L10.7471 7.15503L11.5283 8.67065L13.0449 9.45288C13.6519 9.76579 13.6519 10.6341 13.0449 10.947L11.5283 11.7283L10.7471 13.2449C10.4342 13.8518 9.56584 13.8518 9.25293 13.2449L8.4707 11.7283L6.95508 10.947C6.34814 10.6341 6.34814 9.76579 6.95508 9.45288L8.4707 8.67065L9.25293 7.15503L9.31836 7.04858Z" stroke="black" stroke-opacity="0.16"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.12598 13.6311L13.6309 2.12622L17.8735 6.36886L6.36862 17.8737L2.12598 13.6311Z" fill="url(#paint3_linear_2001_544)" fill-opacity="0.32"/>
+<defs>
+<filter id="filter0_d_2001_544" x="0" y="0" width="20" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.117138 0 0 0 0 0.176258 0 0 0 0 0.202862 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2001_544"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2001_544" result="shape"/>
+</filter>
+<clipPath id="paint1_angular_2001_544_clip_path"><path d="M9.69757 7.38431C9.82427 7.1385 10.1757 7.1385 10.3024 7.38431L11.1074 8.94602C11.1398 9.00893 11.191 9.06015 11.2539 9.09258L12.8156 9.89752C13.0615 10.0242 13.0615 10.3757 12.8156 10.5024L11.2539 11.3073C11.191 11.3397 11.1398 11.391 11.1074 11.4539L10.3024 13.0156C10.1757 13.2614 9.82427 13.2614 9.69757 13.0156L8.89262 11.4539C8.8602 11.391 8.80898 11.3397 8.74607 11.3073L7.18436 10.5024C6.93855 10.3757 6.93855 10.0242 7.18436 9.89752L8.74607 9.09258C8.80898 9.06015 8.8602 9.00893 8.89262 8.94602L9.69757 7.38431Z"/></clipPath><clipPath id="paint2_angular_2001_544_clip_path"><path d="M9.69757 7.38431C9.82427 7.1385 10.1757 7.1385 10.3024 7.38431L11.1074 8.94602C11.1398 9.00893 11.191 9.06015 11.2539 9.09258L12.8156 9.89752C13.0615 10.0242 13.0615 10.3757 12.8156 10.5024L11.2539 11.3073C11.191 11.3397 11.1398 11.391 11.1074 11.4539L10.3024 13.0156C10.1757 13.2614 9.82427 13.2614 9.69757 13.0156L8.89262 11.4539C8.8602 11.391 8.80898 11.3397 8.74607 11.3073L7.18436 10.5024C6.93855 10.3757 6.93855 10.0242 7.18436 9.89752L8.74607 9.09258C8.80898 9.06015 8.8602 9.00893 8.89262 8.94602L9.69757 7.38431Z"/></clipPath><linearGradient id="paint0_linear_2001_544" x1="9.99996" y1="21.5049" x2="9.99996" y2="-1.50486" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8AA8B5"/>
+<stop offset="1" stop-color="#DCE5E8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2001_544" x1="15.5602" y1="0.641439" x2="0.164786" y2="18.5671" gradientUnits="userSpaceOnUse">
+<stop offset="0.125287" stop-color="white" stop-opacity="0"/>
+<stop offset="0.195" stop-color="white"/>
+<stop offset="0.375692" stop-color="white"/>
+<stop offset="0.495" stop-color="white"/>
+<stop offset="0.929467" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/js/pyodide-worker.js b/assets/js/pyodide-worker.js
new file mode 100644
index 0000000..59ca847
--- /dev/null
+++ b/assets/js/pyodide-worker.js
@@ -0,0 +1,99 @@
+self.__PYODIDE_CDN__ = "https://cdn.jsdelivr.net/pyodide/v0.27.5/full/pyodide.js";
+
+let pyodideReadyPromise = null;
+
+async function getPyodideInstance() {
+  if (!pyodideReadyPromise) {
+    self.importScripts(self.__PYODIDE_CDN__);
+    pyodideReadyPromise = self.loadPyodide();
+  }
+  return pyodideReadyPromise;
+}
+
+function toMessageError(err) {
+  if (!err) {
+    return "Unknown error";
+  }
+  if (typeof err === "string") {
+    return err;
+  }
+  return err.message || String(err);
+}
+
+self.onmessage = async (event) => {
+  const payload = event.data || {};
+  const { type, id } = payload;
+
+  if (type === "preload") {
+    try {
+      await getPyodideInstance();
+      self.postMessage({ type: "preload:ok", id });
+    } catch (err) {
+      self.postMessage({ type: "preload:error", id, error: toMessageError(err) });
+    }
+    return;
+  }
+
+  if (type !== "run") {
+    return;
+  }
+
+  const stdoutBuffer = [];
+  const stderrBuffer = [];
+  const globalsToDelete = [];
+
+  try {
+    const py = await getPyodideInstance();
+
+    py.setStdout({
+      batched: (str) => {
+        stdoutBuffer.push(str);
+      }
+    });
+
+    py.setStderr({
+      batched: (str) => {
+        stderrBuffer.push(str);
+      }
+    });
+
+    if (payload.globals && typeof payload.globals === "object") {
+      for (const [key, value] of Object.entries(payload.globals)) {
+        py.globals.set(key, value);
+        globalsToDelete.push(key);
+      }
+    }
+
+    await py.runPythonAsync(payload.code || "");
+
+    self.postMessage({
+      type: "result",
+      id,
+      stdout: stdoutBuffer.join("\n"),
+      stderr: stderrBuffer.join("\n")
+    });
+  } catch (err) {
+    self.postMessage({
+      type: "error",
+      id,
+      error: toMessageError(err),
+      stdout: stdoutBuffer.join("\n"),
+      stderr: stderrBuffer.join("\n")
+    });
+  } finally {
+    if (globalsToDelete.length) {
+      try {
+        const py = await getPyodideInstance();
+        for (const key of globalsToDelete) {
+          try {
+            py.globals.delete(key);
+          } catch (_err) {
+            // Ignore cleanup failures for compatibility with different Pyodide proxy behaviors.
+          }
+        }
+      } catch (_err) {
+        // Ignore cleanup failure.
+      }
+    }
+  }
+};
diff --git a/index.md b/content/en/index.md
similarity index 92%
rename from index.md
rename to content/en/index.md
index 5d1dc7f..7ef464a 100644
--- a/index.md
+++ b/content/en/index.md
@@ -1,7 +1,8 @@
 ---
 layout: home.njk
+lang: en
 title: Python Programming Tutorial From Basic to Advanced
 description: Learn Python for free with complete tutorials. Python programming guide from basic to advanced for data science, machine learning, AI, and web development. Trusted by 100+ campuses & companies since 2015.
-permalink: /
+permalink: /en/
 isHomepage: true
 ---
diff --git a/tutorial/advanced/33-python-type-hints.md b/content/en/tutorial/advanced/33-python-type-hints.md
similarity index 91%
rename from tutorial/advanced/33-python-type-hints.md
rename to content/en/tutorial/advanced/33-python-type-hints.md
index f429a28..4705df0 100644
--- a/tutorial/advanced/33-python-type-hints.md
+++ b/content/en/tutorial/advanced/33-python-type-hints.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Type Hints
 order: 33
-permalink: /tutorial/python-type-hints/
+permalink: /en/tutorial/python-type-hints/
 ---
 
 Type Hints (type annotations) are a Python feature that allows you to specify the expected data type for variables, function parameters, and return values. Introduced in Python 3.5, type hints have become increasingly important for modern Python development.
@@ -23,7 +24,7 @@ Type hints provide many benefits:
 
 ```python
 # Variable annotation
-name: str = "Budi"
+name: str = "Bob"
 age: int = 25
 height: float = 175.5
 active: bool = True
@@ -63,7 +64,7 @@ For collection types, use the `typing` module (Python < 3.9) or built-in types (
 ```python
 # Python 3.9+ (recommended)
 numbers: list[int] = [1, 2, 3]
-name_age: dict[str, int] = {"Andi": 25, "Budi": 30}
+name_age: dict[str, int] = {"Alice": 25, "Bob": 30}
 coordinates: tuple[float, float] = (3.14, 2.71)
 unique: set[str] = {"apple", "orange"}
 
@@ -71,14 +72,14 @@ unique: set[str] = {"apple", "orange"}
 from typing import List, Dict, Tuple, Set
 
 numbers: List[int] = [1, 2, 3]
-name_age: Dict[str, int] = {"Andi": 25}
+name_age: Dict[str, int] = {"Alice": 25}
 coordinates: Tuple[float, float] = (3.14, 2.71)
 unique: Set[str] = {"apple", "orange"}
 ```
 
 ### Optional and Union
 
-For values that can be None or multiple types:
+For values that can be `None` or multiple types:
 
 ```python
 from typing import Optional, Union
@@ -86,7 +87,7 @@ from typing import Optional, Union
 # Optional - can be None or a specific type
 def find_user(id: int) -> Optional[str]:
     if id == 1:
-        return "Andi"
+        return "Alice"
     return None
 
 # Union - can be one of several types
@@ -96,7 +97,7 @@ def process(data: Union[str, int]) -> str:
 # Python 3.10+ syntax(recommended)
 def find_user(id: int) -> str | None:
     if id == 1:
-        return "Andi"
+        return "Alice"
     return None
 
 def process(data: str | int) -> str:
@@ -145,7 +146,7 @@ UserId: TypeAlias = int
 UserData: TypeAlias = dict[str, str | int]
 
 def get_user(user_id: UserId) -> UserData:
-    return {"name": "Andi", "age": 25}
+    return {"name": "Alice", "age": 25}
 
 # For more complex types
 Matrix: TypeAlias = list[list[float]]
@@ -208,9 +209,9 @@ def create_user(data: User) -> None:
 
 # Type checker will validate validity
 user: User = {
-    "name": "Andi",
+    "name": "Alice",
     "age": 25,
-    "email": "andi@example.com"
+    "email": "alice@example.com"
 }
 
 create_user(user)
@@ -236,7 +237,7 @@ class Student:
         return f"{self.name} ({self.id}): GPA {self.gpa}"
 ```
 
-### Dataclasses with Type Hints
+### `@dataclass` with Type Hints
 
 ```python
 from dataclasses import dataclass
@@ -314,9 +315,9 @@ def find_employee(
     return None
 
 # Usage
-address = Address("Jl. Sudirman", "Jakarta", "12190")
-e1 = Employee("Andi", "andi@email.com", 10000000, address)
-e2 = Employee("Budi", "budi@email.com", 12000000)
+address = Address("5th Avenue", "New York", "12190")
+e1 = Employee("Alice", "alice@email.com", 10000000, address)
+e2 = Employee("Bob", "bob@email.com", 12000000)
 
 all_employees = [e1, e2]
 print(calculate_total_salary(all_employees))  # 22000000
diff --git a/tutorial/advanced/34-python-decorators.md b/content/en/tutorial/advanced/34-python-decorators.md
similarity index 98%
rename from tutorial/advanced/34-python-decorators.md
rename to content/en/tutorial/advanced/34-python-decorators.md
index 74df416..c19463a 100644
--- a/tutorial/advanced/34-python-decorators.md
+++ b/content/en/tutorial/advanced/34-python-decorators.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Decorators & Closures
 order: 34
-permalink: /tutorial/python-decorators/
+permalink: /en/tutorial/python-decorators/
 ---
 
 <img src="/img/tutorial/29-tutorial-decorators-closures-python.webp" alt="Python Decorators and Closures" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
diff --git a/tutorial/advanced/35-python-iterators-generators.md b/content/en/tutorial/advanced/35-python-iterators-generators.md
similarity index 94%
rename from tutorial/advanced/35-python-iterators-generators.md
rename to content/en/tutorial/advanced/35-python-iterators-generators.md
index 9f929bc..5d5b2f1 100644
--- a/tutorial/advanced/35-python-iterators-generators.md
+++ b/content/en/tutorial/advanced/35-python-iterators-generators.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Iterators & Generators
 order: 35
-permalink: /tutorial/python-iterators-generators/
+permalink: /en/tutorial/python-iterators-generators/
 ---
 
 <img src="/img/tutorial/30-belajar-iterators-generators-python.webp" alt="Python Iterators and Generators" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
@@ -102,11 +103,11 @@ def get_generator():
 Similar to *List Comprehension*, but using regular parentheses `()`. It returns a generator object, not a list.
 
 ```python
-# List Comprehension(Creates full list in memory)
+# List comprehension (creates full list in memory)
 squares_list = [x**2 for x in range(10)]
 print(squares_list) # [0, 1, 4, ..., 81]
 
-# Generator Expression(Lazy evaluation)
+# Generator expression (lazy evaluation)
 squares_gen = (x**2 for x in range(10))
 print(squares_gen) # <generator object ...>
 
@@ -122,7 +123,7 @@ If you have to process a 10GB server log file.
 ```python
 def read_file_wrong(filename):
     file = open(filename)
-    content = file.read() # DANGER! Will load entire 10GB to RAM.
+    content = file.read() # Danger! Will load entire 10GB to RAM.
     return content.split("\n")
 ```
 
diff --git a/tutorial/advanced/36-python-context-managers.md b/content/en/tutorial/advanced/36-python-context-managers.md
similarity index 98%
rename from tutorial/advanced/36-python-context-managers.md
rename to content/en/tutorial/advanced/36-python-context-managers.md
index 836b217..798e5cd 100644
--- a/tutorial/advanced/36-python-context-managers.md
+++ b/content/en/tutorial/advanced/36-python-context-managers.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Context Managers
 order: 36
-permalink: /tutorial/python-context-managers/
+permalink: /en/tutorial/python-context-managers/
 ---
 
 <img src="/img/tutorial/31-context-manager-python.webp" alt="Python Context Managers" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
diff --git a/tutorial/advanced/37-python-metaprogramming.md b/content/en/tutorial/advanced/37-python-metaprogramming.md
similarity index 96%
rename from tutorial/advanced/37-python-metaprogramming.md
rename to content/en/tutorial/advanced/37-python-metaprogramming.md
index f7f4325..67c2d37 100644
--- a/tutorial/advanced/37-python-metaprogramming.md
+++ b/content/en/tutorial/advanced/37-python-metaprogramming.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Metaprogramming
 order: 37
-permalink: /tutorial/python-metaprogramming/
+permalink: /en/tutorial/python-metaprogramming/
 ---
 
 <img src="/img/tutorial/32-metaprogramming.webp" alt="Python Metaprogramming" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
@@ -44,12 +45,12 @@ Syntax: `type(name, bases, attrs)`
 *   `attrs`: Dictionary of class attributes and methods.
 
 ```python
-# Regular Way
+# Regular way
 class Monkey:
     def eat(self):
         print("Eating banana")
 
-# Metaprogramming Way(Exactly same!)
+# Metaprogramming way (exactly same!)
 def eat_function(self):
     print("Eating banana")
 
@@ -98,7 +99,7 @@ class UpperAttrMeta(type):
         # Call type.__new__ to create class
         return type(future_class_name, future_class_parents, uppercase_attr)
 
-# Using Metaclass
+# Using metaclass
 class Foo(metaclass=UpperAttrMeta):
     bar = 'bip'
 
diff --git a/tutorial/advanced/38-python-multithreading-multiprocessing.md b/content/en/tutorial/advanced/38-python-multithreading-multiprocessing.md
similarity index 98%
rename from tutorial/advanced/38-python-multithreading-multiprocessing.md
rename to content/en/tutorial/advanced/38-python-multithreading-multiprocessing.md
index 9ed773c..afb2b2d 100644
--- a/tutorial/advanced/38-python-multithreading-multiprocessing.md
+++ b/content/en/tutorial/advanced/38-python-multithreading-multiprocessing.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Multithreading & Multiprocessing Python
 order: 38
-permalink: /tutorial/python-multithreading-multiprocessing/
+permalink: /en/tutorial/python-multithreading-multiprocessing/
 ---
 
 <img src="/img/tutorial/33-multithreading.webp" alt="Python Multithreading and Multiprocessing" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
diff --git a/tutorial/advanced/39-python-async-await.md b/content/en/tutorial/advanced/39-python-async-await.md
similarity index 97%
rename from tutorial/advanced/39-python-async-await.md
rename to content/en/tutorial/advanced/39-python-async-await.md
index b85a969..c509730 100644
--- a/tutorial/advanced/39-python-async-await.md
+++ b/content/en/tutorial/advanced/39-python-async-await.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Async Await
 order: 39
-permalink: /tutorial/python-async-await/
+permalink: /en/tutorial/python-async-await/
 ---
 
 <img src="/img/tutorial/34-async-await-python-tutorial.webp" alt="Python Async Await - Asynchronous Programming" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
@@ -301,14 +302,14 @@ asyncio.run(main())
 
 ### When to Use Async?
 
-✅ **Use async when:**
+<i class="fa-solid fa-circle-check" aria-hidden="true"></i> **Use async when:**
 - Many I/O operations (HTTP, database, files)
 - Web servers (FastAPI, aiohttp)
 - Web scraping many pages
 - Chat applications
 - Real-time data processing
 
-❌ **Don't use async when:**
+<i class="fa-solid fa-circle-xmark" aria-hidden="true"></i> **Don't use async when:**
 - CPU intensive tasks (use multiprocessing)
 - Simple operations without I/O wait
 - Small scripts that don't need concurrency
diff --git a/tutorial/advanced/40-python-design-patterns.md b/content/en/tutorial/advanced/40-python-design-patterns.md
similarity index 98%
rename from tutorial/advanced/40-python-design-patterns.md
rename to content/en/tutorial/advanced/40-python-design-patterns.md
index 2955cf0..97d0821 100644
--- a/tutorial/advanced/40-python-design-patterns.md
+++ b/content/en/tutorial/advanced/40-python-design-patterns.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Design Patterns
 order: 40
-permalink: /tutorial/python-design-patterns/
+permalink: /en/tutorial/python-design-patterns/
 ---
 
 <img src="/img/tutorial/35-belajar-design-patterns-python.webp" alt="Python Design Patterns" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
diff --git a/tutorial/advanced/41-python-unit-testing.md b/content/en/tutorial/advanced/41-python-unit-testing.md
similarity index 94%
rename from tutorial/advanced/41-python-unit-testing.md
rename to content/en/tutorial/advanced/41-python-unit-testing.md
index 93c8bd1..7bab90b 100644
--- a/tutorial/advanced/41-python-unit-testing.md
+++ b/content/en/tutorial/advanced/41-python-unit-testing.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Unit Testing
 order: 41
-permalink: /tutorial/python-unit-testing/
+permalink: /en/tutorial/python-unit-testing/
 ---
 
 <img src="/img/tutorial/36-panduan-unit-testing-python.webp" alt="Python Unit Testing" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
@@ -61,7 +62,7 @@ Run with: `python test_calc.py`
 
 Installation:
 ```bash
-pip install pytest
+python -m pip install pytest
 ```
 
 Writing tests with pytest:
@@ -109,7 +110,7 @@ def test_get_user_data(mock_get):
     # Setup mock
     mock_response = Mock()
     mock_response.status_code = 200
-    mock_response.json.return_value = {"id": 1, "name": "Budi"}
+    mock_response.json.return_value = {"id": 1, "name": "Bob"}
     
     # Put mock response into mock_get
     mock_get.return_value = mock_response
@@ -118,7 +119,7 @@ def test_get_user_data(mock_get):
     result = get_user_data("http://fakeurl.com")
     
     # Assert
-    assert result["name"] == "Budi"
+    assert result["name"] == "Bob"
     # Ensure requests.get is actually called with correct URL
     mock_get.assert_called_with("http://fakeurl.com")
 ```
@@ -129,7 +130,7 @@ How much of your code is tested? Coverage tools can tell you which lines have no
 
 Install:
 ```bash
-pip install pytest-cov
+python -m pip install pytest-cov
 ```
 
 Run:
diff --git a/tutorial/advanced/42-python-memory-management.md b/content/en/tutorial/advanced/42-python-memory-management.md
similarity index 98%
rename from tutorial/advanced/42-python-memory-management.md
rename to content/en/tutorial/advanced/42-python-memory-management.md
index 3be41b1..13c53ab 100644
--- a/tutorial/advanced/42-python-memory-management.md
+++ b/content/en/tutorial/advanced/42-python-memory-management.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Memory Management
 order: 42
-permalink: /tutorial/python-memory-management/
+permalink: /en/tutorial/python-memory-management/
 ---
 
 <img src="/img/tutorial/37-memory-handling-python.webp" alt="Python Memory Management" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
diff --git a/content/en/tutorial/basic/01-what-is-python.md b/content/en/tutorial/basic/01-what-is-python.md
new file mode 100644
index 0000000..4ce02c5
--- /dev/null
+++ b/content/en/tutorial/basic/01-what-is-python.md
@@ -0,0 +1,34 @@
+---
+layout: tutorial.njk
+lang: en
+title: Introduction to Python
+order: 1
+permalink: /en/tutorial/what-is-python/
+---
+
+<img src="/img/tutorial/1-pendahuluan-python.webp" alt="Introduction to Python - What is Python" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+![Python Logo](/img/729px-Python_logo_and_wordmark.svg.png 'Python Logo')
+
+[Python](https://www.python.org) is a general-purpose interpreted programming language. Python is designed to be readable, expressive, and practical for everyday software development. Its straightforward syntax makes Python approachable for beginners while remaining powerful enough for large-scale production systems.
+
+The language was first released in 1991 by [Guido van Rossum](https://en.wikipedia.org/wiki/Guido_van_Rossum), and it is maintained by the [Python Software Foundation](https://www.python.org/psf/).
+
+Python is widely used in:
+
+- **Automation and scripting**: automating repetitive tasks and system administration
+- **Web development**: frameworks like Django, Flask, and FastAPI
+- **Data science and machine learning**: libraries like Pandas, NumPy, scikit-learn, TensorFlow, and PyTorch
+- **Scientific computing**: SciPy, Matplotlib, and Jupyter notebooks
+- **DevOps and backend services**: cloud tooling, CI/CD pipelines, infrastructure automation
+- **IoT and embedded devices**: Raspberry Pi, MicroPython
+
+Python runs on all major operating systems (Windows, macOS, Linux) and most Linux distributions ship with Python pre-installed.
+
+This tutorial series is written for the **Python 3.13** language and standard library.
+
+```python
+print("Python is simple and powerful")
+```
+
+Python uses clean syntax and significant indentation. You do not need semicolons at the end of each line.
diff --git a/content/en/tutorial/basic/02-python-installation.md b/content/en/tutorial/basic/02-python-installation.md
new file mode 100644
index 0000000..3965ce1
--- /dev/null
+++ b/content/en/tutorial/basic/02-python-installation.md
@@ -0,0 +1,80 @@
+---
+layout: tutorial.njk
+lang: en
+title: Python Installation
+order: 2
+permalink: /en/tutorial/python-installation/
+---
+
+<img src="/img/tutorial/2-panduan-cepat-instalasi-python-windows-linux-mac.webp" alt="Python Installation Guide" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Before writing Python programs, install Python and verify that your terminal can run it.
+
+This tutorial targets **Python 3.13**.
+
+### Linux
+
+Most Linux distributions already include Python 3. Check first:
+
+```bash
+python3 --version
+```
+
+If Python is missing or too old, install from your distro package manager or from [python.org source releases](https://www.python.org/downloads/source/).
+
+Common package-manager examples:
+
+```bash
+# Debian/Ubuntu
+sudo apt update
+sudo apt install python3 python3-pip python3-venv
+
+# Fedora
+sudo dnf install python3 python3-pip
+
+# Arch Linux
+sudo pacman -S python python-pip
+```
+
+### Windows
+
+1. Open [Python releases for Windows](https://www.python.org/downloads/windows/).
+2. Download a Python 3.13 installer (64-bit unless you need 32-bit).
+3. Run the installer.
+4. **Enable "Add python.exe to PATH"** before clicking Install.
+
+Verify installation in Command Prompt or PowerShell:
+
+```bash
+python --version
+```
+
+### macOS
+
+1. Open [Python releases for macOS](https://www.python.org/downloads/macos/).
+2. Download and run the Python 3.13 installer.
+3. Complete the installation wizard.
+
+Verify installation in Terminal:
+
+```bash
+python3 --version
+```
+
+If you use Homebrew, you can also install Python with:
+
+```bash
+brew install python
+```
+
+### Verify `pip`
+
+`pip` is usually installed with Python. Check with:
+
+```bash
+python -m pip --version
+# or
+python3 -m pip --version
+```
+
+If both Python and pip commands work, your environment is ready for the next tutorial.
diff --git a/content/en/tutorial/basic/03-running-python.md b/content/en/tutorial/basic/03-running-python.md
new file mode 100644
index 0000000..c03c47e
--- /dev/null
+++ b/content/en/tutorial/basic/03-running-python.md
@@ -0,0 +1,233 @@
+---
+layout: tutorial.njk
+lang: en
+title: Running Python
+order: 3
+permalink: /en/tutorial/running-python/
+---
+
+<img src="/img/tutorial/3-panduan-cepat-menjalankan-python.webp" alt="How to Run Python" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Python can be run in two common ways:
+
+1. **Interactive mode (REPL)** for quick experiments.
+2. **Script mode** for running `.py` files.
+
+> <i class="fa-solid fa-circle-info" aria-hidden="true"></i> **Note:** You can also run and edit Python code directly on this website in every code snippet interactively.
+
+### Quickstart (By OS)
+
+#### Linux / macOS
+
+1. Open **Terminal**.
+2. Check Python is installed:
+
+   ```bash
+   python3 --version
+   ```
+
+3. Start interactive mode (REPL):
+
+   ```bash
+   python3
+   ```
+
+4. Run a script file:
+
+   ```bash
+   python3 hello.py
+   ```
+
+#### Windows
+
+1. Open **PowerShell** or **Command Prompt**.
+2. Check Python is installed (try one of these):
+
+   ```bash
+   py --version
+   # or
+   python --version
+   ```
+
+3. Start interactive mode (REPL):
+
+   ```bash
+   py
+   # or
+   python
+   ```
+
+4. Run a script file:
+
+   ```bash
+   py hello.py
+   # or
+   python hello.py
+   ```
+
+### Run Python Interactive Mode (REPL)
+
+Start Python:
+
+```bash
+# Linux/macOS
+python3
+
+# Windows (recommended if available)
+py
+```
+
+You will see the `>>>` prompt. Example:
+
+```python
+>>> print("Welcome to Python")
+Welcome to Python
+>>> 2 + 3
+5
+```
+
+`>>>` is the REPL prompt, not part of Python syntax. Do not type `>>>` into a `.py` file or the website code editor.
+
+Use this version in files/editors:
+
+```python
+print("Welcome to Python")
+print(2 + 3)
+```
+
+Exit REPL with:
+
+- `exit()`
+- <kbd>Ctrl</kbd>+<kbd>D</kbd> (Linux/macOS)
+- <kbd>Ctrl</kbd>+<kbd>Z</kbd> then <kbd>Enter</kbd> (Windows)
+
+### Run Python Script File
+
+Create `hello.py`:
+
+```python
+print("Learn Python")
+print("at belajarpython.com")
+```
+
+Run it from terminal:
+
+```bash
+# Linux/macOS
+python3 hello.py
+
+# Windows
+py hello.py
+# or: python hello.py
+```
+
+### Optional: Run with IDLE on Windows
+
+If you prefer a GUI editor:
+
+1. Open **IDLE (Python 3.x)** from the Start menu.
+2. Use the shell window for quick commands (`>>>`).
+3. For script files, click **File > New File**.
+4. Save the file as `.py`, then run it with **Run > Run Module (F5)**.
+
+![Python Shell Windows](/img/menjalankan-python-windows.png 'Python Shell Windows')
+
+![Python Editor Windows](/img/menjalankan-python-windows-editor.png 'Python Editor Windows')
+
+### Command-Line Arguments
+
+Python passes command-line arguments through `sys.argv`:
+
+```python
+import sys
+
+print("Script name:", sys.argv[0])
+print("Arguments:", sys.argv[1:])
+```
+
+Run:
+
+```bash
+# Linux/macOS
+python3 app.py one two
+
+# Windows
+py app.py one two
+```
+
+### Other Ways to Run Python
+
+Python has a few useful command-line options:
+
+> <i class="fa-solid fa-circle-info" aria-hidden="true"></i> **Note:** In the examples below, replace `python` with `python3` on Linux/macOS, or `py` on Windows.
+
+- Run a short command:
+
+  ```bash
+  python -c "print('Hello from -c')"
+  ```
+
+- Run a module as a script (recommended pattern):
+
+  ```bash
+  python -m pip --version
+  python -m venv .venv
+  python -m http.server 8000
+  ```
+
+- Run a script and stay in interactive mode afterwards:
+
+  ```bash
+  python -i app.py
+  ```
+
+> <i class="fa-solid fa-lightbulb" aria-hidden="true"></i> **Tip:** On Windows, the `py` launcher can select a specific version:
+
+```bash
+py -3.13 --version
+py -3.13 -m pip --version
+```
+
+### Interactive Editing and History
+
+In many terminals, the REPL supports command history and basic editing:
+
+- Previous commands: Up/Down arrow
+- Move cursor in line: Left/Right arrow
+
+### Executable Scripts (Unix-like)
+
+You can make a script directly executable:
+
+```python
+#!/usr/bin/env python3
+print("Hello from executable script")
+```
+
+Then:
+
+```bash
+chmod +x hello.py
+./hello.py
+```
+
+### Source File Encoding
+
+Python 3 uses UTF-8 by default. You can still declare encoding explicitly.
+
+The encoding cookie must be on the **first or second line** of the file. If you use a shebang, put the encoding cookie on line 2:
+
+```python
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+name = "learn python"
+print(name)
+```
+
+Without a shebang, you can keep it on the first line:
+
+```python
+# -*- coding: utf-8 -*-
+name = "learn python"
+print(name)
+```
diff --git a/content/en/tutorial/basic/04-hello-world-python.md b/content/en/tutorial/basic/04-hello-world-python.md
new file mode 100644
index 0000000..2514951
--- /dev/null
+++ b/content/en/tutorial/basic/04-hello-world-python.md
@@ -0,0 +1,52 @@
+---
+layout: tutorial.njk
+lang: en
+title: Hello World Python
+order: 4
+permalink: /en/tutorial/hello-world-python/
+---
+
+<img src="/img/tutorial/4-hello-world-python.webp" alt="Hello World Python" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+The first Python program is usually a single `print()` call. The `print()` function writes text to standard output (your terminal or console).
+
+### Basic Syntax
+
+```python
+print("Hello World")
+```
+
+When you run the script above, Python prints:
+
+`Hello World`
+
+The text inside the parentheses is called an **argument**. String arguments must be wrapped in quotes, either single quotes (`'...'`) or double quotes (`"..."`). Both are equivalent:
+
+```python
+print('Hello World')
+print("Hello World")
+```
+
+You can also print numbers and expressions without quotes:
+
+```python
+print(42)
+print(10 + 5)
+```
+
+### Indentation
+
+Python uses indentation (whitespace at the beginning of a line) to define code blocks. Unlike many languages that use braces `{}`, Python relies on consistent indentation:
+
+```python
+if True:
+    print("This is indented")
+```
+
+Using incorrect indentation raises an `IndentationError`.
+
+### Python Case Sensitivity
+
+Python is case-sensitive. `print()` works, but `Print()` or `PRINT()` raises `NameError`.
+
+This rule also applies to variable names and function names. For example, `name` and `Name` are two different variables.
diff --git a/content/en/tutorial/basic/05-python-comments.md b/content/en/tutorial/basic/05-python-comments.md
new file mode 100644
index 0000000..4c5ff5b
--- /dev/null
+++ b/content/en/tutorial/basic/05-python-comments.md
@@ -0,0 +1,65 @@
+---
+layout: tutorial.njk
+lang: en
+title: Python Comments
+order: 5
+permalink: /en/tutorial/python-comments/
+---
+
+<img src="/img/tutorial/5-komentar-pada-python.webp" alt="Python Comments" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Comments are notes in source code that Python ignores during execution.
+
+Use comments to explain intent, assumptions, and important details.
+
+### Single-Line Comments
+
+Use `#`:
+
+```python
+# This is a comment
+print("Hello World")  # Inline comment
+```
+
+### Multi-Line Explanations
+
+Python has no dedicated multi-line comment syntax. The common style is multiple `#` lines:
+
+```python
+# This block explains why we do something,
+# not only what the code does.
+# Keep comments concise and useful.
+```
+
+Triple-quoted strings (`""" ... """`) are strings, not real comments. They are usually used for docstrings.
+
+### Docstring Example
+
+```python
+def greet(name):
+    """Return greeting text for a name."""
+    return f"Hello, {name}"
+```
+
+### Complete Example
+
+The following script shows how comments work alongside real code. Only the `print()` calls produce output:
+
+```python
+# Print a greeting
+print("Hello World")
+
+# The line below is commented out, so it will not run
+# print("This will not be printed")
+
+print("Bob")    # prints a name
+print(123)      # prints a number
+```
+
+Output:
+
+```text
+Hello World
+Bob
+123
+```
diff --git a/tutorial/basic/06-python-data-types.md b/content/en/tutorial/basic/06-python-data-types.md
similarity index 72%
rename from tutorial/basic/06-python-data-types.md
rename to content/en/tutorial/basic/06-python-data-types.md
index 6b68fe0..cda67f0 100644
--- a/tutorial/basic/06-python-data-types.md
+++ b/content/en/tutorial/basic/06-python-data-types.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Data Types
 order: 6
-permalink: /tutorial/python-data-types/
+permalink: /en/tutorial/python-data-types/
 ---
 
 <img src="/img/tutorial/6-tipe-data-pada-python.webp" alt="Python Data Types" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
@@ -26,44 +27,50 @@ Here are the data types of the Python programming language:
 | Set | `{'apple', 'orange'}` | Unordered collection of unique data and cannot have duplicates |
 | Dictionary | `{'name': 'adi','id':2}` | Sequence data that stores various data types in the form of key and value pairs |
 
-To try various kinds of data types, please try the Python script below.
+To try various kinds of data types, please try the Python scripts below.
+
+#### Boolean
 
 ```python
-#Boolean data type
 print(True)
+print(False)
+```
 
-#String data type
+#### String
+
+```python
 print("Let's learn Python")
 print('Learning Python is Very Easy')
+```
 
-#Integer data type
-print(20)
-
-#Float data type
-print(3.14)
+#### Integer and Float
 
-#Hexadecimal data type
-print(0x9a)
+```python
+print(20)       # integer
+print(3.14)     # float
+print(0x9a)     # hexadecimal (prints 154)
+print(5j)       # complex number
+```
 
-#Complex data type
-print(5j)
+#### List and Tuple
 
-#List data type
-print([1,2,3,4,5])
+```python
+print([1, 2, 3, 4, 5])           # list (mutable)
 print(["one", "two", "three"])
 
-#Tuple data type
-print((1,2,3,4,5))
+print((1, 2, 3, 4, 5))           # tuple (immutable)
 print(("one", "two", "three"))
+```
 
-#Set data type
-print({1,2,3,4,5})
+#### Set and Dictionary
+
+```python
+print({1, 2, 3, 4, 5})               # set (unique elements)
 print({"apple", "orange", "mango"})
 
-#Dictionary data type
-print({"name":"Budi", 'age':20})
-#Dictionary data type checked into biodata variable
-biodata = {"name":"Andi", 'age':21} #process initialization of biodata variable
-print(biodata) #process printing biodata variable containing Dictionary data type
-print(type(biodata)) #function to check data type kind. will appear <class 'dict'> which means dict is dictionary data type
+print({"name": "Bob", "age": 20})     # dictionary (key-value)
+
+profile = {"name": "Alice", "age": 21}
+print(profile)
+print(type(profile))  # <class 'dict'>
 ```
diff --git a/tutorial/basic/07-python-variables.md b/content/en/tutorial/basic/07-python-variables.md
similarity index 67%
rename from tutorial/basic/07-python-variables.md
rename to content/en/tutorial/basic/07-python-variables.md
index 0c55919..496dc75 100644
--- a/tutorial/basic/07-python-variables.md
+++ b/content/en/tutorial/basic/07-python-variables.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Variables
 order: 7
-permalink: /tutorial/python-variables/
+permalink: /en/tutorial/python-variables/
 ---
 
 <img src="/img/tutorial/7-variabel-pada-python.webp" alt="Python Variables" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
@@ -19,37 +20,56 @@ Writing Python variables itself also has certain rules, namely:
 
 To start creating variables in Python it is very easy, you simply write the variable then fill it with a value by adding an equal sign `=` followed by the value you want to enter.
 
-Below is an example of using variables in the Python programming language:
+**Creating and printing a variable**
 
 ```python
-#process of entering data into variable
 name = "John Doe"
-#process of printing variable
 print(name)
+```
+
+**Changing value and data type**
+
+Variables can change their value and even their type during execution:
+
+```python
+age = 20
+print(age)
+print(type(age))
+
+age = "twenty one"
+print(age)
+print(type(age))
+```
+
+**Combining variables**
+
+```python
+first_name = "Bob"
+last_name = "Smith"
+full_name = first_name + " " + last_name
 
-#value and data type in variable can be changed
-age = 20 #initial value
-print(age) #print age value
-type(age) #check age data type
-age = "twenty one" #value after changed
-print(age) #print age value
-type(age) #check age data type
-
-firstName = "Budi"
-lastName = "Susanto"
-name = firstName + " " + lastName
 age = 22
 hobby = "Swimming"
-print("Biodata\n", name, "\n", age, "\n", hobby)
 
-#other variable examples
-thisisvariable = "Hello"
-this_is_also_variable = "Hi"
-_thisisvariablealso = "Hi"
-thisisvariable222 = "Bye"
+print("Name:", full_name)
+print("Age:", age)
+print("Hobby:", hobby)
+```
+
+**Valid variable names**
+
+```python
+my_variable = "Hello"
+_private = "Hi"
+count2 = 100
+print(my_variable, _private, count2)
+```
 
+**Using variables in calculations**
+
+```python
 length = 10
 width = 5
 area = length * width
-print(area)
+print("Area:", area)
 ```
diff --git a/content/en/tutorial/basic/08-python-operators.md b/content/en/tutorial/basic/08-python-operators.md
new file mode 100644
index 0000000..b8cdc5c
--- /dev/null
+++ b/content/en/tutorial/basic/08-python-operators.md
@@ -0,0 +1,268 @@
+---
+layout: tutorial.njk
+lang: en
+title: Python Operators
+order: 8
+permalink: /en/tutorial/python-operators/
+---
+
+<img src="/img/tutorial/8-operator-pada-python.webp" alt="Python Operators" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Operators are constructs that can manipulate the values of operands.
+
+For example the operation 3 + 2 = 5. Here `3` and `2` are operands and `+` is the operator.
+
+The Python programming language supports various kinds of operators, including:
+
+- [Arithmetic Operators](#arithmetic-operators)
+- [Comparison (Relational) Operators](#comparison-operators)
+- [Assignment Operators](#assignment-operators)
+- [Logical Operators](#logical-operators)
+- [Bitwise Operators](#bitwise-operators)
+- [Membership Operators](#membership-operators)
+- [Identity Operators](#identity-operators)
+
+### Arithmetic Operators <a name="arithmetic-operators"></a>
+
+| Operator | Example | Explanation |
+| -------------------- | ------------- | ---------------------------------------------------------------------------------------------------------- |
+| Addition `+` | `1 + 3 = 4` | Adds the value of each operand or number |
+| Subtraction `-` | `4 - 1 = 3` | Subtracts the operand value on the left using the operand on the right |
+| Multiplication `*` | `2 * 4 = 8` | Multiplies operands/numbers |
+| Division `/` | `10 / 5 = 2` | To divide the operand on the left using the operand on the right |
+| Modulus `%` | `11 % 2 = 1` | Gets the remainder of the division from the operand on the left when divided by the operand on the right |
+| Exponent `**` | `8 ** 2 = 64` | Raises the operand on the left to the power of the operand on the right |
+| Floor Division `//` | `10 // 3 = 3` | Same as division, but the digits behind the decimal are removed |
+
+**Addition** (`+`)
+
+```python
+print(13 + 2)
+apple = 7
+orange = 9
+fruit = apple + orange
+print(fruit)
+```
+
+**Subtraction** (`-`)
+
+```python
+debt = 10000
+pay = 5000
+remaining_debt = debt - pay
+print("Remaining debt:", remaining_debt)
+```
+
+**Multiplication** (`*`)
+
+```python
+length = 15
+width = 8
+area = length * width
+print("Area:", area)
+```
+
+**Division** (`/`)
+
+```python
+cake = 16
+children = 4
+cake_per_child = cake / children
+print("Each child gets:", cake_per_child)
+```
+
+**Modulus** (`%`)
+
+```python
+print(14 % 5)
+print(10 % 3)
+print(20 % 4)
+```
+
+**Exponent** (`**`)
+
+```python
+print(8 ** 2)
+print(2 ** 10)
+print(5 ** 3)
+```
+
+**Floor Division** (`//`)
+
+```python
+print(10 // 3)
+print(7 // 2)
+print(-10 // 3)
+```
+
+### Comparison (Relational) Operators <a name="comparison-operators"></a>
+
+Comparison operators are used to compare a value from each operand.
+
+| Operator | Example | Explanation |
+| --------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
+| Equal to `==` | `1 == 1` | `True` if each operand has the same value, then the condition is `True`. |
+| Not equal to `!=` | `2 != 2` | `False`. Will produce the opposite value of the actual condition. |
+| Greater than `>` | `5 > 3` | `True` If the left operand value is greater than the right operand value, then the condition becomes true. |
+| Less than `<` | `5 < 3` | `True` If the left operand value is smaller than the right operand value, then the condition becomes true. |
+| Greater than or equal to `>=` | `5 >= 3` | `True` If the left operand value is greater than the right operand value, or same, then the condition becomes true. |
+| Less than or equal to `<=` | `5 <= 3` | `True` If the left operand value is smaller than the right operand value, or same, then the condition becomes true. |
+
+Below is an example of using Comparison Operators in Python programming language
+
+```python
+# Equal to
+print(1 == 1)  # True
+print(1 == 2)  # False
+
+# Not equal to
+print(2 != 2)  # False
+print(2 != 3)  # True
+
+# Greater than
+print(5 > 3)   # True
+
+# Less than
+print(5 < 3)   # False
+
+# Greater than or equal to
+print(5 >= 3)  # True
+
+# Less than or equal to
+print(5 <= 3)  # False
+```
+
+### Assignment Operators <a name="assignment-operators"></a>
+
+Assignment operators are used to give or modify values into a variable.
+
+| Operator | Example | Explanation |
+| --------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| Equal `=` | `a = 1` | Gives value on the right into the variable on the left. |
+| Add equal `+=` | `a += 2` | Gives variable value with variable value itself added with value on the right. |
+| Subtract equal `-=` | `a -= 2` | Gives variable value with variable value itself subtracted by value on the right. |
+| Multiply equal `*=` | `a *= 2` | Gives variable value with variable value itself multiplied by value on the right. |
+| Divide equal `/=` | `a /= 4` | Gives variable value with variable value itself divided by value on the right. |
+| Modulus equal `%=` | `a %= 3` | Gives variable value with variable value itself divided by value on the right. What is taken later is the remainder. |
+| Exponent equal `**=` | `a **= 3` | Gives variable value with variable value itself raised to the power of value on the right. |
+| Floor Division equal `//=` | `a //= 3` | Divides rounded operand left of operator with operand right of operator then the result is filled to left operand. |
+
+```python
+x = 10
+print("x =", x)
+
+x += 5
+print("x += 5 ->", x)
+
+x -= 3
+print("x -= 3 ->", x)
+
+x *= 2
+print("x *= 2 ->", x)
+
+x //= 4
+print("x //= 4 ->", x)
+```
+
+### Logical Operators <a name="logical-operators"></a>
+
+Logical operators are used to combine conditional statements.
+
+| Operator | Example | Explanation |
+| -------- | --------------------- | ------------------------------------------------------------ |
+| `and` | `True and False` | Returns `True` if both statements are true |
+| `or` | `True or False` | Returns `True` if at least one statement is true |
+| `not` | `not True` | Reverses the result, returns `False` if the result is true |
+
+```python
+print(True and False)
+print(True or False)
+print(not True)
+
+x = 10
+print(x > 5 and x < 20)
+print(x > 5 or x > 20)
+print(not(x > 5 and x < 20))
+```
+
+### Bitwise Operators <a name="bitwise-operators"></a>
+
+Bitwise operators are used to perform operations on individual bits of integer values.
+
+| Operator | Name | Example | Explanation |
+| -------- | ----------- | ----------- | ------------------------------------------------- |
+| `&` | AND | `10 & 4` | Sets each bit to 1 if both bits are 1 |
+| `\|` | OR | `10 \| 4` | Sets each bit to 1 if one of the bits is 1 |
+| `^` | XOR | `10 ^ 4` | Sets each bit to 1 if only one of the bits is 1 |
+| `~` | NOT | `~10` | Inverts all the bits |
+| `<<` | Left shift | `10 << 2` | Shifts bits left by pushing zeros from the right |
+| `>>` | Right shift | `10 >> 2` | Shifts bits right by pushing zeros from the left |
+
+```python
+a = 10  # 1010 in binary
+b = 4   # 0100 in binary
+
+print(a & b)    # 0 (AND)
+print(a | b)    # 14 (OR)
+print(a ^ b)    # 14 (XOR)
+print(~a)       # -11 (NOT)
+print(a << 2)   # 40 (left shift)
+print(a >> 2)   # 2 (right shift)
+```
+
+### Membership Operators <a name="membership-operators"></a>
+
+Membership operators are used to test if a value is found in a sequence (such as a string, list, or tuple).
+
+| Operator | Example | Explanation |
+| ---------- | ----------------------- | ---------------------------------------------------------------- |
+| `in` | `"a" in "apple"` | Returns `True` if the value is found in the sequence |
+| `not in` | `"b" not in "apple"` | Returns `True` if the value is **not** found in the sequence |
+
+```python
+fruits = ["apple", "banana", "cherry"]
+
+print("banana" in fruits)
+print("mango" in fruits)
+print("mango" not in fruits)
+```
+
+### Identity Operators <a name="identity-operators"></a>
+
+Identity operators are used to compare whether two variables refer to the same object in memory, not just the same value.
+
+| Operator | Example | Explanation |
+| ---------- | ----------- | ---------------------------------------------------------------- |
+| `is` | `a is b` | Returns `True` if both variables point to the same object |
+| `is not` | `a is not b`| Returns `True` if both variables do **not** point to the same object |
+
+```python
+a = [1, 2, 3]
+b = a
+c = [1, 2, 3]
+
+print(a is b)
+print(a is c)
+print(a == c)
+print(a is not c)
+```
+
+### Operator Execution Priority in Python
+
+Of all the operators above, each has a priority order where the first priority will be done first, and so on until the last priority.
+
+| Operator | Description |
+| --------------------------------- | ------------------------ |
+| `**` | Arithmetic |
+| `~, +, -` | Bitwise |
+| `*, /, %, //` | Arithmetic |
+| `+, -` | Arithmetic |
+| `>>, <<` | Bitwise |
+| `&` | Bitwise |
+| `^` | Bitwise |
+| `<=, <, >, >=` | Comparison |
+| `==, !=` | Comparison |
+| `=, %=, /=, //=, -=, +=, *=, **=` | Assignment |
+| `is, is not` | Identity |
+| `in, not in` | Membership |
+| `not, or, and` | Logical |
diff --git a/tutorial/basic/09-python-conditions.md b/content/en/tutorial/basic/09-python-conditions.md
similarity index 73%
rename from tutorial/basic/09-python-conditions.md
rename to content/en/tutorial/basic/09-python-conditions.md
index ea1345e..832f26f 100644
--- a/tutorial/basic/09-python-conditions.md
+++ b/content/en/tutorial/basic/09-python-conditions.md
@@ -1,21 +1,22 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Conditions
 order: 9
-permalink: /tutorial/python-conditions/
+permalink: /en/tutorial/python-conditions/
 ---
 
 <img src="/img/tutorial/9-kondisi-if-else-python.webp" alt="Python If Else Conditions" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
 
-### If Condition
+### `if` Condition
 
-Decision making (if condition) is used to anticipate conditions that occur during program execution and determine what actions will be taken according to the conditions.
+Decision making (`if` condition) is used to anticipate conditions that occur during program execution and determine what actions will be taken according to the conditions.
 
 In Python there are several statements/conditions including `if`, `else` and `elif`. `if` condition is used to execute code if the condition is true `True`.
 
 If the condition is false `False` then the `if` statement/condition will not be executed.
 
-Below is an example of using if condition in Python
+Below is an example of using `if` condition in Python
 
 ```python
 #If condition is a condition that will be executed by program if it is true or TRUE
@@ -33,15 +34,15 @@ if(score > 10):
 
 From the example above, if the program is run it will print string `"Nine is Greater Than Seven"` once which is in the first if. In the second if, the statement is false, so the command `print("Nine is Greater Than Seven")` will not be executed.
 
-### If Else Condition
+### `if` `else` Condition
 
-Decision making (if else condition) is not only used to determine what action will be taken according to the condition, but also used to determine what action will be taken/run if the condition is not suitable.
+Decision making (`if` `else` condition) is not only used to determine what action will be taken according to the condition, but also used to determine what action will be taken/run if the condition is not suitable.
 
-In Python there are several statements/conditions including if, else and elif. If condition is used to execute code if the condition is true.
+In Python there are several statements/conditions including `if`, `else` and `elif`. `if` condition is used to execute code if the condition is true.
 
-If else condition is a condition where if the statement is true `True` then the code in if will be executed, but if it is false `False` then it will execute code in else.
+`if` `else` condition is a condition where if the statement is true `True` then the code in if will be executed, but if it is false `False` then it will execute code in else.
 
-Below is an example of using if else condition in Python
+Below is an example of using `if` `else` condition in Python
 
 ```python
 # If else condition is if condition is TRUE then it will be executed generally in if,
@@ -58,11 +59,11 @@ else:
 
 In the example above, if the program is run it will print string `"Sorry You Did Not Pass"` because the statement in if is `False`.
 
-### Elif Condition
+### `elif` Condition
 
-Decision making (if elif condition) is a continuation/logical branching of "if condition". With elif we can create program code that will select several possibilities that could happen. Almost the same as "else" condition, the difference is "elif" condition can be many and not just one.
+Decision making (`if` `elif` condition) is a continuation/logical branching of "`if` condition". With elif we can create program code that will select several possibilities that could happen. Almost the same as "else" condition, the difference is "elif" condition can be many and not just one.
 
-Below is an example of using elif condition in Python
+Below is an example of using `elif` condition in Python
 
 ```python
 #Example of using elif condition
@@ -122,7 +123,7 @@ def process_command(command):
         case _:
             print("Unknown command")
 
-process_command("hello Budi")  # Output: Hello, Budi!
+process_command("hello Bob")  # Output: Hello, Bob!
 process_command("add 5 3")  # Output: Result: 8
 ```
 
diff --git a/tutorial/basic/10-python-loops.md b/content/en/tutorial/basic/10-python-loops.md
similarity index 67%
rename from tutorial/basic/10-python-loops.md
rename to content/en/tutorial/basic/10-python-loops.md
index 138302c..70562c4 100644
--- a/tutorial/basic/10-python-loops.md
+++ b/content/en/tutorial/basic/10-python-loops.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Loop
 order: 10
-permalink: /tutorial/python-loops/
+permalink: /en/tutorial/python-loops/
 ---
 
 <img src="/img/tutorial/10-tutorial-loop-pada-python.webp" alt="Python Loops - While, For, Nested Loop" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
@@ -11,15 +12,15 @@ In general, statements in programming languages will be executed sequentially. T
 
 In Python programming language repetition is divided into 3 types, namely:
 
-- While Loop
-- For Loop
+- `while` loop
+- `for` loop
 - Nested Loop
 
-### While Loop
+### `while` loop
 
-While Loop repetition in Python programming language executes statement many times as long as condition is true or `True`.
+`while` loop repetition in Python programming language executes statement many times as long as condition is true or `True`.
 
-Below is an example of using While Loop repetition.
+Below is an example of using `while` loop repetition.
 
 ```python
 #Example of using While Loop
@@ -33,11 +34,11 @@ while (count < 9):
 print("Good bye!")
 ```
 
-### For Loop
+### `for` loop
 
 `for` repetition in Python has the ability to repeat items from any sequence, such as `list` or `string`.
 
-Below is an example of using For Loop repetition.
+Below is an example of using `for` loop repetition.
 
 ```python
 #Example of simple for loop
@@ -55,20 +56,28 @@ for food in fruits:
 
 Python programming language allows using one loop inside another loop. The following section shows some examples to illustrate the concept.
 
-Below is an example of using Nested Loop.
+#### Nested `for` Loop
 
 ```python
-#Example of using Nested Loop
-#Note: Use of modulo on conditional assumes non-zero value as True and zero as False
-
-i = 2
-while(i < 100):
-  j = 2
-while(j <= (i/j)):
-  if not(i%j): break
-  j = j + 1
-  if (j > i/j) : print(i, " is prime")
-    i = i + 1
+# Example: print coordinate pairs
+for row in range(1, 4):
+  for col in range(1, 4):
+    print(f"({row},{col})", end=" ")
+  print()
+```
+
+#### Nested `while` Loop
+
+```python
+# Example: multiplication table 1..3
+row = 1
+while row <= 3:
+  col = 1
+  while col <= 3:
+    print(f"{row}x{col}={row * col}", end="  ")
+    col += 1
+  print()
+  row += 1
 
 print("Good bye!")
 ```
diff --git a/content/en/tutorial/basic/11-python-numbers.md b/content/en/tutorial/basic/11-python-numbers.md
new file mode 100644
index 0000000..f91e867
--- /dev/null
+++ b/content/en/tutorial/basic/11-python-numbers.md
@@ -0,0 +1,135 @@
+---
+layout: tutorial.njk
+lang: en
+title: Python Number
+order: 11
+permalink: /en/tutorial/python-numbers/
+---
+
+<img src="/img/tutorial/11-tipe-data-number-pada-python.webp" alt="Python Number Data Types - Int, Float, Complex" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Python has three built-in numeric types:
+
+- `int` (integer)
+- `float` (floating-point)
+- `complex` (complex numbers)
+
+Numbers are immutable: changing a number value creates a new object.
+
+| Type | Examples |
+| -------- | ------------------------- |
+| `int` | `20`, `-13`, `0`, `0x56` |
+| `float` | `0.1`, `1.20`, `-92.0`, `6.02e23` |
+| `complex` | `3+4j`, `35j`, `3.12e-12j` |
+
+> In Python 3, integer literals like `020` are invalid. Use `20` for decimal or `0o24` for octal.
+
+### Python Number Data Type Conversion
+
+Use built-in constructors for conversion:
+
+- `int(x)` converts `x` to integer.
+- `float(x)` converts `x` to floating-point number.
+- `complex(x)` converts `x` to complex number with real part `x`.
+- `complex(x, y)` converts to complex number `x + yj`.
+
+### Python Mathematical Functions
+
+Python provides built-ins and the `math` module for mathematical operations.
+
+| Name | Usage | Explanation |
+| ------------ | ----------------- | -------------------------------------------------------------------- |
+| Absolute | `abs(x)` | Absolute value of `x` |
+| Power | `pow(x, y)` | Equivalent to `x ** y` |
+| Round | `round(x, n)` | Rounds to `n` digits (or nearest integer if omitted) |
+| Maximum | `max(a, b, ...)` | Largest value |
+| Minimum | `min(a, b, ...)` | Smallest value |
+| Square Root | `math.sqrt(x)` | Square root of `x` |
+| Ceiling | `math.ceil(x)` | Smallest integer `>= x` |
+| Floor | `math.floor(x)` | Largest integer `<= x` |
+| Logarithm | `math.log(x)` | Natural logarithm |
+
+```python
+import math
+
+print(abs(-9))
+print(pow(2, 5))
+print(round(2.675, 2))
+print(math.sqrt(16))
+```
+
+### Python Random Number Functions
+
+The `random` module is often used in simulations, tests, and games.
+
+| Name | Usage | Explanation |
+| --------- | ----------------------------------- | ----------------------------------------------------------- |
+| Choice | `choice(seq)` | Random item from sequence |
+| RandRange | `randrange(start, stop, step)` | Random value from range |
+| Random | `random()` | Random float in `[0.0, 1.0)` |
+| Seed | `seed(x)` | Set random seed |
+| Shuffle | `shuffle(lst)` | Shuffle list in place |
+| Uniform | `uniform(x, y)` | Random float in `[x, y]` |
+
+### Python Trigonometric Functions
+
+`math` provides trigonometric helpers:
+
+| Name | Usage | Explanation |
+| ------- | --------------------- | ------------------------------------------------- |
+| Cosine | `math.cos(x)` | Cosine of `x` in radians |
+| Sine | `math.sin(x)` | Sine of `x` in radians |
+| Tangent | `math.tan(x)` | Tangent of `x` in radians |
+| Degrees | `math.degrees(x)` | Convert radians to degrees |
+| Radians | `math.radians(x)` | Convert degrees to radians |
+
+### Python Mathematical Constants
+
+| Name | Usage | Explanation |
+| ---- | ---------- | ----------------------- |
+| Pi | `math.pi` | Mathematical constant pi |
+| e | `math.e` | Mathematical constant e |
+
+### Floating-Point Arithmetic: Representation and Limits
+
+Floating-point numbers are binary approximations, so some decimal values cannot be represented exactly.
+
+```python
+print(0.1 + 0.1 + 0.1)     # 0.30000000000000004
+print(0.1 + 0.1 + 0.1 == 0.3)  # False
+```
+
+Use safer comparisons:
+
+```python
+import math
+
+print(math.isclose(0.1 + 0.1 + 0.1, 0.3))  # True
+```
+
+For exact decimal arithmetic (for example, money), use `decimal`:
+
+```python
+from decimal import Decimal
+
+price = Decimal("0.1") + Decimal("0.1") + Decimal("0.1")
+print(price == Decimal("0.3"))  # True
+```
+
+For exact fractions, use `fractions.Fraction`:
+
+```python
+from fractions import Fraction
+
+print(Fraction(1, 10) * 3 == Fraction(3, 10))  # True
+```
+
+### Notes on `round()`
+
+Python uses "round half to even" for ties:
+
+```python
+print(round(0.5))  # 0
+print(round(1.5))  # 2
+print(round(2.5))  # 2
+```
diff --git a/content/en/tutorial/basic/12-python-strings.md b/content/en/tutorial/basic/12-python-strings.md
new file mode 100644
index 0000000..6a0789e
--- /dev/null
+++ b/content/en/tutorial/basic/12-python-strings.md
@@ -0,0 +1,226 @@
+---
+layout: tutorial.njk
+lang: en
+title: Python String
+order: 12
+permalink: /en/tutorial/python-strings/
+---
+
+<img src="/img/tutorial/12-tipe-data-string-python.webp" alt="Python String Data Type" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+A string is a sequence of Unicode characters. In Python, you can create strings with single quotes, double quotes, or triple quotes.
+
+```python
+print("Hello World")
+```
+
+### Adjacent String Literals
+
+Python automatically concatenates string **literals** written next to each other:
+
+```python
+text = "Py" "thon"
+print(text)  # Python
+```
+
+This is useful for splitting long strings across lines:
+
+```python
+message = (
+    "This is a long message "
+    "split across multiple lines."
+)
+print(message)
+```
+
+This only works for literals. For variables, use `+` or f-strings.
+
+### Accessing Values in Strings
+
+Use indexing and slicing:
+
+```python
+name = "John Doe"
+message = "John Doe learns Python"
+
+print("name[0]:", name[0])
+print("message[1:4]:", message[1:4])
+```
+
+Strings also support negative indexes (counting from the end) and `len()`:
+
+```python
+word = "Python"
+
+print(word[-1])   # n
+print(word[-3:])  # hon
+print(len(word))  # 6
+```
+
+### Updating Strings
+
+Strings are immutable. To "modify" a string, create a new one:
+
+```python
+message = "Hello World"
+print(message[:6] + "Python")  # Hello Python
+```
+
+### Common Escape Characters
+
+| Escape | Meaning |
+| ---------------- | ------------------------------------ |
+| `\n` | New line |
+| `\t` | Horizontal tab |
+| `\r` | Carriage return |
+| `\"` | Double quote |
+| `\'` | Single quote |
+| `\\` | Backslash |
+| `\b` | Backspace |
+| `\f` | Form feed |
+| `\v` | Vertical tab |
+| `\a` | Bell / alert |
+| `\0` | Null character |
+| `\xhh` | Character by hex value (e.g. `\x41` is `A`) |
+| `\uXXXX` | Unicode character (16-bit, e.g. `\u00E9` is `e`) |
+| `\UXXXXXXXX` | Unicode character (32-bit) |
+| `\ooo` | Character by octal value (e.g. `\101` is `A`) |
+
+### `print()` vs String Representation
+
+`print()` displays the text, while `repr()` shows the string representation (including escape sequences):
+
+```python
+text = "First line.\nSecond line."
+
+print(text)
+print(repr(text))
+```
+
+### String Operators
+
+If `a = "Hello"` and `b = "Python"`:
+
+| Operator | Example | Result |
+| --------- | ------------------ | ----------------------------- |
+| `+` | `a + b` | `HelloPython` |
+| `*` | `a * 2` | `HelloHello` |
+| `[]` | `a[1]` | `e` |
+| `[:]` | `a[1:4]` | `ell` |
+| `in` | `"H" in a` | `True` |
+| `not in` | `"Z" not in a` | `True` |
+
+Raw strings are useful for regex and Windows paths:
+
+```python
+path = r"C:\new_folder\test"
+print(path)
+```
+
+> <i class="fa-solid fa-circle-info" aria-hidden="true"></i> **Note:** A raw string literal cannot end with a single backslash (for example `r"C:\new_folder\"` is invalid). If you need a trailing backslash, use a normal string like `"C:\\new_folder\\"`.
+
+### String Formatting
+
+Python supports multiple formatting styles:
+
+```python
+name = "Zara"
+weight = 21
+
+# f-string (recommended)
+print(f"My name is {name} and weight is {weight} kg")
+
+# str.format
+print("My name is {} and weight is {} kg".format(name, weight))
+
+# %-formatting (legacy, still valid)
+print("My name is %s and weight is %d kg" % (name, weight))
+```
+
+### `%` Formatting Quick Reference
+
+| Specifier | Meaning | Example |
+| --------- | ------- | ------- |
+| `%s` | String | `"%s" % "Python"` |
+| `%d` | Signed integer | `"%d" % 42` |
+| `%i` | Signed integer (same as `%d`) | `"%i" % 42` |
+| `%f` | Float | `"%f" % 3.14` |
+| `%.2f` | Float with precision | `"%.2f" % 3.14159` |
+| `%e` | Exponential (lowercase) | `"%e" % 0.001` |
+| `%E` | Exponential (uppercase) | `"%E" % 0.001` |
+| `%g` | Shorter of `%f` and `%e` | `"%g" % 0.001` |
+| `%c` | Single character | `"%c" % 65` |
+| `%x` | Hex (lowercase) | `"%x" % 255` |
+| `%X` | Hex (uppercase) | `"%X" % 255` |
+| `%o` | Octal | `"%o" % 8` |
+
+### Triple Quotes
+
+Triple quotes are useful for multiline text:
+
+```python
+text = """This is a long string
+that spans multiple lines.
+It can contain \t and \n characters too."""
+print(text)
+```
+
+### Unicode Strings in Python 3
+
+Python 3 strings are Unicode (UTF-8) by default. In Python 2, a `u` prefix was needed for Unicode strings, but this is no longer necessary.
+
+```python
+greeting = "Hello"
+city = "London"
+emoji = "\U0001F600"
+print(greeting, city, emoji)
+```
+
+You can use Unicode escapes or type characters directly:
+
+```python
+print("\u00E9")         # e (Unicode escape)
+print("cafe\u0301")     # cafe with accent
+```
+
+### Built-in String Methods
+
+| Method | Explanation |
+| ---------------------------------------------- | ---------------------------------------------------------------- |
+| `capitalize()` | Capitalize first character, lowercase the rest |
+| `center(width, fillchar)` | Center-align within `width`, padded with `fillchar` |
+| `count(sub, start, end)` | Count non-overlapping occurrences of `sub` |
+| `endswith(suffix, start, end)` | Return `True` if string ends with `suffix` |
+| `find(sub, start, end)` | Return lowest index of `sub`, or `-1` if not found |
+| `index(sub, start, end)` | Like `find()`, but raises `ValueError` if not found |
+| `isalnum()` | `True` if all characters are alphanumeric |
+| `isalpha()` | `True` if all characters are alphabetic |
+| `isdigit()` | `True` if all characters are digits |
+| `isdecimal()` | `True` if all characters are decimal characters |
+| `islower()` | `True` if all cased characters are lowercase |
+| `isnumeric()` | `True` if all characters are numeric |
+| `isspace()` | `True` if all characters are whitespace |
+| `istitle()` | `True` if string is title-cased |
+| `isupper()` | `True` if all cased characters are uppercase |
+| `join(iterable)` | Concatenate iterable with the string as separator |
+| `ljust(width, fillchar)` | Left-align within `width` |
+| `lower()` | Convert all characters to lowercase |
+| `lstrip(chars)` | Remove leading characters (whitespace by default) |
+| `replace(old, new, count)` | Replace occurrences of `old` with `new` |
+| `rfind(sub, start, end)` | Like `find()`, but search from the right |
+| `rindex(sub, start, end)` | Like `index()`, but search from the right |
+| `rjust(width, fillchar)` | Right-align within `width` |
+| `rstrip(chars)` | Remove trailing characters (whitespace by default) |
+| `split(sep, maxsplit)` | Split into list by separator |
+| `splitlines()` | Split by line boundaries |
+| `startswith(prefix, start, end)` | Return `True` if string starts with `prefix` |
+| `strip(chars)` | Remove leading and trailing characters |
+| `swapcase()` | Swap lowercase to uppercase and vice versa |
+| `title()` | Title-case: capitalize first letter of each word |
+| `upper()` | Convert all characters to uppercase |
+| `zfill(width)` | Left-pad with zeros to fill `width` |
+
+```python
+text = "  learn python  "
+print(text.strip().title())  # Learn Python
+```
diff --git a/tutorial/basic/13-python-f-strings.md b/content/en/tutorial/basic/13-python-f-strings.md
similarity index 94%
rename from tutorial/basic/13-python-f-strings.md
rename to content/en/tutorial/basic/13-python-f-strings.md
index b9b40c5..e58819e 100644
--- a/tutorial/basic/13-python-f-strings.md
+++ b/content/en/tutorial/basic/13-python-f-strings.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python F-Strings
 order: 13
-permalink: /tutorial/python-f-strings/
+permalink: /en/tutorial/python-f-strings/
 ---
 
 F-Strings (formatted string literals) are a modern and most efficient way to format strings in Python. Introduced in Python 3.6, f-strings have become the de facto standard for string formatting due to their clean syntax and better performance.
@@ -12,12 +13,12 @@ F-Strings (formatted string literals) are a modern and most efficient way to for
 F-strings start with the letter `f` or `F` before the quote, and Python expressions are written inside curly braces `{}`:
 
 ```python
-name = "Budi"
+name = "Bob"
 age = 25
 
 # Using f-string
 print(f"Hello, my name is {name} and I am {age} years old")
-# Output: Hello, my name is Budi and I am 25 years old
+# Output: Hello, my name is Bob and I am 25 years old
 
 # Can also use capital F
 print(F"Welcome, {name}!")
@@ -28,7 +29,7 @@ print(F"Welcome, {name}!")
 Before f-strings, there were several ways to format strings:
 
 ```python
-name = "Andi"
+name = "Alice"
 score = 95.5
 
 # Old way 1: Concatenation(+)
@@ -40,7 +41,7 @@ print("Name: %s, Score: %.1f" % (name, score))
 # Old way 3: .format()
 print("Name: {}, Score: {}".format(name, score))
 
-# Modern way: f-string(RECOMMENDED)
+# Modern way: f-string (recommended)
 print(f"Name: {name}, Score: {score}")
 ```
 
@@ -127,13 +128,13 @@ print(f"{text:-<15}")    # Output: "Python---------"
 
 ```python
 student = {
-    "name": "Siti",
+    "name": "Sara",
     "id": "12345",
     "gpa": 3.85
 }
 
 print(f"Name: {student['name']}, GPA: {student['gpa']}")
-# Output: Name: Siti, GPA: 3.85
+# Output: Name: Sara, GPA: 3.85
 ```
 
 ### Debugging with F-String (Python 3.8+)
@@ -156,9 +157,9 @@ print(f"{x * 2=}")                # Output: x * 2=20
 ### Multiline F-String
 
 ```python
-name = "Andi"
+name = "Alice"
 job = "Developer"
-city = "Jakarta"
+city = "New York"
 
 # Using triple quotes
 bio = f"""
diff --git a/tutorial/basic/14-python-lists.md b/content/en/tutorial/basic/14-python-lists.md
similarity index 98%
rename from tutorial/basic/14-python-lists.md
rename to content/en/tutorial/basic/14-python-lists.md
index b5fa5b9..7fe4afa 100644
--- a/tutorial/basic/14-python-lists.md
+++ b/content/en/tutorial/basic/14-python-lists.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python List
 order: 14
-permalink: /tutorial/python-lists/
+permalink: /en/tutorial/python-lists/
 ---
 
 <img src="/img/tutorial/13-tipe-data-list-python.webp" alt="Python List Data Type" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
@@ -20,7 +21,7 @@ Creating a list is very simple, just entering comma-separated values between squ
 ```python
 #Simple example of creating list in python programming language
 list1 = ['chemistry', 'physics', 1993, 2017]
-list2 = [1, 2, 3, 4, 5 ]
+list2 = [1, 2, 3, 4, 5]
 list3 = ["a", "b", "c", "d"]
 ```
 
@@ -34,7 +35,7 @@ Here is an example of how to access values in a python list :
 #Way to access value in Python list
 
 list1 = ['physics', 'chemistry', 1993, 2017]
-list2 = [1, 2, 3, 4, 5, 6, 7 ]
+list2 = [1, 2, 3, 4, 5, 6, 7]
 
 print("list1[0]: ", list1[0])
 print("list2[1:5]: ", list2[1:5])
diff --git a/tutorial/basic/15-python-list-comprehension.md b/content/en/tutorial/basic/15-python-list-comprehension.md
similarity index 88%
rename from tutorial/basic/15-python-list-comprehension.md
rename to content/en/tutorial/basic/15-python-list-comprehension.md
index 9a3ed44..a696389 100644
--- a/tutorial/basic/15-python-list-comprehension.md
+++ b/content/en/tutorial/basic/15-python-list-comprehension.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python List Comprehension
 order: 15
-permalink: /tutorial/python-list-comprehension/
+permalink: /en/tutorial/python-list-comprehension/
 ---
 
 List Comprehension is a concise and elegant way to create a new list from an existing list. It is one of the most pythonic features that keeps code clean and readable.
@@ -23,7 +24,7 @@ squares = [x ** 2 for x in range(5)]
 print(squares)  # [0, 1, 4, 9, 16]
 ```
 
-### With Conditional (if)
+### With Conditional (`if`)
 
 You can add conditions to filter elements:
 
@@ -45,9 +46,9 @@ a_fruits = [f for f in fruits if f.startswith("a")]
 print(a_fruits)  # ['apple', 'avocado']
 ```
 
-### With if-else
+### With `if`-`else`
 
-To use if-else, place it before `for`:
+To use `if`-`else`, place it before `for`:
 
 ```python
 # Syntax: [if_expression if condition else else_expression for item in iterable]
@@ -109,9 +110,9 @@ The same concept applies to dictionaries:
 # Syntax: {key: value for item in iterable}
 
 # Create dictionary from list
-names = ["Andi", "Budi", "Citra"]
+names = ["Alice", "Bob", "Carol"]
 lengths = {n: len(n) for n in names}
-print(lengths)  # {'Andi': 4, 'Budi': 4, 'Citra': 5}
+print(lengths)  # {'Alice': 4, 'Bob': 4, 'Carol': 5}
 
 # Dictionary with condition
 numbers = range(1, 6)
@@ -164,9 +165,9 @@ print(sum(gen))   # Sum of the rest
 
 ```python
 # 1. Cleaning data
-dirty_data = ["  Andi  ", "BUDI", "citra  ", "  DENI"]
+dirty_data = ["  Alice  ", "BOB", "carol  ", "  DAVID"]
 clean_data = [name.strip().title() for name in dirty_data]
-print(clean_data)  # ['Andi', 'Budi', 'Citra', 'Deni']
+print(clean_data)  # ['Alice', 'Bob', 'Carol', 'David']
 
 # 2. Extract file extension
 files = ["doc.pdf", "image.png", "data.csv", "script.py"]
@@ -179,10 +180,10 @@ passed = [f"Score: {n} (Passed)" for n in scores if n >= 60]
 print(passed)  # ['Score: 78 (Passed)', 'Score: 92 (Passed)', ...]
 
 # 4. Zip two lists
-names = ["Andi", "Budi", "Citra"]
+names = ["Alice", "Bob", "Carol"]
 ages = [25, 30, 28]
 combined = {n: a for n, a in zip(names, ages)}
-print(combined)  # {'Andi': 25, 'Budi': 30, 'Citra': 28}
+print(combined)  # {'Alice': 25, 'Bob': 30, 'Carol': 28}
 
 # 5. Create lookup table
 letters = "abcdefghij"
@@ -192,22 +193,22 @@ print(positions)  # {'a': 1, 'b': 2, 'c': 3, ...}
 
 ### When to Use List Comprehension?
 
-✅ **Use** list comprehension when:
+<i class="fa-solid fa-circle-check" aria-hidden="true"></i> **Use** list comprehension when:
 - Creating a new list from simple transformations
 - Filtering elements from a list
 - Code becomes more readable
 
-❌ **Avoid** list comprehension when:
+<i class="fa-solid fa-circle-xmark" aria-hidden="true"></i> **Avoid** list comprehension when:
 - Logic is too complex (more than 2 conditions)
 - Requires multiple statements
 - Sacrifices code readability
 
 ```python
 # Too complex - use normal loop
-# AVOID:
+# Avoid:
 result = [func(x) if cond1(x) else other(x) for x in data if cond2(x) and cond3(x)]
 
-# BETTER:
+# Better:
 result = []
 for x in data:
     if cond2(x) and cond3(x):
diff --git a/tutorial/basic/16-python-tuples.md b/content/en/tutorial/basic/16-python-tuples.md
similarity index 96%
rename from tutorial/basic/16-python-tuples.md
rename to content/en/tutorial/basic/16-python-tuples.md
index 62412e7..8d42ebb 100644
--- a/tutorial/basic/16-python-tuples.md
+++ b/content/en/tutorial/basic/16-python-tuples.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Tuple
 order: 16
-permalink: /tutorial/python-tuples/
+permalink: /en/tutorial/python-tuples/
 ---
 
 <img src="/img/tutorial/14-tipe-data-tuple-python.webp" alt="Python Tuple Data Type" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
@@ -15,7 +16,7 @@ Creating a tuple is as easy as putting comma-separated values. Optionally, you c
 #Simple example of creating tuple in python programming language
 
 tup1 = ('physics', 'chemistry', 1993, 2017)
-tup2 = (1, 2, 3, 4, 5 )
+tup2 = (1, 2, 3, 4, 5)
 tup3 = "a", "b", "c", "d"
 ```
 
@@ -31,7 +32,7 @@ To access values in a tuple, use square brackets for slicing along with the inde
 #How to access tuple values
 
 tup1 = ('physics', 'chemistry', 1993, 2017)
-tup2 = (1, 2, 3, 4, 5, 6, 7 )
+tup2 = (1, 2, 3, 4, 5, 6, 7)
 
 print("tup1[0]: ", tup1[0])
 print("tup2[1:5]: ", tup2[1:5])
@@ -91,7 +92,7 @@ In fact, Tuples respond to all of the general sequence operations we used on Str
 | Python Expression | Result | Explanation |
 | ----------------------------------------- | -------------------------------------- | ------------- |
 | `len((1, 2, 3))` | `3` | Length |
-| `(1, 2, 3) + (4, 5, 6) ` | `(1, 2, 3, 4, 5, 6)` | Concatenation |
+| `(1, 2, 3) + (4, 5, 6)` | `(1, 2, 3, 4, 5, 6)` | Concatenation |
 | `('Hello!',) \* 4` | `('Hello!', 'Hello!', 'Hello!', 'Hello!')` | Repetition |
 | `3 in (1, 2, 3)` | `True` | Membership |
 | `for x in (1,2,3) : print(x, end = ' ')` | `1 2 3` | Iteration |
diff --git a/tutorial/basic/17-python-dictionaries.md b/content/en/tutorial/basic/17-python-dictionaries.md
similarity index 96%
rename from tutorial/basic/17-python-dictionaries.md
rename to content/en/tutorial/basic/17-python-dictionaries.md
index 86ae75f..fa302be 100644
--- a/tutorial/basic/17-python-dictionaries.md
+++ b/content/en/tutorial/basic/17-python-dictionaries.md
@@ -1,13 +1,14 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Dictionary
 order: 17
-permalink: /tutorial/python-dictionaries/
+permalink: /en/tutorial/python-dictionaries/
 ---
 
 <img src="/img/tutorial/15-tipe-data-dictionary-python.webp" alt="Python Dictionary Data Type" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
 
-Python dictionary is different from List or Tuple. Because each sequence contains key and value. Each key is separated from its value by a colon (:), the items are separated by commas, and the whole thing is enclosed in curly braces. An empty dictionary without items is written with just two curly braces, like this: {}.
+Python dictionary is different from List or Tuple. Because each sequence contains key and value. Each key is separated from its value by a colon (:), the items are separated by commas, and the whole thing is enclosed in curly braces. An empty dictionary without items is written with just two curly braces, like this: `{}`.
 
 Dictionary keys can be of any type, but keys must be of an immutable data type such as strings, numbers, or tuples.
 
diff --git a/tutorial/basic/18-python-sets.md b/content/en/tutorial/basic/18-python-sets.md
similarity index 96%
rename from tutorial/basic/18-python-sets.md
rename to content/en/tutorial/basic/18-python-sets.md
index d9a7701..4301b87 100644
--- a/tutorial/basic/18-python-sets.md
+++ b/content/en/tutorial/basic/18-python-sets.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Sets
 order: 18
-permalink: /tutorial/python-sets/
+permalink: /en/tutorial/python-sets/
 ---
 
 A Set is a collection data type in Python that stores a collection of unique and unordered elements. Sets are very efficient for membership testing, removing duplicates, and mathematical operations like union, intersection, and difference.
@@ -18,7 +19,7 @@ print(fruits)  # {'apple', 'orange', 'mango'}
 numbers = set([1, 2, 3, 4, 5])
 print(numbers)  # {1, 2, 3, 4, 5}
 
-# Empty set(MUST use set(), not {})
+# Empty set (must use set(), not {})
 empty = set()
 print(empty)  # set()
 print(type(empty))  # <class 'set'>
@@ -220,7 +221,7 @@ A_copy.intersection_update(B)  # Intersection
 A_copy.difference_update(B)  # Difference
 ```
 
-### Frozenset (Immutable Set)
+### `frozenset` (Immutable Set)
 
 Frozenset is an immutable version of set:
 
@@ -336,13 +337,13 @@ print(f"Set: {time.time() - start:.6f} seconds")
 
 ### When to Use Sets?
 
-✅ **Use sets when:**
+<i class="fa-solid fa-circle-check" aria-hidden="true"></i> **Use sets when:**
 - Need to store unique elements
 - Frequent membership testing
 - Need mathematical operations (union, intersection)
 - Want to remove duplicates from a list
 
-❌ **Do not use sets when:**
+<i class="fa-solid fa-circle-xmark" aria-hidden="true"></i> **Do not use sets when:**
 - Need to preserve element order (use list or dict)
 - Need access by index
 - Elements are not hashable (list, dict)
diff --git a/tutorial/basic/19-python-date-time.md b/content/en/tutorial/basic/19-python-date-time.md
similarity index 97%
rename from tutorial/basic/19-python-date-time.md
rename to content/en/tutorial/basic/19-python-date-time.md
index 1381368..f9711e5 100644
--- a/tutorial/basic/19-python-date-time.md
+++ b/content/en/tutorial/basic/19-python-date-time.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Date & Time
 order: 19
-permalink: /tutorial/python-date-time/
+permalink: /en/tutorial/python-date-time/
 ---
 
 <img src="/img/tutorial/16-tipe-data-tanggal-waktu-time-python.webp" alt="Python Date and Time" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
@@ -70,7 +71,7 @@ You can format any time as per your requirement, but simple method to get time i
 ```python
 import time;
 
-localtime = time.asctime( time.localtime(time.time()) )
+localtime = time.asctime(time.localtime(time.time()))
 print("Current local time :", localtime)
 ```
 
@@ -123,7 +124,7 @@ Here is a list of functions available with the calendar module:
 | -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `calendar.calendar(year,w=2,l=1,c=6)` | Returns a multiline string with a calendar for year year formatted into three columns separated by spaces c. w is the width in characters of each date; each line has length 21*w+18+2*c. l is the number of lines for each week. |
 | `calendar.firstweekday( ) ` | Returns the current setting for the weekday to start each week. By default, when calendar is first imported, this is 0, meaning Monday. |
-| `calendar.isleap(year) ` | Returns True if year is a leap year; otherwise, False. |
+| `calendar.isleap(year) ` | Returns `True` if year is a leap year; otherwise, `False`. |
 | `calendar.leapdays(y1,y2) ` | Returns the number of leap days in the years in the range (y1, y2). |
 | `calendar.month(year,month,w=2,l=1) ` | Returns a multiline string with a calendar for month month of year year, one line per week plus two header lines. w is the width in characters of each date; each line has length 7*w+6. l is the number of lines for each week. |
 | `calendar.monthcalendar(year,month)` | Returns a list of lists of ints. Each sublist denotes a week. Days outside month month of year year are set to 0; days within the month are set to their day-of-month, 1 and up. |
diff --git a/content/en/tutorial/basic/20-python-functions.md b/content/en/tutorial/basic/20-python-functions.md
new file mode 100644
index 0000000..03dfea5
--- /dev/null
+++ b/content/en/tutorial/basic/20-python-functions.md
@@ -0,0 +1,90 @@
+---
+layout: tutorial.njk
+lang: en
+title: Python Functions
+order: 20
+permalink: /en/tutorial/python-functions/
+---
+
+<img src="/img/tutorial/17-belajar-fungsi-python-programming.webp" alt="Python Functions" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+A function is a reusable block of code used to perform a specific task.
+
+### Defining Python Functions
+
+Use `def` followed by the function name and parameters:
+
+```python
+def print_message(text):
+    """Print a message to the console."""
+    print(text)
+```
+
+Important rules:
+
+- Function blocks start with `def`.
+- Parameters are written inside parentheses.
+- The function body is indented.
+- `return` sends a value back to the caller.
+- If no `return` is given, the function returns `None`.
+
+### Parameters and Arguments
+
+```python
+def greet(name, greeting="Hello"):
+    return f"{greeting}, {name}!"
+
+print(greet("Bob"))
+print(greet("Bob", greeting="Hi"))
+```
+
+### Keyword Arguments
+
+```python
+def describe_pet(animal, name):
+    print(f"I have a {animal} named {name}.")
+
+describe_pet(name="Milo", animal="cat")
+```
+
+### Special Parameter Types (Python 3)
+
+Python supports positional-only and keyword-only parameters:
+
+```python
+def combine(a, b, /, sep="-", *, upper=False):
+    text = f"{a}{sep}{b}"
+    return text.upper() if upper else text
+
+print(combine("py", "thon"))
+print(combine("py", "thon", sep="_", upper=True))
+```
+
+- Parameters before `/` are positional-only.
+- Parameters after `*` are keyword-only.
+
+### Variable-Length Arguments
+
+```python
+def total(*numbers):
+    return sum(numbers)
+
+
+def show_info(**kwargs):
+    for key, value in kwargs.items():
+        print(key, "=", value)
+
+print(total(1, 2, 3, 4))
+show_info(name="Alice", age=22)
+```
+
+### `lambda` (Anonymous Function)
+
+For short one-line functions:
+
+```python
+square = lambda x: x * x
+print(square(5))
+```
+
+Use `def` for complex logic to keep code readable.
diff --git a/tutorial/basic/21-python-lambda.md b/content/en/tutorial/basic/21-python-lambda.md
similarity index 87%
rename from tutorial/basic/21-python-lambda.md
rename to content/en/tutorial/basic/21-python-lambda.md
index af528de..eb1a3c6 100644
--- a/tutorial/basic/21-python-lambda.md
+++ b/content/en/tutorial/basic/21-python-lambda.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Lambda
 order: 21
-permalink: /tutorial/python-lambda/
+permalink: /en/tutorial/python-lambda/
 ---
 
 Lambda is a short way to create anonymous functions (functions without a name) in Python. Lambda is very useful for simple operations that only need to be used once, especially as arguments for functions like `map()`, `filter()`, and `sorted()`.
@@ -24,7 +25,7 @@ print(square(5))  # Output: 25
 
 Lambda can only contain one expression and automatically returns the result.
 
-### Lambda with Multiple Arguments
+### `lambda` with Multiple Arguments
 
 ```python
 # One argument
@@ -44,7 +45,7 @@ random_greeting = lambda: "Hello!"
 print(random_greeting())  # Hello!
 ```
 
-### Lambda with Default Arguments
+### `lambda` with Default Arguments
 
 ```python
 # Default argument
@@ -54,11 +55,11 @@ print(power(3, 3))  # 27 (power of 3)
 
 # Multiple defaults
 greet = lambda name, formal=False: f"Good Morning, {name}" if formal else f"Hi, {name}!"
-print(greet("Budi"))            # Hi, Budi!
-print(greet("Budi", formal=True))  # Good Morning, Budi
+print(greet("Bob"))            # Hi, Bob!
+print(greet("Bob", formal=True))  # Good Morning, Bob
 ```
 
-### Lambda with Conditional Expression
+### `lambda` with Conditional Expression
 
 ```python
 # Ternary in lambda
@@ -72,7 +73,7 @@ print(letter_grade(95))  # A
 print(letter_grade(75))  # C
 ```
 
-### Lambda with Built-in Functions
+### `lambda` with Built-in Functions
 
 #### map() - Transform every element
 
@@ -113,7 +114,7 @@ non_empty = list(filter(lambda x: x, words))
 print(non_empty)  # ['hello', 'world', 'python']
 ```
 
-#### sorted() - Sorting with custom key
+#### `sorted()` - Sorting with Custom Key
 
 ```python
 # Sort by absolute value
@@ -122,19 +123,19 @@ sorted_nums = sorted(numbers, key=lambda x: abs(x))
 print(sorted_nums)  # [1, 2, -3, -4, -5]
 
 # Sort list of tuples
-students = [("Andi", 85), ("Budi", 92), ("Citra", 78)]
+students = [("Alice", 85), ("Bob", 92), ("Carol", 78)]
 by_score = sorted(students, key=lambda x: x[1], reverse=True)
-print(by_score)  # [('Budi', 92), ('Andi', 85), ('Citra', 78)]
+print(by_score)  # [('Bob', 92), ('Alice', 85), ('Carol', 78)]
 
 # Sort list of dictionaries
 data = [
-    {"name": "Andi", "age": 25},
-    {"name": "Budi", "age": 20},
-    {"name": "Citra", "age": 30}
+    {"name": "Alice", "age": 25},
+    {"name": "Bob", "age": 20},
+    {"name": "Carol", "age": 30}
 ]
 by_age = sorted(data, key=lambda x: x["age"])
 print(by_age)
-# [{'name': 'Budi', 'age': 20}, {'name': 'Andi', 'age': 25}, {'name': 'Citra', 'age': 30}]
+# [{'name': 'Bob', 'age': 20}, {'name': 'Alice', 'age': 25}, {'name': 'Carol', 'age': 30}]
 
 # Sort string by length
 words = ["python", "go", "javascript", "c"]
@@ -162,7 +163,7 @@ maximum = reduce(lambda x, y: x if x > y else y, numbers)
 print(maximum)  # 5
 ```
 
-### Lambda in Data Structures
+### `lambda` in Data Structures
 
 ```python
 # Dictionary of functions
@@ -188,12 +189,12 @@ for t in transformations:
     print(t(number))  # 10, 25, 15
 ```
 
-### Immediately Invoked Lambda
+### Immediately Invoked `lambda`
 
 Lambda that is executed immediately:
 
 ```python
-# IIFE(Immediately Invoked Function Expression)
+# Immediately invoked function expression
 result = (lambda x, y: x + y)(3, 5)
 print(result)  # 8
 
@@ -202,7 +203,7 @@ data = (lambda: {"config": "value", "debug": True})()
 print(data)  # {'config': 'value', 'debug': True}
 ```
 
-### Lambda vs Regular Functions
+### `lambda` vs Regular Functions
 
 | Aspect | Lambda | def Function |
 |-------|--------|--------------|
@@ -215,7 +216,7 @@ print(data)  # {'config': 'value', 'debug': True}
 ```python
 # When to use lambda
 data = [1, 2, 3, 4, 5]
-result = list(map(lambda x: x * 2, data))  # ✅ Simple, disposable
+result = list(map(lambda x: x * 2, data))  # Good for simple disposable logic
 
 # When to use def
 def calculate_tax(salary, allowance=0, deduction=0):
diff --git a/content/en/tutorial/intermediate/22-python-modules.md b/content/en/tutorial/intermediate/22-python-modules.md
new file mode 100644
index 0000000..75aaeee
--- /dev/null
+++ b/content/en/tutorial/intermediate/22-python-modules.md
@@ -0,0 +1,116 @@
+---
+layout: tutorial.njk
+lang: en
+title: Python Modules
+order: 22
+permalink: /en/tutorial/python-modules/
+---
+
+<img src="/img/tutorial/18-modul-python.webp" alt="Python Modules" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+A module is a Python file (`.py`) that contains functions, classes, and variables you can reuse in other files.
+Using modules helps you split large programs into smaller, focused files and avoid duplicated code.
+
+### Creating a Simple Module
+
+Create `support.py`:
+
+```python
+def print_func(name):
+    print(f"Hello: {name}")
+```
+
+Keep module names simple (`support.py`, `math_utils.py`) and avoid hyphens/spaces in file names.
+
+### Import Statement
+
+Use `import` to load a module:
+
+```python
+import support
+
+support.print_func("Andy")
+```
+
+`import support` keeps names scoped under `support.` and makes the origin of each function clearer.
+
+### Common Import Variants
+
+```python
+from support import print_func
+print_func("Bob")
+
+import support as sp
+sp.print_func("Carol")
+```
+
+Use `from module import name` when you only need a few symbols. Avoid wildcard imports (`from x import *`) because they make code harder to read and debug.
+
+### Module Search Path
+
+When you run `import module_name`, Python searches in:
+
+1. Current script directory
+2. `PYTHONPATH` entries
+3. Standard library and site-packages
+
+You can inspect current paths:
+
+```python
+import sys
+print(sys.path)
+```
+
+If you see `ModuleNotFoundError`, run the script from your project root and verify the module file is in one of these paths.
+
+### `__name__ == "__main__"`
+
+A module can behave differently when executed directly vs imported:
+
+```python
+def main():
+    print("Run as script")
+
+if __name__ == "__main__":
+    main()
+```
+
+- Run directly: `python support.py` -> `main()` runs
+- Import from another file: `main()` does not run automatically
+
+### Packages
+
+A package groups related modules inside a directory.
+
+Example structure:
+
+```text
+project/
+  app.py
+  helpers/
+    __init__.py
+    math_utils.py
+```
+
+Use:
+
+```python
+from helpers.math_utils import add
+```
+
+`__init__.py` marks the folder as a package and helps tools resolve imports consistently.
+
+### Inspecting Module Members
+
+Use `dir()` to inspect names exported by a module:
+
+```python
+import math
+print(dir(math))
+```
+
+### Common Errors
+
+- `ModuleNotFoundError`: wrong working directory or module path.
+- `ImportError`: circular import or symbol not exported.
+- Name conflict: your file has the same name as a standard/third-party module (for example `random.py`).
diff --git a/content/en/tutorial/intermediate/23-python-file-io.md b/content/en/tutorial/intermediate/23-python-file-io.md
new file mode 100644
index 0000000..6bb371c
--- /dev/null
+++ b/content/en/tutorial/intermediate/23-python-file-io.md
@@ -0,0 +1,78 @@
+---
+layout: tutorial.njk
+lang: en
+title: Python File I/O
+order: 23
+permalink: /en/tutorial/python-file-io/
+---
+
+<img src="/img/tutorial/19-dasar-dasar-io-python.webp" alt="Python File I/O" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+This section covers basic input/output operations in Python 3.
+
+### Output with `print()`
+
+`print()` converts values to text and writes to standard output.
+
+```python
+print("Python is a great programming language")
+print("A", "B", "C", sep="-")
+```
+
+### Keyboard Input with `input()`
+
+In Python 3, `input()` always returns a string.
+
+```python
+name = input("Your name: ")
+age = int(input("Your age: "))
+print(f"Hello {name}, next year you are {age + 1}")
+```
+
+### Reading Files
+
+Use `with` to ensure files are closed automatically.
+
+```python
+with open("notes.txt", "r", encoding="utf-8") as f:
+    content = f.read()
+    print(content)
+```
+
+Common read methods:
+
+- `read()` -> all content
+- `readline()` -> one line
+- `readlines()` -> list of lines
+
+### Writing Files
+
+```python
+with open("notes.txt", "w", encoding="utf-8") as f:
+    f.write("learn python\n")
+    f.write("File I/O is important\n")
+```
+
+File modes:
+
+- `"r"` read
+- `"w"` write (overwrite)
+- `"a"` append
+- `"x"` create new file
+- Add `"b"` for binary mode (`"rb"`, `"wb"`)
+
+### Safe JSON I/O Example
+
+```python
+import json
+
+data = {"name": "Alice", "level": "intermediate"}
+
+with open("user.json", "w", encoding="utf-8") as f:
+    json.dump(data, f, ensure_ascii=False, indent=2)
+
+with open("user.json", "r", encoding="utf-8") as f:
+    loaded = json.load(f)
+
+print(loaded)
+```
diff --git a/content/en/tutorial/intermediate/24-python-exceptions.md b/content/en/tutorial/intermediate/24-python-exceptions.md
new file mode 100644
index 0000000..db474af
--- /dev/null
+++ b/content/en/tutorial/intermediate/24-python-exceptions.md
@@ -0,0 +1,115 @@
+---
+layout: tutorial.njk
+lang: en
+title: Python Exception
+order: 24
+permalink: /en/tutorial/python-exceptions/
+---
+
+<img src="/img/tutorial/20-belajar-exception-python.webp" alt="Python Exceptions" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Exceptions are runtime errors that interrupt normal program flow. Python provides `try`/`except` to handle them safely.
+Well-handled exceptions make programs more robust and produce clearer error messages for users.
+
+### Basic Exception Handling
+
+```python
+try:
+    value = int(input("Enter a number: "))
+    print(10 / value)
+except ValueError:
+    print("Input must be a number")
+except ZeroDivisionError:
+    print("Cannot divide by zero")
+```
+
+Catch specific exceptions whenever possible. Avoid broad `except Exception:` unless you re-raise or log with clear context.
+
+### `else` and `finally`
+
+- `else` runs when no exception occurs.
+- `finally` always runs (cleanup code).
+
+```python
+f = None
+
+try:
+    f = open("data.txt", "r", encoding="utf-8")
+except FileNotFoundError:
+    print("File not found")
+else:
+    print(f.read())
+finally:
+    if f is not None:
+        f.close()
+```
+
+For file handling, `with open(...)` is usually simpler. Use `finally` when you must guarantee cleanup for resources that are not managed by `with`.
+
+### Raising Exceptions
+
+Use `raise` when input/state is invalid:
+
+```python
+def set_age(age):
+    if age < 0:
+        raise ValueError("Age cannot be negative")
+    return age
+```
+
+Raising early keeps invalid data from flowing deeper into your program.
+
+### Custom Exceptions
+
+```python
+class InvalidUsernameError(Exception):
+    pass
+
+
+def register(username):
+    if len(username) < 3:
+        raise InvalidUsernameError("Username must be at least 3 characters")
+```
+
+Custom exceptions make error handling clearer in larger applications, especially when different failure cases need different responses.
+
+### Common Built-in Exceptions
+
+| Name | Typical case |
+| --------------------- | ------------------------------------------------------ |
+| `Exception` | Base class for most exceptions |
+| `ValueError` | Correct type, wrong value |
+| `TypeError` | Wrong type for operation/function |
+| `KeyError` | Key not found in dictionary |
+| `IndexError` | Index out of range |
+| `FileNotFoundError` | File path not found |
+| `PermissionError` | No permission to access file/resource |
+| `OSError` | OS-level errors |
+| `ImportError` / `ModuleNotFoundError` | Import failure |
+| `AssertionError` | `assert` statement failed |
+| `StopIteration` | Iterator exhausted |
+| `EOFError` | No more input available |
+
+### Assertions (`assert`)
+
+Assertions are useful for internal sanity checks while developing:
+
+```python
+def divide(a, b):
+    assert b != 0, "b must not be zero"
+    return a / b
+```
+
+Use assertions to catch programmer mistakes, not to validate user input. Assertions can be disabled with optimization flags (for example `python -O`).
+
+### Notes for Python 3
+
+- `IOError` and `EnvironmentError` are aliases of `OSError`.
+- `StandardError` no longer exists in Python 3.
+- For concurrent code, Python also supports `ExceptionGroup` and `except*`.
+
+### Common Errors
+
+- Using bare `except:` and accidentally hiding real bugs.
+- Catching the wrong exception type (handler never runs).
+- Swallowing errors without logging, which makes debugging difficult.
diff --git a/content/en/tutorial/intermediate/25-python-class-objects.md b/content/en/tutorial/intermediate/25-python-class-objects.md
new file mode 100644
index 0000000..25c64f7
--- /dev/null
+++ b/content/en/tutorial/intermediate/25-python-class-objects.md
@@ -0,0 +1,169 @@
+---
+layout: tutorial.njk
+lang: en
+title: Python Object & Class
+order: 25
+permalink: /en/tutorial/python-class-objects/
+---
+
+<img src="/img/tutorial/21-belajar-oop-object-class-python.webp" alt="Python OOP - Object and Class" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Classes let you model data and behavior together in one reusable structure.
+
+### OOP Quick Glossary
+
+| Term | Meaning |
+| ---- | ------- |
+| Class | Blueprint that defines attributes and methods |
+| Object / Instance | Concrete value created from a class |
+| Attribute | Data stored on an object or class |
+| Class attribute | Variable shared by all instances of a class |
+| Instance attribute | Variable unique to each object (`self.x`) |
+| Method | Function defined inside a class |
+| Instantiation | Process of creating an object from a class |
+| Inheritance | Building a new class from an existing class |
+| Encapsulation | Grouping data and behavior; controlling access by convention |
+| Polymorphism | Same interface, different behavior across classes |
+| Operator overloading | Defining custom behavior for operators like `+`, `==`, `len()` via special methods |
+
+### Basic Class and Object
+
+```python
+class Employee:
+    company = "PythonCompany"  # class attribute
+
+    def __init__(self, name, salary):
+        self.name = name        # instance attribute
+        self.salary = salary
+
+    def display(self):
+        print(f"Name: {self.name}, Salary: {self.salary}")
+```
+
+Create objects:
+
+```python
+emp1 = Employee("Zara", 2000)
+emp2 = Employee("Manni", 5000)
+
+emp1.display()
+emp2.display()
+print(Employee.company)
+```
+
+### Instance vs Class Attributes
+
+- **Instance attributes** belong to each object (`self.name`).
+- **Class attributes** are shared by all instances (`company`).
+
+### Method Types
+
+```python
+class Example:
+    total = 0
+
+    def __init__(self, value):
+        self.value = value
+        Example.total += 1
+
+    def instance_method(self):
+        return self.value
+
+    @classmethod
+    def class_method(cls):
+        return cls.total
+
+    @staticmethod
+    def static_method(a, b):
+        return a + b
+```
+
+### Inheritance
+
+```python
+class Person:
+    def __init__(self, name):
+        self.name = name
+
+    def greet(self):
+        print(f"Hello, I am {self.name}")
+
+
+class Developer(Person):
+    def __init__(self, name, language):
+        super().__init__(name)
+        self.language = language
+
+    def greet(self):
+        print(f"Hello, I am {self.name} and I code in {self.language}")
+```
+
+### Encapsulation Convention
+
+Python does not enforce strict private attributes, but conventions are used:
+
+- `_name` -> internal use by convention
+- `__name` -> name-mangled attribute
+
+### `@dataclass` for Data-Focused Classes
+
+```python
+from dataclasses import dataclass
+
+
+@dataclass
+class Product:
+    name: str
+    price: float
+```
+
+`@dataclass` reduces boilerplate for classes that mostly store data.
+
+### Operator Overloading
+
+Special (dunder) methods let you define how operators work with your objects:
+
+```python
+class Vector:
+    def __init__(self, x, y):
+        self.x = x
+        self.y = y
+
+    def __add__(self, other):
+        return Vector(self.x + other.x, self.y + other.y)
+
+    def __repr__(self):
+        return f"Vector({self.x}, {self.y})"
+
+
+v1 = Vector(1, 2)
+v2 = Vector(3, 4)
+print(v1 + v2)  # Vector(4, 6)
+```
+
+### Complete Runnable Example
+
+```python
+class Employee:
+    emp_count = 0
+
+    def __init__(self, name: str, salary: float):
+        self.name = name
+        self.salary = salary
+        Employee.emp_count += 1
+
+    def display(self):
+        print(f"Name: {self.name}, Salary: {self.salary}")
+
+    @classmethod
+    def total(cls):
+        return cls.emp_count
+
+
+emp1 = Employee("Zara", 2000)
+emp2 = Employee("Manni", 5000)
+
+emp1.display()
+emp2.display()
+print(f"Total employees: {Employee.total()}")
+```
diff --git a/content/en/tutorial/intermediate/26-python-database-access.md b/content/en/tutorial/intermediate/26-python-database-access.md
new file mode 100644
index 0000000..00b2870
--- /dev/null
+++ b/content/en/tutorial/intermediate/26-python-database-access.md
@@ -0,0 +1,164 @@
+---
+layout: tutorial.njk
+lang: en
+title: Python Database Access
+order: 26
+permalink: /en/tutorial/python-database-access/
+---
+
+<img src="/img/tutorial/22-cara-akses-database-mysql-sql-postgres-python.webp" alt="Python Database Access - MySQL, SQL, Postgres" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Python database adapters generally follow the DB-API 2.0 specification. This gives a consistent programming model across databases: connect, create cursor, execute SQL, fetch rows, and commit/rollback.
+
+Common databases used with Python include:
+
+- SQLite (built in)
+- PostgreSQL
+- MySQL/MariaDB
+- Microsoft SQL Server
+- Oracle
+
+### What is PyMySQL?
+
+[PyMySQL](https://pymysql.readthedocs.io/en/latest/) is a pure-Python MySQL client implementing DB-API 2.0.
+If you work with SQLite, Python already includes `sqlite3` in the standard library.
+
+### Install PyMySQL
+
+```bash
+python -m pip install pymysql
+```
+
+### Connection Setup (Used in Next Examples)
+
+Set your database credentials once, then reuse `get_connection()` in each section.
+
+```python
+import pymysql
+
+DB_CONFIG = {
+    "host": "localhost",
+    "user": "testuser",
+    "password": "test123",
+    "database": "TESTDB",
+    "charset": "utf8mb4",
+}
+
+def get_connection():
+    return pymysql.connect(**DB_CONFIG)
+```
+
+### Basic Connection Example
+
+```python
+with get_connection() as connection:
+    with connection.cursor() as cursor:
+        cursor.execute("SELECT VERSION()")
+        version = cursor.fetchone()
+        print("Database version:", version)
+```
+
+### Create Table
+
+Create schema before doing insert/read/update/delete:
+
+```python
+create_sql = """
+CREATE TABLE IF NOT EXISTS employee (
+    id INT PRIMARY KEY AUTO_INCREMENT,
+    first_name VARCHAR(50) NOT NULL,
+    last_name VARCHAR(50),
+    age INT,
+    sex CHAR(1),
+    income DECIMAL(10, 2)
+)
+"""
+
+with get_connection() as connection:
+    with connection.cursor() as cursor:
+        cursor.execute(create_sql)
+    connection.commit()
+```
+
+### Insert Data (Parameterized Query)
+
+Use placeholders to avoid SQL injection.
+
+```python
+insert_sql = """
+INSERT INTO employee (first_name, last_name, age, sex, income)
+VALUES (%s, %s, %s, %s, %s)
+"""
+
+with get_connection() as connection:
+    with connection.cursor() as cursor:
+        cursor.execute(insert_sql, ("Mac", "Mohan", 20, "M", 2000.00))
+    connection.commit()
+```
+
+### Read Data
+
+Use `fetchall()` for many rows or `fetchone()` for a single row:
+
+```python
+select_sql = "SELECT first_name, last_name, age, sex, income FROM employee WHERE income > %s"
+
+with get_connection() as connection:
+    with connection.cursor() as cursor:
+        cursor.execute(select_sql, (1000,))
+        rows = cursor.fetchall()
+
+for row in rows:
+    print(row)
+```
+
+### Update Data
+
+```python
+update_sql = "UPDATE employee SET age = age + 1 WHERE sex = %s"
+
+with get_connection() as connection:
+    with connection.cursor() as cursor:
+        cursor.execute(update_sql, ("M",))
+    connection.commit()
+```
+
+### Delete Data
+
+```python
+delete_sql = "DELETE FROM employee WHERE age > %s"
+
+with get_connection() as connection:
+    with connection.cursor() as cursor:
+        cursor.execute(delete_sql, (20,))
+    connection.commit()
+```
+
+### Transaction Notes
+
+- `connection.commit()` saves changes.
+- `connection.rollback()` cancels uncommitted changes.
+- Always close connections/cursors (or use context managers as shown).
+
+For multi-step writes, rollback on failure:
+
+```python
+with get_connection() as connection:
+    try:
+        with connection.cursor() as cursor:
+            cursor.execute("UPDATE employee SET income = income + %s", (100,))
+            cursor.execute("UPDATE employee SET income = income - %s WHERE id = %s", (100, 1))
+        connection.commit()
+    except Exception:
+        connection.rollback()
+        raise
+```
+
+### Common Errors
+
+- `Access denied` from wrong username/password or host.
+- `Unknown database` or `Table doesn't exist` when setup SQL has not been run yet.
+- Forgetting `commit()` after `INSERT`/`UPDATE`/`DELETE`, so changes appear to "not save".
+- Building SQL with string formatting instead of placeholders (`%s`), which risks SQL injection.
+
+For complete language and library references, see [Python documentation](https://docs.python.org/3/).
diff --git a/content/en/tutorial/intermediate/27-python-networking.md b/content/en/tutorial/intermediate/27-python-networking.md
new file mode 100644
index 0000000..428a6e6
--- /dev/null
+++ b/content/en/tutorial/intermediate/27-python-networking.md
@@ -0,0 +1,118 @@
+---
+layout: tutorial.njk
+lang: en
+title: Python Networking
+order: 27
+permalink: /en/tutorial/python-networking/
+---
+
+<img src="/img/tutorial/23-tutorial-networking-python.webp" alt="Python Networking Tutorial" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Python provides low-level and high-level networking modules.
+
+- Low-level: `socket` for TCP/UDP clients and servers
+- High-level: `urllib`, `http.client`, `smtplib`, `imaplib`, `ftplib`, and others
+
+Start with low-level sockets to understand the basics, then use higher-level libraries for production applications.
+
+### What is Socket?
+
+A socket is an endpoint for two-way communication between programs.
+Sockets can communicate between processes on the same machine or across different machines on a network.
+
+### Socket Module
+
+Create a socket with:
+
+`socket.socket(family=AF_INET, type=SOCK_STREAM)`
+
+- `AF_INET` for IPv4
+- `SOCK_STREAM` for TCP
+- `SOCK_DGRAM` for UDP
+
+`SOCK_STREAM` (TCP) is reliable and ordered. `SOCK_DGRAM` (UDP) is faster but does not guarantee delivery.
+
+### Server Socket Methods
+
+| Method | Explanation |
+| ---------- | ----------------------------------------------------------------------------------------- |
+| `bind()` | Bind address `(host, port)` to socket |
+| `listen()` | Start listening for incoming TCP connections |
+| `accept()` | Accept incoming connection and return `(conn, addr)` |
+
+### Client Socket Methods
+
+| Method | Explanation |
+| ----------- | ----------------------------------------------------- |
+| `connect()` | Connect to TCP server |
+
+### General Socket Methods
+
+| Method | Explanation |
+| -------------------- | --------------------------------- |
+| `recv()` | Receive bytes |
+| `sendall()` | Send all bytes |
+| `recvfrom()` | Receive UDP packet |
+| `sendto()` | Send UDP packet |
+| `close()` | Close socket |
+
+### Simple TCP Server
+
+This minimal server accepts one client connection, sends a response once, and exits.
+
+```python
+import socket
+
+HOST = "127.0.0.1"
+PORT = 12345
+
+with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
+    s.bind((HOST, PORT))
+    s.listen()
+    print(f"Server listening on {HOST}:{PORT}")
+
+    conn, addr = s.accept()
+    with conn:
+        print("Connected by", addr)
+        conn.sendall(b"Thank you for connecting")
+```
+
+### Simple TCP Client
+
+```python
+import socket
+
+HOST = "127.0.0.1"
+PORT = 12345
+
+with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
+    s.settimeout(5)  # seconds
+    s.connect((HOST, PORT))
+    data = s.recv(1024)
+
+print(data.decode("utf-8"))
+```
+
+Run server first, then run client from another terminal.
+
+### Common Python Internet Modules
+
+| Protocol | Default Port | Python Module |
+| -------- | ------------ | ----------------------------- |
+| HTTP | 80 | `urllib.request`, `http.client` |
+| HTTPS | 443 | `urllib.request`, `http.client` |
+| FTP | 21 | `ftplib` |
+| SMTP | 25 / 587 | `smtplib` |
+| POP3 | 110 | `poplib` |
+| IMAP4 | 143 | `imaplib` |
+| NNTP | 119 | `nntplib` |
+| XML-RPC | (over HTTP) | `xmlrpc.client` |
+
+For production systems, prefer higher-level libraries when appropriate and always add timeout handling.
+
+### Common Errors
+
+- `ConnectionRefusedError`: server is not running or wrong host/port.
+- Client hangs on `recv()`: no timeout configured and server sends no data.
+- `OSError: [Errno 98] Address already in use`: previous process still holds the port.
+- Mixing `str` and `bytes`: sockets send/receive bytes, so encode/decode explicitly.
diff --git a/tutorial/intermediate/28-python-web-development.md b/content/en/tutorial/intermediate/28-python-web-development.md
similarity index 98%
rename from tutorial/intermediate/28-python-web-development.md
rename to content/en/tutorial/intermediate/28-python-web-development.md
index 2a4b0aa..5ca0c1e 100644
--- a/tutorial/intermediate/28-python-web-development.md
+++ b/content/en/tutorial/intermediate/28-python-web-development.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Web Development
 order: 28
-permalink: /tutorial/python-web-development/
+permalink: /en/tutorial/python-web-development/
 ---
 
 <img src="/img/tutorial/24-pengembangan-web-python.webp" alt="Python Web Development" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
diff --git a/tutorial/intermediate/29-python-regex.md b/content/en/tutorial/intermediate/29-python-regex.md
similarity index 97%
rename from tutorial/intermediate/29-python-regex.md
rename to content/en/tutorial/intermediate/29-python-regex.md
index ac3a3b3..3a290c7 100644
--- a/tutorial/intermediate/29-python-regex.md
+++ b/content/en/tutorial/intermediate/29-python-regex.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Python Regular Expressions (RegEx)
 order: 29
-permalink: /tutorial/python-regex/
+permalink: /en/tutorial/python-regex/
 ---
 
 <img src="/img/tutorial/25-belajar-regex-pencarian-teks-python.webp" alt="Python Regular Expressions" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
@@ -74,7 +75,7 @@ The `split()` function returns a list where the string has been split at each ma
 import re
 
 txt = "The rain in Spain"
-x = re.split("\s", txt)
+x = re.split(r"\s", txt)
 print(x)
 ```
 
@@ -84,7 +85,7 @@ You can control the number of occurrences by specifying the `maxsplit` parameter
 import re
 
 txt = "The rain in Spain"
-x = re.split("\s", txt, 1)
+x = re.split(r"\s", txt, 1)
 print(x)
 ```
 
@@ -96,7 +97,7 @@ The `sub()` function replaces the matches with the text of your choice.
 import re
 
 txt = "The rain in Spain"
-x = re.sub("\s", "9", txt)
+x = re.sub(r"\s", "9", txt)
 print(x)
 ```
 
@@ -106,7 +107,7 @@ You can control the number of replacements by specifying the `count` parameter:
 import re
 
 txt = "The rain in Spain"
-x = re.sub("\s", "9", txt, 2)
+x = re.sub(r"\s", "9", txt, 2)
 print(x)
 ```
 
diff --git a/tutorial/intermediate/30-python-json.md b/content/en/tutorial/intermediate/30-python-json.md
similarity index 97%
rename from tutorial/intermediate/30-python-json.md
rename to content/en/tutorial/intermediate/30-python-json.md
index 275e292..1080cfc 100644
--- a/tutorial/intermediate/30-python-json.md
+++ b/content/en/tutorial/intermediate/30-python-json.md
@@ -1,8 +1,9 @@
 ---
 layout: tutorial.njk
+lang: en
 title: Working with JSON Data in Python
 order: 30
-permalink: /tutorial/python-json/
+permalink: /en/tutorial/python-json/
 ---
 
 <img src="/img/tutorial/26-belajar-json-python.webp" alt="Python JSON" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
@@ -70,9 +71,9 @@ You can convert Python objects of the following types, into JSON strings:
 * string
 * int
 * float
-* True
-* False
-* None
+* `True`
+* `False`
+* `None`
 
 ### Format the Result
 
diff --git a/content/en/tutorial/intermediate/31-python-virtual-environment.md b/content/en/tutorial/intermediate/31-python-virtual-environment.md
new file mode 100644
index 0000000..d2c7031
--- /dev/null
+++ b/content/en/tutorial/intermediate/31-python-virtual-environment.md
@@ -0,0 +1,113 @@
+---
+layout: tutorial.njk
+lang: en
+title: Python Virtual Environments (venv)
+order: 31
+permalink: /en/tutorial/python-virtual-environment/
+---
+
+<img src="/img/tutorial/27-tutorial-virtual-environtment-python.webp" alt="Python Virtual Environment" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+A virtual environment is an isolated Python environment for one project. It prevents dependency conflicts between projects.
+Use one environment per project so each project can keep its own package versions.
+
+### Why Virtual Environments Matter
+
+In team and production settings, virtual environments are a standard requirement:
+
+- **Reproducibility**: teammates and CI servers can recreate the exact same dependency set from `requirements.txt`.
+- **Isolation**: installing or upgrading a package for one project cannot break another project on the same machine.
+- **Deployment**: when shipping to a production server, you provide a clear list of packages instead of relying on whatever happens to be installed globally.
+
+Without virtual environments, dependency version conflicts between projects become difficult to debug and resolve.
+
+### Using Built-in Module: `venv`
+
+Python includes `venv` in the standard library.
+This is the default and most portable approach across machines.
+
+#### 1. Create a Virtual Environment
+
+```bash
+# Windows
+py -m venv .venv
+python -m venv .venv
+
+# macOS / Linux
+python3 -m venv .venv
+```
+
+#### 2. Activate the Environment
+
+```bash
+# Windows (PowerShell)
+.venv\Scripts\Activate.ps1
+
+# Windows (cmd)
+.venv\Scripts\activate.bat
+
+# macOS / Linux
+source .venv/bin/activate
+```
+
+After activation, your shell usually shows `(.venv)`.
+You can verify the active interpreter with:
+
+```bash
+python -c "import sys; print(sys.executable)"
+```
+
+#### 3. Install Packages Inside the Environment
+
+```bash
+python -m pip install requests
+python -m pip list
+```
+
+Always install dependencies after activation, so packages go into `.venv` instead of the global Python installation.
+
+#### 4. Deactivate
+
+```bash
+deactivate
+```
+
+You can reactivate anytime with the activation command from step 2.
+
+### Save and Reuse Dependencies
+
+```bash
+python -m pip freeze > requirements.txt
+python -m pip install -r requirements.txt
+```
+
+This keeps installs reproducible across machines.
+Commit `requirements.txt` to version control so teammates can install the same dependency set.
+
+### Optional Modern Tool: `uv`
+
+`uv` can manage environments and packages with fast performance.
+
+Install (one-time):
+
+```bash
+python -m pip install uv
+# or on Windows:
+py -m pip install uv
+```
+
+Learn more: [uv documentation](https://github.com/astral-sh/uv)
+
+```bash
+uv venv
+uv pip install requests
+```
+
+`venv` remains the official standard-library approach, and `uv` is an optional productivity tool.
+
+### Common Errors
+
+- Installing packages before activation, then imports fail inside project.
+- Using `pip` from a different interpreter than `python` (prefer `python -m pip`).
+- Activation script blocked on PowerShell due to execution policy.
+- Corrupted environment after major Python upgrade; recreate by deleting `.venv` and running `python -m venv .venv` again.
diff --git a/content/en/tutorial/intermediate/32-python-pip-package.md b/content/en/tutorial/intermediate/32-python-pip-package.md
new file mode 100644
index 0000000..7bb8151
--- /dev/null
+++ b/content/en/tutorial/intermediate/32-python-pip-package.md
@@ -0,0 +1,110 @@
+---
+layout: tutorial.njk
+lang: en
+title: Pip & Package Management Python
+order: 32
+permalink: /en/tutorial/python-pip-package/
+---
+
+<img src="/img/tutorial/28-cara-pip-di-python.webp" alt="Python Pip and Packages" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+`pip` is the standard package manager for Python. You use it to install, upgrade, and remove third-party libraries.
+In day-to-day work, `pip` is used together with `venv` so project dependencies stay isolated and reproducible.
+
+### What is a Package?
+
+A package is a distributable set of Python modules and metadata, usually published on [PyPI](https://pypi.org/).
+
+### Check if `pip` is Installed
+
+```bash
+# Windows (py launcher)
+py -m pip --version
+
+python -m pip --version
+# or
+python3 -m pip --version
+```
+
+Using `python -m pip` is recommended because it targets the same Python interpreter you run.
+Run these commands inside your project virtual environment whenever possible.
+
+### Installing Packages
+
+```bash
+python -m pip install requests
+```
+
+Install a specific version when you need stable behavior:
+
+```bash
+python -m pip install requests==2.32.3
+```
+
+### Upgrading Packages
+
+```bash
+python -m pip install --upgrade requests
+```
+
+You can also install optional extras:
+
+```bash
+python -m pip install "requests[socks]"
+```
+
+### Using Installed Packages
+
+```python
+import requests
+
+response = requests.get("https://belajarpython.com", timeout=10)
+print(response.status_code)
+```
+
+### Viewing Installed Packages
+
+```bash
+python -m pip list
+```
+
+### Removing Packages
+
+```bash
+python -m pip uninstall requests
+```
+
+### Searching and Inspecting Packages
+
+- Search at [PyPI](https://pypi.org/)
+- Inspect package details:
+
+```bash
+python -m pip show requests
+```
+
+### Reproducible Dependencies
+
+```bash
+python -m pip freeze > requirements.txt
+python -m pip install -r requirements.txt
+```
+
+`pip freeze` captures exact installed versions, which helps avoid "works on my machine" issues.
+
+### Common Errors
+
+- Installing globally instead of in `.venv`, causing project mismatch later.
+- Running `pip` from a different Python installation than the one used to run the app.
+- Version conflicts between packages (resolve by pinning compatible versions).
+- Missing quotes for extras in some shells (`"package[extra]"`).
+
+### What Now?
+
+After learning basic packaging workflow, continue with:
+
+- Python Standard Library docs: [https://docs.python.org/3.13/library/](https://docs.python.org/3.13/library/)
+- Python Language Reference: [https://docs.python.org/3.13/reference/](https://docs.python.org/3.13/reference/)
+- Official Python Tutorial index: [https://docs.python.org/3.13/tutorial/](https://docs.python.org/3.13/tutorial/)
+
+Keep practicing by building small projects, isolating each project with `venv`, and pinning dependencies with `requirements.txt`.
diff --git a/content/uz/index.md b/content/uz/index.md
new file mode 100644
index 0000000..72caa2e
--- /dev/null
+++ b/content/uz/index.md
@@ -0,0 +1,8 @@
+---
+layout: home.njk
+lang: uz
+title: "Python dasturlash darslari: Boshlang'ichdan ilg'orgacha"
+description: "Pythonni bepul o'rganing: to'liq darslar. Data Science, Machine Learning, AI va veb dasturlash uchun Python qo'llanmasi: boshlang'ichdan ilg'orgacha. 2015 yildan beri 100+ universitet va kompaniya bizga ishonadi."
+permalink: /uz/
+isHomepage: true
+---
diff --git a/content/uz/tutorial/advanced/33-python-type-hints.md b/content/uz/tutorial/advanced/33-python-type-hints.md
new file mode 100644
index 0000000..e70fc15
--- /dev/null
+++ b/content/uz/tutorial/advanced/33-python-type-hints.md
@@ -0,0 +1,324 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python type hint'lar (type annotations)
+order: 33
+permalink: /uz/tutorial/python-type-hints/
+---
+
+Type hints (type annotations) - Python'dagi imkoniyat bo'lib, o'zgaruvchilar, funksiya parametrlar va return qiymatlar uchun kutilayotgan data turini ko'rsatishga yordam beradi. Python 3.5 da kiritilgan type hint'lar zamonaviy Python development'da tobora muhim bo'lib boryapti.
+
+### Nega type hint ishlatish kerak?
+
+Type hint'lar bir nechta foyda beradi:
+
+- **Yaxshiroq dokumentatsiya** - kod o'zi "hujjat" bo'lib qoladi
+- **Xatoni erta topish** - IDE va vositalar runtime'dan oldin bug'larni topishi mumkin
+- **Aniqroq autocomplete** - IDE aniqroq tavsiyalar beradi
+- **Maintainability** - boshqa dasturchilar uchun tushunish osonroq bo'ladi
+- **Xavfsiz refactoring** - kod o'zgarishlarini tekshirish osonlashadi
+
+**Muhim:** Python'da type hint'lar ixtiyoriy (optional) va runtime'ga ta'sir qilmaydi. Python baribir dinamik typed tildir.
+
+### Asosiy sintaksis
+
+```python
+# O'zgaruvchi annotatsiyasi
+name: str = "Bob"
+age: int = 25
+height: float = 175.5
+active: bool = True
+
+# Funksiya parametri va qaytarish turi annotatsiyasi
+def greet(name: str) -> str:
+    return f"Hello, {name}!"
+
+def add(a: int, b: int) -> int:
+    return a + b
+
+# Qaytarish qiymatisiz funksiya
+def print_info(message: str) -> None:
+    print(message)
+
+print_info("Type hints are useful!")
+```
+
+### Asosiy data turlari
+
+```python
+# Asosiy turlar
+x: int = 10
+y: float = 3.14
+z: str = "hello"
+flag: bool = True
+data: bytes = b"hello"
+
+# None turi
+result: None = None
+```
+
+### Collection turlari
+
+Collection turlari uchun Python < 3.9 da `typing` moduli ishlatiladi, Python 3.9+ da esa built-in generic'lar (`list[int]`) ishlatish mumkin:
+
+```python
+# Python 3.9+ (tavsiya etiladi)
+numbers: list[int] = [1, 2, 3]
+name_age: dict[str, int] = {"Alice": 25, "Bob": 30}
+coordinates: tuple[float, float] = (3.14, 2.71)
+unique: set[str] = {"apple", "orange"}
+
+# Python 3.5 - 3.8 (typing ishlating)
+from typing import List, Dict, Tuple, Set
+
+numbers: List[int] = [1, 2, 3]
+name_age: Dict[str, int] = {"Alice": 25}
+coordinates: Tuple[float, float] = (3.14, 2.71)
+unique: Set[str] = {"apple", "orange"}
+```
+
+### Optional va Union
+
+`None` bo'lishi mumkin bo'lgan yoki bir nechta turdan biri bo'lishi mumkin bo'lgan qiymatlar uchun:
+
+```python
+from typing import Optional, Union
+
+# Optional - None yoki aniq bir tur bo'lishi mumkin
+def find_user(id: int) -> Optional[str]:
+    if id == 1:
+        return "Alice"
+    return None
+
+# Union - bir nechta turdan biri bo'lishi mumkin
+def process(data: Union[str, int]) -> str:
+    return str(data)
+
+# Python 3.10+ sintaksisi (tavsiya etiladi)
+def find_user(id: int) -> str | None:
+    if id == 1:
+        return "Alice"
+    return None
+
+def process(data: str | int) -> str:
+    return str(data)
+```
+
+### Callable (funksiyani parametr sifatida olish)
+
+```python
+from typing import Callable
+
+# Boshqa funksiyani parametr sifatida qabul qiladigan funksiya
+def apply_twice(func: Callable[[int], int], value: int) -> int:
+    return func(func(value))
+
+def double(x: int) -> int:
+    return x * 2
+
+result = apply_twice(double, 5)  # 20
+
+# Ko'p argumentli Callable
+def operation(func: Callable[[int, int], int], a: int, b: int) -> int:
+    return func(a, b)
+```
+
+### Any turi
+
+Tur "istalgan narsa bo'lishi mumkin" bo'lsa:
+
+```python
+from typing import Any
+
+def process_anything(data: Any) -> Any:
+    return data
+```
+
+### Type alias'lar
+
+Murakkab turlar uchun alias yaratish:
+
+```python
+from typing import TypeAlias
+
+# Tur taxallusi
+UserId: TypeAlias = int
+UserData: TypeAlias = dict[str, str | int]
+
+def get_user(user_id: UserId) -> UserData:
+    return {"name": "Alice", "age": 25}
+
+# Murakkab turlar uchun
+Matrix: TypeAlias = list[list[float]]
+
+def transpose(matrix: Matrix) -> Matrix:
+    return [[row[i] for row in matrix] for i in range(len(matrix[0]))]
+```
+
+### Generic turlar
+
+Turli turlar bilan ishlay oladigan funksiyalar uchun:
+
+```python
+from typing import TypeVar
+
+T = TypeVar('T')
+
+def first_element(items: list[T]) -> T:
+    return items[0]
+
+# Istalgan turdagi list bilan ishlatish mumkin
+number = first_element([1, 2, 3])        # int
+word = first_element(["a", "b", "c"])   # str
+```
+
+### Literal turlar
+
+Qiymat faqat aniq variantlardan biri bo'lishi kerak bo'lsa:
+
+```python
+from typing import Literal
+
+def set_status(status: Literal["active", "inactive", "pending"]) -> None:
+    print(f"Status: {status}")
+
+set_status("active")    # OK
+set_status("unknown")   # Type error(detected by type checker)
+
+# Cheklangan variantlar uchun foydali
+Mode = Literal["read", "write", "append"]
+
+def open_file(path: str, mode: Mode) -> None:
+    pass
+```
+
+### TypedDict
+
+Tuzilishi qat'iy bo'lgan dictionary'lar uchun:
+
+```python
+from typing import TypedDict
+
+class User(TypedDict):
+    name: str
+    age: int
+    email: str
+
+def create_user(data: User) -> None:
+    print(f"Creating user: {data['name']}")
+
+# Type checker to'g'riligini tekshiradi
+user: User = {
+    "name": "Alice",
+    "age": 25,
+    "email": "alice@example.com"
+}
+
+create_user(user)
+```
+
+### Class uchun annotation'lar
+
+```python
+class Student:
+    name: str
+    id: str
+    gpa: float
+    
+    def __init__(self, name: str, id: str) -> None:
+        self.name = name
+        self.id = id
+        self.gpa = 0.0
+    
+    def set_gpa(self, gpa: float) -> None:
+        self.gpa = gpa
+    
+    def get_info(self) -> str:
+        return f"{self.name} ({self.id}): GPA {self.gpa}"
+```
+
+### Type hint bilan `@dataclass`
+
+```python
+from dataclasses import dataclass
+
+@dataclass
+class Product:
+    name: str
+    price: float
+    stock: int = 0
+    
+    def total_value(self) -> float:
+        return self.price * self.stock
+
+product = Product("Laptop", 15000000, 10)
+print(product.total_value())  # 150000000
+```
+
+### Type checking uchun vositalar
+
+Type hint'lar runtime'da tekshirilmaydi. Buning uchun quyidagi vositalardan foydalaning:
+
+#### 1. mypy
+
+```bash
+pip install mypy
+mypy script.py
+```
+
+#### 2. pyright (VS Code Pylance)
+
+VS Code'da Pylance extension orqali allaqachon integratsiya qilingan.
+
+#### 3. pytype (Google)
+
+```bash
+pip install pytype
+pytype script.py
+```
+
+### To'liq misol
+
+```python
+from dataclasses import dataclass
+from typing import Optional
+
+@dataclass
+class Address:
+    street: str
+    city: str
+    zip_code: str
+
+@dataclass  
+class Employee:
+    name: str
+    email: str
+    salary: float
+    address: Optional[Address] = None
+    
+    def full_info(self) -> str:
+        info = f"{self.name} - {self.email}"
+        if self.address:
+            info += f" ({self.address.city})"
+        return info
+
+def calculate_total_salary(employee_list: list[Employee]) -> float:
+    return sum(k.salary for k in employee_list)
+
+def find_employee(
+    employee_list: list[Employee], 
+    name: str
+) -> Employee | None:
+    for k in employee_list:
+        if k.name.lower() == name.lower():
+            return k
+    return None
+
+# Foydalanish
+address = Address("5th Avenue", "New York", "12190")
+e1 = Employee("Alice", "alice@email.com", 10000000, address)
+e2 = Employee("Bob", "bob@email.com", 12000000)
+
+all_employees = [e1, e2]
+print(calculate_total_salary(all_employees))  # 22000000
+```
diff --git a/content/uz/tutorial/advanced/34-python-decorators.md b/content/uz/tutorial/advanced/34-python-decorators.md
new file mode 100644
index 0000000..6168e15
--- /dev/null
+++ b/content/uz/tutorial/advanced/34-python-decorators.md
@@ -0,0 +1,145 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python decorator'lar va closure'lar
+order: 34
+permalink: /uz/tutorial/python-decorators/
+---
+
+<img src="/img/tutorial/29-tutorial-decorators-closures-python.webp" alt="Python decorators va closures" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Decorator va Closure - Python'dagi ikki ta ilg'or tushuncha bo'lib, juda *kuchli*. Dastlab qo'rqinchli tuyulishi mumkin, lekin Django, Flask, FastAPI kabi mashhur frameworklarda ko'p "magic" aynan shu asosga qurilgan.
+
+Tasavvur qiling: sizda sovg'a (funksiya) bor. Siz uni chiroyli qog'ozga o'rab berasiz (decorator). Sovg'aning ichidagini o'zgartirmaysiz, lekin tashqaridan unga qo'shimcha xususiyat qo'shasiz. Decorator mohiyati ham shu: funksiya kodini o'zgartirmasdan, uning behavior'ini o'zgartirish.
+
+Decorator'ga o'tishdan oldin, avval **Closure** tushunchasini tushunib olaylik.
+
+### 1. Closures
+
+Closure - bu o'zi yaratilgan scope'dagi o'zgaruvchilarni "eslab qoladigan" funksiya. Ya'ni tashqi scope ishlashni tugatgan bo'lsa ham, closure o'sha qiymatlarni saqlab qoladi.
+
+#### Nested function tushunchasi
+Python'da funksiyalar ichida funksiya yaratish mumkin:
+
+```python
+def outer(x):
+    def inner(y):
+        return x + y
+    return inner
+```
+
+#### Closure yaratish
+Quyidagi misolga qarang:
+
+```python
+def multiplier_maker(n):
+    def multiplier(x):
+        return x * n
+    return multiplier
+
+# Closure yaratish
+times_three = multiplier_maker(3)
+times_five = multiplier_maker(5)
+
+print(times_three(10))  # Natija: 30
+print(times_five(10))  # Natija: 50
+```
+
+Bu yerda `multiplier_maker` ishlashni tugatgan bo'lsa ham, `times_three` funksiya `n = 3` qiymatini "eslab" qoladi. Bu - Closure.
+
+### 2. Decorators
+
+Decorator aslida funksiya qabul qilib, uning o'rniga boshqa funksiya (wrapper) qaytaradigan Closure.
+
+#### Oddiy decorator
+```python
+def my_decorator(func):
+    def wrapper():
+        print("Before function is called")
+        func()
+        print("After function is called")
+    return wrapper
+
+@my_decorator
+def say_hello():
+    print("Hello World!")
+
+say_hello()
+```
+
+#### Natija:
+```
+Before function is called
+Hello World!
+After function is called
+```
+
+### 3. Argumentli decorator (`*args`, `**kwargs`)
+
+Decorator har qanday parametrli funksiya bilan ishlashi uchun `*args` va `**kwargs` ishlating.
+
+```python
+def log_function(func):
+    def wrapper(*args, **kwargs):
+        print(f"Function call: {func.__name__}")
+        return func(*args, **kwargs)
+    return wrapper
+
+@log_function
+def add(a, b):
+    return a + b
+
+print(add(3, 5)) 
+# Natija:
+# Function call: add
+# 8
+```
+
+### 4. Real dunyo misollari
+
+#### Timer decorator (bajarilish vaqtini o'lchash)
+Performance optimizatsiya uchun foydali.
+
+```python
+import time
+from functools import wraps
+
+def timer(func):
+    @wraps(func)  # Best practice: preserve original function metadata
+    def wrapper(*args, **kwargs):
+        start = time.time()
+        result = func(*args, **kwargs)
+        end = time.time()
+        print(f"{func.__name__} ran for {end - start:.4f} seconds")
+        return result
+    return wrapper
+
+@timer
+def heavy_process():
+    time.sleep(1)
+    return "Done"
+
+heavy_process()
+```
+
+#### Authentication decorator (Flask misoli)
+Muayyan sahifalarga kirishdan oldin foydalanuvchi login bo'lganini tekshiradi.
+
+```python
+def login_required(func):
+    @wraps(func)
+    def wrapper(*args, **kwargs):
+        if not current_user.is_authenticated:
+            return redirect('/login')
+        return func(*args, **kwargs)
+    return wrapper
+
+@app.route('/dashboard')
+@login_required
+def dashboard():
+    return "Dashboard Page"
+```
+
+### Xulosa
+- **Closure**: tashqi scope holatini eslab qoladigan funksiya.
+- **Decorator**: closure yordamida funksiyaga tashqaridan behavior qo'shishning chiroyli usuli.
diff --git a/content/uz/tutorial/advanced/35-python-iterators-generators.md b/content/uz/tutorial/advanced/35-python-iterators-generators.md
new file mode 100644
index 0000000..6ca4589
--- /dev/null
+++ b/content/uz/tutorial/advanced/35-python-iterators-generators.md
@@ -0,0 +1,145 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python iterator'lar va generator'lar
+order: 35
+permalink: /uz/tutorial/python-iterators-generators/
+---
+
+<img src="/img/tutorial/30-belajar-iterators-generators-python.webp" alt="Python iterators va generators" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Python'da iterator va generator'lar xotirani tejash (memory efficiency) uchun juda muhim. Ular katta hajmdagi data (hatto cheksiz)ni ham hammasini bir yo'la RAM'ga yuklamasdan, bo'laklab qayta ishlashga imkon beradi.
+
+Qalin kitobni o'qish misolini oling: iterator sizga sahifa-sahifa o'qishga (faqat bitta sahifani xotirada ushlab turishga) yordam beradi. 1000 sahifani birdan yodlab olish shart emas.
+
+### 1. Iterators
+
+Iterator - bu sanab bo'ladigan qiymatlarni o'z ichiga oladigan obyekt. U ustidan iteratsiya qilish mumkin, ya'ni barcha qiymatlarni ketma-ket ko'rib chiqish mumkin.
+
+Texnik jihatdan, Python'da iterator - iterator protocol'ni implement qiladigan obyekt bo'lib, `__iter__()` va `__next__()` metodlariga ega bo'ladi.
+
+#### Iterator yaratish misoli
+Quyida 1 dan boshlab ma'lum limit'gacha son qaytaradigan oddiy iterator:
+
+```python
+class MyNumbers:
+    def __init__(self, limit):
+        self.limit = limit
+        self.num = 1
+
+    def __iter__(self):
+        return self
+
+    def __next__(self):
+        if self.num <= self.limit:
+            x = self.num
+            self.num += 1
+            return x
+        else:
+            raise StopIteration
+
+myclass = MyNumbers(3)
+myiter = iter(myclass)
+
+print(next(myiter)) # Natija: 1
+print(next(myiter)) # Natija: 2
+print(next(myiter)) # Natija: 3
+# print(next(myiter)) # StopIteration xatosi chiqaradi
+```
+
+`for` loop ishlatganda, Python `__iter__()` va `StopIteration` exception'ni avtomatik boshqaradi.
+
+```python
+for x in MyNumbers(3):
+    print(x)
+```
+
+### 2. Generators
+
+Generator - iterator yaratishning sodda usuli. `__iter__()` va `__next__()` bilan katta class yozish o'rniga, oddiy funksiya yozasiz va qiymat qaytaradigan joyda `yield` ishlatasiz.
+
+Har safar `yield` chaqirilganda funksiya "pauza" qiladi, o'zgaruvchilar holatini saqlab qoladi va keyingi chaqiriqda o'sha joydan davom etadi.
+
+#### Oddiy generator misoli
+```python
+def number_generator(limit):
+    num = 1
+    while num <= limit:
+        yield num
+        num += 1
+
+gen = number_generator(3)
+# Generator ham iterator!
+print(next(gen)) # 1
+print(next(gen)) # 2
+print(next(gen)) # 3
+```
+
+#### Generator afzalligi: xotirani tejash
+Masalan, 1 million sonni qayta ishlashingiz kerak.
+
+**List bilan (xotira yeydi):**
+```python
+def get_list():
+    result = []
+    for i in range(1000000):
+        result.append(i)
+    return result
+
+# Bu butun sonlar ro'yxati uchun taxminan 40MB+ xotira sarflaydi
+```
+
+**Generator bilan (xotirani tejaydi):**
+```python
+def get_generator():
+    for i in range(1000000):
+        yield i
+
+# Bu deyarli qo'shimcha xotira sarflamaydi, chunki sonlar so'ralganda bittadan hosil qilinadi.
+```
+
+### 3. Generator expression
+
+*List Comprehension* ga o'xshaydi, lekin `()` ishlatiladi. Natija list emas, generator obyekt bo'ladi.
+
+```python
+# List comprehension (to'liq list'ni xotirada yaratadi)
+squares_list = [x**2 for x in range(10)]
+print(squares_list) # [0, 1, 4, ..., 81]
+
+# Generator expression (lazy evaluation)
+squares_gen = (x**2 for x in range(10))
+print(squares_gen) # <generator object ...>
+
+# Tarkibini ko'rish uchun iteratsiya qilish kerak
+for i in squares_gen:
+    print(i, end=" ")
+```
+
+### 4. Amaliy holat: katta fayllarni o'qish
+Masalan, 10GB server log faylini qayta ishlash kerak bo'lsa:
+
+**Noto'g'ri (bunday qilmang):**
+```python
+def read_file_wrong(filename):
+    file = open(filename)
+    content = file.read() # Xavfli! Butun 10GB ni RAM ga yuklaydi.
+    return content.split("\n")
+```
+
+**To'g'ri (generator ishlating):**
+```python
+def read_file_right(filename):
+    for line in open(filename):
+        yield line
+
+# 10GB faylni xotira muammolarsiz o'qishimiz mumkin
+for line in read_file_right("server.log"):
+    if "ERROR" in line:
+        print(line)
+```
+
+### Xulosa
+- **Iterator**: iteratsiya qilinadigan obyekt (`__next__`).
+- **Generator**: qiymatlarni birma-bir (lazy) beradigan funksiya (`yield`).
+- Katta dataset yoki cheksiz data stream bilan ishlaganda generatorlardan foydalaning.
diff --git a/content/uz/tutorial/advanced/36-python-context-managers.md b/content/uz/tutorial/advanced/36-python-context-managers.md
new file mode 100644
index 0000000..8589eca
--- /dev/null
+++ b/content/uz/tutorial/advanced/36-python-context-managers.md
@@ -0,0 +1,126 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python context manager'lar
+order: 36
+permalink: /uz/tutorial/python-context-managers/
+---
+
+<img src="/img/tutorial/31-context-manager-python.webp" alt="Python context managers" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Context manager - resurslarni boshqarish uchun juda chiroyli Python imkoniyati. Ular fayl, network connection yoki database connection kabi resurslar to'g'ri ochilib-yopilishini kafolatlaydi, hatto jarayon o'rtasida xato bo'lsa ham.
+
+Siz ham fayl ochib, keyin yopishni unutganmisiz? Python'da buni `with` kalit so'zi bilan oson oldini olish mumkin.
+
+### 1. `with` kalit so'zi
+
+Context manager ishlatishning eng keng tarqalgan usuli - `with` statement.
+
+**Context manager'siz (leak xavfi):**
+```python
+file = open("data.txt", "w")
+try:
+    file.write("Hello World")
+finally:
+    file.close() # We must manually close it
+```
+
+**Context manager bilan (xavfsiz va toza):**
+```python
+with open("data.txt", "w") as file:
+    file.write("Hello World")
+
+# Fayl bu yerda avtomatik yopiladi, hatto yozish paytida xato bo'lsa ham.
+```
+
+### 2. O'zingiz context manager yaratish
+
+O'zingizning context manager'ingizni `__enter__` va `__exit__` metodlariga ega class orqali yaratishingiz mumkin.
+
+`__enter__`: `with` blokiga kirilganda ishlaydi. Qaytgan qiymat `as ...` dagi o'zgaruvchiga beriladi.
+`__exit__`: `with` blokidan chiqilganda ishlaydi (normal tugash yoki error).
+
+#### Misol: database connection manager (simulyatsiya)
+
+```python
+class ManageDB:
+    def __init__(self, db_name):
+        self.db_name = db_name
+
+    def __enter__(self):
+        print(f"--> Opening connection to {self.db_name}")
+        return self # This object becomes 'db' variable
+
+    def query(self, sql):
+        print(f"Executing query: {sql}")
+
+    def __exit__(self, exc_type, exc_value, traceback):
+        print(f"<-- Closing connection to {self.db_name}")
+        # Xato bo'lsa, exc_type None bo'lmaydi
+        if exc_type:
+            print(f"Xato yuz berdi: {exc_value}")
+        # Xatoni bostirishni xohlasangiz True qaytaring (dastur buzilmaydi)
+        # Xato ko'tarilishini xohlasangiz False qaytaring (standart)
+
+# Foydalanish
+with ManageDB("users_db") as db:
+    db.query("SELECT * FROM users")
+    
+# Natija:
+# --> Opening connection to users_db
+# Executing query: SELECT * FROM users
+# <-- Closing connection to users_db
+```
+
+### 3. `contextlib` dan foydalanish
+
+Python `contextlib` modulini beradi. U generator va `@contextmanager` decorator yordamida context manager yaratishni osonlashtiradi. Bu class yaratishdan ixchamroq.
+
+```python
+from contextlib import contextmanager
+
+@contextmanager
+def open_my_file(name):
+    try:
+        print("Opening file...")
+        f = open(name, "w")
+        yield f
+    finally:
+        print("Closing file...")
+        f.close()
+
+# Foydalanish
+with open_my_file("test.txt") as f:
+    f.write("Test 123")
+```
+
+`yield`dan oldingi kod `__enter__`, `finally` blokidagi kod esa `__exit__`.
+
+### 4. Amaliy misol: bajarilish vaqtini o'lchash
+
+Kod bloki qancha vaqt ishlaganini o'lchash uchun context manager yozish mumkin.
+
+```python
+import time
+from contextlib import contextmanager
+
+@contextmanager
+def timer():
+    start = time.time()
+    yield
+    end = time.time()
+    print(f"Execution time: {end - start:.4f} seconds")
+
+with timer():
+    # Og'ir jarayonni simulyatsiya qilish
+    time.sleep(1)
+    x = sum(range(1000000))
+
+# Natija: Execution time: 1.0xxx seconds
+```
+
+### Xulosa
+- Fayl yoki connection bilan ishlaganda imkon qadar `with` ishlating.
+- `__enter__` va `__exit__` bilan o'zingiz resurs boshqaruvini yarating.
+- Funksional va ixcham usul uchun `@contextmanager` dan foydalaning.
+
diff --git a/content/uz/tutorial/advanced/37-python-metaprogramming.md b/content/uz/tutorial/advanced/37-python-metaprogramming.md
new file mode 100644
index 0000000..9c2c95a
--- /dev/null
+++ b/content/uz/tutorial/advanced/37-python-metaprogramming.md
@@ -0,0 +1,124 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python metaprogramming
+order: 37
+permalink: /uz/tutorial/python-metaprogramming/
+---
+
+<img src="/img/tutorial/32-metaprogramming.webp" alt="Python metaprogramming" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Metaprogramming - bu dastur boshqa dasturlarni data sifatida ko'ra oladigan tushuncha. Ya'ni dastur boshqa kodni o'qishi, generatsiya qilishi, tahlil qilishi, o'zgartirishi, hatto ish paytida o'zini ham modifikatsiya qilishi mumkin. Qisqacha: **kod yozadigan kod**.
+
+Python'da bu juda chuqur va murakkab mavzu, lekin to'g'ri ishlatilsa juda *kuchli*. Python metaprogramming'ining asosiy elementlaridan biri - **metaclass**.
+
+### 1. Class nima?
+
+Metaclass'ni tushunishdan oldin eslab qoling: Python'da **class ham object**. Siz `class` yozganingizda, Python uni bajaradi va xotirada class object yaratadi.
+
+```python
+class ObjectCreator:
+    pass
+
+my_obj = ObjectCreator()
+print(my_obj) # Instance of ObjectCreator
+
+print(ObjectCreator) # ObjectCreator itself is an object!
+```
+
+Class object bo'lgani uchun:
+- Uni o'zgaruvchiga saqlashingiz mumkin.
+- Argument sifatida uzatishingiz mumkin.
+- Dynamic ravishda atribut qo'shishingiz mumkin.
+
+### 2. "Sehrli" `type()` funksiyasi
+
+Odatda `type()`ni data turini ko'rish uchun ishlatamiz:
+```python
+print(type(1)) # <class 'int'>
+```
+
+Lekin `type()` yordamida **class'larni dinamik yaratish** ham mumkin.
+
+Sintaksis: `type(name, bases, attrs)`
+*   `name`: class nomi (string).
+*   `bases`: parent class'lar tuple'i (inheritance uchun).
+*   `attrs`: class atribut va metodlari dictionary'si.
+
+```python
+# Oddiy usul
+class Monkey:
+    def eat(self):
+        print("Eating banana")
+
+# Metaprogramming usuli (aynan bir xil!)
+def eat_function(self):
+    print("Eating banana")
+
+DynamicMonkey = type('DynamicMonkey', (), {'eat': eat_function})
+
+m = DynamicMonkey()
+m.eat() # Natija: Eating banana
+```
+
+### 3. Metaclass
+
+Metaclass - class'larni yaratadigan "factory".
+- **Object** - **Class** ning instance'i.
+- **Class** - **Metaclass** ning instance'i.
+
+Python'da default metaclass - `type`.
+
+```python
+class MyClass:
+    pass
+
+print(type(MyClass)) # <class 'type'>
+```
+
+#### Custom metaclass yaratish
+
+Class qanday yaratilishini nazorat qilish uchun o'zingiz metaclass yozishingiz mumkin. Bu ko'pincha class atributlarini validatsiya qilish yoki strict API yaratishda (masalan Django Models) ishlatiladi.
+
+Metaclass yaratish uchun `type`dan meros oling. Class ta'rifida `metaclass=` argumentidan foydalanamiz.
+
+**Misol: barcha atribut nomlarini Uppercase qilish**
+
+```python
+class UpperAttrMeta(type):
+    # __new__ is called before __init__
+    def __new__(upperattr_metaclass, future_class_name, 
+                future_class_parents, future_class_attr):
+        
+        # Katta harfli kalitlar bilan yangi atribut lug'ati yaratish
+        uppercase_attr = {}
+        for name, val in future_class_attr.items():
+            if not name.startswith('__'): # Don't change magic methods
+                uppercase_attr[name.upper()] = val
+            else:
+                uppercase_attr[name] = val
+        
+        # Class yaratish uchun type.__new__ ni chaqirish
+        return type(future_class_name, future_class_parents, uppercase_attr)
+
+# Metaclass ishlatish
+class Foo(metaclass=UpperAttrMeta):
+    bar = 'bip'
+
+print(hasattr(Foo, 'bar')) # False (because changed to BAR)
+print(hasattr(Foo, 'BAR')) # True
+print(Foo.BAR) # 'bip'
+```
+
+### 4. Metaclass qachon kerak?
+
+Javob: **deyarli hech qachon**, agar framework qurmayotgan bo'lsangiz.
+
+> "Metaclasses are deeper magic than 99% of users should ever worry about. If you wonder whether you need them, you don't." - Tim Peters (Python Guru)
+
+Lekin mavzuni tushunish Python qanday ishlashini chuqurroq anglashga yordam beradi.
+
+### Xulosa
+- **type()** class'larni dinamik yaratishi mumkin.
+- **Metaclass** - class'ning class'i.
+- Metaclass class yaratish jarayonini avtomatik o'zgartirish uchun ishlatiladi.
diff --git a/content/uz/tutorial/advanced/38-python-multithreading-multiprocessing.md b/content/uz/tutorial/advanced/38-python-multithreading-multiprocessing.md
new file mode 100644
index 0000000..6980f83
--- /dev/null
+++ b/content/uz/tutorial/advanced/38-python-multithreading-multiprocessing.md
@@ -0,0 +1,123 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python multithreading va multiprocessing
+order: 38
+permalink: /uz/tutorial/python-multithreading-multiprocessing/
+---
+
+<img src="/img/tutorial/33-multithreading.webp" alt="Python multithreading va multiprocessing" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Zamonaviy dasturlashda *parallelism* va *concurrency* kabi atamalar ko'p uchraydi. Python'da bir vaqtning o'zida bir nechta ishni bajarishning ikki asosiy yo'li bor: **multithreading** va **multiprocessing**.
+
+Qaysi birini tanlash vazifangiz turiga bog'liq: u **I/O Bound**mi yoki **CPU Bound**mi.
+
+### 1. I/O Bound va CPU Bound
+
+- **I/O Bound**: dastur ko'proq input/output kutadi (misol: network so'rovlar, diskdan o'qish, database query). Bu paytda CPU ko'pincha bo'sh turadi.
+- **CPU Bound**: dastur ko'proq hisob-kitob (matematika, og'ir data processing) qiladi. CPU 100% ishlaydi.
+
+### 2. Multithreading (I/O Bound uchun)
+
+Threading bitta process ichida bir nechta thread ishlatadi. Thread'lar xotirani bo'lishadi (shared memory).
+
+Lekin Python (CPython) da **GIL (Global Interpreter Lock)** bor: u bir vaqtning o'zida ikki thread'ning bitta CPU core'da Python bytecode bajarishini cheklaydi. Shuning uchun Python multithreading **CPU-bound** ishlarni tezlashtirmaydi (hatto overhead sabab sekinlashishi ham mumkin).
+
+Ammo **I/O bound** ishlar uchun multithreading juda foydali: bitta thread kutayotgan paytda (masalan web javobini), boshqasi ishlashi mumkin.
+
+```python
+import threading
+import time
+
+def download_page(url):
+    print(f"Start downloading {url}...")
+    time.sleep(2) # Simulate network delay
+    print(f"Finished downloading {url}")
+
+start = time.time()
+
+threads = []
+urls = ["web1", "web2", "web3"]
+
+for url in urls:
+    t = threading.Thread(target=download_page, args=(url,))
+    threads.append(t)
+    t.start()
+
+# Barcha thread'lar tugashini kutish
+for t in threads:
+    t.join()
+
+end = time.time()
+print(f"Umumiy vaqt: {end - start:.2f} soniya")
+# Natija taxminan 2 soniya, 6 soniya emas!
+```
+
+### 3. Multiprocessing (CPU Bound uchun)
+
+Multiprocessing alohida Python process'larni yaratadi. Har bir process'ning o'z Python interpreter'i va xotira maydoni bo'ladi. Bu GIL'ni chetlab o'tadi va multi-core CPU'dan maksimal foydalanishga imkon beradi.
+
+Og'ir hisob-kitobli vazifalar uchun shuni ishlating.
+
+```python
+import multiprocessing
+import time
+
+def heavy_square_calculation(number):
+    print(f"Process {number} starts...")
+    result = sum(i * i for i in range(10**7)) # Heavy calculation
+    print(f"Process {number} finished.")
+    return result
+
+if __name__ == "__main__":
+    start = time.time()
+    
+    # Turli CPU core'larda parallel ishlaydigan 2 ta process yaratish
+    p1 = multiprocessing.Process(target=heavy_square_calculation, args=(1,))
+    p2 = multiprocessing.Process(target=heavy_square_calculation, args=(2,))
+    
+    p1.start()
+    p2.start()
+    
+    p1.join()
+    p2.join()
+    
+    end = time.time()
+    print(f"Total time: {end - start:.2f} seconds")
+```
+
+*Eslatma: Windows'da multiprocessing ishlatganda asosiy kodni `if __name__ == "__main__":` bilan himoyalash kerak.*
+
+### 4. Concurrent Futures (zamonaviy usul)
+
+Python `concurrent.futures` modulini beradi. U Threading va Multiprocessing uchun yuqori darajali va ishlatish oson interfeys.
+
+```python
+from concurrent.futures import ThreadPoolExecutor
+import time
+
+def task(n):
+    time.sleep(1)
+    return f"Task {n} finished"
+
+start = time.time()
+
+with ThreadPoolExecutor(max_workers=3) as executor:
+    results = executor.map(task, [1, 2, 3])
+    
+    for result in results:
+        print(result)
+
+print(f"Time: {time.time() - start:.2f} seconds")
+```
+Multiprocessing'ga o'tmoqchi bo'lsangiz `ThreadPoolExecutor` o'rniga `ProcessPoolExecutor` ishlating.
+
+### Xulosa
+
+| Xususiyat | Multithreading | Multiprocessing |
+| :--- | :--- | :--- |
+| **Xotira** | Shared memory (umumiy) | Separate memory (izolyatsiya) |
+| **Overhead** | Past | Yuqori (process start vaqt oladi) |
+| **Mos vazifa** | I/O Bound (network, file) | CPU Bound (hisob-kitob, data processing) |
+| **GIL** | GIL ta'sir qiladi | GIL'dan holi |
+
diff --git a/content/uz/tutorial/advanced/39-python-async-await.md b/content/uz/tutorial/advanced/39-python-async-await.md
new file mode 100644
index 0000000..02db5e8
--- /dev/null
+++ b/content/uz/tutorial/advanced/39-python-async-await.md
@@ -0,0 +1,315 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python async/await
+order: 39
+permalink: /uz/tutorial/python-async-await/
+---
+
+<img src="/img/tutorial/34-async-await-python-tutorial.webp" alt="Python async await - asynchronous programming" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+`async/await` bilan asinxron dasturlash - bu non-blocking ishlashga imkon beradigan paradigma. Bu ayniqsa ko'p I/O amallari bo'lgan ilovalar uchun foydali: HTTP so'rovlar, database access, fayl o'qish va hokazo.
+
+### Nega asinxron?
+
+An'anaviy sinxron dasturlashda:
+
+```python
+# Sinxron - bittadan kutish
+result1 = fetch_data_from_api()      # Wait 2 seconds
+result2 = fetch_data_from_database() # Wait 2 seconds
+result3 = read_large_file()          # Wait 2 seconds
+# Jami: 6 soniya
+```
+
+Asinxron yondashuvda:
+
+```python
+# Asinxron - bir vaqtda bajarish
+result1, result2, result3 = await asyncio.gather(
+    fetch_data_from_api(),
+    fetch_data_from_database(),
+    read_large_file()
+)
+# Jami: ~2 soniya (parallel)
+```
+
+### Asosiy tushunchalar
+
+#### Coroutine
+
+`async def` bilan yozilgan funksiya coroutine deyiladi:
+
+```python
+import asyncio
+
+# Bu coroutine
+async def greeting():
+    print("Hello!")
+    return "Done"
+
+# Coroutine'ni bajarish
+asyncio.run(greeting())
+```
+
+#### await
+
+`await` coroutine yoki async operatsiya natijasini kutish uchun ishlatiladi:
+
+```python
+import asyncio
+
+async def long_process():
+    print("Start process...")
+    await asyncio.sleep(2)  # Simulate async operation
+    print("Process finished!")
+    return "Result"
+
+async def main():
+    result = await long_process()
+    print(f"Got: {result}")
+
+asyncio.run(main())
+```
+
+### Coroutine'larni ishga tushirish
+
+Coroutine'ni ishga tushirishning bir nechta yo'li bor:
+
+```python
+import asyncio
+
+async def hello():
+    await asyncio.sleep(1)
+    return "Hello!"
+
+# 1-usul: asyncio.run() - mustaqil skript uchun
+if __name__ == "__main__":
+    result = asyncio.run(hello())
+    print(result)
+
+# 2-usul: await - boshqa coroutine ichidan
+async def main():
+    result = await hello()
+    print(result)
+```
+
+### Task'larni parallel bajarish
+
+#### asyncio.gather()
+
+Bir nechta coroutine'ni bir vaqtda (concurrently) bajaradi:
+
+```python
+import asyncio
+
+async def download_file(name: str, duration: int) -> str:
+    print(f"Start download {name}...")
+    await asyncio.sleep(duration)
+    print(f"Finished download {name}")
+    return f"{name} downloaded"
+
+async def main():
+    # Hammasini bir vaqtda bajarish
+    results = await asyncio.gather(
+        download_file("file1.txt", 2),
+        download_file("file2.txt", 3),
+        download_file("file3.txt", 1),
+    )
+    print(f"All results: {results}")
+
+asyncio.run(main())
+# Natija:
+# Start download file1.txt...
+# Start download file2.txt...
+# Start download file3.txt...
+# Finished download file3.txt (1 soniyadan keyin)
+# Finished download file1.txt (2 soniyadan keyin)
+# Finished download file2.txt (3 soniyadan keyin)
+# Jami vaqt: ~3 soniya (6 soniya emas)
+```
+
+#### asyncio.create_task()
+
+Background'da ishlaydigan task yaratish:
+
+```python
+import asyncio
+
+async def background_task():
+    while True:
+        print("Background task running...")
+        await asyncio.sleep(1)
+
+async def main():
+    # Task yaratish (darhol bajarilmaydi)
+    task = asyncio.create_task(background_task())
+    
+    # Boshqa ish qilish
+    await asyncio.sleep(3)
+    
+    # Task'ni bekor qilish
+    task.cancel()
+    print("Task cancelled")
+
+asyncio.run(main())
+```
+
+### Async context manager
+
+Async resurs boshqaruvi uchun:
+
+```python
+import asyncio
+
+class AsyncDatabaseConnection:
+    async def __aenter__(self):
+        print("Opening database connection...")
+        await asyncio.sleep(1)
+        return self
+    
+    async def __aexit__(self, exc_type, exc_val, exc_tb):
+        print("Closing database connection...")
+        await asyncio.sleep(0.5)
+    
+    async def query(self, sql: str) -> list:
+        await asyncio.sleep(0.5)
+        return ["result1", "result2"]
+
+async def main():
+    async with AsyncDatabaseConnection() as db:
+        result = await db.query("SELECT * FROM users")
+        print(f"Query result: {result}")
+
+asyncio.run(main())
+```
+
+### Async iterator
+
+Async iteratsiya uchun:
+
+```python
+import asyncio
+
+class AsyncCounter:
+    def __init__(self, max_count: int):
+        self.max_count = max_count
+        self.current = 0
+    
+    def __aiter__(self):
+        return self
+    
+    async def __anext__(self):
+        if self.current >= self.max_count:
+            raise StopAsyncIteration
+        await asyncio.sleep(0.5)
+        self.current += 1
+        return self.current
+
+async def main():
+    async for num in AsyncCounter(5):
+        print(f"Count: {num}")
+
+asyncio.run(main())
+```
+
+### Amaliy misol: async HTTP so'rovlar
+
+Async HTTP request uchun `aiohttp` kutubxonasidan foydalanish mumkin:
+
+```python
+import asyncio
+import aiohttp
+
+async def fetch_url(session: aiohttp.ClientSession, url: str) -> dict:
+    async with session.get(url) as response:
+        return await response.json()
+
+async def main():
+    urls = [
+        "https://api.github.com/users/python",
+        "https://api.github.com/users/django",
+        "https://api.github.com/users/fastapi",
+    ]
+    
+    async with aiohttp.ClientSession() as session:
+        # Barcha URL'larni bir vaqtda olish
+        tasks = [fetch_url(session, url) for url in urls]
+        results = await asyncio.gather(*tasks)
+        
+        for result in results:
+            print(f"User: {result.get('login')}")
+
+# Avval o'rnating: pip install aiohttp
+asyncio.run(main())
+```
+
+Bu yerda `aiohttp` ishlatiladi (chunki standard `requests` async'ni qo'llab-quvvatlamaydi). Tezlik uchun bitta `ClientSession` yaratiladi, so'ng har bir URL uchun task'lar ro'yxati tuziladi. `asyncio.gather(*tasks)` hammasini bir vaqtda bajaradi. 100 ta URL'dan data olish kerak bo'lsa, bu usul birma-bir olishdan ancha tez bo'ladi.
+
+### Timeout va error handling
+
+```python
+import asyncio
+
+async def long_operation():
+    await asyncio.sleep(10)
+    return "Done"
+
+async def main():
+    try:
+        # 2 soniya timeout o'rnatish
+        result = await asyncio.wait_for(long_operation(), timeout=2.0)
+        print(result)
+    except asyncio.TimeoutError:
+        print("Operation timeout!")
+
+asyncio.run(main())
+```
+
+### Rate limiting uchun semaphore
+
+Bir vaqtda nechta operatsiya bajarilishini cheklash:
+
+```python
+import asyncio
+
+async def download(semaphore: asyncio.Semaphore, url: str):
+    async with semaphore:  # Only N concurrent requests
+        print(f"Downloading {url}...")
+        await asyncio.sleep(2)
+        print(f"Finished {url}")
+        return url
+
+async def main():
+    # Maksimal 3 ta bir vaqtda yuklash
+    semaphore = asyncio.Semaphore(3)
+    
+    urls = [f"file_{i}.txt" for i in range(10)]
+    tasks = [download(semaphore, url) for url in urls]
+    
+    await asyncio.gather(*tasks)
+
+asyncio.run(main())
+```
+
+### Best practices
+
+1. **Async'ni I/O bound ishlar uchun ishlating** - HTTP, database, file I/O
+2. **CPU bound uchun ishlatmang** - og'ir hisob-kitoblarda multiprocessing ishlating
+3. **Coroutine'ni doim await qiling** - await bo'lmasa coroutine ishlamaydi
+4. **Parallel uchun asyncio.gather() ishlating** - ketma-ket await'dan samaraliroq
+5. **Exception'larni yaxshi boshqaring** - coroutine ichida try/except ishlating
+
+### Qachon async ishlatish kerak?
+
+<i class="fa-solid fa-circle-check" aria-hidden="true"></i> **Async ishlating**, agar:
+- I/O operatsiyalar ko'p bo'lsa (HTTP, database, fayl)
+- Web serverlar (FastAPI, aiohttp)
+- Ko'p sahifali web scraping
+- Chat ilovalar
+- Real-time data processing
+
+<i class="fa-solid fa-circle-xmark" aria-hidden="true"></i> **Async ishlatmang**, agar:
+- CPU intensive vazifalar bo'lsa (multiprocessing ishlating)
+- I/O kutishi yo'q oddiy operatsiyalar bo'lsa
+- Concurrency kerak bo'lmagan kichik skript bo'lsa
diff --git a/content/uz/tutorial/advanced/40-python-design-patterns.md b/content/uz/tutorial/advanced/40-python-design-patterns.md
new file mode 100644
index 0000000..334fdb5
--- /dev/null
+++ b/content/uz/tutorial/advanced/40-python-design-patterns.md
@@ -0,0 +1,160 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python design pattern'lar
+order: 40
+permalink: /uz/tutorial/python-design-patterns/
+---
+
+<img src="/img/tutorial/35-belajar-design-patterns-python.webp" alt="Python design patterns" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Design pattern'lar - dastur dizaynida tez-tez uchraydigan muammolar uchun qayta ishlatiladigan (reusable) yechimlar. Bu tayyor kod emas, balki muammoni qanday yechish bo'yicha *shablon* yoki yo'riqnoma.
+
+Python'da design pattern'larni ko'pincha Java yoki C++ kabi tillarga nisbatan osonroq implement qilish mumkin (ba'zilari hatto built-in sifatida mavjud).
+
+### 1. Singleton pattern
+
+Maqsad: class faqat bitta instance'ga ega bo'lishini kafolatlash.
+Misol: database connection, application configuration.
+
+```python
+class Singleton:
+    _instance = None
+    
+    def __new__(cls):
+        if cls._instance is None:
+            print("Creating new instance...")
+            cls._instance = super(Singleton, cls).__new__(cls)
+        return cls._instance
+
+s1 = Singleton()
+s2 = Singleton()
+
+print(s1 is s2) # True
+```
+
+Pythonic alternativ (decorator bilan):
+
+```python
+def singleton(cls):
+    instances = {}
+    def get_instance(*args, **kwargs):
+        if cls not in instances:
+            instances[cls] = cls(*args, **kwargs)
+        return instances[cls]
+    return get_instance
+
+@singleton
+class Database:
+    pass
+```
+
+### 2. Factory pattern
+
+Maqsad: yaratiladigan obyektning aniq class'ini oldindan ko'rsatmasdan obyekt yaratish.
+Misol: plugin tizimi, turli formatlarda serializatsiya (JSON, XML).
+
+```python
+class Dog:
+    def speak(self):
+        return "Woof!"
+
+class Cat:
+    def speak(self):
+        return "Meow!"
+
+def get_pet(pet="dog"):
+    """The Factory Method"""
+    pets = dict(dog=Dog(), cat=Cat())
+    return pets[pet]
+
+d = get_pet("dog")
+print(d.speak())
+
+c = get_pet("cat")
+print(c.speak())
+```
+
+### 3. Observer pattern (Pub-Sub)
+
+Maqsad: one-to-many bog'liqlikni belgilash: bitta obyekt o'zgarsa, unga bog'liq obyektlar xabardor qilinadi.
+Misol: event handling, notification tizimi.
+
+```python
+class Subject:
+    def __init__(self):
+        self._observers = []
+
+    def attach(self, observer):
+        self._observers.append(observer)
+
+    def notify(self, message):
+        for observer in self._observers:
+            observer.update(message)
+
+class Observer:
+    def update(self, message):
+        raise NotImplementedError
+
+class EmailNotifier(Observer):
+    def update(self, message):
+        print(f"Sending Email: {message}")
+
+class SMSNotifier(Observer):
+    def update(self, message):
+        print(f"Sending SMS: {message}")
+
+# Foydalanish
+subject = Subject()
+subject.attach(EmailNotifier())
+subject.attach(SMSNotifier())
+
+subject.notify("Server Down!")
+# Natija:
+# Sending Email: Server Down!
+# Sending SMS: Server Down!
+```
+
+### 4. Strategy pattern
+
+Maqsad: algoritmlar oilasini aniqlash, har birini alohida kapsulalash va ularni o'zaro almashtiriladigan qilish.
+Misol: sortlash strategiyasi, shopping discount, payment gateway.
+
+```python
+from typing import Callable
+
+class PaymentProcessor:
+    def __init__(self, strategy: Callable[[int], None]):
+        self.strategy = strategy
+    
+    def pay(self, amount):
+        self.strategy(amount)
+
+# Strategiyalar
+def pay_by_cc(amount):
+    print(f"Paying {amount} with Credit Card")
+
+def pay_by_paypal(amount):
+    print(f"Paying {amount} with PayPal")
+
+# Runtime'da tanlash
+cart = PaymentProcessor(pay_by_cc)
+cart.pay(100)
+
+cart = PaymentProcessor(pay_by_paypal)
+cart.pay(100)
+```
+
+Python'da funksiyalar first-class object bo'lgani uchun, ko'pincha yuqoridagi kabi *funksiya uzatish* Strategy pattern uchun yetarli bo'ladi va murakkab interface class'lar shart emas.
+
+### 5. Decorator pattern
+
+Oldingi darslarda ko'rganimizdek, bu pattern obyektga dinamik ravishda behavior qo'shishga yordam beradi. Python'da `@` sintaksisi bilan bu pattern o'rnatilgan darajada qo'llab-quvvatlanadi.
+
+### Xulosa
+
+- **Singleton**: bitta instance.
+- **Factory**: obyektni dinamik yaratish.
+- **Observer**: event haqida bir nechta subscriber'ni xabardor qilish.
+- **Strategy**: runtime'da algoritmni almashtirish.
+- Pattern'larni o'rganing, kod modul'li va maintainable bo'ladi, lekin over-engineering qilmang.
diff --git a/content/uz/tutorial/advanced/41-python-unit-testing.md b/content/uz/tutorial/advanced/41-python-unit-testing.md
new file mode 100644
index 0000000..b9b0262
--- /dev/null
+++ b/content/uz/tutorial/advanced/41-python-unit-testing.md
@@ -0,0 +1,145 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python unit testing
+order: 41
+permalink: /uz/tutorial/python-unit-testing/
+---
+
+<img src="/img/tutorial/36-panduan-unit-testing-python.webp" alt="Python unit testing" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Unit testing - bu source code'ning alohida unit'larini (funksiya, metod yoki class) test qilish usuli. Maqsad: ularning to'g'ri ishlayotganini tekshirish.
+
+"Lekin hozir kodim ishlayapti-ku!"
+Bugun ishlashi mumkin, lekin 6 oy o'tib bitta qatorni o'zgartirasiz va boshqa funksiyalar buzilib ketadi. Unit test'lar - sizning safety net'ingiz.
+
+Python'da ikkita asosiy test framework bor: `unittest` (built-in) va `pytest` (third-party, lekin juda ommabop).
+
+### 1. `unittest` (built-in) bilan
+
+`unittest` JUnit (Java) dan ilhomlangan. U class-based yondashuvdan foydalanadi.
+
+Masalan, quyidagi oddiy funksiyalar bo'lsin:
+```python
+# calc.py fayli
+def add(x, y):
+    return x + y
+
+def divide(x, y):
+    if y == 0:
+        raise ValueError("Cannot divide by zero")
+    return x / y
+```
+
+Test faylni yaratamiz:
+```python
+# test_calc.py fayli
+import unittest
+from calc import add, divide
+
+class TestCalc(unittest.TestCase):
+    
+    def test_add(self):
+        self.assertEqual(add(3, 4), 7)
+        self.assertEqual(add(-1, 1), 0)
+        
+    def test_divide(self):
+        self.assertEqual(divide(10, 2), 5)
+        
+        # Exception tekshirish
+        with self.assertRaises(ValueError):
+            divide(10, 0)
+
+if __name__ == '__main__':
+    unittest.main()
+```
+
+Ishga tushirish: `python test_calc.py`
+
+### 2. `pytest` (zamonaviy tavsiya)
+
+`pytest` ixchamroq, kuchliroq va ko'proq "Pythonic". U class'lar o'rniga oddiy funksiyalar va standart `assert` dan foydalanadi.
+
+O'rnatish:
+```bash
+python -m pip install pytest
+```
+
+Pytest bilan test yozish:
+```python
+# test_calc_pytest.py fayli
+import pytest
+from calc import add, divide
+
+def test_add():
+    assert add(3, 4) == 7
+    assert add(-1, 1) == 0
+
+def test_divide():
+    assert divide(10, 2) == 5
+
+def test_divide_zero():
+    with pytest.raises(ValueError):
+        divide(10, 0)
+```
+
+Terminal'da `pytest` deb yozing. Pytest `test_` bilan boshlanadigan fayllarni avtomatik topadi.
+
+### 3. Mocking tushunchasi
+
+Mocking - test qilinayotgan tizimning ayrim qismlarini mock obyektlar bilan almashtirish texnikasi. Bu kod API, database yoki file system kabi tashqi tizimlarga bog'liq bo'lganda foydali.
+
+Misol: biz API so'rov yuboradigan funksiyani test qilmoqchimiz, lekin haqiqiy so'rov yubormoqchi emasmiz (sekin va internet talab qiladi).
+
+`unittest.mock` bilan:
+
+```python
+from unittest.mock import Mock, patch
+import requests
+
+# Test qilinadigan funksiya
+def get_user_data(url):
+    resp = requests.get(url)
+    if resp.status_code == 200:
+        return resp.json()
+    return None
+
+# Mock bilan test
+@patch('requests.get')
+def test_get_user_data(mock_get):
+    # Mock'ni sozlash
+    mock_response = Mock()
+    mock_response.status_code = 200
+    mock_response.json.return_value = {"id": 1, "name": "Bob"}
+    
+    # Mock javobni mock_get'ga berish
+    mock_get.return_value = mock_response
+    
+    # Funksiyani ishga tushirish
+    result = get_user_data("http://fakeurl.com")
+    
+    # Tekshirish
+    assert result["name"] == "Bob"
+    # requests.get to'g'ri URL bilan chaqirilganini tekshirish
+    mock_get.assert_called_with("http://fakeurl.com")
+```
+
+### 4. Code coverage
+
+Kodingizning qanchasi test bilan qamrab olingan? Coverage vositalari qaysi qatorlar testdan o'tmaganini ko'rsatadi.
+
+O'rnatish:
+```bash
+python -m pip install pytest-cov
+```
+
+Ishga tushirish:
+```bash
+pytest --cov=my_project
+```
+
+### Xulosa
+- **Unit test** jiddiy ilovalar uchun kerak.
+- **pytest** toza sintaksisi sabab ko'pincha afzal.
+- **Mocking** unit'larni tashqi dependency'lardan ajratish uchun ishlatiladi.
+- Test yozishni odat qiling: oldin test (TDD) yoki hech bo'lmasa kod bilan birga.
diff --git a/content/uz/tutorial/advanced/42-python-memory-management.md b/content/uz/tutorial/advanced/42-python-memory-management.md
new file mode 100644
index 0000000..4d193f0
--- /dev/null
+++ b/content/uz/tutorial/advanced/42-python-memory-management.md
@@ -0,0 +1,91 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python memory management
+order: 42
+permalink: /uz/tutorial/python-memory-management/
+---
+
+<img src="/img/tutorial/37-memory-handling-python.webp" alt="Python memory management" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Python ommabop bo'lishining sabablaridan biri - dasturchi C yoki C++ dagidek qo'lda memory management bilan shug'ullanishi shart emas. Python xotira ajratish (allocation) va bo'shatishni (deallocation) avtomatik bajaradi.
+
+Shunga qaramay, Python xotirani ichkarida qanday boshqarishini tushunish samarali kod yozish uchun muhim, ayniqsa katta data bilan ishlaganda.
+
+### 1. Heap va Stack
+
+Python ikki xil xotiradan foydalanadi:
+- **Stack memory**: funksiya bajarilishi va lokal o'zgaruvchilar uchun.
+- **Heap memory**: barcha Python object va instance'lar (int, list, class va hokazo) shu yerda saqlanadi. Uni Python Memory Manager boshqaradi.
+
+### 2. Reference counting
+
+Python xotira boshqaruvidagi asosiy strategiya - **reference counting**.
+
+Har bir object'ning reference count'i bo'ladi: nechta o'zgaruvchi o'sha object'ga ishora qilayotganini bildiradi.
+
+- Object yaratilsa yoki unga referens berilsa (`a = object`), count oshadi (+1).
+- Referens o'chirilsa (`del a`) yoki scope'dan chiqsa, count kamayadi (-1).
+- Count 0 ga tushsa, object xotirasi darhol bo'shatiladi.
+
+```python
+import sys
+
+a = []
+# Referens sonini olish (kutilganidan yuqori bo'lishi mumkin, chunki sys.getrefcount'ning argumenti ham vaqtinchalik referens)
+print(sys.getrefcount(a)) 
+
+b = a
+print(sys.getrefcount(a)) # Increases
+
+del b
+print(sys.getrefcount(a)) # Decreases
+```
+
+### 3. Garbage collection (GC)
+
+Reference counting'ning bitta muammosi bor: **circular references**.
+
+```python
+a = []
+b = []
+a.append(b)
+b.append(a) # Circular reference
+```
+
+Agar `a` va `b` o'chirilsa ham, ular bir-biriga ishora qilgani uchun reference count hech qachon 0 bo'lmaydi. Shu yerda **Garbage Collector (GC)** ishga tushadi.
+
+Python GC alohida mexanizm bo'lib, vaqti-vaqti bilan ishlaydi va circular reference'lardan hosil bo'lgan "garbage"ni topib tozalaydi.
+
+GC'ni `gc` moduli bilan qo'lda boshqarish mumkin:
+
+```python
+import gc
+
+# Garbage collection'ni majburan ishga tushirish
+gc.collect()
+
+# Avtomatik garbage collection'ni o'chirish
+gc.disable()
+```
+*Maslahat: odatda `gc` moduliga kamdan-kam teginasiz, asosan yuqori darajali optimizatsiya uchun kerak bo'ladi.*
+
+### 4. Xotirani tejash bo'yicha maslahatlar
+
+1. **Generator ishlating**: oldingi darsda ko'rganimizdek, generator hamma data'ni RAM'ga yuklamaydi.
+2. **Class'larda `__slots__` ishlating**: agar kichik class'dan millionlab instance yaratsangiz, `__slots__` har bir instance uchun dinamik `__dict__`ni o'chirib, RAM'ni tejaydi.
+
+```python
+class SaveMemory:
+    __slots__ = ['name', 'age'] # Can only have these attributes
+    def __init__(self, name, age):
+        self.name = name
+        self.age = age
+```
+
+3. **Global o'zgaruvchilarga ehtiyot bo'ling**: global object'lar dastur to'xtamaguncha o'chmaydi (qo'lda o'chirmasangiz).
+
+### Xulosa
+- Python asosan **reference counting** ishlatadi.
+- **Garbage collector** circular reference'larni tozalaydi.
+- Python xotira boshqaruvini tushunib, "memory-efficient" kod yozish mumkin.
diff --git a/content/uz/tutorial/basic/01-what-is-python.md b/content/uz/tutorial/basic/01-what-is-python.md
new file mode 100644
index 0000000..35c758c
--- /dev/null
+++ b/content/uz/tutorial/basic/01-what-is-python.md
@@ -0,0 +1,34 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Pythonga kirish
+order: 1
+permalink: /uz/tutorial/what-is-python/
+---
+
+<img src="/img/tutorial/1-pendahuluan-python.webp" alt="Pythonga kirish - Python nima" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+![Python logotipi](/img/729px-Python_logo_and_wordmark.svg.png 'Python logotipi')
+
+[Python](https://www.python.org) - umumiy maqsadli interpretatsiya qilinadigan dasturlash tili. Python har kuni uchraydigan dasturiy ta'minot yaratishda o'qilishi oson, ifodali va amaliy bo'lishi uchun yaratilgan. Uning sodda sintaksisi Pythonni boshlovchilar uchun qulay qiladi, shu bilan birga yirik ishlab chiqarish tizimlari uchun ham yetarlicha kuchli.
+
+Til ilk bor 1991 yilda [Guido van Rossum](https://en.wikipedia.org/wiki/Guido_van_Rossum) tomonidan chiqarilgan va hozirda [Python Software Foundation](https://www.python.org/psf/) tomonidan qo'llab-quvvatlanadi.
+
+Python keng qo'llaniladi:
+
+- **Avtomatlashtirish va skriptlar**: takrorlanuvchi vazifalar va tizim boshqaruvini avtomatlashtirish
+- **Veb dasturlash**: Django, Flask va FastAPI kabi frameworklar
+- **Ma'lumotlar ilmi va mashinaviy o'qitish**: Pandas, NumPy, scikit-learn, TensorFlow va PyTorch kabi kutubxonalar
+- **Ilmiy hisoblash**: SciPy, Matplotlib va Jupyter notebook'lar
+- **DevOps va backend servislar**: cloud vositalari, CI/CD pipeline'lar, infratuzilmani avtomatlashtirish
+- **IoT va o'rnatilgan qurilmalar**: Raspberry Pi, MicroPython
+
+Python barcha asosiy operatsion tizimlarda (Windows, macOS, Linux) ishlaydi va ko'plab Linux tizimlarida oldindan o'rnatilgan bo'ladi.
+
+Ushbu darslar to'plami **Python 3.13** tili va standart kutubxonasi uchun yozilgan.
+
+```python
+print("Python is simple and powerful")
+```
+
+Python toza sintaksis va muhim indentatsiyadan foydalanadi. Har bir qatordan keyin nuqta-vergul qo'yish shart emas.
diff --git a/content/uz/tutorial/basic/02-python-installation.md b/content/uz/tutorial/basic/02-python-installation.md
new file mode 100644
index 0000000..2c2b6d3
--- /dev/null
+++ b/content/uz/tutorial/basic/02-python-installation.md
@@ -0,0 +1,80 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python o'rnatish
+order: 2
+permalink: /uz/tutorial/python-installation/
+---
+
+<img src="/img/tutorial/2-panduan-cepat-instalasi-python-windows-linux-mac.webp" alt="Python o'rnatish bo'yicha qo'llanma" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Python dasturlarini yozishdan oldin Pythonni o'rnating va terminalingiz uni ishga tushira olishini tekshiring.
+
+Bu dars **Python 3.13** ga mo'ljallangan.
+
+### Linux
+
+Ko'pgina Linux tizimlarida Python 3 allaqachon o'rnatilgan bo'ladi. Avval tekshirib ko'ring:
+
+```bash
+python3 --version
+```
+
+Agar Python o'rnatilmagan bo'lsa yoki juda eski bo'lsa, distributivingiz paket menejeri orqali yoki [python.org source releases](https://www.python.org/downloads/source/) orqali o'rnating.
+
+Paket menejeri uchun keng tarqalgan misollar:
+
+```bash
+# Debian/Ubuntu
+sudo apt update
+sudo apt install python3 python3-pip python3-venv
+
+# Fedora
+sudo dnf install python3 python3-pip
+
+# Arch Linux
+sudo pacman -S python python-pip
+```
+
+### Windows
+
+1. [Python releases for Windows](https://www.python.org/downloads/windows/) sahifasini oching.
+2. Python 3.13 installer'ini yuklab oling (32-bit kerak bo'lmasa, 64-bit).
+3. Installer'ni ishga tushiring.
+4. Install bosishdan oldin **"Add python.exe to PATH"** ni yoqing.
+
+Command Prompt yoki PowerShell'da o'rnatilishni tekshiring:
+
+```bash
+python --version
+```
+
+### macOS
+
+1. [Python releases for macOS](https://www.python.org/downloads/macos/) sahifasini oching.
+2. Python 3.13 installer'ini yuklab oling va ishga tushiring.
+3. O'rnatish ustasini yakunlang.
+
+Terminal'da o'rnatilishni tekshiring:
+
+```bash
+python3 --version
+```
+
+Agar Homebrew ishlatsangiz, Pythonni quyidagicha ham o'rnatishingiz mumkin:
+
+```bash
+brew install python
+```
+
+### `pip`ni tekshirish
+
+`pip` odatda Python bilan birga o'rnatiladi. Quyidagicha tekshiring:
+
+```bash
+python -m pip --version
+# or
+python3 -m pip --version
+```
+
+Agar Python va pip buyruqlari ishlasa, muhitingiz keyingi darsga tayyor.
diff --git a/content/uz/tutorial/basic/03-running-python.md b/content/uz/tutorial/basic/03-running-python.md
new file mode 100644
index 0000000..14985c4
--- /dev/null
+++ b/content/uz/tutorial/basic/03-running-python.md
@@ -0,0 +1,234 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Pythonni ishga tushirish
+order: 3
+permalink: /uz/tutorial/running-python/
+---
+
+<img src="/img/tutorial/3-panduan-cepat-menjalankan-python.webp" alt="Pythonni qanday ishga tushirish" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Pythonni odatda ikki usulda ishga tushirish mumkin:
+
+1. Tezkor tajribalar uchun **interaktiv rejim (REPL)**.
+2. `.py` fayllarni ishga tushirish uchun **skript rejimi**.
+
+> <i class="fa-solid fa-circle-info" aria-hidden="true"></i> **Eslatma:** Siz ushbu veb-saytda ham har bir kod parchasini interaktiv tarzda ishga tushirib va tahrirlab ko'rishingiz mumkin.
+
+### Tezkor boshlash (OS bo'yicha)
+
+#### Linux / macOS
+
+1. **Terminal** ni oching.
+2. Python o'rnatilganini tekshiring:
+
+   ```bash
+   python3 --version
+   ```
+
+3. Interaktiv rejimni (REPL) ishga tushiring:
+
+   ```bash
+   python3
+   ```
+
+4. Skript faylini ishga tushiring:
+
+   ```bash
+   python3 hello.py
+   ```
+
+#### Windows
+
+1. **PowerShell** yoki **Command Prompt** ni oching.
+2. Python o'rnatilganini tekshiring (quyidagilardan birini sinang):
+
+   ```bash
+   py --version
+   # or
+   python --version
+   ```
+
+3. Interaktiv rejimni (REPL) ishga tushiring:
+
+   ```bash
+   py
+   # or
+   python
+   ```
+
+4. Skript faylini ishga tushiring:
+
+   ```bash
+   py hello.py
+   # or
+   python hello.py
+   ```
+
+### Pythonni interaktiv rejimda (REPL) ishga tushirish
+
+Pythonni ishga tushiring:
+
+```bash
+# Linux/macOS
+python3
+
+# Windows (mavjud bo'lsa, tavsiya etiladi)
+py
+```
+
+Siz `>>>` promptini ko'rasiz. Misol:
+
+```python
+>>> print("Welcome to Python")
+Welcome to Python
+>>> 2 + 3
+5
+```
+
+`>>>` - REPL prompti, Python sintaksisining bir qismi emas. `>>>` ni `.py` faylga yoki veb-saytdagi kod muharririga yozmang.
+
+Fayl/muharrirlar uchun quyidagi ko'rinishdan foydalaning:
+
+```python
+print("Welcome to Python")
+print(2 + 3)
+```
+
+REPL'dan chiqish:
+
+- `exit()`
+- <kbd>Ctrl</kbd>+<kbd>D</kbd> (Linux/macOS)
+- <kbd>Ctrl</kbd>+<kbd>Z</kbd> so'ng <kbd>Enter</kbd> (Windows)
+
+### Python skript faylini ishga tushirish
+
+`hello.py` yarating:
+
+```python
+print("Learn Python")
+print("at belajarpython.com")
+```
+
+Terminal'dan ishga tushiring:
+
+```bash
+# Linux/macOS
+python3 hello.py
+
+# Windows
+py hello.py
+# or: python hello.py
+```
+
+### Ixtiyoriy: Windows'da IDLE bilan ishga tushirish
+
+Agar GUI muharrirni xohlasangiz:
+
+1. Start menyusidan **IDLE (Python 3.x)** ni oching.
+2. Tezkor buyruqlar uchun shell oynasidan foydalaning (`>>>`).
+3. Skript fayllar uchun **File > New File** ni bosing.
+4. Faylni `.py` sifatida saqlang, so'ng **Run > Run Module (F5)** orqali ishga tushiring.
+
+![Windows'da Python Shell](/img/menjalankan-python-windows.png 'Windows Python Shell')
+
+![Windows'da Python muharriri](/img/menjalankan-python-windows-editor.png 'Windows Python Editor')
+
+### Command-Line argumentlar
+
+Python command-line argumentlarni `sys.argv` orqali oladi:
+
+```python
+import sys
+
+print("Script name:", sys.argv[0])
+print("Arguments:", sys.argv[1:])
+```
+
+Ishga tushiring:
+
+```bash
+# Linux/macOS
+python3 app.py one two
+
+# Windows
+py app.py one two
+```
+
+### Pythonni ishga tushirishning boshqa usullari
+
+Pythonning buyruq satri uchun bir nechta foydali opsiyalari bor:
+
+> <i class="fa-solid fa-circle-info" aria-hidden="true"></i> **Eslatma:** Quyidagi misollarda `python` o'rniga Linux/macOS'da `python3`, Windows'da esa `py` dan foydalaning.
+
+- Qisqa buyruqni ishga tushirish:
+
+  ```bash
+  python -c "print('Hello from -c')"
+  ```
+
+- Modulni skript sifatida ishga tushirish (tavsiya etiladigan uslub):
+
+  ```bash
+  python -m pip --version
+  python -m venv .venv
+  python -m http.server 8000
+  ```
+
+- Skriptni ishga tushirib, keyin interaktiv rejimda qolish:
+
+  ```bash
+  python -i app.py
+  ```
+
+> <i class="fa-solid fa-lightbulb" aria-hidden="true"></i> **Maslahat:** Windows'da `py` launcher aniq versiyani tanlay oladi:
+
+```bash
+py -3.13 --version
+py -3.13 -m pip --version
+```
+
+### Interaktiv tahrirlash va tarix (history)
+
+Ko'plab terminallarda REPL buyruqlar tarixini va oddiy tahrirlashni qo'llab-quvvatlaydi:
+
+- Oldingi buyruqlar: yuqoriga/pastga strelkalar
+- Qator ichida kursorni siljitish: chapga/o'ngga strelkalar
+
+### Bajariladigan skriptlar (Unix-like)
+
+Skriptni to'g'ridan-to'g'ri bajariladigan qilish mumkin:
+
+```python
+#!/usr/bin/env python3
+print("Hello from executable script")
+```
+
+So'ng:
+
+```bash
+chmod +x hello.py
+./hello.py
+```
+
+### Source fayl kodirovkasi
+
+Python 3 standart holatda UTF-8 dan foydalanadi. Shunga qaramay, kodirovkani aniq e'lon qilish mumkin.
+
+Encoding cookie faylning **birinchi yoki ikkinchi qatorida** bo'lishi kerak. Agar shebang ishlatsangiz, encoding cookie'ni 2-qatorga qo'ying:
+
+```python
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+name = "learn python"
+print(name)
+```
+
+Shebang bo'lmasa, uni birinchi qatorga yozishingiz mumkin:
+
+```python
+# -*- coding: utf-8 -*-
+name = "learn python"
+print(name)
+```
+
diff --git a/content/uz/tutorial/basic/04-hello-world-python.md b/content/uz/tutorial/basic/04-hello-world-python.md
new file mode 100644
index 0000000..cc27a60
--- /dev/null
+++ b/content/uz/tutorial/basic/04-hello-world-python.md
@@ -0,0 +1,53 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Hello World (Python)
+order: 4
+permalink: /uz/tutorial/hello-world-python/
+---
+
+<img src="/img/tutorial/4-hello-world-python.webp" alt="Hello World (Python)" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Birinci Python dasturi odatda bitta `print()` chaqiruvidan iborat bo'ladi. `print()` funksiyasi matnni standart chiqishga (terminal yoki konsolga) chiqaradi.
+
+### Asosiy sintaksis
+
+```python
+print("Hello World")
+```
+
+Yuqoridagi skriptni ishga tushirsangiz, Python quyidagini chiqaradi:
+
+`Hello World`
+
+Qavs ichidagi qiymat **argument** deyiladi. String argumentlar qo'shtirnoq ichida bo'lishi kerak: yoki bir tirnoq (`'...'`), yoki qo'sh tirnoq (`"..."`). Ikkalasi ham bir xil:
+
+```python
+print('Hello World')
+print("Hello World")
+```
+
+Shuningdek, sonlar va ifodalarni qo'shtirnoqsiz ham chiqarish mumkin:
+
+```python
+print(42)
+print(10 + 5)
+```
+
+### Indentatsiya
+
+Python kod bloklarini indentatsiya (qator boshidagi bo'sh joy) bilan belgilaydi. Ko'plab tillardagi `{}` qavslar o'rniga Python bir xil indentatsiyaga tayanadi:
+
+```python
+if True:
+    print("This is indented")
+```
+
+Indentatsiya noto'g'ri bo'lsa, `IndentationError` chiqadi.
+
+### Python katta-kichik harflarni farqlaydi
+
+Python case-sensitive. `print()` ishlaydi, lekin `Print()` yoki `PRINT()` `NameError` beradi.
+
+Bu qoida o'zgaruvchi nomlari va funksiya nomlariga ham tegishli. Masalan, `name` va `Name` - ikki xil o'zgaruvchi.
+
diff --git a/content/uz/tutorial/basic/05-python-comments.md b/content/uz/tutorial/basic/05-python-comments.md
new file mode 100644
index 0000000..8088425
--- /dev/null
+++ b/content/uz/tutorial/basic/05-python-comments.md
@@ -0,0 +1,66 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python izohlari (comments)
+order: 5
+permalink: /uz/tutorial/python-comments/
+---
+
+<img src="/img/tutorial/5-komentar-pada-python.webp" alt="Python izohlari (comments)" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Izohlar (comments) - bu source code ichidagi qaydlar bo'lib, Python ularni bajarish vaqtida e'tiborga olmaydi.
+
+Izohlar orqali maqsadni (intent), taxminlarni (assumptions) va muhim detallarni tushuntiring.
+
+### Bir qatorli izohlar
+
+`#` dan foydalaning:
+
+```python
+# Bu izoh
+print("Salom Dunyo")  # Qatordagi izoh
+```
+
+### Ko'p qatorli tushuntirishlar
+
+Python'da alohida "multi-line comment" sintaksisi yo'q. Keng tarqalgan uslub - bir nechta `#` qatorlardan foydalanish:
+
+```python
+# Bu blok nima uchun biror narsa qilishimizni tushuntiradi,
+# faqat kod nima qilishini emas.
+# Izohlarni qisqa va foydali qiling.
+```
+
+Uch tirnoqli matnlar (`""" ... """`) - bu string, haqiqiy comment emas. Odatda docstring uchun ishlatiladi.
+
+### Docstring namunasi
+
+```python
+def greet(name):
+    """Return greeting text for a name."""
+    return f"Hello, {name}"
+```
+
+### To'liq misol
+
+Quyidagi skript comment'lar real kod bilan qanday ishlashini ko'rsatadi. Faqat `print()` chaqiruvlari natija beradi:
+
+```python
+# Salomlashish
+print("Salom Dunyo")
+
+# Quyidagi qator izohga olingan, shuning uchun ishlamaydi
+# print("Bu chop etilmaydi")
+
+print("Bob")    # ismni chop etadi
+print(123)      # raqamni chop etadi
+```
+
+Natija:
+
+```text
+Salom Dunyo
+Bob
+123
+```
+
diff --git a/content/uz/tutorial/basic/06-python-data-types.md b/content/uz/tutorial/basic/06-python-data-types.md
new file mode 100644
index 0000000..23b32d7
--- /dev/null
+++ b/content/uz/tutorial/basic/06-python-data-types.md
@@ -0,0 +1,77 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python ma'lumot turlari
+order: 6
+permalink: /uz/tutorial/python-data-types/
+---
+
+<img src="/img/tutorial/6-tipe-data-pada-python.webp" alt="Python ma'lumot turlari" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Ma'lumot turi (data type) - kompyuter xotirasida axborotni saqlash uchun ishlatiladigan tur.
+
+Pythonning ma'lumot turlari boshqa dasturlash tillari bilan solishtirganda o'ziga xos.
+
+Quyida Python dasturlash tilidagi asosiy ma'lumot turlari keltirilgan:
+
+| Ma'lumot turi | Misol | Izoh |
+| ----------- | ------------------------ | ------------------------------------------------------------------------------------ |
+| Boolean | `True` or `False` | Rost `True` (qiymati `1`) yoki yolg'on `False` (qiymati `0`) |
+| String | `"Let's learn Python"` | Belgilar/matnlar ketma-ketligi ( `"` yoki `'` bilan o'raladi) |
+| Integer | `25` or `1209` | Butun sonlar |
+| Float | `3.14` or `0.99` | O'nlik kasr sonlar |
+| Hexadecimal | `0x9a` or `0x1d3` | Hex formatdagi sonlar (16-lik sanoq tizimi) |
+| Complex | `1 + 5j ` | Haqiqiy va mavhum qismlardan iborat kompleks sonlar |
+| List | `['xyz', 786, 2.23]` | Turli turlarni saqlaydigan ketma-ketlik va uning ichidagi qiymatlar o'zgarishi mumkin |
+| Tuple | `('xyz', 768, 2.23)` | Turli turlarni saqlaydigan ketma-ketlik, lekin ichidagi qiymatlar o'zgarmaydi |
+| Set | `{'apple', 'orange'}` | Tartibsiz (unordered) va takrorlanmaydigan (unique) elementlar to'plami |
+| Dictionary | `{'name': 'adi','id':2}` | Key-value juftliklari ko'rinishidagi ma'lumotlar |
+
+Turli ma'lumot turlarini sinab ko'rish uchun quyidagi Python skriptlarini ishga tushiring.
+
+#### Boolean
+
+```python
+print(True)
+print(False)
+```
+
+#### String (Matn)
+
+```python
+print("Keling Python o'rganamiz")
+print('Python o\'rganish juda oson')
+```
+
+#### Integer va Float (Butun va kasr sonlar)
+
+```python
+print(20)       # butun son
+print(3.14)     # kasr son
+print(0x9a)     # o'n oltilik (154 chop etadi)
+print(5j)       # kompleks son
+```
+
+#### List va Tuple (Ro'yxat va kortej)
+
+```python
+print([1, 2, 3, 4, 5])           # list (o'zgartirish mumkin)
+print(["bir", "ikki", "uch"])
+
+print((1, 2, 3, 4, 5))           # tuple (o'zgartirish mumkin emas)
+print(("bir", "ikki", "uch"))
+```
+
+#### Set va Dictionary (To'plam va lug'at)
+
+```python
+print({1, 2, 3, 4, 5})               # set (takrorlanmas elementlar)
+print({"olma", "apelsin", "mango"})
+
+print({"ism": "Ali", "yosh": 20})     # dictionary (kalit-qiymat)
+
+profil = {"ism": "Vali", "yosh": 21}
+print(profil)
+print(type(profil))  # <class 'dict'>
+```
+
diff --git a/content/uz/tutorial/basic/07-python-variables.md b/content/uz/tutorial/basic/07-python-variables.md
new file mode 100644
index 0000000..28b1fdf
--- /dev/null
+++ b/content/uz/tutorial/basic/07-python-variables.md
@@ -0,0 +1,76 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python o'zgaruvchilari
+order: 7
+permalink: /uz/tutorial/python-variables/
+---
+
+<img src="/img/tutorial/7-variabel-pada-python.webp" alt="Python o'zgaruvchilari" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+O'zgaruvchilar (variables) - qiymatlarni saqlash uchun ajratilgan xotira manzillari. Ya'ni o'zgaruvchi yaratganingizda, xotirada ma'lum joy band qilinadi. O'zgaruvchilar dastur bajarilishi davomida ishlatiladigan ma'lumotlarni saqlaydi va keyinchalik ularning qiymati o'zgartirilishi mumkin.
+
+O'zgaruvchilar turli ma'lumot turlarini saqlashi mumkin. Python'da o'zgaruvchilar dinamik: oldindan ma'lum bir tur bilan e'lon qilish shart emas, va dastur ishlayotganda tur/qiymat o'zgarishi mumkin.
+
+Python o'zgaruvchilarini nomlash bo'yicha asosiy qoidalar:
+
+1. Birinchi belgi harf yoki pastki chiziq `_` bo'lishi kerak.
+2. Keyingi belgilar harf, pastki chiziq `_` yoki raqam bo'lishi mumkin.
+3. O'zgaruvchi nomlari case-sensitive. Masalan, `firstName` va `firstname` - turli o'zgaruvchilar.
+
+Python'da o'zgaruvchi yaratish juda oson: o'zgaruvchi nomini yozing, so'ng `=` belgisi va qiymatni bering.
+
+**O'zgaruvchi yaratish va chiqarish**
+
+```python
+name = "John Doe"
+print(name)
+```
+
+**Qiymat va tur o'zgartirish**
+
+O'zgaruvchining qiymati va hatto turi dastur ishlayotganda o'zgarishi mumkin:
+
+```python
+age = 20
+print(age)
+print(type(age))
+
+age = "yigirma bir"
+print(age)
+print(type(age))
+```
+
+**O'zgaruvchilarni birlashtirish**
+
+```python
+first_name = "Bob"
+last_name = "Smith"
+full_name = first_name + " " + last_name
+
+age = 22
+hobby = "Suzish"
+
+print("Ism:", full_name)
+print("Yosh:", age)
+print("Hobbi:", hobby)
+```
+
+**To'g'ri o'zgaruvchi nomlari**
+
+```python
+my_variable = "Salom"
+_private = "Hi"
+count2 = 100
+print(my_variable, _private, count2)
+```
+
+**O'zgaruvchilar bilan hisoblash**
+
+```python
+length = 10
+width = 5
+area = length * width
+print("Yuza:", area)
+```
+
diff --git a/content/uz/tutorial/basic/08-python-operators.md b/content/uz/tutorial/basic/08-python-operators.md
new file mode 100644
index 0000000..6abf503
--- /dev/null
+++ b/content/uz/tutorial/basic/08-python-operators.md
@@ -0,0 +1,268 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python operatorlari
+order: 8
+permalink: /uz/tutorial/python-operators/
+---
+
+<img src="/img/tutorial/8-operator-pada-python.webp" alt="Python operatorlari" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Operatorlar operand (qiymat)lar ustida amallar bajarishga xizmat qiladigan konstruksiyalardir.
+
+Masalan, 3 + 2 = 5 amali. Bu yerda `3` va `2` - operandlar, `+` esa operator.
+
+Python dasturlash tili turli operatorlarni qo'llab-quvvatlaydi, jumladan:
+
+- [Arifmetik operatorlar](#arithmetic-operators)
+- [Taqqoslash (relational) operatorlari](#comparison-operators)
+- [Tayinlash (assignment) operatorlari](#assignment-operators)
+- [Mantiqiy operatorlar](#logical-operators)
+- [Bitwise operatorlar](#bitwise-operators)
+- [Membership operatorlar](#membership-operators)
+- [Identity operatorlar](#identity-operators)
+
+### Arifmetik operatorlar <a name="arithmetic-operators"></a>
+
+| Operator | Misol | Izoh |
+| -------------------- | ------------- | ---------------------------------------------------------------------------------------------------------- |
+| Qo'shish `+` | `1 + 3 = 4` | Operand qiymatlarini qo'shadi |
+| Ayirish `-` | `4 - 1 = 3` | Chap operand qiymatidan o'ng operand qiymatini ayiradi |
+| Ko'paytirish `*` | `2 * 4 = 8` | Operandlarni ko'paytiradi |
+| Bo'lish `/` | `10 / 5 = 2` | Chap operandni o'ng operandga bo'ladi |
+| Qoldiq `%` | `11 % 2 = 1` | Bo'lishdan qolgan qoldiqni qaytaradi |
+| Daraja `**` | `8 ** 2 = 64` | Chap operandni o'ng operand darajasiga ko'taradi |
+| Floor bo'lish `//` | `10 // 3 = 3` | Bo'lish, lekin kasr qismi tashlab yuboriladi |
+
+**Qo'shish** (`+`)
+
+```python
+print(13 + 2)
+apple = 7
+orange = 9
+fruit = apple + orange
+print(fruit)
+```
+
+**Ayirish** (`-`)
+
+```python
+debt = 10000
+pay = 5000
+remaining_debt = debt - pay
+print("Qolgan qarz:", remaining_debt)
+```
+
+**Ko'paytirish** (`*`)
+
+```python
+length = 15
+width = 8
+area = length * width
+print("Yuza:", area)
+```
+
+**Bo'lish** (`/`)
+
+```python
+cake = 16
+children = 4
+cake_per_child = cake / children
+print("Har bir bolaga:", cake_per_child)
+```
+
+**Qoldiq** (`%`)
+
+```python
+print(14 % 5)
+print(10 % 3)
+print(20 % 4)
+```
+
+**Daraja** (`**`)
+
+```python
+print(8 ** 2)
+print(2 ** 10)
+print(5 ** 3)
+```
+
+**Floor bo'lish** (`//`)
+
+```python
+print(10 // 3)
+print(7 // 2)
+print(-10 // 3)
+```
+
+### Taqqoslash (relational) operatorlari <a name="comparison-operators"></a>
+
+Taqqoslash operatorlari har bir operand qiymatini solishtirish uchun ishlatiladi.
+
+| Operator | Misol | Izoh |
+| --------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
+| Teng `==` | `1 == 1` | Operandlar qiymati teng bo'lsa `True` bo'ladi. |
+| Teng emas `!=` | `2 != 2` | Teng bo'lmasa `True`, teng bo'lsa `False`. |
+| Katta `>` | `5 > 3` | Chap operand o'ng operanddan katta bo'lsa `True`. |
+| Kichik `<` | `5 < 3` | Chap operand o'ng operanddan kichik bo'lsa `True`. |
+| Katta yoki teng `>=` | `5 >= 3` | Chap operand katta yoki teng bo'lsa `True`. |
+| Kichik yoki teng `<=` | `5 <= 3` | Chap operand kichik yoki teng bo'lsa `True`. |
+
+Quyida Python'da taqqoslash operatorlaridan foydalanish misoli:
+
+```python
+# Teng
+print(1 == 1)  # True
+print(1 == 2)  # False
+
+# Teng emas
+print(2 != 2)  # False
+print(2 != 3)  # True
+
+# Katta
+print(5 > 3)   # True
+
+# Kichik
+print(5 < 3)   # False
+
+# Katta yoki teng
+print(5 >= 3)  # True
+
+# Kichik yoki teng
+print(5 <= 3)  # False
+```
+
+### Tayinlash (assignment) operatorlari <a name="assignment-operators"></a>
+
+Tayinlash operatorlari o'zgaruvchiga qiymat berish yoki uni yangilash uchun ishlatiladi.
+
+| Operator | Misol | Izoh |
+| --------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| Teng `=` | `a = 1` | O'ng tomondagi qiymatni chap tomondagi o'zgaruvchiga beradi. |
+| Qo'shib tayinlash `+=` | `a += 2` | O'zgaruvchiga o'z qiymati + o'ng tomondagi qiymatni beradi. |
+| Ayirib tayinlash `-=` | `a -= 2` | O'zgaruvchiga o'z qiymati - o'ng tomondagi qiymatni beradi. |
+| Ko'paytirib tayinlash `*=` | `a *= 2` | O'zgaruvchiga o'z qiymati * o'ng tomondagi qiymatni beradi. |
+| Bo'lib tayinlash `/=` | `a /= 4` | O'zgaruvchiga o'z qiymati / o'ng tomondagi qiymatni beradi. |
+| Qoldiq bilan tayinlash `%=` | `a %= 3` | O'zgaruvchiga bo'lishdan qolgan qoldiq qiymatini beradi. |
+| Darajaga tayinlash `**=` | `a **= 3` | O'zgaruvchiga o'z qiymatini darajaga ko'tarilgan holatini beradi. |
+| Floor bo'lib tayinlash `//=` | `a //= 3` | Floor bo'lish natijasini chap operandga qayta tayinlaydi. |
+
+```python
+x = 10
+print("x =", x)
+
+x += 5
+print("x += 5 ->", x)
+
+x -= 3
+print("x -= 3 ->", x)
+
+x *= 2
+print("x *= 2 ->", x)
+
+x //= 4
+print("x //= 4 ->", x)
+```
+
+### Mantiqiy operatorlar <a name="logical-operators"></a>
+
+Mantiqiy operatorlar shartli ifodalarni birlashtirish uchun ishlatiladi.
+
+| Operator | Misol | Izoh |
+| -------- | --------------------- | ------------------------------------------------------------ |
+| `and` | `True and False` | Ikkala shart ham `True` bo'lsa `True` qaytaradi |
+| `or` | `True or False` | Kamida bitta shart `True` bo'lsa `True` qaytaradi |
+| `not` | `not True` | Natijani teskarisiga o'zgartiradi |
+
+```python
+print(True and False)
+print(True or False)
+print(not True)
+
+x = 10
+print(x > 5 and x < 20)
+print(x > 5 or x > 20)
+print(not(x > 5 and x < 20))
+```
+
+### Bitwise operatorlar <a name="bitwise-operators"></a>
+
+Bitwise operatorlar butun sonlarning alohida bitlari ustida amallar bajaradi.
+
+| Operator | Nomi | Misol | Izoh |
+| -------- | ----------- | ----------- | ------------------------------------------------- |
+| `&` | AND | `10 & 4` | Ikkala bit ham 1 bo'lsa 1 qo'yadi |
+| `\|` | OR | `10 \| 4` | Kamida bitta bit 1 bo'lsa 1 qo'yadi |
+| `^` | XOR | `10 ^ 4` | Faqat bitta bit 1 bo'lsa 1 qo'yadi |
+| `~` | NOT | `~10` | Barcha bitlarni teskari qiladi |
+| `<<` | Chapga surish | `10 << 2` | Bitlarni chapga suradi |
+| `>>` | O'ngga surish | `10 >> 2` | Bitlarni o'ngga suradi |
+
+```python
+a = 10  # ikkilik: 1010
+b = 4   # ikkilik: 0100
+
+print(a & b)    # 0 (AND)
+print(a | b)    # 14 (OR)
+print(a ^ b)    # 14 (XOR)
+print(~a)       # -11 (NOT)
+print(a << 2)   # 40 (chapga surish)
+print(a >> 2)   # 2 (o'ngga surish)
+```
+
+### Membership operatorlar <a name="membership-operators"></a>
+
+Membership operatorlar qiymat ketma-ketlikda (string, list, tuple) mavjudligini tekshirish uchun ishlatiladi.
+
+| Operator | Misol | Izoh |
+| ---------- | ----------------------- | ---------------------------------------------------------------- |
+| `in` | `"a" in "apple"` | Qiymat ketma-ketlikda topilsa `True` qaytaradi |
+| `not in` | `"b" not in "apple"` | Qiymat ketma-ketlikda **topilmasa** `True` qaytaradi |
+
+```python
+fruits = ["apple", "banana", "cherry"]
+
+print("banana" in fruits)
+print("mango" in fruits)
+print("mango" not in fruits)
+```
+
+### Identity operatorlar <a name="identity-operators"></a>
+
+Identity operatorlar ikki o'zgaruvchi xotirada bir xil ob'yektga ishora qilishini tekshiradi (faqat qiymat emas, balki ob'yektning o'zi).
+
+| Operator | Misol | Izoh |
+| ---------- | ----------- | ---------------------------------------------------------------- |
+| `is` | `a is b` | Ikkala o'zgaruvchi bir xil ob'yektga ishora qilsa `True` qaytaradi |
+| `is not` | `a is not b`| Ikkala o'zgaruvchi **turli** ob'yektlarga ishora qilsa `True` qaytaradi |
+
+```python
+a = [1, 2, 3]
+b = a
+c = [1, 2, 3]
+
+print(a is b)
+print(a is c)
+print(a == c)
+print(a is not c)
+```
+
+### Python'da operatorlar ustuvorligi
+
+Yuqoridagi operatorlarning har birida ustuvorlik (prioritet) bor: avval yuqori prioritetdagilar bajariladi, keyin qolganlari.
+
+| Operator | Tavsif |
+| --------------------------------- | ------------------------ |
+| `**` | Arifmetik |
+| `~, +, -` | Bitwise |
+| `*, /, %, //` | Arifmetik |
+| `+, -` | Arifmetik |
+| `>>, <<` | Bitwise |
+| `&` | Bitwise |
+| `^` | Bitwise |
+| `<=, <, >, >=` | Taqqoslash |
+| `==, !=` | Taqqoslash |
+| `=, %=, /=, //=, -=, +=, *=, **=` | Tayinlash |
+| `is, is not` | Identity |
+| `in, not in` | Membership |
+| `not, or, and` | Mantiqiy |
diff --git a/content/uz/tutorial/basic/09-python-conditions.md b/content/uz/tutorial/basic/09-python-conditions.md
new file mode 100644
index 0000000..495fd46
--- /dev/null
+++ b/content/uz/tutorial/basic/09-python-conditions.md
@@ -0,0 +1,141 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python shartlari (if/else)
+order: 9
+permalink: /uz/tutorial/python-conditions/
+---
+
+<img src="/img/tutorial/9-kondisi-if-else-python.webp" alt="Python if else shartlari" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+### If sharti
+
+Shartlar (`if` condition) dastur bajarilishi davomida yuzaga keladigan holatlarni tekshirish va shu holatga qarab qanday amal bajarilishini tanlash uchun ishlatiladi.
+
+Python'da bir nechta shart operatorlari bor: `if`, `else` va `elif`. `if` sharti shart `True` bo'lsa kodni bajaradi.
+
+Agar shart `False` bo'lsa, `if` bloki bajarilmaydi.
+
+Quyida Python'da `if` shartidan foydalanish misoli:
+
+```python
+# If sharti - shart rost bo'lsa kod bajariladi
+
+ball = 9
+
+# Shart rost bo'lsa, quyidagi buyruq bajariladi
+if(ball > 7):
+    print("To'qqiz yettidan katta")  # Rost shart, bajariladi
+
+# Shart yolg'on bo'lsa, quyidagi buyruq bajarilmaydi
+if(ball > 10):
+    print("To'qqiz o'ndan katta")  # Yolg'on shart, bajarilmaydi
+```
+
+Yuqoridagi misolda dastur ishga tushirilsa, birinchi `if` `True` bo'lgani uchun `"To'qqiz yettidan katta"` matni bir marta chiqariladi. Ikkinchi `if` esa `False`, shuning uchun u yerdagi `print(...)` bajarilmaydi.
+
+### `if` `else` sharti
+
+`if` `else` sharti nafaqat shartga mos bo'lsa nima bajarilishini, balki shartga mos bo'lmasa qaysi kod bajarilishini ham belgilaydi.
+
+`if` `else` shartida: shart `True` bo'lsa `if` ichidagi kod ishlaydi, aks holda (`False`) `else` ichidagi kod ishlaydi.
+
+Quyida Python'da `if` `else` shartidan foydalanish misoli:
+
+```python
+# Shart rost bo'lsa if bloki, yolg'on bo'lsa else bloki bajariladi
+
+ball = 3
+
+if(ball > 7):
+    print("Tabriklaymiz, siz o'tdingiz")
+else:
+    print("Kechirasiz, siz o'tmadingiz")
+```
+
+Yuqoridagi misolda `if` sharti `False` bo'lgani uchun dastur `"Kechirasiz, siz o'tmadingiz"` matnini chiqaradi.
+
+### Elif sharti
+
+`elif` - bu `if` shartining davomidir. `elif` orqali bir nechta ehtimoliy holatlardan birini tanlaydigan kod yozish mumkin. `else` bilan o'xshash, farqi shundaki, `elif` bir nechta bo'lishi mumkin.
+
+Quyida Python'da `elif` shartidan foydalanish misoli:
+
+```python
+# Elif shartidan foydalanish misoli
+
+bugun = "Yakshanba"
+
+if(bugun == "Dushanba"):
+    print("Men darsga boraman")
+elif(bugun == "Seshanba"):
+    print("Men darsga boraman")
+elif(bugun == "Chorshanba"):
+    print("Men darsga boraman")
+elif(bugun == "Payshanba"):
+    print("Men darsga boraman")
+elif(bugun == "Juma"):
+    print("Men darsga boraman")
+elif(bugun == "Shanba"):
+    print("Men darsga boraman")
+elif(bugun == "Yakshanba"):
+    print("Men dam olaman")
+```
+
+Yuqoridagi misolda dastur `"Men dam olaman"` matnini chiqaradi.
+
+### `match case` (Python 3.10+)
+
+Python 3.10 dan boshlab `match-case` orqali **Structural Pattern Matching** mavjud. Bu boshqa tillardagi `switch-case` ga o'xshaydi va uzun `elif` zanjirlarini almashtirish uchun qulay.
+
+```python
+# Match-case misoli (Python 3.10+)
+
+bugun = "Yakshanba"
+
+match bugun:
+    case "Dushanba" | "Seshanba" | "Chorshanba" | "Payshanba" | "Juma":
+        print("Men darsga boraman")
+    case "Shanba":
+        print("Men uy vazifasini qilaman")
+    case "Yakshanba":
+        print("Men dam olaman")
+    case _:
+        print("Noto'g'ri kun")
+```
+
+Pattern matching yanada murakkab ma'lumot tuzilmalarini ham moslashtirish (match) uchun ishlatilishi mumkin:
+
+```python
+# Ma'lumot tuzilmasini moslashtirish
+def buyruq_bajar(buyruq):
+    match buyruq.split():
+        case ["chiqish"]:
+            print("Dasturdan chiqish")
+        case ["salom", ism]:
+            print(f"Salom, {ism}!")
+        case ["qoshish", x, y]:
+            print(f"Natija: {int(x) + int(y)}")
+        case _:
+            print("Noma'lum buyruq")
+
+buyruq_bajar("salom Ali")       # Natija: Salom, Ali!
+buyruq_bajar("qoshish 5 3")     # Natija: Natija: 8
+```
+
+### Ternary operator (bir qatorli shart)
+
+Python shartni bir qatorga yozish (conditional expression, ternary operator) ni ham qo'llab-quvvatlaydi:
+
+```python
+# Ternary operator
+yosh = 20
+holat = "Katta" if yosh >= 18 else "Bola"
+print(holat)  # Natija: Katta
+
+# Yana bir misol
+ball = 85
+natija = "O'tdi" if ball >= 60 else "Yiqildi"
+print(natija)  # Natija: O'tdi
+```
+
diff --git a/content/uz/tutorial/basic/10-python-loops.md b/content/uz/tutorial/basic/10-python-loops.md
new file mode 100644
index 0000000..91ad962
--- /dev/null
+++ b/content/uz/tutorial/basic/10-python-loops.md
@@ -0,0 +1,83 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python tsikllari (loops)
+order: 10
+permalink: /uz/tutorial/python-loops/
+---
+
+<img src="/img/tutorial/10-tutorial-loop-pada-python.webp" alt="Python tsikllari - while, for, nested loop" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Odatda dasturlash tillarida buyruqlar ketma-ket bajariladi: funksiya ichidagi birinchi buyruq avval, keyingisi undan keyin va hokazo. Ammo ba'zi vaziyatlarda bir xil ishni ko'p marta takrorlash kerak bo'ladi. Buni qo'lda yuzlab yoki minglab qator kod yozib bajarish samarasiz. Shuning uchun Python'da takrorlash (loop) ishlatiladi.
+
+Python'da takrorlash 3 turga bo'linadi:
+
+- `while` loop
+- `for` loop
+- Nested loop
+
+### `while` loop
+
+`while` loop shart `True` bo'lib turganida buyruqlarni qayta-qayta bajaradi.
+
+Quyida `while` loop misoli:
+
+```python
+# While loop misoli
+
+hisoblagich = 0
+while (hisoblagich < 9):
+  print("Hisob: ", hisoblagich)
+  hisoblagich = hisoblagich + 1
+
+print("Xayr!")
+```
+
+### `for` loop
+
+Python'dagi `for` list yoki string kabi ketma-ketlik (sequence) elementlarini aylanish (iterate) uchun ishlatiladi.
+
+Quyida `for` loop misoli:
+
+```python
+# Oddiy for loop misoli
+sonlar = [1, 2, 3, 4, 5]
+for x in sonlar:
+  print(x)
+
+# For loop misoli
+mevalar = ["ananas", "olma", "apelsin"]
+for meva in mevalar:
+  print("Men yeyishni yoqtiraman:", meva)
+```
+
+### Nested loop
+
+Python'da bir loop ichida boshqa loop ishlatish mumkin (nested loop). Quyidagi misollar tushuncha uchun:
+
+#### Nested `for` loop
+
+```python
+# Koordinata juftlarini chop etish
+for qator in range(1, 4):
+  for ustun in range(1, 4):
+    print(f"({qator},{ustun})", end=" ")
+  print()
+```
+
+#### Nested `while` loop
+
+```python
+# Ko'paytirish jadvali 1..3
+qator = 1
+while qator <= 3:
+  ustun = 1
+  while ustun <= 3:
+    print(f"{qator}x{ustun}={qator * ustun}", end="  ")
+    ustun += 1
+  print()
+  qator += 1
+
+print("Xayr!")
+```
+
diff --git a/content/uz/tutorial/basic/11-python-numbers.md b/content/uz/tutorial/basic/11-python-numbers.md
new file mode 100644
index 0000000..c546e8b
--- /dev/null
+++ b/content/uz/tutorial/basic/11-python-numbers.md
@@ -0,0 +1,135 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python son turlari (numbers)
+order: 11
+permalink: /uz/tutorial/python-numbers/
+---
+
+<img src="/img/tutorial/11-tipe-data-number-pada-python.webp" alt="Python son turlari - int, float, complex" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Python'da 3 ta built-in son turi bor:
+
+- `int` (butun son)
+- `float` (o'nlik kasr son)
+- `complex` (kompleks son)
+
+Sonlar immutable: son qiymatini "o'zgartirish" aslida yangi obyekt yaratadi.
+
+| Tur | Misollar |
+| -------- | ------------------------- |
+| `int` | `20`, `-13`, `0`, `0x56` |
+| `float` | `0.1`, `1.20`, `-92.0`, `6.02e23` |
+| `complex` | `3+4j`, `35j`, `3.12e-12j` |
+
+> Python 3 da `020` kabi integer literal'lar noto'g'ri. O'nlik uchun `20`, sakkizlik (octal) uchun `0o24` ishlating.
+
+### Python son turlarini o'zgartirish (conversion)
+
+O'zgartirish uchun o'rnatilgan konstruktorlardan foydalaning:
+
+- `int(x)` `x` ni butun songa o'giradi.
+- `float(x)` `x` ni o'nlik kasr songa o'giradi.
+- `complex(x)` real qismi `x` bo'lgan kompleks son beradi.
+- `complex(x, y)` `x + yj` ko'rinishidagi kompleks son beradi.
+
+### Python matematik funksiyalari
+
+Python built-in funksiyalar va `math` moduli orqali matematik amallarni taqdim etadi.
+
+| Nomi | Ishlatilishi | Izoh |
+| ------------ | ----------------- | -------------------------------------------------------------------- |
+| Absolyut | `abs(x)` | `x` ning absolyut qiymati |
+| Daraja | `pow(x, y)` | `x ** y` ga teng |
+| Yaxlitlash | `round(x, n)` | `n` ta raqamgacha yaxlitlaydi (bo'lmasa eng yaqin butun songa) |
+| Maksimum | `max(a, b, ...)` | Eng katta qiymat |
+| Minimum | `min(a, b, ...)` | Eng kichik qiymat |
+| Kvadrat ildiz | `math.sqrt(x)` | `x` ning kvadrat ildizi |
+| Ceiling | `math.ceil(x)` | `>= x` bo'lgan eng kichik butun son |
+| Floor | `math.floor(x)` | `<= x` bo'lgan eng katta butun son |
+| Logarifm | `math.log(x)` | Natural logarifm |
+
+```python
+import math
+
+print(abs(-9))
+print(pow(2, 5))
+print(round(2.675, 2))
+print(math.sqrt(16))
+```
+
+### Python'da tasodifiy sonlar (random)
+
+`random` moduli simulyatsiya, test va o'yinlarda ko'p ishlatiladi.
+
+| Nomi | Ishlatilishi | Izoh |
+| --------- | ----------------------------------- | ----------------------------------------------------------- |
+| Choice | `choice(seq)` | Ketma-ketlikdan tasodifiy element |
+| RandRange | `randrange(start, stop, step)` | Range'dan tasodifiy qiymat |
+| Random | `random()` | `[0.0, 1.0)` oralig'ida tasodifiy float |
+| Seed | `seed(x)` | Random seed'ni o'rnatish |
+| Shuffle | `shuffle(lst)` | List'ni joyida (in place) aralashtirish |
+| Uniform | `uniform(x, y)` | `[x, y]` oralig'ida tasodifiy float |
+
+### Python trigonometrik funksiyalari
+
+`math` trigonometrik yordamchi funksiyalarni beradi:
+
+| Nomi | Ishlatilishi | Izoh |
+| ------- | --------------------- | ------------------------------------------------- |
+| Cosine | `math.cos(x)` | Radionlarda `x` ning kosinusi |
+| Sine | `math.sin(x)` | Radionlarda `x` ning sinusi |
+| Tangent | `math.tan(x)` | Radionlarda `x` ning tangensi |
+| Degrees | `math.degrees(x)` | Radionlarni gradusga o'tkazish |
+| Radians | `math.radians(x)` | Graduslarni radianlarga o'tkazish |
+
+### Python matematik konstantalari
+
+| Nomi | Ishlatilishi | Izoh |
+| ---- | ---------- | ----------------------- |
+| Pi | `math.pi` | Pi matematik konstantasi |
+| e | `math.e` | e matematik konstantasi |
+
+### Floating-point arifmetika: ifodalanish va cheklovlar
+
+Floating-point sonlar ikkilik (binary) yaqinlashuv (approximation) bo'lgani uchun ba'zi o'nlik qiymatlar aniq ifodalanmaydi.
+
+```python
+print(0.1 + 0.1 + 0.1)     # 0.30000000000000004
+print(0.1 + 0.1 + 0.1 == 0.3)  # False
+```
+
+Xavfsizroq taqqoslash:
+
+```python
+import math
+
+print(math.isclose(0.1 + 0.1 + 0.1, 0.3))  # True
+```
+
+Aniq o'nlik arifmetika (masalan, pul) uchun `decimal` dan foydalaning:
+
+```python
+from decimal import Decimal
+
+price = Decimal("0.1") + Decimal("0.1") + Decimal("0.1")
+print(price == Decimal("0.3"))  # True
+```
+
+Aniq kasrlar uchun `fractions.Fraction` ishlating:
+
+```python
+from fractions import Fraction
+
+print(Fraction(1, 10) * 3 == Fraction(3, 10))  # True
+```
+
+### `round()` haqida eslatma
+
+Python "round half to even" qoidasidan foydalanadi:
+
+```python
+print(round(0.5))  # 0
+print(round(1.5))  # 2
+print(round(2.5))  # 2
+```
diff --git a/content/uz/tutorial/basic/12-python-strings.md b/content/uz/tutorial/basic/12-python-strings.md
new file mode 100644
index 0000000..78a317a
--- /dev/null
+++ b/content/uz/tutorial/basic/12-python-strings.md
@@ -0,0 +1,227 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python satrlar (string)
+order: 12
+permalink: /uz/tutorial/python-strings/
+---
+
+<img src="/img/tutorial/12-tipe-data-string-python.webp" alt="Python string ma'lumot turi" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+String - bu Unicode belgilar ketma-ketligi. Python'da string'larni bir tirnoq, qo'sh tirnoq yoki uch tirnoq (triple quotes) bilan yozish mumkin.
+
+```python
+print("Hello World")
+```
+
+### Yonma-yon yozilgan string literal'lar
+
+Python yonma-yon yozilgan string **literal**larni avtomatik birlashtiradi (concatenate qiladi):
+
+```python
+text = "Py" "thon"
+print(text)  # Python
+```
+
+Bu uzun string'larni bir nechta qatorga bo'lib yozishda qulay:
+
+```python
+message = (
+    "This is a long message "
+    "split across multiple lines."
+)
+print(message)
+```
+
+Bu faqat literal'lar uchun ishlaydi. O'zgaruvchilar uchun `+` yoki f-string ishlating.
+
+### String ichidan qiymat olish
+
+Indexing va slicing'dan foydalaning:
+
+```python
+name = "John Doe"
+message = "John Doe learns Python"
+
+print("name[0]:", name[0])
+print("message[1:4]:", message[1:4])
+```
+
+String'lar manfiy index'larni (oxiridan sanash) va `len()` ni ham qo'llab-quvvatlaydi:
+
+```python
+word = "Python"
+
+print(word[-1])   # n
+print(word[-3:])  # hon
+print(len(word))  # 6
+```
+
+### String'larni yangilash
+
+String'lar immutable. String'ni "o'zgartirish" uchun yangisini yaratasiz:
+
+```python
+message = "Hello World"
+print(message[:6] + "Python")  # Hello Python
+```
+
+### Keng tarqalgan escape belgilar
+
+| Escape | Ma'nosi |
+| ---------------- | ------------------------------------ |
+| `\n` | Yangi qator |
+| `\t` | Gorizontal tab |
+| `\r` | Carriage return |
+| `\"` | Qo'sh tirnoq |
+| `\'` | Bir tirnoq |
+| `\\` | Backslash |
+| `\b` | Backspace |
+| `\f` | Form feed |
+| `\v` | Vertical tab |
+| `\a` | Bell / alert |
+| `\0` | Null belgi |
+| `\xhh` | Hex qiymat bo'yicha belgi (masalan `\x41` bu `A`) |
+| `\uXXXX` | Unicode belgi (16-bit, masalan `\u00E9` bu `e`) |
+| `\UXXXXXXXX` | Unicode belgi (32-bit) |
+| `\ooo` | Octal qiymat bo'yicha belgi (masalan `\101` bu `A`) |
+
+### `print()` va string ifodasi
+
+`print()` matnni ko'rsatadi, `repr()` esa string ifodasini (escape sequence'lar bilan) qaytaradi:
+
+```python
+text = "First line.\nSecond line."
+
+print(text)
+print(repr(text))
+```
+
+### String operatorlari
+
+Agar `a = "Hello"` va `b = "Python"` bo'lsa:
+
+| Operator | Misol | Natija |
+| --------- | ------------------ | ----------------------------- |
+| `+` | `a + b` | `HelloPython` |
+| `*` | `a * 2` | `HelloHello` |
+| `[]` | `a[1]` | `e` |
+| `[:]` | `a[1:4]` | `ell` |
+| `in` | `"H" in a` | `True` |
+| `not in` | `"Z" not in a` | `True` |
+
+Raw string'lar regex va Windows path'lari uchun foydali:
+
+```python
+path = r"C:\new_folder\test"
+print(path)
+```
+
+> <i class="fa-solid fa-circle-info" aria-hidden="true"></i> **Eslatma:** Raw string literal bitta backslash bilan tugay olmaydi (masalan `r"C:\new_folder\"` noto'g'ri). Agar oxirida backslash kerak bo'lsa, oddiy string ishlating: `"C:\\new_folder\\"`.
+
+### String formatlash
+
+Python bir nechta formatlash usullarini qo'llab-quvvatlaydi:
+
+```python
+name = "Zara"
+weight = 21
+
+# f-string (tavsiya etiladi)
+print(f"My name is {name} and weight is {weight} kg")
+
+# str.format
+print("My name is {} and weight is {} kg".format(name, weight))
+
+# %-formatting (legacy, lekin ishlaydi)
+print("My name is %s and weight is %d kg" % (name, weight))
+```
+
+### `%` formatlash bo'yicha tezkor jadval
+
+| Specifier | Ma'nosi | Misol |
+| --------- | ------- | ------- |
+| `%s` | String | `"%s" % "Python"` |
+| `%d` | Signed integer | `"%d" % 42` |
+| `%i` | Signed integer (`%d` bilan bir xil) | `"%i" % 42` |
+| `%f` | Float | `"%f" % 3.14` |
+| `%.2f` | Aniqlik bilan float | `"%.2f" % 3.14159` |
+| `%e` | Eksponensial (kichik harf) | `"%e" % 0.001` |
+| `%E` | Eksponensial (katta harf) | `"%E" % 0.001` |
+| `%g` | `%f` va `%e` dan qisqaroq ko'rinish | `"%g" % 0.001` |
+| `%c` | Bitta belgi | `"%c" % 65` |
+| `%x` | Hex (kichik harf) | `"%x" % 255` |
+| `%X` | Hex (katta harf) | `"%X" % 255` |
+| `%o` | Octal | `"%o" % 8` |
+
+### Triple quotes
+
+Uch tirnoq multiline matn uchun qulay:
+
+```python
+text = """This is a long string
+that spans multiple lines.
+It can contain \t and \n characters too."""
+print(text)
+```
+
+### Python 3 da Unicode string'lar
+
+Python 3 string'lari standart holatda Unicode (UTF-8). Python 2 da Unicode string uchun `u` prefiksi kerak edi, Python 3 da bunga hojat yo'q.
+
+```python
+greeting = "Hello"
+city = "London"
+emoji = "\U0001F600"
+print(greeting, city, emoji)
+```
+
+Unicode escape'laridan foydalanish yoki belgini bevosita yozish mumkin:
+
+```python
+print("\u00E9")         # e (Unicode escape belgisi)
+print("cafe\u0301")     # urg'uli cafe
+```
+
+### Built-in string metodlar
+
+| Metod | Izoh |
+| ---------------------------------------------- | ---------------------------------------------------------------- |
+| `capitalize()` | Birinchi harfni katta, qolganini kichik qiladi |
+| `center(width, fillchar)` | `width` ichida markazga tekislaydi, `fillchar` bilan to'ldiradi |
+| `count(sub, start, end)` | `sub` nechta uchrashini sanaydi |
+| `endswith(suffix, start, end)` | String `suffix` bilan tugasa `True` |
+| `find(sub, start, end)` | `sub` ning eng kichik indeksini qaytaradi, topilmasa `-1` |
+| `index(sub, start, end)` | `find()` kabi, lekin topilmasa `ValueError` beradi |
+| `isalnum()` | Hammasi harf/raqam bo'lsa `True` |
+| `isalpha()` | Hammasi harf bo'lsa `True` |
+| `isdigit()` | Hammasi raqam bo'lsa `True` |
+| `isdecimal()` | Hammasi decimal bo'lsa `True` |
+| `islower()` | Harfli belgilar kichik bo'lsa `True` |
+| `isnumeric()` | Hammasi numeric bo'lsa `True` |
+| `isspace()` | Hammasi bo'sh joy bo'lsa `True` |
+| `istitle()` | Title-case bo'lsa `True` |
+| `isupper()` | Harfli belgilar katta bo'lsa `True` |
+| `join(iterable)` | Iterable'ni ajratuvchi sifatida string bilan birlashtiradi |
+| `ljust(width, fillchar)` | Chapga tekislaydi |
+| `lower()` | Hammasini kichik harfga o'giradi |
+| `lstrip(chars)` | Boshidagi belgilarni olib tashlaydi (default: whitespace) |
+| `replace(old, new, count)` | `old` ni `new` ga almashtiradi |
+| `rfind(sub, start, end)` | O'ngdan qidirib `find()` kabi ishlaydi |
+| `rindex(sub, start, end)` | O'ngdan qidirib `index()` kabi ishlaydi |
+| `rjust(width, fillchar)` | O'ngga tekislaydi |
+| `rstrip(chars)` | Oxiridagi belgilarni olib tashlaydi (default: whitespace) |
+| `split(sep, maxsplit)` | Ajratuvchi bo'yicha listga bo'ladi |
+| `splitlines()` | Qator chegaralari bo'yicha bo'ladi |
+| `startswith(prefix, start, end)` | String `prefix` bilan boshlansa `True` |
+| `strip(chars)` | Bosh va oxirini tozalaydi |
+| `swapcase()` | Kichikni kattaga, kattani kichikka o'zgartiradi |
+| `title()` | Har bir so'zning birinchi harfini kattalashtiradi |
+| `upper()` | Hammasini katta harfga o'giradi |
+| `zfill(width)` | Chap tomondan nol bilan to'ldiradi |
+
+```python
+text = "  learn python  "
+print(text.strip().title())  # Learn Python (natija)
+```
+
diff --git a/content/uz/tutorial/basic/13-python-f-strings.md b/content/uz/tutorial/basic/13-python-f-strings.md
new file mode 100644
index 0000000..dd6b980
--- /dev/null
+++ b/content/uz/tutorial/basic/13-python-f-strings.md
@@ -0,0 +1,209 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python f-string'lar
+order: 13
+permalink: /uz/tutorial/python-f-strings/
+---
+
+F-string'lar (formatted string literals) - Python'da string formatlashning zamonaviy va eng samarali usuli. Python 3.6 da kiritilgan f-string'lar toza sintaksis va yaxshi unumdorlik sababli string formatlash uchun de-fakto standartga aylandi.
+
+### F-string asosiy sintaksisi
+
+F-string'lar qo'shtirnoqdan oldin `f` yoki `F` harfi bilan boshlanadi, Python ifodalari esa jingalak qavslar `{}` ichida yoziladi:
+
+```python
+ism = "Ali"
+yosh = 25
+
+# F-string ishlatish
+print(f"Salom, mening ismim {ism} va yoshim {yosh}")
+# Natija: Salom, mening ismim Ali va yoshim 25
+
+# Katta F harfi bilan ham ishlaydi
+print(F"Xush kelibsiz, {ism}!")
+```
+
+### Eski usullar bilan solishtirish
+
+F-string'lar paydo bo'lishidan oldin string formatlashning bir nechta yo'li bor edi:
+
+```python
+ism = "Vali"
+ball = 95.5
+
+# Eski usul 1: Birlashtirish (+)
+print("Ism: " + ism + ", Ball: " + str(ball))
+
+# Eski usul 2: % formatlash
+print("Ism: %s, Ball: %.1f" % (ism, ball))
+
+# Eski usul 3: .format()
+print("Ism: {}, Ball: {}".format(ism, ball))
+
+# Zamonaviy usul: f-string (tavsiya etiladi)
+print(f"Ism: {ism}, Ball: {ball}")
+```
+
+F-string'lar o'qilishi oson va bajarilishi tezroq!
+
+### F-string ichida ifodalar
+
+F-string jingalak qavslar ichida istalgan Python ifodasini hisoblay oladi:
+
+```python
+# Matematik amallar
+a = 10
+b = 5
+print(f"Qo'shish: {a + b}")        # Natija: Qo'shish: 15
+print(f"Ko'paytirish: {a * b}")     # Natija: Ko'paytirish: 50
+print(f"Bo'lish: {a / b:.2f}")      # Natija: Bo'lish: 2.00
+
+# Metodlarni chaqirish
+ism = "python"
+print(f"Katta harf: {ism.upper()}")       # Natija: Katta harf: PYTHON
+print(f"Bosh harf: {ism.capitalize()}")   # Natija: Bosh harf: Python
+
+# Funksiyalarni chaqirish
+import math
+print(f"Ildiz 16: {math.sqrt(16)}")   # Natija: Ildiz 16: 4.0
+
+# Ro'yxat va indekslash
+mevalar = ["olma", "apelsin", "mango"]
+print(f"Birinchi meva: {mevalar[0]}")  # Natija: Birinchi meva: olma
+```
+
+### Sonlarni formatlash
+
+F-string format specifier'lar yordamida sonlarni ko'rsatishni boshqaradi:
+
+```python
+# O'nlik format
+pi = 3.14159265359
+print(f"Pi: {pi:.2f}")           # Natija: Pi: 3.14
+print(f"Pi: {pi:.4f}")           # Natija: Pi: 3.1416
+
+# Minglik ajratgich formati
+aholi = 1500000
+print(f"Aholi: {aholi:,}")       # Natija: Aholi: 1,500,000
+print(f"Aholi: {aholi:_}")       # Natija: Aholi: 1_500_000
+
+# Foiz formati
+nisbat = 0.756
+print(f"Foiz: {nisbat:.1%}")     # Natija: Foiz: 75.6%
+
+# Minimal kenglik formati
+son = 42
+print(f"Son: {son:5}")           # Natija: Son:    42 (kenglik 5)
+print(f"Son: {son:05}")          # Natija: Son: 00042 (nol bilan to'ldirish)
+
+# Ikkilik, sakkizlik, o'n oltilik format
+num = 255
+print(f"Ikkilik: {num:b}")             # Natija: Ikkilik: 11111111
+print(f"Sakkizlik: {num:o}")           # Natija: Sakkizlik: 377
+print(f"O'n oltilik: {num:x}")         # Natija: O'n oltilik: ff
+print(f"O'n oltilik (katta): {num:X}") # Natija: O'n oltilik (katta): FF
+```
+
+### Tekislash (alignment)
+
+```python
+text = "Python"
+
+# Chapga tekislash (standart)
+print(f"{text:<15}")     # Natija: "Python         "
+
+# O'ngga tekislash
+print(f"{text:>15}")     # Natija: "         Python"
+
+# Markazga tekislash
+print(f"{text:^15}")     # Natija: "    Python     "
+
+# To'ldiruvchi belgilar bilan
+print(f"{text:*^15}")    # Natija: "****Python*****"
+print(f"{text:-<15}")    # Natija: "Python---------"
+```
+
+### Dictionary bilan f-string
+
+```python
+student = {
+    "name": "Sara",
+    "id": "12345",
+    "gpa": 3.85
+}
+
+print(f"Ism: {student['name']}, GPA: {student['gpa']}")
+# Natija: Ism: Sara, GPA: 3.85
+```
+
+### F-string bilan debugging (Python 3.8+)
+
+`=` specifier debugging uchun juda qulay:
+
+```python
+x = 10
+y = 20
+
+# Eski usul
+print(f"x = {x}, y = {y}")
+
+# Yangi usul = bilan (Python 3.8+)
+print(f"{x=}, {y=}")              # Natija: x=10, y=20
+print(f"{x + y=}")                # Natija: x + y=30
+print(f"{x * 2=}")                # Natija: x * 2=20
+```
+
+### Multiline f-string
+
+```python
+name = "Alice"
+job = "Developer"
+city = "New York"
+
+# Uch tirnoq bilan
+bio = f"""
+User Profile
+===============
+Name      : {name}
+Job       : {job}
+City      : {city}
+"""
+
+print(bio)
+```
+
+### Jingalak qavslarni escape qilish
+
+Agar literal `{` va `}` ni chiqarish kerak bo'lsa, ikki marta yozing:
+
+{% raw %}
+```python
+print(f"This is curly braces: {{}}")    # Natija: This is curly braces: {}
+print(f"Python Set: {{{1, 2, 3}}}")   # Natija: Python Set: {1, 2, 3}
+```
+{% endraw %}
+
+### Amaliy misol
+
+```python
+# Oddiy jadval yaratish
+mahsulotlar = [
+    ("Noutbuk", 15000000),
+    ("Sichqoncha", 250000),
+    ("Klaviatura", 750000),
+]
+
+print(f"{'Mahsulot':<15}{'Narx':>15}")
+print("-" * 30)
+for nomi, narx in mahsulotlar:
+    print(f"{nomi:<15}{narx:>15,}")
+
+# Natija:
+# Mahsulot              Narx
+# ------------------------------
+# Noutbuk          15,000,000
+# Sichqoncha          250,000
+# Klaviatura          750,000
+```
+
diff --git a/content/uz/tutorial/basic/14-python-lists.md b/content/uz/tutorial/basic/14-python-lists.md
new file mode 100644
index 0000000..2112d5a
--- /dev/null
+++ b/content/uz/tutorial/basic/14-python-lists.md
@@ -0,0 +1,127 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python ro'yxat (list)
+order: 14
+permalink: /uz/tutorial/python-lists/
+---
+
+<img src="/img/tutorial/13-tipe-data-list-python.webp" alt="Python ro'yxat (list) ma'lumot turi" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Python'da eng asosiy data structure'laridan biri - ketma-ketlik (sequence), xususan list. Ketma-ketlikdagi har bir element o'z pozitsiyasi (index) bilan belgilanadi. List'dagi birinchi index - 0, ikkinchisi - 1 va hokazo.
+
+Python'da sequence'ning 6 ta built-in turi bor, lekin eng ko'p ishlatiladigani list va tuple. List'lar uchun umumiy amallar: indexing, slicing, qo'shish, ko'paytirish va membership tekshirish. Shuningdek, list uzunligini yoki eng katta/eng kichik elementni topish uchun built-in funksiyalar mavjud.
+
+### Python list yaratish
+
+List - Python'dagi eng moslashuvchan (versatile) ma'lumot turi. U vergul bilan ajratilgan qiymatlar (items)ni `[]` ichida yozish orqali yaratiladi. Muhim jihati: list ichidagi elementlar bir xil turda bo'lishi shart emas.
+
+List yaratish uchun `[]` ichida vergul bilan ajratib yozing. Quyida oddiy misol:
+
+```python
+# Python dasturlash tilida list yaratishning oddiy misoli
+list1 = ['chemistry', 'physics', 1993, 2017]
+list2 = [1, 2, 3, 4, 5]
+list3 = ["a", "b", "c", "d"]
+```
+
+### Python list ichidan qiymat olish
+
+List qiymatlarini olish uchun index/slice bilan `[]` dan foydalaning.
+
+Quyida misol:
+
+```python
+# Python list ichidan qiymat olish usuli
+
+list1 = ['physics', 'chemistry', 1993, 2017]
+list2 = [1, 2, 3, 4, 5, 6, 7]
+
+print("list1[0]: ", list1[0])
+print("list2[1:5]: ", list2[1:5])
+```
+
+Yuqoridagi koddan keyin natija quyidagicha bo'ladi:
+
+`list1[0]: physics`
+`list2[1:5]: [2, 3, 4, 5]`
+
+### Python list qiymatlarini yangilash
+
+List ichidagi bitta yoki bir nechta qiymatni tayinlash operatorining chap tomonida slice berib yangilash mumkin. Shuningdek, `append()` metodi orqali list'ga element qo'shish mumkin. Misol:
+
+```python
+list = ['physics', 'chemistry', 1993, 2017]
+print("Value at index 2 : ", list[2])
+
+list[2] = 2001
+print("New value at index 2 : ", list[2])
+```
+
+### Python list ichidan qiymat o'chirish
+
+List ichidagi qiymatlarni o'chirish uchun elementni aniq bilsangiz `del` ishlatishingiz mumkin. Qaysi element o'chirilishini aniq bilmasangiz `remove()` metodi foydali. Misol:
+
+```python
+# Python list ichidan qiymat o'chirishga misol
+
+list = ['physics', 'chemistry', 1993, 2017]
+
+print(list)
+del list[2]
+print("After value at index 2 is deleted : ", list)
+```
+
+### Python list ustida asosiy amallar
+
+List'lar `+` va `*` operatorlariga string'lar kabi javob beradi: bu yerda ular concatenation va repetition ma'nosini beradi (natija yangi list bo'ladi).
+
+Aslida, list'lar oldingi bo'limdagi string'lar kabi umumiy sequence amallarini qo'llab-quvvatlaydi. Quyida asosiy amallar jadvali:
+
+| Python ifodasi | Natija | Izoh |
+| ---------------------------------------- | -------------------------------------- | ------------- |
+| `len([1, 2, 3, 4])` | `4` | Uzunlik |
+| `[1, 2, 3] + [4, 5, 6]` | `[1, 2, 3, 4, 5, 6]` | Birlashtirish |
+| `['Hello!'] * 4` | `['Hello!', 'Hello!', 'Hello!', 'Hello!']` | Takrorlash |
+| `2 in [1, 2, 3]` | ` True` | Membership |
+| `for x in [1,2,3] : print(x,end = ' ')` | `1 2 3` | Iteratsiya |
+
+### Python list: indexing, slicing va "matrix"
+
+List'lar sequence bo'lgani uchun indexing va slicing string'lar bilan bir xil ishlaydi.
+
+Quyidagi qiymat bo'lsin:
+
+`L = ['C++', 'Java', 'Python']`
+
+| Python ifodasi | Natija | Izoh |
+| ----------------- | -------------------- | -------------------------- |
+| `L[2]` | `'Python'` | Index 0 dan boshlanadi |
+| `L[-2]` | `'Java'` | Manfiy index: o'ngdan sanaydi |
+| `[1:]` | `['Java', 'Python']` | Slice qismi olinadi |
+
+### Python list uchun built-in metod va funksiyalar
+
+Python'da list uchun quyidagi built-in funksiyalar mavjud:
+
+| Python funksiyasi | Izoh |
+| ---------------------- | ----------------------------------------------- |
+| `len(list) ` | List uzunligini qaytaradi. |
+| `max(list) ` | Eng katta qiymatli elementni qaytaradi. |
+| `min(list) ` | Eng kichik qiymatli elementni qaytaradi. |
+| `list(seq) ` | Tuple'ni list'ga aylantiradi. |
+
+Python'da list uchun quyidagi built-in metodlar mavjud:
+
+| Python metodi | Izoh |
+| -------------------------- | ------------------------------------------------------------- |
+| `list.append(obj) ` | `obj` ni list oxiriga qo'shadi |
+| `list.count(obj) ` | `obj` nechta marta uchraganini qaytaradi |
+| `list.extend(seq) ` | `seq` elementlarini list oxiriga qo'shadi |
+| `list.index(obj) ` | `obj` uchragan eng kichik index'ni qaytaradi |
+| `list.insert(index, obj) ` | `obj` ni berilgan index'ga qo'shadi |
+| `list.pop(obj = list[-1])` | Oxirgi elementni yoki berilgan `obj` ni olib tashlab qaytaradi |
+| `list.remove(obj) ` | `obj` ni olib tashlaydi |
+| `list.reverse() ` | List'ni joyida teskari qiladi |
+| `list.sort([func]) ` | List'ni tartiblaydi; berilsa compare `func` ishlatadi |
+
diff --git a/content/uz/tutorial/basic/15-python-list-comprehension.md b/content/uz/tutorial/basic/15-python-list-comprehension.md
new file mode 100644
index 0000000..f4c8a4f
--- /dev/null
+++ b/content/uz/tutorial/basic/15-python-list-comprehension.md
@@ -0,0 +1,219 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python ro'yxat generatsiyasi (list comprehension)
+order: 15
+permalink: /uz/tutorial/python-list-comprehension/
+---
+
+List comprehension - mavjud list'dan yangi list yaratishning ixcham va chiroyli usuli. Bu Python'ga xos (pythonic) imkoniyatlardan biri bo'lib, kodni toza va o'qilishi oson qiladi.
+
+### Asosiy sintaksis
+
+```python
+# Sintaksis: [ifoda for element in ketma-ketlik]
+
+# Oddiy loop bilan
+squares = []
+for x in range(5):
+    squares.append(x ** 2)
+print(squares)  # [0, 1, 4, 9, 16]
+
+# List comprehension bilan (qisqaroq!)
+squares = [x ** 2 for x in range(5)]
+print(squares)  # [0, 1, 4, 9, 16]
+```
+
+### Shart bilan (`if`)
+
+Elementlarni filtrlash uchun shart qo'shish mumkin:
+
+```python
+# Sintaksis: [ifoda for element in ketma-ketlik if shart]
+
+# Faqat juft sonlar
+evens = [x for x in range(10) if x % 2 == 0]
+print(evens)  # [0, 2, 4, 6, 8]
+
+# Faqat musbat sonlar
+data = [-5, 3, -2, 8, -1, 7]
+positive = [x for x in data if x > 0]
+print(positive)  # [3, 8, 7]
+
+# Muayyan harf bilan boshlanadigan satrlarni filtrlash
+fruits = ["apple", "orange", "grape", "mango", "avocado"]
+a_fruits = [f for f in fruits if f.startswith("a")]
+print(a_fruits)  # ['apple', 'avocado']
+```
+
+### `if`-`else` bilan
+
+`if`-`else` ishlatish uchun uni `for` dan oldin yozing:
+
+```python
+# Sintaksis: [agar_ifoda if shart else aks_ifoda for element in ketma-ketlik]
+
+# Manfiy sonlarni 0 bilan almashtirish
+numbers = [-3, 5, -1, 8, -2, 6]
+result = [x if x > 0 else 0 for x in numbers]
+print(result)  # [0, 5, 0, 8, 0, 6]
+
+# Juft/toq deb belgilash
+label = ["juft" if x % 2 == 0 else "toq" for x in range(5)]
+print(label)  # ['juft', 'toq', 'juft', 'toq', 'juft']
+```
+
+### Nested list comprehension
+
+Nested list'lar bilan ishlash uchun:
+
+```python
+# Ichki list'ni tekislash
+matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
+flat = [num for row in matrix for num in row]
+print(flat)  # [1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+# List comprehension bilan matritsa yaratish
+matrix = [[j for j in range(3)] for i in range(3)]
+print(matrix)  # [[0, 1, 2], [0, 1, 2], [0, 1, 2]]
+
+# Ko'paytirish matritsasi
+mult_matrix = [[i * j for j in range(1, 4)] for i in range(1, 4)]
+print(mult_matrix)  # [[1, 2, 3], [2, 4, 6], [3, 6, 9]]
+```
+
+### Funksiyalar bilan
+
+```python
+# List comprehension ichida funksiya ishlatish
+words = ["hello", "world", "python"]
+uppercase = [w.upper() for w in words]
+print(uppercase)  # ['HELLO', 'WORLD', 'PYTHON']
+
+# O'z funksiyangizni ishlatish
+def square(n):
+    return n ** 2
+
+result = [square(x) for x in range(5)]
+print(result)  # [0, 1, 4, 9, 16]
+
+# Lambda ishlatish
+result = [(lambda x: x ** 2)(x) for x in range(5)]
+print(result)  # [0, 1, 4, 9, 16]
+```
+
+### Dictionary comprehension
+
+Xuddi shu g'oya dictionary uchun ham ishlaydi:
+
+```python
+# Sintaksis: {kalit: qiymat for element in ketma-ketlik}
+
+# List'dan dictionary yaratish
+names = ["Alice", "Bob", "Carol"]
+lengths = {n: len(n) for n in names}
+print(lengths)  # {'Alice': 4, 'Bob': 4, 'Carol': 5}
+
+# Shart bilan dictionary
+numbers = range(1, 6)
+squares = {x: x**2 for x in numbers if x % 2 == 1}
+print(squares)  # {1: 1, 3: 9, 5: 25}
+
+# Dictionary'ni teskari aylantirish
+original = {"a": 1, "b": 2, "c": 3}
+inverted = {v: k for k, v in original.items()}
+print(inverted)  # {1: 'a', 2: 'b', 3: 'c'}
+```
+
+### Set comprehension
+
+List kabi, lekin natija set bo'ladi (takror element yo'q):
+
+```python
+# Sintaksis: {ifoda for element in ketma-ketlik}
+
+# Takrorli list'dan set yaratish
+numbers = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4]
+unique = {x for x in numbers}
+print(unique)  # {1, 2, 3, 4}
+
+# Shart bilan set
+even_unique = {x for x in range(20) if x % 2 == 0}
+print(even_unique)  # {0, 2, 4, 6, 8, 10, 12, 14, 16, 18}
+```
+
+### Generator expression
+
+List comprehension'ga o'xshaydi, lekin `()` ishlatadi va xotirani tejaydi:
+
+```python
+# Generator ifodasi (lazy evaluation)
+gen = (x ** 2 for x in range(1000000))
+print(gen)  # <generator object ...>
+
+# Faqat kerak bo'lganda hisoblaydi
+print(next(gen))  # 0
+print(next(gen))  # 1
+print(sum(gen))   # Qolganlarining yig'indisi
+
+# Katta ma'lumotlar uchun foydali
+# List: hammasini xotirada saqlaydi
+# Generator: bittadan hisoblaydi
+```
+
+### Amaliy misol
+
+```python
+# 1. Cleaning data
+dirty_data = ["  Alice  ", "BOB", "carol  ", "  DAVID"]
+clean_data = [name.strip().title() for name in dirty_data]
+print(clean_data)  # ['Alice', 'Bob', 'Carol', 'David']
+
+# 2. Extract file extension
+files = ["doc.pdf", "image.png", "data.csv", "script.py"]
+extensions = [f.split(".")[-1] for f in files]
+print(extensions)  # ['pdf', 'png', 'csv', 'py']
+
+# 3. Filter and transform at once
+scores = [45, 78, 92, 56, 88, 34, 95]
+passed = [f"Score: {n} (Passed)" for n in scores if n >= 60]
+print(passed)  # ['Score: 78 (Passed)', 'Score: 92 (Passed)', ...]
+
+# 4. Zip two lists
+names = ["Alice", "Bob", "Carol"]
+ages = [25, 30, 28]
+combined = {n: a for n, a in zip(names, ages)}
+print(combined)  # {'Alice': 25, 'Bob': 30, 'Carol': 28}
+
+# 5. Create lookup table
+letters = "abcdefghij"
+positions = {l: i for i, l in enumerate(letters, start=1)}
+print(positions)  # {'a': 1, 'b': 2, 'c': 3, ...}
+```
+
+### Qachon list comprehension ishlatish kerak?
+
+<i class="fa-solid fa-circle-check" aria-hidden="true"></i> **List comprehension ishlating**, agar:
+- Oddiy transformatsiya bilan yangi list yaratayotgan bo'lsangiz
+- List ichidan elementlarni filtrlayotgan bo'lsangiz
+- Kod o'qilishi yaxshilanayotgan bo'lsa
+
+<i class="fa-solid fa-circle-xmark" aria-hidden="true"></i> **List comprehension'dan qoching**, agar:
+- Logika juda murakkab bo'lsa (2 tadan ko'p shart)
+- Bir nechta statement kerak bo'lsa
+- Kod o'qilishi yomonlashsa
+
+```python
+# Juda murakkab - oddiy loop ishlating
+# Bundan qoching:
+result = [func(x) if cond1(x) else other(x) for x in data if cond2(x) and cond3(x)]
+
+# Yaxshiroq:
+result = []
+for x in data:
+    if cond2(x) and cond3(x):
+        if cond1(x):
+            result.append(func(x))
+        else:
+            result.append(other(x))
+```
diff --git a/content/uz/tutorial/basic/16-python-tuples.md b/content/uz/tutorial/basic/16-python-tuples.md
new file mode 100644
index 0000000..9447d27
--- /dev/null
+++ b/content/uz/tutorial/basic/16-python-tuples.md
@@ -0,0 +1,122 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python kortej (tuple)
+order: 16
+permalink: /uz/tutorial/python-tuples/
+---
+
+<img src="/img/tutorial/14-tipe-data-tuple-python.webp" alt="Python kortej (tuple) ma'lumot turi" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Tuple - bu Python'dagi immutable ketma-ketlik. Tuple'lar list'lar kabi sequence, lekin asosiy farq shundaki: tuple ichidagi elementlar o'zgarmaydi, list esa o'zgarishi mumkin. Tuple `()` qavsdan, list esa `[]` qavsdan foydalanadi.
+
+Tuple yaratish - vergul bilan ajratilgan qiymatlarni yozish kifoya. Xohlasangiz ularni `()` ichiga ham olishingiz mumkin. Misol:
+
+```python
+# Python dasturlash tilida tuple yaratishning oddiy misoli
+
+tup1 = ('physics', 'chemistry', 1993, 2017)
+tup2 = (1, 2, 3, 4, 5)
+tup3 = "a", "b", "c", "d"
+```
+
+Bo'sh tuple ikki qavs bilan yoziladi, masalan: `tup1 = ()`.
+Bitta qiymatli tuple yozishda vergul kerak: `tup1 = (50,)`.
+String index'lari kabi, tuple index'lari ham 0 dan boshlanadi; slicing, concatenation va boshqa amallar mumkin.
+
+### Python tuple ichidan qiymat olish
+
+Tuple qiymatlarini olish uchun index/slice bilan `[]` dan foydalaning. Misol:
+
+```python
+# Tuple qiymatlarini olish usuli
+
+tup1 = ('physics', 'chemistry', 1993, 2017)
+tup2 = (1, 2, 3, 4, 5, 6, 7)
+
+print("tup1[0]: ", tup1[0])
+print("tup2[1:5]: ", tup2[1:5])
+```
+
+Yuqoridagi koddan keyin natija quyidagicha bo'ladi:
+
+`tup1[0]: physics`
+`tup2[1:5]: (2, 3, 4, 5)`
+
+### Python tuple qiymatlarini yangilash
+
+Tuple immutable, ya'ni tuple elementlarini yangilab bo'lmaydi. Ammo mavjud tuple'larning qismlaridan foydalanib yangi tuple yaratish mumkin:
+
+```python
+tup1 = (12, 34.56)
+tup2 = ('abc', 'xyz')
+
+# Quyidagi amalni tuple'da bajarib bo'lmaydi
+
+# Chunki tuple ichidagi qiymatlar o'zgarmaydi
+
+# tup1[0] = 100;
+
+# Shuning uchun yangi tuple yarating
+
+tup3 = tup1 + tup2
+print(tup3)
+```
+
+### Python tuple ichidan qiymat o'chirish
+
+Tuple ichidan alohida elementni o'chirib bo'lmaydi. Keraksiz elementlarsiz yangi tuple tuzish mumkin.
+
+Butun tuple'ni o'chirish uchun `del` statement ishlating. Misol:
+
+```python
+tup = ('physics', 'chemistry', 1993, 2017)
+print(tup)
+
+# del bilan tuple'ni o'chirish
+
+del tup
+
+# keyin kerakli elementlar bilan yangi tuple yaratish
+
+tup = ('Language', 'Literacy', 2020)
+print("After deleting tuple :", tup)
+```
+
+### Python tuple ustida asosiy amallar
+
+Tuple'lar `+` va `*` operatorlariga string'lar kabi javob beradi: concatenation va repetition (natija yangi tuple).
+
+Quyida tuple uchun asosiy amallar jadvali:
+
+| Python ifodasi | Natija | Izoh |
+| ----------------------------------------- | -------------------------------------- | ------------- |
+| `len((1, 2, 3))` | `3` | Uzunlik |
+| `(1, 2, 3) + (4, 5, 6)` | `(1, 2, 3, 4, 5, 6)` | Birlashtirish |
+| `('Hello!',) \* 4` | `('Hello!', 'Hello!', 'Hello!', 'Hello!')` | Takrorlash |
+| `3 in (1, 2, 3)` | `True` | Membership |
+| `for x in (1,2,3) : print(x, end = ' ')` | `1 2 3` | Iteratsiya |
+
+### Python tuple: indexing, slicing va "matrix"
+
+Tuple'lar sequence bo'lgani uchun indexing va slicing string'lar bilan bir xil ishlaydi.
+
+Quyidagi qiymat bo'lsin: `T = ('C++', 'Java', 'Python')`
+
+| Python ifodasi | Natija | Izoh |
+| ----------------- | -------------------- | -------------------------- |
+| `T[2]` | `'Python'` | Index 0 dan boshlanadi |
+| `T[-2]` | `'Java'` | Manfiy index: o'ngdan sanaydi |
+| `T[1:]` | `('Java', 'Python')` | Slice qismi olinadi |
+
+### Python tuple uchun built-in funksiyalar
+
+Python'da tuple uchun quyidagi built-in funksiyalar mavjud:
+
+| Python funksiyasi | Izoh |
+| --------------------- | ------------------------------------------------ |
+| `len(tuple)` | Tuple uzunligini qaytaradi. |
+| `max(tuple)` | Eng katta qiymatli elementni qaytaradi. |
+| `min(tuple)` | Eng kichik qiymatli elementni qaytaradi. |
+| `tuple(seq)` | List'ni tuple'ga aylantiradi. |
+
diff --git a/content/uz/tutorial/basic/17-python-dictionaries.md b/content/uz/tutorial/basic/17-python-dictionaries.md
new file mode 100644
index 0000000..67c5774
--- /dev/null
+++ b/content/uz/tutorial/basic/17-python-dictionaries.md
@@ -0,0 +1,86 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python lug'at (dictionary)
+order: 17
+permalink: /uz/tutorial/python-dictionaries/
+---
+
+<img src="/img/tutorial/15-tipe-data-dictionary-python.webp" alt="Python lug'at (dictionary) ma'lumot turi" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Python dictionary list yoki tuple'dan farq qiladi. Chunki u key va value juftliklarini saqlaydi. Har bir key o'z value'sidan ikki nuqta (`:`) bilan ajratiladi, elementlar vergul bilan ajratiladi, va hammasi `{}` ichida bo'ladi. Bo'sh dictionary `{}` ko'rinishida yoziladi.
+
+Dictionary key'lari istalgan turda bo'lishi mumkin, lekin key immutable tur bo'lishi kerak (masalan, string, son yoki tuple).
+
+### Python dictionary ichidan qiymat olish
+
+Dictionary elementlarini olish uchun `[]` ichida key yoziladi. Oddiy misol:
+
+```python
+# Python'da dictionary yaratish misoli
+
+dict = {'Name': 'Zara', 'Age': 7, 'Class': 'First'}
+print("dict['Name']: ", dict['Name'])
+print("dict['Age']: ", dict['Age'])
+```
+
+### Python dictionary qiymatlarini yangilash
+
+Dictionary'ni yangi key-value qo'shish, mavjud key qiymatini o'zgartirish yoki elementni o'chirish orqali yangilash mumkin:
+
+```python
+# Python dictionary'ni yangilash
+
+dict = {'Name': 'Zara', 'Age': 7, 'Class': 'First'}
+dict['Age'] = 8; # Mavjud qiymatni o'zgartirish
+dict['School'] = "DPS School" # Yangi element qo'shish
+
+print("dict['Age']: ", dict['Age'])
+print("dict['School']: ", dict['School'])
+```
+
+### Python dictionary elementlarini o'chirish
+
+Dictionary ichidan alohida elementlarni o'chirish, hammasini tozalash yoki butun dictionary'ni o'chirish mumkin.
+
+Butun dictionary'ni o'chirish uchun `del` statement ishlatiladi. Misol:
+
+```python
+# Python dictionary'dan o'chirish misoli
+
+dict = {'Name': 'Zara', 'Age': 7, 'Class': 'First'}
+
+del dict['Name'] # 'Name' kalitli elementni o'chirish
+dict.clear() # dictionary'dagi barcha elementlarni tozalash
+del dict # butun dictionary'ni o'chirish
+
+print("dict['Age']: ", dict['Age'])
+print("dict['School']: ", dict['School'])
+```
+
+### Python dictionary uchun built-in funksiyalar
+
+Python'da dictionary uchun quyidagi built-in funksiyalar mavjud:
+
+| Python funksiyasi | Izoh |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `len(dict)` | Dictionary uzunligini qaytaradi (elementlar soni). |
+| `str(dict) ` | Dictionary'ning chop etiladigan string ko'rinishini beradi |
+| `type(variable)` | Berilgan o'zgaruvchining turini qaytaradi. Agar dictionary bo'lsa, dictionary turini qaytaradi. |
+
+### Python dictionary uchun built-in metodlar
+
+Python'da dictionary uchun quyidagi built-in metodlar mavjud:
+
+| Python metodi | Izoh |
+| ------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `dict.clear() ` | Dictionary'ning hamma elementlarini o'chiradi |
+| `dict.copy() ` | Dictionary'ning shallow copy'sini qaytaradi |
+| `dict.fromkeys() ` | Seq'dan key olib, value'larni berilgan qiymatga o'rnatib yangi dictionary yaratadi |
+| `dict.get(key, default=None) ` | `key` bo'yicha value'ni qaytaradi yoki topilmasa default |
+| `dict.items() ` | `(key, value)` juftliklar ro'yxatini qaytaradi |
+| `dict.keys() ` | Key'lar ro'yxatini qaytaradi |
+| ` dict.setdefault(key, default=None)` | `get()` ga o'xshaydi, lekin key bo'lmasa `dict[key]=default` qiladi |
+| `dict.update(dict2) ` | `dict2` dagi key-value'larni dictionary'ga qo'shadi |
+| `dict.values() ` | Value'lar ro'yxatini qaytaradi |
+
diff --git a/content/uz/tutorial/basic/18-python-sets.md b/content/uz/tutorial/basic/18-python-sets.md
new file mode 100644
index 0000000..2c5c48b
--- /dev/null
+++ b/content/uz/tutorial/basic/18-python-sets.md
@@ -0,0 +1,350 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python to'plamlar (sets)
+order: 18
+permalink: /uz/tutorial/python-sets/
+---
+
+Set - Python'dagi unique (takrorlanmaydigan) va unordered (tartibsiz) elementlar to'plami. Set'lar membership tekshirishda, dublikatlarni olib tashlashda, va union/intersection/difference kabi matematik amallarda juda samarali.
+
+### Set yaratish
+
+```python
+# Jingalak qavslar bilan
+fruits = {"apple", "orange", "mango"}
+print(fruits)  # {'apple', 'orange', 'mango'}
+
+# set() konstruktori bilan
+numbers = set([1, 2, 3, 4, 5])
+print(numbers)  # {1, 2, 3, 4, 5}
+
+# Bo'sh set (albatta set() ishlating, {} emas)
+empty = set()
+print(empty)  # set()
+print(type(empty))  # <class 'set'>
+
+# {} dictionary yaratadi, set emas!
+not_set = {}
+print(type(not_set))  # <class 'dict'>
+```
+
+### Set xususiyatlari
+
+```python
+# 1. Takrorlanmas elementlar
+numbers = {1, 2, 2, 3, 3, 3, 4}
+print(numbers)  # {1, 2, 3, 4}
+
+# 2. Tartibsiz
+letters = {"c", "a", "b"}
+print(letters)  # Tartib har xil bo'lishi mumkin
+
+# 3. Index bilan olish mumkin emas
+# letters[0]  # Xato! TypeError
+
+# 4. Elementlar hashable (o'zgarmas) bo'lishi kerak
+valid = {1, "hello", (1, 2)}  # To'g'ri
+# invalid = {1, [1, 2]}  # Xato! List hashable emas
+```
+
+### Element qo'shish va o'chirish
+
+```python
+fruits = {"apple", "orange"}
+
+# Bitta element qo'shish
+fruits.add("mango")
+print(fruits)  # {'apple', 'orange', 'mango'}
+
+# Bir nechta element qo'shish
+fruits.update(["banana", "grape"])
+print(fruits)  # {'apple', 'orange', 'mango', 'banana', 'grape'}
+
+# Elementni o'chirish (topilmasa xato beradi)
+fruits.remove("apple")
+print(fruits)
+
+# Elementni o'chirish (topilmasa xato bermaydi)
+fruits.discard("durian")  # Xato yo'q
+print(fruits)
+
+# Tasodifiy elementni o'chirish
+item = fruits.pop()
+print(f"O'chirildi: {item}")
+
+# Barcha elementlarni o'chirish
+fruits.clear()
+print(fruits)  # set()
+```
+
+### Membership amallari
+
+Set membership tekshirishda juda tez (O(1) murakkablik):
+
+```python
+numbers = {1, 2, 3, 4, 5}
+
+# Set ichida mavjudligini tekshirish
+print(3 in numbers)      # True
+print(10 in numbers)     # False
+print(10 not in numbers) # True
+
+# Katta ma'lumotlarda list bilan solishtirish
+# Set: O(1) - juda tez
+# List: O(n) - katta ma'lumotlarda sekin
+```
+
+### Matematik amallar
+
+#### Union
+
+Ikkala set'dagi barcha elementlarni birlashtiradi:
+
+```python
+A = {1, 2, 3, 4}
+B = {3, 4, 5, 6}
+
+# | operatori bilan
+combined = A | B
+print(combined)  # {1, 2, 3, 4, 5, 6}
+
+# Metod bilan
+combined = A.union(B)
+print(combined)  # {1, 2, 3, 4, 5, 6}
+```
+
+#### Intersection
+
+Ikkalasida ham bor bo'lgan elementlar:
+
+```python
+A = {1, 2, 3, 4}
+B = {3, 4, 5, 6}
+
+# & operatori bilan
+intersection = A & B
+print(intersection)  # {3, 4}
+
+# Metod bilan
+intersection = A.intersection(B)
+print(intersection)  # {3, 4}
+```
+
+#### Difference
+
+Birinchi set'da bor, ikkinchisida yo'q elementlar:
+
+```python
+A = {1, 2, 3, 4}
+B = {3, 4, 5, 6}
+
+# A - B: A da bor, B da yo'q elementlar
+diff = A - B
+print(diff)  # {1, 2}
+
+# B - A: B da bor, A da yo'q elementlar
+diff = B - A
+print(diff)  # {5, 6}
+
+# Metod bilan
+diff = A.difference(B)
+print(diff)  # {1, 2}
+```
+
+#### Symmetric difference
+
+Ikkalasidan birida bor, lekin ikkalasida birga emas elementlar:
+
+```python
+A = {1, 2, 3, 4}
+B = {3, 4, 5, 6}
+
+# ^ operatori bilan
+sym_diff = A ^ B
+print(sym_diff)  # {1, 2, 5, 6}
+
+# Metod bilan
+sym_diff = A.symmetric_difference(B)
+print(sym_diff)  # {1, 2, 5, 6}
+```
+
+### Subset va superset
+
+```python
+A = {1, 2}
+B = {1, 2, 3, 4, 5}
+
+# A B ning subset'i (A ning barcha elementlari B da bor)
+print(A.issubset(B))    # True
+print(A <= B)           # True
+print(A < B)            # True (to'liq subset)
+
+# B A ning superset'i (B A ning barcha elementlarini o'z ichiga oladi)
+print(B.issuperset(A))  # True
+print(B >= A)           # True
+print(B > A)            # True (to'liq superset)
+
+# Umumiy element yo'qligini tekshirish
+C = {10, 20, 30}
+print(A.isdisjoint(C))  # True (kesishma yo'q)
+print(A.isdisjoint(B))  # False (kesishma bor)
+```
+
+### Update amallari
+
+Set'ni joyida (in-place) o'zgartiradigan amallar:
+
+```python
+A = {1, 2, 3, 4}
+B = {3, 4, 5, 6}
+
+# Union bilan yangilash
+A_copy = A.copy()
+A_copy |= B
+print(A_copy)  # {1, 2, 3, 4, 5, 6}
+
+# Intersection bilan yangilash
+A_copy = A.copy()
+A_copy &= B
+print(A_copy)  # {3, 4}
+
+# Difference bilan yangilash
+A_copy = A.copy()
+A_copy -= B
+print(A_copy)  # {1, 2}
+
+# Yoki metodlar bilan
+A_copy = A.copy()
+A_copy.update(B)  # Birlashma
+A_copy.intersection_update(B)  # Kesishma
+A_copy.difference_update(B)  # Farq
+```
+
+### `frozenset` (immutable set)
+
+Frozenset - bu set'ning immutable varianti:
+
+```python
+# Frozenset yaratish
+fs = frozenset([1, 2, 3, 4])
+print(fs)  # frozenset({1, 2, 3, 4})
+
+# O'zgartirib bo'lmaydi
+# fs.add(5)  # Xato! AttributeError
+
+# Dictionary kaliti yoki set elementi sifatida ishlatish mumkin
+my_dict = {fs: "value"}
+print(my_dict)
+
+# Matematik amallar ishlaydi
+fs2 = frozenset([3, 4, 5])
+print(fs | fs2)  # frozenset({1, 2, 3, 4, 5})
+print(fs & fs2)  # frozenset({3, 4})
+```
+
+### Set comprehension
+
+```python
+# Set comprehension - list comprehension'ga o'xshash
+squares = {x**2 for x in range(10)}
+print(squares)  # {0, 1, 4, 9, 16, 25, 36, 49, 64, 81}
+
+# Shart bilan
+evens = {x for x in range(20) if x % 2 == 0}
+print(evens)  # {0, 2, 4, 6, 8, 10, 12, 14, 16, 18}
+
+# Satrdan (takrorlanmas belgilar)
+word = "mississippi"
+unique_chars = {c for c in word}
+print(unique_chars)  # {'m', 'i', 's', 'p'}
+```
+
+### Amaliy misol
+
+```python
+# 1. Removing duplicates
+data = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4]
+unique = list(set(data))
+print(unique)  # [1, 2, 3, 4]
+
+# 2. Check if list has duplicates
+def has_duplicates(lst):
+    return len(lst) != len(set(lst))
+
+print(has_duplicates([1, 2, 3]))    # False
+print(has_duplicates([1, 2, 2, 3])) # True
+
+# 3. Find common elements from two lists
+list1 = [1, 2, 3, 4, 5]
+list2 = [4, 5, 6, 7, 8]
+common = set(list1) & set(list2)
+print(common)  # {4, 5}
+
+# 4. Find different elements
+diff = set(list1) ^ set(list2)
+print(diff)  # {1, 2, 3, 6, 7, 8}
+
+# 5. Filter unique data with condition
+transactions = [100, 200, 100, 300, 200, 400, 100]
+large = {t for t in transactions if t > 150}
+print(large)  # {200, 300, 400}
+
+# 6. Input validation
+valid_options = {"yes", "no", "maybe"}
+user_input = "yes"
+if user_input.lower() in valid_options:
+    print("Valid input!")
+
+# 7. Tag system
+post1_tags = {"python", "programming", "tutorial"}
+post2_tags = {"python", "web", "flask"}
+post3_tags = {"javascript", "web", "react"}
+
+# Python tegiga ega postlar
+python_posts = [post1_tags, post2_tags]  # Qo'lda tekshirish
+
+# post1 va post2 ning umumiy teglari
+common = post1_tags & post2_tags
+print(common)  # {'python'}
+
+# Barcha takrorlanmas teglar
+all_tags = post1_tags | post2_tags | post3_tags
+print(all_tags)  # {'python', 'programming', 'tutorial', 'web', 'flask', 'javascript', 'react'}
+```
+
+### Set va list tezligi (performance)
+
+```python
+import time
+
+# Katta ma'lumot yaratish
+data_list = list(range(1000000))
+data_set = set(data_list)
+
+# List ichida membership tekshirish
+start = time.time()
+result = 999999 in data_list
+print(f"List: {time.time() - start:.6f} soniya")
+
+# Set ichida membership tekshirish
+start = time.time()
+result = 999999 in data_set
+print(f"Set: {time.time() - start:.6f} soniya")
+
+# Set membership tekshirishda ancha tezroq!
+```
+
+### Qachon set ishlatish kerak?
+
+<i class="fa-solid fa-circle-check" aria-hidden="true"></i> **Set ishlating**, agar:
+- Unique elementlarni saqlash kerak bo'lsa
+- Membership tekshirish tez-tez kerak bo'lsa
+- Matematik amallar kerak bo'lsa (union, intersection)
+- List ichidan dublikatlarni olib tashlash kerak bo'lsa
+
+<i class="fa-solid fa-circle-xmark" aria-hidden="true"></i> **Set ishlatmang**, agar:
+- Element tartibini saqlash kerak bo'lsa (list yoki dict ishlating)
+- Index bo'yicha murojaat kerak bo'lsa
+- Elementlar hashable bo'lmasa (list, dict)
+
diff --git a/content/uz/tutorial/basic/19-python-date-time.md b/content/uz/tutorial/basic/19-python-date-time.md
new file mode 100644
index 0000000..c89a409
--- /dev/null
+++ b/content/uz/tutorial/basic/19-python-date-time.md
@@ -0,0 +1,135 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python sana va vaqt
+order: 19
+permalink: /uz/tutorial/python-date-time/
+---
+
+<img src="/img/tutorial/16-tipe-data-tanggal-waktu-time-python.webp" alt="Python sana va vaqt" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Python dasturlari sana va vaqt bilan bir nechta usulda ishlashi mumkin. Sana formatlari orasida o'zgartirish (conversion) kompyuterlar uchun juda keng tarqalgan vazifa. Python'dagi `time` va `calendar` modullari sana va vaqtni boshqaradi.
+
+### Tick nima?
+
+Time interval - sekund birliklaridagi floating-point son. Vaqtning ma'lum bir nuqtasi 1970-yil 1-yanvar, soat 00:00 dan boshlab sekundlarda ifodalanadi.
+
+Quyida misol:
+
+```python
+import time; # time modulini import qilish
+
+ticks = time.time()
+print("Number of ticks since 12:00am, January 1, 1970:", ticks)
+```
+
+### Python TimeTuple nima?
+
+Ko'plab Python time funksiyalari vaqtni 9 ta sondan iborat tuple sifatida qayta ishlaydi:
+
+| Index | Maydon | Qiymat |
+| ----- | ----------------- | ----------------------------------------- |
+| 0 | 4 xonali yil | 2008 |
+| 1 | Oy | 1 dan 12 gacha |
+| 2 | Kun | 1 dan 31 gacha |
+| 3 | Soat | 0 dan 23 gacha |
+| 4 | Daqiqa | 0 dan 59 gacha |
+| 5 | Sekund | 0 dan 61 gacha |
+| 6 | Haftaning kuni | 0 dan 6 gacha (0 - dushanba) |
+| 7 | Yilning kuni | 1 dan 366 gacha |
+| 8 | Daylight savings | -1, 0, 1; -1 bo'lsa kutubxona DST'ni o'zi aniqlaydi |
+
+Yuqoridagi tuple `struct_time` tuzilmasiga teng. Bu tuzilma quyidagi atributlarga ega:
+
+| Index | Atribut | Qiymat |
+| ----- | ----------- | ----------------------------------------- |
+| 0 | `tm_year` | 2008 |
+| 1 | `tm_mon ` | 1 dan 12 gacha |
+| 2 | `tm_mday` | 1 dan 31 gacha |
+| 3 | `tm_hour` | 0 dan 23 gacha |
+| 4 | `tm_min ` | 0 dan 59 gacha |
+| 5 | `tm_sec ` | 0 dan 61 gacha |
+| 6 | `tm_wday` | 0 dan 6 gacha (0 - dushanba) |
+| 7 | `tm_yday` | 1 dan 366 gacha |
+| 8 | ` tm_isdst` | -1, 0, 1; -1 bo'lsa kutubxona DST'ni o'zi aniqlaydi |
+
+### Hozirgi vaqtni olish
+
+Epoch'dan boshlab sekundlarda berilgan qiymatni time-tuple ko'rinishiga o'tkazish uchun float qiymatni `localtime` kabi funksiyaga bering. Funksiya 9 ta elementdan iborat tuple qaytaradi.
+
+```python
+import time;
+
+localtime = time.localtime(time.time())
+print("Current local time :", localtime)
+```
+
+### Formatlangan vaqtni olish
+
+Vaqtni ehtiyojga qarab formatlash mumkin. O'qilishi oson ko'rinish uchun oddiy usul - `asctime()`.
+
+```python
+import time;
+
+localtime = time.asctime(time.localtime(time.time()))
+print("Current local time :", localtime)
+```
+
+### Oyning kalendarini olish
+
+`calendar` moduli yil va oy kalendarlarini chiqarish uchun turli metodlarni beradi. Bu yerda 2008-yil yanvar kalendarini chiqaramiz.
+
+```python
+import calendar
+
+cal = calendar.month(2008, 1)
+print("Here is the calendar:")
+print(cal)
+```
+
+### Python'dagi time moduli
+
+Python'da vaqt bilan ishlash va turli ko'rinishlar orasida o'zgartirish uchun `time` moduli bor. Quyida time modulidagi funksiyalar ro'yxati:
+
+| Python funksiyasi | Izoh |
+| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `time.altzone` | Lokal DST timezone offset'i (UTC'dan sekundlarda g'arbga). DST yo'q bo'lsa ishlatmang. |
+| `time.asctime([tupletime])` | Time-tuple qabul qilib, 'Tue Dec 11 18:07:14 2008' kabi o'qilishi oson string qaytaradi. |
+| `time.process_time() ` | Processor vaqtini sekundlarda float sifatida qaytaradi. Hisoblash xarajatlarini o'lchashda `time.time()` dan ko'ra foydaliroq. |
+| `time.ctime([secs]) ` | `asctime(localtime(secs))` ga o'xshaydi; argument bo'lmasa `asctime()` kabi. |
+| `time.gmtime([secs]) ` | Epoch'dan sekundlarda berilgan qiymatni UTC time-tuple'ga aylantiradi. Eslatma: `t.tm_isdst` doim 0. |
+| `time.localtime([secs]) ` | Epoch'dan sekundlarda berilgan qiymatni lokal time-tuple'ga aylantiradi (`tm_isdst` 0 yoki 1 bo'lishi mumkin). |
+| `time.mktime(tupletime) ` | Lokal time-tuple qabul qilib, epoch'dan sekundlarda float qaytaradi. |
+| `time.sleep(secs) ` | Berilgan sekundlar davomida bajarilishni to'xtatadi. |
+| `time.strftime(fmt[,tupletime])` | Time-tuple'ni `fmt` formatiga ko'ra string ko'rinishiga o'tkazadi. |
+| `time.strptime(str,fmt='%a %b %d %H:%M:%S %Y')` | `str` ni `fmt` bo'yicha parse qilib time-tuple qaytaradi. |
+| `time.time() ` | Hozirgi vaqtni epoch'dan sekundlarda float sifatida qaytaradi. |
+
+Time modulida yana 2 ta muhim atribut bor:
+
+| Python atributi | Izoh |
+| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ` time.timezone` | DST'siz lokal timezone'ning UTC'dan offset'i (sekundlarda). |
+| `time.tzname ` | Lokal timezone nomlari juftligi (DST'siz va DST bilan). |
+
+### Python'dagi calendar moduli
+
+`calendar` moduli kalendar bilan bog'liq funksiyalarni taqdim etadi, jumladan oy yoki yil uchun matn ko'rinishidagi kalendar chiqarish.
+
+Standart holatda hafta dushanbadan boshlanadi, yakshanba bilan tugaydi. Buni o'zgartirish uchun `calendar.setfirstweekday()` funksiyasini chaqiring.
+
+Quyida calendar modulidagi funksiyalar ro'yxati:
+
+| Python funksiyasi | Izoh |
+| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `calendar.calendar(year,w=2,l=1,c=6)` | `year` uchun uch ustunli multiline string kalendar qaytaradi. `w` - sana kengligi, `l` - har hafta uchun qatorlar, `c` - ustunlar oralig'i. |
+| `calendar.firstweekday( ) ` | Haftaning boshlanish kunini qaytaradi (default 0, ya'ni dushanba). |
+| `calendar.isleap(year) ` | `year` kabisa yili bo'lsa `True`, aks holda `False`. |
+| `calendar.leapdays(y1,y2) ` | `(y1, y2)` oralig'idagi kabisa kunlar sonini qaytaradi. |
+| `calendar.month(year,month,w=2,l=1) ` | Berilgan oy/yil uchun multiline string kalendar qaytaradi. |
+| `calendar.monthcalendar(year,month)` | Oy uchun haftalar ro'yxatini qaytaradi; oydan tashqaridagi kunlar 0 bo'ladi. |
+| `calendar.monthrange(year,month)` | (1) oy boshidagi haftakuni kodi, (2) oydagi kunlar sonini qaytaradi. |
+| `calendar.setfirstweekday(weekday)` | Haftaning birinchi kunini `weekday` ga o'rnatadi (0 - dushanba, 6 - yakshanba). |
+| `calendar.timegm(tupletime) ` | `time.gmtime` ning teskarisi: time-tuple'ni epoch sekundiga o'tkazadi. |
+| `calendar.weekday(year,month,day)` | Berilgan sana uchun haftakuni kodini qaytaradi. |
+
diff --git a/content/uz/tutorial/basic/20-python-functions.md b/content/uz/tutorial/basic/20-python-functions.md
new file mode 100644
index 0000000..5835cf8
--- /dev/null
+++ b/content/uz/tutorial/basic/20-python-functions.md
@@ -0,0 +1,91 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python funksiyalari
+order: 20
+permalink: /uz/tutorial/python-functions/
+---
+
+<img src="/img/tutorial/17-belajar-fungsi-python-programming.webp" alt="Python funksiyalari" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Funksiya - ma'lum bir vazifani bajarish uchun qayta ishlatiladigan (reusable) kod bloki.
+
+### Python funksiyalarini aniqlash
+
+`def` kalit so'zi, so'ng funksiya nomi va parametrlar yoziladi:
+
+```python
+def print_message(text):
+    """Print a message to the console."""
+    print(text)
+```
+
+Muhim qoidalar:
+
+- Funksiya bloklari `def` bilan boshlanadi.
+- Parametrlar `()` ichida yoziladi.
+- Funksiya tanasi indentatsiya bilan ajratiladi.
+- `return` qiymatni chaqiruvchiga qaytaradi.
+- Agar `return` bo'lmasa, funksiya `None` qaytaradi.
+
+### Parametrlar va argumentlar
+
+```python
+def greet(name, greeting="Hello"):
+    return f"{greeting}, {name}!"
+
+print(greet("Bob"))
+print(greet("Bob", greeting="Hi"))
+```
+
+### Keyword argumentlar
+
+```python
+def describe_pet(animal, name):
+    print(f"I have a {animal} named {name}.")
+
+describe_pet(name="Milo", animal="cat")
+```
+
+### Maxsus parametr turlari (Python 3)
+
+Python positional-only va keyword-only parametrlarni qo'llab-quvvatlaydi:
+
+```python
+def combine(a, b, /, sep="-", *, upper=False):
+    text = f"{a}{sep}{b}"
+    return text.upper() if upper else text
+
+print(combine("py", "thon"))
+print(combine("py", "thon", sep="_", upper=True))
+```
+
+- `/` dan oldingi parametrlar positional-only.
+- `*` dan keyingi parametrlar keyword-only.
+
+### O'zgaruvchan uzunlikdagi argumentlar
+
+```python
+def total(*numbers):
+    return sum(numbers)
+
+
+def show_info(**kwargs):
+    for key, value in kwargs.items():
+        print(key, "=", value)
+
+print(total(1, 2, 3, 4))
+show_info(name="Alice", age=22)
+```
+
+### `lambda` (anonim funksiya)
+
+Qisqa, bir qatordan iborat funksiyalar uchun:
+
+```python
+square = lambda x: x * x
+print(square(5))
+```
+
+Murakkab logika uchun kod o'qilishini saqlash maqsadida `def` ishlating.
+
diff --git a/content/uz/tutorial/basic/21-python-lambda.md b/content/uz/tutorial/basic/21-python-lambda.md
new file mode 100644
index 0000000..8d90733
--- /dev/null
+++ b/content/uz/tutorial/basic/21-python-lambda.md
@@ -0,0 +1,288 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python lambda
+order: 21
+permalink: /uz/tutorial/python-lambda/
+---
+
+Lambda - Python'da anonim funksiyalarni (nomi yo'q funksiyalarni) yaratishning qisqa usuli. Lambda bir marta ishlatiladigan oddiy amallar uchun juda qulay, ayniqsa `map()`, `filter()` va `sorted()` kabi funksiyalarga argument sifatida berilganda.
+
+### Asosiy sintaksis
+
+```python
+# Sintaksis: lambda argumentlar: ifoda
+
+# Oddiy funksiya
+def square(x):
+    return x ** 2
+
+# Ekvivalent lambda
+square = lambda x: x ** 2
+
+print(square(5))  # Natija: 25
+```
+
+Lambda faqat bitta expression'ni o'z ichiga oladi va natijani avtomatik qaytaradi.
+
+### Bir nechta argumentli `lambda`
+
+```python
+# Bitta argument
+double = lambda x: x * 2
+print(double(5))  # 10
+
+# Ikkita argument
+add = lambda a, b: a + b
+print(add(3, 5))  # 8
+
+# Uchta argument
+volume = lambda p, l, t: p * l * t
+print(volume(2, 3, 4))  # 24
+
+# Argumentsiz
+random_greeting = lambda: "Salom!"
+print(random_greeting())  # Salom!
+```
+
+### Default argumentli `lambda`
+
+```python
+# Standart argument
+power = lambda x, n=2: x ** n
+print(power(3))     # 9 (2-darajasi)
+print(power(3, 3))  # 27 (3-darajasi)
+
+# Bir nechta standart argument
+greet = lambda name, formal=False: f"Good Morning, {name}" if formal else f"Hi, {name}!"
+print(greet("Bob"))            # Hi, Bob!
+print(greet("Bob", formal=True))  # Good Morning, Bob
+```
+
+### Shartli ifoda bilan `lambda`
+
+```python
+# Lambda ichida shart
+check_even = lambda x: "Even" if x % 2 == 0 else "Odd"
+print(check_even(4))  # Even
+print(check_even(7))  # Odd
+
+# Ko'p shartlar
+letter_grade = lambda n: "A" if n >= 90 else "B" if n >= 80 else "C" if n >= 70 else "D"
+print(letter_grade(95))  # A
+print(letter_grade(75))  # C
+```
+
+### Built-in funksiyalar bilan `lambda`
+
+#### map() - har bir elementni o'zgartirish
+
+```python
+numbers = [1, 2, 3, 4, 5]
+
+# Har bir sonni kvadratga oshirish
+squared = list(map(lambda x: x ** 2, numbers))
+print(squared)  # [1, 4, 9, 16, 25]
+
+# Satrga aylantirish
+str_numbers = list(map(lambda x: str(x), numbers))
+print(str_numbers)  # ['1', '2', '3', '4', '5']
+
+# Ikki list bilan map
+list1 = [1, 2, 3]
+list2 = [4, 5, 6]
+sum_lists = list(map(lambda x, y: x + y, list1, list2))
+print(sum_lists)  # [5, 7, 9]
+```
+
+#### filter() - shart bo'yicha filtrlash
+
+```python
+numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
+# Juft sonlarni filtrlash
+evens = list(filter(lambda x: x % 2 == 0, numbers))
+print(evens)  # [2, 4, 6, 8, 10]
+
+# 5 dan katta sonlarni filtrlash
+large = list(filter(lambda x: x > 5, numbers))
+print(large)  # [6, 7, 8, 9, 10]
+
+# Bo'sh satrlarni filtrlash
+words = ["hello", "", "world", "", "python"]
+non_empty = list(filter(lambda x: x, words))
+print(non_empty)  # ['hello', 'world', 'python']
+```
+
+#### `sorted()` - custom key bilan sortlash
+
+```python
+# Absolyut qiymat bo'yicha saralash
+numbers = [-5, 2, -3, 1, -4]
+sorted_nums = sorted(numbers, key=lambda x: abs(x))
+print(sorted_nums)  # [1, 2, -3, -4, -5]
+
+# Tuple ro'yxatini saralash
+students = [("Alice", 85), ("Bob", 92), ("Carol", 78)]
+by_score = sorted(students, key=lambda x: x[1], reverse=True)
+print(by_score)  # [('Bob', 92), ('Alice', 85), ('Carol', 78)]
+
+# Dictionary ro'yxatini saralash
+data = [
+    {"name": "Alice", "age": 25},
+    {"name": "Bob", "age": 20},
+    {"name": "Carol", "age": 30}
+]
+by_age = sorted(data, key=lambda x: x["age"])
+print(by_age)
+# [{'name': 'Bob', 'age': 20}, {'name': 'Alice', 'age': 25}, {'name': 'Carol', 'age': 30}]
+
+# Satrlarni uzunligi bo'yicha saralash
+words = ["python", "go", "javascript", "c"]
+by_length = sorted(words, key=lambda x: len(x))
+print(by_length)  # ['c', 'go', 'python', 'javascript']
+```
+
+#### reduce() - bitta qiymatga yig'ish
+
+```python
+from functools import reduce
+
+numbers = [1, 2, 3, 4, 5]
+
+# Sum all numbers
+total = reduce(lambda x, y: x + y, numbers)
+print(total)  # 15
+
+# Multiply all numbers
+product = reduce(lambda x, y: x * y, numbers)
+print(product)  # 120
+
+# Find maximum
+maximum = reduce(lambda x, y: x if x > y else y, numbers)
+print(maximum)  # 5
+```
+
+### Ma'lumot tuzilmalarida `lambda`
+
+```python
+# Funksiyalar lug'ati
+operations = {
+    "add": lambda x, y: x + y,
+    "subtract": lambda x, y: x - y,
+    "multiply": lambda x, y: x * y,
+    "divide": lambda x, y: x / y if y != 0 else "Error"
+}
+
+print(operations["add"](10, 5))  # 15
+print(operations["multiply"](10, 5))    # 50
+
+# Lambda ro'yxati
+transformations = [
+    lambda x: x * 2,
+    lambda x: x ** 2,
+    lambda x: x + 10
+]
+
+number = 5
+for t in transformations:
+    print(t(number))  # 10, 25, 15
+```
+
+### Darhol bajariladigan `lambda`
+
+Darhol chaqiriladigan lambda:
+
+```python
+# Darhol bajariladigan funksiya ifodasi
+result = (lambda x, y: x + y)(3, 5)
+print(result)  # 8
+
+# Bir martalik amallar uchun foydali
+data = (lambda: {"config": "value", "debug": True})()
+print(data)  # {'config': 'value', 'debug': True}
+```
+
+### `lambda` va oddiy funksiyalar
+
+| Jihat | Lambda | `def` funksiya |
+|-------|--------|--------------|
+| Nomi | Anonim | Nomi bo'lishi kerak |
+| Qatorlar | Bitta expression | Bir nechta statement |
+| O'qilish | Oddiy amallar uchun | Murakkab logika uchun |
+| Docstring | Yo'q | Bor |
+| Type hints | Yo'q | Bor |
+
+```python
+# Lambda qachon ishlatish kerak
+data = [1, 2, 3, 4, 5]
+result = list(map(lambda x: x * 2, data))  # Oddiy bir martalik logika uchun yaxshi
+
+# def qachon ishlatish kerak
+def calculate_tax(salary, allowance=0, deduction=0):
+    """
+    Calculates income tax.
+    
+    Args:
+        salary: Basic salary
+        allowance: Total allowance
+        deduction: Total deduction
+        
+    Returns:
+        Tax amount to be paid
+    """
+    taxable_income = salary + allowance - deduction
+    if taxable_income <= 50000000:
+        return taxable_income * 0.05
+    elif taxable_income <= 250000000:
+        return taxable_income * 0.15
+    else:
+        return taxable_income * 0.25
+```
+
+### Amaliy misol
+
+```python
+# 1. Sorting complex data
+products = [
+    {"name": "Laptop", "price": 15000000, "rating": 4.5},
+    {"name": "Mouse", "price": 250000, "rating": 4.8},
+    {"name": "Keyboard", "price": 750000, "rating": 4.2}
+]
+
+# Narx bo'yicha saralash (o'sish tartibida)
+by_price = sorted(products, key=lambda p: p["price"])
+
+# Reyting bo'yicha saralash (kamayish tartibida)
+by_rating = sorted(products, key=lambda p: p["rating"], reverse=True)
+
+# 2. Data transformation pipeline
+data = ["  Hello  ", "WORLD", "  python  "]
+cleaned = list(map(lambda s: s.strip().lower(), data))
+print(cleaned)  # ['hello', 'world', 'python']
+
+# 3. Event handlers(pseudo-code)
+button_actions = {
+    "save": lambda: print("Saving..."),
+    "delete": lambda: print("Deleting..."),
+    "export": lambda: print("Exporting...")
+}
+
+action = "save"
+button_actions[action]()  # Saving...
+```
+
+### Maslahatlar va eng yaxshi amaliyotlar
+
+1. **Lambda'ni oddiy amallar uchun ishlating** - logika bir qatordan oshsa `def` ishlating
+2. **Haddan oshirmang** - kod o'qilishi oson bo'lsin
+3. **Nested lambda'dan qoching** - o'qish va debug qilish qiyin
+4. **List comprehension'ni ko'rib chiqing** - ko'pincha map+lambda'dan o'qilishi osonroq
+
+```python
+# Lambda + map
+result = list(map(lambda x: x * 2, data))
+
+# List comprehension (ko'proq pythonic)
+result = [x * 2 for x in data]
+```
diff --git a/content/uz/tutorial/intermediate/22-python-modules.md b/content/uz/tutorial/intermediate/22-python-modules.md
new file mode 100644
index 0000000..dd8f650
--- /dev/null
+++ b/content/uz/tutorial/intermediate/22-python-modules.md
@@ -0,0 +1,116 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python modullari
+order: 22
+permalink: /uz/tutorial/python-modules/
+---
+
+<img src="/img/tutorial/18-modul-python.webp" alt="Python modullari" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Modul - bu Python fayli (`.py`) bo'lib, ichida funksiyalar, class'lar va o'zgaruvchilar bo'ladi. Siz ularni boshqa fayllarda qayta ishlatishingiz mumkin.
+Modullar katta dasturlarni kichik, aniq vazifali fayllarga bo'lishga yordam beradi va takroriy kodni kamaytiradi.
+
+### Oddiy modul yaratish
+
+`support.py` faylini yarating:
+
+```python
+def print_func(name):
+    print(f"Hello: {name}")
+```
+
+Modul nomlarini sodda qiling (`support.py`, `math_utils.py`) va fayl nomida tire/bo'sh joy ishlatmang.
+
+### Import operatori
+
+Modulni yuklash uchun `import` dan foydalaning:
+
+```python
+import support
+
+support.print_func("Andy")
+```
+
+`import support` nomlarni `support.` scope'i ichida saqlaydi va har bir funksiyaning qayerdan kelganini aniq ko'rsatadi.
+
+### Keng tarqalgan import variantlari
+
+```python
+from support import print_func
+print_func("Bob")
+
+import support as sp
+sp.print_func("Carol")
+```
+
+Faqat bir nechta symbol kerak bo'lsa `from module import name` ishlating. Wildcard import (`from x import *`) dan qoching, chunki u kodni o'qish va debug qilishni qiyinlashtiradi.
+
+### Modul qidirish yo'li (module search path)
+
+`import module_name` ishlaganda Python quyidagilardan qidiradi:
+
+1. Hozirgi skript papkasi
+2. `PYTHONPATH` dagi yo'llar
+3. Standard library va site-packages
+
+Hozirgi path'larni ko'rish:
+
+```python
+import sys
+print(sys.path)
+```
+
+Agar `ModuleNotFoundError` ko'rsangiz, skriptni loyiha root'idan ishga tushiring va modul fayli shu yo'llardan birida borligini tekshiring.
+
+### `__name__ == "__main__"`
+
+Modul to'g'ridan-to'g'ri ishga tushirilganda va import qilinganda turlicha ishlashi mumkin:
+
+```python
+def main():
+    print("Run as script")
+
+if __name__ == "__main__":
+    main()
+```
+
+- Direct run: `python support.py` -> `main()` ishlaydi
+- Boshqa fayldan import qilinganda: `main()` avtomatik ishga tushmaydi
+
+### Paketlar (packages)
+
+Paket - bog'liq modullarni bitta papka ichida guruhlash usuli.
+
+Masalan:
+
+```text
+project/
+  app.py
+  helpers/
+    __init__.py
+    math_utils.py
+```
+
+Ishlatish:
+
+```python
+from helpers.math_utils import add
+```
+
+`__init__.py` papkani package sifatida belgilaydi va import'larni barqaror yechishda (resolve) yordam beradi.
+
+### Modul a'zolarini ko'rish
+
+Moduldagi export qilingan nomlarni ko'rish uchun `dir()` dan foydalaning:
+
+```python
+import math
+print(dir(math))
+```
+
+### Ko'p uchraydigan xatolar
+
+- `ModuleNotFoundError`: noto'g'ri working directory yoki modul path.
+- `ImportError`: circular import yoki kerakli symbol export qilinmagan.
+- Nom kolliziyasi: faylingiz standard/third-party modul nomi bilan bir xil (masalan `random.py`).
diff --git a/content/uz/tutorial/intermediate/23-python-file-io.md b/content/uz/tutorial/intermediate/23-python-file-io.md
new file mode 100644
index 0000000..65bce14
--- /dev/null
+++ b/content/uz/tutorial/intermediate/23-python-file-io.md
@@ -0,0 +1,79 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python fayl I/O (kirish/chiqish)
+order: 23
+permalink: /uz/tutorial/python-file-io/
+---
+
+<img src="/img/tutorial/19-dasar-dasar-io-python.webp" alt="Python fayl I/O" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Bu bo'lim Python 3 da asosiy input/output (I/O) amallarini qamrab oladi.
+
+### `print()` bilan chiqish
+
+`print()` qiymatlarni matnga aylantirib standard output'ga yozadi.
+
+```python
+print("Python is a great programming language")
+print("A", "B", "C", sep="-")
+```
+
+### `input()` bilan klaviaturadan kiritish
+
+Python 3 da `input()` doim string qaytaradi.
+
+```python
+name = input("Your name: ")
+age = int(input("Your age: "))
+print(f"Hello {name}, next year you are {age + 1}")
+```
+
+### Fayl o'qish
+
+Fayl avtomatik yopilishi uchun `with` ishlating.
+
+```python
+with open("notes.txt", "r", encoding="utf-8") as f:
+    content = f.read()
+    print(content)
+```
+
+O'qish uchun keng tarqalgan metodlar:
+
+- `read()` -> butun kontent
+- `readline()` -> bitta qator
+- `readlines()` -> qatorlar ro'yxati (list)
+
+### Faylga yozish
+
+```python
+with open("notes.txt", "w", encoding="utf-8") as f:
+    f.write("learn python\n")
+    f.write("File I/O is important\n")
+```
+
+Fayl mode'lari:
+
+- `"r"` o'qish
+- `"w"` yozish (overwrite qiladi)
+- `"a"` qo'shib yozish (append)
+- `"x"` yangi fayl yaratish
+- Binary mode uchun `"b"` qo'shing (`"rb"`, `"wb"`)
+
+### Xavfsiz JSON I/O misoli
+
+```python
+import json
+
+data = {"name": "Alice", "level": "intermediate"}
+
+with open("user.json", "w", encoding="utf-8") as f:
+    json.dump(data, f, ensure_ascii=False, indent=2)
+
+with open("user.json", "r", encoding="utf-8") as f:
+    loaded = json.load(f)
+
+print(loaded)
+```
+
diff --git a/content/uz/tutorial/intermediate/24-python-exceptions.md b/content/uz/tutorial/intermediate/24-python-exceptions.md
new file mode 100644
index 0000000..071341e
--- /dev/null
+++ b/content/uz/tutorial/intermediate/24-python-exceptions.md
@@ -0,0 +1,115 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python exception'lar (exceptions)
+order: 24
+permalink: /uz/tutorial/python-exceptions/
+---
+
+<img src="/img/tutorial/20-belajar-exception-python.webp" alt="Python exceptions" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Exception'lar - bu runtime xatolar bo'lib, dastur oqimini (flow) to'xtatib qo'yadi. Python bunday holatlarni xavfsiz boshqarish uchun `try`/`except` ni beradi.
+Exception'larni to'g'ri tutish dasturingizni yanada ishonchli qiladi va foydalanuvchi uchun tushunarliroq xatolik xabarlarini chiqaradi.
+
+### Asosiy exception handling
+
+```python
+try:
+    value = int(input("Enter a number: "))
+    print(10 / value)
+except ValueError:
+    print("Input must be a number")
+except ZeroDivisionError:
+    print("Cannot divide by zero")
+```
+
+Imkon qadar aniq (specific) exception turlarini tuting. `except Exception:` kabi keng tutishni faqat kerak bo'lganda ishlating va konteks aniq bo'lishi uchun log qiling yoki qayta ko'taring (re-raise).
+
+### `else` va `finally`
+
+- `else` exception bo'lmaganda ishlaydi.
+- `finally` doim ishlaydi (tozalash kodi).
+
+```python
+f = None
+
+try:
+    f = open("data.txt", "r", encoding="utf-8")
+except FileNotFoundError:
+    print("File not found")
+else:
+    print(f.read())
+finally:
+    if f is not None:
+        f.close()
+```
+
+Fayl bilan ishlashda ko'pincha `with open(...)` soddaroq. `finally` ni `with` boshqarmaydigan resurslar uchun tozalashni kafolatlash kerak bo'lganda ishlating.
+
+### Exception ko'tarish (raising)
+
+Input/state noto'g'ri bo'lsa `raise` ishlating:
+
+```python
+def set_age(age):
+    if age < 0:
+        raise ValueError("Age cannot be negative")
+    return age
+```
+
+Xatoni erta ko'tarish noto'g'ri data dastur ichiga chuqurroq kirib ketishini oldini oladi.
+
+### Custom exception'lar
+
+```python
+class InvalidUsernameError(Exception):
+    pass
+
+
+def register(username):
+    if len(username) < 3:
+        raise InvalidUsernameError("Username must be at least 3 characters")
+```
+
+Yirik ilovalarda custom exception'lar error handling'ni aniqroq qiladi, ayniqsa turli xatoliklar uchun turli javob qaytarish kerak bo'lganda.
+
+### Keng tarqalgan built-in exception'lar
+
+| Nomi | Odatdagi holat |
+| --------------------- | ------------------------------------------------------ |
+| `Exception` | Ko'p exception'lar uchun bazaviy class |
+| `ValueError` | Tur to'g'ri, lekin qiymat noto'g'ri |
+| `TypeError` | Amal/funksiya uchun tur noto'g'ri |
+| `KeyError` | Dictionary'da key topilmadi |
+| `IndexError` | Index chegaradan tashqarida |
+| `FileNotFoundError` | Fayl yo'li topilmadi |
+| `PermissionError` | Fayl/resursga ruxsat yo'q |
+| `OSError` | OS darajasidagi xatolar |
+| `ImportError` / `ModuleNotFoundError` | Import muvaffaqiyatsiz |
+| `AssertionError` | `assert` statement yiqildi |
+| `StopIteration` | Iterator tugadi |
+| `EOFError` | Input tugadi |
+
+### Assertions (`assert`)
+
+Assertion'lar development paytida ichki sanity check uchun foydali:
+
+```python
+def divide(a, b):
+    assert b != 0, "b must not be zero"
+    return a / b
+```
+
+Assertion'lar dasturchi xatolarini tutish uchun; foydalanuvchi input'ini tekshirish uchun emas. Assertion'lar optimizatsiya flag'lari bilan o'chirilishi mumkin (masalan `python -O`).
+
+### Python 3 uchun eslatmalar
+
+- `IOError` va `EnvironmentError` - `OSError` ning alias'i.
+- Python 3 da `StandardError` yo'q.
+- Concurrent kod uchun Python `ExceptionGroup` va `except*` ni ham qo'llab-quvvatlaydi.
+
+### Ko'p uchraydigan xatolar
+
+- `except:` ni yalang'och ishlatib, real bug'larni yashirib yuborish.
+- Noto'g'ri exception turini tutish (handler umuman ishlamaydi).
+- Log qilmasdan xatoni yutib yuborish (debug qiyinlashadi).
diff --git a/content/uz/tutorial/intermediate/25-python-class-objects.md b/content/uz/tutorial/intermediate/25-python-class-objects.md
new file mode 100644
index 0000000..6dfae96
--- /dev/null
+++ b/content/uz/tutorial/intermediate/25-python-class-objects.md
@@ -0,0 +1,169 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python object va class
+order: 25
+permalink: /uz/tutorial/python-class-objects/
+---
+
+<img src="/img/tutorial/21-belajar-oop-object-class-python.webp" alt="Python OOP - object va class" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Class'lar data va behavior'ni bitta qayta ishlatiladigan tuzilma ichida modellashtirishga yordam beradi.
+
+### OOP bo'yicha qisqa lug'at
+
+| Atama | Ma'nosi |
+| ---- | ------- |
+| Class | Atribut va metodlarni aniqlaydigan shablon (blueprint) |
+| Object / Instance | Class'dan yaratilgan aniq obyekt (instance) |
+| Attribute | Obyekt yoki class'da saqlanadigan ma'lumot |
+| Class attribute | Class'ning barcha instance'lari uchun umumiy o'zgaruvchi |
+| Instance attribute | Har bir obyektga xos o'zgaruvchi (`self.x`) |
+| Method | Class ichida aniqlangan funksiya |
+| Instantiation | Class'dan obyekt yaratish jarayoni |
+| Inheritance | Mavjud class'dan yangi class qurish |
+| Encapsulation | Data va behavior'ni guruhlash; kirishni convention orqali boshqarish |
+| Polymorphism | Bir xil interfeys, turli xatti-harakat |
+| Operator overloading | `+`, `==`, `len()` kabi operatorlar uchun maxsus metodlar orqali behavior belgilash |
+
+### Oddiy class va obyekt
+
+```python
+class Employee:
+    company = "PythonCompany"  # klass atributi
+
+    def __init__(self, name, salary):
+        self.name = name        # obyekt atributi
+        self.salary = salary
+
+    def display(self):
+        print(f"Name: {self.name}, Salary: {self.salary}")
+```
+
+Obyekt yaratish:
+
+```python
+emp1 = Employee("Zara", 2000)
+emp2 = Employee("Manni", 5000)
+
+emp1.display()
+emp2.display()
+print(Employee.company)
+```
+
+### Instance attribute va class attribute farqi
+
+- **Instance attribute** har bir obyektga tegishli (`self.name`).
+- **Class attribute** esa barcha instance'lar uchun umumiy (`company`).
+
+### Metod turlari
+
+```python
+class Example:
+    total = 0
+
+    def __init__(self, value):
+        self.value = value
+        Example.total += 1
+
+    def instance_method(self):
+        return self.value
+
+    @classmethod
+    def class_method(cls):
+        return cls.total
+
+    @staticmethod
+    def static_method(a, b):
+        return a + b
+```
+
+### Inheritance (meros olish)
+
+```python
+class Person:
+    def __init__(self, name):
+        self.name = name
+
+    def greet(self):
+        print(f"Hello, I am {self.name}")
+
+
+class Developer(Person):
+    def __init__(self, name, language):
+        super().__init__(name)
+        self.language = language
+
+    def greet(self):
+        print(f"Hello, I am {self.name} and I code in {self.language}")
+```
+
+### Encapsulation (convention)
+
+Python qat'iy private atributlarni majburan tekshirmaydi, lekin odat (convention) ishlatiladi:
+
+- `_name` -> ichki foydalanish (internal)
+- `__name` -> name-mangled atribut
+
+### Data saqlashga yo'naltirilgan class'lar uchun `@dataclass`
+
+```python
+from dataclasses import dataclass
+
+
+@dataclass
+class Product:
+    name: str
+    price: float
+```
+
+`@dataclass` asosan data saqlaydigan class'larda ortiqcha takroriy kodni kamaytiradi.
+
+### Operator overloading
+
+Maxsus (dunder) metodlar orqali operatorlar obyektlaringiz bilan qanday ishlashini belgilash mumkin:
+
+```python
+class Vector:
+    def __init__(self, x, y):
+        self.x = x
+        self.y = y
+
+    def __add__(self, other):
+        return Vector(self.x + other.x, self.y + other.y)
+
+    def __repr__(self):
+        return f"Vector({self.x}, {self.y})"
+
+
+v1 = Vector(1, 2)
+v2 = Vector(3, 4)
+print(v1 + v2)  # Vector(4, 6)
+```
+
+### To'liq ishlaydigan misol
+
+```python
+class Employee:
+    emp_count = 0
+
+    def __init__(self, name: str, salary: float):
+        self.name = name
+        self.salary = salary
+        Employee.emp_count += 1
+
+    def display(self):
+        print(f"Name: {self.name}, Salary: {self.salary}")
+
+    @classmethod
+    def total(cls):
+        return cls.emp_count
+
+
+emp1 = Employee("Zara", 2000)
+emp2 = Employee("Manni", 5000)
+
+emp1.display()
+emp2.display()
+print(f"Total employees: {Employee.total()}")
+```
diff --git a/content/uz/tutorial/intermediate/26-python-database-access.md b/content/uz/tutorial/intermediate/26-python-database-access.md
new file mode 100644
index 0000000..7bc1fff
--- /dev/null
+++ b/content/uz/tutorial/intermediate/26-python-database-access.md
@@ -0,0 +1,165 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python'da database bilan ishlash
+order: 26
+permalink: /uz/tutorial/python-database-access/
+---
+
+<img src="/img/tutorial/22-cara-akses-database-mysql-sql-postgres-python.webp" alt="Python database access - MySQL, SQL, Postgres" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Python uchun database adapter'lar odatda DB-API 2.0 spetsifikatsiyasiga amal qiladi. Bu turli database'larda bir xil dasturlash modelini beradi: connect, cursor yaratish, SQL bajarish, row'larni olish (fetch), va commit/rollback.
+
+Python bilan ko'p ishlatiladigan database'lar:
+
+- SQLite (built in)
+- PostgreSQL
+- MySQL/MariaDB
+- Microsoft SQL Server
+- Oracle
+
+### PyMySQL nima?
+
+[PyMySQL](https://pymysql.readthedocs.io/en/latest/) - DB-API 2.0 ni implement qiladigan pure-Python MySQL client.
+SQLite bilan ishlasangiz, Python standard library'da `sqlite3` allaqachon bor.
+
+### PyMySQL o'rnatish
+
+```bash
+python -m pip install pymysql
+```
+
+### Ulanish sozlamasi (keyingi misollarda ishlatiladi)
+
+Database credential'larni bir marta sozlab, har bir bo'limda `get_connection()` ni qayta ishlating.
+
+```python
+import pymysql
+
+DB_CONFIG = {
+    "host": "localhost",
+    "user": "testuser",
+    "password": "test123",
+    "database": "TESTDB",
+    "charset": "utf8mb4",
+}
+
+def get_connection():
+    return pymysql.connect(**DB_CONFIG)
+```
+
+### Oddiy ulanish misoli
+
+```python
+with get_connection() as connection:
+    with connection.cursor() as cursor:
+        cursor.execute("SELECT VERSION()")
+        version = cursor.fetchone()
+        print("Database version:", version)
+```
+
+### Jadval yaratish
+
+Insert/read/update/delete qilishdan oldin schema yarating:
+
+```python
+create_sql = """
+CREATE TABLE IF NOT EXISTS employee (
+    id INT PRIMARY KEY AUTO_INCREMENT,
+    first_name VARCHAR(50) NOT NULL,
+    last_name VARCHAR(50),
+    age INT,
+    sex CHAR(1),
+    income DECIMAL(10, 2)
+)
+"""
+
+with get_connection() as connection:
+    with connection.cursor() as cursor:
+        cursor.execute(create_sql)
+    connection.commit()
+```
+
+### Ma'lumot qo'shish (parameterized query)
+
+SQL injection oldini olish uchun placeholder ishlating.
+
+```python
+insert_sql = """
+INSERT INTO employee (first_name, last_name, age, sex, income)
+VALUES (%s, %s, %s, %s, %s)
+"""
+
+with get_connection() as connection:
+    with connection.cursor() as cursor:
+        cursor.execute(insert_sql, ("Mac", "Mohan", 20, "M", 2000.00))
+    connection.commit()
+```
+
+### Ma'lumot o'qish
+
+Ko'p row uchun `fetchall()`, bitta row uchun `fetchone()` ishlating:
+
+```python
+select_sql = "SELECT first_name, last_name, age, sex, income FROM employee WHERE income > %s"
+
+with get_connection() as connection:
+    with connection.cursor() as cursor:
+        cursor.execute(select_sql, (1000,))
+        rows = cursor.fetchall()
+
+for row in rows:
+    print(row)
+```
+
+### Ma'lumot yangilash
+
+```python
+update_sql = "UPDATE employee SET age = age + 1 WHERE sex = %s"
+
+with get_connection() as connection:
+    with connection.cursor() as cursor:
+        cursor.execute(update_sql, ("M",))
+    connection.commit()
+```
+
+### Ma'lumot o'chirish
+
+```python
+delete_sql = "DELETE FROM employee WHERE age > %s"
+
+with get_connection() as connection:
+    with connection.cursor() as cursor:
+        cursor.execute(delete_sql, (20,))
+    connection.commit()
+```
+
+### Transaction bo'yicha eslatmalar
+
+- `connection.commit()` o'zgarishlarni saqlaydi.
+- `connection.rollback()` saqlanmagan o'zgarishlarni bekor qiladi.
+- Connection/cursor'larni doim yoping (yoki yuqoridagidek context manager ishlating).
+
+Bir nechta yozish (write) amali ketma-ket bo'lsa, xatoda rollback qiling:
+
+```python
+with get_connection() as connection:
+    try:
+        with connection.cursor() as cursor:
+            cursor.execute("UPDATE employee SET income = income + %s", (100,))
+            cursor.execute("UPDATE employee SET income = income - %s WHERE id = %s", (100, 1))
+        connection.commit()
+    except Exception:
+        connection.rollback()
+        raise
+```
+
+### Ko'p uchraydigan xatolar
+
+- `Access denied`: username/password yoki host noto'g'ri.
+- `Unknown database` yoki `Table doesn't exist`: setup SQL hali bajarilmagan.
+- `INSERT`/`UPDATE`/`DELETE` dan keyin `commit()`ni unutish, shuning uchun o'zgarishlar "saqlanmagandek" ko'rinadi.
+- SQL'ni string formatlash bilan qurish, placeholder (`%s`) ishlatmaslik (SQL injection xavfi).
+
+Til va kutubxonalar bo'yicha to'liq ma'lumot uchun [Python documentation](https://docs.python.org/3/) ni ko'ring.
+
diff --git a/content/uz/tutorial/intermediate/27-python-networking.md b/content/uz/tutorial/intermediate/27-python-networking.md
new file mode 100644
index 0000000..0865398
--- /dev/null
+++ b/content/uz/tutorial/intermediate/27-python-networking.md
@@ -0,0 +1,119 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python networking (tarmoq)
+order: 27
+permalink: /uz/tutorial/python-networking/
+---
+
+<img src="/img/tutorial/23-tutorial-networking-python.webp" alt="Python networking darsi" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Python past darajali (low-level) va yuqori darajali (high-level) networking modullarini taqdim etadi.
+
+- Low-level: TCP/UDP client va serverlar uchun `socket`
+- High-level: `urllib`, `http.client`, `smtplib`, `imaplib`, `ftplib` va boshqalar
+
+Avval socket bilan asoslarni tushunib oling, keyin production ilovalar uchun yuqori darajali kutubxonalardan foydalaning.
+
+### Socket nima?
+
+Socket - bu dasturlar orasida ikki tomonga aloqa (two-way communication) uchun endpoint.
+Socket'lar bir xil kompyuterda ishlayotgan process'lar orasida ham, tarmoq orqali boshqa kompyuterlarda ham ishlashi mumkin.
+
+### Socket moduli
+
+Socket yaratish:
+
+`socket.socket(family=AF_INET, type=SOCK_STREAM)`
+
+- `AF_INET` IPv4 uchun
+- `SOCK_STREAM` TCP uchun
+- `SOCK_DGRAM` UDP uchun
+
+`SOCK_STREAM` (TCP) ishonchli va tartibli (ordered). `SOCK_DGRAM` (UDP) tezroq, lekin yetib borishni kafolatlamaydi.
+
+### Server socket metodlari
+
+| Metod | Izoh |
+| ---------- | ----------------------------------------------------------------------------------------- |
+| `bind()` | `(host, port)` manzilini socket'ga bog'laydi |
+| `listen()` | Kiruvchi TCP ulanishlarini kutishni boshlaydi |
+| `accept()` | Kiruvchi ulanishni qabul qilib `(conn, addr)` qaytaradi |
+
+### Client socket metodlari
+
+| Metod | Izoh |
+| ----------- | ----------------------------------------------------- |
+| `connect()` | TCP server'ga ulanadi |
+
+### Umumiy socket metodlari
+
+| Metod | Izoh |
+| -------------------- | --------------------------------- |
+| `recv()` | Byte'larni qabul qilish |
+| `sendall()` | Barcha byte'larni yuborish |
+| `recvfrom()` | UDP paketni qabul qilish |
+| `sendto()` | UDP paketni yuborish |
+| `close()` | Socket'ni yopish |
+
+### Oddiy TCP server
+
+Bu minimal server bitta client ulanishini qabul qiladi, bir marta javob yuboradi va chiqadi.
+
+```python
+import socket
+
+HOST = "127.0.0.1"
+PORT = 12345
+
+with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
+    s.bind((HOST, PORT))
+    s.listen()
+    print(f"Server listening on {HOST}:{PORT}")
+
+    conn, addr = s.accept()
+    with conn:
+        print("Connected by", addr)
+        conn.sendall(b"Thank you for connecting")
+```
+
+### Oddiy TCP client
+
+```python
+import socket
+
+HOST = "127.0.0.1"
+PORT = 12345
+
+with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
+    s.settimeout(5)  # soniya
+    s.connect((HOST, PORT))
+    data = s.recv(1024)
+
+print(data.decode("utf-8"))
+```
+
+Avval server'ni ishga tushiring, keyin boshqa terminal'dan client'ni ishga tushiring.
+
+### Python'dagi keng tarqalgan internet modullari
+
+| Protokol | Default port | Python moduli |
+| -------- | ------------ | ----------------------------- |
+| HTTP | 80 | `urllib.request`, `http.client` |
+| HTTPS | 443 | `urllib.request`, `http.client` |
+| FTP | 21 | `ftplib` |
+| SMTP | 25 / 587 | `smtplib` |
+| POP3 | 110 | `poplib` |
+| IMAP4 | 143 | `imaplib` |
+| NNTP | 119 | `nntplib` |
+| XML-RPC | (over HTTP) | `xmlrpc.client` |
+
+Production tizimlarda imkon qadar yuqori darajali kutubxonalarni tanlang va doim timeout qo'shing.
+
+### Ko'p uchraydigan xatolar
+
+- `ConnectionRefusedError`: server ishlamayapti yoki host/port noto'g'ri.
+- Client `recv()`da osilib qoladi: timeout yo'q va server data yubormaydi.
+- `OSError: [Errno 98] Address already in use`: oldingi process portni band qilgan.
+- `str` va `bytes`ni aralashtirish: socket byte yuboradi/qabul qiladi, shuning uchun encode/decode ni aniq qiling.
+
diff --git a/content/uz/tutorial/intermediate/28-python-web-development.md b/content/uz/tutorial/intermediate/28-python-web-development.md
new file mode 100644
index 0000000..6567d81
--- /dev/null
+++ b/content/uz/tutorial/intermediate/28-python-web-development.md
@@ -0,0 +1,116 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python'da veb dasturlash
+order: 28
+permalink: /uz/tutorial/python-web-development/
+---
+
+<img src="/img/tutorial/24-pengembangan-web-python.webp" alt="Python web development" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Veb dasturlash (web development) - veb-ilovalar va Web uchun API'larni o'ylab topish, yaratish, deploy qilish va ishlatishni (operatsiya) o'z ichiga oladigan keng tushuncha.
+
+### Veb dasturlashda Python
+
+Python server-side veb-ilovalarni qurish uchun ishlatiladi. Oddiy veb-ilova yaratishda framework shart bo'lmasligi mumkin, lekin amaliyotda deyarli hamma tayyor open-source kutubxonalar/frameworklar orqali ishni tezlashtiradi.
+
+Python brauzerda ishlamaydi. Chrome, Firefox va Internet Explorer kabi brauzerlarda bajariladigan til - JavaScript. `pyjs` kabi loyihalar Python'dan JavaScript'ga compile qilishi mumkin. Lekin ko'p Python dasturchilari veb-ilovalarni Python + JavaScript kombinatsiyasida yozadi: Python server tomonda ishlaydi, JavaScript esa client'ga yuklanib brauzerda bajariladi.
+
+Python bilan veb-sayt yaratish oson, lekin avval HTML, CSS va JavaScript asoslarini bilib olgan bo'lishingiz kerak.
+
+### Python web frameworklari
+
+Python'da veb dasturlash uchun eng ommabop va o'rganishga qulay frameworklar: Django, Flask va FastAPI.
+
+#### Flask
+
+Flask - o'rganish oson, o'rnatish oson va sodda (microframework) Python framework.
+
+Afzalliklari:
+
+- ishlatish oson
+- built-in development server va debugger
+- unit testing qo'llab-quvvatlashi
+- RESTful request dispatching
+- Jinja2 templating ishlatadi
+- secure cookies (client side sessions) qo'llab-quvvatlaydi
+- 100% WSGI 1.0 compliant
+- Unicode asosida
+- keng hujjatlashtirilgan (documented)
+
+Flask o'rnatish:
+`pip install Flask`
+
+Flask bilan Hello World veb-ilova:
+
+```python
+from flask import Flask
+app = Flask(__name__)
+
+@app.route("/")
+def hello():
+  return "Hello World!"
+
+if __name__ == "__main__":
+  app.run()
+```
+
+Server'ni ishga tushirish:
+`python hello.py`
+
+Brauzerda [http://localhost:5000/](http://localhost:5000/) ni oching, `Hello World!` ko'rinadi.
+
+#### Django
+
+Django - tezkor development va toza, amaliy dizaynni targ'ib qiladigan high-level Python web framework. U veb dasturlashdagi ko'p "bezovtalik"larni o'zi hal qiladi, siz esa g'ildirakni qayta ixtiro qilmasdan ilovangizni yozishga e'tibor qaratasiz.
+
+Django'ning boshqa frameworklarga nisbatan kuchli jihatlaridan biri - scalability. Bu framework katta ilovalar uchun mos.
+
+Django o'rnatish:
+`pip install Django`
+
+O'rnatilgandan so'ng, yangi Django loyiha yarating:
+
+```bash
+django-admin startproject myproject
+cd myproject
+python manage.py runserver
+```
+
+Brauzerda [http://127.0.0.1:8000/](http://127.0.0.1:8000/) ni ochsangiz Django welcome sahifasini ko'rasiz.
+
+#### FastAPI
+
+FastAPI - Python 3.7+ uchun API yaratishga mo'ljallangan zamonaviy, tez (high-performance) web framework. U standard Python type hints'ga tayanadi. FastAPI 2025 yilda yuqori tezlik va qulayligi sabab juda ommabop.
+
+FastAPI afzalliklari:
+
+- Juda tez: NodeJS va Go bilan bir darajadagi performance
+- Tez yoziladi: development tezligini 2-3 barobar oshiradi
+- Kamroq bug: inson xatolarini taxminan 40% ga kamaytiradi
+- Avtomatik dokumentatsiya: Swagger UI va ReDoc avtomatik mavjud
+- Standard'ga mos: OpenAPI va JSON Schema
+
+FastAPI o'rnatish:
+`pip install fastapi uvicorn`
+
+FastAPI bilan Hello World:
+
+```python
+from fastapi import FastAPI
+
+app = FastAPI()
+
+@app.get("/")
+def read_root():
+    return {"Hello": "World"}
+
+@app.get("/items/{item_id}")
+def read_item(item_id: int, q: str = None):
+    return {"item_id": item_id, "q": q}
+```
+
+Server'ni ishga tushirish:
+`uvicorn main:app --reload`
+
+Natijani ko'rish uchun [http://127.0.0.1:8000/](http://127.0.0.1:8000/) ni oching, interaktiv API dokumentatsiya uchun esa [http://127.0.0.1:8000/docs](http://127.0.0.1:8000/docs) ni ko'ring.
diff --git a/content/uz/tutorial/intermediate/29-python-regex.md b/content/uz/tutorial/intermediate/29-python-regex.md
new file mode 100644
index 0000000..8567957
--- /dev/null
+++ b/content/uz/tutorial/intermediate/29-python-regex.md
@@ -0,0 +1,173 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python regular expression'lar (RegEx)
+order: 29
+permalink: /uz/tutorial/python-regex/
+---
+
+<img src="/img/tutorial/25-belajar-regex-pencarian-teks-python.webp" alt="Python regular expressions (RegEx)" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Regular Expression yoki RegEx - bu qidirish (search) uchun ishlatiladigan pattern (belgilar ketma-ketligi). RegEx orqali string ichida ma'lum pattern bor-yo'qligini tekshirish mumkin.
+
+![Regular Expressions (RegEx) ilustratsiyasi](/img/regex-illustration.png)
+
+Boshlovchilar uchun RegEx'ni Ctrl+F bilan ishlaydigan oddiy "Search/Find"ning ancha kuchli varianti deb tasavvur qiling. Oddiy qidirish faqat bir xil so'zni topadi, RegEx esa pattern topadi: masalan, juda uzun hujjatda barcha telefon raqamlar, email manzillar yoki sana formatlarini aniq matnni bilmasdan ham topish mumkin.
+
+Dastlab RegEx ko'plab maxsus belgilar sabab chalkash ko'rinadi. Lekin bu texnikani o'zlashtirsangiz, matnni qayta ishlash (text processing) va user input validation ishlarida juda katta foydasi tegadi.
+
+Python'da `re` nomli built-in modul bor va u Regular Expression bilan ishlashga yordam beradi.
+
+### re modulidan foydalanish
+
+Python'da RegEx ishlatish uchun `re` modulini import qiling:
+
+```python
+import re
+```
+
+### re modulidagi funksiyalar
+
+`re` moduli string ichidan mosliklarni (match) qidirish uchun funksiyalarni beradi:
+
+| Funksiya | Tavsif |
+| :--- | :--- |
+| `findall` | Barcha match'larni ro'yxat (list) qilib qaytaradi |
+| `search` | String ichida istalgan joyda match bo'lsa Match obyekt qaytaradi |
+| `split` | Match topilgan joylarda string'ni bo'lib list qaytaradi |
+| `sub` | Bir yoki bir nechta match'ni boshqa matn bilan almashtiradi |
+
+#### search() funksiyasi
+
+`search()` string ichidan match qidiradi va match bo'lsa Match obyekt qaytaradi. Bir nechta match bo'lsa, faqat birinchi topilgani qaytadi.
+
+```python
+import re
+
+txt = "The rain in Spain"
+x = re.search("^The.*Spain$", txt)
+
+if x:
+  print("YES! We have a match!")
+else:
+  print("No match")
+```
+
+#### findall() funksiyasi
+
+`findall()` barcha match'larni list qilib qaytaradi.
+
+```python
+import re
+
+txt = "The rain in Spain"
+x = re.findall("ai", txt)
+print(x)
+```
+
+Match'lar topilgan tartibda listga tushadi. Agar match bo'lmasa, bo'sh list qaytadi.
+
+#### split() funksiyasi
+
+`split()` match topilgan joylarda string'ni bo'lib list qaytaradi.
+
+```python
+import re
+
+txt = "The rain in Spain"
+x = re.split(r"\s", txt)
+print(x)
+```
+
+Match sonini `maxsplit` parametri bilan cheklash mumkin:
+
+```python
+import re
+
+txt = "The rain in Spain"
+x = re.split(r"\s", txt, 1)
+print(x)
+```
+
+#### sub() funksiyasi
+
+`sub()` match'larni o'zingiz xohlagan matn bilan almashtiradi.
+
+```python
+import re
+
+txt = "The rain in Spain"
+x = re.sub(r"\s", "9", txt)
+print(x)
+```
+
+Almashtirishlar sonini `count` parametri bilan boshqarish mumkin:
+
+```python
+import re
+
+txt = "The rain in Spain"
+x = re.sub(r"\s", "9", txt, 2)
+print(x)
+```
+
+### Metacharacter'lar
+
+Metacharacter'lar - maxsus ma'noga ega belgilar:
+
+| Belgi | Tavsif | Misol |
+| :--- | :--- | :--- |
+| `[]` | Belgilar to'plami | `"[a-m]"` |
+| `\` | Maxsus ketma-ketlikni bildiradi (yoki maxsus belgilarni escape qilish uchun) | `"\d"` |
+| `.` | Istalgan belgi (newline'dan tashqari) | `"he..o"` |
+| `^` | Shu bilan boshlanadi | `"^hello"` |
+| `$` | Shu bilan tugaydi | `"world$"` |
+| `*` | 0 yoki undan ko'p marta takrorlanish | `"aix*"` |
+| `+` | 1 yoki undan ko'p marta takrorlanish | `"aix+"` |
+| `{}` | Aniq ko'rsatilgan marta takrorlanish | `"al{2}"` |
+| `\|` | Yoki (either/or) | `"falls\|stays"` |
+| `()` | Tutib olish (capture) va guruhlash | |
+
+### Maxsus ketma-ketliklar
+
+Special sequence - `\` dan keyin keladigan maxsus belgi bo'lib, alohida ma'noga ega:
+
+| Belgi | Tavsif | Misol |
+| :--- | :--- | :--- |
+| `\A` | Belgilar string boshida bo'lsa match qaytaradi | `"\AThe"` |
+| `\b` | Belgilar so'z boshida yoki so'z oxirida bo'lsa match qaytaradi | `r"\bain"` `r"ain\b"` |
+| `\B` | Belgilar so'z boshi/oxirida EMAS, lekin so'z ichida bo'lsa match qaytaradi | `r"\Bain"` `r"ain\B"` |
+| `\d` | String ichida raqam bo'lsa match qaytaradi (0-9) | `"\d"` |
+| `\D` | String ichida raqam bo'lmasa match qaytaradi | `"\D"` |
+| `\s` | String ichida whitespace bo'lsa match qaytaradi | `"\s"` |
+| `\S` | String ichida whitespace bo'lmasa match qaytaradi | `"\S"` |
+| `\w` | String ichida word characters bo'lsa match qaytaradi (a-Z, 0-9 va `_`) | `"\w"` |
+| `\W` | String ichida word characters bo'lmasa match qaytaradi | `"\W"` |
+| `\Z` | Belgilar string oxirida bo'lsa match qaytaradi | `"Spain\Z"` |
+
+### Set'lar
+
+Set - `[]` ichidagi belgilar to'plami bo'lib, maxsus ma'noga ega:
+
+| Set | Tavsif |
+| :--- | :--- |
+| `[arn]` | `a`, `r` yoki `n` dan biri bor bo'lsa match |
+| `[a-n]` | `a` dan `n` gacha bo'lgan kichik harflardan biri bo'lsa match |
+| `[^arn]` | `a`, `r`, `n` dan tashqari istalgan belgi bo'lsa match |
+| `[0123]` | `0`, `1`, `2` yoki `3` dan biri bo'lsa match |
+| `[0-9]` | `0` dan `9` gacha bo'lgan raqam bo'lsa match |
+| `[0-5][0-9]` | `00` dan `59` gacha bo'lgan ikki xonali son bo'lsa match |
+| `[a-zA-Z]` | `a` dan `z` gacha yoki `A` dan `Z` gacha bo'lgan harf bo'lsa match |
+| `[+]` | Set ichida `+`, `*`, `.`, `\|`, `()`, `$`, `{}` maxsus ma'noga ega emas. `[+]` - string ichidagi `+` belgisini match qiladi |
+
+### Misol
+
+```python
+import re
+
+# a dan n gacha bo'lgan kichik harflarni topish
+x = re.findall("[a-n]", txt)
+print(x)
+```
+
+Agar match topilmasa, `findall()` bo'sh list qaytaradi.
diff --git a/content/uz/tutorial/intermediate/30-python-json.md b/content/uz/tutorial/intermediate/30-python-json.md
new file mode 100644
index 0000000..0a1969b
--- /dev/null
+++ b/content/uz/tutorial/intermediate/30-python-json.md
@@ -0,0 +1,125 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python'da JSON bilan ishlash
+order: 30
+permalink: /uz/tutorial/python-json/
+---
+
+<img src="/img/tutorial/26-belajar-json-python.webp" alt="Python JSON" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+JSON (JavaScript Object Notation) - data saqlash va tashish (transport) uchun ommabop format. Dasturlashda JSON ko'pincha internetdan (API'lar) data olishda yoki ilovalar bir-biri bilan ma'lumot almashganda ishlatiladi.
+
+Boshlovchilar uchun JSON'ni tartibli va o'qilishi oson "shopping list"ga o'xshatish mumkin: uni ham odam, ham kompyuter oson o'qiydi. Ko'rinishi Python'dagi *Dictionary* ga o'xshagani uchun, JSON o'rganish tanish tuyuladi va veb-servislar bilan bog'lanadigan yoki konfiguratsiyalarni saqlaydigan ilovalar yozishda juda foydali bo'ladi.
+
+Quyida JSON object tuzilmasi va qisqa izohi:
+
+![JSON tuzilmasi izohi ilustratsiyasi](/img/belajar-json-pada-python.jpg)
+
+Python'da JSON bilan ishlash uchun standard `json` paketi bor.
+
+### JSON modulini import qilish
+
+Python'da JSON ishlatish uchun `json` modulini import qiling:
+
+```python
+import json
+```
+
+### JSON parse qilish (JSON -> Python)
+
+Agar sizda JSON string bo'lsa, uni `json.loads()` yordamida parse qilishingiz mumkin. Natija Python dictionary bo'ladi.
+
+```python
+import json
+
+# JSON ma'lumot:
+x =  '{ "name":"John", "age":30, "city":"New York"}'
+
+# x ni parse qilish:
+y = json.loads(x)
+
+# natija Python dictionary:
+print(y["age"])
+```
+
+### Python'dan JSON'ga o'tkazish (Python -> JSON)
+
+Agar sizda Python obyekt bo'lsa, uni `json.dumps()` yordamida JSON string'ga aylantirishingiz mumkin.
+
+```python
+import json
+
+# Python obyekt (dict):
+x = {
+  "name": "John",
+  "age": 30,
+  "city": "New York"
+}
+
+# JSON ga aylantirish:
+y = json.dumps(x)
+
+# natija JSON string:
+print(y)
+```
+
+Quyidagi Python turlarini JSON string'ga aylantirish mumkin:
+* dict
+* list
+* tuple
+* string
+* int
+* float
+* `True`
+* `False`
+* `None`
+
+### Natijani formatlash
+
+Yuqoridagi misolda JSON string chiqadi, lekin indentation va line break'lar bo'lmagani uchun o'qish qiyin bo'lishi mumkin.
+
+`json.dumps()` metodida natijani o'qilishi oson qilish uchun parametrlar bor:
+
+```python
+import json
+
+x = {
+  "name": "John",
+  "age": 30,
+  "married": True,
+  "children": ("Ann","Billy"),
+  "pets": None,
+  "cars": [
+    {"model": "BMW 230", "mpg": 27.5},
+    {"model": "Ford Edge", "mpg": 24.1}
+  ]
+}
+
+# natijani o'qilishi oson qilish uchun 4 ta indentdan foydalanish:
+print(json.dumps(x, indent=4))
+```
+
+Separator'larni ham sozlash mumkin. Default qiymat (`, ` va `: `): object'larni vergul+bo'sh joy bilan, key-value'ni esa ikki nuqta+bo'sh joy bilan ajratadi:
+
+```python
+import json
+
+x = {
+  "name": "John",
+  "age": 30,
+  "married": True,
+  "children": ("Ann","Billy"),
+  "pets": None,
+  "cars": [
+    {"model": "BMW 230", "mpg": 27.5},
+    {"model": "Ford Edge", "mpg": 24.1}
+  ]
+}
+
+# kalitlar bo'yicha tartiblab chiqarish:
+print(json.dumps(x, indent=4, sort_keys=True))
+```
+
+JSON internetdan data olish (API) yoki ilovalar orasida ma'lumot almashish uchun juda ko'p ishlatiladi. Shuning uchun Python'da JSON bilan ishlashni tushunish muhim.
+
diff --git a/content/uz/tutorial/intermediate/31-python-virtual-environment.md b/content/uz/tutorial/intermediate/31-python-virtual-environment.md
new file mode 100644
index 0000000..d21c733
--- /dev/null
+++ b/content/uz/tutorial/intermediate/31-python-virtual-environment.md
@@ -0,0 +1,113 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python virtual environment'lar (venv)
+order: 31
+permalink: /uz/tutorial/python-virtual-environment/
+---
+
+<img src="/img/tutorial/27-tutorial-virtual-environtment-python.webp" alt="Python virtual environment" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+Virtual environment - bu bitta loyiha uchun ajratilgan (isolated) Python muhiti. U turli loyihalar orasidagi dependency conflict'larni oldini oladi.
+Amaliyotda har bir loyiha uchun alohida environment ishlating, shunda har bir loyiha o'zining package versiyalarini mustaqil saqlaydi.
+
+### Nega virtual environment muhim?
+
+Jamoa va production muhitda virtual environment - deyarli standart talab:
+
+- **Reproducibility**: jamoa a'zolari va CI serverlar `requirements.txt` orqali aynan bir xil dependency'larni qayta tiklay oladi.
+- **Isolation**: bitta loyiha uchun package o'rnatish/yangilash, o'sha kompyuterdagi boshqa loyihalarni buzmaydi.
+- **Deployment**: production server'ga chiqarishda global o'rnatmalarga tayanmasdan, kerakli package'lar ro'yxatini aniq berasiz.
+
+Virtual environment bo'lmasa, loyihalar orasidagi versiya ziddiyatlarini topish va hal qilish qiyinlashadi.
+
+### Built-in modul: `venv`
+
+Python standard library'da `venv` bor.
+Bu default va eng portable yondashuv.
+
+#### 1. Virtual environment yaratish
+
+```bash
+# Windows
+py -m venv .venv
+python -m venv .venv
+
+# macOS / Linux
+python3 -m venv .venv
+```
+
+#### 2. Environment'ni aktivlashtirish
+
+```bash
+# Windows (PowerShell)
+.venv\Scripts\Activate.ps1
+
+# Windows (cmd)
+.venv\Scripts\activate.bat
+
+# macOS / Linux
+source .venv/bin/activate
+```
+
+Aktivlashtirgandan so'ng, shell odatda `(.venv)` ni ko'rsatadi.
+Faol Python interpreter'ni quyidagicha tekshirish mumkin:
+
+```bash
+python -c "import sys; print(sys.executable)"
+```
+
+#### 3. Package'larni environment ichida o'rnatish
+
+```bash
+python -m pip install requests
+python -m pip list
+```
+
+Doim aktivlashtirgandan keyin o'rnating, shunda package'lar global Python'ga emas, `.venv` ichiga tushadi.
+
+#### 4. Deactivate
+
+```bash
+deactivate
+```
+
+Istalgan payt 2-qadamdagi buyruq bilan qayta aktivlashtirishingiz mumkin.
+
+### Dependency'larni saqlash va qayta ishlatish
+
+```bash
+python -m pip freeze > requirements.txt
+python -m pip install -r requirements.txt
+```
+
+Bu usul turli kompyuterlarda bir xil o'rnatishni qayta tiklashga yordam beradi.
+`requirements.txt` ni version control'ga commit qiling, shunda jamoa a'zolari bir xil dependency set'ni o'rnatadi.
+
+### Ixtiyoriy zamonaviy vosita: `uv`
+
+`uv` environment va package'larni tez ishlash bilan boshqarishi mumkin.
+
+O'rnatish (bir martalik):
+
+```bash
+python -m pip install uv
+# or on Windows:
+py -m pip install uv
+```
+
+Batafsil: [uv documentation](https://github.com/astral-sh/uv)
+
+```bash
+uv venv
+uv pip install requests
+```
+
+`venv` - standard library'dagi rasmiy yechim, `uv` esa ixtiyoriy unumdorlik vositasi.
+
+### Ko'p uchraydigan xatolar
+
+- Aktivlashtirishdan oldin package o'rnatish, keyin loyiha ichida import ishlamasligi.
+- `python` bilan boshqa interpreter, `pip` bilan boshqa interpreter ishlatib yuborish (shuning uchun `python -m pip` tavsiya etiladi).
+- PowerShell'da execution policy sabab activation script bloklanishi.
+- Python versiyasi katta yangilangandan keyin environment buzilishi; `.venv` ni o'chirib `python -m venv .venv` bilan qayta yarating.
diff --git a/content/uz/tutorial/intermediate/32-python-pip-package.md b/content/uz/tutorial/intermediate/32-python-pip-package.md
new file mode 100644
index 0000000..5360389
--- /dev/null
+++ b/content/uz/tutorial/intermediate/32-python-pip-package.md
@@ -0,0 +1,110 @@
+---
+layout: tutorial.njk
+lang: uz
+title: Python'da pip va package management
+order: 32
+permalink: /uz/tutorial/python-pip-package/
+---
+
+<img src="/img/tutorial/28-cara-pip-di-python.webp" alt="Python pip va packages" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
+
+`pip` - Python uchun standart package manager. U orqali third-party kutubxonalarni o'rnatasiz, yangilaysiz va o'chirasiz.
+Amaliyotda `pip` ko'pincha `venv` bilan birga ishlatiladi: dependency'lar izolyatsiya qilinadi va qayta tiklanadigan (reproducible) bo'ladi.
+
+### Package nima?
+
+Package - bu Python modullari va metadata'ning tarqatiladigan to'plami bo'lib, odatda [PyPI](https://pypi.org/) ga joylanadi.
+
+### `pip` o'rnatilganini tekshirish
+
+```bash
+# Windows (py launcher)
+py -m pip --version
+
+python -m pip --version
+# or
+python3 -m pip --version
+```
+
+`python -m pip` ishlatish tavsiya etiladi, chunki u siz ishlatayotgan Python interpreter bilan bir xil muhitni nishonga oladi.
+Imkon qadar bu buyruqlarni loyiha virtual environment'i ichida bajaring.
+
+### Package o'rnatish
+
+```bash
+python -m pip install requests
+```
+
+Barqaror (stable) behavior kerak bo'lsa, aniq versiyani o'rnating:
+
+```bash
+python -m pip install requests==2.32.3
+```
+
+### Package yangilash
+
+```bash
+python -m pip install --upgrade requests
+```
+
+Optional extras'ni ham o'rnatish mumkin:
+
+```bash
+python -m pip install "requests[socks]"
+```
+
+### O'rnatilgan package'larni ishlatish
+
+```python
+import requests
+
+response = requests.get("https://belajarpython.com", timeout=10)
+print(response.status_code)
+```
+
+### O'rnatilgan package'larni ko'rish
+
+```bash
+python -m pip list
+```
+
+### Package o'chirish
+
+```bash
+python -m pip uninstall requests
+```
+
+### Package qidirish va tekshirish
+
+- [PyPI](https://pypi.org/) da qidiring
+- Package detallari:
+
+```bash
+python -m pip show requests
+```
+
+### Reproducible dependency'lar
+
+```bash
+python -m pip freeze > requirements.txt
+python -m pip install -r requirements.txt
+```
+
+`pip freeze` aniq o'rnatilgan versiyalarni yozib beradi va "menda ishlaydi" muammolarini kamaytiradi.
+
+### Ko'p uchraydigan xatolar
+
+- `.venv` o'rniga global o'rnatib yuborish, keyin loyiha muhiti mos kelmay qolishi.
+- Ilovada ishlatiladigan Python boshqa, `pip` esa boshqa o'rnatmadan ishlashi.
+- Package'lar orasida version conflict (mos versiyalarni pin qilish bilan yechiladi).
+- Ba'zi shell'larda extras uchun qo'shtirnoq qo'ymaslik (`"package[extra]"`).
+
+### Keyingi qadamlar
+
+Asosiy package boshqaruv jarayonini o'rganganingizdan so'ng quyidagilarni davom ettiring:
+
+- Python Standard Library docs: [https://docs.python.org/3.13/library/](https://docs.python.org/3.13/library/)
+- Python Language Reference: [https://docs.python.org/3.13/reference/](https://docs.python.org/3.13/reference/)
+- Official Python Tutorial index: [https://docs.python.org/3.13/tutorial/](https://docs.python.org/3.13/tutorial/)
+
+Amaliyot qilish uchun kichik loyihalar yarating, har birini `venv` bilan ajrating va dependency'larni `requirements.txt` bilan pin qiling.
diff --git a/docs/i18n/uz/CONTRIBUTING.md b/docs/i18n/uz/CONTRIBUTING.md
new file mode 100644
index 0000000..17d817b
--- /dev/null
+++ b/docs/i18n/uz/CONTRIBUTING.md
@@ -0,0 +1,44 @@
+# Belajarpython.com loyihasiga hissa qo'shish
+
+Hissa qo'shayotganingiz uchun rahmat.
+
+## Development Setup
+
+1. Dependency'larni o'rnating:
+   ```bash
+   npm ci
+   ```
+2. Lokal development'ni ishga tushiring:
+   ```bash
+   npm run dev
+   ```
+3. Saytni build qiling:
+   ```bash
+   npm run build
+   ```
+4. Validation tekshiruvlarini ishga tushiring:
+   ```bash
+   npm run check
+   ```
+
+## Kontent bo'yicha qo'llanma
+
+- Darslarni aniq, amaliy va boshlovchilar uchun tushunarli yozing.
+- Front matter'ni bir xil uslubda saqlang (`layout`, `title`, `order`, `permalink`).
+- Rasmlar uchun tushunarli `alt` matn yozing.
+- Ichki linklar va JSON-LD chiqishini `npm run check` bilan tekshiring.
+
+## Pull Request checklist
+
+- `npm run build` muvaffaqiyatli yakunlanadi.
+- `npm run check` muvaffaqiyatli yakunlanadi.
+- Yangi/yangi tahrirlangan kontentda linklar va metadata ishlaydi.
+- O'zgarishlar masala/vazifaga mos ko'lamda.
+
+## Muammolar haqida xabar berish
+
+Issue ochishda quyidagilarni kiriting:
+- Muammo haqida aniq tavsif.
+- Takrorlash qadamlari (agar mavjud bo'lsa).
+- Kutilgan va amaldagi natija.
+
diff --git a/docs/i18n/uz/README.md b/docs/i18n/uz/README.md
new file mode 100644
index 0000000..890ac94
--- /dev/null
+++ b/docs/i18n/uz/README.md
@@ -0,0 +1,43 @@
+<div align="center">
+  <img src="https://belajarpython.com/img/logo-belajarpython-for-github.png"><br><br>
+</div>
+
+---
+
+# [Belajarpython](https://www.belajarpython.com/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/codeuzhub/python-lessons/blob/main/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/codeuzhub/python-lessons/blob/main/.github/CONTRIBUTING.md)
+
+Belajarpython - Pythonni o'rganish uchun hamkorlik platformasi.
+
+- **Darslarni o'qing:** Pythonni boshidan o'rganishni boshlang. Boshlovchilar uchun tayyorlangan darslar sizga tezroq rivojlanishga yordam beradi.
+- **Maqolalarni o'qing:** Turli mavzulardagi eng so'nggi va eng ommabop Python maqolalarini o'rganing. Mazmun hamjamiyat tomonidan hamjamiyat uchun yaratiladi.
+- **Savol bering:** Duch kelgan har qanday Python savolini bering. Hamjamiyat a'zolari yechim topishda yordam berishga tayyor.
+
+## Hissa qo'shish
+
+Belajarpython - dasturchilar tomonidan dasturchilar uchun yaratilgan open-source veb-sayt. Hamma hissa qo'shishi mumkin: :trollface: dasturchilar, :man: talabalar, :older_woman: o'qituvchilar, va hatto :baby: endigina Pythonni o'rgana boshlaganlar ham o'z :heart: hissalarini [shu yerda](https://github.com/codeuzhub/python-lessons/blob/main/.github/CONTRIBUTING.md) ulashishlari mumkin.
+
+### [Hissa qo'shish qo'llanmasi](https://github.com/codeuzhub/python-lessons/blob/main/.github/CONTRIBUTING.md)
+
+Mazmun yaratish jarayoni haqida bilish uchun [hissa qo'shish qo'llanmasi](https://github.com/codeuzhub/python-lessons/blob/main/.github/CONTRIBUTING.md)ni o'qing.
+
+### Yangi boshlovchilar uchun vazifalar
+
+Hissa qo'shish jarayonimizga tezroq moslashishingiz uchun biz nisbatan kichik ko'lamli [good first issues](https://github.com/codeuzhub/python-lessons/issues) ro'yxatini yuritamiz. Bu boshlash uchun juda qulay joy.
+
+## Lokal ishga tushirish
+
+```bash
+npm ci
+npm run dev
+```
+
+Production build:
+
+```bash
+npm run build
+npm run check
+```
+
+### Litsenziya
+
+Belajarpython [MIT litsenziyasi ostida](../../../LICENSE) tarqatiladi.
diff --git a/index.njk b/index.njk
new file mode 100644
index 0000000..dc86d90
--- /dev/null
+++ b/index.njk
@@ -0,0 +1,19 @@
+---
+permalink: /
+eleventyExcludeFromCollections: true
+---
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="refresh" content="0; url={{ '/en/' | url }}">
+    <link rel="canonical" href="{{ '/en/' | url }}">
+    <title>Redirecting to /en/</title>
+    <script>
+      window.location.replace("{{ '/en/' | url }}");
+    </script>
+  </head>
+  <body>
+    <p>Redirecting to <a href="{{ '/en/' | url }}">English homepage</a>.</p>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
index 4daf3d5..13d330d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,17 @@
       "license": "MIT",
       "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
+        "@codemirror/autocomplete": "^6.20.0",
+        "@codemirror/commands": "^6.10.2",
+        "@codemirror/lang-python": "^6.2.1",
+        "@codemirror/language": "^6.12.2",
+        "@codemirror/lint": "^6.9.4",
+        "@codemirror/search": "^6.6.0",
+        "@codemirror/state": "^6.5.4",
+        "@codemirror/theme-one-dark": "^6.1.3",
+        "@codemirror/view": "^6.39.15",
+        "codemirror": "^6.0.2",
+        "esbuild": "^0.27.3",
         "markdown-it": "^14.0.0",
         "npm-run-all": "^4.1.5",
         "tailwindcss": "^3.4.0"
@@ -264,6 +275,563 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.0.tgz",
+      "integrity": "sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.2.tgz",
+      "integrity": "sha512-vvX1fsih9HledO1c9zdotZYUZnE4xV0m6i3m25s5DIfXofuprk6cRcLUZvSk3CASUbwjQX21tOGbkY2BH8TpnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-python": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.2.1.tgz",
+      "integrity": "sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.3.2",
+        "@codemirror/language": "^6.8.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/python": "^1.1.4"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.12.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.2.tgz",
+      "integrity": "sha512-jEPmz2nGGDxhRTg3lTpzmIyGKxz3Gp3SJES4b0nAuE5SWQoKdT5GoQ69cwMmFd+wvFUhYirtDTr0/DRHpQAyWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.4.tgz",
+      "integrity": "sha512-ABc9vJ8DEmvOWuH26P3i8FpMWPQkduD9Rvba5iwb6O3hxASgclm3T3krGo8NASXkHCidz6b++LWlzWIUfEPSWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.35.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.6.0.tgz",
+      "integrity": "sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.37.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.4.tgz",
+      "integrity": "sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.39.15",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.15.tgz",
+      "integrity": "sha512-aCWjgweIIXLBHh7bY6cACvXuyrZ0xGafjQ2VInjp4RM4gMfscK5uESiNdrH0pE+e1lZr2B4ONGsjchl2KsKZzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.5.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
+      "integrity": "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.3.tgz",
+      "integrity": "sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.3.tgz",
+      "integrity": "sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.3.tgz",
+      "integrity": "sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz",
+      "integrity": "sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.3.tgz",
+      "integrity": "sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.3.tgz",
+      "integrity": "sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.3.tgz",
+      "integrity": "sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.3.tgz",
+      "integrity": "sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.3.tgz",
+      "integrity": "sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.3.tgz",
+      "integrity": "sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.3.tgz",
+      "integrity": "sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.3.tgz",
+      "integrity": "sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.3.tgz",
+      "integrity": "sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.3.tgz",
+      "integrity": "sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.3.tgz",
+      "integrity": "sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.3.tgz",
+      "integrity": "sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.3.tgz",
+      "integrity": "sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.3.tgz",
+      "integrity": "sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.3.tgz",
+      "integrity": "sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.3.tgz",
+      "integrity": "sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.3.tgz",
+      "integrity": "sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz",
+      "integrity": "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@iarna/toml": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
@@ -310,6 +878,52 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lezer/common": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.1.tgz",
+      "integrity": "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
+      "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz",
+      "integrity": "sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/python": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.18.tgz",
+      "integrity": "sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -817,6 +1431,22 @@
         "node": ">= 6"
       }
     },
+    "node_modules/codemirror": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
+      "integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -862,6 +1492,13 @@
         "@babel/types": "^7.6.1"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -1328,6 +1965,48 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/esbuild": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
+      "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.27.3",
+        "@esbuild/android-arm": "0.27.3",
+        "@esbuild/android-arm64": "0.27.3",
+        "@esbuild/android-x64": "0.27.3",
+        "@esbuild/darwin-arm64": "0.27.3",
+        "@esbuild/darwin-x64": "0.27.3",
+        "@esbuild/freebsd-arm64": "0.27.3",
+        "@esbuild/freebsd-x64": "0.27.3",
+        "@esbuild/linux-arm": "0.27.3",
+        "@esbuild/linux-arm64": "0.27.3",
+        "@esbuild/linux-ia32": "0.27.3",
+        "@esbuild/linux-loong64": "0.27.3",
+        "@esbuild/linux-mips64el": "0.27.3",
+        "@esbuild/linux-ppc64": "0.27.3",
+        "@esbuild/linux-riscv64": "0.27.3",
+        "@esbuild/linux-s390x": "0.27.3",
+        "@esbuild/linux-x64": "0.27.3",
+        "@esbuild/netbsd-arm64": "0.27.3",
+        "@esbuild/netbsd-x64": "0.27.3",
+        "@esbuild/openbsd-arm64": "0.27.3",
+        "@esbuild/openbsd-x64": "0.27.3",
+        "@esbuild/openharmony-arm64": "0.27.3",
+        "@esbuild/sunos-x64": "0.27.3",
+        "@esbuild/win32-arm64": "0.27.3",
+        "@esbuild/win32-ia32": "0.27.3",
+        "@esbuild/win32-x64": "0.27.3"
+      }
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -4475,6 +5154,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
+      "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.1",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
@@ -4833,6 +5519,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5170,6 +5863,294 @@
         "@babel/helper-validator-identifier": "^7.28.5"
       }
     },
+    "@codemirror/autocomplete": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.0.tgz",
+      "integrity": "sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==",
+      "dev": true,
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "@codemirror/commands": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.2.tgz",
+      "integrity": "sha512-vvX1fsih9HledO1c9zdotZYUZnE4xV0m6i3m25s5DIfXofuprk6cRcLUZvSk3CASUbwjQX21tOGbkY2BH8TpnQ==",
+      "dev": true,
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "@codemirror/lang-python": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.2.1.tgz",
+      "integrity": "sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==",
+      "dev": true,
+      "requires": {
+        "@codemirror/autocomplete": "^6.3.2",
+        "@codemirror/language": "^6.8.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/python": "^1.1.4"
+      }
+    },
+    "@codemirror/language": {
+      "version": "6.12.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.2.tgz",
+      "integrity": "sha512-jEPmz2nGGDxhRTg3lTpzmIyGKxz3Gp3SJES4b0nAuE5SWQoKdT5GoQ69cwMmFd+wvFUhYirtDTr0/DRHpQAyWg==",
+      "dev": true,
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "@codemirror/lint": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.4.tgz",
+      "integrity": "sha512-ABc9vJ8DEmvOWuH26P3i8FpMWPQkduD9Rvba5iwb6O3hxASgclm3T3krGo8NASXkHCidz6b++LWlzWIUfEPSWw==",
+      "dev": true,
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.35.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/search": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.6.0.tgz",
+      "integrity": "sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==",
+      "dev": true,
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.37.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/state": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.4.tgz",
+      "integrity": "sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw==",
+      "dev": true,
+      "requires": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "@codemirror/theme-one-dark": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+      "dev": true,
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "@codemirror/view": {
+      "version": "6.39.15",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.15.tgz",
+      "integrity": "sha512-aCWjgweIIXLBHh7bY6cACvXuyrZ0xGafjQ2VInjp4RM4gMfscK5uESiNdrH0pE+e1lZr2B4ONGsjchl2KsKZzg==",
+      "dev": true,
+      "requires": {
+        "@codemirror/state": "^6.5.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "@esbuild/aix-ppc64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
+      "integrity": "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/android-arm": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.3.tgz",
+      "integrity": "sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/android-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.3.tgz",
+      "integrity": "sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/android-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.3.tgz",
+      "integrity": "sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/darwin-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz",
+      "integrity": "sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/darwin-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.3.tgz",
+      "integrity": "sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/freebsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/freebsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.3.tgz",
+      "integrity": "sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-arm": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.3.tgz",
+      "integrity": "sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.3.tgz",
+      "integrity": "sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-ia32": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.3.tgz",
+      "integrity": "sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-loong64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.3.tgz",
+      "integrity": "sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-mips64el": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.3.tgz",
+      "integrity": "sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-ppc64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.3.tgz",
+      "integrity": "sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-riscv64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.3.tgz",
+      "integrity": "sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-s390x": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.3.tgz",
+      "integrity": "sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.3.tgz",
+      "integrity": "sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/netbsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/netbsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.3.tgz",
+      "integrity": "sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/openbsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/openbsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.3.tgz",
+      "integrity": "sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/openharmony-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.3.tgz",
+      "integrity": "sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/sunos-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.3.tgz",
+      "integrity": "sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.3.tgz",
+      "integrity": "sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-ia32": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.3.tgz",
+      "integrity": "sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz",
+      "integrity": "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==",
+      "dev": true,
+      "optional": true
+    },
     "@iarna/toml": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
@@ -5208,6 +6189,47 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "@lezer/common": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.1.tgz",
+      "integrity": "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==",
+      "dev": true
+    },
+    "@lezer/highlight": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
+      "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+      "dev": true,
+      "requires": {
+        "@lezer/common": "^1.3.0"
+      }
+    },
+    "@lezer/lr": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz",
+      "integrity": "sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==",
+      "dev": true,
+      "requires": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "@lezer/python": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.18.tgz",
+      "integrity": "sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==",
+      "dev": true,
+      "requires": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "dev": true
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -5561,6 +6583,21 @@
         }
       }
     },
+    "codemirror": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
+      "integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
+      "dev": true,
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -5598,6 +6635,12 @@
         "@babel/types": "^7.6.1"
       }
     },
+    "crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "dev": true
+    },
     "cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -5916,6 +6959,40 @@
         "is-symbol": "^1.0.4"
       }
     },
+    "esbuild": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
+      "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
+      "dev": true,
+      "requires": {
+        "@esbuild/aix-ppc64": "0.27.3",
+        "@esbuild/android-arm": "0.27.3",
+        "@esbuild/android-arm64": "0.27.3",
+        "@esbuild/android-x64": "0.27.3",
+        "@esbuild/darwin-arm64": "0.27.3",
+        "@esbuild/darwin-x64": "0.27.3",
+        "@esbuild/freebsd-arm64": "0.27.3",
+        "@esbuild/freebsd-x64": "0.27.3",
+        "@esbuild/linux-arm": "0.27.3",
+        "@esbuild/linux-arm64": "0.27.3",
+        "@esbuild/linux-ia32": "0.27.3",
+        "@esbuild/linux-loong64": "0.27.3",
+        "@esbuild/linux-mips64el": "0.27.3",
+        "@esbuild/linux-ppc64": "0.27.3",
+        "@esbuild/linux-riscv64": "0.27.3",
+        "@esbuild/linux-s390x": "0.27.3",
+        "@esbuild/linux-x64": "0.27.3",
+        "@esbuild/netbsd-arm64": "0.27.3",
+        "@esbuild/netbsd-x64": "0.27.3",
+        "@esbuild/openbsd-arm64": "0.27.3",
+        "@esbuild/openbsd-x64": "0.27.3",
+        "@esbuild/openharmony-arm64": "0.27.3",
+        "@esbuild/sunos-x64": "0.27.3",
+        "@esbuild/win32-arm64": "0.27.3",
+        "@esbuild/win32-ia32": "0.27.3",
+        "@esbuild/win32-x64": "0.27.3"
+      }
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -8011,6 +9088,12 @@
       "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
       "dev": true
     },
+    "style-mod": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
+      "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
+      "dev": true
+    },
     "sucrase": {
       "version": "3.35.1",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
@@ -8257,6 +9340,12 @@
       "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
       "dev": true
     },
+    "w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "dev": true
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 10a1824..dbd7c1c 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,11 @@
   "version": "2.0.0",
   "description": "Python Programming Tutorial - Basic to Advanced",
   "scripts": {
+    "clean:site": "node -e \"require('fs').rmSync('_site', { recursive: true, force: true })\"",
     "dev": "npm-run-all --parallel dev:*",
     "dev:11ty": "eleventy --serve --watch",
     "dev:css": "npx tailwindcss -i ./tailwind.css -o ./assets/css/base.css --watch",
-    "build": "npm-run-all build:css build:11ty",
+    "build": "npm-run-all clean:site build:css build:11ty",
     "build:11ty": "eleventy",
     "build:css": "npx tailwindcss -i ./tailwind.css -o ./assets/css/base.css --minify",
     "check": "npm-run-all check:content check:jsonld",
@@ -15,7 +16,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/belajarpythoncom/belajarpython.com.git"
+    "url": "git+https://github.com/codeuzhub/python-lessons.git"
   },
   "keywords": [
     "python",
@@ -24,11 +25,22 @@
   "author": "Purwanto",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/belajarpythoncom/belajarpython.com/issues"
+    "url": "https://github.com/codeuzhub/python-lessons/issues"
   },
   "homepage": "https://belajarpython.com",
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
+    "@codemirror/autocomplete": "^6.20.0",
+    "@codemirror/commands": "^6.10.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/language": "^6.12.2",
+    "@codemirror/lint": "^6.9.4",
+    "@codemirror/search": "^6.6.0",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.39.15",
+    "codemirror": "^6.0.2",
+    "esbuild": "^0.27.3",
     "markdown-it": "^14.0.0",
     "npm-run-all": "^4.1.5",
     "tailwindcss": "^3.4.0"
diff --git a/sitemap.njk b/sitemap.njk
index a8aff63..411edda 100644
--- a/sitemap.njk
+++ b/sitemap.njk
@@ -4,7 +4,12 @@ eleventyExcludeFromCollections: true
 ---<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
-    <loc>{{ site.url }}/</loc>
+    <loc>{{ site.url }}/en/</loc>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>{{ site.url }}/uz/</loc>
     <changefreq>daily</changefreq>
     <priority>1.0</priority>
   </url>
@@ -16,6 +21,14 @@ eleventyExcludeFromCollections: true
     <priority>0.8</priority>
   </url>
   {%- endfor -%}
+  {%- for item in collections.tutorialsUz -%}
+  <url>
+    <loc>{{ site.url }}{{ item.url }}</loc>
+    <lastmod>{{ item.date | htmlDateString }}</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  {%- endfor -%}
   {%- for item in collections.tools -%}
   <url>
     <loc>{{ site.url }}{{ item.url }}</loc>
diff --git a/tailwind.config.js b/tailwind.config.js
index 0e865ee..5a5e129 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,28 @@
 /** @type {import('tailwindcss').Config} */
+function stripMarkdownCodeBlocks(content) {
+  if (typeof content !== "string") {
+    return content;
+  }
+
+  // Avoid generating utilities from markdown code examples.
+  return content.replace(/```[\s\S]*?```/g, "");
+}
+
 module.exports = {
-  content: [
-    "./_includes/**/*.njk",
-    "./_layouts/**/*.njk",
-    "./tools/**/*.njk",
-    "./tutorial/**/*.md",
-    "./*.{md,njk}",
-  ],
+  darkMode: 'class',
+  content: {
+    files: [
+      "./_includes/**/*.njk",
+      "./_layouts/**/*.njk",
+      "./tools/**/*.njk",
+      "./tutorial/**/*.md",
+      "./uz/**/*.md",
+      "./*.{md,njk}",
+    ],
+    transform: {
+      md: stripMarkdownCodeBlocks
+    }
+  },
   theme: {
     extend: {
       colors: {
@@ -16,7 +32,7 @@ module.exports = {
           300: '#3776ab',
           400: '#316997',
           500: '#2a5880',
-          600: '#1d3f5b',
+          600: '#234c6e',
           700: '#1d3f5b',
           800: '#1c3a55',
           900: '#1e2933'
diff --git a/tailwind.css b/tailwind.css
index 9ceedb5..71d4c29 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -3,12 +3,24 @@
 @tailwind utilities;
 
 main blockquote {
-  border-left: 4px solid #e8e8e8;
-  padding-left: 15px;
-  color: #e2b215;
-  font-size: 18px;
-  letter-spacing: -1px;
-  font-style: italic;
+  margin: 1rem 0 1.25rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid #d9e2ec;
+  border-left: 4px solid #93c5fd;
+  border-radius: 0.75rem;
+  background-color: #f8fafc;
+  color: #334155;
+  font-size: 1rem;
+  letter-spacing: normal;
+  font-style: normal;
+}
+
+main blockquote p {
+  margin-bottom: 0.75rem;
+}
+
+main blockquote p:last-child {
+  margin-bottom: 0;
 }
 
 main hr {
@@ -98,7 +110,7 @@ main h6 {
 }
 
 main ol {
-  list-style: number;
+  list-style-type: decimal;
   padding-left: 30px;
   margin-bottom: 1.3rem;
 }
@@ -112,6 +124,9 @@ main ul {
 main table {
   border-collapse: collapse;
   width: 100%;
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
 }
 
 main table td,
@@ -158,12 +173,6 @@ main img {
   height: auto;
 }
 
-main table {
-  display: block;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
 main pre,
 main code {
   max-width: 100%;
@@ -216,4 +225,4 @@ main code {
   /* IE and Edge */
   scrollbar-width: none;
   /* Firefox */
-}
\ No newline at end of file
+}
diff --git a/tools/check-content.cjs b/tools/check-content.cjs
index 906f91e..4733379 100644
--- a/tools/check-content.cjs
+++ b/tools/check-content.cjs
@@ -43,20 +43,96 @@ function parseFrontMatter(content) {
   };
 }
 
-function checkTutorialMetadata(errors) {
-  const tutorialDir = path.join(process.cwd(), "tutorial");
-  const tutorialFiles = getFilesRecursive(tutorialDir, (filePath) => filePath.endsWith(".md")).sort();
+function stripFrontMatter(content) {
+  const match = content.match(/^---\n[\s\S]*?\n---\n?/);
+  if (!match) {
+    return content;
+  }
+  return content.slice(match[0].length);
+}
 
-  if (tutorialFiles.length === 0) {
-    errors.push("No tutorial markdown files were found.");
-    return { permalinks: new Set(["/"]) };
+function buildNonCodeLines(content) {
+  const body = stripFrontMatter(content);
+  const lines = body.split("\n");
+  const output = [];
+  let inFence = false;
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+
+    if (/^\s*```/.test(line)) {
+      inFence = !inFence;
+      continue;
+    }
+
+    if (inFence || /^\s*</.test(line)) {
+      continue;
+    }
+
+    const parts = line.split(/(`[^`]*`)/g);
+    const nonCodeText = parts
+      .filter((_, partIndex) => partIndex % 2 === 0)
+      .join("");
+
+    if (nonCodeText.trim().length === 0) {
+      continue;
+    }
+
+    output.push({
+      lineNumber: index + 1,
+      text: nonCodeText,
+    });
+  }
+
+  return output;
+}
+
+function checkInlineCodeConventions(content, relativePath, errors) {
+  const nonCodeLines = buildNonCodeLines(content);
+  const patterns = [
+    { regex: /\bif\s*\/\s*else\b/i, label: "`if`/`else`" },
+    { regex: /\bif\s*-\s*else\b/i, label: "`if`-`else`" },
+    { regex: /\bif\s+else\b/i, label: "`if` `else`" },
+    { regex: /\bif\s+elif\b/i, label: "`if` `elif`" },
+    { regex: /\bif\s+condition\b/i, label: "`if` condition" },
+    { regex: /\bif\s+statement\b/i, label: "`if` statement" },
+    { regex: /\belif\s+condition\b/i, label: "`elif` condition" },
+    { regex: /\bfor\s+loop\b/i, label: "`for` loop" },
+    { regex: /\bwhile\s+loop\b/i, label: "`while` loop" },
+    { regex: /\bmatch-case\b/i, label: "`match-case`" },
+    { regex: /\bswitch-case\b/i, label: "`switch-case`" },
+    { regex: /\{\}/, label: "`{}`" },
+    { regex: /\bTrue\b/, label: "`True`" },
+    { regex: /\bFalse\b/, label: "`False`" },
+    { regex: /\bNone\b/, label: "`None`" },
+  ];
+
+  for (const { lineNumber, text } of nonCodeLines) {
+    for (const pattern of patterns) {
+      if (pattern.regex.test(text)) {
+        errors.push(
+          `${relativePath}:${lineNumber} contains code-related text that should use inline code formatting (${pattern.label}).`
+        );
+      }
+    }
   }
+}
 
+function checkTutorialMetadataForLocale(config, errors) {
+  const tutorialFiles = getFilesRecursive(config.dir, (filePath) => filePath.endsWith(".md")).sort();
   const orders = [];
-  const permalinks = new Set(["/"]);
+  const permalinks = new Set();
+  const relativePaths = new Set();
+
+  if (tutorialFiles.length === 0) {
+    errors.push(`No tutorial markdown files were found for ${config.label}.`);
+    return { permalinks, relativePaths };
+  }
 
   for (const filePath of tutorialFiles) {
-    const relativePath = path.relative(tutorialDir, filePath).replace(/\\/g, "/");
+    const relativePath = path.relative(process.cwd(), filePath).replace(/\\/g, "/");
+    const localeRelativePath = path.relative(config.dir, filePath).replace(/\\/g, "/");
+    relativePaths.add(localeRelativePath);
     const fileName = path.basename(filePath);
     const content = fs.readFileSync(filePath, "utf8");
     const frontMatter = parseFrontMatter(content);
@@ -70,8 +146,8 @@ function checkTutorialMetadata(errors) {
       errors.push(`${relativePath} should use layout: tutorial.njk.`);
     }
 
-    if (!frontMatter.permalink.startsWith("/tutorial/")) {
-      errors.push(`${relativePath} permalink should start with /tutorial/.`);
+    if (!frontMatter.permalink.startsWith(config.permalinkPrefix)) {
+      errors.push(`${relativePath} permalink should start with ${config.permalinkPrefix}.`);
     } else {
       permalinks.add(frontMatter.permalink.replace(/\/$/, "") || "/");
     }
@@ -101,20 +177,36 @@ function checkTutorialMetadata(errors) {
     if (content.includes("blob/master/docs") || content.includes("blob/master/src")) {
       errors.push(`${relativePath} contains a legacy blob/master docs/src link.`);
     }
+
+    checkInlineCodeConventions(content, relativePath, errors);
   }
 
   const orderSet = new Set(orders);
   if (orderSet.size !== orders.length) {
-    errors.push("Duplicate tutorial order values detected.");
+    errors.push(`Duplicate tutorial order values detected for ${config.label}.`);
   }
 
   for (let expected = 1; expected <= tutorialFiles.length; expected += 1) {
     if (!orderSet.has(expected)) {
-      errors.push(`Tutorial order ${expected} is missing.`);
+      errors.push(`${config.label} tutorial order ${expected} is missing.`);
+    }
+  }
+
+  return { permalinks, relativePaths };
+}
+
+function checkLocaleParity(enPaths, uzPaths, errors) {
+  for (const tutorialPath of enPaths) {
+    if (!uzPaths.has(tutorialPath)) {
+      errors.push(`Missing Uzbek translation file for ${tutorialPath}.`);
     }
   }
 
-  return { permalinks };
+  for (const tutorialPath of uzPaths) {
+    if (!enPaths.has(tutorialPath)) {
+      errors.push(`Missing English tutorial file for ${tutorialPath}.`);
+    }
+  }
 }
 
 function checkPermalinksAndLinks(permalinks, errors) {
@@ -130,20 +222,31 @@ function checkPermalinksAndLinks(permalinks, errors) {
   permalinks.add("/sitemap.xml");
 
   const sourceFiles = [
-    ...getFilesRecursive(path.join(process.cwd(), "tutorial"), (p) => p.endsWith(".md")),
+    ...getFilesRecursive(path.join(process.cwd(), "content"), (p) => p.endsWith(".md")),
+    ...getFilesRecursive(path.join(process.cwd(), "tools"), (p) => p.endsWith(".njk")),
     ...getFilesRecursive(path.join(process.cwd(), "_includes"), (p) => p.endsWith(".njk")),
     ...getFilesRecursive(path.join(process.cwd(), "_layouts"), (p) => p.endsWith(".njk")),
-    path.join(process.cwd(), "index.md"),
+    path.join(process.cwd(), "index.njk"),
   ];
 
   const hrefRegex = /href=["'](\/[^"'#?\s]+)\/?["']/g;
 
   for (const file of sourceFiles) {
+    if (!fs.existsSync(file)) {
+      continue;
+    }
+
     const content = fs.readFileSync(file, "utf8");
     let match = hrefRegex.exec(content);
     while (match) {
       const href = match[1].replace(/\/$/, "") || "/";
-      if (!href.startsWith("/img/") && !href.startsWith("/css/") && !permalinks.has(href)) {
+      if (
+        !href.startsWith("/img/") &&
+        !href.startsWith("/css/") &&
+        !href.startsWith("/js/") &&
+        href !== "/favicon.png" &&
+        !permalinks.has(href)
+      ) {
         errors.push(`${path.relative(process.cwd(), file)} has broken internal href: ${href}`);
       }
       match = hrefRegex.exec(content);
@@ -163,6 +266,8 @@ function checkLegacyMarkers(errors) {
 
   const forbiddenMarkers = [
     "/tutorial/decorator-python",
+    "/tutorial/en/",
+    "/tutorial/uz/",
     "blob/master/docs/tutorial",
     "blob/master/src/tutorial",
   ];
@@ -178,7 +283,29 @@ function checkLegacyMarkers(errors) {
 }
 
 const errors = [];
-const { permalinks } = checkTutorialMetadata(errors);
+const localeConfigs = [
+  {
+    label: "English",
+    dir: path.join(process.cwd(), "content", "en", "tutorial"),
+    permalinkPrefix: "/en/tutorial/",
+  },
+  {
+    label: "Uzbek",
+    dir: path.join(process.cwd(), "content", "uz", "tutorial"),
+    permalinkPrefix: "/uz/tutorial/",
+  },
+];
+
+const localeResults = localeConfigs.map((config) => checkTutorialMetadataForLocale(config, errors));
+checkLocaleParity(localeResults[0].relativePaths, localeResults[1].relativePaths, errors);
+
+const permalinks = new Set(["/", "/en/", "/uz/"]);
+for (const result of localeResults) {
+  for (const permalink of result.permalinks) {
+    permalinks.add(permalink);
+  }
+}
+
 checkPermalinksAndLinks(permalinks, errors);
 checkLegacyMarkers(errors);
 
diff --git a/tools/json-to-python.njk b/tools/json-to-python.njk
index c0bc271..7d2cb98 100644
--- a/tools/json-to-python.njk
+++ b/tools/json-to-python.njk
@@ -56,120 +56,17 @@ permalink: /json-to-python/
     </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
+{% include "editor-helpers.njk" %}{% include "pyodide-runtime.njk" %}
 <script>
 (function() {
-    let pyodidePromise = null;
-    async function getPyodide() {
-        if (!pyodidePromise) pyodidePromise = loadPyodide();
-        return pyodidePromise;
-    }
-
-    function getCaretOffset(container) {
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0) {
-            return null;
-        }
-
-        const range = selection.getRangeAt(0);
-        if (!container.contains(range.endContainer)) {
-            return null;
-        }
-
-        const preCaretRange = range.cloneRange();
-        preCaretRange.selectNodeContents(container);
-        preCaretRange.setEnd(range.endContainer, range.endOffset);
-        return preCaretRange.toString().length;
-    }
-
-    function setCaretOffset(container, offset) {
-        const safeOffset = Math.max(0, offset || 0);
-        const selection = window.getSelection();
-        if (!selection) {
-            return;
-        }
-
-        const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
-        let currentOffset = 0;
-        let targetNode = null;
-        let targetOffset = 0;
-        let node = walker.nextNode();
-
-        while (node) {
-            const nextOffset = currentOffset + node.nodeValue.length;
-            if (safeOffset <= nextOffset) {
-                targetNode = node;
-                targetOffset = safeOffset - currentOffset;
-                break;
-            }
-            currentOffset = nextOffset;
-            node = walker.nextNode();
-        }
-
-        const range = document.createRange();
-        if (targetNode) {
-            range.setStart(targetNode, targetOffset);
-        } else {
-            range.selectNodeContents(container);
-            range.collapse(false);
-        }
-        range.collapse(true);
-        selection.removeAllRanges();
-        selection.addRange(range);
-    }
-
-    function renderHighlightedEditable(editor, language, baseClassName) {
-        const source = editor.textContent || "";
-        const caretOffset = getCaretOffset(editor);
-
-        if (window.hljs) {
-            const highlighted = hljs.highlight(source, {
-                language,
-                ignoreIllegals: true
-            }).value;
-            editor.innerHTML = highlighted;
-            editor.className = `${baseClassName} hljs`;
-        } else {
-            editor.textContent = source;
-            editor.className = baseClassName;
-        }
-
-        if (caretOffset !== null) {
-            setCaretOffset(editor, Math.min(caretOffset, (editor.textContent || "").length));
-        }
-    }
+    const { parseEditorClass, makeEditable } = window.EditorHelpers;
 
     const editor = document.getElementById('editor');
     const output = document.getElementById('output');
     const runBtn = document.getElementById('run-btn');
     const status = document.getElementById('status-badge');
-    const baseClassName = (editor.className || "").split(/\s+/).filter((cls) => cls && cls !== "hljs").join(" ");
-    const languageMatch = baseClassName.match(/language-([a-z0-9-]+)/i);
-    const editorLanguage = languageMatch ? languageMatch[1] : "json";
-    let highlightQueued = false;
-    const queueHighlight = () => {
-        if (highlightQueued) {
-            return;
-        }
-        highlightQueued = true;
-        requestAnimationFrame(() => {
-            highlightQueued = false;
-            renderHighlightedEditable(editor, editorLanguage, baseClassName);
-        });
-    };
-
-    editor.setAttribute('contenteditable', 'true');
-    editor.setAttribute('spellcheck', 'false');
-    editor.addEventListener('input', queueHighlight);
-    editor.addEventListener('paste', (event) => {
-        event.preventDefault();
-        const text = (event.clipboardData || window.clipboardData).getData('text');
-        document.execCommand('insertText', false, text);
-    });
-    editor.addEventListener('focus', () => {
-        editor.className = `${baseClassName} hljs`;
-    });
-    renderHighlightedEditable(editor, editorLanguage, baseClassName);
+    const { baseClassName, language: editorLanguage } = parseEditorClass(editor);
+    makeEditable(editor, editorLanguage, baseClassName);
 
     runBtn.addEventListener('click', async () => {
         output.textContent = 'Converting...';
@@ -177,9 +74,6 @@ permalink: /json-to-python/
         runBtn.disabled = true;
 
         try {
-            const py = await getPyodide();
-            py.globals.set("json_input", editor.textContent || "");
-            
             const runCode = `
 import json
 import pprint
@@ -193,11 +87,14 @@ except json.JSONDecodeError as e:
 except Exception as e:
     print(f"Error: {e}")
             `;
-
-            let stdout = "";
-            py.setStdout({ batched: (str) => stdout += str + "\\n" });
-            await py.runPythonAsync(runCode);
-            output.textContent = stdout;
+            const result = await window.PyRuntime.run(runCode, {
+                timeoutMs: 12000,
+                useWorker: true,
+                globals: {
+                    json_input: editor.textContent || ""
+                }
+            });
+            output.textContent = [result.stdout, result.stderr].filter(Boolean).join("\\n");
             status.textContent = 'Done';
             
         } catch (err) {
diff --git a/tools/normalize-tutorial-inline-code.cjs b/tools/normalize-tutorial-inline-code.cjs
new file mode 100644
index 0000000..2395bdc
--- /dev/null
+++ b/tools/normalize-tutorial-inline-code.cjs
@@ -0,0 +1,129 @@
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = process.cwd();
+const TUTORIAL_DIRS = [
+  path.join(ROOT, "content", "en", "tutorial"),
+  path.join(ROOT, "content", "uz", "tutorial"),
+];
+
+function getFilesRecursive(dir, out = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      getFilesRecursive(fullPath, out);
+    } else if (entry.isFile() && fullPath.endsWith(".md")) {
+      out.push(fullPath);
+    }
+  }
+  return out;
+}
+
+function splitFrontMatter(content) {
+  if (!content.startsWith("---\n")) {
+    return { frontMatter: "", body: content };
+  }
+
+  const endIndex = content.indexOf("\n---\n", 4);
+  if (endIndex === -1) {
+    return { frontMatter: "", body: content };
+  }
+
+  return {
+    frontMatter: content.slice(0, endIndex + 5),
+    body: content.slice(endIndex + 5),
+  };
+}
+
+function replaceOutsideInlineCode(line, replacer) {
+  const parts = line.split(/(`[^`]*`)/g);
+  return parts
+    .map((part, index) => (index % 2 === 1 ? part : replacer(part)))
+    .join("");
+}
+
+function normalizeProseChunk(chunk) {
+  let next = chunk;
+
+  const replacements = [
+    [/\bif\s*\/\s*else\b/g, "`if`/`else`"],
+    [/\bif\s*-\s*else\b/g, "`if`-`else`"],
+    [/\bif\s+else\b/g, "`if` `else`"],
+    [/\bIf\s+else\b/g, "`if` `else`"],
+    [/\bif\s+elif\b/g, "`if` `elif`"],
+    [/\bIf\s+elif\b/g, "`if` `elif`"],
+    [/\bif\s+condition\b/g, "`if` condition"],
+    [/\bIf\s+condition\b/g, "`if` condition"],
+    [/\bif\s+statement\b/g, "`if` statement"],
+    [/\bIf\s+statement\b/g, "`if` statement"],
+    [/\belif\s+condition\b/g, "`elif` condition"],
+    [/\bfor\s+loop\b/g, "`for` loop"],
+    [/\bFor\s+loop\b/g, "`for` loop"],
+    [/\bfor\s+Loop\b/g, "`for` loop"],
+    [/\bFor\s+Loop\b/g, "`for` loop"],
+    [/\bwhile\s+loop\b/g, "`while` loop"],
+    [/\bWhile\s+loop\b/g, "`while` loop"],
+    [/\bwhile\s+Loop\b/g, "`while` loop"],
+    [/\bWhile\s+Loop\b/g, "`while` loop"],
+    [/\bmatch\s+case\b/g, "`match case`"],
+    [/\bMatch\s+case\b/g, "`match case`"],
+    [/\bmatch-case\b/g, "`match-case`"],
+    [/\bMatch-case\b/g, "`match-case`"],
+    [/\bswitch-case\b/g, "`switch-case`"],
+    [/\bSwitch-case\b/g, "`switch-case`"],
+    [/\bincluding if,\s*else and elif\b/g, "including `if`, `else` and `elif`"],
+    [/\bIncluding if,\s*else and elif\b/g, "Including `if`, `else` and `elif`"],
+    [/\bTrue\b/g, "`True`"],
+    [/\bFalse\b/g, "`False`"],
+    [/\bNone\b/g, "`None`"],
+    [/\{\}/g, "`{}`"],
+  ];
+
+  for (const [pattern, replacement] of replacements) {
+    next = next.replace(pattern, replacement);
+  }
+
+  return next;
+}
+
+function normalizeMarkdownBody(body) {
+  const lines = body.split("\n");
+  let inFence = false;
+
+  const output = lines.map((line) => {
+    if (/^\s*```/.test(line)) {
+      inFence = !inFence;
+      return line;
+    }
+
+    if (inFence) {
+      return line;
+    }
+
+    // Skip raw HTML blocks and table separators.
+    if (/^\s*</.test(line) || /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)+\|?\s*$/.test(line)) {
+      return line;
+    }
+
+    return replaceOutsideInlineCode(line, normalizeProseChunk);
+  });
+
+  return output.join("\n");
+}
+
+let changed = 0;
+const files = TUTORIAL_DIRS.flatMap((dir) => getFilesRecursive(dir));
+
+for (const filePath of files) {
+  const original = fs.readFileSync(filePath, "utf8");
+  const { frontMatter, body } = splitFrontMatter(original);
+  const normalizedBody = normalizeMarkdownBody(body);
+  const updated = `${frontMatter}${normalizedBody}`;
+
+  if (updated !== original) {
+    fs.writeFileSync(filePath, updated);
+    changed += 1;
+  }
+}
+
+console.log(`Normalized inline-code styling in ${changed} tutorial file(s).`);
diff --git a/tools/online-python-compiler.njk b/tools/online-python-compiler.njk
index 4573a68..9331928 100644
--- a/tools/online-python-compiler.njk
+++ b/tools/online-python-compiler.njk
@@ -5,7 +5,10 @@ description: Free Online Python Compiler. Write, edit, and run Python scripts di
 permalink: /online-python-compiler/
 ---
 {% set toolHeaderTitle = "Online Python Compiler" %}
-{% set toolHeaderIconImage = "/img/icons/icon-python.ico" %}
+{% set toolHeaderIconImage = null %}
+{% set toolHeaderIconSvg %}
+<i class="fa-brands fa-python text-2xl text-yellow-400" aria-hidden="true"></i>
+{% endset %}
 {% set toolHeaderBadge = "Beta" %}
 {% set toolRunButtonClass = "bg-yellow-400 hover:bg-yellow-300 text-slate-900 px-4 py-1.5 rounded text-sm font-bold shadow-lg shadow-yellow-900/20 flex items-center gap-2 transition-all" %}
 {% set toolRunButtonText = "Run Code" %}
diff --git a/tools/online-python-editor.njk b/tools/online-python-editor.njk
index 998476e..ef565b6 100644
--- a/tools/online-python-editor.njk
+++ b/tools/online-python-editor.njk
@@ -7,9 +7,7 @@ permalink: /online-python-editor/
 {% set toolHeaderTitle = "Online Python Editor" %}
 {% set toolHeaderIconImage = null %}
 {% set toolHeaderIconSvg %}
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-400">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 18" />
-</svg>
+<i class="fa-brands fa-python text-2xl text-yellow-400" aria-hidden="true"></i>
 {% endset %}
 {% set toolHeaderBadge = "" %}
 {% set toolRunButtonClass = "bg-yellow-400 hover:bg-yellow-300 text-slate-900 px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2" %}
diff --git a/tools/online-python-ide.njk b/tools/online-python-ide.njk
index 380a898..afcd01e 100644
--- a/tools/online-python-ide.njk
+++ b/tools/online-python-ide.njk
@@ -1,80 +1,57 @@
 ---
-layout: tool-split.njk
+layout: tool-fullscreen.njk
 title: Online Python IDE - Web Integrated Development Environment
-description: Full-featured web-based Python IDE. VS Code-like interface with separate output panel. Suitable for small-to-medium Python projects.
+description: Full-featured web-based Python IDE with syntax highlighting, separate output panel, interactive terminal, and keyboard shortcuts. Run Python code instantly in your browser.
 permalink: /online-python-ide/
 ---
-<div class="h-full flex flex-col bg-[#1e1e1e] text-[#d4d4d4]">
-    <!-- Menu Bar (Fake) -->
-    <div class="h-auto bg-gradient-to-r from-primary-700 to-primary-900 border-b border-primary-800 flex flex-col shrink-0">
-        <!-- SEO Text for IDE -->
-        <div class="px-4 py-2 text-xs text-primary-200 border-b border-primary-800 hidden md:block text-center bg-primary-900/50">
-            <strong>Online Python IDE</strong> - Web-based integrated development environment (IDE) with a professional, VS Code-like interface. Enjoy a visual file explorer, syntax highlighting, and a separate terminal output panel.
-        </div>
-        
-        <div class="h-8 flex items-center px-4 gap-4 text-xs select-none text-slate-300">
-            <img src="{{ '/img/icons/icon-python.ico' | url }}" class="w-4 h-4" alt="Icon">
-            <span class="hover:bg-white/10 px-2 py-0.5 rounded cursor-pointer transition-colors">File</span>
-            <span class="hover:bg-white/10 px-2 py-0.5 rounded cursor-pointer transition-colors">Edit</span>
-            <span class="hover:bg-white/10 px-2 py-0.5 rounded cursor-pointer transition-colors">Selection</span>
-            <span class="hover:bg-white/10 px-2 py-0.5 rounded cursor-pointer transition-colors">View</span>
-            <span class="hover:bg-white/10 px-2 py-0.5 rounded cursor-pointer transition-colors">Go</span>
-            <span class="hover:bg-white/10 px-2 py-0.5 rounded cursor-pointer transition-colors">Run</span>
-            <div class="ml-auto flex items-center gap-3">
-                 <span id="status-badge" class="text-xs text-slate-400">Ready</span>
-                 <button id="run-btn" class="bg-green-600 hover:bg-green-500 px-3 py-0.5 text-white rounded-sm flex items-center gap-1 transition-colors shadow-sm">
-                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg> Run
-                 </button>
-            </div>
-        </div>
-    </div>
-
-    <div class="flex-1 flex min-h-0">
-        <!-- Sidebar (Fake) -->
-        <div class="w-12 bg-[#333333] flex flex-col items-center py-2 text-[#858585] border-r border-[#252526]">
-            <div class="p-2 border-l-2 border-white text-white mb-2"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></div>
-            <div class="p-2 hover:text-white mb-2"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg></div>
-            <div class="p-2 hover:text-white mb-2"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/></svg></div>
-        </div>
-
-        <!-- File Explorer (Fake) -->
-        <div class="w-48 bg-[#252526] text-xs font-sans text-slate-300 hidden md:block border-r border-[#1e1e1e]">
-            <div class="p-2 px-4 font-bold uppercase tracking-wider text-xs mb-1">Explorer</div>
-            <div class="px-2 py-1 bg-[#37373d] flex items-center gap-1 cursor-pointer">
-                 <svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" stroke-width="2" /></svg>
-                 app.py
+<div class="h-full flex flex-col bg-[#0f172a] text-[#e2e8f0]">
+    <div class="flex-1 flex flex-col md:flex-row min-h-0">
+        <!-- Editor Pane -->
+        <div id="ide-editor-pane" class="flex flex-col flex-1 min-w-0 md:w-[55%]">
+            <div class="h-10 shrink-0 flex items-center justify-between border-b border-[#334155] bg-[#1e293b] px-3">
+                <div class="flex items-center gap-2 text-sm">
+                    <a href="/en/" class="text-slate-400 hover:text-white transition-colors" title="Back to home" aria-label="Back to home">
+                        <i class="fa-solid fa-house text-xs" aria-hidden="true"></i>
+                    </a>
+                    <span class="text-slate-600 select-none" aria-hidden="true">|</span>
+                    <i class="fa-brands fa-python text-yellow-400" aria-hidden="true"></i>
+                    <span class="text-slate-300 font-medium">main.py</span>
+                    <span id="save-indicator" class="text-[10px] text-slate-500 hidden">saved</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <span id="status-badge" class="text-xs text-slate-400">Ready</span>
+                    <button
+                        id="clear-btn"
+                        type="button"
+                        class="inline-flex items-center gap-1 justify-center rounded-md border border-slate-600 px-2 py-1 text-[11px] text-slate-400 transition-colors hover:border-slate-400 hover:text-white"
+                        title="Clear output (Ctrl+L)"
+                        aria-label="Clear output">
+                        <i class="fa-solid fa-broom text-[10px]" aria-hidden="true"></i>
+                        <span>Clear</span>
+                    </button>
+                    <button
+                        id="reset-btn"
+                        type="button"
+                        class="inline-flex items-center gap-1 justify-center rounded-md border border-slate-600 px-2 py-1 text-[11px] text-slate-400 transition-colors hover:border-slate-400 hover:text-white"
+                        title="Reset editor content"
+                        aria-label="Reset editor content">
+                        <i class="fa-solid fa-rotate-left text-[10px]" aria-hidden="true"></i>
+                        <span>Reset</span>
+                    </button>
+                    <button id="run-btn" class="inline-flex items-center gap-1.5 rounded-md bg-green-600 px-3 py-1 text-xs font-semibold text-white transition-colors hover:bg-green-500 shadow-sm">
+                        <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+                        <span>Run</span>
+                    </button>
+                </div>
             </div>
-            <div class="px-2 py-1 hover:bg-[#2a2d2e] flex items-center gap-1 text-slate-500 cursor-not-allowed">
-                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" stroke-width="2" /></svg>
-                 utils.py
-            </div>
-            <div class="px-2 py-1 hover:bg-[#2a2d2e] flex items-center gap-1 text-slate-500 cursor-not-allowed">
-                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" stroke-width="2" /></svg>
-                 __pycache__
-            </div>
-        </div>
-
-        <!-- Main Editor Area -->
-        <div class="flex-1 flex flex-col min-w-0">
-             <!-- Tabs -->
-             <div class="h-9 bg-[#2d2d2d] flex items-center no-scrollbar overflow-x-auto">
-                 <div class="bg-[#1e1e1e] h-full flex items-center px-3 border-t-2 border-blue-500 text-white min-w-fit gap-2 text-xs">
-                    <img src="{{ '/img/icons/icon-python.ico' | url }}" class="w-3 h-3"> app.py
-                    <span class="hover:bg-slate-700 rounded-sm p-0.5 cursor-pointer ml-2">×</span>
-                 </div>
-             </div>
-
-             <!-- Editor & Terminal Split -->
-             <div class="flex-1 flex flex-col md:flex-row min-h-0">
-                  <div class="flex-1 relative bg-[#1e1e1e] border-r border-[#414141]">
-                       <pre class="h-full language-python"><code id="editor" class="language-python block h-full focus:outline-none p-4" contenteditable="true" spellcheck="false"># Python Online IDE
-# VS Code-like experience in browser
+            <pre class="flex-1 min-h-0 language-python rounded-none m-0"><code id="editor" class="language-python block h-full focus:outline-none p-4 rounded-none" contenteditable="true" spellcheck="false"># Python Online IDE
+# Press Ctrl+Enter (Cmd+Enter on Mac) to run
 
 class User:
     def __init__(self, name, role):
         self.name = name
         self.role = role
-    
+
     def describe(self):
         return f"{self.name} is a {self.role}"
 
@@ -84,37 +61,368 @@ guest = User("Guest", "Visitor")
 print(admin.describe())
 print(guest.describe())
 </code></pre>
-                  </div>
-                  
-                  <div class="h-48 md:h-auto md:w-1/3 flex flex-col bg-[#1e1e1e] border-t md:border-t-0 md:border-l border-[#414141]">
-                       <div class="h-8 flex items-center px-4 bg-[#252526] text-xs uppercase font-bold text-slate-400 gap-4 border-b border-[#414141]">
-                            <span class="text-white border-b border-white h-full flex items-center">Terminal</span>
-                            <span class="cursor-pointer hover:text-white">Output</span>
-                            <span class="cursor-pointer hover:text-white">Debug Console</span>
-                       </div>
-                       <div id="output" class="flex-1 p-3 font-mono text-sm text-[#cccccc] overflow-auto whitespace-pre-wrap"></div>
-                  </div>
-             </div>
+        </div>
+
+        <!-- Resizer -->
+        <div
+            id="ide-resizer"
+            class="hidden md:flex w-1.5 shrink-0 cursor-col-resize items-center justify-center bg-[#1e293b] border-x border-[#334155] transition-colors hover:bg-blue-600 active:bg-blue-700"
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize editor and output panes">
+            <span class="h-10 w-[2px] rounded-full bg-slate-500/50"></span>
+        </div>
+
+        <!-- Output / Terminal Pane -->
+        <div id="ide-terminal-pane" class="h-48 md:h-auto md:w-[45%] flex flex-col bg-[#0f172a] border-t md:border-t-0 border-[#334155]">
+            <!-- Tab bar -->
+            <div class="h-10 flex items-center justify-between px-2 bg-[#1e293b] text-xs border-b border-[#334155]">
+                <div class="flex items-center">
+                    <button id="tab-output" class="px-3 py-2 text-white border-b-2 border-blue-500 font-medium transition-colors">Output</button>
+                    <button id="tab-terminal" class="px-3 py-2 text-slate-400 border-b-2 border-transparent hover:text-slate-200 transition-colors">Terminal</button>
+                </div>
+                <div class="flex items-center gap-2 pr-2">
+                    <button id="clear-terminal-btn" class="hidden inline-flex items-center gap-1 justify-center rounded-md border border-slate-600 px-2 py-1 text-[11px] text-slate-400 transition-colors hover:border-slate-400 hover:text-white" title="Clear terminal">
+                        <i class="fa-solid fa-broom text-[10px]" aria-hidden="true"></i>
+                        <span>Clear</span>
+                    </button>
+                    <span id="cursor-position" class="text-slate-500 font-mono">Ln 1, Col 1</span>
+                </div>
+            </div>
+            <!-- Output content -->
+            <div id="output" class="flex-1 p-4 font-mono text-sm text-[#e2e8f0] overflow-auto whitespace-pre-wrap"></div>
+            <!-- Terminal content -->
+            <div id="terminal" class="flex-1 flex flex-col overflow-hidden hidden">
+                <div id="terminal-history" class="flex-1 p-4 font-mono text-sm text-[#e2e8f0] overflow-auto whitespace-pre-wrap"></div>
+                <div class="shrink-0 flex items-center px-4 py-2 bg-[#0a0f1a] border-t border-[#334155] font-mono text-sm">
+                    <span class="text-green-400 shrink-0 select-none">&gt;&gt;&gt;&nbsp;</span>
+                    <input
+                        id="terminal-input"
+                        type="text"
+                        class="flex-1 bg-transparent text-[#e2e8f0] outline-none border-none font-mono text-sm"
+                        spellcheck="false"
+                        autocomplete="off"
+                        placeholder="Type Python here...">
+                </div>
+            </div>
         </div>
     </div>
-    
+
     <!-- Status Bar -->
-    <div class="h-6 bg-[#007acc] text-white flex items-center px-3 text-xs justify-between shrink-0">
-         <div class="flex items-center gap-4">
-             <span>main</span>
-             <span>0 errors, 0 warnings</span>
-         </div>
-         <div class="flex items-center gap-4">
-             <span>Ln 12, Col 45</span>
-             <span>UTF-8</span>
-             <span>Python 3.11 (Pyodide)</span>
-         </div>
+    <div class="h-7 bg-[#1e293b] text-slate-400 flex items-center px-4 text-[11px] justify-between shrink-0 border-t border-[#334155]">
+        <div class="flex items-center gap-4">
+            <span>Python 3.12 (Pyodide)</span>
+            <span class="text-slate-500">Ctrl+Enter to run</span>
+        </div>
+        <div class="flex items-center gap-4">
+            <span>UTF-8</span>
+        </div>
     </div>
 </div>
 
 {% include "python-tool-runner.njk" %}
 <script>
     document.addEventListener('DOMContentLoaded', () => {
-        window.initPythonTool('editor', 'output', 'run-btn', null, 'status-badge');
+        window.initPythonTool('editor', 'output', 'run-btn', 'reset-btn', 'status-badge');
+
+        const workspace = document.querySelector('#ide-editor-pane').parentElement;
+        const editorPane = document.getElementById('ide-editor-pane');
+        const terminalPane = document.getElementById('ide-terminal-pane');
+        const resizer = document.getElementById('ide-resizer');
+        const editor = document.getElementById('editor');
+        const cursorPosition = document.getElementById('cursor-position');
+        const clearBtn = document.getElementById('clear-btn');
+        const output = document.getElementById('output');
+        const saveIndicator = document.getElementById('save-indicator');
+        const desktopQuery = window.matchMedia('(min-width: 768px)');
+        const STORAGE_KEY = 'python-ide-code';
+
+        // --- Tabs ---
+        const tabOutput = document.getElementById('tab-output');
+        const tabTerminal = document.getElementById('tab-terminal');
+        const terminalEl = document.getElementById('terminal');
+        const terminalHistory = document.getElementById('terminal-history');
+        const terminalInput = document.getElementById('terminal-input');
+        const clearTerminalBtn = document.getElementById('clear-terminal-btn');
+
+        function switchTab(tab) {
+            if (tab === 'output') {
+                output.classList.remove('hidden');
+                terminalEl.classList.add('hidden');
+                tabOutput.classList.add('text-white', 'border-blue-500');
+                tabOutput.classList.remove('text-slate-400', 'border-transparent');
+                tabTerminal.classList.remove('text-white', 'border-blue-500');
+                tabTerminal.classList.add('text-slate-400', 'border-transparent');
+                clearTerminalBtn.classList.add('hidden');
+            } else {
+                output.classList.add('hidden');
+                terminalEl.classList.remove('hidden');
+                tabTerminal.classList.add('text-white', 'border-blue-500');
+                tabTerminal.classList.remove('text-slate-400', 'border-transparent');
+                tabOutput.classList.remove('text-white', 'border-blue-500');
+                tabOutput.classList.add('text-slate-400', 'border-transparent');
+                clearTerminalBtn.classList.remove('hidden');
+                terminalInput.focus();
+                initRepl();
+            }
+        }
+
+        clearTerminalBtn.addEventListener('click', () => {
+            terminalHistory.innerHTML = '';
+        });
+
+        tabOutput.addEventListener('click', () => switchTab('output'));
+        tabTerminal.addEventListener('click', () => switchTab('terminal'));
+
+        // Switch to output tab when Run is clicked
+        document.getElementById('run-btn').addEventListener('click', () => switchTab('output'));
+
+        // --- REPL ---
+        let replReady = false;
+        let replBusy = false;
+        const replCommandHistory = [];
+        let replHistoryIdx = -1;
+
+        function appendToHistory(html) {
+            terminalHistory.insertAdjacentHTML('beforeend', html);
+            terminalHistory.scrollTop = terminalHistory.scrollHeight;
+        }
+
+        async function initRepl() {
+            if (replReady) return;
+            replReady = true;
+            appendToHistory('<span class="text-slate-500">Initializing Python REPL...</span>\n');
+
+            try {
+                await window.PyRuntime.run('pass', { timeoutMs: 30000, useWorker: false });
+                appendToHistory('<span class="text-green-400">Python 3.12 (Pyodide)\nType Python expressions and press Enter.\n</span>\n');
+            } catch (err) {
+                appendToHistory('<span class="text-red-400">Failed to initialize: ' + err.message + '</span>\n');
+                replReady = false;
+            }
+        }
+
+        async function executeRepl(code) {
+            if (replBusy || !code.trim()) return;
+            replBusy = true;
+
+            appendToHistory('<span class="text-green-400">&gt;&gt;&gt; </span>' + escapeHtml(code) + '\n');
+            terminalInput.value = '';
+
+            try {
+                const wrappedCode =
+                    'import sys as __sys__\n' +
+                    'import io as __io__\n' +
+                    '__out__=__io__.StringIO()\n' +
+                    '__err__=__io__.StringIO()\n' +
+                    '__sys__.stdout=__out__\n' +
+                    '__sys__.stderr=__err__\n' +
+                    'try:\n' +
+                    '    try:\n' +
+                    '        __val__=eval(' + JSON.stringify(code) + ')\n' +
+                    '        if __val__ is not None:print(repr(__val__))\n' +
+                    '    except SyntaxError:\n' +
+                    '        exec(' + JSON.stringify(code) + ')\n' +
+                    'except Exception as __e__:\n' +
+                    '    print(type(__e__).__name__+": "+str(__e__),file=__err__)\n' +
+                    'finally:\n' +
+                    '    __sys__.stdout=__sys__.__stdout__\n' +
+                    '    __sys__.stderr=__sys__.__stderr__\n' +
+                    '__stdout_val__=__out__.getvalue()\n' +
+                    '__stderr_val__=__err__.getvalue()\n';
+
+                const result = await window.PyRuntime.run(wrappedCode, {
+                    timeoutMs: 30000,
+                    useWorker: false
+                });
+
+                const getOutput = await window.PyRuntime.run(
+                    'print(__stdout_val__, end="")',
+                    { timeoutMs: 5000, useWorker: false }
+                );
+                const getErrors = await window.PyRuntime.run(
+                    'print(__stderr_val__, end="")',
+                    { timeoutMs: 5000, useWorker: false }
+                );
+
+                if (getOutput.stdout) {
+                    appendToHistory(escapeHtml(getOutput.stdout) + '\n');
+                }
+                if (getErrors.stdout) {
+                    appendToHistory('<span class="text-red-400">' + escapeHtml(getErrors.stdout) + '</span>\n');
+                }
+            } catch (err) {
+                appendToHistory('<span class="text-red-400">' + escapeHtml(err.message) + '</span>\n');
+            } finally {
+                replBusy = false;
+            }
+        }
+
+        function escapeHtml(str) {
+            return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        }
+
+        terminalInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                const code = terminalInput.value;
+                if (code.trim()) {
+                    replCommandHistory.push(code);
+                    replHistoryIdx = replCommandHistory.length;
+                }
+                executeRepl(code);
+            }
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                if (replHistoryIdx > 0) {
+                    replHistoryIdx--;
+                    terminalInput.value = replCommandHistory[replHistoryIdx] || '';
+                }
+            }
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                if (replHistoryIdx < replCommandHistory.length - 1) {
+                    replHistoryIdx++;
+                    terminalInput.value = replCommandHistory[replHistoryIdx] || '';
+                } else {
+                    replHistoryIdx = replCommandHistory.length;
+                    terminalInput.value = '';
+                }
+            }
+        });
+
+        if (!workspace || !editorPane || !terminalPane || !resizer || !editor) return;
+
+        // --- Auto-save ---
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved !== null && saved.trim() !== '') {
+            editor.textContent = saved;
+            if (window.EditorHelpers) {
+                const parsed = window.EditorHelpers.parseEditorClass(editor);
+                window.EditorHelpers.renderHighlightedEditable(editor, parsed.language, parsed.baseClassName);
+            }
+        }
+
+        let saveTimeout = null;
+        function scheduleAutoSave() {
+            clearTimeout(saveTimeout);
+            saveTimeout = setTimeout(() => {
+                localStorage.setItem(STORAGE_KEY, editor.textContent || '');
+                if (saveIndicator) {
+                    saveIndicator.classList.remove('hidden');
+                    setTimeout(() => saveIndicator.classList.add('hidden'), 1500);
+                }
+            }, 800);
+        }
+        editor.addEventListener('input', scheduleAutoSave);
+
+        const resetBtn = document.getElementById('reset-btn');
+        if (resetBtn) {
+            resetBtn.addEventListener('click', () => localStorage.removeItem(STORAGE_KEY));
+        }
+
+        // --- Clear output ---
+        if (clearBtn) {
+            clearBtn.addEventListener('click', () => {
+                output.textContent = '';
+                output.innerHTML = '';
+            });
+        }
+
+        // --- Keyboard shortcuts ---
+        editor.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                e.preventDefault();
+                document.getElementById('run-btn').click();
+            }
+            if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
+                e.preventDefault();
+                output.textContent = '';
+                output.innerHTML = '';
+            }
+        });
+
+        // --- Resizer (percentage-based) ---
+        const MIN_EDITOR_PCT = 40;
+        const MIN_OUTPUT_PCT = 30;
+        let isDragging = false;
+        let editorPct = 55;
+        let hasCustomWidth = false;
+        let startX = 0;
+        let startPct = 55;
+
+        function setMobileLayout() {
+            editorPane.style.width = '';
+            terminalPane.style.width = '';
+            editorPane.style.flex = '';
+            terminalPane.style.flex = '';
+        }
+
+        function applyPct(pct) {
+            const clamped = Math.max(MIN_EDITOR_PCT, Math.min(100 - MIN_OUTPUT_PCT, pct));
+            editorPct = clamped;
+            editorPane.style.flex = `0 0 ${clamped}%`;
+            terminalPane.style.flex = `0 0 ${100 - clamped}%`;
+        }
+
+        function syncLayout() {
+            if (!desktopQuery.matches) { setMobileLayout(); return; }
+            applyPct(hasCustomWidth ? editorPct : 55);
+        }
+
+        // --- Cursor position ---
+        function updateCursorPosition() {
+            if (!cursorPosition || !window.EditorHelpers) return;
+            const offset = window.EditorHelpers.getCaretOffset(editor);
+            if (offset === null) return;
+            const source = editor.textContent || '';
+            const safe = Math.max(0, Math.min(offset, source.length));
+            const before = source.slice(0, safe);
+            const line = before.split('\n').length;
+            const col = before.length - before.lastIndexOf('\n');
+            cursorPosition.textContent = `Ln ${line}, Col ${col}`;
+        }
+
+        function stopResize() {
+            if (!isDragging) return;
+            isDragging = false;
+            document.body.style.userSelect = '';
+            document.body.style.cursor = '';
+        }
+
+        resizer.addEventListener('pointerdown', (e) => {
+            if (!desktopQuery.matches) return;
+            e.preventDefault();
+            isDragging = true;
+            hasCustomWidth = true;
+            startX = e.clientX;
+            startPct = editorPct;
+            document.body.style.userSelect = 'none';
+            document.body.style.cursor = 'col-resize';
+            if (resizer.setPointerCapture) resizer.setPointerCapture(e.pointerId);
+        });
+        resizer.addEventListener('pointermove', (e) => {
+            if (!isDragging || !desktopQuery.matches) return;
+            const totalWidth = workspace.getBoundingClientRect().width;
+            if (totalWidth <= 0) return;
+            const deltaPct = ((e.clientX - startX) / totalWidth) * 100;
+            applyPct(startPct + deltaPct);
+        });
+        resizer.addEventListener('pointerup', stopResize);
+        resizer.addEventListener('pointercancel', stopResize);
+        resizer.addEventListener('lostpointercapture', stopResize);
+        window.addEventListener('resize', syncLayout);
+        if (desktopQuery.addEventListener) desktopQuery.addEventListener('change', syncLayout);
+
+        editor.addEventListener('keyup', updateCursorPosition);
+        editor.addEventListener('click', updateCursorPosition);
+        editor.addEventListener('input', () => requestAnimationFrame(updateCursorPosition));
+        document.addEventListener('selectionchange', () => {
+            const sel = window.getSelection();
+            if (sel && sel.rangeCount > 0 && editor.contains(sel.anchorNode)) updateCursorPosition();
+        });
+
+        syncLayout();
+        requestAnimationFrame(updateCursorPosition);
     });
 </script>
diff --git a/tools/python-formatter.njk b/tools/python-formatter.njk
index 2f66be6..beaf990 100644
--- a/tools/python-formatter.njk
+++ b/tools/python-formatter.njk
@@ -37,11 +37,11 @@ permalink: /python-formatter/
             </div>
             <div class="bg-[#1e293b] flex-1 relative overflow-auto">
                 <pre class="h-full language-python"><code id="editor" class="language-python focus:outline-none p-4 block min-h-full" contenteditable="true" spellcheck="false"># Messy code example
-def calculate(  x,y ):
+def calculate(x, y):
   if x>y:
       return x-y
   else: return y-x
-print( calculate( 10,  5 ))</code></pre>
+print(calculate(10, 5))</code></pre>
             </div>
         </div>
 
diff --git a/tools/python-password-generator.njk b/tools/python-password-generator.njk
index 036e4fb..0c4ab12 100644
--- a/tools/python-password-generator.njk
+++ b/tools/python-password-generator.njk
@@ -49,15 +49,9 @@ permalink: /python-password-generator/
     </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
+{% include "pyodide-runtime.njk" %}
 <script>
 (function() {
-    let pyodidePromise = null;
-    async function getPyodide() {
-        if (!pyodidePromise) pyodidePromise = loadPyodide();
-        return pyodidePromise;
-    }
-
     const btn = document.getElementById('generate-btn');
     const output = document.getElementById('output');
     const status = document.getElementById('status');
@@ -67,8 +61,6 @@ permalink: /python-password-generator/
         btn.disabled = true;
         
         try {
-            const py = await getPyodide();
-            
             const length = document.getElementById('length').value;
             const useDigits = document.getElementById('use-digits').checked ? 'True' : 'False';
             const useSpecial = document.getElementById('use-special').checked ? 'True' : 'False';
@@ -88,12 +80,12 @@ def generate(length, use_digits, use_special):
 
 print(generate(${length}, ${useDigits}, ${useSpecial}))
             `;
-
-            let stdout = "";
-            py.setStdout({ batched: (str) => stdout += str });
-            await py.runPythonAsync(runCode);
-            
-            output.textContent = stdout.trim();
+            const result = await window.PyRuntime.run(runCode, {
+                timeoutMs: 12000,
+                useWorker: true
+            });
+            const combined = [result.stdout, result.stderr].filter(Boolean).join('\n').trim();
+            output.textContent = combined;
             status.textContent = 'Generated using Python secrets module';
             
         } catch (err) {
diff --git a/tools/python-regex-tester.njk b/tools/python-regex-tester.njk
index abc3e5f..0bd5a48 100644
--- a/tools/python-regex-tester.njk
+++ b/tools/python-regex-tester.njk
@@ -67,15 +67,9 @@ Invalid emails like user@.com or @domain.com should not match.</textarea>
     </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
+{% include "pyodide-runtime.njk" %}
 <script>
 (function() {
-    let pyodidePromise = null;
-    async function getPyodide() {
-        if (!pyodidePromise) pyodidePromise = loadPyodide();
-        return pyodidePromise;
-    }
-
     const runBtn = document.getElementById('run-btn');
     const output = document.getElementById('output');
     const status = document.getElementById('status-badge');
@@ -86,8 +80,6 @@ Invalid emails like user@.com or @domain.com should not match.</textarea>
         runBtn.disabled = true;
 
         try {
-            const py = await getPyodide();
-            
             const pattern = document.getElementById('pattern-input').value;
             const text = document.getElementById('text-input').value;
             
@@ -97,10 +89,6 @@ Invalid emails like user@.com or @domain.com should not match.</textarea>
             if(document.getElementById('flag-s').checked) flags.push("re.DOTALL");
             const flagStr = flags.length > 0 ? flags.join(" | ") : "0";
 
-            py.globals.set("py_pattern", pattern);
-            py.globals.set("py_text", text);
-            py.globals.set("py_flag_str", flagStr);
-
             const runCode = `
 import re
 
@@ -124,11 +112,16 @@ except re.error as e:
 except Exception as e:
     print(f"Error: {e}")
             `;
-
-            let stdout = "";
-            py.setStdout({ batched: (str) => stdout += str + "\\n" });
-            await py.runPythonAsync(runCode);
-            output.textContent = stdout;
+            const result = await window.PyRuntime.run(runCode, {
+                timeoutMs: 12000,
+                useWorker: true,
+                globals: {
+                    py_pattern: pattern,
+                    py_text: text,
+                    py_flag_str: flagStr
+                }
+            });
+            output.textContent = [result.stdout, result.stderr].filter(Boolean).join("\\n");
             status.textContent = 'Done';
             
         } catch (err) {
diff --git a/tutorial/basic/01-what-is-python.md b/tutorial/basic/01-what-is-python.md
deleted file mode 100644
index 4dc6932..0000000
--- a/tutorial/basic/01-what-is-python.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-layout: tutorial.njk
-title: Introduction to Python
-order: 1
-permalink: /tutorial/what-is-python/
----
-
-<img src="/img/tutorial/1-pendahuluan-python.webp" alt="Introduction to Python - What is Python" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-![Python Logo](/img/729px-Python_logo_and_wordmark.svg.png 'Python Logo')
-
-[Python](https://www.python.org) is a multipurpose interpretive programming language. Unlike other languages that are hard to read and understand, Python emphasizes code readability to make syntax easier to understand. This makes Python very easy to learn for both beginners and those who have already mastered other programming languages.
-
-This language first appeared in 1991, designed by a person named [Guido van Rossum](https://en.wikipedia.org/wiki/Guido_van_Rossum). Until now, Python is still developed by the [Python Software Foundation](https://www.python.org/psf/). The Python language supports almost all operating systems, even for Linux operating systems, almost all distributions include Python in it.
-
-Python has become one of the most popular programming languages in the world, mainly because of its dominant role in the fields of:
-
-- **Artificial Intelligence (AI) and Machine Learning** - Libraries like TensorFlow, PyTorch, and scikit-learn make Python the top choice for AI development.
-- **Data Science and Data Analysis** - Pandas, NumPy, and Matplotlib are industry standard tools.
-- **Web Development** - Frameworks like Django, Flask, and FastAPI.
-- **Automation and Scripting** - Automating repetitive tasks easily.
-- **Internet of Things (IoT)** - Used in Raspberry Pi and embedded devices.
-
-The latest version of Python currently is **Python 3.13** with various modern features like pattern matching, improved error messages, and better performance.
-
-With simple and easy-to-implement code, a programmer can prioritize the development of the application being created, rather than being busy looking for syntax errors.
-
-```python
-print("Python is very simple")
-```
-
-Just by writing the print code as above, you can print anything you want inside the parentheses `()`. Even at the end of the code, you don't have to end it with a semicolon `;`
diff --git a/tutorial/basic/02-python-installation.md b/tutorial/basic/02-python-installation.md
deleted file mode 100644
index 9549e84..0000000
--- a/tutorial/basic/02-python-installation.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: tutorial.njk
-title: Python Installation
-order: 2
-permalink: /tutorial/python-installation/
----
-
-<img src="/img/tutorial/2-panduan-cepat-instalasi-python-windows-linux-mac.webp" alt="Python Installation Guide" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-Before you use Python, you must install it first on your computer's operating system. Currently Python has the latest stable version which is **Python 3.13**. Here we will learn the Python programming language using this latest version.
-
-Installing Python is very easy, follow the guide below. Below is a guide on how to install Python on Linux, Windows, and Mac OS platforms.
-
-### Linux
-
-1. Open browser, visit [Python download page](https://www.python.org/downloads/source/)
-2. Download the latest version of Python in zip file format for Unix/Linux
-3. Extract the zip file you just downloaded
-4. Edit the Modules/Setup file if you want Python customization
-5. Run `./configure` script
-6. `make`
-7. `make install`
-
-This step will install Python in the standard location `/usr/local/bin` and libraries in `/usr/local/lib/pythonXX` where `XX` is the latest version of Python you are using.
-
-> For some distributions (distros) of Linux operating systems, Python is already installed in it. So you don't need to install it again.
-
-### Windows
-
-1. Open browser, visit [Python download page for Windows](https://www.python.org/downloads/windows/)
-2. Download Python 3.13 installer (choose 64-bit version for Windows)
-3. Open (double click) the python installer file you just downloaded
-4. Follow installation steps until finished
-
-### Mac OS
-
-1. Open browser, visit [Python download page for Mac](https://www.python.org/downloads/macos/)
-2. Download the latest version of Python for Macintosh
-3. Open the file you just downloaded
-4. Follow installation steps until finished
diff --git a/tutorial/basic/03-running-python.md b/tutorial/basic/03-running-python.md
deleted file mode 100644
index 2227393..0000000
--- a/tutorial/basic/03-running-python.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-layout: tutorial.njk
-title: Running Python
-order: 3
-permalink: /tutorial/running-python/
----
-
-<img src="/img/tutorial/3-panduan-cepat-menjalankan-python.webp" alt="How to Run Python" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-To run Python, there are many ways you can do it. You can use a _shell_, terminal or use an [IDE (Integrated Development Environment)](http://www.belajarpython.com/2015/05/integrated-development-environment-ide.html). Below are the steps to run Python in the easiest way.
-
-> **Note**: You can also run and edit Python code directly on this website in every code snippet interactively! Look for the "Run" button on the code blocks.
-
-### Linux
-
-1. Open terminal <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>T</kbd>
-2. Type python then you will enter the Python shell.
-3. Write your Python script, example: `print("Welcome to Python")`. If done press the <kbd>ENTER</kbd> key, and the Python script will be executed.
-4. To exit from Python shell type `exit()`
-
-_or_
-
-1. Use a text editor, for example gedit.
-2. Create a new file, and type your python script, example: `print("Welcome to Python")`.
-3. Save As with extension `.py` (example: `print.py`).
-4. Run file using Terminal.
-5. Open terminal <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>T</kbd>.
-6. Enter the directory where your Python file is saved (example: `cd /Users/admin/Desktop/`).
-7. Run the Python script using python followed by the filename (example: `python print.py`).
-8. Your Python script will be executed/run.
-
-### Windows
-
-#### Using Shell
-
-1. Open IDLE (python shell in windows), you can search for it in the <kbd>START</kbd> button.
-2. Write your Python script, example: `print("Welcome to Python")`. If done press the <kbd>ENTER</kbd> key, and the Python script will be executed.
-
-![Python Shell Windows](/img/menjalankan-python-windows.png 'Python Shell Windows')
-
-3. To exit from Python shell type `exit()`
-
-#### Using Script Editor
-
-1. To run a script saved in a file, open IDLE (python shell in windows), you can search for it in the <kbd>START</kbd> button.
-2. Click menu `File - New File`
-3. Write Python script on the window that appears, example:
-
-```python
-print("Learn Python")
-print("at belajarpython.com")
-```
-
-4. Save script via menu `File - Save`
-5. Run program by clicking menu `Run - Run Module`
-
-![Python Editor Windows](/img/menjalankan-python-windows-editor.png 'Python Editor Windows')
-
-### Mac OS
-
-1. Open terminal.
-2. Type python then you will enter the Python shell.
-3. Write your Python script, example: `print("Welcome to Python")`. If done press the <kbd>ENTER</kbd> key, and the Python script will be executed.
-4. To exit from Python shell type `exit()`
-
-_or_
-
-1. Use a text editor.
-2. Create a new file, and type your python script, example: `print("Welcome to Python")`.
-3. Save As with extension `.py` (example: `print.py`).
-4. Run file using Terminal.
-5. Open terminal <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>T</kbd>
-6. Enter the directory where your Python file is saved (example: `cd /Users/admin/Desktop/`).
-7. Run the Python script using python followed by the filename (example: `python print.py`).
-8. Your Python script will be executed/run.
diff --git a/tutorial/basic/04-hello-world-python.md b/tutorial/basic/04-hello-world-python.md
deleted file mode 100644
index 0b86a94..0000000
--- a/tutorial/basic/04-hello-world-python.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-layout: tutorial.njk
-title: Hello World Python
-order: 4
-permalink: /tutorial/hello-world-python/
----
-
-<img src="/img/tutorial/4-hello-world-python.webp" alt="Hello World Python" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-The Python language syntax is almost the same as general programming languages like Java or PHP.
-
-### Basic Syntax
-
-Below is an example of a Python function used for printing. In Python to print, simply use the `print()` function, where something to be printed must be placed between the opening and closing parentheses. Even in Python version 2.x you don't have to use curly braces, just separate with spaces.
-
-If you want to print String data types directly, you must put them inside valid quotes first.
-
-```python
-print("Hello World")
-```
-
-When you run the script above, you will see output in the form of text `Hello World`.
-
-### Python Case Sensitivity
-
-Python is case sensitive, this means uppercase and lowercase letters make a difference. For example, if you use the print function with lowercase `print()` it will work. It is different if you use uppercase `Print()` or `PRINT()`, an error message will appear.
-
-This rule applies to variable names or other functions.
diff --git a/tutorial/basic/05-python-comments.md b/tutorial/basic/05-python-comments.md
deleted file mode 100644
index b41adde..0000000
--- a/tutorial/basic/05-python-comments.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-layout: tutorial.njk
-title: Python Comments
-order: 5
-permalink: /tutorial/python-comments/
----
-
-<img src="/img/tutorial/5-komentar-pada-python.webp" alt="Python Comments" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-Comments are code inside a Python script that is not executed or run by the machine. Comments are only used to mark or provide written explanations in the script.
-
-Comments are commonly used to let others understand what the script does, or to remind the programmer themselves if they edit the script again someday.
-
-To use comments you simply write a hash sign `#` followed by your comment or by using string literals opened and closed with """.
-
-Below are examples of using comments in Python:
-
-```python
-#This is a comment
-
-# This writing will not be executed
-
-#comments with hash sign can only be used
-#for
-#one
-#line
-
-"""
-Writing comments more than one line is
-by using triple double quotes and
-closed with triple double quotes too
-"""
-
-print("Hello World") #this is also a comment
-
-#print("Welcome")
-
-# comments can contain special characters !@#$%^&\*(),./;'[]\
-
-#print name
-print("Budi")
-
-#print number/integer
-print(123)
-```
-
-When you run the script above, you will see output in the form of `Hello World`, `Budi` and `123`, because the writing/comments written are not executed.
diff --git a/tutorial/basic/08-python-operators.md b/tutorial/basic/08-python-operators.md
deleted file mode 100644
index b612b39..0000000
--- a/tutorial/basic/08-python-operators.md
+++ /dev/null
@@ -1,153 +0,0 @@
----
-layout: tutorial.njk
-title: Python Operators
-order: 8
-permalink: /tutorial/python-operators/
----
-
-<img src="/img/tutorial/8-operator-pada-python.webp" alt="Python Operators" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-Operators are constructs that can manipulate the values of operands.
-
-For example the operation 3 + 2 = 5. Here `3` and `2` are operands and `+` is the operator.
-
-The Python programming language supports various kinds of operators, including:
-
-- [Arithmetic Operators](#arithmetic-operators)
-- [Comparison (Relational) Operators](#comparison-operators)
-- [Assignment Operators](#assignment-operators)
-- [Logical Operators](#logical-operators)
-- [Bitwise Operators](#bitwise-operators)
-- [Membership Operators](#membership-operators)
-- [Identity Operators](#identity-operators)
-
-### Arithmetic Operators <a name="arithmetic-operators"></a>
-
-| Operator | Example | Explanation |
-| -------------------- | ------------- | ---------------------------------------------------------------------------------------------------------- |
-| Addition `+` | `1 + 3 = 4` | Adds the value of each operand or number |
-| Subtraction `-` | `4 - 1 = 3` | Subtracts the operand value on the left using the operand on the right |
-| Multiplication `*` | `2 * 4 = 8` | Multiplies operands/numbers |
-| Division `/` | `10 / 5 = 2` | To divide the operand on the left using the operand on the right |
-| Modulus `%` | `11 % 2 = 1` | Gets the remainder of the division from the operand on the left of the operator when divided by the operand on the right |
-| Exponent `**` | `8 ** 2 = 64` | Raises the operand on the left of the operator to the power of the operand on the right of the operator |
-| Floor Division `//` | `10 // 3 = 3` | Same as division. It's just that the digits behind the comma are removed |
-
-Below is an example of using Arithmetic Operators in Python programming language
-
-```python
-#ARITHMETIC OPERATORS
-
-#Addition
-print(13 + 2)
-apple = 7
-orange = 9
-fruit = apple + orange #
-print(fruit)
-
-#Subtraction
-debt = 10000
-pay = 5000
-remainingDebt = debt - pay
-print("Your remaining debt is ", remainingDebt)
-
-#Multiplication
-length = 15
-width = 8
-area = length * width
-print(area)
-
-#Division
-cake = 16
-child = 4
-cakePerChild = cake / child
-print("Each child will get cake parts as much as ", cakePerChild)
-
-#Modulus
-number1 = 14
-number2 = 5
-result = number1 % number2
-print("Remainder of division from number ", number1, " and ", number2, " is ", result)
-
-#Exponent
-number3 = 8
-number4 = 2
-resultExponent = number3 ** number4
-print(resultExponent)
-
-#Floor Division
-print(10//3)
-#10 divided by 3 is 3.3333. Because it is rounded down it will produce value 3
-```
-
-### Comparison (Relational) Operators <a name="comparison-operators"></a>
-
-Comparison operators are used to compare a value from each operand.
-
-| Operator | Example | Explanation |
-| --------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
-| Equal to `==` | `1 == 1` | True if each operand has the same value, then the condition is True. |
-| Not equal to `!=` | `2 != 2` | False. Will produce the opposite value of the actual condition. |
-| Greater than `>` | `5 > 3` | True If the left operand value is greater than the right operand value, then the condition becomes true. |
-| Less than `<` | `5 < 3` | True If the left operand value is smaller than the right operand value, then the condition becomes true. |
-| Greater than or equal to `>=` | `5 >= 3` | True If the left operand value is greater than the right operand value, or same, then the condition becomes true. |
-| Less than or equal to `<=` | `5 <= 3` | True If the left operand value is smaller than the right operand value, or same, then the condition becomes true. |
-
-Below is an example of using Comparison Operators in Python programming language
-
-```python
-# EQUAL TO
-print(1 == 1) # Result will be True because one equals one
-print(1 == 2) # Result will be False because one does not equal two
-
-# NOT EQUAL TO
-print(2 != 2) # Result will be False because two should be equal to two
-print(2 != 3) # Result will be True because two is not equal to three
-
-# GREATER THAN
-print(5 > 3) # Result will be True because five is greater than three
-
-# LESS THAN
-print(5 < 3) # Result will be False because five is not smaller than three
-
-# GREATER THAN OR EQUAL TO
-print(5 >= 3) # Result will be True because five is greater than or equal to three
-
-# LESS THAN OR EQUAL TO
-print(5 <= 3) # Result will be False because five is not smaller than or equal to three
-```
-
-### Assignment Operators <a name="assignment-operators"></a>
-
-Assignment operators are used to give or modify values into a variable.
-
-| Operator | Example | Explanation |
-| --------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
-| Equal `=` | `a = 1` | Gives value on the right into the variable on the left. |
-| Add equal `+=` | `a += 2` | Gives variable value with variabe value itself added with value on the right. |
-| Subtract equal `-=` | `a -= 2` | Gives variable value with variable value itself subtracted by value on the right. |
-| Multiply equal `*=` | `a *= 2` | Gives variable value with variable value itself multiplied by value on the right. |
-| Divide equal `/=` | `a /= 4` | Gives variable value with variable value itself divided by value on the right. |
-| Modulus equal `%=` | `a %= 3` | Gives variable value with variable value itself divided by value on the right. What is taken later is the remainder. |
-| Exponent equal `**=` | `a **= 3` | Gives variable value with variable value itself raised to the power of value on the right. |
-| Floor Division equal `//=` | `a //= 3` | Divides rounded operand left of operator with operand right of operator then the result is filled to left operand. |
-
-### Operator Execution Priority in Python
-
-Of all the operators above, each has a priority order where the first priority will be done first, and so on until the last priority.
-
-| Operator | Description |
-| --------------------------------- | ------------------------ |
-| `**` | Arithmetic |
-| `~, +, -` | Bitwise |
-| `*, /, %, //` | Arithmetic |
-| `+, -` | Arithmetic |
-| `>>, <<` | Bitwise |
-| `&` | Bitwise |
-| `^` | Bitwise |
-| `<=, <, >, >=` | Comparison |
-| `==, !=` | Comparison |
-| `=, %=, /=, //=, -=, +=, *=, **=` | Assignment |
-| `is, is not` | Identity |
-| `in, not in` | Membership |
-| `not, or, and` | Logical |
diff --git a/tutorial/basic/11-python-numbers.md b/tutorial/basic/11-python-numbers.md
deleted file mode 100644
index b523bad..0000000
--- a/tutorial/basic/11-python-numbers.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-layout: tutorial.njk
-title: Python Number
-order: 11
-permalink: /tutorial/python-numbers/
----
-
-<img src="/img/tutorial/11-tipe-data-number-pada-python.webp" alt="Python Number Data Types - Int, Float, Complex" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-Number is a Python data type that stores numeric values. Number is an immutable data type. This means, changing the value of a number data type will result in a newly allocated object.
-
-Number objects are created when you assign a value to them. For example: `firstNumber = 1`, `secondNumber = 33`
-
-Python supports several Number data types including:
-
-- Int
-- Float
-- Complex
-
-Below are some examples of Number data types in Python:
-
-| Int | Float | Complex |
-| -------- | ------------- | ------------ |
-| `20 ` | `0.1 ` | `3.14j ` |
-| `300 ` | `1.20 ` | `35.j ` |
-| `-13 ` | `-41.2 ` | `3.12e-12j ` |
-| `020 ` | `32.23+e123 ` | `.873j ` |
-| `-0103 ` | `-92. ` | `-.123+0J ` |
-| `-0x212` | `-32.52e10 ` | `3e+123J ` |
-| `0x56 ` | `60.2-E13 ` | `4.31e-4j ` |
-
-### Python Number Data Type Conversion
-
-In Python you can convert data types using functions. Below are some functions to convert Python number data types.
-
-- `int(x)`
-  to convert x to integer.
-- `float(x)`
-  to convert x to floating point number.
-- `complex(x)`
-  to convert x to complex number with real part x and imaginary part zero.
-- `complex(x, y)`
-  to convert x and y to complex number with real part x and imaginary part y.
-
-### Python Mathematical Functions
-
-In Python programming language there are functions to perform mathematical calculations, here is the list:
-
-| Name | Usage | Explanation |
-| ------------ | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Absolute | `abs(x)` | Absolute value of x:(positive) distance between x and 0. |
-| Ceiling | `ceil(x)` | Ceiling of x: smallest integer not less than x. |
-| Exponent | `exp(x)` | Exponential value of x: ex |
-| Fabs | `fabs(x)` | Absolute value of x. |
-| Floor | `floor(x)` | Floor value of x: largest integer not greater than x. |
-| Log | `log(x)` | Logarithm of x, for x > 0. |
-| Log 10 | `log10(x)` | Base 10 logarithm of x, for x > 0. |
-| Max | `max(x1, x2,...)` | Largest argument: Value closest to positive infinity |
-| Min | `min(x1, x2,...)` | Smallest argument: value closest to negative infinity. |
-| Modf | `modf(x)` | Fractional and integer parts of x in a two-item tuple. Both parts have the same sign as x. Integer part is returned as float. |
-| Pow | `pow(x, y)` | Value of x \*\* y. |
-| Round | `round(x [,n])` | X rounded to n digits from the decimal point. Python rounds away from zero as a tie-breaker: round (0.5) is 1.0 and round (-0.5) is -1.0. |
-| Square Root | `sqrt(x)` | Square root of x for x > 0. |
-
-### Python Random Number Functions
-
-Random numbers are used for game applications, simulations, testing, security, and privacy. Python includes the following commonly used functions. Here is the list:
-
-| Name | Usage | Explanation |
-| --------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Choice | `choice(seq)` | Random item from a list, tuple, or string. |
-| RandRange | `randrange([start,] stop [,step])` | Randomly selected element from range (start, stop, step). |
-| Random | `random()` | A random float r, such that 0 is less than or equal to r and r is less than 1 |
-| Seed | `seed([x])` | Sets the integer starting value used in generating random numbers. Call this function before calling other random module functions. No return |
-| Shuffle | `shuffle(lst)` | Shuffles list of items in place. No return |
-| Uniform | `uniform(x, y)` | A random float r, such that x is less than or equal to r and r is less than y. |
-
-### Python Trigonometric Functions
-
-Python includes the following functions that perform trigonometric calculations. Here is the list:
-
-| Name | Usage | Explanation |
-| ------- | --------------------- | ------------------------------------------------- |
-| Acos | `acos(x)` | Return arc cosine of x, in radians. |
-| Asin | `asin(x)` | Return arc sine of x, in radians. |
-| Atan | `atan(x)` | Return arc tangent of x, in radians. |
-| Atan 2 | `atan2(y, x)` | Return atan (y / x), in radians. |
-| Cosine | `cos(x)` | Return cosine of x radians. |
-| Hypot | `hypot(x, y)` | Return Euclidean norm, sqrt (x * x + y * y). |
-| Sine | `sin(x)` | Return sine of x radians. |
-| Tangent | `tan(x)` | Return tangent of x radians. |
-| Degrees | `degrees(x)` | Converts angle x from radians to degrees. |
-| Radians | `radians(x)` | Converts angle x from degrees to radians. |
-
-### Python Mathematical Constants
-
-This module also defines two mathematical constants. Here is the list:
-
-| Name | Usage | Explanation |
-| ---- | ---------- | ----------------------- |
-| Pi | `pi` | Mathematical constant Pi |
-| e | `e` | Mathematical constant e |
diff --git a/tutorial/basic/12-python-strings.md b/tutorial/basic/12-python-strings.md
deleted file mode 100644
index 483e348..0000000
--- a/tutorial/basic/12-python-strings.md
+++ /dev/null
@@ -1,170 +0,0 @@
----
-layout: tutorial.njk
-title: Python String
-order: 12
-permalink: /tutorial/python-strings/
----
-
-<img src="/img/tutorial/12-tipe-data-string-python.webp" alt="Python String Data Type" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-Strings are the most popular type in programming languages. We can create them simply by enclosing characters in quotes. Python treats single quotes the same as double quotes. Creating a string is as easy as assigning a value to a variable.
-
-Below is a simple example of a string in Python programming language.
-
-```python
-print("Hello World")
-```
-
-### Accessing Values in Strings
-
-Python does not use character type; these are treated as strings of length one, thus also considered a substring.
-
-To access substrings, use square brackets for slicing along with the index or indices to obtain your substring. For example:
-
-```python
-name = 'John Doe'
-message = "John Doe learns python language at Belajarpython"
-print("name[0]: ", name[0])
-print("message[1:4]: ", message[1:4])
-```
-
-When the code above is executed, it produces the following result:
-
-`name[0]: J`
-`message[1:4]: ohn`
-
-### Updating Strings
-
-You can "update" an existing string by (re)assigning a variable to another string. The new value can be related to its previous value or to a completely different string altogether. For example:
-
-```python
-message = 'Hello World'
-print("Updated String :- ", message[:6] + 'Python')
-```
-
-When the code above is executed, it produces the following result:
-
-`Updated String :- Hello Python`
-
-### Python Escape Characters
-
-Below is a table of escape characters or non-printable characters that can be represented with backslash notation prefix.
-
-| Backslash Notation | Hexadecimal Character | Explanation |
-| ---------------- | -------------------- | --------------------------------------------------------------- |
-| `\a ` | `0x07 ` | Bell or alert |
-| `\b ` | `0x08 ` | Backspace |
-| `\cx ` | | Control-x |
-| `\C-x ` | | Control-x |
-| `\e ` | `0x1b ` | Escape |
-| `\f ` | `0x0c ` | Formfeed |
-| `\M-\C-x ` | | Meta-Control-x |
-| `\n ` | `0x0a ` | Newline |
-| `\nnn ` | | Octal notation, where n is in the range 0..7 |
-| `\r ` | `0x0d ` | Carriage return |
-| `\s ` | `0x20 ` | Space |
-| `\t ` | `0x09 ` | Tab |
-| `\v ` | `0x0b ` | Vertical tab |
-| `\x ` | | Character x |
-| `\xnn ` | | Hexadecimal notation, where n is in the range 0..9, a..f, or A..F |
-
-### Python String Special Operators
-
-Assume string variable a is 'Hello' and variable b is 'Python', then below are the operators that can be used on both strings in those variables. `a = "Hello"` `b = "Python"`
-
-| Operator | Example | Explanation |
-| --------- | ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `+ ` | `a + b ` | will result into HelloPython Concatenation - Adds values on both sides of the operator |
-| `* ` | `a*2` | will result into HelloHello Repetition - Creates new string, concatenating multiple copies of the same string |
-| ` []` | `a[1]` | will result into e Slice - Gives character from the given index |
-| `[ : ]` | `a[1:4]` | will result into ell Range Slice - Gives characters from the given range |
-| `in` | `H in a ` | will result into 1 Membership - Returns true if a character exists in the given string |
-| ` not in` | ` Z not in a` | will result into 1 Membership - Returns true if a character does not exist in the given string |
-| `r/R ` | `print r'\n' prints \n and print R'\n'prints \n` | Raw String - Suppresses actual meaning of Escape characters. Syntax for raw strings is exactly same as normal strings except the raw string operator, letter "r", which precedes the quote. "R" can be lowercase (r) or uppercase (R) and must be placed immediately before the first quote. |
-| `%` | | Format - Performs String formatting |
-
-### Python String Formatting Operator
-
-One of Python's coolest features is the string format operator %. This operator is unique to strings and makes up to have functions from C's printf() family.
-Here is a simple example: `print("My name is %s and weight is %d kg!" % ('Zara', 21)) `
-
-Here is the complete list of symbols that can be used together with % :
-
-| Operator | Explanation |
-| -------- | ------------------------------------------------ |
-| `%c` | character |
-| `%s` | String conversion via str() prior to formatting |
-| `%i` | Signed decimal integer |
-| `%d` | Signed decimal integer |
-| `%u` | Unsigned decimal integer |
-| `%o` | Octal integer |
-| `%x` | Hexadecimal integer (lowercase letters) |
-| `%X` | Hexadecimal integer (uppercase letters) |
-| `%e` | Exponential notation (with lowercase 'e') |
-| `%E` | Exponential notation (with uppercase 'E') |
-| `%f` | Floating point real number |
-| `%g` | The shorter of %f and %e |
-| `%G` | The shorter of %f and %E |
-
-### Python Triple Quotes
-
-Python triple quotes are used by allowing strings to span multiple lines, including literal NEWLINEs, TABs, and other special characters.
-The syntax for triple quotes consists of three single or double quotes written consecutively.
-Here is an example:
-
-```python
-triplequotes = """this is a long string that is made up of
-several lines and non-printable characters such as
-TAB( \t ) and they will show up that way when displayed.
-NEWLINEs within the string, whether explicitly given like
-this within the brackets [ \n ], or just a NEWLINE within
-the variable assignment will also show up.
-"""
-print(triplequotes)
-```
-
-### Python Unicode Strings
-
-In Python 3, all strings are represented in Unicode. Whereas in Python 2 they are stored internally as 8-bit ASCII, so 'u' prefix is required to make it Unicode. But this is no longer needed now.
-
-### Built-in String Methods
-
-Python includes the following built-in methods to manipulate strings:
-
-| Method | Explanation |
-| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `capitalize()` | Capitalizes first letter of string |
-| `center(width, fillchar)` | Returns a space-padded string with the original string centered to a total of width columns. |
-| `count(str, beg = 0,end = len(string))` | Counts how many times str occurs in string or in a substring of string if starting index beg and ending index end are given. |
-| `endswith(suffix, beg = 0, end = len(string))` | Determines if string or a substring of string (if starting index beg and ending index end are given) ends with suffix; returns true if so and false otherwise. |
-| `find(str, beg = 0 end = len(string))` | Determine if str occurs in string or in a substring of string if starting index beg and ending index end are given returns index if found and -1 otherwise. |
-| `index(str, beg = 0, end = len(string))` | Same as find(), but raises an exception if str not found. |
-| `isalnum()` | Returns true if string has at least 1 character and all characters are alphanumeric and false otherwise. |
-| `isalpha()` | Returns true if string has at least 1 character and all characters are alphabetic and false otherwise. |
-| `isdigit()` | Returns true if string contains only digits and false otherwise. |
-| `islower()` | Returns true if string has at least 1 cased character and all cased characters are in lowercase and false otherwise. |
-| `isnumeric()` | Returns true if a unicode string contains only numeric characters and false otherwise. |
-| `isspace()` | Returns true if string contains only whitespace characters and false otherwise. |
-| `istitle()` | Returns true if string is properly "titlecased" and false otherwise. |
-| `isupper()` | Returns true if string has at least one cased character and all cased characters are in uppercase and false otherwise. |
-| `join(seq)` | Merges (concatenates) the string representations of elements in sequence seq into a string, with separator string. |
-| `len(string)` | Returns the length of the string |
-| `ljust(width[, fillchar])` | Returns a space-padded string with the original string left-justified to a total of width columns. |
-| `lower()` | Converts all uppercase letters in string to lowercase. |
-| `lstrip()` | Removes all leading whitespace in string. |
-| `max(str)` | Returns the max alphabetic character from the string str. |
-| `min(str)` | Returns the min alphabetic character from the string str. |
-| `replace(old, new [, max])` | Replaces all occurrences of old in string with new or at most max occurrences if max given. |
-| `rfind(str, beg = 0,end = len(string))` | Same as find(), but search backwards in string. |
-| `rindex( str, beg = 0, end = len(string))` | Same as index(), but search backwards in string. |
-| `rjust(width,[, fillchar])` | Returns a space-padded string with the original string right-justified to a total of width columns. |
-| `rstrip()` | Removes all trailing whitespace of string. |
-| `split(str="", num=string.count(str))` | Splits string according to delimiter str (space if not provided) and returns list of substrings; split into at most num substrings if given. |
-| `splitlines( num=string.count('\n')) ` | Splits string at all (or num) NEWLINEs and returns a list of each line with NEWLINEs removed. |
-| `startswith(str, beg=0,end=len(string)` | Determines if string or a substring of string (if starting index beg and ending index end are given) starts with substring str; returns true if so and false otherwise. |
-| `strip([chars])` | Performs both lstrip() and rstrip() on string |
-| `swapcase()` | Inverts case for all letters in string. |
-| `title()` | Returns "titlecased" version of string, that is, all words begin with uppercase and the rest are lowercase. |
-| `upper()` | Converts lowercase letters in string to uppercase. |
-| `zfill(width)` | Returns original string left-padded with zeros to a total of width characters; intended for numbers, zfill() retains any sign given (less one zero). |
-| `isdecimal()` | Returns true if a unicode string contains only decimal characters and false otherwise. |
diff --git a/tutorial/basic/20-python-functions.md b/tutorial/basic/20-python-functions.md
deleted file mode 100644
index c5ad6ee..0000000
--- a/tutorial/basic/20-python-functions.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-layout: tutorial.njk
-title: Python Functions
-order: 20
-permalink: /tutorial/python-functions/
----
-
-<img src="/img/tutorial/17-belajar-fungsi-python-programming.webp" alt="Python Functions" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-A function is a block of organized, reusable code that is used to perform a single, related action. Functions provide better modularity for your application and a high degree of code reusing.
-
-### Defining Python Functions
-
-You can define functions to provide the required functionality. Here are simple rules to define a function in Python.
-
-- Function blocks begin with the keyword def followed by the function name and parentheses (()).
-- Any input parameters or arguments should be placed within these parentheses. You can also define parameters inside these parentheses.
-- The first statement of a function can be an optional statement - the documentation string of the function or docstring.
-- The code block within every function starts with a colon (:) and is indented.
-- The statement return [expression] exits a function, optionally passing back an expression to the caller. A return statement with no arguments is the same as return None.
-
-Example of function
-
-```python
-def printme( str ):
-  "This prints a passed string into this function"
-  print(str)
-  return
-```
diff --git a/tutorial/intermediate/22-python-modules.md b/tutorial/intermediate/22-python-modules.md
deleted file mode 100644
index 6e8871d..0000000
--- a/tutorial/intermediate/22-python-modules.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-layout: tutorial.njk
-title: Python Modules
-order: 22
-permalink: /tutorial/python-modules/
----
-
-<img src="/img/tutorial/18-modul-python.webp" alt="Python Modules" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-Modules allow you to organize your Python code logically. Grouping related code into a module makes the code easier to understand and use. A module is a Python object with arbitrarily named attributes that you can bind and reference.
-
-Simply put, a module is a file consisting of Python code. A module can define functions, classes and variables. A module can also include runnable code.
-
-Here is an example of a simple Python module:
-
-```python
-def print_func( par ):
-  print("Hello : ", par)
-  return
-```
-
-### Import Statement
-
-You can use any Python source file as a module by executing an import statement in some other Python source file. The import has the following syntax:
-
-When the interpreter encounters an import statement, it imports the module if the module is present in the search path. A search path is a list of directories that the interpreter searches before importing a module. For example, to import the module hello.py, you need to put the following command at the top of the script:
-
-```python
-# Import module support
-import support
-
-# You can call defined function as follows
-support.print_func("Andy")
-```
diff --git a/tutorial/intermediate/23-python-file-io.md b/tutorial/intermediate/23-python-file-io.md
deleted file mode 100644
index ad3b930..0000000
--- a/tutorial/intermediate/23-python-file-io.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-layout: tutorial.njk
-title: Python File I/O
-order: 23
-permalink: /tutorial/python-file-io/
----
-
-<img src="/img/tutorial/19-dasar-dasar-io-python.webp" alt="Python File I/O" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-Here we will learn all the basic I/O functions available in Python 3. If you want to learn more details, check out standard Python documentation.
-
-### Print
-
-The simplest way to produce output is using the print statement where you can pass zero or more expressions separated by commas. This function converts the expressions you pass into a string and writes the result to standard output as follows:
-
-```python
-print("Python is a great programming language")
-```
-
-### Reading Keyboard Input
-
-Python 2 has two built-in functions to read data from standard input, which by default comes from the keyboard. These functions are input() and raw_input()
-
-In Python 3, raw_input() function is deprecated. Moreover, input() functions read data from keyboard as string, irrespective of whether it is enclosed with quotes ('' or "") or not.
-
-### Python Input Function
-
-The input([prompt]) function is equivalent to raw_input, except that it assumes the input is a valid Python expression and returns the evaluated result to you.
-
-```python
->>> x = input("something:")
->>> something:10
-
->>> x
->>> '10'
-
->>> x = input("something:")
->>> something:'10' #entered data treated as string with or without ''
-
->>> x
->>> "'10'"
-```
diff --git a/tutorial/intermediate/24-python-exceptions.md b/tutorial/intermediate/24-python-exceptions.md
deleted file mode 100644
index a5326eb..0000000
--- a/tutorial/intermediate/24-python-exceptions.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-layout: tutorial.njk
-title: Python Exception
-order: 24
-permalink: /tutorial/python-exceptions/
----
-
-<img src="/img/tutorial/20-belajar-exception-python.webp" alt="Python Exceptions" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-Python provides two very important features to handle unexpected error in your Python programs and to add debugging capabilities in them.
-
-- Exception Handling
-- Assertions
-  An exception is an event, which occurs during the execution of a program that disrupts the normal flow of the program's instructions. In general, when a Python script encounters a situation that it cannot cope with, it raises an exception. An exception is a Python object that represents an error.
-
-When a Python script raises an exception, it must either handle the exception immediately otherwise it terminates and quits.
-
-### Standard Exceptions
-
-| Name | Explanation |
-| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Exception` | Base class for all exceptions |
-| `StopIteration ` | Raised when the next() method of an iterator does not point to any object. |
-| `SystemExit ` | Raised by sys.exit() function. |
-| `StandardError ` | Base class for all built-in exceptions except StopIteration and SystemExit. |
-| `ArithmeticError ` | Base class for all errors that occur for numeric calculation. |
-| `OverflowError ` | Raised when a calculation exceeds maximum limit for a numeric type. |
-| `FloatingPointError` | Raised when a floating point calculation fails. |
-| `ZeroDivisonError ` | Raised when division or modulo by zero is performed for all numeric types. |
-| `AssertionError` | Raised in case of failure of the Assert statement. |
-| `AttributeError` | Raised in case of failure of attribute reference or assignment. |
-| `EOFError` | Raised when there is no input from either the raw_input() or input() function and the end of file is reached. |
-| `ImportError ` | Raised when an import statement fails. |
-| `KeyboardInterrupt ` | Raised when the user interrupts program execution, usually by pressing Ctrl+c. |
-| `LookupError` | Base class for all lookup errors. |
-| `IndexError ` | Raised when an index is not found in a sequence. |
-| `KeyError ` | Raised when the specified key is not found in the dictionary. |
-| `NameError` | Raised when an identifier is not found in the local or global namespace. |
-| `UnboundLocalError` | Raised when trying to access a local variable in a function or method but no value has been assigned to it. |
-| `EnvironmentError` | Base class for all exceptions that occur outside the Python environment. |
-| `IOError` | Raised when an input/ output operation fails, such as the print statement or the open() function when trying to open a file that does not exist. |
-| `OSError` | Raised for operating system-related errors. |
-| `SyntaxError` | Raised when there is an error in Python syntax. |
-| `IndentationError` | Raised when indentation is not specified properly. |
-| `SystemError` | Raised when the interpreter finds an internal problem, but when this error is encountered the Python interpreter does not exit. |
-| `SystemExit ` | Raised when Python interpreter is quit by using the sys.exit() function. If not handled in the code, causes the interpreter to exit. |
-| `TypeError` | Raised when an operation or function is attempted that is invalid for the specified data type. |
-| `ValueError` | Raised when the built-in function for a data type has the valid type of arguments, but the arguments have invalid values specified. |
-| `RuntimeError` | Raised when a generated error does not fall into any category. |
-| `NotImplementedError` | Raised when an abstract method that needs to be implemented in an inherited class is not actually implemented. |
diff --git a/tutorial/intermediate/25-python-class-objects.md b/tutorial/intermediate/25-python-class-objects.md
deleted file mode 100644
index 2eb3c98..0000000
--- a/tutorial/intermediate/25-python-class-objects.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-layout: tutorial.njk
-title: Python Object & Class
-order: 25
-permalink: /tutorial/python-class-objects/
----
-
-<img src="/img/tutorial/21-belajar-oop-object-class-python.webp" alt="Python OOP - Object and Class" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-Python has been an object-oriented language since it existed. Creating and using classes and objects are downright easy. This tutorial will help you become an expert in using Python's object-oriented programming support.
-
-If you do not have any prior experience with object-oriented programming (OOP), you may want to consult an introductory course on it or at least a tutorial of some sort so that you have a grasp of the basic concepts.
-
-If you understand the basic concepts of OOP here is an introduction of Object-Oriented Programming (OOP) to help you.
-
-### Terminology in OOP
-
-| Term | Explanation |
-| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Class | A user-defined prototype for an object that defines a set of attributes that characterize any object of the class. The attributes are data members (class variables and instance variables) and methods, accessed via dot notation. |
-| Class variable | A variable that is shared by all instances of a class. Class variables are defined within a class but outside any of the class's methods. Class variables are not used as frequently as instance variables are. |
-| Data member | A class variable or instance variable that holds data associated with a class and its objects. |
-| Function overloading | The assignment of more than one behavior to a particular function. The operation performed varies by the types of objects or arguments involved. |
-| Instance variable | A variable that is defined inside a method and belongs only to the current instance of a class. |
-| Inheritance | The transfer of the characteristics of a class to other classes that are derived from it. |
-| Instance | An individual object of a certain class. An object obj that belongs to a class Circle, for example, is an instance of the class Circle. |
-| Instantiation | The creation of an instance of a class. |
-| Method | A special kind of function that is defined in a class definition. |
-| Object | A unique instance of a data structure that's defined by its class. An object comprises both data members (class variables and instance variables) and methods. |
-| Operator overloading | The assignment of more than one function to a particular operator. |
-
-### Creating Python Class
-
-The class statement is used to create a new class definition. The name of the class immediately follows the keyword class followed by a colon as follows:
-
-`class ClassName:` `'Optional class documentation string'` `class_suite`
-
-Here is an example of creating a simple Python class:
-
-```python
-class Employee:
-  'Common base class for all employees'
-  empCount = 0
-
-  def __init__(self, name, salary):
-    self.name = name
-    self.salary = salary
-    Employee.empCount += 1
-
-  def displayCount(self):
-    print("Total Employee %d" % Employee.empCount)
-
-  def displayEmployee(self):
-    print("Name : ", self.name, ", Salary: ", self.salary)
-```
-
-### Creating Instance Objects
-
-To create instances of a class, you call the class using class name and pass in whatever arguments its `__init__` method accepts.
-
-```python
-# This would create first object of Employee class
-emp1 = Employee("Zara", 2000)
-# This would create second object of Employee class
-emp2 = Employee("Manni", 5000)
-```
-
-### Accessing Attributes
-
-You access the object's attributes using the dot operator with object. Class variable would be accessed using class name as follows:
-
-```python
-emp1.displayEmployee()
-emp2.displayEmployee()
-print("Total Employee %d" % Employee.empCount)
-```
-
-For the complete example, please see the code below.
-
-```python
-class Employee:
-  'Common base class for all employees'
-  empCount = 0
-
-  def __init__(self, name, salary):
-    self.name = name
-    self.salary = salary
-    Employee.empCount += 1
-
-  def displayCount(self):
-    print("Total Employee %d" % Employee.empCount)
-
-  def displayEmployee(self):
-    print("Name : ", self.name, ", Salary: ", self.salary)
-
-#This would create first object of Employee class"
-emp1 = Employee("Zara", 2000)
-#This would create second object of Employee class"
-emp2 = Employee("Manni", 5000)
-emp1.displayEmployee()
-emp2.displayEmployee()
-print("Total Employee %d" % Employee.empCount)
-```
diff --git a/tutorial/intermediate/26-python-database-access.md b/tutorial/intermediate/26-python-database-access.md
deleted file mode 100644
index 310462b..0000000
--- a/tutorial/intermediate/26-python-database-access.md
+++ /dev/null
@@ -1,290 +0,0 @@
----
-layout: tutorial.njk
-title: Python Database Access
-order: 26
-permalink: /tutorial/python-database-access/
----
-
-<img src="/img/tutorial/22-cara-akses-database-mysql-sql-postgres-python.webp" alt="Python Database Access - MySQL, SQL, Postgres" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-The Python standard interface for databases is the Python DB-API. Most Python database interfaces adhere to this standard.
-
-You can select the right database for your application. Python Database API supports a wide range of database servers such as:
-- GadFly
-- mSQL
-- MySQL
-- PostgreSQL
-- Microsoft SQL Server 2000
-- Informix
-- Interbase
-- Oracle
-- Sybase
-- SQLite
-
-You must download a separate DB API module for each database you need to access. For example, if you need to access an Oracle database as well as a MySQL database, you must download both the Oracle and MySQL database modules.
-
-The DB API provides a minimal standard for working with databases using Python structures and syntax wherever possible. This API includes:
-
-- Importing the API module.
-- Acquiring a connection with the database.
-- Issuing SQL statements and stored procedures.
-- Closing the connection
-
-Python has built-in support for SQLite. In this section, we will learn all concepts using MySQL. MySQLdb module, a popular interface with MySQL represents non-compatibility with Python 3. Instead, we'll use PyMySQL module.
-
-### What is PyMySQL?
-
-PyMySQL is an interface for connecting to a MySQL database server from Python. It implements the Python Database API v2.0 and contains a pure-Python MySQL client library. The goal of PyMySQL is to be a drop-in replacement for MySQLdb. You can see the full documentation on using PyMySQL at [https://pymysql.readthedocs.io/en/latest/](https://pymysql.readthedocs.io/en/latest/).
-
-### How to Install PyMySQL
-
-Before proceeding, make sure you have PyMySQL installed on your machine. Just type the following in your Python script and execute it.
-
-`import pymysql.cursors`
-
-If it produces the following result, it means the MySQLdb module is not installed:
-
-`Traceback(most recent call last):`
-    `File "test.py", line 3, in `
-        `Import PyMySQL`
-`ImportError: No module named PyMySQL`
-
-To install PyMySQL module please use the following command/instruction in command prompt:
-
-`python -m pip install PyMySQL`
-
-### Database Connection
-
-Before connecting to a MySQL database, make sure of the following points below:
-
-- You have created a database TESTDB.
-- You have created a table EMPLOYEE in TESTDB.
-- This table has fields FIRST_NAME, LAST_NAME, AGE, SEX, and INCOME.
-- User ID "testuser" and password "test123" are set to access TESTDB.
-- Python module PyMySQL is installed properly on your machine.
-- You have gone through MySQL tutorial to understand MySQL Basics
-
-Below is an example of connection with MySQL database "TESTDB"
-
-```python
-import pymysql.cursors
-
-# Open database connection
-db = pymysql.connect("localhost","testuser","test123","TESTDB" )
-
-# prepare a cursor object using cursor() method
-cursor = db.cursor()
-
-# execute SQL query using execute() method.
-cursor.execute("SELECT VERSION()")
-
-# Fetch a single row using fetchone() method.
-data = cursor.fetchone()
-
-print("Database version : %s " % data)
-
-# disconnect from server
-db.close()
-```
-
-### Creating Database Table
-
-```python
-import pymysql.cursors
-
-# Open database connection
-db = pymysql.connect("localhost","testuser","test123","TESTDB" )
-
-# prepare a cursor object using cursor() method
-cursor = db.cursor()
-
-# Drop table if it already exist using execute() method.
-cursor.execute("DROP TABLE IF EXISTS EMPLOYEE")
-
-# Create table as per requirement
-sql = """CREATE TABLE EMPLOYEE(
-   FIRST_NAME  CHAR(20) NOT NULL,
-   LAST_NAME  CHAR(20),
-   AGE INT,
-   SEX CHAR(1),
-   INCOME FLOAT )"""
-
-cursor.execute(sql)
-
-# disconnect from server
-db.close()
-```
-
-### Insert Operation
-
-The following example executes SQL INSERT statement to create a record into EMPLOYEE table
-
-```python
-import pymysql.cursors
-
-# Open database connection
-db = pymysql.connect("localhost","testuser","test123","TESTDB" )
-
-# prepare a cursor object using cursor() method
-cursor = db.cursor()
-
-# Prepare SQL query to INSERT a record into the database.
-sql = """INSERT INTO EMPLOYEE(FIRST_NAME,
-   LAST_NAME, AGE, SEX, INCOME)
-   VALUES('Mac', 'Mohan', 20, 'M', 2000)"""
-try:
-   # Execute the SQL command
-   cursor.execute(sql)
-   # Commit your changes in the database
-   db.commit()
-except:
-   # Rollback in case there is any error
-   db.rollback()
-
-# disconnect from server
-db.close()
-```
-
-The example above can be written as follows to create SQL queries dynamically
-
-```python
-import pymysql.cursors
-
-# Open database connection
-db = pymysql.connect("localhost","testuser","test123","TESTDB" )
-
-# prepare a cursor object using cursor() method
-cursor = db.cursor()
-
-# Prepare SQL query to INSERT a record into the database.
-sql = "INSERT INTO EMPLOYEE(FIRST_NAME, \
-   LAST_NAME, AGE, SEX, INCOME) \
-   VALUES('%s', '%s', '%d', '%c', '%d' )" % \
-   ('Mac', 'Mohan', 20, 'M', 2000)
-try:
-   # Execute the SQL command
-   cursor.execute(sql)
-   # Commit your changes in the database
-   db.commit()
-except:
-   # Rollback in case there is any error
-   db.rollback()
-
-# disconnect from server
-db.close()
-```
-
-### Read Operation
-
-READ Operation on any database means to fetch some useful information from the database.
-
-Once a database connection is established, you are ready to make a query into this database. You can use fetchone() method to fetch a single record or fetchall() method to fetch multiple values from a database table.
-
-Fetchone() - This fetches the next row of a query result set. A result set is an object that is returned when a cursor object is used to query a table.
-
-Fetchall() - This fetches all the rows in a result set. If some rows have already been extracted from the result set, the remaining rows are retrieved from the result set.
-
-Rowcount - This is a read-only attribute and returns the number of rows that were affected by an execute() method.
-
-The following procedure queries all records from EMPLOYEE table having salary more than 1000
-
-```python
-import pymysql.cursors
-
-# Open database connection
-db = pymysql.connect("localhost","testuser","test123","TESTDB" )
-
-# prepare a cursor object using cursor() method
-cursor = db.cursor()
-
-# Prepare SQL query to INSERT a record into the database.
-sql = "SELECT * FROM EMPLOYEE \
-       WHERE INCOME > '%d'" % (1000)
-try:
-   # Execute the SQL command
-   cursor.execute(sql)
-   # Fetch all the rows in a list of lists.
-   results = cursor.fetchall()
-   for row in results:
-      fname = row[0]
-      lname = row[1]
-      age = row[2]
-      sex = row[3]
-      income = row[4]
-      # Now print fetched result
-      print("fname = %s,lname = %s,age = %d,sex = %s,income = %d" % \
-             (fname, lname, age, sex, income ))
-except:
-   print("Error: unable to fetch data")
-
-# disconnect from server
-db.close()
-```
-
-After you execute the code above, result will appear as below :
-`fname = Mac, lname = Mohan, age = 20, sex = M, income = 2000`
-
-### Update Operation
-
-UPDATE Operation on any database means to update one or more records, which are already available in the database.
-The following procedure updates all the records having SEX as 'M'. Here, we increase AGE of all the males by one year.
-
-```python
-import pymysql.cursors
-
-# Open database connection
-db = pymysql.connect("localhost","testuser","test123","TESTDB" )
-
-# prepare a cursor object using cursor() method
-cursor = db.cursor()
-
-# Prepare SQL query to UPDATE required records
-sql = "UPDATE EMPLOYEE SET AGE = AGE + 1 WHERE SEX = '%c'" % ('M')
-try:
-   # Execute the SQL command
-   cursor.execute(sql)
-   # Commit your changes in the database
-   db.commit()
-except:
-   # Rollback in case there is any error
-   db.rollback()
-
-# disconnect from server
-db.close()
-```
-
-### Delete Operation
-
-DELETE Operation is required when you want to delete some records from your database. Following is the procedure to delete all records from EMPLOYEE where AGE is more than 20.
-
-```python
-import pymysql.cursors
-
-# Open database connection
-db = pymysql.connect("localhost","testuser","test123","TESTDB" )
-
-# prepare a cursor object using cursor() method
-cursor = db.cursor()
-
-# Prepare SQL query to DELETE required records
-sql = "DELETE FROM EMPLOYEE WHERE AGE > '%d'" % (20)
-try:
-   # Execute the SQL command
-   cursor.execute(sql)
-   # Commit your changes in the database
-   db.commit()
-except:
-   # Rollback in case there is any error
-   db.rollback()
-
-# disconnect from server
-db.close()
-```
-
-Also there are several other operations as follows :
-
-- Commit Operation db.commit()
-- Rollback Operation db.rollback()
-- Disconnect Operation db.close()
-
-If you want more complete documentation of python programming language, please open official documentation from Python - [Full Python Documentation](https://docs.python.org/3/)
diff --git a/tutorial/intermediate/27-python-networking.md b/tutorial/intermediate/27-python-networking.md
deleted file mode 100644
index 1aa6de5..0000000
--- a/tutorial/intermediate/27-python-networking.md
+++ /dev/null
@@ -1,130 +0,0 @@
----
-layout: tutorial.njk
-title: Python Networking
-order: 27
-permalink: /tutorial/python-networking/
----
-
-<img src="/img/tutorial/23-tutorial-networking-python.webp" alt="Python Networking Tutorial" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-Python provides two levels of access to network services. At a low level, you can access the basic socket support in the underlying operating system, which allows you to implement clients and servers for both connection-oriented and connectionless protocols.
-
-Python also has libraries that provide higher-level access to specific application-level network protocols, such as FTP, HTTP, and so on.
-
-This chapter gives you understanding on most famous concept in Networking - Socket Programming.
-
-### What is Socket?
-
-Sockets are the endpoints of a bidirectional communications channel. Sockets may communicate within a process, between processes on the same machine, or between processes on different continents.
-
-Sockets may be implemented over a number of different channel types: Unix domain sockets, TCP, UDP, and so on. The socket library provides specific classes for handling the common transports as well as a generic interface for handling the rest.
-
-### Socket Module
-
-To create a socket, you must use the socket.socket() function available in socket module, which has the general syntax:
-
-`s = socket.socket(socket_family, socket_type, protocol=0)`
-
-### Server Socket Method
-
-| Method | Explanation |
-| ---------- | ----------------------------------------------------------------------------------------- |
-| s.bind() | This method binds address (hostname, port number pair) to socket. |
-| s.listen() | This method sets up and start TCP listener. |
-| s.accept() | This passively accept TCP client connection, waiting until connection arrives (blocking). |
-
-### Client Socket Method
-
-| Method | Explanation |
-| ----------- | ----------------------------------------------------- |
-| s.connect() | This method actively initiates TCP server connection. |
-
-## General Socket Methods
-
-| Method | Explanation |
-| -------------------- | --------------------------------- |
-| s.recv() | This method receives TCP message |
-| s.send() | This method transmits TCP message |
-| s.recvfrom() | This method receives UDP message |
-| s.sendto() | This method transmits UDP message |
-| s.close() | This method closes socket |
-| socket.gethostname() | Returns the hostname. |
-
-```python
-#!/usr/bin/python # This is server.py file
-
-import socket # Import socket module
-
-s = socket.socket() # Create a socket object
-host = socket.gethostname() # Get local machine name
-port = 12345 # Reserve a port for your service.
-s.bind((host, port)) # Bind to the port
-
-s.listen(5) # Now wait for client connection.
-while True:
-  c, addr = s.accept() # Establish connection with client.
-  print('Got connection from', addr)
-  c.send('Thank you for connecting')
-  c.close() # Close the connection
-```
-
-### Simple Server
-
-To write an Internet server, we use the socket function available in socket module to create a socket object. The socket object is then used to call other functions to setup a socket server.
-
-Now call `bind(hostname,port)` function to specify a port for your service on the given host.
-
-Next, call the accept method of the returned object. This method waits until a client connects to the port you specified, and then returns a connection object that represents the connection to that client.
-
-### Simple Client
-
-Let us write a very simple client program which opens a connection to a given port 12345 and a given host. This is very simple to create a socket client using the Python's socket module function.
-
-The socket.connect(hostname, port) opens a TCP connection to hostname on the port. Once you have a socket open, you can read from it like any IO object. When done, do not forget to close it, as you would close a file.
-
-The following code is a very simple client that connects to a given host and port, reads any available data from the socket, and then exits:
-
-```python
-#!/usr/bin/python # This is client.py file
-
-import socket # Import socket module
-
-s = socket.socket() # Create a socket object
-host = socket.gethostname() # Get local machine name
-port = 12345 # Reserve a port for your service.
-
-s.connect((host, port))
-print(s.recv(1024))
-s.close # Close the socket when done
-```
-
-Now run this server.py in background and then run above client.py to see the result.
-
-##### Run server:
-
-`python server.py &`
-
-After server runs, continue
-
-##### Run client:
-
-`python client.py`
-
-The result will be like this :
-`Got connection from ('127.0.0.1', 48437)`
-`Thank you for connecting`
-
-### Python Internet Modules
-
-Here is a list of some important modules in Python Network / Internet programming.
-
-| Protocol | Common function | Port No | Python module |
-| -------- | ------------------ | ------- | -------------------------- |
-| HTTP | Web pages | 80 | httplib, urllib, xmlrpclib |
-| NNTP | Usenet news | 119 | nntplib |
-| FTP | File transfer | 20 | ftplib, urllib |
-| SMTP | Sending email | 25 | smtplib |
-| POP3 | Fetching email | 110 | poplib |
-| IMAP4 | Fetching email | 143 | imaplib |
-| Telnet | Command lines | 23 | telnetlib |
-| Gopher | Document transfers | 70 | gopherlib, urllib |
diff --git a/tutorial/intermediate/31-python-virtual-environment.md b/tutorial/intermediate/31-python-virtual-environment.md
deleted file mode 100644
index 301a504..0000000
--- a/tutorial/intermediate/31-python-virtual-environment.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-layout: tutorial.njk
-title: Python Virtual Environments (venv)
-order: 31
-permalink: /tutorial/python-virtual-environment/
----
-
-<img src="/img/tutorial/27-tutorial-virtual-environtment-python.webp" alt="Python Virtual Environment" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-A Virtual Environment is an isolated workspace that allows you to install libraries specific to one project without interfering with other projects. Imagine it like having several different toolboxes for every different home repair job.
-
-For beginners, Virtual Environment is crucial because often one project requires different package versions than another project. Without a virtual environment, you risk breaking running programs by installing new packages. By using a virtual environment, your computer system stays clean and every project only has access to the tools it truly needs.
-
-There are several ways to create a Virtual Environment in Python. Let's discuss the most common ones and the newest ones.
-
-### Using Built-in Module: venv
-
-Python comes equipped with `venv` module. This is the most common and standard way.
-
-#### 1. How to Create venv
-
-Open terminal or command prompt in your project directory, then run:
-
-```bash
-# Windows
-python -m venv myenv
-
-# macOS / Linux
-python3 -m venv myenv
-```
-
-`myenv` is the name of the folder that will contain your virtual environment.
-
-#### 2. How to Activate venv
-
-Once created, you must activate it:
-
-```bash
-# Windows
-myenv\Scripts\activate
-
-# macOS / Linux
-source myenv/bin/activate
-```
-
-Once active, you will see `(myenv)` in front of your terminal prompt.
-
-#### 3. How to Deactivate
-
-To exit from the virtual environment, simply type:
-
-```bash
-deactivate
-```
-
----
-
-### Modern Option: uv from Astral
-
-If you want something much faster and modern, **uv** is the best choice right now. `uv` is a Python package and environment manager written in Rust, which speed is 10x to 100x faster than traditional tools.
-
-#### 1. Installing uv
-
-If you don't have it yet, install it first (using pip or official installer):
-
-```bash
-pip install uv
-```
-
-#### 2. Creating and Using Environment with uv
-
-`uv` makes environment management highly automated:
-
-```bash
-# Create environment
-uv venv
-
-# Activate(same as normal venv)
-.venv\Scripts\activate # Windows
-source .venv/bin/activate # macOS/Linux
-
-# Install packages very fast
-uv pip install requests
-```
-
-One of `uv`'s advantages is its ability to manage Python versions itself without needing to manually install from Python website.
-
-### Importance in the Professional World
-
-In the professional work world, Virtual Environment is no longer an option, but a mandatory standard. When working in large teams or managing systems on *cloud* servers, you must ensure that the application you build has a clear dependency list and does not clash with other applications. This ensures the principle of *reproducibility*, where your colleagues can run the exact same code with the exact same results on their computers.
-
-Additionally, Virtual Environment facilitates the *deployment* process. When the application is ready to be shipped to production server, you simply provide the list of packages (usually in `requirements.txt` file) that are inside that virtual environment. Without this tool, moving code from developer's computer to server would be a technical nightmare full of errors due to library version differences.
diff --git a/tutorial/intermediate/32-python-pip-package.md b/tutorial/intermediate/32-python-pip-package.md
deleted file mode 100644
index 626f129..0000000
--- a/tutorial/intermediate/32-python-pip-package.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-layout: tutorial.njk
-title: Pip & Package Management Python
-order: 32
-permalink: /tutorial/python-pip-package/
----
-
-<img src="/img/tutorial/28-cara-pip-di-python.webp" alt="Python Pip and Packages" class="w-full rounded-lg shadow-md mb-6" loading="lazy">
-
-Pip is the standard package manager for Python. Imagine Pip like an "App Store" (App Store or Play Store) specifically for Python programming language, where you can download and install thousands of additional modules created by the Python community worldwide.
-
-For beginners, Pip is the gateway to Python's greatness. For example, if you want to create beautiful charts, perform complex data analysis, or even create a website, you don't need to write everything from scratch. You simply use Pip to install ready-made "packages", and you can immediately focus on building your application.
-
-### What is a Package?
-
-A Package contains all the files you need for a module. A module is a Python code library that you can include in your project.
-
-### Check if Pip is Installed
-
-Pip is usually installed along with Python. To check if pip is installed, run the following command in terminal:
-
-```bash
-pip --version
-```
-
-### Installing Packages
-
-Installing packages is very easy. Simply use the `install` command followed by the package name. For example we will install a popular package named `requests`:
-
-```bash
-pip install requests
-```
-
-### Using Packages
-
-Once the package is installed, you can use it in your Python code with the `import` command:
-
-```python
-import requests
-
-x = requests.get('https://belajarpython.com')
-print(x.status_code)
-```
-
-### Viewing Installed Packages List
-
-Use the `list` command to see all packages that already exist in your system or environment:
-
-```bash
-pip list
-```
-
-### Removing Packages
-
-If you no longer need a package, you can uninstall it:
-
-```bash
-pip uninstall requests
-```
-
-### Searching Packages on PyPI
-
-All Python packages are centrally managed at the [PyPI (Python Package Index)](https://pypi.org/) site. You can search for thousands of useful packages there before installing them using Pip.