

<!DOCTYPE html>

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

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

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

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

  </style>

  

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

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

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

  



  <!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Nivo Docs | Technical documentation for Nivo - a showcase neobank platform demonstrating production-ready fintech architecture.</title>
<meta name="generator" content="Jekyll v4.4.1" />
<meta property="og:title" content="Nivo Docs" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Technical documentation for Nivo - a showcase neobank platform demonstrating production-ready fintech architecture." />
<meta property="og:description" content="Technical documentation for Nivo - a showcase neobank platform demonstrating production-ready fintech architecture." />
<link rel="canonical" href="https://nivomoney.com/assets/css/just-the-docs-head-nav.css" />
<meta property="og:url" content="https://nivomoney.com/assets/css/just-the-docs-head-nav.css" />
<meta property="og:site_name" content="Nivo Docs" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Nivo Docs" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebPage","description":"Technical documentation for Nivo - a showcase neobank platform demonstrating production-ready fintech architecture.","headline":"Nivo Docs","url":"https://nivomoney.com/assets/css/just-the-docs-head-nav.css"}</script>
<!-- End Jekyll SEO tag -->


  <!-- Favicon - Nivo brand blue -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%233b82f6'/><text x='50' y='68' font-size='50' font-weight='bold' fill='white' text-anchor='middle' font-family='system-ui'>N</text></svg>">

<!-- CRITICAL: Apply theme BEFORE page renders to prevent flash -->
<script>
(function() {
  // Determine theme: localStorage > system preference > default (nivo)
  var saved = localStorage.getItem('nivo-theme');
  var theme = saved || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'nivo-dark' : 'nivo');
  document.documentElement.setAttribute('data-theme', theme);
})();
</script>

