diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -1,1512 +1,1522 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TokenViz - Universal Tokenizer Visualizer</title>
-    <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.5.0"></script>
-    <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@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: #0a0a0f;
-            --bg-secondary: #12121a;
-            --bg-tertiary: #1a1a25;
-            --bg-card: #16161f;
-            --bg-hover: #1e1e2e;
-            --border-color: #2a2a3a;
-            --border-light: #3a3a4a;
-            --text-primary: #e8e8f0;
-            --text-secondary: #a0a0b8;
-            --text-muted: #6b6b80;
-            --accent: #6366f1;
-            --accent-hover: #818cf8;
-            --accent-glow: rgba(99, 102, 241, 0.15);
-            --success: #22c55e;
-            --warning: #f59e0b;
-            --error: #ef4444;
-            --token-colors: #ef4444, #f97316, #f59e0b, #84cc16, #22c55e, #14b8a6, #06b6d4, #3b82f6, #6366f1, #8b5cf6, #a855f7, #d946ef, #ec4899, #f43f5e;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            min-height: 100vh;
-            overflow-x: hidden;
-        }
-
-        /* Animated background mesh */
-        .bg-mesh {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 0;
-            pointer-events: none;
-            opacity: 0.4;
-        }
-
-        .bg-mesh::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: 
-                radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
-                radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
-                radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.04) 0%, transparent 50%);
-            animation: meshFloat 20s ease-in-out infinite;
-        }
-
-        @keyframes meshFloat {
-            0%, 100% { transform: translate(0, 0) rotate(0deg); }
-            33% { transform: translate(30px, -30px) rotate(1deg); }
-            66% { transform: translate(-20px, 20px) rotate(-1deg); }
-        }
-
-        .container {
-            position: relative;
-            z-index: 1;
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 2rem;
-        }
-
-        /* Header */
-        header {
-            text-align: center;
-            margin-bottom: 3rem;
-            padding-top: 1rem;
-        }
-
-        .logo {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.75rem;
-            margin-bottom: 1rem;
-        }
-
-        .logo-icon {
-            width: 40px;
-            height: 40px;
-            background: linear-gradient(135deg, var(--accent), #8b5cf6);
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.25rem;
-            box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
-        }
-
-        .logo h1 {
-            font-size: 1.75rem;
-            font-weight: 700;
-            background: linear-gradient(135deg, var(--text-primary), var(--accent));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .subtitle {
-            color: var(--text-secondary);
-            font-size: 0.95rem;
-            max-width: 600px;
-            margin: 0 auto;
-            line-height: 1.6;
-        }
-
-        /* Model Selector */
-        .model-section {
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-            border-radius: 16px;
-            padding: 1.5rem;
-            margin-bottom: 1.5rem;
-            backdrop-filter: blur(10px);
-        }
-
-        .section-title {
-            font-size: 0.875rem;
-            font-weight: 600;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            margin-bottom: 1rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .model-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 0.75rem;
-        }
-
-        .model-card {
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            padding: 1rem;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .model-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 2px;
-            background: linear-gradient(90deg, var(--accent), #8b5cf6);
-            transform: scaleX(0);
-            transform-origin: left;
-            transition: transform 0.3s ease;
-        }
-
-        .model-card:hover {
-            border-color: var(--border-light);
-            transform: translateY(-2px);
-            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
-        }
-
-        .model-card:hover::before {
-            transform: scaleX(1);
-        }
-
-        .model-card.active {
-            border-color: var(--accent);
-            background: var(--accent-glow);
-            box-shadow: 0 0 30px var(--accent-glow);
-        }
-
-        .model-card.active::before {
-            transform: scaleX(1);
-        }
-
-        .model-name {
-            font-weight: 600;
-            font-size: 0.9rem;
-            color: var(--text-primary);
-            margin-bottom: 0.25rem;
-        }
-
-        .model-org {
-            font-size: 0.75rem;
-            color: var(--text-muted);
-        }
-
-        .model-badge {
-            display: inline-block;
-            font-size: 0.65rem;
-            padding: 0.15rem 0.4rem;
-            border-radius: 4px;
-            background: rgba(99, 102, 241, 0.15);
-            color: var(--accent);
-            margin-top: 0.5rem;
-            font-weight: 500;
-        }
-
-        /* Custom Model Input */
-        .custom-model {
-            margin-top: 1rem;
-            display: flex;
-            gap: 0.75rem;
-            align-items: stretch;
-        }
-
-        .custom-model input {
-            flex: 1;
-            background: var(--bg-primary);
-            border: 1px solid var(--border-color);
-            border-radius: 10px;
-            padding: 0.75rem 1rem;
-            color: var(--text-primary);
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.85rem;
-            outline: none;
-            transition: all 0.3s ease;
-        }
-
-        .custom-model input:focus {
-            border-color: var(--accent);
-            box-shadow: 0 0 0 3px var(--accent-glow);
-        }
-
-        .custom-model input::placeholder {
-            color: var(--text-muted);
-        }
-
-        .btn {
-            background: linear-gradient(135deg, var(--accent), #8b5cf6);
-            color: white;
-            border: none;
-            border-radius: 10px;
-            padding: 0.75rem 1.5rem;
-            font-weight: 600;
-            font-size: 0.875rem;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            white-space: nowrap;
-        }
-
-        .btn:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
-        }
-
-        .btn:active {
-            transform: translateY(0);
-        }
-
-        .btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none;
-        }
-
-        .btn-secondary {
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border-color);
-            color: var(--text-secondary);
-        }
-
-        .btn-secondary:hover {
-            background: var(--bg-hover);
-            border-color: var(--border-light);
-            box-shadow: none;
-        }
-
-        /* Input Section */
-        .input-section {
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-            border-radius: 16px;
-            padding: 1.5rem;
-            margin-bottom: 1.5rem;
-        }
-
-        .input-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 1rem;
-        }
-
-        .input-stats {
-            display: flex;
-            gap: 1.5rem;
-            font-size: 0.8rem;
-            color: var(--text-muted);
-        }
-
-        .stat-item {
-            display: flex;
-            align-items: center;
-            gap: 0.35rem;
-        }
-
-        .stat-value {
-            color: var(--accent);
-            font-weight: 600;
-        }
-
-        textarea {
-            width: 100%;
-            background: var(--bg-primary);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            padding: 1rem;
-            color: var(--text-primary);
-            font-family: 'Inter', sans-serif;
-            font-size: 1rem;
-            line-height: 1.6;
-            resize: vertical;
-            min-height: 120px;
-            outline: none;
-            transition: all 0.3s ease;
-        }
-
-        textarea:focus {
-            border-color: var(--accent);
-            box-shadow: 0 0 0 3px var(--accent-glow);
-        }
-
-        textarea::placeholder {
-            color: var(--text-muted);
-        }
-
-        .input-actions {
-            display: flex;
-            gap: 0.75rem;
-            margin-top: 1rem;
-            flex-wrap: wrap;
-        }
-
-        /* Visualization Section */
-        .viz-section {
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-            border-radius: 16px;
-            padding: 1.5rem;
-            margin-bottom: 1.5rem;
-            min-height: 200px;
-        }
-
-        .viz-tabs {
-            display: flex;
-            gap: 0.5rem;
-            margin-bottom: 1.5rem;
-            border-bottom: 1px solid var(--border-color);
-            padding-bottom: 0.75rem;
-        }
-
-        .viz-tab {
-            background: none;
-            border: none;
-            color: var(--text-muted);
-            font-size: 0.875rem;
-            font-weight: 500;
-            padding: 0.5rem 1rem;
-            cursor: pointer;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-            position: relative;
-        }
-
-        .viz-tab:hover {
-            color: var(--text-secondary);
-            background: var(--bg-hover);
-        }
-
-        .viz-tab.active {
-            color: var(--accent);
-            background: var(--accent-glow);
-        }
-
-        /* Token Display */
-        .tokens-container {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.5rem;
-            align-items: flex-start;
-            font-family: 'JetBrains Mono', monospace;
-            line-height: 2;
-        }
-
-        .token {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            position: relative;
-            cursor: pointer;
-            transition: transform 0.2s ease;
-        }
-
-        .token:hover {
-            transform: translateY(-2px);
-            z-index: 10;
-        }
-
-        .token-box {
-            padding: 0.35rem 0.6rem;
-            border-radius: 8px;
-            font-size: 0.85rem;
-            font-weight: 500;
-            border: 1px solid transparent;
-            transition: all 0.2s ease;
-            position: relative;
-            min-width: 2rem;
-            text-align: center;
-        }
-
-        .token:hover .token-box {
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        }
-
-        .token-id {
-            font-size: 0.65rem;
-            color: var(--text-muted);
-            margin-top: 0.2rem;
-            font-family: 'JetBrains Mono', monospace;
-        }
-
-        .token-tooltip {
-            position: absolute;
-            bottom: calc(100% + 8px);
-            left: 50%;
-            transform: translateX(-50%) scale(0.9);
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border-light);
-            border-radius: 10px;
-            padding: 0.75rem;
-            font-size: 0.8rem;
-            white-space: nowrap;
-            opacity: 0;
-            pointer-events: none;
-            transition: all 0.2s ease;
-            z-index: 100;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-        }
-
-        .token:hover .token-tooltip {
-            opacity: 1;
-            transform: translateX(-50%) scale(1);
-        }
-
-        .token-tooltip::after {
-            content: '';
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border: 6px solid transparent;
-            border-top-color: var(--border-light);
-        }
-
-        .tooltip-row {
-            display: flex;
-            gap: 0.5rem;
-            align-items: center;
-        }
-
-        .tooltip-label {
-            color: var(--text-muted);
-            font-size: 0.75rem;
-        }
-
-        .tooltip-value {
-            color: var(--text-primary);
-            font-weight: 500;
-        }
-
-        /* Byte-level view */
-        .byte-view {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.85rem;
-            line-height: 1.8;
-        }
-
-        .byte-row {
-            display: flex;
-            gap: 0.25rem;
-            margin-bottom: 0.25rem;
-            align-items: center;
-        }
-
-        .byte-char {
-            width: 2rem;
-            text-align: center;
-            color: var(--text-secondary);
-        }
-
-        .byte-hex {
-            width: 2.5rem;
-            text-align: center;
-            color: var(--accent);
-            font-size: 0.8rem;
-        }
-
-        .byte-token {
-            padding: 0.15rem 0.4rem;
-            border-radius: 4px;
-            font-size: 0.8rem;
-            margin-left: 0.5rem;
-        }
-
-        /* ID List View */
-        .id-list {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.5rem;
-            font-family: 'JetBrains Mono', monospace;
-        }
-
-        .id-chip {
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            padding: 0.4rem 0.75rem;
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            transition: all 0.2s ease;
-        }
-
-        .id-chip:hover {
-            border-color: var(--accent);
-            color: var(--accent);
-        }
-
-        /* Comparison View */
-        .comparison-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 1rem;
-        }
-
-        .comparison-card {
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            padding: 1rem;
-        }
-
-        .comparison-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 0.75rem;
-            padding-bottom: 0.75rem;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .comparison-name {
-            font-weight: 600;
-            font-size: 0.9rem;
-        }
-
-        .comparison-count {
-            font-size: 0.8rem;
-            color: var(--text-muted);
-            background: var(--bg-primary);
-            padding: 0.2rem 0.5rem;
-            border-radius: 6px;
-        }
-
-        /* Stats Grid */
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 1rem;
-            margin-bottom: 1.5rem;
-        }
-
-        .stat-card {
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            padding: 1.25rem;
-            transition: all 0.3s ease;
-        }
-
-        .stat-card:hover {
-            border-color: var(--border-light);
-            transform: translateY(-2px);
-        }
-
-        .stat-icon {
-            width: 36px;
-            height: 36px;
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.1rem;
-            margin-bottom: 0.75rem;
-        }
-
-        .stat-card:nth-child(1) .stat-icon { background: rgba(99, 102, 241, 0.15); }
-        .stat-card:nth-child(2) .stat-icon { background: rgba(34, 197, 94, 0.15); }
-        .stat-card:nth-child(3) .stat-icon { background: rgba(245, 158, 11, 0.15); }
-        .stat-card:nth-child(4) .stat-icon { background: rgba(236, 72, 153, 0.15); }
-
-        .stat-label {
-            font-size: 0.8rem;
-            color: var(--text-muted);
-            margin-bottom: 0.25rem;
-        }
-
-        .stat-number {
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        /* Loading */
-        .loading-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(10, 10, 15, 0.9);
-            backdrop-filter: blur(8px);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            z-index: 1000;
-            transition: opacity 0.3s ease;
-        }
-
-        .loading-overlay.hidden {
-            opacity: 0;
-            pointer-events: none;
-        }
-
-        .spinner {
-            width: 48px;
-            height: 48px;
-            border: 3px solid var(--border-color);
-            border-top-color: var(--accent);
-            border-radius: 50%;
-            animation: spin 0.8s linear infinite;
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-
-        .loading-text {
-            margin-top: 1rem;
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-        }
-
-        .loading-subtext {
-            margin-top: 0.5rem;
-            color: var(--text-muted);
-            font-size: 0.8rem;
-        }
-
-        /* Error toast */
-        .toast {
-            position: fixed;
-            bottom: 2rem;
-            right: 2rem;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--error);
-            border-radius: 12px;
-            padding: 1rem 1.5rem;
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-            z-index: 1001;
-            transform: translateY(100px);
-            opacity: 0;
-            transition: all 0.3s ease;
-        }
-
-        .toast.show {
-            transform: translateY(0);
-            opacity: 1;
-        }
-
-        .toast-icon {
-            color: var(--error);
-            font-size: 1.25rem;
-        }
-
-        .toast-message {
-            color: var(--text-primary);
-            font-size: 0.9rem;
-        }
-
-        /* Responsive */
-        @media (max-width: 768px) {
-            .container {
-                padding: 1rem;
-            }
-
-            .model-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .stats-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .custom-model {
-                flex-direction: column;
-            }
-
-            .input-header {
-                flex-direction: column;
-                gap: 0.75rem;
-                align-items: flex-start;
-            }
-        }
-
-        /* Scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: var(--bg-primary);
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: var(--border-color);
-            border-radius: 4px;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--border-light);
-        }
-
-        /* Empty state */
-        .empty-state {
-            text-align: center;
-            padding: 3rem 1rem;
-            color: var(--text-muted);
-        }
-
-        .empty-state-icon {
-            font-size: 3rem;
-            margin-bottom: 1rem;
-            opacity: 0.5;
-        }
-
-        .empty-state-text {
-            font-size: 1rem;
-            margin-bottom: 0.5rem;
-        }
-
-        .empty-state-hint {
-            font-size: 0.85rem;
-            opacity: 0.7;
-        }
-
-        /* Token color classes */
-        .tc-0 { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; }
-        .tc-1 { background: rgba(249, 115, 22, 0.15); border-color: rgba(249, 115, 22, 0.3); color: #fdba74; }
-        .tc-2 { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.3); color: #fcd34d; }
-        .tc-3 { background: rgba(132, 204, 22, 0.15); border-color: rgba(132, 204, 22, 0.3); color: #bef264; }
-        .tc-4 { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.3); color: #86efac; }
-        .tc-5 { background: rgba(20, 184, 166, 0.15); border-color: rgba(20, 184, 166, 0.3); color: #5eead4; }
-        .tc-6 { background: rgba(6, 182, 212, 0.15); border-color: rgba(6, 182, 212, 0.3); color: #67e8f9; }
-        .tc-7 { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.3); color: #93c5fd; }
-        .tc-8 { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.3); color: #a5b4fc; }
-        .tc-9 { background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.3); color: #c4b5fd; }
-        .tc-10 { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.3); color: #d8b4fe; }
-        .tc-11 { background: rgba(217, 70, 239, 0.15); border-color: rgba(217, 70, 239, 0.3); color: #e9d5ff; }
-        .tc-12 { background: rgba(236, 72, 153, 0.15); border-color: rgba(236, 72, 153, 0.3); color: #f9a8d4; }
-        .tc-13 { background: rgba(244, 63, 94, 0.15); border-color: rgba(244, 63, 94, 0.3); color: #fda4af; }
-
-        .special-token .token-box {
-            background: rgba(99, 102, 241, 0.2) !important;
-            border-color: var(--accent) !important;
-            color: var(--accent-hover) !important;
-            font-style: italic;
-        }
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>TokenLens — LLM Tokenizer Playground</title>
+  <meta name="description" content="Visualize how large language models tokenize text. Powered by Transformers.js, runs entirely in your browser." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=JetBrains+Mono:wght@300;400;500;700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet" />
+
+  <style>
+    /* ─── Design Tokens ─────────────────────────────────── */
+    :root {
+      --bg:       #060b14;
+      --bg2:      #0b1220;
+      --bg3:      #101828;
+      --bg4:      #162035;
+      --border:   #1a2d4a;
+      --border2:  #243d60;
+      --glow:     #1f3d6e;
+      --text:     #dce8f8;
+      --text2:    #7899c0;
+      --text3:    #3d5a80;
+      --accent:   #4d9ef5;
+      --accent2:  #8b6af5;
+      --green:    #34d89a;
+      --amber:    #f5a623;
+      --red:      #f55577;
+
+      /* Token palette — 14 vivid colors for dark bg */
+      --t0:  #ff8080; --t0b:  rgba(255,128,128,.18);
+      --t1:  #ffb84d; --t1b:  rgba(255,184, 77,.18);
+      --t2:  #ffe066; --t2b:  rgba(255,224,102,.18);
+      --t3:  #7aed91; --t3b:  rgba(122,237,145,.18);
+      --t4:  #4ddfc0; --t4b:  rgba( 77,223,192,.18);
+      --t5:  #56c8f5; --t5b:  rgba( 86,200,245,.18);
+      --t6:  #748ef8; --t6b:  rgba(116,142,248,.18);
+      --t7:  #c484f8; --t7b:  rgba(196,132,248,.18);
+      --t8:  #f57cd4; --t8b:  rgba(245,124,212,.18);
+      --t9:  #fa8072; --t9b:  rgba(250,128,114,.18);
+      --t10: #8be08b; --t10b: rgba(139,224,139,.18);
+      --t11: #f0c040; --t11b: rgba(240,192, 64,.18);
+      --t12: #60d4e0; --t12b: rgba( 96,212,224,.18);
+      --t13: #e89060; --t13b: rgba(232,144, 96,.18);
+    }
+
+    /* ─── Reset ─────────────────────────────────────────── */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: 'DM Sans', sans-serif;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow-x: hidden;
+    }
+
+    /* ─── Background FX ─────────────────────────────────── */
+    #bg-canvas {
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      z-index: 0;
+    }
+    .bg-gradient {
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      z-index: 0;
+      background:
+        radial-gradient(ellipse 80% 50% at 20% 10%, rgba(77,158,245,.06) 0%, transparent 70%),
+        radial-gradient(ellipse 60% 40% at 80% 90%, rgba(139,106,245,.05) 0%, transparent 60%),
+        radial-gradient(ellipse 40% 30% at 60% 50%, rgba(52,216,154,.03) 0%, transparent 60%);
+    }
+    .dot-grid {
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      z-index: 0;
+      background-image: radial-gradient(circle, rgba(77,158,245,.12) 1px, transparent 1px);
+      background-size: 36px 36px;
+      mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 80%);
+    }
+
+    /* ─── Layout ─────────────────────────────────────────── */
+    #app {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+
+    /* ─── Header ─────────────────────────────────────────── */
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 32px;
+      height: 64px;
+      border-bottom: 1px solid var(--border);
+      background: rgba(6,11,20,.85);
+      backdrop-filter: blur(20px);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      text-decoration: none;
+      color: var(--text);
+    }
+    .logo-hex {
+      width: 34px;
+      height: 34px;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-family: 'JetBrains Mono', monospace;
+      font-weight: 700;
+      color: white;
+    }
+    .logo-name {
+      font-family: 'Bricolage Grotesque', sans-serif;
+      font-size: 20px;
+      font-weight: 700;
+      letter-spacing: -0.5px;
+      background: linear-gradient(135deg, #dce8f8 40%, var(--accent));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .logo-tag {
+      font-size: 10px;
+      font-family: 'JetBrains Mono', monospace;
+      color: var(--text3);
+      background: var(--bg3);
+      border: 1px solid var(--border);
+      padding: 2px 6px;
+      border-radius: 4px;
+      letter-spacing: .5px;
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+    .header-badge {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--text2);
+      font-family: 'JetBrains Mono', monospace;
+    }
+    .header-badge .dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: var(--green);
+      box-shadow: 0 0 8px var(--green);
+      animation: pulse-dot 2s ease-in-out infinite;
+    }
+    @keyframes pulse-dot {
+      0%,100% { opacity: 1; }
+      50% { opacity: .4; }
+    }
+
+    /* ─── Model Selector Bar ─────────────────────────────── */
+    .model-bar {
+      padding: 16px 32px;
+      border-bottom: 1px solid var(--border);
+      background: rgba(11,18,32,.7);
+      backdrop-filter: blur(12px);
+    }
+    .model-bar-label {
+      font-size: 11px;
+      font-family: 'JetBrains Mono', monospace;
+      color: var(--text3);
+      letter-spacing: 1.5px;
+      text-transform: uppercase;
+      margin-bottom: 10px;
+    }
+    .model-tabs {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: center;
+    }
+    .model-tab {
+      display: flex;
+      flex-direction: column;
+      padding: 8px 14px;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      background: var(--bg2);
+      cursor: pointer;
+      transition: all 0.2s ease;
+      position: relative;
+      overflow: hidden;
+      min-width: 110px;
+    }
+    .model-tab::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
+    .model-tab:hover {
+      border-color: var(--border2);
+      transform: translateY(-1px);
+    }
+    .model-tab.active {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 1px var(--accent), 0 0 20px rgba(77,158,245,.15);
+    }
+    .model-tab.active::before { opacity: .08; }
+    .model-tab-name {
+      font-family: 'Bricolage Grotesque', sans-serif;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text);
+      position: relative;
+    }
+    .model-tab-org {
+      font-size: 10px;
+      color: var(--text2);
+      font-family: 'JetBrains Mono', monospace;
+      position: relative;
+      margin-top: 1px;
+    }
+    .model-tab-vocab {
+      font-size: 10px;
+      color: var(--text3);
+      font-family: 'JetBrains Mono', monospace;
+      position: relative;
+    }
+    .model-org-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      display: inline-block;
+      margin-right: 4px;
+      position: relative;
+      top: -1px;
+    }
+
+    /* Custom model row */
+    .custom-model-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-top: 12px;
+    }
+    .custom-model-row label {
+      font-size: 11px;
+      color: var(--text2);
+      font-family: 'JetBrains Mono', monospace;
+      white-space: nowrap;
+    }
+    .custom-input {
+      flex: 1;
+      max-width: 380px;
+      background: var(--bg2);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--text);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 13px;
+      padding: 7px 12px;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+    .custom-input:focus { border-color: var(--accent); }
+    .custom-input::placeholder { color: var(--text3); }
+    .btn {
+      padding: 7px 16px;
+      border-radius: 8px;
+      border: 1px solid var(--border2);
+      background: linear-gradient(135deg, rgba(77,158,245,.15), rgba(139,106,245,.15));
+      color: var(--accent);
+      font-family: 'DM Sans', sans-serif;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+      white-space: nowrap;
+    }
+    .btn:hover {
+      background: linear-gradient(135deg, rgba(77,158,245,.25), rgba(139,106,245,.25));
+      border-color: var(--accent);
+    }
+    .btn:active { transform: scale(.97); }
+
+    /* ─── Main Split ─────────────────────────────────────── */
+    main {
+      flex: 1;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0;
+      min-height: 0;
+    }
+
+    /* ─── Left Panel (Input) ─────────────────────────────── */
+    .input-panel {
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+    }
+    .panel-header {
+      padding: 16px 24px 12px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .panel-title {
+      font-family: 'Bricolage Grotesque', sans-serif;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text2);
+      letter-spacing: .3px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .panel-title-icon {
+      width: 20px;
+      height: 20px;
+      background: var(--bg4);
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+    }
+
+    .sample-btns {
+      display: flex;
+      gap: 6px;
+    }
+    .sample-btn {
+      font-size: 11px;
+      padding: 4px 10px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: var(--bg2);
+      color: var(--text2);
+      cursor: pointer;
+      font-family: 'DM Sans', sans-serif;
+      transition: all .15s;
+    }
+    .sample-btn:hover {
+      border-color: var(--border2);
+      color: var(--text);
+    }
+
+    #input-area {
+      flex: 1;
+      width: 100%;
+      background: transparent;
+      border: none;
+      outline: none;
+      resize: none;
+      color: var(--text);
+      font-family: 'DM Sans', sans-serif;
+      font-size: 15px;
+      line-height: 1.7;
+      padding: 20px 24px;
+      min-height: 220px;
+    }
+    #input-area::placeholder { color: var(--text3); }
+
+    .char-counter {
+      padding: 8px 24px;
+      border-top: 1px solid var(--border);
+      font-size: 11px;
+      font-family: 'JetBrains Mono', monospace;
+      color: var(--text3);
+      text-align: right;
+    }
+
+    /* ─── Right Panel (Output) ───────────────────────────── */
+    .output-panel {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    /* Stats row */
+    .stats-row {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      border-bottom: 1px solid var(--border);
+    }
+    .stat-card {
+      padding: 16px 20px;
+      border-right: 1px solid var(--border);
+      position: relative;
+      overflow: hidden;
+    }
+    .stat-card:last-child { border-right: none; }
+    .stat-card::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, var(--accent), transparent);
+      opacity: 0;
+      transition: opacity .3s;
+    }
+    .stat-card.highlight::after { opacity: 1; }
+    .stat-label {
+      font-size: 10px;
+      font-family: 'JetBrains Mono', monospace;
+      color: var(--text3);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: 6px;
+    }
+    .stat-value {
+      font-family: 'Bricolage Grotesque', sans-serif;
+      font-size: 26px;
+      font-weight: 700;
+      color: var(--text);
+      line-height: 1;
+      transition: all .3s;
+    }
+    .stat-card:nth-child(1) .stat-value { color: var(--accent); }
+    .stat-card:nth-child(2) .stat-value { color: var(--green); }
+    .stat-card:nth-child(3) .stat-value { color: var(--amber); }
+    .stat-card:nth-child(4) .stat-value { color: var(--accent2); }
+    .stat-sub {
+      font-size: 10px;
+      color: var(--text3);
+      font-family: 'JetBrains Mono', monospace;
+      margin-top: 3px;
+    }
+
+    /* View toggle */
+    .view-toggle {
+      display: flex;
+      padding: 12px 20px;
+      border-bottom: 1px solid var(--border);
+      gap: 4px;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .toggle-group {
+      display: flex;
+      gap: 4px;
+      background: var(--bg2);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 3px;
+    }
+    .toggle-btn {
+      padding: 5px 14px;
+      border-radius: 6px;
+      border: none;
+      background: transparent;
+      color: var(--text2);
+      font-family: 'DM Sans', sans-serif;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all .15s;
+    }
+    .toggle-btn.active {
+      background: var(--bg4);
+      color: var(--text);
+      box-shadow: 0 1px 4px rgba(0,0,0,.3);
+    }
+    .special-toggle {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: var(--text2);
+    }
+    .toggle-switch {
+      width: 32px;
+      height: 18px;
+      background: var(--bg4);
+      border: 1px solid var(--border);
+      border-radius: 9px;
+      cursor: pointer;
+      position: relative;
+      transition: background .2s;
+    }
+    .toggle-switch::after {
+      content: '';
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--text3);
+      top: 2px;
+      left: 2px;
+      transition: all .2s;
+    }
+    .toggle-switch.on { background: rgba(77,158,245,.3); border-color: var(--accent); }
+    .toggle-switch.on::after { left: 16px; background: var(--accent); }
+
+    /* Token Display */
+    .token-display {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+      scrollbar-width: thin;
+      scrollbar-color: var(--border) transparent;
+    }
+
+    .placeholder-msg {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 200px;
+      gap: 16px;
+      color: var(--text3);
+    }
+    .placeholder-icon {
+      font-size: 40px;
+      filter: grayscale(1) opacity(.3);
+    }
+    .placeholder-msg p {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 13px;
+      text-align: center;
+    }
+
+    /* ─── Token Visualization Views ───────────────────────── */
+
+    /* TEXT VIEW — inline colored token spans */
+    .token-text-view {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 14px;
+      line-height: 2.2;
+      word-break: break-all;
+    }
+    .tok {
+      display: inline;
+      border-radius: 4px;
+      padding: 1px 0;
+      cursor: default;
+      transition: filter .15s;
+      position: relative;
+    }
+    .tok:hover { filter: brightness(1.3); }
+    .tok-tooltip {
+      display: none;
+      position: absolute;
+      bottom: 110%;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--bg4);
+      border: 1px solid var(--border2);
+      border-radius: 6px;
+      padding: 5px 8px;
+      font-size: 11px;
+      white-space: nowrap;
+      z-index: 50;
+      pointer-events: none;
+      box-shadow: 0 4px 20px rgba(0,0,0,.5);
+    }
+    .tok:hover .tok-tooltip { display: block; }
+    .tok-tooltip-id { color: var(--accent); font-weight: 700; }
+    .tok-tooltip-text { color: var(--text2); }
+    .tok-space::before { content: '·'; opacity: .3; }
+    .tok-newline::before { content: '↵'; opacity: .5; }
+
+    /* ID VIEW — grid of token cards */
+    .token-id-view {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+    .tok-id-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid;
+      cursor: default;
+      transition: transform .15s, box-shadow .15s;
+      min-width: 52px;
+    }
+    .tok-id-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 16px rgba(0,0,0,.4);
+    }
+    .tok-id-top {
+      padding: 3px 6px;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 11px;
+      font-weight: 500;
+      width: 100%;
+      text-align: center;
+      border-bottom: 1px solid rgba(255,255,255,.08);
+    }
+    .tok-id-bottom {
+      padding: 2px 6px 3px;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 9px;
+      color: rgba(255,255,255,.4);
+      width: 100%;
+      text-align: center;
+    }
+
+    /* PROBABILITY VIEW placeholder */
+    .token-split-view {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+    .tok-split-row {
+      display: flex;
+      align-items: stretch;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 12px;
+    }
+    .tok-split-idx {
+      width: 38px;
+      text-align: center;
+      padding: 5px 4px;
+      font-size: 10px;
+      color: rgba(255,255,255,.3);
+      border-right: 1px solid rgba(255,255,255,.06);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .tok-split-text {
+      flex: 1;
+      padding: 5px 8px;
+      font-size: 13px;
+    }
+    .tok-split-id {
+      padding: 5px 8px;
+      font-size: 11px;
+      color: rgba(255,255,255,.45);
+      border-left: 1px solid rgba(255,255,255,.06);
+      display: flex;
+      align-items: center;
+    }
+
+    /* ─── Loading Overlay ────────────────────────────────── */
+    #loading-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(6,11,20,.92);
+      backdrop-filter: blur(8px);
+      z-index: 1000;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 24px;
+      transition: opacity .4s;
+    }
+    #loading-overlay.hidden { opacity: 0; pointer-events: none; }
+
+    .loading-spinner {
+      width: 56px;
+      height: 56px;
+      position: relative;
+    }
+    .loading-spinner::before,
+    .loading-spinner::after {
+      content: '';
+      position: absolute;
+      border-radius: 50%;
+      border: 2px solid transparent;
+    }
+    .loading-spinner::before {
+      inset: 0;
+      border-top-color: var(--accent);
+      animation: spin 1s linear infinite;
+    }
+    .loading-spinner::after {
+      inset: 8px;
+      border-top-color: var(--accent2);
+      animation: spin .7s linear infinite reverse;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    .loading-text {
+      font-family: 'Bricolage Grotesque', sans-serif;
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--text);
+    }
+    .loading-sub {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 12px;
+      color: var(--text2);
+      max-width: 360px;
+      text-align: center;
+    }
+    .loading-bar-wrap {
+      width: 300px;
+      height: 3px;
+      background: var(--bg3);
+      border-radius: 2px;
+      overflow: hidden;
+    }
+    .loading-bar {
+      height: 100%;
+      width: 0%;
+      background: linear-gradient(90deg, var(--accent), var(--accent2));
+      border-radius: 2px;
+      transition: width .3s;
+    }
+    .loading-file {
+      font-size: 11px;
+      font-family: 'JetBrains Mono', monospace;
+      color: var(--text3);
+    }
+
+    /* ─── Error Toast ────────────────────────────────────── */
+    #toast {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%) translateY(80px);
+      background: rgba(245,85,119,.15);
+      border: 1px solid rgba(245,85,119,.4);
+      color: var(--red);
+      padding: 10px 20px;
+      border-radius: 10px;
+      font-size: 13px;
+      font-family: 'JetBrains Mono', monospace;
+      z-index: 500;
+      transition: transform .3s;
+      max-width: 500px;
+      text-align: center;
+    }
+    #toast.show { transform: translateX(-50%) translateY(0); }
+
+    /* ─── Footer ─────────────────────────────────────────── */
+    footer {
+      padding: 12px 32px;
+      border-top: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 11px;
+      color: var(--text3);
+      font-family: 'JetBrains Mono', monospace;
+      background: rgba(6,11,20,.8);
+    }
+    footer a {
+      color: var(--text2);
+      text-decoration: none;
+      transition: color .15s;
+    }
+    footer a:hover { color: var(--accent); }
+
+    /* ─── Scrollbar ──────────────────────────────────────── */
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: var(--border2); }
+
+    /* ─── Model color indicator ──────────────────────────── */
+    .model-indicator {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      font-family: 'JetBrains Mono', monospace;
+      color: var(--text2);
+    }
+    .model-indicator-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    /* ─── Responsive ─────────────────────────────────────── */
+    @media (max-width: 900px) {
+      header { padding: 0 16px; }
+      .model-bar { padding: 12px 16px; }
+      main { grid-template-columns: 1fr; }
+      .input-panel { border-right: none; border-bottom: 1px solid var(--border); }
+      .stats-row { grid-template-columns: repeat(2, 1fr); }
+      .stat-card:nth-child(2) { border-right: none; }
+      footer { flex-direction: column; gap: 4px; text-align: center; }
+    }
+
+    /* ─── Animations ─────────────────────────────────────── */
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(6px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .fade-in {
+      animation: fadeIn .25s ease forwards;
+    }
+  </style>
+</head>
+<body>
 
-        /* Info panel */
-        .info-panel {
-            background: var(--bg-secondary);
-            border-radius: 10px;
-            padding: 1rem;
-            margin-top: 1rem;
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            border: 1px solid var(--border-color);
-        }
+<!-- Background -->
+<div class="bg-gradient"></div>
+<div class="dot-grid"></div>
 
-        .info-panel code {
-            background: var(--bg-primary);
-            padding: 0.15rem 0.35rem;
-            border-radius: 4px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.8rem;
-            color: var(--accent);
-        }
+<div id="app">
 
-        /* Copy button */
-        .copy-btn {
-            background: none;
-            border: 1px solid var(--border-color);
-            color: var(--text-muted);
-            border-radius: 6px;
-            padding: 0.4rem 0.75rem;
-            font-size: 0.8rem;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.35rem;
-        }
+  <!-- Header -->
+  <header>
+    <div class="logo">
+      <div class="logo-hex">T</div>
+      <span class="logo-name">TokenLens</span>
+      <span class="logo-tag">v1.0</span>
+    </div>
+    <div class="header-right">
+      <div class="header-badge">
+        <span class="dot"></span>
+        <span>runs in-browser · no server · no GPU</span>
+      </div>
+    </div>
+  </header>
 
-        .copy-btn:hover {
-            border-color: var(--accent);
-            color: var(--accent);
-        }
+  <!-- Model Selector Bar -->
+  <div class="model-bar">
+    <div class="model-bar-label">▸ select tokenizer</div>
+    <div class="model-tabs" id="model-tabs">
+      <!-- populated by JS -->
+    </div>
+    <div class="custom-model-row">
+      <label>HF model id:</label>
+      <input class="custom-input" id="custom-model-input" type="text"
+        placeholder="e.g. deepseek-ai/DeepSeek-V4-Pro  or  Xenova/gpt2" />
+      <button class="btn" id="custom-model-btn">Load ↗</button>
+    </div>
+  </div>
 
-        .copy-btn.copied {
-            border-color: var(--success);
-            color: var(--success);
-        }
-    </style>
-<base target="_blank">
-</head>
-<body>
-    <div class="bg-mesh"></div>
+  <!-- Main -->
+  <main>
 
-    <div class="loading-overlay" id="loadingOverlay">
-        <div class="spinner"></div>
-        <div class="loading-text">Loading tokenizer...</div>
-        <div class="loading-subtext" id="loadingSubtext">This may take a moment for large vocabularies</div>
+    <!-- Left: Input -->
+    <div class="input-panel">
+      <div class="panel-header">
+        <div class="panel-title">
+          <div class="panel-title-icon">✎</div>
+          Input Text
+        </div>
+        <div class="sample-btns">
+          <button class="sample-btn" data-sample="poetry">Poetry</button>
+          <button class="sample-btn" data-sample="code">Code</button>
+          <button class="sample-btn" data-sample="multilingual">Multi-lingual</button>
+          <button class="sample-btn" data-sample="numbers">Numbers</button>
+          <button class="sample-btn" data-sample="clear">Clear</button>
+        </div>
+      </div>
+      <textarea id="input-area"
+        placeholder="Type or paste text here to see how the tokenizer splits it into tokens…
+&#10;&#10;Try some special characters, code snippets, emojis 🦊, or multi-lingual text (日本語, العربية) to see how different models handle them differently."></textarea>
+      <div class="char-counter"><span id="char-count">0</span> characters</div>
     </div>
 
-    <div class="toast" id="toast">
-        <span class="toast-icon">⚠️</span>
-        <span class="toast-message" id="toastMessage">Error message</span>
-    </div>
+    <!-- Right: Output -->
+    <div class="output-panel">
 
-    <div class="container">
-        <header>
-            <div class="logo">
-                <div class="logo-icon">🔤</div>
-                <h1>TokenViz</h1>
-            </div>
-            <p class="subtitle">
-                Universal tokenizer visualization for any HuggingFace model. 
-                See exactly how LLMs break down text into tokens, IDs, and bytes — all in your browser with zero GPU required.
-            </p>
-        </header>
-
-        <!-- Model Selection -->
-        <div class="model-section">
-            <div class="section-title">
-                <span>🤖</span> Select Model
-            </div>
-            <div class="model-grid" id="modelGrid">
-                <!-- Models will be populated by JS -->
-            </div>
-            <div class="custom-model">
-                <input type="text" id="customModelInput" placeholder="custom-org/model-name (e.g., meta-llama/Llama-3.1-8B)" />
-                <button class="btn" id="loadCustomBtn" onclick="loadCustomModel()">
-                    <span>📥</span> Load
-                </button>
-            </div>
+      <!-- Stats -->
+      <div class="stats-row">
+        <div class="stat-card" id="sc-tokens">
+          <div class="stat-label">Tokens</div>
+          <div class="stat-value" id="stat-tokens">—</div>
+          <div class="stat-sub" id="stat-model-name">no model loaded</div>
         </div>
-
-        <!-- Stats -->
-        <div class="stats-grid" id="statsGrid" style="display: none;">
-            <div class="stat-card">
-                <div class="stat-icon">📊</div>
-                <div class="stat-label">Vocabulary Size</div>
-                <div class="stat-number" id="vocabSize">-</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-icon">🔢</div>
-                <div class="stat-label">Token Count</div>
-                <div class="stat-number" id="tokenCount">-</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-icon">📏</div>
-                <div class="stat-label">Char / Token Ratio</div>
-                <div class="stat-number" id="ratio">-</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-icon">⚡</div>
-                <div class="stat-label">Model Type</div>
-                <div class="stat-number" id="modelType">-</div>
-            </div>
+        <div class="stat-card" id="sc-chars">
+          <div class="stat-label">Characters</div>
+          <div class="stat-value" id="stat-chars">—</div>
+          <div class="stat-sub">total input</div>
         </div>
-
-        <!-- Input -->
-        <div class="input-section">
-            <div class="input-header">
-                <div class="section-title" style="margin: 0;">
-                    <span>✏️</span> Input Text
-                </div>
-                <div class="input-stats">
-                    <div class="stat-item">
-                        <span>Chars:</span>
-                        <span class="stat-value" id="charCount">0</span>
-                    </div>
-                    <div class="stat-item">
-                        <span>Words:</span>
-                        <span class="stat-value" id="wordCount">0</span>
-                    </div>
-                </div>
-            </div>
-            <textarea id="inputText" placeholder="Type or paste text here to see how the tokenizer breaks it down...
-
-Try: 'Hello world! 🌍 The quick brown fox jumps over 13 lazy dogs.'" oninput="handleInput()"></textarea>
-            <div class="input-actions">
-                <button class="btn btn-secondary" onclick="loadExample('simple')">Simple</button>
-                <button class="btn btn-secondary" onclick="loadExample('code')">Code</button>
-                <button class="btn btn-secondary" onclick="loadExample('multilingual')">Multilingual</button>
-                <button class="btn btn-secondary" onclick="loadExample('math')">Math</button>
-                <button class="btn btn-secondary" onclick="loadExample('emoji')">Emoji</button>
-                <button class="btn btn-secondary" onclick="clearText()">Clear</button>
-                <button class="btn" onclick="copyTokenIds()" id="copyBtn" style="margin-left: auto;">
-                    <span>📋</span> Copy IDs
-                </button>
-            </div>
+        <div class="stat-card" id="sc-words">
+          <div class="stat-label">Words</div>
+          <div class="stat-value" id="stat-words">—</div>
+          <div class="stat-sub">approx</div>
         </div>
-
-        <!-- Visualization -->
-        <div class="viz-section">
-            <div class="viz-tabs">
-                <button class="viz-tab active" onclick="switchTab('tokens')">🔤 Tokens</button>
-                <button class="viz-tab" onclick="switchTab('bytes')">💾 Bytes</button>
-                <button class="viz-tab" onclick="switchTab('ids')">🔢 IDs</button>
-                <button class="viz-tab" onclick="switchTab('compare')">⚖️ Compare</button>
-            </div>
-
-            <div id="vizContent">
-                <div class="empty-state">
-                    <div class="empty-state-icon">🔍</div>
-                    <div class="empty-state-text">Enter text above to visualize tokenization</div>
-                    <div class="empty-state-hint">Select a model and start typing to see the magic happen</div>
-                </div>
-            </div>
+        <div class="stat-card" id="sc-ratio">
+          <div class="stat-label">Chars / Token</div>
+          <div class="stat-value" id="stat-ratio">—</div>
+          <div class="stat-sub">efficiency</div>
         </div>
-
-        <!-- Info -->
-        <div class="info-panel">
-            <strong>💡 How it works:</strong> This app uses <code>@huggingface/transformers</code> (v3.5.0) to load tokenizer files directly from the HuggingFace Hub in your browser. 
-            It downloads <code>tokenizer.json</code> and <code>tokenizer_config.json</code> and runs tokenization entirely client-side with WebAssembly — no GPU or server required. 
-            Works with BPE, WordPiece, Unigram, and SentencePiece tokenizers from any model.
+      </div>
+
+      <!-- View toggle -->
+      <div class="view-toggle">
+        <div class="toggle-group">
+          <button class="toggle-btn active" data-view="text">Text View</button>
+          <button class="toggle-btn" data-view="ids">ID Grid</button>
+          <button class="toggle-btn" data-view="list">Token List</button>
         </div>
-    </div>
-
-    <script>
-        // ============================================
-        // CONFIGURATION & STATE
-        // ============================================
-        const PRESET_MODELS = [
-            { id: 'Xenova/gpt2', name: 'GPT-2', org: 'OpenAI', type: 'BPE' },
-            { id: 'Xenova/bert-base-uncased', name: 'BERT Base', org: 'Google', type: 'WordPiece' },
-            { id: 'Xenova/meta-llama/Llama-3.1-8B', name: 'Llama 3.1', org: 'Meta', type: 'BPE' },
-            { id: 'Xenova/mistralai/Mistral-7B-v0.1', name: 'Mistral 7B', org: 'Mistral AI', type: 'BPE' },
-            { id: 'Xenova/t5-small', name: 'T5 Small', org: 'Google', type: 'SentencePiece' },
-            { id: 'Xenova/deepseek-ai/DeepSeek-V3', name: 'DeepSeek V3', org: 'DeepSeek', type: 'BPE' },
-            { id: 'Xenova/Qwen/Qwen2.5-7B-Instruct', name: 'Qwen 2.5', org: 'Alibaba', type: 'BPE' },
-            { id: 'Xenova/microsoft/Phi-3-mini-4k-instruct', name: 'Phi-3 Mini', org: 'Microsoft', type: 'BPE' },
-            { id: 'Xenova/HuggingFaceTB/SmolLM2-360M-Instruct', name: 'SmolLM2', org: 'HuggingFace', type: 'BPE' },
-            { id: 'Xenova/google/gemma-2-2b-it', name: 'Gemma 2', org: 'Google', type: 'BPE' },
-            { id: 'Xenova/NousResearch/Nous-Hermes-2-Mixtral-8x7B-DPO', name: 'Nous Hermes', org: 'Nous', type: 'BPE' },
-            { id: 'Xenova/stabilityai/stablelm-2-1_6b', name: 'StableLM 2', org: 'Stability AI', type: 'BPE' },
-        ];
-
-        let currentModel = null;
-        let currentTokenizer = null;
-        let currentTokens = [];
-        let activeTab = 'tokens';
-        let compareMode = false;
-        let compareTokenizers = {};
-
-        // ============================================
-        // INITIALIZATION
-        // ============================================
-        function init() {
-            renderModelGrid();
-            // Auto-select first model
-            selectModel(PRESET_MODELS[0].id);
-        }
-
-        function renderModelGrid() {
-            const grid = document.getElementById('modelGrid');
-            grid.innerHTML = PRESET_MODELS.map(model => `
-                <div class="model-card ${currentModel === model.id ? 'active' : ''}" 
-                     onclick="selectModel('${model.id}')" 
-                     data-model="${model.id}">
-                    <div class="model-name">${model.name}</div>
-                    <div class="model-org">${model.org}</div>
-                    <span class="model-badge">${model.type}</span>
-                </div>
-            `).join('');
-        }
-
-        // ============================================
-        // MODEL LOADING
-        // ============================================
-        async function selectModel(modelId) {
-            if (currentModel === modelId && currentTokenizer) return;
-
-            showLoading(true, `Loading ${modelId}...`);
-
-            try {
-                const { AutoTokenizer } = window.transformers;
-
-                // Use from_pretrained with local files only if needed, but default to hub
-                const tokenizer = await AutoTokenizer.from_pretrained(modelId, {
-                    revision: 'main',
-                    // Allow remote since we're in browser
-                });
-
-                currentModel = modelId;
-                currentTokenizer = tokenizer;
-
-                // Update UI
-                document.querySelectorAll('.model-card').forEach(card => {
-                    card.classList.toggle('active', card.dataset.model === modelId);
-                });
-
-                // Update stats
-                updateModelStats();
-
-                // Re-tokenize if text exists
-                const text = document.getElementById('inputText').value;
-                if (text) {
-                    await tokenize(text);
-                }
-
-                showToast(`Loaded ${getModelName(modelId)} successfully`, 'success');
-            } catch (err) {
-                console.error('Failed to load tokenizer:', err);
-                showToast(`Failed to load ${modelId}: ${err.message}`, 'error');
-            } finally {
-                showLoading(false);
-            }
-        }
-
-        async function loadCustomModel() {
-            const input = document.getElementById('customModelInput');
-            const modelId = input.value.trim();
-
-            if (!modelId) {
-                showToast('Please enter a model ID', 'error');
-                return;
-            }
-
-            // Check if already in presets
-            const exists = PRESET_MODELS.find(m => m.id === modelId || m.id.endsWith(modelId));
-            if (exists) {
-                await selectModel(exists.id);
-                return;
-            }
-
-            showLoading(true, `Loading ${modelId}...`);
-
-            try {
-                const { AutoTokenizer } = window.transformers;
-                const tokenizer = await AutoTokenizer.from_pretrained(modelId);
-
-                // Add to presets
-                const newModel = {
-                    id: modelId,
-                    name: modelId.split('/').pop(),
-                    org: modelId.split('/')[0] || 'Custom',
-                    type: 'Unknown'
-                };
-                PRESET_MODELS.push(newModel);
-                renderModelGrid();
-
-                // Scroll to and select
-                await selectModel(modelId);
-                input.value = '';
-
-                showToast(`Loaded custom model ${modelId}`, 'success');
-            } catch (err) {
-                showToast(`Failed to load ${modelId}: ${err.message}`, 'error');
-            } finally {
-                showLoading(false);
-            }
-        }
-
-        function updateModelStats() {
-            if (!currentTokenizer) return;
-
-            const vocab = currentTokenizer.vocab || {};
-            const vocabSize = Object.keys(vocab).length || currentTokenizer.vocab_size || '?';
-
-            document.getElementById('vocabSize').textContent = vocabSize.toLocaleString();
-            document.getElementById('modelType').textContent = currentTokenizer.model_type || 'Unknown';
-            document.getElementById('statsGrid').style.display = 'grid';
-        }
-
-        // ============================================
-        // TOKENIZATION
-        // ============================================
-        async function handleInput() {
-            const text = document.getElementById('inputText').value;
-
-            // Update char/word count
-            document.getElementById('charCount').textContent = text.length;
-            document.getElementById('wordCount').textContent = text.trim() ? text.trim().split(/\s+/).length : 0;
-
-            if (!currentTokenizer) {
-                showToast('Please select a model first', 'error');
-                return;
-            }
-
-            await tokenize(text);
-        }
-
-        async function tokenize(text) {
-            if (!text || !currentTokenizer) return;
-
-            try {
-                // Get tokens with their text representation
-                const encoding = currentTokenizer.encode(text, { return_offsets_mapping: true });
-                const tokenIds = encoding.input_ids || encoding;
-
-                // Convert IDs to tokens
-                const tokens = [];
-                for (let i = 0; i < tokenIds.length; i++) {
-                    const id = tokenIds[i];
-                    let tokenText = '';
-
-                    try {
-                        // Try to decode single token
-                        tokenText = currentTokenizer.decode([id], { skip_special_tokens: false });
-                    } catch (e) {
-                        // Fallback: try to get from vocab
-                        const vocab = currentTokenizer.vocab || {};
-                        const reverseVocab = Object.fromEntries(
-                            Object.entries(vocab).map(([k, v]) => [v, k])
-                        );
-                        tokenText = reverseVocab[id] || `[${id}]`;
-                    }
-
-                    // Detect special tokens
-                    const specialTokens = currentTokenizer.special_tokens || [];
-                    const isSpecial = specialTokens.some(st => tokenText.includes(st)) || 
-                                     id === currentTokenizer.bos_token_id ||
-                                     id === currentTokenizer.eos_token_id ||
-                                     id === currentTokenizer.pad_token_id ||
-                                     id === currentTokenizer.unk_token_id;
-
-                    tokens.push({
-                        id: id,
-                        text: tokenText,
-                        isSpecial: isSpecial,
-                        index: i
-                    });
-                }
-
-                currentTokens = tokens;
-
-                // Update stats
-                document.getElementById('tokenCount').textContent = tokens.length;
-                document.getElementById('ratio').textContent = text.length > 0 
-                    ? (text.length / tokens.length).toFixed(2) 
-                    : '-';
-
-                // Render
-                renderVisualization();
-            } catch (err) {
-                console.error('Tokenization error:', err);
-                showToast(`Tokenization failed: ${err.message}`, 'error');
-            }
-        }
-
-        // ============================================
-        // VISUALIZATION RENDERING
-        // ============================================
-        function renderVisualization() {
-            const container = document.getElementById('vizContent');
-
-            if (!currentTokens.length) {
-                container.innerHTML = `
-                    <div class="empty-state">
-                        <div class="empty-state-icon">🔍</div>
-                        <div class="empty-state-text">Enter text above to visualize tokenization</div>
-                    </div>
-                `;
-                return;
-            }
-
-            switch (activeTab) {
-                case 'tokens':
-                    renderTokensView(container);
-                    break;
-                case 'bytes':
-                    renderBytesView(container);
-                    break;
-                case 'ids':
-                    renderIdsView(container);
-                    break;
-                case 'compare':
-                    renderCompareView(container);
-                    break;
-            }
-        }
-
-        function renderTokensView(container) {
-            const html = currentTokens.map((token, idx) => {
-                const colorClass = `tc-${idx % 14}`;
-                const specialClass = token.isSpecial ? 'special-token' : '';
-                const displayText = escapeHtml(token.text).replace(/ /g, '·').replace(/\n/g, '\n');
-
-                return `
-                    <div class="token ${specialClass}">
-                        <div class="token-tooltip">
-                            <div class="tooltip-row">
-                                <span class="tooltip-label">ID:</span>
-                                <span class="tooltip-value">${token.id}</span>
-                            </div>
-                            <div class="tooltip-row">
-                                <span class="tooltip-label">Text:</span>
-                                <span class="tooltip-value">"${escapeHtml(token.text)}"</span>
-                            </div>
-                            <div class="tooltip-row">
-                                <span class="tooltip-label">Index:</span>
-                                <span class="tooltip-value">${token.index}</span>
-                            </div>
-                            ${token.isSpecial ? '<div class="tooltip-row"><span class="tooltip-label">Type:</span><span class="tooltip-value" style="color: var(--accent)">Special Token</span></div>' : ''}
-                        </div>
-                        <div class="token-box ${colorClass}">${displayText || '·'}</div>
-                        <div class="token-id">${token.id}</div>
-                    </div>
-                `;
-            }).join('');
-
-            container.innerHTML = `<div class="tokens-container">${html}</div>`;
-        }
-
-        function renderBytesView(container) {
-            const text = document.getElementById('inputText').value;
-            const encoder = new TextEncoder();
-            const bytes = encoder.encode(text);
-
-            let html = '<div class="byte-view">';
-
-            // Group by tokens
-            let byteIdx = 0;
-            currentTokens.forEach((token, tIdx) => {
-                const tokenBytes = encoder.encode(token.text);
-                const colorClass = `tc-${tIdx % 14}`;
-
-                html += `<div style="margin-bottom: 0.5rem; padding: 0.5rem; background: var(--bg-secondary); border-radius: 8px;">`;
-                html += `<div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.25rem;">Token ${tIdx}: "${escapeHtml(token.text)}" (ID: ${token.id})</div>`;
-
-                for (let i = 0; i < tokenBytes.length; i++) {
-                    const byte = tokenBytes[i];
-                    const char = byte >= 32 && byte < 127 ? String.fromCharCode(byte) : '·';
-                    html += `
-                        <div class="byte-row">
-                            <span class="byte-char">${escapeHtml(char)}</span>
-                            <span class="byte-hex">0x${byte.toString(16).padStart(2, '0')}</span>
-                            <span class="byte-dec" style="width: 3rem; text-align: center; color: var(--text-muted); font-size: 0.8rem;">${byte}</span>
-                            <span class="byte-token ${colorClass}" style="font-size: 0.75rem; padding: 0.1rem 0.3rem;">Byte ${i}</span>
-                        </div>
-                    `;
-                }
-                html += '</div>';
-            });
-
-            html += '</div>';
-            container.innerHTML = html;
-        }
-
-        function renderIdsView(container) {
-            const ids = currentTokens.map(t => t.id);
-            const html = ids.map((id, idx) => `
-                <div class="id-chip" title="Index: ${idx}">${id}</div>
-            `).join('');
-
-            container.innerHTML = `
-                <div style="margin-bottom: 1rem;">
-                    <div class="copy-btn" onclick="copyToClipboard('[${ids.join(', ')}]')">
-                        <span>📋</span> Copy Array
-                    </div>
-                    <div class="copy-btn" onclick="copyToClipboard(${JSON.stringify(ids)})" style="margin-left: 0.5rem;">
-                        <span>📋</span> Copy JSON
-                    </div>
-                </div>
-                <div class="id-list">${html}</div>
-                <div style="margin-top: 1rem; padding: 1rem; background: var(--bg-secondary); border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--text-secondary); overflow-x: auto;">
-                    [${ids.join(', ')}]
-                </div>
-            `;
-        }
-
-        async function renderCompareView(container) {
-            // Load a few comparison tokenizers if not loaded
-            const compareModels = PRESET_MODELS.slice(0, 4).filter(m => m.id !== currentModel);
-
-            let html = '<div class="comparison-grid">';
-
-            // Current model
-            html += `
-                <div class="comparison-card" style="border-color: var(--accent);">
-                    <div class="comparison-header">
-                        <span class="comparison-name" style="color: var(--accent);">⭐ ${getModelName(currentModel)}</span>
-                        <span class="comparison-count">${currentTokens.length} tokens</span>
-                    </div>
-                    <div class="tokens-container" style="font-size: 0.75rem;">
-                        ${currentTokens.map((t, i) => `
-                            <div class="token">
-                                <div class="token-box tc-${i % 14}" style="padding: 0.2rem 0.4rem; font-size: 0.75rem;">${escapeHtml(t.text).replace(/ /g, '·') || '·'}</div>
-                            </div>
-                        `).join('')}
-                    </div>
-                </div>
-            `;
-
-            // Compare with others
-            const text = document.getElementById('inputText').value;
-            for (const model of compareModels) {
-                try {
-                    if (!compareTokenizers[model.id]) {
-                        const { AutoTokenizer } = window.transformers;
-                        compareTokenizers[model.id] = await AutoTokenizer.from_pretrained(model.id);
-                    }
-
-                    const tok = compareTokenizers[model.id];
-                    const encoding = tok.encode(text);
-                    const ids = encoding.input_ids || encoding;
-
-                    const otherTokens = [];
-                    for (const id of ids) {
-                        let txt = '';
-                        try {
-                            txt = tok.decode([id], { skip_special_tokens: false });
-                        } catch (e) {
-                            txt = `[${id}]`;
-                        }
-                        otherTokens.push(txt);
-                    }
-
-                    html += `
-                        <div class="comparison-card">
-                            <div class="comparison-header">
-                                <span class="comparison-name">${model.name}</span>
-                                <span class="comparison-count">${otherTokens.length} tokens</span>
-                            </div>
-                            <div class="tokens-container" style="font-size: 0.75rem;">
-                                ${otherTokens.map((t, i) => `
-                                    <div class="token">
-                                        <div class="token-box tc-${i % 14}" style="padding: 0.2rem 0.4rem; font-size: 0.75rem;">${escapeHtml(t).replace(/ /g, '·') || '·'}</div>
-                                    </div>
-                                `).join('')}
-                            </div>
-                        </div>
-                    `;
-                } catch (e) {
-                    html += `
-                        <div class="comparison-card">
-                            <div class="comparison-header">
-                                <span class="comparison-name">${model.name}</span>
-                            </div>
-                            <div style="color: var(--text-muted); font-size: 0.85rem;">Failed to load</div>
-                        </div>
-                    `;
-                }
-            }
-
-            html += '</div>';
-            container.innerHTML = html;
-        }
-
-        // ============================================
-        // UI HELPERS
-        // ============================================
-        function switchTab(tab) {
-            activeTab = tab;
-            document.querySelectorAll('.viz-tab').forEach(t => t.classList.remove('active'));
-            event.target.classList.add('active');
-            renderVisualization();
-        }
-
-        function loadExample(type) {
-            const examples = {
-                simple: "Hello world! This is a simple example of how tokenization works.",
-                code: "function fibonacci(n) {\n  if (n <= 1) return n;\n  return fibonacci(n - 1) + fibonacci(n - 2);\n}",
-                multilingual: "Hello 世界 🌍! Bonjour le monde! ¡Hola mundo! こんにちは世界!",
-                math: "The equation $E = mc^2$ shows that energy equals mass times the speed of light squared. ∫(x² + 3x)dx",
-                emoji: "🎉🎊 Party time! 🥳🎂🎈🎁🎄🎃🦃🎅🤶🧑‍🎄🎆🎇✨🎀🎋🎍🎎🎏🎐🎑🧧🎀🎁🎗️🎟️🎫🎖️🏆🏅🥇🥈🥉"
-            };
-
-            document.getElementById('inputText').value = examples[type];
-            handleInput();
-        }
-
-        function clearText() {
-            document.getElementById('inputText').value = '';
-            handleInput();
-        }
-
-        function copyTokenIds() {
-            if (!currentTokens.length) return;
-            const ids = currentTokens.map(t => t.id);
-            copyToClipboard(`[${ids.join(', ')}]`);
-        }
-
-        async function copyToClipboard(text) {
-            try {
-                await navigator.clipboard.writeText(text);
-                showToast('Copied to clipboard!', 'success');
-            } catch (err) {
-                // Fallback
-                const textarea = document.createElement('textarea');
-                textarea.value = text;
-                document.body.appendChild(textarea);
-                textarea.select();
-                document.execCommand('copy');
-                document.body.removeChild(textarea);
-                showToast('Copied to clipboard!', 'success');
-            }
-        }
-
-        function getModelName(modelId) {
-            const preset = PRESET_MODELS.find(m => m.id === modelId);
-            return preset ? preset.name : modelId.split('/').pop();
-        }
-
-        function escapeHtml(text) {
-            const div = document.createElement('div');
-            div.textContent = text;
-            return div.innerHTML;
-        }
-
-        // ============================================
-        // LOADING & TOAST
-        // ============================================
-        function showLoading(show, text = '') {
-            const overlay = document.getElementById('loadingOverlay');
-            const subtext = document.getElementById('loadingSubtext');
-
-            if (show) {
-                overlay.querySelector('.loading-text').textContent = text || 'Loading...';
-                overlay.classList.remove('hidden');
-            } else {
-                overlay.classList.add('hidden');
-            }
-        }
-
-        function showToast(message, type = 'error') {
-            const toast = document.getElementById('toast');
-            const msgEl = document.getElementById('toastMessage');
-            const iconEl = toast.querySelector('.toast-icon');
-
-            msgEl.textContent = message;
-
-            if (type === 'success') {
-                iconEl.textContent = '✅';
-                toast.style.borderColor = 'var(--success)';
-            } else {
-                iconEl.textContent = '⚠️';
-                toast.style.borderColor = 'var(--error)';
-            }
-
-            toast.classList.add('show');
-            setTimeout(() => toast.classList.remove('show'), 3000);
-        }
-
-        // ============================================
-        // START
-        // ============================================
-        document.addEventListener('DOMContentLoaded', init);
+        <div class="model-indicator" id="model-indicator">
+          <div class="model-indicator-dot" id="model-dot" style="background:#3d5a80"></div>
+          <span id="model-indicator-label">no model</span>
+        </div>
+      </div>
 
-        // Handle Enter key in custom model input
-        document.getElementById('customModelInput')?.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') loadCustomModel();
-        });
-    </script>
+      <!-- Token display area -->
+      <div class="token-display" id="token-display">
+        <div class="placeholder-msg" id="placeholder">
+          <div class="placeholder-icon">⬡</div>
+          <p>Select a model above and type something<br>to see tokenization in action</p>
+        </div>
+      </div>
+
+    </div><!-- /output-panel -->
+  </main>
+
+  <footer>
+    <span>TokenLens — Powered by <a href="https://github.com/xenova/transformers.js" target="_blank">Transformers.js</a> · Runs entirely in your browser</span>
+    <span>Hover tokens to see IDs · Add models via custom input above</span>
+  </footer>
+
+</div><!-- /app -->
+
+<!-- Loading Overlay -->
+<div id="loading-overlay">
+  <div class="loading-spinner"></div>
+  <div class="loading-text" id="loading-title">Loading Tokenizer</div>
+  <div class="loading-sub" id="loading-sub">Downloading tokenizer files from Hugging Face Hub…<br>This may take a moment on first load. Files are cached in your browser.</div>
+  <div class="loading-bar-wrap">
+    <div class="loading-bar" id="loading-bar"></div>
+  </div>
+  <div class="loading-file" id="loading-file"></div>
+</div>
+
+<!-- Toast -->
+<div id="toast"></div>
+
+<!-- ─────────────────────────────────────────────────────────
+     TokenLens Script
+     ─────────────────────────────────────────────────────────
+     Architecture:
+       • Uses @xenova/transformers (Transformers.js v2) via CDN
+       • Tokenizer files downloaded from HF Hub and cached in IndexedDB
+       • Extends easily: add entries to MODELS registry
+       • Supports BPE, WordPiece, SentencePiece, Unigram tokenizers
+     ─────────────────────────────────────────────────────────── -->
+<script type="module">
+
+import { AutoTokenizer, env }
+  from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
+
+// ── Config ────────────────────────────────────────────────
+env.allowLocalModels = false;
+// Use HF CDN for model files
+env.useBrowserCache  = true;
+
+// ── Model Registry ─────────────────────────────────────────
+// Add any HuggingFace model ID here — tokenizer.json + tokenizer_config.json
+// are the only files downloaded (no weights, no GPU needed).
+const MODELS = [
+  {
+    id:    'Xenova/gpt2',
+    name:  'GPT-2',
+    org:   'OpenAI',
+    color: '#10a37f',
+    vocab: '50k',
+    type:  'BPE',
+    desc:  'Classic GPT-2 BPE tokenizer'
+  },
+  {
+    id:    'Xenova/gpt-4',
+    name:  'GPT-4',
+    org:   'OpenAI',
+    color: '#10a37f',
+    vocab: '100k',
+    type:  'tiktoken cl100k',
+    desc:  'Used by GPT-3.5 & GPT-4'
+  },
+  {
+    id:    'Xenova/llama-tokenizer',
+    name:  'LLaMA 2',
+    org:   'Meta',
+    color: '#0466de',
+    vocab: '32k',
+    type:  'SP-BPE',
+    desc:  'SentencePiece BPE — LLaMA / LLaMA-2'
+  },
+  {
+    id:    'Xenova/mistral-tokenizer-v1',
+    name:  'Mistral',
+    org:   'Mistral AI',
+    color: '#ff7722',
+    vocab: '32k',
+    type:  'SP-BPE',
+    desc:  'Mistral 7B v0.1 tokenizer'
+  },
+  {
+    id:    'Xenova/bert-base-uncased',
+    name:  'BERT',
+    org:   'Google',
+    color: '#4285f4',
+    vocab: '30k',
+    type:  'WordPiece',
+    desc:  'BERT-base uncased WordPiece'
+  },
+  {
+    id:    'Xenova/t5-base',
+    name:  'T5',
+    org:   'Google',
+    color: '#34a853',
+    vocab: '32k',
+    type:  'Unigram',
+    desc:  'T5 SentencePiece Unigram'
+  },
+  {
+    id:    'Xenova/claude-tokenizer',
+    name:  'Claude',
+    org:   'Anthropic',
+    color: '#cc785c',
+    vocab: '~100k',
+    type:  'BPE',
+    desc:  "Anthropic Claude's tokenizer"
+  },
+  {
+    id:    'Xenova/roberta-base',
+    name:  'RoBERTa',
+    org:   'Meta',
+    color: '#1a73e8',
+    vocab: '50k',
+    type:  'BPE',
+    desc:  'RoBERTa byte-level BPE'
+  },
+];
+
+// ── Token Color Palette ────────────────────────────────────
+const PALETTE = [
+  { text: '#ff8080', bg: 'rgba(255,128,128,.18)', border: 'rgba(255,128,128,.35)' },
+  { text: '#ffb84d', bg: 'rgba(255,184, 77,.18)', border: 'rgba(255,184, 77,.35)' },
+  { text: '#ffe066', bg: 'rgba(255,224,102,.18)', border: 'rgba(255,224,102,.35)' },
+  { text: '#7aed91', bg: 'rgba(122,237,145,.18)', border: 'rgba(122,237,145,.35)' },
+  { text: '#4ddfc0', bg: 'rgba( 77,223,192,.18)', border: 'rgba( 77,223,192,.35)' },
+  { text: '#56c8f5', bg: 'rgba( 86,200,245,.18)', border: 'rgba( 86,200,245,.35)' },
+  { text: '#748ef8', bg: 'rgba(116,142,248,.18)', border: 'rgba(116,142,248,.35)' },
+  { text: '#c484f8', bg: 'rgba(196,132,248,.18)', border: 'rgba(196,132,248,.35)' },
+  { text: '#f57cd4', bg: 'rgba(245,124,212,.18)', border: 'rgba(245,124,212,.35)' },
+  { text: '#fa8072', bg: 'rgba(250,128,114,.18)', border: 'rgba(250,128,114,.35)' },
+  { text: '#8be08b', bg: 'rgba(139,224,139,.18)', border: 'rgba(139,224,139,.35)' },
+  { text: '#f0c040', bg: 'rgba(240,192, 64,.18)', border: 'rgba(240,192, 64,.35)' },
+  { text: '#60d4e0', bg: 'rgba( 96,212,224,.18)', border: 'rgba( 96,212,224,.35)' },
+  { text: '#e89060', bg: 'rgba(232,144, 96,.18)', border: 'rgba(232,144, 96,.35)' },
+];
+
+// ── Sample texts ───────────────────────────────────────────
+const SAMPLES = {
+  poetry: `Two roads diverged in a yellow wood,
+And sorry I could not travel both
+And be one traveler, long I stood
+And looked down one as far as I could
+To where it bent in the undergrowth;
+
+— Robert Frost, "The Road Not Taken"`,
+
+  code: `async function fetchData(url, retries = 3) {
+  for (let i = 0; i < retries; i++) {
+    try {
+      const res = await fetch(url);
+      if (!res.ok) throw new Error(\`HTTP \${res.status}\`);
+      return await res.json();
+    } catch (e) {
+      if (i === retries - 1) throw e;
+      await new Promise(r => setTimeout(r, 1000 * 2 ** i));
+    }
+  }
+}`,
+
+  multilingual: `English: The quick brown fox jumps over the lazy dog.
+日本語: 吾輩は猫である。名前はまだない。
+中文: 春眠不觉晓，处处闻啼鸟。
+العربية: اللغة العربية جميلة ومعبرة.
+Ελληνικά: Η γνώση είναι δύναμη.
+Emoji: 🌍 🦊 ⚡ 🎯 🧬 🤖 🦋`,
+
+  numbers: `π ≈ 3.14159265358979323846
+e ≈ 2.71828182845904523536
+φ ≈ 1.61803398874989484820
+1,000,000 × $42.99 = $42,990,000.00
+2024-01-15T08:30:00.000Z
+IPv4: 192.168.1.1 | IPv6: ::1`,
+
+  clear: ''
+};
+
+// ── State ──────────────────────────────────────────────────
+let activeTokenizer = null;
+let activeModel     = null;
+let tokenizerCache  = {};   // modelId → tokenizer
+let currentView     = 'text';
+let showSpecial     = false;
+let debounceTimer   = null;
+
+// ── DOM References ─────────────────────────────────────────
+const $overlay     = document.getElementById('loading-overlay');
+const $loadTitle   = document.getElementById('loading-title');
+const $loadSub     = document.getElementById('loading-sub');
+const $loadBar     = document.getElementById('loading-bar');
+const $loadFile    = document.getElementById('loading-file');
+const $modelTabs   = document.getElementById('model-tabs');
+const $input       = document.getElementById('input-area');
+const $charCount   = document.getElementById('char-count');
+const $display     = document.getElementById('token-display');
+const $placeholder = document.getElementById('placeholder');
+const $stTokens    = document.getElementById('stat-tokens');
+const $stChars     = document.getElementById('stat-chars');
+const $stWords     = document.getElementById('stat-words');
+const $stRatio     = document.getElementById('stat-ratio');
+const $stModelName = document.getElementById('stat-model-name');
+const $modelDot    = document.getElementById('model-dot');
+const $modelLabel  = document.getElementById('model-indicator-label');
+const $toast       = document.getElementById('toast');
+const $customInput = document.getElementById('custom-model-input');
+const $customBtn   = document.getElementById('custom-model-btn');
+
+// ── Utilities ──────────────────────────────────────────────
+
+function showOverlay(title, sub) {
+  $loadTitle.textContent = title;
+  $loadSub.textContent   = sub;
+  $loadBar.style.width   = '0%';
+  $loadFile.textContent  = '';
+  $overlay.classList.remove('hidden');
+}
+
+function hideOverlay() {
+  $overlay.classList.add('hidden');
+}
+
+function showToast(msg, duration = 5000) {
+  $toast.textContent = msg;
+  $toast.classList.add('show');
+  setTimeout(() => $toast.classList.remove('show'), duration);
+}
+
+function setStats(tokens, text) {
+  const chars = text.length;
+  const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+  const ratio = tokens > 0 && chars > 0 ? (chars / tokens).toFixed(2) : '—';
+
+  $stTokens.textContent = tokens > 0 ? tokens.toLocaleString() : '—';
+  $stChars.textContent  = chars > 0  ? chars.toLocaleString()  : '—';
+  $stWords.textContent  = words > 0  ? words.toLocaleString()  : '—';
+  $stRatio.textContent  = ratio;
+
+  // Pulse animation
+  ['sc-tokens','sc-chars','sc-words','sc-ratio'].forEach(id => {
+    const el = document.getElementById(id);
+    el.classList.remove('highlight');
+    void el.offsetWidth;
+    el.classList.add('highlight');
+  });
+}
+
+// ── Decode raw token string for display ───────────────────
+// Handles BPE Ġ prefix, SentencePiece ▁ prefix, byte tokens, etc.
+function decodeTokenString(raw) {
+  if (!raw) return '';
+  // BPE space prefix
+  let s = raw.replace(/^Ġ/, ' ').replace(/Ġ/g, ' ');
+  // SentencePiece space prefix
+  s = s.replace(/^▁/, ' ').replace(/▁/g, ' ');
+  // Newline representation
+  s = s.replace(/Ċ/g, '\n');
+  // Carriage return
+  s = s.replace(/\r/g, '');
+  // Byte tokens like <0xAB>
+  s = s.replace(/<0x([0-9A-Fa-f]{2})>/g, (_, hex) => {
+    const code = parseInt(hex, 16);
+    return code < 128 ? String.fromCharCode(code) : `[0x${hex}]`;
+  });
+  return s;
+}
+
+// ── Tokenize ───────────────────────────────────────────────
+async function tokenize(text) {
+  if (!activeTokenizer || !text.trim()) {
+    $display.innerHTML = '';
+    $display.appendChild($placeholder);
+    $placeholder.style.display = 'flex';
+    setStats(0, text);
+    return;
+  }
+
+  try {
+    $placeholder.style.display = 'none';
+
+    // Run tokenizer — only tokenize, no special tokens by default
+    const encoded = await activeTokenizer(text, {
+      add_special_tokens: showSpecial,
+      return_offsets_mapping: false,
+    });
+
+    const ids = Array.from(encoded.input_ids.data);
+
+    // Get raw token strings
+    let rawTokens;
+    try {
+      rawTokens = activeTokenizer.model.convert_ids_to_tokens(ids);
+    } catch {
+      // Fallback: decode each token individually
+      rawTokens = await Promise.all(
+        ids.map(id => activeTokenizer.decode([id], { skip_special_tokens: false }))
+      );
+    }
+
+    // Pair: { id, raw, display }
+    const tokens = ids.map((id, i) => ({
+      id,
+      raw:     rawTokens[i] || '',
+      display: decodeTokenString(rawTokens[i] || ''),
+    }));
+
+    setStats(tokens.length, text);
+    renderView(tokens);
+
+  } catch (err) {
+    console.error('Tokenization error:', err);
+    showToast('Tokenization error: ' + err.message);
+  }
+}
+
+// ── Render Views ───────────────────────────────────────────
+
+function renderView(tokens) {
+  if (currentView === 'text') renderTextView(tokens);
+  else if (currentView === 'ids') renderIdView(tokens);
+  else if (currentView === 'list') renderListView(tokens);
+}
+
+function renderTextView(tokens) {
+  const container = document.createElement('div');
+  container.className = 'token-text-view fade-in';
+
+  tokens.forEach((tok, i) => {
+    const c = PALETTE[i % PALETTE.length];
+    const span = document.createElement('span');
+    span.className = 'tok';
+    span.style.background   = c.bg;
+    span.style.color         = c.text;
+    span.style.borderBottom  = `2px solid ${c.border}`;
+
+    // Display text — handle spaces and newlines visually
+    const disp = tok.display;
+    if (disp === ' ') {
+      span.innerHTML = '&nbsp;';
+    } else if (disp === '\n') {
+      span.innerHTML = '↵<br>';
+    } else if (disp === '\t') {
+      span.innerHTML = '→&nbsp;&nbsp;&nbsp;';
+    } else {
+      span.textContent = disp;
+    }
+
+    // Tooltip
+    const tip = document.createElement('div');
+    tip.className = 'tok-tooltip';
+
+    const rawEsc = tok.raw
+      .replace(/&/g,'&amp;')
+      .replace(/</g,'&lt;')
+      .replace(/>/g,'&gt;');
+
+    tip.innerHTML =
+      `<span class="tok-tooltip-id">#${tok.id}</span> · ` +
+      `<span class="tok-tooltip-text">${rawEsc || '(empty)'}</span>`;
+    span.appendChild(tip);
+
+    container.appendChild(span);
+  });
+
+  $display.innerHTML = '';
+  $display.appendChild(container);
+}
+
+function renderIdView(tokens) {
+  const container = document.createElement('div');
+  container.className = 'token-id-view fade-in';
+
+  tokens.forEach((tok, i) => {
+    const c = PALETTE[i % PALETTE.length];
+    const card = document.createElement('div');
+    card.className  = 'tok-id-card';
+    card.style.background   = c.bg;
+    card.style.borderColor  = c.border;
+    card.title = `Raw: ${tok.raw}`;
+
+    const top = document.createElement('div');
+    top.className = 'tok-id-top';
+    top.style.color = c.text;
+    top.textContent = tok.id;
+
+    const bot = document.createElement('div');
+    bot.className = 'tok-id-bottom';
+    // Show abbreviated display text
+    const label = tok.display.slice(0, 8).replace(/\n/g,'↵').replace(/\t/g,'→');
+    bot.textContent = label || '…';
+
+    card.appendChild(top);
+    card.appendChild(bot);
+    container.appendChild(card);
+  });
+
+  $display.innerHTML = '';
+  $display.appendChild(container);
+}
+
+function renderListView(tokens) {
+  const container = document.createElement('div');
+  container.className = 'token-split-view fade-in';
+
+  tokens.forEach((tok, i) => {
+    const c = PALETTE[i % PALETTE.length];
+    const row = document.createElement('div');
+    row.className = 'tok-split-row';
+    row.style.background  = c.bg;
+    row.style.borderColor = c.border;
+
+    const idx = document.createElement('div');
+    idx.className = 'tok-split-idx';
+    idx.textContent = i;
+
+    const text = document.createElement('div');
+    text.className = 'tok-split-text';
+    text.style.color = c.text;
+    const disp = tok.display.replace(/\n/g,'↵').replace(/\t/g,'→') || '(empty)';
+    text.textContent = disp;
+
+    const id = document.createElement('div');
+    id.className = 'tok-split-id';
+    id.textContent = tok.id;
+
+    row.appendChild(idx);
+    row.appendChild(text);
+    row.appendChild(id);
+    container.appendChild(row);
+  });
+
+  $display.innerHTML = '';
+  $display.appendChild(container);
+}
+
+// ── Load Tokenizer ─────────────────────────────────────────
+
+async function loadModel(modelId) {
+  if (tokenizerCache[modelId]) {
+    activeTokenizer = tokenizerCache[modelId];
+    updateModelIndicator(modelId);
+    await runTokenize();
+    return;
+  }
+
+  const displayName = modelId.split('/').pop();
+  showOverlay(
+    `Loading ${displayName}`,
+    `Fetching tokenizer.json and tokenizer_config.json from Hugging Face Hub.\nFiles are cached in IndexedDB after first download.`
+  );
+
+  let lastProgress = 0;
+
+  try {
+    const tokenizer = await AutoTokenizer.from_pretrained(modelId, {
+      progress_callback: (info) => {
+        if (info.status === 'downloading') {
+          const pct = info.total
+            ? Math.round((info.loaded / info.total) * 100)
+            : lastProgress;
+          $loadBar.style.width = pct + '%';
+          $loadFile.textContent = info.file || '';
+          lastProgress = pct;
+        } else if (info.status === 'done') {
+          $loadBar.style.width = '100%';
+        }
+      }
+    });
+
+    tokenizerCache[modelId] = tokenizer;
+    activeTokenizer = tokenizer;
+    activeModel = modelId;
+
+    updateModelIndicator(modelId);
+    hideOverlay();
+    await runTokenize();
+
+  } catch (err) {
+    hideOverlay();
+    console.error('Failed to load tokenizer:', err);
+    showToast(`Failed to load "${modelId}": ${err.message}. Check the model ID and try again.`, 8000);
+  }
+}
+
+function updateModelIndicator(modelId) {
+  const preset = MODELS.find(m => m.id === modelId);
+  const color = preset ? preset.color : '#7899c0';
+  const name  = modelId.split('/').pop();
+  $modelDot.style.background = color;
+  $modelDot.style.boxShadow  = `0 0 6px ${color}`;
+  $modelLabel.textContent    = name;
+  $stModelName.textContent   = preset ? `${preset.org} · ${preset.type} · ${preset.vocab} vocab` : modelId;
+}
+
+// ── Build Model Tabs ───────────────────────────────────────
+
+function buildTabs() {
+  $modelTabs.innerHTML = '';
+  MODELS.forEach(m => {
+    const tab = document.createElement('div');
+    tab.className   = 'model-tab';
+    tab.dataset.id  = m.id;
+    tab.title       = m.desc;
+    tab.innerHTML = `
+      <div class="model-tab-name">${m.name}</div>
+      <div class="model-tab-org">
+        <span class="model-org-dot" style="background:${m.color}"></span>${m.org}
+      </div>
+      <div class="model-tab-vocab">${m.type} · ${m.vocab} vocab</div>
+    `;
+    tab.addEventListener('click', () => selectTab(m.id));
+    $modelTabs.appendChild(tab);
+  });
+}
+
+function selectTab(modelId) {
+  document.querySelectorAll('.model-tab').forEach(t => {
+    t.classList.toggle('active', t.dataset.id === modelId);
+  });
+  loadModel(modelId);
+}
+
+// ── View Toggle ────────────────────────────────────────────
+
+document.querySelectorAll('.toggle-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    currentView = btn.dataset.view;
+    runTokenize();
+  });
+});
+
+// ── Input Handling ─────────────────────────────────────────
+
+async function runTokenize() {
+  const text = $input.value;
+  $charCount.textContent = text.length;
+  await tokenize(text);
+}
+
+$input.addEventListener('input', () => {
+  $charCount.textContent = $input.value.length;
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(runTokenize, 280);
+});
+
+// ── Sample Buttons ─────────────────────────────────────────
+
+document.querySelectorAll('.sample-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const key = btn.dataset.sample;
+    $input.value = SAMPLES[key] ?? '';
+    $input.focus();
+    runTokenize();
+  });
+});
+
+// ── Custom Model ───────────────────────────────────────────
+
+async function loadCustomModel() {
+  const id = $customInput.value.trim();
+  if (!id) { showToast('Please enter a model ID'); return; }
+
+  // Deselect tabs
+  document.querySelectorAll('.model-tab').forEach(t => t.classList.remove('active'));
+  activeModel = id;
+  await loadModel(id);
+}
+
+$customBtn.addEventListener('click', loadCustomModel);
+$customInput.addEventListener('keydown', e => {
+  if (e.key === 'Enter') loadCustomModel();
+});
+
+// ── Init ───────────────────────────────────────────────────
+
+buildTabs();
+// Hide overlay on start (no model yet)
+$overlay.classList.add('hidden');
+
+// Default placeholder text
+$input.value = '';
+
+// Auto-select first model
+selectTab(MODELS[0].id);
+
+</script>
 </body>
 </html>
\ No newline at end of file
