From 18226ac592d3f5b1ccc7f5b652433b37b13100b6 Mon Sep 17 00:00:00 2001
From: KENDAL <barbutcukendal42@gmail.com>
Date: Mon, 10 Aug 2026 16:42:47 +0300
Subject: [PATCH] feat: add Commonware Alto Reference Blockchain Node and
 Benchmark Studio

---
 tools/alto-studio/.gitignore              |   3 +
 tools/alto-studio/README.md               |  25 ++
 tools/alto-studio/bin/alto-cli.js         |  61 +++++
 tools/alto-studio/package.json            |  31 +++
 tools/alto-studio/src/config.js           |  25 ++
 tools/alto-studio/src/core/node-runner.js |  43 ++++
 tools/alto-studio/src/server/app.js       |  53 ++++
 tools/alto-studio/tests/node.test.js      |  22 ++
 tools/alto-studio/tests/run-all.js        |   5 +
 tools/alto-studio/web/app.js              |  98 ++++++++
 tools/alto-studio/web/index.html          | 106 ++++++++
 tools/alto-studio/web/styles.css          | 292 ++++++++++++++++++++++
 12 files changed, 764 insertions(+)
 create mode 100644 tools/alto-studio/.gitignore
 create mode 100644 tools/alto-studio/README.md
 create mode 100644 tools/alto-studio/bin/alto-cli.js
 create mode 100644 tools/alto-studio/package.json
 create mode 100644 tools/alto-studio/src/config.js
 create mode 100644 tools/alto-studio/src/core/node-runner.js
 create mode 100644 tools/alto-studio/src/server/app.js
 create mode 100644 tools/alto-studio/tests/node.test.js
 create mode 100644 tools/alto-studio/tests/run-all.js
 create mode 100644 tools/alto-studio/web/app.js
 create mode 100644 tools/alto-studio/web/index.html
 create mode 100644 tools/alto-studio/web/styles.css