<style>
  /* ========================================
     STICKY HEADER (mobile only - sidebar handles desktop)
     ======================================== */
  @media (max-width: 799px) {
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background-color: #ffffff;
    }

    [data-theme="nivo-dark"] .site-header {
      background-color: #0f172a;
    }
  }

  /* ========================================
     THEME TOGGLE BUTTON
     ======================================== */
  .aux-nav-item {
    display: flex;
    align-items: center;
  }

  .theme-toggle-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid #3b82f6;
    border-radius: 0.5rem;
    background: transparent;
    color: #3b82f6;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 0.75rem;
  }

  .theme-toggle-header:hover {
    background-color: #eff6ff;
  }

  .theme-toggle-header svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  [data-theme="nivo-dark"] .theme-toggle-header {
    color: #60a5fa;
    border-color: #60a5fa;
  }

  [data-theme="nivo-dark"] .theme-toggle-header:hover {
    background-color: rgba(96, 165, 250, 0.1);
  }

  .theme-toggle-header .sun-icon { display: none; }
  .theme-toggle-header .moon-icon { display: block; }

  [data-theme="nivo-dark"] .theme-toggle-header .sun-icon { display: block; }
  [data-theme="nivo-dark"] .theme-toggle-header .moon-icon { display: none; }

  /* ========================================
     MERMAID DIAGRAMS
     ======================================== */
  .mermaid {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto;
  }

  [data-theme="nivo-dark"] .mermaid {
    background: #1e293b !important;
    border-color: #475569;
  }

  /* Mermaid text colors */
  .mermaid text,
  .mermaid .nodeLabel,
  .mermaid .edgeLabel,
  .mermaid .label {
    fill: #0f172a !important;
    color: #0f172a !important;
  }

  [data-theme="nivo-dark"] .mermaid text,
  [data-theme="nivo-dark"] .mermaid .nodeLabel,
  [data-theme="nivo-dark"] .mermaid .edgeLabel,
  [data-theme="nivo-dark"] .mermaid .label {
    fill: #f1f5f9 !important;
    color: #f1f5f9 !important;
  }

  /* Mermaid node backgrounds */
  .mermaid .node rect,
  .mermaid .node circle,
  .mermaid .node polygon {
    fill: #dbeafe !important;
    stroke: #3b82f6 !important;
  }

  [data-theme="nivo-dark"] .mermaid .node rect,
  [data-theme="nivo-dark"] .mermaid .node circle,
  [data-theme="nivo-dark"] .mermaid .node polygon {
    fill: #1e3a8a !important;
    stroke: #60a5fa !important;
  }

  /* Mermaid clusters/subgraphs */
  .mermaid .cluster rect {
    fill: #f1f5f9 !important;
    stroke: #cbd5e1 !important;
  }

  [data-theme="nivo-dark"] .mermaid .cluster rect {
    fill: #0f172a !important;
    stroke: #475569 !important;
  }

  .mermaid .cluster .nodeLabel {
    fill: #334155 !important;
  }

  [data-theme="nivo-dark"] .mermaid .cluster .nodeLabel {
    fill: #94a3b8 !important;
  }

  /* Mermaid edge lines */
  .mermaid .edgePath .path {
    stroke: #64748b !important;
  }

  [data-theme="nivo-dark"] .mermaid .edgePath .path {
    stroke: #94a3b8 !important;
  }

  /* ========================================
     TABLE STYLING - EXPLICIT BACKGROUNDS
     ======================================== */
  .main-content table {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 1.5rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
  }

  .main-content table thead {
    background-color: #f8fafc;
  }

  .main-content table th {
    background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
    color: #0f172a;
    font-weight: 600;
    padding: 0.875rem 1rem;
    border-bottom: 2px solid #e2e8f0;
  }

  .main-content table tbody {
    background-color: #ffffff;
  }

  .main-content table tr {
    background-color: #ffffff;
  }

  .main-content table tr:nth-child(even) {
    background-color: #f8fafc;
  }

  .main-content table td {
    padding: 0.75rem 1rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    background-color: inherit;
  }

  .main-content table tr:last-child td {
    border-bottom: none;
  }

  .main-content table tr:hover {
    background-color: #eff6ff;
  }

  /* Dark mode table styling - EXPLICIT backgrounds to override any inherited white */
  [data-theme="nivo-dark"] .main-content table {
    border-color: #334155;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    background-color: #111827;
  }

  [data-theme="nivo-dark"] .main-content table thead {
    background-color: #1e293b;
  }

  [data-theme="nivo-dark"] .main-content table th {
    background: linear-gradient(to bottom, #1e293b, #0f172a);
    color: #f1f5f9;
    border-bottom-color: #334155;
  }

  [data-theme="nivo-dark"] .main-content table tbody {
    background-color: #111827;
  }

  [data-theme="nivo-dark"] .main-content table tr {
    background-color: #111827;
  }

  [data-theme="nivo-dark"] .main-content table tr:nth-child(even) {
    background-color: #1e293b;
  }

  [data-theme="nivo-dark"] .main-content table td {
    color: #cbd5e1;
    border-bottom-color: #1e293b;
    background-color: inherit;
  }

  [data-theme="nivo-dark"] .main-content table tr:hover {
    background-color: #1e3a8a;
  }

  .main-content table strong {
    color: #0f172a;
    font-weight: 600;
  }

  [data-theme="nivo-dark"] .main-content table strong {
    color: #f1f5f9;
  }

  /* Table links */
  .main-content table a {
    color: #2563eb;
  }

  [data-theme="nivo-dark"] .main-content table a {
    color: #60a5fa;
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Inject theme toggle button into header
  var auxNav = document.querySelector('.aux-nav ul') || document.querySelector('.aux-nav');
  if (!auxNav) return;

  var toggleItem = document.createElement('li');
  toggleItem.className = 'aux-nav-item';

  var button = document.createElement('button');
  button.className = 'theme-toggle-header';
  button.setAttribute('aria-label', 'Toggle dark mode');
  button.setAttribute('title', 'Toggle theme');
  button.setAttribute('type', 'button');

  // Sun icon (shown in dark mode)
  button.innerHTML = '<svg class="sun-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>' +
    '<svg class="moon-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>';

  button.addEventListener('click', function() {
    var html = document.documentElement;
    var current = html.getAttribute('data-theme') || 'nivo';
    var next = current === 'nivo-dark' ? 'nivo' : 'nivo-dark';

    html.setAttribute('data-theme', next);
    localStorage.setItem('nivo-theme', next);

    // Sync with Just the Docs if available
    if (typeof jtd !== 'undefined' && typeof jtd.setTheme === 'function') {
      jtd.setTheme(next);
    }

    // Re-render Mermaid diagrams with new theme
    if (typeof mermaid !== 'undefined') {
      reinitMermaid(next === 'nivo-dark');
    }
  });

  toggleItem.appendChild(button);
  auxNav.appendChild(toggleItem);

  // Sync initial theme with jtd
  var theme = document.documentElement.getAttribute('data-theme');
  if (typeof jtd !== 'undefined' && typeof jtd.setTheme === 'function') {
    jtd.setTheme(theme);
  }
});

