From e01dd280294a3888c9b17a7ce6d8c7bce7a62078 Mon Sep 17 00:00:00 2001
From: Alex Sim <alessandro.simula@lynxspa.com>
Date: Mon, 30 Mar 2026 01:26:14 +0200
Subject: [PATCH] WEBPAGE - first upload

---
 docs/.gitignore                    |    6 +
 docs/Gemfile                       |    8 +
 docs/_config.yml                   |   27 +
 docs/_includes/footer.html         |   24 +
 docs/_includes/nav.html            |   22 +
 docs/_layouts/default.html         |   33 +
 docs/_layouts/page.html            |   18 +
 docs/assets/css/style.css          | 1134 ++++++++++++++++++++++++++++
 docs/assets/img/ic_bestfeature.svg |   26 +
 docs/assets/img/ic_clippy.svg      |    6 +
 docs/assets/js/github-api.js       |  199 +++++
 docs/assets/js/theme.js            |   47 ++
 docs/download.md                   |   38 +
 docs/index.md                      |  114 +++
 14 files changed, 1702 insertions(+)
 create mode 100644 docs/.gitignore
 create mode 100644 docs/Gemfile
 create mode 100644 docs/_config.yml
 create mode 100644 docs/_includes/footer.html
 create mode 100644 docs/_includes/nav.html
 create mode 100644 docs/_layouts/default.html
 create mode 100644 docs/_layouts/page.html
 create mode 100644 docs/assets/css/style.css
 create mode 100644 docs/assets/img/ic_bestfeature.svg
 create mode 100644 docs/assets/img/ic_clippy.svg
 create mode 100644 docs/assets/js/github-api.js
 create mode 100644 docs/assets/js/theme.js
 create mode 100644 docs/download.md
 create mode 100644 docs/index.md

diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 000000000..5bc8199d3
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,6 @@
+_site/
+.jekyll-cache/
+.jekyll-metadata/
+.sass-cache/
+vendor/
+Gemfile.lock
diff --git a/docs/Gemfile b/docs/Gemfile
new file mode 100644
index 000000000..ba49e7331
--- /dev/null
+++ b/docs/Gemfile
@@ -0,0 +1,8 @@
+source 'https://rubygems.org'
+
+gem 'github-pages', group: :jekyll_plugins
+
+group :jekyll_plugins do
+  gem 'jekyll-seo-tag'
+  gem 'jekyll-sitemap'
+end
diff --git a/docs/_config.yml b/docs/_config.yml
new file mode 100644
index 000000000..ad61d0707
--- /dev/null
+++ b/docs/_config.yml
@@ -0,0 +1,27 @@
+title: Murine Launcher
+description: >-
+  A modern, lightweight FOSS Launcher3 fork delivering an enhanced stock Android
+  experience with essential customization and zero bloat.
+url: "https://alesimula.github.io"
+baseurl: ""
+
+github_repo: "alesimula/Murine-launcher"
+icon_url: "https://raw.githubusercontent.com/alesimula/Murine-launcher/refs/heads/main/image/app_icon/icon_browser_fullsize.svg"
+screenshots_api: "https://api.github.com/repos/alesimula/Murine-launcher/contents/fastlane/metadata/android/en-US/images/phoneScreenshots"
+releases_api: "https://api.github.com/repos/alesimula/Murine-launcher/releases"
+
+permalink: pretty
+
+markdown: kramdown
+kramdown:
+  input: GFM
+
+plugins:
+  - jekyll-seo-tag
+  - jekyll-sitemap
+
+exclude:
+  - Gemfile
+  - Gemfile.lock
+  - node_modules
+  - vendor
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
new file mode 100644
index 000000000..339e5b806
--- /dev/null
+++ b/docs/_includes/footer.html
@@ -0,0 +1,24 @@
+<footer class="site-footer">
+  <div class="footer-inner">
+    <div class="footer-brand">
+      <img src="{{ site.icon_url }}" alt="Murine Launcher" class="footer-icon">
+      <div>
+        <div class="footer-name">Murine Launcher</div>
+        <div class="footer-tagline">{{ site.description }}</div>
+      </div>
+    </div>
+    <div class="footer-links">
+      <a href="https://github.com/{{ site.github_repo }}" class="footer-link" target="_blank" rel="noopener">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+        GitHub
+      </a>
+      <a href="https://www.paypal.com/donate/?hosted_button_id=3HRAWU9KVYKKS" class="footer-link" target="_blank" rel="noopener">
+        <span class="material-symbols-outlined" style="font-size:20px">favorite</span>
+        Donate
+      </a>
+    </div>
+    <div class="footer-copy">
+      &copy; {{ 'now' | date: "%Y" }} Murine Launcher &middot; Licensed under Apache 2.0
+    </div>
+  </div>
+</footer>
diff --git a/docs/_includes/nav.html b/docs/_includes/nav.html
new file mode 100644
index 000000000..7b29b353d
--- /dev/null
+++ b/docs/_includes/nav.html
@@ -0,0 +1,22 @@
+<nav class="top-nav" id="topNav">
+  <div class="nav-inner">
+    <a href="{{ '/' | relative_url }}" class="nav-brand">
+      <img src="{{ site.icon_url }}" alt="Murine Launcher" class="nav-icon">
+      <span class="nav-title">Murine Launcher</span>
+    </a>
+
+    <div class="nav-actions">
+      <a href="{{ '/' | relative_url }}" class="nav-link {% if page.url == '/' or page.url == '/index.html' %}active{% endif %}">
+        <span class="material-symbols-outlined">home</span>
+        <span class="nav-link-label">Home</span>
+      </a>
+      <a href="{{ '/download' | relative_url }}" class="nav-pill {% if page.url contains 'download' %}active{% endif %}">
+        <span class="material-symbols-outlined">download</span>
+        <span class="nav-link-label">Download</span>
+      </a>
+      <button class="nav-icon-btn" id="themeToggle" aria-label="Toggle theme">
+        <span class="material-symbols-outlined" id="themeIcon">dark_mode</span>
+      </button>
+    </div>
+  </div>
+</nav>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
new file mode 100644
index 000000000..4a1109255
--- /dev/null
+++ b/docs/_layouts/default.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
+  <meta name="description" content="{{ page.description | default: site.description }}">
+
+  <!-- Google Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <!-- Material Symbols -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap">
+
+  <link rel="icon" type="image/svg+xml" href="{{ site.icon_url }}">
+  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
+
+  {% seo %}
+</head>
+<body>
+  {% include nav.html %}
+
+  <main class="main-content">
+    {{ content }}
+  </main>
+
+  {% include footer.html %}
+
+  <script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/github-api.js' | relative_url }}"></script>
+</body>
+</html>
diff --git a/docs/_layouts/page.html b/docs/_layouts/page.html
new file mode 100644
index 000000000..7a353f461
--- /dev/null
+++ b/docs/_layouts/page.html
@@ -0,0 +1,18 @@
+---
+layout: default
+---
+
+<div class="page-container">
+  {% if page.title %}
+  <div class="page-header">
+    <h1>{{ page.title }}</h1>
+    {% if page.subtitle %}
+    <p class="subtitle">{{ page.subtitle }}</p>
+    {% endif %}
+  </div>
+  {% endif %}
+
+  <div class="page-body">
+    {{ content }}
+  </div>
+</div>
diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
new file mode 100644
index 000000000..e1fc120b6
--- /dev/null
+++ b/docs/assets/css/style.css
@@ -0,0 +1,1134 @@
+/* --- Color Tokens (Light) --- */
+:root,
+[data-theme="light"] {
+  --md-primary: #962CA0;
+  --md-on-primary: #FFFFFF;
+  --md-primary-container: #F8DDF8;
+  --md-on-primary-container: #350040;
+  --md-secondary: #8C4572;
+  --md-on-secondary: #FFFFFF;
+  --md-secondary-container: #FFD8EC;
+  --md-on-secondary-container: #3A0029;
+  --md-tertiary: #BE5050;
+  --md-on-tertiary: #FFFFFF;
+  --md-tertiary-container: #FFDCE0;
+  --md-on-tertiary-container: #400008;
+  --md-error: #BA1A1A;
+  --md-on-error: #FFFFFF;
+  --md-surface: #FEF7FF;
+  --md-on-surface: #1D1A20;
+  --md-on-surface-variant: #4A4458;
+  --md-surface-container-lowest: #FFFFFF;
+  --md-surface-container-low: #F8F0FA;
+  --md-surface-container: #F2EAF4;
+  --md-surface-container-high: #ECE4EF;
+  --md-surface-container-highest: #E6DEE9;
+  --md-outline: #7B7486;
+  --md-outline-variant: #CBC3D4;
+  --md-inverse-surface: #322F37;
+  --md-inverse-on-surface: #F5EFF6;
+  --md-hero-wash: #FBE0E2;
+  --md-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
+  --md-shadow-lg: 0 6px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
+  --md-shadow-xl: 0 12px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
+
+  /* Expressive shape */
+  --md-shape-xs: 4px;
+  --md-shape-sm: 8px;
+  --md-shape-md: 16px;
+  --md-shape-lg: 24px;
+  --md-shape-xl: 28px;
+  --md-shape-xxl: 32px;
+  --md-shape-full: 9999px;
+
+  /* Motion */
+  --md-motion-standard: cubic-bezier(0.2, 0, 0, 1);
+  --md-motion-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --md-motion-duration-short: 200ms;
+  --md-motion-duration-medium: 350ms;
+  --md-motion-duration-long: 500ms;
+}
+
+/* --- Color Tokens (Dark) --- */
+[data-theme="dark"] {
+  --md-primary: #ECC4F2;
+  --md-on-primary: #520088;
+  --md-primary-container: #A52DAF;
+  --md-on-primary-container: #F8DDF8;
+  --md-secondary: #F8B4DA;
+  --md-on-secondary: #541D42;
+  --md-secondary-container: #7E4465;
+  --md-on-secondary-container: #FFD8EC;
+  --md-tertiary: #FFB8B8;
+  --md-on-tertiary: #5E1520;
+  --md-tertiary-container: #C1556A;
+  --md-on-tertiary-container: #FFDCE0;
+  --md-error: #FFB4AB;
+  --md-on-error: #690005;
+  --md-surface: #15121A;
+  --md-on-surface: #E8E0E9;
+  --md-on-surface-variant: #CBC3D4;
+  --md-surface-container-lowest: #100D14;
+  --md-surface-container-low: #1D1A22;
+  --md-surface-container: #221F27;
+  --md-surface-container-high: #2C2931;
+  --md-surface-container-highest: #37343C;
+  --md-outline: #958E9E;
+  --md-outline-variant: #4A4458;
+  --md-inverse-surface: #E8E0E9;
+  --md-inverse-on-surface: #322F37;
+  --md-hero-wash: #3B2E35;
+  --md-shadow: 0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.24);
+  --md-shadow-lg: 0 6px 16px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.20);
+  --md-shadow-xl: 0 12px 32px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.20);
+}
+
+/* --- Reset & Base --- */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, sans-serif;
+  background: var(--md-surface);
+  color: var(--md-on-surface);
+  line-height: 1.6;
+  transition: background var(--md-motion-duration-medium) var(--md-motion-standard),
+              color var(--md-motion-duration-medium) var(--md-motion-standard);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+a { color: var(--md-primary); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+img { max-width: 100%; height: auto; }
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Inter', 'Noto Sans', system-ui, sans-serif;
+  color: var(--md-on-surface);
+  line-height: 1.25;
+}
+
+/* --- Top Navigation Bar --- */
+.top-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: var(--md-surface-container);
+  border-bottom: 1px solid var(--md-outline-variant);
+  transition: background var(--md-motion-duration-medium) var(--md-motion-standard),
+              box-shadow var(--md-motion-duration-short) var(--md-motion-standard);
+}
+
+.top-nav.scrolled {
+  box-shadow: var(--md-shadow);
+}
+
+.nav-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+  color: var(--md-on-surface);
+  flex-shrink: 0;
+}
+
+.nav-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--md-shape-sm);
+}
+
+.nav-title {
+  font-family: 'Inter', 'Noto Sans', sans-serif;
+  font-size: 1.15rem;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: var(--md-shape-full);
+  color: var(--md-on-surface-variant);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background var(--md-motion-duration-short) var(--md-motion-standard),
+              color var(--md-motion-duration-short) var(--md-motion-standard);
+  white-space: nowrap;
+}
+
+.nav-link .material-symbols-outlined { font-size: 20px; }
+
+.nav-link:hover {
+  background: var(--md-surface-container-high);
+  text-decoration: none;
+  color: var(--md-on-surface);
+}
+
+.nav-link.active {
+  background: var(--md-secondary-container);
+  color: var(--md-on-secondary-container);
+}
+
+/* Download pill - prominent */
+.nav-pill {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 20px;
+  border-radius: var(--md-shape-full);
+  background: var(--md-tertiary);
+  color: var(--md-on-tertiary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background var(--md-motion-duration-short) var(--md-motion-standard),
+              box-shadow var(--md-motion-duration-short) var(--md-motion-standard),
+              transform var(--md-motion-duration-short) var(--md-motion-standard);
+  white-space: nowrap;
+}
+
+.nav-pill .material-symbols-outlined { font-size: 20px; }
+
+.nav-pill:hover {
+  box-shadow: var(--md-shadow);
+  text-decoration: none;
+  transform: translateY(-1px);
+}
+
+.nav-pill.active {
+  background: var(--md-tertiary-container);
+  color: var(--md-on-tertiary-container);
+}
+
+.nav-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: var(--md-shape-full);
+  background: transparent;
+  color: var(--md-on-surface-variant);
+  cursor: pointer;
+  transition: background var(--md-motion-duration-short) var(--md-motion-standard);
+}
+
+.nav-icon-btn:hover {
+  background: var(--md-surface-container-high);
+}
+
+.nav-icon-btn .material-symbols-outlined { font-size: 22px; }
+
+/* --- Main Content --- */
+.main-content {
+  flex: 1;
+  margin-top: 64px;
+  width: 100%;
+}
+
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.page-header {
+  padding: 48px 0 24px;
+}
+
+.page-header h1 {
+  font-size: 2.25rem;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+
+.page-header .subtitle {
+  font-size: 1rem;
+  color: var(--md-on-surface-variant);
+  margin-top: 8px;
+}
+
+/* --- Hero Section --- */
+.hero {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(160deg, var(--md-hero-wash) 0%, var(--md-surface) 60%);
+  padding: 80px 24px 60px;
+  transition: background var(--md-motion-duration-medium) var(--md-motion-standard);
+}
+
+[data-theme="dark"] .hero {
+  background: linear-gradient(160deg, var(--md-hero-wash) 0%, var(--md-surface) 60%);
+}
+
+.hero-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 64px;
+  align-items: center;
+}
+
+.hero-text h1 {
+  font-size: 3.25rem;
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  line-height: 1.15;
+  margin-bottom: 20px;
+}
+
+.hero-text h1 .accent {
+  color: var(--md-primary);
+}
+
+.hero-text .hero-desc {
+  font-size: 1.125rem;
+  color: var(--md-on-surface-variant);
+  line-height: 1.7;
+  margin-bottom: 32px;
+  max-width: 520px;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.btn-filled {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 28px;
+  border-radius: var(--md-shape-full);
+  background: var(--md-primary);
+  color: var(--md-on-primary);
+  font-family: 'Inter', 'Noto Sans', sans-serif;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  transition: box-shadow var(--md-motion-duration-short) var(--md-motion-standard),
+              transform var(--md-motion-duration-short) var(--md-motion-standard);
+}
+
+.btn-filled:hover {
+  box-shadow: var(--md-shadow-lg);
+  transform: translateY(-2px);
+  text-decoration: none;
+  color: var(--md-on-primary);
+}
+
+.btn-filled .material-symbols-outlined { font-size: 20px; }
+
+.btn-outlined {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 28px;
+  border-radius: var(--md-shape-full);
+  background: transparent;
+  color: var(--md-primary);
+  font-family: 'Inter', 'Noto Sans', sans-serif;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  text-decoration: none;
+  border: 1px solid var(--md-outline);
+  cursor: pointer;
+  transition: background var(--md-motion-duration-short) var(--md-motion-standard);
+}
+
+.btn-outlined:hover {
+  background: var(--md-surface-container);
+  text-decoration: none;
+}
+
+.btn-outlined .material-symbols-outlined { font-size: 20px; }
+
+.hero-visual {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.hero-icon-wrapper {
+  position: relative;
+  width: 280px;
+  height: 280px;
+}
+
+.hero-icon-wrapper img {
+  width: 100%;
+  height: 100%;
+  filter: drop-shadow(0 16px 48px rgba(128,50,200,.30));
+  animation: heroFloat 6s ease-in-out infinite;
+}
+
+@keyframes heroFloat {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-12px); }
+}
+
+/* --- Feature Cards --- */
+.features-section {
+  padding: 64px 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.section-header h2 {
+  font-size: 2rem;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  margin-bottom: 12px;
+}
+
+.section-header p {
+  font-size: 1rem;
+  color: var(--md-on-surface-variant);
+  max-width: 560px;
+  margin: 0 auto;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.feature-card {
+  background: var(--md-surface-container-low);
+  border-radius: var(--md-shape-xl);
+  padding: 28px;
+  transition: background var(--md-motion-duration-short) var(--md-motion-standard),
+              box-shadow var(--md-motion-duration-short) var(--md-motion-standard),
+              transform var(--md-motion-duration-short) var(--md-motion-standard);
+}
+
+.feature-card:hover {
+  background: var(--md-surface-container);
+  box-shadow: var(--md-shadow);
+  transform: translateY(-2px);
+}
+
+.feature-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: var(--md-shape-lg);
+  background: var(--md-primary-container);
+  color: var(--md-on-primary-container);
+  margin-bottom: 20px;
+}
+
+.feature-card:nth-child(even) .feature-icon {
+  background: var(--md-tertiary-container);
+  color: var(--md-on-tertiary-container);
+}
+
+.feature-icon .material-symbols-outlined { font-size: 28px; }
+
+.feature-icon .custom-icon {
+  display: inline-block;
+  width: 28px;
+  height: 28px;
+  background-color: currentColor;
+  -webkit-mask-image: var(--icon-url);
+  mask-image: var(--icon-url);
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
+.feature-card h3 {
+  font-size: 1.125rem;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.feature-card p {
+  font-size: 0.9375rem;
+  color: var(--md-on-surface-variant);
+  line-height: 1.6;
+}
+
+/* --- Screenshots Gallery --- */
+.screenshots-section {
+  padding: 64px 0;
+  overflow: hidden;
+}
+
+.screenshots-section .section-header {
+  padding: 0 24px;
+}
+
+.screenshot-scroll {
+  display: flex;
+  gap: 16px;
+  overflow-x: auto;
+  padding: 8px 24px 24px;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.screenshot-scroll::-webkit-scrollbar { display: none; }
+
+.screenshot-item {
+  flex: 0 0 auto;
+  scroll-snap-align: center;
+  border-radius: var(--md-shape-xl);
+  overflow: hidden;
+  box-shadow: var(--md-shadow);
+  transition: transform var(--md-motion-duration-medium) var(--md-motion-emphasized),
+              box-shadow var(--md-motion-duration-medium) var(--md-motion-emphasized);
+  background: var(--md-surface-container);
+}
+
+.screenshot-item:hover {
+  transform: scale(1.03);
+  box-shadow: var(--md-shadow-xl);
+}
+
+.screenshot-item img {
+  display: block;
+  height: 480px;
+  width: auto;
+  object-fit: cover;
+}
+
+.screenshot-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 64px 24px;
+  color: var(--md-on-surface-variant);
+  gap: 12px;
+}
+
+.screenshot-loading .material-symbols-outlined {
+  animation: spin 1.2s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* --- Compatibility Section --- */
+.compat-section {
+  padding: 64px 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.compat-card {
+  background: var(--md-surface-container-low);
+  border-radius: var(--md-shape-xxl);
+  padding: 40px;
+  display: flex;
+  gap: 40px;
+  align-items: flex-start;
+}
+
+.compat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  min-width: 64px;
+  border-radius: var(--md-shape-lg);
+  background: var(--md-tertiary-container);
+  color: var(--md-on-tertiary-container);
+}
+
+.compat-icon .material-symbols-outlined { font-size: 32px; }
+
+.compat-details h3 {
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin-bottom: 12px;
+}
+
+.compat-details p {
+  font-size: 0.9375rem;
+  color: var(--md-on-surface-variant);
+  line-height: 1.7;
+  margin-bottom: 8px;
+}
+
+.compat-details a {
+  color: var(--md-primary);
+  font-weight: 500;
+}
+
+/* --- Download Page --- */
+.download-hero {
+  text-align: center;
+  padding: 60px 24px 40px;
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.download-hero .app-icon {
+  width: 120px;
+  height: 120px;
+  border-radius: var(--md-shape-xl);
+  margin-bottom: 24px;
+  filter: drop-shadow(0 8px 24px rgba(150,14,252,.20));
+}
+
+.download-hero h1 {
+  font-size: 2.5rem;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  margin-bottom: 8px;
+}
+
+.download-hero .version-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 16px;
+  border-radius: var(--md-shape-full);
+  background: var(--md-primary-container);
+  color: var(--md-on-primary-container);
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 16px;
+}
+
+.download-hero .download-desc {
+  font-size: 1rem;
+  color: var(--md-on-surface-variant);
+  margin-bottom: 32px;
+  line-height: 1.6;
+}
+
+.download-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+/* Release Card */
+.release-section {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 24px 64px;
+}
+
+.release-card {
+  background: var(--md-surface-container-low);
+  border-radius: var(--md-shape-xxl);
+  overflow: hidden;
+  box-shadow: var(--md-shadow);
+}
+
+.release-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 28px;
+  border-bottom: 1px solid var(--md-outline-variant);
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.release-card-header h2 {
+  font-size: 1.25rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.release-card-header h2 .material-symbols-outlined {
+  font-size: 24px;
+  color: var(--md-primary);
+}
+
+.release-meta {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 0.8125rem;
+  color: var(--md-on-surface-variant);
+}
+
+.release-meta .material-symbols-outlined { font-size: 16px; }
+
+.release-meta span {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.release-body {
+  padding: 28px;
+}
+
+.release-body .release-notes {
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  color: var(--md-on-surface);
+}
+
+.release-body .release-notes h1,
+.release-body .release-notes h2,
+.release-body .release-notes h3 {
+  margin-top: 20px;
+  margin-bottom: 8px;
+}
+
+.release-body .release-notes h1 { font-size: 1.375rem; }
+.release-body .release-notes h2 { font-size: 1.1875rem; }
+.release-body .release-notes h3 { font-size: 1.0625rem; }
+
+.release-body .release-notes p { margin-bottom: 12px; }
+
+.release-body .release-notes ul,
+.release-body .release-notes ol {
+  padding-left: 24px;
+  margin-bottom: 12px;
+}
+
+.release-body .release-notes li { margin-bottom: 4px; }
+
+.release-body .release-notes code {
+  background: var(--md-surface-container-highest);
+  padding: 2px 6px;
+  border-radius: var(--md-shape-xs);
+  font-size: 0.875em;
+}
+
+.release-body .release-notes pre {
+  background: var(--md-surface-container-highest);
+  border-radius: var(--md-shape-md);
+  padding: 16px;
+  overflow-x: auto;
+  margin-bottom: 16px;
+}
+
+.release-body .release-notes pre code {
+  background: none;
+  padding: 0;
+}
+
+.release-assets {
+  padding: 0 28px 28px;
+}
+
+.release-assets h3 {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  margin-bottom: 12px;
+  color: var(--md-on-surface-variant);
+}
+
+.asset-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.asset-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: var(--md-shape-md);
+  background: var(--md-surface-container);
+  transition: background var(--md-motion-duration-short) var(--md-motion-standard);
+  text-decoration: none;
+  color: var(--md-on-surface);
+}
+
+.asset-item:hover {
+  background: var(--md-surface-container-high);
+  text-decoration: none;
+}
+
+.asset-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.asset-info .material-symbols-outlined {
+  font-size: 22px;
+  color: var(--md-primary);
+  flex-shrink: 0;
+}
+
+.asset-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.asset-size {
+  font-size: 0.8125rem;
+  color: var(--md-on-surface-variant);
+  white-space: nowrap;
+}
+
+.release-footer {
+  padding: 20px 28px;
+  border-top: 1px solid var(--md-outline-variant);
+  text-align: center;
+}
+
+.btn-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  border-radius: var(--md-shape-full);
+  color: var(--md-primary);
+  font-family: 'Inter', 'Noto Sans', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background var(--md-motion-duration-short) var(--md-motion-standard);
+}
+
+.btn-text:hover {
+  background: var(--md-surface-container);
+  text-decoration: none;
+}
+
+/* Loading skeleton */
+.skeleton {
+  background: linear-gradient(90deg, var(--md-surface-container) 25%, var(--md-surface-container-high) 50%, var(--md-surface-container) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: var(--md-shape-sm);
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.skeleton-text { height: 16px; margin-bottom: 8px; }
+.skeleton-text.w60 { width: 60%; }
+.skeleton-text.w80 { width: 80%; }
+.skeleton-text.w40 { width: 40%; }
+.skeleton-title { height: 28px; width: 50%; margin-bottom: 16px; }
+.skeleton-block { height: 120px; width: 100%; }
+
+/* --- Footer --- */
+.site-footer {
+  background: var(--md-surface-container);
+  border-top: 1px solid var(--md-outline-variant);
+  padding: 48px 24px 32px;
+  margin-top: auto;
+  transition: background var(--md-motion-duration-medium) var(--md-motion-standard);
+}
+
+.footer-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.footer-brand {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.footer-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--md-shape-sm);
+}
+
+.footer-name {
+  font-family: 'Inter', 'Noto Sans', sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.footer-tagline {
+  font-size: 0.8125rem;
+  color: var(--md-on-surface-variant);
+  max-width: 400px;
+}
+
+.footer-links {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.footer-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: var(--md-shape-full);
+  background: var(--md-surface-container-high);
+  color: var(--md-on-surface);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background var(--md-motion-duration-short) var(--md-motion-standard);
+}
+
+.footer-link:hover {
+  background: var(--md-surface-container-highest);
+  text-decoration: none;
+}
+
+.footer-link svg { flex-shrink: 0; }
+
+.footer-copy {
+  font-size: 0.8125rem;
+  color: var(--md-on-surface-variant);
+}
+
+/* --- Responsive --- */
+@media (max-width: 960px) {
+  .hero-inner {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 40px;
+  }
+
+  .hero-text h1 {
+    font-size: 2.5rem;
+  }
+
+  .hero-text .hero-desc {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .hero-actions {
+    justify-content: center;
+  }
+
+  .hero-icon-wrapper {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+@media (max-width: 640px) {
+  .nav-inner {
+    padding: 0 16px;
+    height: 56px;
+  }
+
+  .nav-title {
+    font-size: 1rem;
+  }
+
+  /* Keep actions visible on mobile */
+  .nav-link .nav-link-label {
+    display: none;
+  }
+
+  .nav-pill .nav-link-label {
+    display: none;
+  }
+
+  .nav-link {
+    padding: 8px;
+    border-radius: var(--md-shape-full);
+  }
+
+  .nav-pill {
+    padding: 8px;
+    border-radius: var(--md-shape-full);
+    min-width: 40px;
+    justify-content: center;
+  }
+
+  .main-content {
+    margin-top: 56px;
+  }
+
+  .hero {
+    padding: 48px 16px 40px;
+  }
+
+  .hero-text h1 {
+    font-size: 2rem;
+  }
+
+  .hero-text .hero-desc {
+    font-size: 1rem;
+  }
+
+  .features-section {
+    padding: 40px 16px;
+  }
+
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .section-header h2 {
+    font-size: 1.5rem;
+  }
+
+  .screenshot-item img {
+    height: 360px;
+  }
+
+  .compat-card {
+    flex-direction: column;
+    padding: 24px;
+    gap: 20px;
+  }
+
+  .download-hero h1 {
+    font-size: 1.75rem;
+  }
+
+  .download-hero .app-icon {
+    width: 96px;
+    height: 96px;
+  }
+
+  .release-card-header {
+    padding: 16px 20px;
+  }
+
+  .release-body {
+    padding: 20px;
+  }
+
+  .release-assets {
+    padding: 0 20px 20px;
+  }
+
+  .release-footer {
+    padding: 16px 20px;
+  }
+
+  .page-header h1 {
+    font-size: 1.75rem;
+  }
+
+  .page-container {
+    padding: 0 16px;
+  }
+
+  .footer-brand {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+}
+
+/* --- Utilities --- */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Markdown rendered in release notes */
+.release-notes img {
+  border-radius: var(--md-shape-md);
+  max-width: 100%;
+}
+
+.release-notes blockquote {
+  border-left: 3px solid var(--md-primary);
+  padding-left: 16px;
+  margin: 12px 0;
+  color: var(--md-on-surface-variant);
+}
+
+.release-notes hr {
+  border: none;
+  height: 1px;
+  background: var(--md-outline-variant);
+  margin: 24px 0;
+}
+
+.release-notes a {
+  color: var(--md-primary);
+  font-weight: 500;
+}
+
+/* Error state */
+.error-state {
+  text-align: center;
+  padding: 48px 24px;
+  color: var(--md-on-surface-variant);
+}
+
+.error-state .material-symbols-outlined {
+  font-size: 48px;
+  margin-bottom: 16px;
+  color: var(--md-outline);
+}
+
+.error-state p {
+  font-size: 1rem;
+  margin-bottom: 8px;
+}
diff --git a/docs/assets/img/ic_bestfeature.svg b/docs/assets/img/ic_bestfeature.svg
new file mode 100644
index 000000000..8d74d1d65
--- /dev/null
+++ b/docs/assets/img/ic_bestfeature.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor">
+  <g
+     id="#group1"
+     transform="matrix(3.7200795,0,0,3.7200795,-25.223728,233.21009)">
+    <path
+       d="M 0,0 H 1.64 L 1.65,0.78 C 1.23,0.82 0.41,0.9 0,0.93 Z"
+       id="path1"/>
+    <path
+       d="m 24.43,15.6 c 3.89,-0.37 8.9,-1.27 11.7,2.19 2.23,2.48 2.46,5.99 2.48,9.16 0.05,14.34 -0.03,28.69 0.02,43.04 0.07,7.15 1.85,15.04 7.45,19.94 3.83,3.49 9.51,3.38 14.25,2.29 7.81,-3.29 10.44,-12.47 10.89,-20.21 0.3,-15.68 0.05,-31.36 0.18,-47.04 -0.15,-3.96 1.92,-8.39 6.02,-9.43 3.75,-0.45 8.16,-0.91 11.27,1.7 2.27,1.84 3.02,4.93 3.08,7.73 0.11,13.67 -0.06,27.35 0.01,41.02 C 92,76 90.8,86.27 86.53,95.43 83.2,102.94 77.52,109.61 70.07,113.25 59.92,118.71 46.89,118.02 37.28,111.7 24.6,103.83 19.14,88.28 18.65,73.98 18.42,57.66 18.52,41.32 18.52,25 c -0.16,-3.96 1.85,-8.3 5.91,-9.4 z"
+       id="path2"/>
+    <path
+       d="m 202.43,15.58 c 3.72,-0.43 8.21,-1.09 11.23,1.69 2.54,2.08 2.92,5.61 2.95,8.67 0.1,15.02 -0.06,30.05 0.12,45.06 0.34,7.21 2.27,15.38 8.52,19.77 3.47,2.75 8.26,2.2 12.36,1.66 8.28,-2.91 11.41,-12.38 11.62,-20.41 0.38,-15.98 -0.08,-31.97 0.25,-47.95 0.01,-4.12 2.95,-8.86 7.48,-8.73 3.24,0 7.21,-0.74 9.66,1.95 2.4,2.17 3.09,5.54 3.05,8.65 -0.01,15.04 0.04,30.08 -0.01,45.12 -0.2,12.46 -3.28,25.39 -11.64,34.98 -6.65,7.04 -16.34,11.31 -26.08,10.76 -10.56,0.14 -20.11,-6.23 -26.32,-14.39 -6.13,-9.22 -9.3,-20.3 -9.28,-31.36 0.04,-15.36 -0.17,-30.72 0.01,-46.08 -0.2,-4.01 2.06,-8.26 6.08,-9.39 z"
+       id="path3"/>
+    <path
+       d="m 101.32,53.29 c 3.81,-3.66 12.24,-5.16 14.7,0.69 4.07,9.49 6.61,19.57 10.09,29.27 2.77,-5.69 3.87,-12.02 6.11,-17.93 1.72,-4.58 2.22,-10.5 6.78,-13.28 4.84,-3.16 12.17,-0.5 14,4.93 3.2,8.6 5.74,17.44 8.48,26.2 2.61,-4.44 3.38,-9.68 5.28,-14.44 1.95,-5.09 3.27,-10.43 5.66,-15.35 2.91,-5.15 10.56,-3.55 14.27,-0.12 3.95,3.15 3.14,8.78 1.53,12.95 -5.04,14.19 -9.93,28.44 -15.62,42.38 -1.15,2.88 -2.9,5.76 -5.78,7.16 -4.23,1.89 -9.94,1.16 -12.64,-2.92 -3.93,-5.84 -5.37,-12.86 -7.59,-19.44 -0.95,-2.42 -1.01,-5.3 -2.75,-7.34 -1.36,5.08 -3.19,10.01 -4.7,15.04 -1.35,4.11 -2.53,8.42 -5.15,11.94 -4.08,5.84 -14.36,4.58 -17.07,-1.98 C 110.5,96.67 105.49,81.69 100.18,66.87 98.61,62.56 97.13,56.65 101.32,53.29 Z"
+       id="path4"/>
+  </g>
+  <path
+     d="m 912.79574,697.97157 c 29.20263,-1.04162 58.03324,10.23022 80.68853,28.30981 16.18233,12.94588 26.71023,34.22473 22.91573,55.16878 -3.9433,20.01403 -18.34003,36.56838 -35.4152,47.059 -24.51532,16.29395 -55.35478,17.26117 -83.81339,15.95915 -31.95548,-1.52524 -64.58058,-16.81476 -81.13493,-45.08737 -11.97866,-18.6004 -8.22138,-43.78533 4.7617,-60.8605 20.68364,-28.79341 58.21924,-39.02363 91.99756,-40.54887 z"
+     id="path7"
+     style="opacity:0.4" />
+  <path
+     d="m 77.395982,704.44742 c 33.555118,-7.62616 70.793108,-3.01326 100.330548,15.14073 19.15841,12.57387 36.64278,32.8111 35.82436,57.02882 -0.52081,23.02729 -17.37277,41.92529 -35.74996,53.94115 -25.37094,17.18677 -57.54963,18.33999 -87.124264,16.40555 C 63.25968,845.14083 36.884316,832.26936 18.693127,811.66012 1.3203566,792.42731 1.059951,760.47182 17.465501,740.5694 32.457422,721.9318 54.629095,710.58556 77.395982,704.44742 Z"
+     id="path8"
+     style="opacity:0.4" />
+</svg>
diff --git a/docs/assets/img/ic_clippy.svg b/docs/assets/img/ic_clippy.svg
new file mode 100644
index 000000000..443e5250f
--- /dev/null
+++ b/docs/assets/img/ic_clippy.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor">
+  <path
+     d="m 547.52918,728.17397 a 117.70956,117.70956 0 0 1 -158.96317,49.41452 117.70956,117.70956 0 0 1 -49.4145,-158.96317 l 38.34203,-72.93218 a 35.312869,35.312869 0 0 1 47.68894,-14.82435 35.312869,35.312869 0 0 1 14.82435,47.68895 l -38.34203,72.93218 a 47.083825,47.083825 0 0 0 19.76581,63.58526 47.083825,47.083825 0 0 0 63.58526,-19.7658 L 564.11,544.8607 c -30.12298,-30.73062 -40.16538,-75.37364 -21.10391,-111.63135 24.10071,-45.84309 85.495,-61.44135 137.58942,-34.05419 52.09442,27.38717 74.05118,86.80488 49.95049,132.64797 -19.06147,36.25772 -61.53026,53.29447 -103.92269,45.90217 L 547.52918,728.17397 M 430.54228,267.71678 c 52.09443,27.38716 74.0512,86.80487 49.9505,132.64796 -19.06146,36.25773 -61.53024,53.29449 -103.92269,45.90217 L 259.13393,669.64779 a 153.02244,153.02244 0 0 0 64.23886,206.65211 153.02244,153.02244 0 0 0 206.65212,-64.23886 l 76.68406,-145.86438 a 35.312869,35.312869 0 0 1 47.68896,-14.82435 35.312869,35.312869 0 0 1 14.82435,47.68894 L 592.53822,844.92563 A 223.64817,223.64817 0 0 1 290.5082,938.8132 223.64817,223.64817 0 0 1 196.62063,636.78318 L 314.05679,413.40232 c -30.123,-30.73062 -40.16538,-75.37365 -21.1039,-111.63137 24.10069,-45.84308 85.49499,-61.44133 137.58939,-34.05417 M 546.9462,229.44013 497.03752,280.86525 C 484.77069,262.71363 467.81236,247.415 446.97459,236.46013 409.04985,216.52227 366.52877,215.44561 332.10697,230.32957 l -30.29188,-63.79966 c 43.78337,-19.5373 95.86368,-22.47811 145.45286,-6.51485 l 1.31458,-2.50054 A 176.56434,176.56434 0 0 1 687.02728,83.392755 176.56434,176.56434 0 0 1 761.14905,321.83751 l -1.31458,2.50053 c 41.26348,31.79996 68.3667,76.36925 77.0945,123.51282 l -69.72941,11.21631 c -7.25373,-36.7937 -32.24703,-71.2108 -70.17175,-91.14866 -20.83778,-10.95486 -43.05444,-16.25137 -64.96156,-16.06574 l 14.06773,-70.26746 c 16.60118,1.81238 34.45265,4.28207 51.18718,9.88813 l 1.31458,-2.50052 C 726.02292,236.8785 706.25712,173.29323 654.16269,145.90606 602.06827,118.5189 538.483,138.28471 511.09584,190.37912 l -1.31459,2.50053 c 14.10537,10.60714 26.2603,23.91245 37.16495,36.56048 m 106.26215,221.82945 c -22.92156,-12.05034 -49.12485,-7.74005 -58.10784,9.34693 -8.98298,17.08697 2.32168,41.11602 25.24324,53.16638 22.92154,12.05035 49.12485,7.74005 58.10783,-9.34692 8.98299,-17.08698 -2.3217,-41.11603 -25.24323,-53.16639 M 403.15512,319.8112 c -22.92154,-12.05035 -49.12484,-7.74005 -58.10783,9.34691 -8.98298,17.08698 2.32169,41.11604 25.24324,53.16639 22.92155,12.05035 49.12485,7.74006 58.10783,-9.34692 8.98299,-17.08697 -2.32168,-41.11604 -25.24324,-53.16638 z"
+     id="path1"
+     style="stroke-width:1.10352" />
+</svg>
diff --git a/docs/assets/js/github-api.js b/docs/assets/js/github-api.js
new file mode 100644
index 000000000..ca698754a
--- /dev/null
+++ b/docs/assets/js/github-api.js
@@ -0,0 +1,199 @@
+// GitHub API - Dynamic release info & screenshots
+(function () {
+  'use strict';
+
+  var REPO = 'alesimula/Murine-launcher';
+  var API = 'https://api.github.com/repos/' + REPO;
+
+  // --- Markdown to HTML (lightweight) ---
+  function mdToHtml(md) {
+    if (!md) return '';
+    var html = md
+      // code blocks
+      .replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>')
+      // inline code
+      .replace(/`([^`]+)`/g, '<code>$1</code>')
+      // headings
+      .replace(/^### (.+)$/gm, '<h3>$1</h3>')
+      .replace(/^## (.+)$/gm, '<h2>$1</h2>')
+      .replace(/^# (.+)$/gm, '<h1>$1</h1>')
+      // bold + italic
+      .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
+      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.+?)\*/g, '<em>$1</em>')
+      // images
+      .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img alt="$1" src="$2">')
+      // links
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>')
+      // unordered lists
+      .replace(/^\s*[-*] (.+)$/gm, '<li>$1</li>')
+      // blockquote
+      .replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>')
+      // horizontal rules
+      .replace(/^---+$/gm, '<hr>')
+      // paragraphs (double newline)
+      .replace(/\n\n+/g, '</p><p>')
+      // single newlines to <br>
+      .replace(/\n/g, '<br>');
+
+    // wrap consecutive <li> in <ul>
+    html = html.replace(/((?:<li>.*?<\/li><br>?)+)/g, function (match) {
+      return '<ul>' + match.replace(/<br>/g, '') + '</ul>';
+    });
+
+    return '<p>' + html + '</p>';
+  }
+
+  function formatBytes(bytes) {
+    if (!bytes) return '';
+    var sizes = ['B', 'KB', 'MB', 'GB'];
+    var i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
+  }
+
+  function formatDate(dateStr) {
+    var d = new Date(dateStr);
+    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+  }
+
+  // --- Latest Release ---
+  function loadLatestRelease() {
+    var container = document.getElementById('latestRelease');
+    if (!container) return;
+
+    fetch(API + '/releases/latest')
+      .then(function (res) {
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        return res.json();
+      })
+      .then(function (release) {
+        renderRelease(release, container);
+        // Update hero version
+        var badge = document.getElementById('versionBadge');
+        if (badge) badge.textContent = release.tag_name;
+        var heroDesc = document.getElementById('releaseDate');
+        if (heroDesc) heroDesc.textContent = 'Released ' + formatDate(release.published_at);
+      })
+      .catch(function (err) {
+        console.error('Failed to load release:', err);
+        container.innerHTML =
+          '<div class="error-state">' +
+          '<span class="material-symbols-outlined">cloud_off</span>' +
+          '<p>Could not load release info.</p>' +
+          '<p style="font-size:0.8125rem">Check the <a href="https://github.com/' + REPO + '/releases" target="_blank">releases page</a> directly.</p>' +
+          '</div>';
+      });
+  }
+
+  function renderRelease(release, container) {
+    var apkAssets = release.assets.filter(function (a) {
+      return a.name.endsWith('.apk');
+    });
+    var otherAssets = release.assets.filter(function (a) {
+      return !a.name.endsWith('.apk');
+    });
+
+    var assetsHtml = '';
+    if (apkAssets.length > 0 || otherAssets.length > 0) {
+      assetsHtml = '<div class="release-assets"><h3>Assets</h3><div class="asset-list">';
+
+      apkAssets.forEach(function (asset) {
+        assetsHtml +=
+          '<a href="' + asset.browser_download_url + '" class="asset-item">' +
+          '<div class="asset-info"><span class="material-symbols-outlined">android</span>' +
+          '<span class="asset-name">' + asset.name + '</span></div>' +
+          '<span class="asset-size">' + formatBytes(asset.size) + '</span></a>';
+      });
+
+      otherAssets.forEach(function (asset) {
+        assetsHtml +=
+          '<a href="' + asset.browser_download_url + '" class="asset-item">' +
+          '<div class="asset-info"><span class="material-symbols-outlined">description</span>' +
+          '<span class="asset-name">' + asset.name + '</span></div>' +
+          '<span class="asset-size">' + formatBytes(asset.size) + '</span></a>';
+      });
+
+      assetsHtml += '</div></div>';
+    }
+
+    container.innerHTML =
+      '<div class="release-card">' +
+      '<div class="release-card-header">' +
+      '<h2><span class="material-symbols-outlined">new_releases</span>' + (release.name || release.tag_name) + '</h2>' +
+      '<div class="release-meta">' +
+      '<span><span class="material-symbols-outlined">calendar_today</span>' + formatDate(release.published_at) + '</span>' +
+      '<span><span class="material-symbols-outlined">sell</span>' + release.tag_name + '</span>' +
+      '</div></div>' +
+      '<div class="release-body"><div class="release-notes">' + mdToHtml(release.body) + '</div></div>' +
+      assetsHtml +
+      '<div class="release-footer">' +
+      '<a href="https://github.com/' + REPO + '/releases" class="btn-text" target="_blank" rel="noopener">' +
+      '<span class="material-symbols-outlined">history</span>View all releases</a>' +
+      '</div></div>';
+
+    // Also update download button href
+    if (apkAssets.length > 0) {
+      var dlBtn = document.getElementById('downloadBtn');
+      if (dlBtn) dlBtn.href = apkAssets[0].browser_download_url;
+    }
+  }
+
+  // --- Screenshots ---
+  function loadScreenshots() {
+    var container = document.getElementById('screenshotGallery');
+    if (!container) return;
+
+    // Fetch directory listing from GitHub API
+    fetch(API + '/contents/fastlane/metadata/android/en-US/images/phoneScreenshots')
+      .then(function (res) {
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        return res.json();
+      })
+      .then(function (files) {
+        // Filter to image files and sort
+        var images = files
+          .filter(function (f) {
+            return /\.(png|jpg|jpeg|webp)$/i.test(f.name);
+          })
+          .sort(function (a, b) {
+            return a.name.localeCompare(b.name, undefined, { numeric: true });
+          });
+
+        if (images.length === 0) {
+          container.innerHTML = '<div class="error-state"><p>No screenshots found.</p></div>';
+          return;
+        }
+
+        var html = '<div class="screenshot-scroll">';
+        images.forEach(function (img) {
+          var rawUrl = 'https://raw.githubusercontent.com/' + REPO + '/main/fastlane/metadata/android/en-US/images/phoneScreenshots/' + img.name;
+          html +=
+            '<div class="screenshot-item">' +
+            '<img src="' + rawUrl + '" alt="Screenshot ' + img.name + '" loading="lazy">' +
+            '</div>';
+        });
+        html += '</div>';
+        container.innerHTML = html;
+      })
+      .catch(function (err) {
+        console.error('Failed to load screenshots:', err);
+        // Fallback: use known screenshot names
+        var html = '<div class="screenshot-scroll">';
+        for (var i = 1; i <= 7; i++) {
+          var rawUrl = 'https://raw.githubusercontent.com/' + REPO + '/main/fastlane/metadata/android/en-US/images/phoneScreenshots/' + i + '.png';
+          html +=
+            '<div class="screenshot-item">' +
+            '<img src="' + rawUrl + '" alt="Screenshot ' + i + '" loading="lazy">' +
+            '</div>';
+        }
+        html += '</div>';
+        container.innerHTML = html;
+      });
+  }
+
+  // --- Init ---
+  document.addEventListener('DOMContentLoaded', function () {
+    loadLatestRelease();
+    loadScreenshots();
+  });
+})();
diff --git a/docs/assets/js/theme.js b/docs/assets/js/theme.js
new file mode 100644
index 000000000..7a1af53e5
--- /dev/null
+++ b/docs/assets/js/theme.js
@@ -0,0 +1,47 @@
+// Material Expressive - Theme Toggle & Nav Scroll
+(function () {
+  'use strict';
+
+  // --- Theme ---
+  const STORAGE_KEY = 'murine-theme';
+
+  function getPreferred() {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) return stored;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  function applyTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    const icon = document.getElementById('themeIcon');
+    if (icon) icon.textContent = theme === 'dark' ? 'light_mode' : 'dark_mode';
+  }
+
+  applyTheme(getPreferred());
+
+  document.addEventListener('DOMContentLoaded', function () {
+    applyTheme(getPreferred());
+
+    var toggle = document.getElementById('themeToggle');
+    if (toggle) {
+      toggle.addEventListener('click', function () {
+        var current = document.documentElement.getAttribute('data-theme') || 'light';
+        var next = current === 'dark' ? 'light' : 'dark';
+        localStorage.setItem(STORAGE_KEY, next);
+        applyTheme(next);
+      });
+    }
+
+    // --- Nav scroll shadow ---
+    var nav = document.getElementById('topNav');
+    if (nav) {
+      window.addEventListener('scroll', function () {
+        if (window.scrollY > 8) {
+          nav.classList.add('scrolled');
+        } else {
+          nav.classList.remove('scrolled');
+        }
+      }, { passive: true });
+    }
+  });
+})();
diff --git a/docs/download.md b/docs/download.md
new file mode 100644
index 000000000..ae552335a
--- /dev/null
+++ b/docs/download.md
@@ -0,0 +1,38 @@
+---
+layout: default
+title: Download
+---
+
+<!-- Download Hero -->
+<section class="download-hero">
+  <img src="https://raw.githubusercontent.com/alesimula/Murine-launcher/refs/heads/main/image/app_icon/icon_browser_fullsize.svg" alt="Murine Launcher" class="app-icon">
+  <h1>Murine Launcher</h1>
+  <div class="version-badge" id="versionBadge">Loading…</div>
+  <p class="download-desc" id="releaseDate">Checking for latest release…</p>
+  <div class="download-actions">
+    <a href="https://github.com/alesimula/Murine-launcher/releases/latest" id="downloadBtn" class="btn-filled" target="_blank" rel="noopener">
+      <span class="material-symbols-outlined">download</span>
+      Download APK
+    </a>
+    <a href="https://github.com/alesimula/Murine-launcher/releases" class="btn-outlined" target="_blank" rel="noopener">
+      <span class="material-symbols-outlined">history</span>
+      All Releases
+    </a>
+  </div>
+</section>
+
+<!-- Latest Release Details -->
+<section class="release-section" id="latestRelease">
+  <div class="release-card">
+    <div class="release-card-header">
+      <div class="skeleton skeleton-title"></div>
+    </div>
+    <div class="release-body">
+      <div class="skeleton skeleton-text w80"></div>
+      <div class="skeleton skeleton-text w60"></div>
+      <div class="skeleton skeleton-text w80"></div>
+      <div class="skeleton skeleton-text w40"></div>
+      <div class="skeleton skeleton-block" style="margin-top:16px"></div>
+    </div>
+  </div>
+</section>
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 000000000..07397fbb2
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,114 @@
+---
+layout: default
+title: Home
+---
+
+<!-- Hero -->
+<section class="hero">
+  <div class="hero-inner">
+    <div class="hero-text">
+      <h1>Android launcher,<br><span class="accent">plain and simple.</span></h1>
+      <p class="hero-desc">
+        A modern, lightweight FOSS Launcher3 fork delivering an enhanced stock Android experience, 
+         providing a familiar AOSP feel out of the box, with some sprinkles on top :3 <br/><br/>
+        Offers a minimalistic yet polished interface with essential customization options, with zero bloat.
+      </p>
+      <div class="hero-actions">
+        <a href="{{ '/download' | relative_url }}" class="btn-filled">
+          <span class="material-symbols-outlined">download</span>
+          Download
+        </a>
+        <a href="https://github.com/alesimula/Murine-launcher" class="btn-outlined" target="_blank" rel="noopener">
+          <span class="material-symbols-outlined">code</span>
+          Source Code
+        </a>
+      </div>
+    </div>
+    <div class="hero-visual">
+      <div class="hero-icon-wrapper">
+        <img src="https://raw.githubusercontent.com/alesimula/Murine-launcher/refs/heads/main/image/app_icon/icon_browser_fullsize.svg" alt="Murine Launcher icon">
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Features -->
+<section class="features-section">
+  <div class="section-header">
+    <h2>What it has to offer</h2>
+    <p>Built on AOSP Launcher3, Murine keeps things clean while adding a little touches here and there.</p>
+  </div>
+  <div class="features-grid">
+    <div class="feature-card">
+      <div class="feature-icon">
+        <span class="material-symbols-outlined">palette</span>
+      </div>
+      <h3>Modern UI</h3>
+      <p>Built on the foundations of modern Launcher3, and enhanced with AOSP Material Expressive settings ported from LineageOS</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">
+        <span class="material-symbols-outlined">blur_on</span>
+      </div>
+      <h3>Blur Effects</h3>
+      <p>Frosted glass and MICA-style translucency effects on the app drawer and search bar. Supported on Android 12+ with compatible OEM/ROMs.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">
+        <span class="material-symbols-outlined">search</span>
+      </div>
+      <h3>Customised QuickSearchBox</h3>
+      <p>Can look great without needing Google; disable the Lens button, choose your preferred search engine, or disable it alltogether if it's not your thing.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">
+        <span class="material-symbols-outlined">speed</span>
+      </div>
+      <h3>Lightweight</h3>
+      <p>Very close to its AOSP source, with some enhancements but no bloat. Very tiny, very light, very demure.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">
+        <span class="custom-icon" style="--icon-url: url('{{ '/assets/img/ic_bestfeature.svg' | relative_url }}')"></span>
+      </div>
+      <h3>Designed by a mouse</h3>
+      <p>Are you tired of apps designed by humans? This one was built by a mouse, no (excessive) desire for money, will not sell out or sell you out, mice only deal in cheese and crumbs.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">
+        <span class="custom-icon" style="--icon-url: url('{{ '/assets/img/ic_clippy.svg' | relative_url }}')"></span>
+      </div>
+      <h3>Free &amp; Open Source</h3>
+      <p>Fully open source, licensed under the Apache 2.0 license. No tracking, no ads, no data collection, no internet access.</p>
+    </div>
+  </div>
+</section>
+
+<!-- Screenshots -->
+<section class="screenshots-section">
+  <div class="section-header">
+    <h2>See how it looks</h2>
+    <p>Screenshots from the latest release. Scroll to explore.</p>
+  </div>
+  <div id="screenshotGallery">
+    <div class="screenshot-loading">
+      <span class="material-symbols-outlined">hourglass_top</span>
+      Loading screenshots&hellip;
+    </div>
+  </div>
+</section>
+
+<!-- Compatibility -->
+<section class="compat-section">
+  <div class="compat-card">
+    <div class="compat-icon">
+      <span class="material-symbols-outlined">smartphone</span>
+    </div>
+    <div class="compat-details">
+      <h3>Compatibility</h3>
+      <p>Murine Launcher supports <strong>Android 8 (Oreo)</strong> and above.</p>
+      <p>Blur effects require <strong>Android 12+</strong>. Some OEMs or ROMs may hide or disable window-level blurs - check for an "Allow window-level blurs" option in Display or Developer Options.</p>
+      <p>On rooted devices, you can try enabling the <a href="https://github.com/Magisk-Modules-Alt-Repo/enable-blurs" target="_blank" rel="noopener">enable-blurs Magisk module</a>.</p>
+    </div>
+  </div>
+</section>