diff --git a/tools/alto-studio/.gitignore b/tools/alto-studio/.gitignore
new file mode 100644
index 00000000..a884d38f
--- /dev/null
+++ b/tools/alto-studio/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+.env
+dist/
diff --git a/tools/alto-studio/README.md b/tools/alto-studio/README.md
new file mode 100644
index 00000000..f38a5992
--- /dev/null
+++ b/tools/alto-studio/README.md
@@ -0,0 +1,25 @@
+# 🎶 Alto Studio & Reference Blockchain Runner
+
+An interactive reference node runner, **Sub-Second Block Producer**, and **P2P Gossip Monitor** for **Commonware Alto**.
+
+---
+
+## 🌟 Key Features
+
+- 🎶 **Alto Reference Chain Architecture**: Simulate Rust block production (`alto-chain`, `alto-validator`) with ~250ms target block time.
+- 🌐 **Interactive Web Studio**: Real-time block production dashboard and P2P peer mesh visualizer on `http://localhost:3420`.
+- ⌨️ **Universal CLI (`alto-cli`)**: Terminal utility for producing blocks and inspecting Alto crates.
+
+---
+
+## 🚀 Quickstart
+
+```bash
+# Launch Alto Studio
+npm start
+# Open http://localhost:3420
+
+# Or run via CLI
+node bin/alto-cli.js crates
+node bin/alto-cli.js produce
+```
diff --git a/tools/alto-studio/bin/alto-cli.js b/tools/alto-studio/bin/alto-cli.js
new file mode 100644
index 00000000..80af0b25
--- /dev/null
+++ b/tools/alto-studio/bin/alto-cli.js
@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+
+/**
+ * Commonware Alto CLI
+ */
+
+import { defaultAltoRunner } from '../src/core/node-runner.js';
+import { ALTO_CONFIG } from '../src/config.js';
+
+const args = process.argv.slice(2);
+const command = args[0] || 'help';
+
+async function main() {
+  switch (command.toLowerCase()) {
+    case 'crates': {
+      console.log('\n🎶 Commonware Alto Rust Crates:');
+      ALTO_CONFIG.crates.forEach(c => {
+        console.log(`  • [${c.name}]`);
+        console.log(`    Description: ${c.description}\n`);
+      });
+      break;
+    }
+
+    case 'produce': {
+      console.log('\n⚡ Producing Reference Block on Alto Node (~250ms)...');
+      const block = defaultAltoRunner.produceBlock();
+      console.log(`  Height:       #${block.height}`);
+      console.log(`  Block Hash:   ${block.blockHash}`);
+      console.log(`  Transactions: ${block.txCount}`);
+      console.log(`  Block Time:   ${block.blockTimeMs}`);
+      console.log(`  P2P Gossip:   ${block.gossipStatus}\n`);
+      break;
+    }
+
+    case 'studio': {
+      console.log('\n🌐 Launching Alto Studio on :3420...');
+      await import('../src/server/app.js');
+      break;
+    }
+
+    default: {
+      console.log(`
+╔══════════════════════════════════════════════════════════════════╗
+║               🎶 COMMONWARE ALTO NODE CLI                        ║
+║     Reference Blockchain Implementation & Benchmark Suite        ║
+╚══════════════════════════════════════════════════════════════════╝
+
+Commands:
+  alto-cli crates                      List Alto reference Rust crates
+  alto-cli produce                     Produce block on Alto reference chain
+  alto-cli studio                      Launch Interactive Web Studio on :3420
+      `);
+      break;
+    }
+  }
+}
+
+main().catch(err => {
+  console.error('Error:', err.message);
+  process.exit(1);
+});
diff --git a/tools/alto-studio/package.json b/tools/alto-studio/package.json
new file mode 100644
index 00000000..5d1f98c1
--- /dev/null
+++ b/tools/alto-studio/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "alto-node-studio",
+  "version": "1.0.0",
+  "description": "Interactive Alto Reference Blockchain Node Runner & Benchmark Dashboard for Commonware.",
+  "main": "src/index.js",
+  "type": "module",
+  "bin": {
+    "alto-cli": "./bin/alto-cli.js"
+  },
+  "scripts": {
+    "start": "node src/server/app.js",
+    "cli": "node bin/alto-cli.js",
+    "test": "node tests/run-all.js"
+  },
+  "keywords": [
+    "commonware",
+    "alto",
+    "rust-blockchain",
+    "reference-node",
+    "simplex-consensus",
+    "p2p-mesh"
+  ],
+  "author": "Commonware Community",
+  "license": "MIT",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.7",
+    "ethers": "^6.13.5",
+    "express": "^4.21.2"
+  }
+}
diff --git a/tools/alto-studio/src/config.js b/tools/alto-studio/src/config.js
new file mode 100644
index 00000000..ca586430
--- /dev/null
+++ b/tools/alto-studio/src/config.js
@@ -0,0 +1,25 @@
+/**
+ * Commonware Alto Reference Blockchain Node Configuration
+ */
+
+export const ALTO_CONFIG = {
+  node: {
+    name: 'Alto Reference Blockchain Node',
+    language: 'Rust (tokio / async runtime)',
+    library: 'Commonware Primitives Monorepo',
+    consensusEngine: 'consensus::simplex (Sub-second BFT)',
+    p2pProtocol: 'commonware-p2p (Authenticated & Encrypted)',
+  },
+  crates: [
+    { name: 'alto-chain', description: 'Core blockchain state transition machine & block headers.' },
+    { name: 'alto-validator', description: 'BFT consensus participant & VRF leader block proposer.' },
+    { name: 'alto-client', description: 'RPC client & transaction broadcaster.' },
+    { name: 'alto-indexer', description: 'High-speed event & transaction indexer.' },
+  ],
+  networkMetrics: {
+    activePeers: 36,
+    targetBlockTimeMs: 250,
+    currentHeight: 148520,
+    networkBandwidthMbSec: 14.8,
+  },
+};
diff --git a/tools/alto-studio/src/core/node-runner.js b/tools/alto-studio/src/core/node-runner.js
new file mode 100644
index 00000000..0d025d99
--- /dev/null
+++ b/tools/alto-studio/src/core/node-runner.js
@@ -0,0 +1,43 @@
+/**
+ * Alto Node Block Production & P2P Gossip Engine
+ */
+
+import crypto from 'crypto';
+import { ALTO_CONFIG } from '../config.js';
+
+export class AltoNodeRunner {
+  constructor() {
+    this.currentHeight = ALTO_CONFIG.networkMetrics.currentHeight;
+    this.blocks = [];
+  }
+
+  /**
+   * Produce a new block on Alto reference chain
+   */
+  produceBlock() {
+    this.currentHeight += 1;
+    const blockHash = '0x' + crypto.randomBytes(32).toString('hex');
+    const proposer = '0x' + crypto.randomBytes(20).toString('hex');
+    const txCount = Math.floor(Math.random() * 85) + 15;
+    const blockTimeMs = Math.floor(Math.random() * 50 + 220); // ~250ms
+
+    const block = {
+      height: this.currentHeight,
+      blockHash,
+      proposer,
+      txCount,
+      blockTimeMs: `${blockTimeMs} ms`,
+      gossipStatus: 'PROPAGATED_TO_36_PEERS',
+      timestamp: new Date().toISOString(),
+    };
+
+    this.blocks.unshift(block);
+    return block;
+  }
+
+  getRecentBlocks() {
+    return this.blocks.slice(0, 10);
+  }
+}
+
+export const defaultAltoRunner = new AltoNodeRunner();
diff --git a/tools/alto-studio/src/server/app.js b/tools/alto-studio/src/server/app.js
new file mode 100644
index 00000000..c921c48b
--- /dev/null
+++ b/tools/alto-studio/src/server/app.js
@@ -0,0 +1,53 @@
+/**
+ * Alto Node Web Studio Server
+ */
+
+import express from 'express';
+import cors from 'cors';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { ALTO_CONFIG } from '../config.js';
+import { defaultAltoRunner } from '../core/node-runner.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const WEB_ROOT = path.join(__dirname, '../../web');
+
+const app = express();
+const PORT = process.env.PORT || 3420;
+
+app.use(cors());
+app.use(express.json());
+app.use(express.static(WEB_ROOT));
+
+// 1. Get Node Info & Crates
+app.get('/api/config', (req, res) => {
+  res.json({
+    node: ALTO_CONFIG.node,
+    crates: ALTO_CONFIG.crates,
+    metrics: ALTO_CONFIG.networkMetrics,
+  });
+});
+
+// 2. Produce Alto Block
+app.post('/api/node/produce', (req, res) => {
+  const block = defaultAltoRunner.produceBlock();
+  res.json({ success: true, block });
+});
+
+// 3. Get Chain Blocks
+app.get('/api/node/blocks', (req, res) => {
+  res.json(defaultAltoRunner.getRecentBlocks());
+});
+
+if (process.env.NODE_ENV !== 'test') {
+  app.listen(PORT, () => {
+    console.log(`\n======================================================`);
+    console.log(`🎶 Commonware Alto Reference Blockchain Studio Running!`);
+    console.log(`🌐 Web Dashboard: http://localhost:${PORT}`);
+    console.log(`⚡ Reference Implementation: Sub-Second Simplex Consensus`);
+    console.log(`======================================================\n`);
+  });
+}
+
+export default app;
diff --git a/tools/alto-studio/tests/node.test.js b/tools/alto-studio/tests/node.test.js
new file mode 100644
index 00000000..31c2c475
--- /dev/null
+++ b/tools/alto-studio/tests/node.test.js
@@ -0,0 +1,22 @@
+/**
+ * Alto Node Unit Tests
+ */
+
+import { defaultAltoRunner } from '../src/core/node-runner.js';
+
+async function runNodeTests() {
+  console.log('Testing Commonware Alto Reference Blockchain Node Runner...');
+
+  // 1. Produce Block
+  const block = defaultAltoRunner.produceBlock();
+  if (!block.blockHash || !block.blockTimeMs) {
+    throw new Error('Alto block production failed');
+  }
+
+  console.log(`✅ Alto Reference Node Block Produced (#${block.height} @ ${block.blockTimeMs})!`);
+}
+
+runNodeTests().catch(e => {
+  console.error('❌ Node Test Failed:', e);
+  process.exit(1);
+});
diff --git a/tools/alto-studio/tests/run-all.js b/tools/alto-studio/tests/run-all.js
new file mode 100644
index 00000000..6dc74536
--- /dev/null
+++ b/tools/alto-studio/tests/run-all.js
@@ -0,0 +1,5 @@
+/**
+ * Master Test Runner for alto-studio
+ */
+
+import './node.test.js';
diff --git a/tools/alto-studio/web/app.js b/tools/alto-studio/web/app.js
new file mode 100644
index 00000000..02abfb90
--- /dev/null
+++ b/tools/alto-studio/web/app.js
@@ -0,0 +1,98 @@
+/**
+ * Commonware Alto Studio Client Logic
+ */
+
+let isAutoProducing = false;
+let autoInterval = null;
+
+document.addEventListener('DOMContentLoaded', () => {
+  initTabs();
+  loadConfig();
+  initListeners();
+});
+
+function initTabs() {
+  const tabs = document.querySelectorAll('.nav-tab');
+  tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+      document.querySelectorAll('.nav-tab').forEach(t => t.classList.toggle('active', t === tab));
+      document.querySelectorAll('.tab-pane').forEach(p => p.classList.toggle('active', p.id === `tab-${tab.dataset.tab}`));
+    });
+  });
+}
+
+async function loadConfig() {
+  try {
+    const res = await fetch('/api/config');
+    const data = await res.json();
+
+    document.getElementById('header-height').textContent = `Height: #${data.metrics.currentHeight.toLocaleString()}`;
+
+    const grid = document.getElementById('crates-container');
+    grid.innerHTML = '';
+
+    data.crates.forEach(c => {
+      const card = document.createElement('div');
+      card.className = 'crate-card';
+      card.innerHTML = `
+        <div class="crate-title">${c.name}</div>
+        <div class="crate-desc">${c.description}</div>
+      `;
+      grid.appendChild(card);
+    });
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+function initListeners() {
+  document.getElementById('btn-produce-block').addEventListener('click', produceBlock);
+
+  const autoBtn = document.getElementById('btn-toggle-auto');
+  autoBtn.addEventListener('click', () => {
+    if (isAutoProducing) {
+      clearInterval(autoInterval);
+      isAutoProducing = false;
+      autoBtn.textContent = '▶️ Start Auto-Block Production (4 blocks/sec)';
+      autoBtn.className = 'btn btn-gradient btn-lg';
+    } else {
+      isAutoProducing = true;
+      autoBtn.textContent = '⏸️ Pause Alto Block Production';
+      autoBtn.className = 'btn btn-secondary btn-lg';
+      produceBlock();
+      autoInterval = setInterval(produceBlock, 250); // 250ms per block!
+    }
+  });
+}
+
+async function produceBlock() {
+  try {
+    const res = await fetch('/api/node/produce', { method: 'POST' });
+    const data = await res.json();
+    if (data.success) {
+      appendBlockRow(data.block);
+    }
+  } catch (e) {
+    console.warn(e);
+  }
+}
+
+function appendBlockRow(block) {
+  const container = document.getElementById('blocks-container');
+  const empty = container.querySelector('.empty-state');
+  if (empty) container.innerHTML = '';
+
+  const row = document.createElement('div');
+  row.className = 'ledger-row';
+  row.innerHTML = `
+    <div>
+      <div style="font-weight: 700; color: #fff;">Block #${block.height.toLocaleString()}</div>
+      <div class="mono text-muted" style="font-size: 0.72rem;">Proposer: ${block.proposer.slice(0, 14)}...</div>
+    </div>
+    <div style="text-align: right;">
+      <div style="color: #ea580c; font-weight: 700; font-family: var(--font-mono);">${block.blockTimeMs} Block Time</div>
+      <div class="mono text-muted" style="font-size: 0.72rem;">${block.txCount} txs • ${block.gossipStatus}</div>
+    </div>
+  `;
+  container.insertBefore(row, container.firstChild);
+}
diff --git a/tools/alto-studio/web/index.html b/tools/alto-studio/web/index.html
new file mode 100644
index 00000000..f5c46432
--- /dev/null
+++ b/tools/alto-studio/web/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Alto Studio • Commonware Reference Blockchain Node</title>
+  <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=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <!-- Header -->
+  <header class="app-header">
+    <div class="logo-area">
+      <div class="logo-badge">
+        <span class="logo-glow"></span>
+        <svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
+        </svg>
+      </div>
+      <div>
+        <h1 class="brand-title">COMMONWARE <span class="badge-alto">ALTO NODE</span></h1>
+        <p class="brand-subtitle">Rust Reference Blockchain & Sub-Second Simplex Benchmark Harness</p>
+      </div>
+    </div>
+
+    <!-- Connected Peer Pill -->
+    <div class="peer-pill">
+      <span class="pulse-dot"></span>
+      <span>36 Active P2P Peers</span>
+      <span class="block-tag" id="header-height">Height: #148,520</span>
+    </div>
+  </header>
+
+  <!-- Navigation Tabs -->
+  <nav class="nav-tabs">
+    <button class="nav-tab active" data-tab="node">
+      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
+      Reference Node Block Runner
+    </button>
+    <button class="nav-tab" data-tab="crates">
+      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
+      Alto Crates Architecture
+    </button>
+  </nav>
+
+  <!-- Main Content -->
+  <main class="main-content">
+    <!-- Tab 1: Node Runner -->
+    <section id="tab-node" class="tab-pane active">
+      <div class="hero-card">
+        <div class="hero-content">
+          <div class="pill-highlight">🎶 High-Performance Rust Reference Chain</div>
+          <h2>Sub-Second Block Production & Peer Mesh</h2>
+          <p>
+            Built using the Commonware monorepo primitives, Alto demonstrates sub-second block propagation (~250ms target) across an authenticated P2P node mesh.
+          </p>
+        </div>
+      </div>
+
+      <div class="layout-grid mt-4">
+        <!-- Control Card -->
+        <div class="card">
+          <div class="card-header">
+            <h3>⚡ Produce Alto Block</h3>
+            <button class="btn btn-primary btn-sm" id="btn-produce-block">Produce Block</button>
+          </div>
+          <p class="text-muted" style="font-size: 0.85rem;">Simulate real-time block production and P2P gossip propagation.</p>
+          <div class="mt-3">
+            <button class="btn btn-gradient btn-lg" id="btn-toggle-auto">
+              ▶️ Start Auto-Block Production (4 blocks/sec)
+            </button>
+          </div>
+        </div>
+
+        <!-- Live Chain Blocks Ledger -->
+        <div class="card">
+          <div class="card-header">
+            <h3>📜 Produced Chain Blocks</h3>
+          </div>
+          <div class="ledger-list" id="blocks-container">
+            <div class="empty-state">Click "Produce Block" to start block generation.</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Tab 2: Crates -->
+    <section id="tab-crates" class="tab-pane">
+      <div class="card">
+        <div class="card-header">
+          <h3>🎶 Alto Rust Architecture Crates</h3>
+        </div>
+        <div class="crates-grid" id="crates-container"></div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="app-footer">
+    <p>Alto Studio • Commonware Ecosystem Reference Implementation • Open Source</p>
+  </footer>
+
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/tools/alto-studio/web/styles.css b/tools/alto-studio/web/styles.css
new file mode 100644
index 00000000..05ed8ba6
--- /dev/null
+++ b/tools/alto-studio/web/styles.css
@@ -0,0 +1,292 @@
+/* ==========================================================================
+   Commonware Alto Studio Styles (Dark Fire Orange & Cyan Glassmorphism)
+   ========================================================================== */
+
+:root {
+  --bg-dark: #070605;
+  --bg-card: rgba(22, 15, 10, 0.75);
+  --bg-input: rgba(16, 10, 7, 0.85);
+  --border-color: rgba(255, 255, 255, 0.08);
+
+  --fire-orange: #ea580c;
+  --fire-glow: rgba(234, 88, 12, 0.4);
+  --cyan: #06b6d4;
+
+  --text-main: #f8fafc;
+  --text-muted: #94a3b8;
+  --text-dim: #64748b;
+
+  --font-main: 'Outfit', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+  --radius: 14px;
+  --radius-sm: 8px;
+  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  background-color: var(--bg-dark);
+  background-image: 
+    radial-gradient(at 0% 0%, rgba(234, 88, 12, 0.18) 0px, transparent 50%),
+    radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.12) 0px, transparent 50%),
+    radial-gradient(at 50% 100%, rgba(194, 65, 12, 0.1) 0px, transparent 50%);
+  background-attachment: fixed;
+  color: var(--text-main);
+  font-family: var(--font-main);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 2.5rem;
+  border-bottom: 1px solid var(--border-color);
+  background: rgba(7, 6, 5, 0.85);
+  backdrop-filter: blur(16px);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.logo-area { display: flex; align-items: center; gap: 1rem; }
+
+.logo-badge {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, var(--fire-orange), var(--cyan));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 20px var(--fire-glow);
+}
+
+.logo-icon { width: 24px; height: 24px; color: #1a0802; }
+
+.brand-title {
+  font-size: 1.35rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.badge-alto {
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 2px 8px;
+  background: var(--fire-orange);
+  border-radius: 6px;
+  color: #fff;
+}
+
+.brand-subtitle { font-size: 0.82rem; color: var(--text-muted); }
+
+.peer-pill {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: rgba(234, 88, 12, 0.1);
+  border: 1px solid rgba(234, 88, 12, 0.3);
+  padding: 0.45rem 1rem;
+  border-radius: 30px;
+  font-size: 0.85rem;
+}
+
+.pulse-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #ea580c;
+  box-shadow: 0 0 10px #ea580c;
+}
+
+.block-tag {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: #ffedd5;
+}
+
+/* Nav Tabs */
+.nav-tabs {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.75rem 2.5rem;
+  background: rgba(16, 10, 7, 0.5);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.nav-tab {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--text-muted);
+  padding: 0.6rem 1.25rem;
+  border-radius: 10px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition);
+  font-family: var(--font-main);
+}
+
+.nav-tab:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.04); }
+
+.nav-tab.active {
+  color: #fff;
+  background: rgba(234, 88, 12, 0.15);
+  border-color: rgba(234, 88, 12, 0.4);
+  box-shadow: 0 0 15px rgba(234, 88, 12, 0.2);
+}
+
+/* Main */
+.main-content {
+  flex: 1;
+  max-width: 1250px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 2.5rem;
+}
+
+.tab-pane { display: none; animation: fadeIn 0.3s ease; }
+.tab-pane.active { display: block; }
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Hero */
+.hero-card {
+  background: linear-gradient(135deg, rgba(35, 18, 10, 0.75), rgba(18, 10, 6, 0.85));
+  border: 1px solid rgba(234, 88, 12, 0.25);
+  border-radius: var(--radius);
+  padding: 2.5rem;
+}
+
+.pill-highlight {
+  display: inline-block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #ffedd5;
+  background: rgba(234, 88, 12, 0.15);
+  border: 1px solid rgba(234, 88, 12, 0.3);
+  padding: 4px 12px;
+  border-radius: 20px;
+  margin-bottom: 1rem;
+}
+
+.hero-content h2 { font-size: 2rem; font-weight: 800; margin-bottom: 0.75rem; }
+.hero-content p { color: var(--text-muted); font-size: 1rem; }
+
+/* Grid Layout */
+.layout-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.4fr;
+  gap: 1.5rem;
+}
+
+/* Card */
+.card {
+  background: var(--bg-card);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  padding: 1.75rem;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.25rem;
+}
+
+/* Buttons */
+.btn {
+  padding: 0.65rem 1.35rem;
+  border-radius: 10px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: var(--font-main);
+  transition: var(--transition);
+  border: 1px solid transparent;
+}
+
+.btn-primary {
+  background: var(--fire-orange);
+  color: #fff;
+  box-shadow: 0 4px 15px var(--fire-glow);
+}
+
+.btn-primary:hover { background: #c2410c; }
+
+.btn-gradient {
+  background: linear-gradient(135deg, var(--fire-orange), var(--cyan));
+  color: #fff;
+  font-weight: 700;
+  box-shadow: 0 4px 20px rgba(234, 88, 12, 0.3);
+}
+
+.btn-gradient:hover { transform: translateY(-2px); }
+.btn-lg { padding: 0.85rem 1.85rem; font-size: 1rem; width: 100%; }
+.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.8rem; }
+
+/* Crates Grid */
+.crates-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.25rem;
+}
+
+.crate-card {
+  background: rgba(16, 10, 7, 0.6);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 1.25rem;
+}
+
+.crate-title { font-size: 1.15rem; font-weight: 700; color: #ffedd5; margin-bottom: 0.35rem; }
+.crate-desc { font-size: 0.85rem; color: var(--text-muted); }
+
+/* Ledger List */
+.ledger-list { display: flex; flex-direction: column; gap: 0.65rem; max-height: 400px; overflow-y: auto; }
+
+.ledger-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.85rem 1rem;
+  background: rgba(16, 10, 7, 0.5);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+}
+
+.mono { font-family: var(--font-mono); font-size: 0.8rem; }
+.empty-state { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.9rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 1rem; }
+.mt-4 { margin-top: 1.5rem; }
+.text-muted { color: var(--text-muted); font-size: 0.85rem; }
+
+/* Footer */
+.app-footer {
+  text-align: center;
+  padding: 1.5rem;
+  border-top: 1px solid var(--border-color);
+  font-size: 0.8rem;
+  color: var(--text-dim);
+  background: #040302;
+}