// Mermaid theme configuration
function getMermaidConfig(isDark) {
  return {
    startOnLoad: false,
    theme: 'base',
    themeVariables: isDark ? {
      // Dark theme colors
      primaryColor: '#1e3a8a',
      primaryTextColor: '#f1f5f9',
      primaryBorderColor: '#60a5fa',
      lineColor: '#94a3b8',
      secondaryColor: '#334155',
      tertiaryColor: '#1e293b',
      background: '#1e293b',
      mainBkg: '#1e3a8a',
      nodeBorder: '#60a5fa',
      clusterBkg: '#0f172a',
      clusterBorder: '#475569',
      titleColor: '#f1f5f9',
      edgeLabelBackground: '#1e293b',
      textColor: '#f1f5f9',
      nodeTextColor: '#f1f5f9',
      labelTextColor: '#f1f5f9',
      actorTextColor: '#f1f5f9',
      actorBkg: '#1e3a8a',
      actorBorder: '#60a5fa',
      signalColor: '#94a3b8',
      signalTextColor: '#f1f5f9',
      labelBoxBkgColor: '#1e293b',
      labelBoxBorderColor: '#475569',
      noteBkgColor: '#334155',
      noteBorderColor: '#475569',
      noteTextColor: '#f1f5f9',
      activationBkgColor: '#1e3a8a',
      activationBorderColor: '#60a5fa'
    } : {
      // Light theme colors
      primaryColor: '#dbeafe',
      primaryTextColor: '#0f172a',
      primaryBorderColor: '#3b82f6',
      lineColor: '#64748b',
      secondaryColor: '#f1f5f9',
      tertiaryColor: '#e2e8f0',
      background: '#f8fafc',
      mainBkg: '#dbeafe',
      nodeBorder: '#3b82f6',
      clusterBkg: '#f1f5f9',
      clusterBorder: '#cbd5e1',
      titleColor: '#0f172a',
      edgeLabelBackground: '#ffffff',
      textColor: '#0f172a',
      nodeTextColor: '#0f172a',
      labelTextColor: '#0f172a',
      actorTextColor: '#0f172a',
      actorBkg: '#dbeafe',
      actorBorder: '#3b82f6',
      signalColor: '#64748b',
      signalTextColor: '#0f172a',
      labelBoxBkgColor: '#ffffff',
      labelBoxBorderColor: '#cbd5e1',
      noteBkgColor: '#eff6ff',
      noteBorderColor: '#3b82f6',
      noteTextColor: '#0f172a',
      activationBkgColor: '#dbeafe',
      activationBorderColor: '#3b82f6'
    }
  };
}

// Mermaid re-initialization for theme changes
function reinitMermaid(isDark) {
  if (typeof mermaid === 'undefined') return;

  mermaid.initialize(getMermaidConfig(isDark));

  // Re-render all mermaid diagrams
  document.querySelectorAll('.mermaid').forEach(function(el) {
    var code = el.getAttribute('data-original-code');
    if (code) {
      el.removeAttribute('data-processed');
      el.innerHTML = code;
    }
  });

  mermaid.run();
}

// Store original mermaid code when page loads
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.mermaid').forEach(function(el) {
    if (!el.getAttribute('data-original-code')) {
      el.setAttribute('data-original-code', el.textContent.trim());
    }
  });

  // Initialize mermaid with current theme
  var isDark = document.documentElement.getAttribute('data-theme') === 'nivo-dark';
  if (typeof mermaid !== 'undefined') {
    reinitMermaid(isDark);
  }
});

// Listen for system theme changes (only if no saved preference)
if (window.matchMedia) {
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
    if (!localStorage.getItem('nivo-theme')) {
      var theme = e.matches ? 'nivo-dark' : 'nivo';
      document.documentElement.setAttribute('data-theme', theme);
      if (typeof jtd !== 'undefined') jtd.setTheme(theme);
      if (typeof mermaid !== 'undefined') reinitMermaid(e.matches);
    }
  });
}
</script>


</head>

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

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

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

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

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

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

  
  
    <!-- Bootstrap Icons. MIT License: https://github.com/twbs/icons/blob/main/LICENSE.md -->
<symbol id="svg-copy" viewBox="0 0 16 16">
  <title>Copy</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
  </svg>
</symbol>
<symbol id="svg-copied" viewBox="0 0 16 16">
  <title>Copied</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
    <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/>
  </svg>
