---
title: Installation
nav_order: 2
has_children: true
---

<style>
  .icon-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    text-align: center;
    padding: 20px 0;
  }
  .icon-item {
    width: 80px;
    text-decoration: none !important;
    color: inherit;
    font-size: 0.9em;
    line-height: 1.2;
  }
  .icon-item img {
    margin-bottom: 8px;
    transition: transform 0.2s ease;
  }
  .icon-item:hover img {
    transform: scale(1.1);
  }
</style>

# Installation

Choose your device and browser to see step-by-step instructions.

---

## 💻 Desktop

<div class="icon-grid">
  <a href="desktop-chrome" class="icon-item">
    <img src="../assets/images/installation/chrome-logo.png" alt="Chrome" width="48"><br>Chrome
  </a>
  <a href="desktop-chrome" class="icon-item">
    <img src="../assets/images/installation/brave-logo.png" alt="Brave" width="48"><br>Brave
  </a>
  <a href="desktop-chrome" class="icon-item">
    <img src="../assets/images/installation/opera-logo.png" alt="Opera" width="48"><br>Opera
  </a>
  <a href="desktop-chrome" class="icon-item">
    <img src="../assets/images/installation/vivaldi-logo.png" alt="Vivaldi" width="48"><br>Vivaldi
  </a>
  <a href="desktop-edge" class="icon-item">
    <img src="../assets/images/installation/edge-logo.png" alt="Edge" width="48"><br>Edge
  </a>
  <a href="desktop-chrome" class="icon-item">
    <img src="../assets/images/installation/alternative-logo.png" alt="Other" width="48"><br>Other
  </a>
</div>

{: .note }

> Tip: All Chromium-based browsers (Chrome, Brave, Opera, Vivaldi, others) follow the Chrome instructions.

---

## 📱 Mobile

<div class="icon-grid">
  <a href="mobile-ios" class="icon-item">
    <img src="../assets/images/installation/ios-logo.png" alt="iOS Safari" width="48"><br>iOS Safari
  </a>
  <a href="mobile-android" class="icon-item">
    <img src="../assets/images/installation/android-logo.png" alt="Android" width="48"><br>Android
  </a>
</div>