</symbol>

  
</svg>

  
    <header class="side-bar">
  <div class="site-header">
    <a href="/" class="site-title lh-tight">
  Nivo Docs

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

  <nav aria-label="Main" id="site-nav" class="site-nav">
  
  
    <ul class="nav-list"><li class="nav-list-item"><a href="/docs" class="nav-list-link">Documentation</a></li><li class="nav-list-item"><a href="/why-nivo" class="nav-list-link">Why Nivo?</a></li><li class="nav-list-item"><a href="/demo" class="nav-list-link">Demo Walkthrough</a></li><li class="nav-list-item"><a href="/development" class="nav-list-link">Development Guide</a></li><li class="nav-list-item"><a href="/quickstart" class="nav-list-link">Quick Start</a></li><li class="nav-list-item"><a href="/architecture" class="nav-list-link">System Architecture</a></li><li class="nav-list-item"><a href="/flows" class="nav-list-link">End-to-End Flows</a></li><li class="nav-list-item"><a href="/design-system" class="nav-list-link">Design System</a></li><li class="nav-list-item"><a href="/sse" class="nav-list-link">SSE Integration</a></li><li class="nav-list-item"><a href="/deployment.html" class="nav-list-link">Deployment</a></li><li class="nav-list-item"><a href="/observability" class="nav-list-link">Observability</a></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Architecture Decision Records submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/adr" class="nav-list-link">Architecture Decision Records</a><ul class="nav-list"><li class="nav-list-item"><a href="/adr/001-double-entry-ledger" class="nav-list-link">ADR-001: Double-Entry Ledger</a></li><li class="nav-list-item"><a href="/adr/002-jwt-rbac-authorization" class="nav-list-link">ADR-002: JWT + RBAC Authorization</a></li><li class="nav-list-item"><a href="/adr/003-microservices-architecture" class="nav-list-link">ADR-003: Microservices Architecture</a></li></ul></li></ul>
  
</nav>


<div class="d-md-block d-none site-footer">
  
  
    <!-- Theme toggle moved to header - this file kept for potential future sidebar customizations -->

  
  </div>
</header>

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

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

  
  
  
    <nav aria-label="Auxiliary" class="aux-nav">
  <ul class="aux-nav-list">
    
      <li class="aux-nav-list-item">
        <a href="https://github.com/1mb-dev/nivomoney" class="site-button"
          
          target="_blank" rel="noopener noreferrer"
          
        >
          GitHub
        </a>
      </li>
    
  </ul>
</nav>

  
</div>

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

          

          
            
          
        </main>
        
<hr>
<footer>
  
    <p><a href="#top" id="back-to-top">Back to top</a></p>
  

  <p class="text-small mb-0">Nivo &copy; 2026. A fintech engineering showcase. <a href='/'>Home</a></p>

  <div class="d-md-none mt-4 fs-2">
    
    
      <!-- Theme toggle moved to header - this file kept for potential future sidebar customizations -->

    
  </div>
</footer>

      </div>
    </div>
    
      

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

    
  </div>

  
    





<script type="module">
  
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.esm.min.mjs';
  

  var config = // Mermaid Configuration - Theme-Aware Rendering
// Automatically applies appropriate theme based on color scheme
{
  startOnLoad: true,
  theme: "default",
  themeVariables: {
    primaryColor: '#3b82f6',
    primaryTextColor: '#ffffff',
    primaryBorderColor: '#2563eb',
    lineColor: '#64748b',
    secondaryColor: '#f1f5f9',
    tertiaryColor: '#e2e8f0',
    background: '#ffffff',
    mainBkg: '#f8fafc',
    nodeBorder: '#cbd5e1',
    clusterBkg: '#f1f5f9',
    clusterBorder: '#cbd5e1',
    titleColor: '#0f172a',
    edgeLabelBackground: '#ffffff',
    textColor: '#0f172a',
    nodeTextColor: '#0f172a',
    actorTextColor: '#0f172a',
    actorBkg: '#f8fafc',
    actorBorder: '#cbd5e1',
    signalColor: '#0f172a',
    labelTextColor: '#0f172a'
  },
  flowchart: {
    useMaxWidth: true,
    htmlLabels: true,
    curve: 'basis'
  },
  sequence: {
    useMaxWidth: true,
    diagramMarginX: 50,
    diagramMarginY: 10,
    actorMargin: 50,
    width: 150,
    height: 65,
    boxMargin: 10,
    boxTextMargin: 5,
    noteMargin: 10,
    messageMargin: 35,
    mirrorActors: true,
    showSequenceNumbers: false
  }
}
;
  mermaid.initialize(config);
  mermaid.run({
    querySelector: '.language-mermaid',
  });
</script>



  
</body>
</html>

