Update index.html

index.html

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Self-Distillation</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
         * {
             margin: 0;
             padding: 0;
@@ -12,13 +14,17 @@
         }
 
         :root {
-            --bg-primary: #0a0a0f;
-            --bg-secondary: #12121a;
-            --bg-tertiary: #1a1a25;
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
+            --bg-primary: #08080d;
+            --bg-secondary: #0e0e16;
+            --bg-tertiary: #16161f;
+            --bg-card: #111119;
+            --text-primary: #e8e8f0;
+            --text-secondary: #6b6b80;
+            --text-muted: #44445a;
             --accent: #6366f1;
-            --border: #2a2a3a;
+            --accent-glow: rgba(99, 102, 241, 0.15);
+            --border: #1e1e2e;
+            --border-subtle: #181828;
         }
 
         body {
@@ -33,8 +39,8 @@
             display: flex;
             flex-direction: column;
             height: 100vh;
-            padding: 20px;
-            gap: 15px;
+            padding: 16px;
+            gap: 12px;
         }
 
         /* Header */
@@ -42,41 +48,94 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 15px;
+            padding: 14px 20px;
             background: var(--bg-secondary);
-            border-radius: 12px;
+            border-radius: 14px;
             border: 1px solid var(--border);
             flex-shrink: 0;
+            backdrop-filter: blur(10px);
+        }
+
+        .header-left {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .header-icon {
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.1rem;
+            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
         }
 
         .header h1 {
-            font-size: 1.5rem;
+            font-size: 1.3rem;
             font-weight: 600;
-            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            background: linear-gradient(135deg, #c7c8ff, #8b5cf6);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
+            letter-spacing: -0.02em;
         }
 
         .header-controls {
             display: flex;
-            gap: 10px;
+            gap: 8px;
         }
 
         .btn {
             padding: 8px 16px;
             border: none;
-            border-radius: 6px;
+            border-radius: 8px;
             cursor: pointer;
-            font-size: 0.9rem;
-            transition: all 0.2s;
+            font-size: 0.82rem;
+            font-weight: 500;
+            transition: all 0.2s ease;
+            font-family: inherit;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #6366f1, #7c3aed);
+            color: white;
+            box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
+        }
+        .btn-primary:hover {
+            background: linear-gradient(135deg, #5558e3, #6d28d9);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
         }
 
-        .btn-primary { background: var(--accent); color: white; }
-        .btn-primary:hover { background: #5558e3; transform: translateY(-1px); }
-        .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); }
-        .btn-secondary:hover { background: #252535; }
-        .btn-danger { background: #7f1d1d; color: #fca5a5; border: 1px solid #991b1b; }
-        .btn-danger:hover { background: #991b1b; }
+        .btn-secondary {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+            border: 1px solid var(--border);
+        }
+        .btn-secondary:hover {
+            background: #1e1e2e;
+            border-color: #2a2a40;
+        }
+
+        .btn-danger {
+            background: rgba(127, 29, 29, 0.5);
+            color: #fca5a5;
+            border: 1px solid rgba(153, 27, 27, 0.5);
+        }
+        .btn-danger:hover {
+            background: rgba(153, 27, 27, 0.6);
+        }
+
+        .btn-icon {
+            font-size: 1rem;
+            line-height: 1;
+        }
 
         /* Editor Section */
         .editor-section {
@@ -85,24 +144,88 @@
             flex-direction: column;
             position: relative;
             min-height: 200px;
+            gap: 8px;
         }
 
         .editor-wrapper {
             flex: 1;
             position: relative;
-            border-radius: 12px;
+            border-radius: 16px;
             border: 1px solid var(--border);
-            background: var(--bg-secondary);
+            background: var(--bg-card);
             overflow: hidden;
-            transition: box-shadow 0.3s ease;
+            transition: border-color 0.4s ease, box-shadow 0.4s ease;
+        }
+
+        .editor-wrapper:focus-within {
+            border-color: rgba(99, 102, 241, 0.3);
+        }
+
+        /* Ambient glow behind editor */
+        .editor-ambient {
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            pointer-events: none;
+            z-index: 0;
+            opacity: 0;
+            transition: opacity 0.6s ease;
+            filter: blur(80px);
+        }
+
+        .editor-wrapper.has-emotion .editor-ambient {
+            opacity: 1;
+        }
+
+        /* Word count / stats bar */
+        .editor-stats {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 8px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            background: linear-gradient(to top, var(--bg-card) 60%, transparent);
+            z-index: 3;
+            pointer-events: none;
+        }
+
+        .editor-stats .active-emotions {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+
+        .active-emotion-pill {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            padding: 2px 8px;
+            border-radius: 10px;
+            font-size: 0.7rem;
+            font-weight: 500;
+            background: rgba(255,255,255,0.05);
+            backdrop-filter: blur(4px);
+        }
+
+        .active-emotion-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
         }
 
         #editorOverlay {
             position: absolute;
             top: 0; left: 0; right: 0; bottom: 0;
-            padding: 20px;
-            font-size: 1.1rem;
-            line-height: 1.6;
+            padding: 24px 24px 40px 24px;
+            font-size: 1.05rem;
+            line-height: 1.75;
             font-family: inherit;
             color: var(--text-primary);
             white-space: pre-wrap;
@@ -111,27 +234,57 @@
             overflow-y: auto;
             pointer-events: none;
             z-index: 1;
+            letter-spacing: 0.01em;
         }
 
         #editorOverlay .word {
             pointer-events: auto;
             cursor: pointer;
-            transition: background-color 0.2s, border-radius 0.2s;
-            padding: 0 2px;
-            margin: 0 -2px;
-            border-radius: 3px;
+            transition: all 0.25s ease;
+            padding: 1px 3px;
+            margin: 0 -3px;
+            border-radius: 4px;
+            position: relative;
+        }
+
+        #editorOverlay .word:hover {
+            filter: brightness(1.3);
+            transform: scale(1.02);
+        }
+
+        #editorOverlay .word.has-emotion {
+            text-shadow: 0 0 20px currentColor;
+        }
+
+        /* Underline decoration for emotional words */
+        #editorOverlay .word.has-emotion::after {
+            content: '';
+            position: absolute;
+            bottom: -1px;
+            left: 3px;
+            right: 3px;
+            height: 2px;
+            border-radius: 1px;
+            background: currentColor;
+            opacity: 0.4;
+        }
+
+        .placeholder-text {
+            color: var(--text-muted) !important;
+            font-style: italic;
+            font-weight: 300;
         }
 
         #editor {
             width: 100%;
             height: 100%;
             background: transparent;
-            color: transparent; /* Hide standard text */
-            caret-color: var(--text-primary); /* Keep cursor visible */
+            color: transparent;
+            caret-color: #8b8bff;
             border: none;
-            padding: 20px;
-            font-size: 1.1rem;
-            line-height: 1.6;
+            padding: 24px 24px 40px 24px;
+            font-size: 1.05rem;
+            line-height: 1.75;
             font-family: inherit;
             resize: none;
             outline: none;
@@ -141,15 +294,47 @@
             white-space: pre-wrap;
             word-break: break-word;
             overflow-wrap: break-word;
+            letter-spacing: 0.01em;
+        }
+
+        /* Scrollbar styling */
+        #editor::-webkit-scrollbar,
+        #editorOverlay::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        #editor::-webkit-scrollbar-track,
+        #editorOverlay::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        #editor::-webkit-scrollbar-thumb,
+        #editorOverlay::-webkit-scrollbar-thumb {
+            background: var(--border);
+            border-radius: 3px;
+        }
+
+        #editor::-webkit-scrollbar-thumb:hover,
+        #editorOverlay::-webkit-scrollbar-thumb:hover {
+            background: #2a2a3a;
         }
 
         /* Tracks List */
         .tracks-container {
             display: flex;
-            gap: 10px;
+            gap: 8px;
             flex-wrap: wrap;
-            padding: 0 5px;
+            padding: 0 4px;
             min-height: 20px;
+            align-items: center;
+        }
+
+        .tracks-label {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            font-weight: 600;
         }
 
         .track-item {
@@ -157,24 +342,48 @@
             align-items: center;
             gap: 6px;
             background: var(--bg-tertiary);
-            padding: 4px 10px;
-            border-radius: 16px;
-            font-size: 0.85rem;
+            padding: 5px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
             border: 1px solid var(--border);
+            cursor: pointer;
+            transition: all 0.2s;
+            font-weight: 500;
+        }
+
+        .track-item:hover {
+            background: #1e1e2e;
+            border-color: #2a2a3a;
+        }
+
+        .track-item.active {
+            border-color: var(--accent);
+            box-shadow: 0 0 10px rgba(99, 102, 241, 0.15);
         }
 
         .track-color {
-            width: 10px;
-            height: 10px;
+            width: 8px;
+            height: 8px;
             border-radius: 50%;
+            box-shadow: 0 0 6px currentColor;
+        }
+
+        .track-point-count {
+            font-size: 0.7rem;
+            color: var(--text-muted);
+            background: rgba(255,255,255,0.05);
+            padding: 1px 6px;
+            border-radius: 8px;
         }
 
         .track-delete {
             cursor: pointer;
-            color: var(--text-secondary);
+            color: var(--text-muted);
             font-weight: bold;
-            margin-left: 4px;
+            margin-left: 2px;
             transition: color 0.2s;
+            font-size: 0.9rem;
+            line-height: 1;
         }
 
         .track-delete:hover { color: #ef4444; }
@@ -182,9 +391,9 @@
         /* Timeline Section */
         .timeline-section {
             background: var(--bg-secondary);
-            border-radius: 12px;
+            border-radius: 14px;
             border: 1px solid var(--border);
-            padding: 20px;
+            padding: 16px 20px;
             flex-shrink: 0;
         }
 
@@ -192,126 +401,300 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 15px;
+            margin-bottom: 12px;
             flex-wrap: wrap;
             gap: 10px;
         }
 
-        .timeline-title { font-size: 1.1rem; font-weight: 600; }
+        .timeline-title {
+            font-size: 0.95rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .timeline-title-icon {
+            font-size: 1rem;
+            opacity: 0.7;
+        }
 
-        .emotion-input-container { display: flex; gap: 10px; align-items: center; }
+        .emotion-input-container {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
 
         #emotionInput {
-            padding: 8px 12px;
+            padding: 8px 14px;
             background: var(--bg-tertiary);
             border: 1px solid var(--border);
-            border-radius: 6px;
+            border-radius: 8px;
             color: var(--text-primary);
-            font-size: 0.9rem;
+            font-size: 0.85rem;
             width: 200px;
+            font-family: inherit;
+            transition: border-color 0.2s;
+        }
+
+        #emotionInput:focus {
+            outline: none;
+            border-color: rgba(99, 102, 241, 0.4);
         }
 
         .timeline-canvas-container {
             position: relative;
             background: var(--bg-tertiary);
-            border-radius: 8px;
+            border-radius: 10px;
             overflow: hidden;
             cursor: crosshair;
+            border: 1px solid var(--border-subtle);
         }
 
-        #timelineCanvas { display: block; width: 100%; }
+        #timelineCanvas {
+            display: block;
+            width: 100%;
+        }
+
+        /* Y-axis labels */
+        .timeline-y-labels {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: 30px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 18px 0;
+            pointer-events: none;
+            z-index: 2;
+        }
+
+        .y-label {
+            font-size: 0.65rem;
+            color: var(--text-muted);
+            text-align: right;
+            padding-right: 6px;
+        }
 
         .instructions {
-            margin-top: 15px;
-            padding: 12px;
+            margin-top: 12px;
+            padding: 10px 14px;
             background: var(--bg-tertiary);
-            border-radius: 6px;
-            font-size: 0.8rem;
+            border-radius: 8px;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            line-height: 1.6;
+            border: 1px solid var(--border-subtle);
+        }
+
+        .instructions strong {
             color: var(--text-secondary);
-            line-height: 1.5;
         }
 
-        .instructions strong { color: var(--text-primary); }
+        .instructions kbd {
+            display: inline-block;
+            padding: 1px 5px;
+            font-size: 0.7rem;
+            font-family: inherit;
+            background: rgba(255,255,255,0.06);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            color: var(--text-secondary);
+        }
 
         /* Modal */
         .modal {
             display: none;
             position: fixed;
             inset: 0;
-            background: rgba(0, 0, 0, 0.8);
+            background: rgba(0, 0, 0, 0.85);
             z-index: 1000;
             justify-content: center;
             align-items: center;
+            backdrop-filter: blur(8px);
         }
 
         .modal.active { display: flex; }
 
         .modal-content {
             background: var(--bg-secondary);
-            border-radius: 12px;
+            border-radius: 16px;
             padding: 30px;
-            max-width: 500px;
+            max-width: 480px;
             width: 90%;
             border: 1px solid var(--border);
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+        }
+
+        .modal-content h2 {
+            margin-bottom: 8px;
+            font-size: 1.2rem;
+            font-weight: 600;
+        }
+
+        .modal-subtitle {
+            color: var(--text-muted);
+            font-size: 0.82rem;
+            margin-bottom: 20px;
+            line-height: 1.5;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 6px;
+            font-size: 0.82rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 10px 14px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 0.9rem;
+            font-family: inherit;
+            transition: border-color 0.2s;
         }
 
-        .modal-content h2 { margin-bottom: 20px; font-size: 1.3rem; }
+        .form-group input:focus {
+            outline: none;
+            border-color: rgba(99, 102, 241, 0.4);
+        }
 
-        .form-group { margin-bottom: 15px; }
-        .form-group label { display: block; margin-bottom: 5px; font-size: 0.9rem; color: var(--text-secondary); }
-        .form-group input { width: 100%; padding: 10px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 0.9rem; }
-        .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
+        .modal-actions {
+            display: flex;
+            gap: 10px;
+            justify-content: flex-end;
+            margin-top: 24px;
+        }
 
         /* Status */
         .status-bar {
             margin-top: 10px;
-            padding: 10px;
+            padding: 10px 14px;
             background: var(--bg-tertiary);
-            border-radius: 6px;
-            font-size: 0.85rem;
+            border-radius: 8px;
+            font-size: 0.82rem;
             color: var(--text-secondary);
             display: none;
+            border: 1px solid var(--border-subtle);
+            animation: statusFadeIn 0.3s ease;
+        }
+
+        @keyframes statusFadeIn {
+            from { opacity: 0; transform: translateY(5px); }
+            to { opacity: 1; transform: translateY(0); }
         }
+
         .status-bar.active { display: block; }
-        .status-bar.success { border-left: 3px solid #10b981; }
-        .status-bar.error { border-left: 3px solid #ef4444; }
+        .status-bar.success { border-left: 3px solid #10b981; color: #6ee7b7; }
+        .status-bar.error { border-left: 3px solid #ef4444; color: #fca5a5; }
+
+        /* Particle canvas for emotional ambient effect */
+        #particleCanvas {
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 0;
+            opacity: 0.6;
+        }
+
+        /* Emotion intensity bar on editor side */
+        .emotion-sidebar {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 4px;
+            height: 100%;
+            z-index: 3;
+            pointer-events: none;
+            border-radius: 0 16px 16px 0;
+            overflow: hidden;
+        }
+
+        .emotion-sidebar-fill {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            transition: height 0.3s ease, background 0.3s ease;
+            border-radius: 2px;
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
-            <h1>Self-Distillation</h1>
+            <div class="header-left">
+                <div class="header-icon">✦</div>
+                <h1>Self-Distillation</h1>
+            </div>
             <div class="header-controls">
-                <button class="btn btn-secondary" onclick="exportJSON()">Export JSON</button>
-                <button class="btn btn-danger" onclick="clearAll()">Clear All</button>
-                <button class="btn btn-secondary" onclick="showHFModal()">Push to HF</button>
+                <button class="btn btn-secondary" onclick="exportJSON()">
+                    <span class="btn-icon">↓</span> Export
+                </button>
+                <button class="btn btn-danger" onclick="clearAll()">
+                    <span class="btn-icon">✕</span> Clear
+                </button>
+                <button class="btn btn-primary" onclick="showHFModal()">
+                    <span class="btn-icon">⬆</span> Push to HF
+                </button>
             </div>
         </div>
 
         <div class="editor-section">
             <div class="editor-wrapper" id="editorWrapper">
+                <div class="editor-ambient" id="editorAmbient"></div>
+                <canvas id="particleCanvas"></canvas>
                 <div id="editorOverlay"></div>
-                <textarea id="editor" placeholder="Write your thoughts here..."></textarea>
+                <textarea id="editor" placeholder=""></textarea>
+                <div class="editor-stats" id="editorStats">
+                    <span id="wordCount">0 words</span>
+                    <div class="active-emotions" id="activeEmotionsDisplay"></div>
+                </div>
+                <div class="emotion-sidebar" id="emotionSidebar">
+                    <div class="emotion-sidebar-fill" id="emotionSidebarFill"></div>
+                </div>
+            </div>
+            <div class="tracks-container" id="tracksList">
+                <span class="tracks-label">Tracks</span>
             </div>
-            <div class="tracks-container" id="tracksList"></div>
         </div>
 
         <div class="timeline-section">
             <div class="timeline-header">
-                <div class="timeline-title">Emotional Timeline (Per Word)</div>
+                <div class="timeline-title">
+                    <span class="timeline-title-icon">◆</span>
+                    Emotional Timeline
+                </div>
                 <div class="emotion-input-container">
-                    <input type="text" id="emotionInput" placeholder="Enter emotion (e.g., Joy, Anxiety)">
-                    <button class="btn btn-primary" onclick="addEmotionTrack()">Add Track</button>
+                    <input type="text" id="emotionInput" placeholder="e.g., Joy, Anxiety, Wonder…">
+                    <button class="btn btn-primary" onclick="addEmotionTrack()">+ Add Track</button>
                 </div>
             </div>
-            
+
             <div class="timeline-canvas-container">
                 <canvas id="timelineCanvas"></canvas>
             </div>
 
             <div class="instructions">
-                <strong>Controls:</strong> Click timeline to add point • Drag vertically for intensity • Drag handles for fades • 
-                <strong>Hover</strong> points/words to see emotion • <strong>Double-click</strong> point to remove • <strong>Click</strong> colored word to jump cursor
+                <kbd>Click</kbd> timeline to add point · 
+                <kbd>Drag</kbd> vertically for intensity · 
+                <kbd>Drag</kbd> handles for fades · 
+                <kbd>Hover</kbd> points/words for details · 
+                <kbd>Double-click</kbd> to remove point · 
+                <kbd>Click</kbd> colored word to jump
             </div>
 
             <div class="status-bar" id="statusBar"></div>
@@ -321,7 +704,7 @@
     <div class="modal" id="hfModal">
         <div class="modal-content">
             <h2>Push to HuggingFace</h2>
-            <p style="color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px;">This will fetch existing data and append your new entry without overwriting.</p>
+            <p class="modal-subtitle">Fetch existing data and append your new entry without overwriting.</p>
             <div class="form-group">
                 <label>HF Token</label>
                 <input type="password" id="hfToken" placeholder="hf_...">
@@ -348,43 +731,121 @@
             dragging: false,
             dragType: null,
             dragStart: { x: 0, y: 0 },
-            cursorWordIndex: 0
+            cursorWordIndex: 0,
+            particles: [],
+            selectedTrackId: null
         };
 
         // DOM Elements
         const editor = document.getElementById('editor');
         const editorOverlay = document.getElementById('editorOverlay');
         const editorWrapper = document.getElementById('editorWrapper');
+        const editorAmbient = document.getElementById('editorAmbient');
+        const particleCanvasEl = document.getElementById('particleCanvas');
+        const particleCtx = particleCanvasEl.getContext('2d');
         const canvas = document.getElementById('timelineCanvas');
         const ctx = canvas.getContext('2d');
         const emotionInput = document.getElementById('emotionInput');
         const statusBar = document.getElementById('statusBar');
         const tracksList = document.getElementById('tracksList');
-
-        const colorPalette = ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f97316', '#eab308', '#22c55e', '#06b6d4', '#3b82f6', '#a855f7'];
+        const wordCountEl = document.getElementById('wordCount');
+        const activeEmotionsDisplay = document.getElementById('activeEmotionsDisplay');
+        const emotionSidebar = document.getElementById('emotionSidebar');
+        const emotionSidebarFill = document.getElementById('emotionSidebarFill');
+
+        const colorPalette = [
+            '#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f97316',
+            '#eab308', '#22c55e', '#06b6d4', '#3b82f6', '#a855f7',
+            '#14b8a6', '#f472b6', '#fb923c', '#a3e635'
+        ];
         let colorIndex = 0;
 
-        // Tooltip Setup
+        // Tooltip
         const tooltip = document.createElement('div');
-        tooltip.style.cssText = 'display:none; position:fixed; background:var(--bg-tertiary); color:var(--text-primary); padding:5px 10px; border-radius:4px; font-size:12px; pointer-events:none; z-index:100; border:1px solid var(--border); box-shadow: 0 4px 6px rgba(0,0,0,0.3);';
+        tooltip.style.cssText = `
+            display:none; position:fixed; 
+            background: rgba(14,14,22,0.95); 
+            color: #e8e8f0; 
+            padding: 6px 12px; 
+            border-radius: 8px; 
+            font-size: 0.75rem; 
+            pointer-events: none; 
+            z-index: 100; 
+            border: 1px solid #2a2a3a; 
+            box-shadow: 0 8px 25px rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            font-family: 'Inter', sans-serif;
+            max-width: 250px;
+            line-height: 1.4;
+        `;
         document.body.appendChild(tooltip);
 
-        function showTooltip(text, x, y) {
-            tooltip.textContent = text;
+        function showTooltip(html, x, y) {
+            tooltip.innerHTML = html;
             tooltip.style.display = 'block';
-            tooltip.style.left = (x + 15) + 'px';
-            tooltip.style.top = (y - 10) + 'px';
+            const rect = tooltip.getBoundingClientRect();
+            let left = x + 15;
+            let top = y - 10;
+            if (left + rect.width > window.innerWidth - 10) left = x - rect.width - 15;
+            if (top + rect.height > window.innerHeight - 10) top = y - rect.height - 10;
+            tooltip.style.left = left + 'px';
+            tooltip.style.top = top + 'px';
         }
         function hideTooltip() { tooltip.style.display = 'none'; }
 
+        // Particles
+        function initParticleCanvas() {
+            const rect = editorWrapper.getBoundingClientRect();
+            particleCanvasEl.width = rect.width;
+            particleCanvasEl.height = rect.height;
+        }
+
+        function spawnParticles(color, intensity) {
+            const count = Math.floor(intensity * 3);
+            for (let i = 0; i < count; i++) {
+                state.particles.push({
+                    x: Math.random() * particleCanvasEl.width,
+                    y: Math.random() * particleCanvasEl.height,
+                    vx: (Math.random() - 0.5) * 0.3,
+                    vy: -Math.random() * 0.5 - 0.2,
+                    life: 1,
+                    decay: 0.003 + Math.random() * 0.005,
+                    size: Math.random() * 3 + 1,
+                    color: color
+                });
+            }
+        }
+
+        function updateParticles() {
+            particleCtx.clearRect(0, 0, particleCanvasEl.width, particleCanvasEl.height);
+
+            state.particles = state.particles.filter(p => p.life > 0);
+
+            state.particles.forEach(p => {
+                p.x += p.vx;
+                p.y += p.vy;
+                p.life -= p.decay;
+
+                const rgb = hexToRgb(p.color);
+                particleCtx.beginPath();
+                particleCtx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2);
+                particleCtx.fillStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${p.life * 0.4})`;
+                particleCtx.fill();
+            });
+
+            requestAnimationFrame(updateParticles);
+        }
+
         // Initialization
         function init() {
             loadFromLocalStorage();
             setupEventListeners();
             resizeCanvas();
+            initParticleCanvas();
             renderTracksList();
             updateOverlay();
             render();
+            updateParticles();
         }
 
         function setupEventListeners() {
@@ -395,14 +856,22 @@
                 editorOverlay.scrollTop = editor.scrollTop;
                 editorOverlay.scrollLeft = editor.scrollLeft;
             });
-            
+
             canvas.addEventListener('mousedown', handleCanvasMouseDown);
             canvas.addEventListener('mousemove', handleCanvasMouseMove);
             canvas.addEventListener('mouseup', handleCanvasMouseUp);
             canvas.addEventListener('mouseleave', () => { handleCanvasMouseUp(); hideTooltip(); });
             canvas.addEventListener('dblclick', handleCanvasDoubleClick);
-            
-            window.addEventListener('resize', () => { resizeCanvas(); render(); });
+
+            emotionInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') addEmotionTrack();
+            });
+
+            window.addEventListener('resize', () => {
+                resizeCanvas();
+                initParticleCanvas();
+                render();
+            });
         }
 
         // Text Handling
@@ -419,7 +888,6 @@
         function handleTextChange(e) {
             state.text = e.target.value;
             state.words = getWords(state.text);
-            // Clamp points if text is shortened
             state.tracks.forEach(track => {
                 track.points = track.points.filter(p => p.wordIndex < state.words.length);
             });
@@ -430,7 +898,7 @@
 
         function handleEditorClick() {
             const charIndex = editor.selectionStart;
-            let wordIdx = state.words.length; 
+            let wordIdx = state.words.length;
             for (let i = 0; i < state.words.length; i++) {
                 if (charIndex <= state.words[i].end) {
                     wordIdx = i;
@@ -438,24 +906,35 @@
                 }
             }
             state.cursorWordIndex = wordIdx;
-            updateEditorGlow();
+            updateEditorEffects();
             render();
         }
 
         function updateOverlay() {
             let html = '';
             let lastIndex = 0;
-            
+
+            if (state.words.length === 0) {
+                editorOverlay.innerHTML = '<span class="placeholder-text">Begin writing your thoughts here… emotions will paint the words as you map them.</span>';
+                wordCountEl.textContent = '0 words';
+                return;
+            }
+
             state.words.forEach((word, i) => {
-                const space = state.text.substring(lastIndex, word.start).replace(/ /g, '&nbsp;').replace(/\n/g, '<br>').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
+                const space = state.text.substring(lastIndex, word.start)
+                    .replace(/ /g, '&nbsp;')
+                    .replace(/\n/g, '<br>')
+                    .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
                 html += space;
-                
-                let bgStyle = '';
+
                 const emotionsAtWord = getActiveEmotionsAtWord(i);
+                let bgStyle = '';
+                let textColorStyle = '';
                 let titleText = '';
-                
+                let hasEmotion = false;
+
                 if (emotionsAtWord.length > 0) {
-                    let r=0, g=0, b=0, total=0;
+                    let r = 0, g = 0, b = 0, total = 0;
                     emotionsAtWord.forEach(e => {
                         const rgb = hexToRgb(e.color);
                         r += rgb.r * e.intensity;
@@ -463,24 +942,39 @@
                         b += rgb.b * e.intensity;
                         total += e.intensity;
                     });
-                    if(total > 0) {
-                        r = Math.round(r/total); g = Math.round(g/total); b = Math.round(b/total);
+                    if (total > 0) {
+                        r = Math.round(r / total);
+                        g = Math.round(g / total);
+                        b = Math.round(b / total);
                         const maxInt = Math.max(...emotionsAtWord.map(e => e.intensity));
-                        bgStyle = `background-color: rgba(${r}, ${g}, ${b}, ${Math.max(0.2, maxInt * 0.6)});`;
-                        titleText = emotionsAtWord.map(e => `${e.label} (${e.intensity.toFixed(2)})`).join(', ');
+                        const alpha = Math.max(0.08, maxInt * 0.35);
+                        bgStyle = `background: linear-gradient(135deg, rgba(${r},${g},${b},${alpha}), rgba(${r},${g},${b},${alpha * 0.5}));`;
+                        // Tint text color slightly toward emotion
+                        const textBlend = Math.min(0.6, maxInt * 0.5);
+                        const tr = Math.round(232 * (1 - textBlend) + r * textBlend);
+                        const tg = Math.round(232 * (1 - textBlend) + g * textBlend);
+                        const tb = Math.round(240 * (1 - textBlend) + b * textBlend);
+                        textColorStyle = `color: rgb(${tr},${tg},${tb});`;
+                        titleText = emotionsAtWord.map(e => `${e.label}: ${(e.intensity * 100).toFixed(0)}%`).join(', ');
+                        hasEmotion = true;
                     }
                 }
-                
+
                 const escapedText = word.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-                html += `<span class="word" data-index="${i}" style="${bgStyle}" title="${titleText}">${escapedText}</span>`;
+                const emotionClass = hasEmotion ? ' has-emotion' : '';
+                html += `<span class="word${emotionClass}" data-index="${i}" style="${bgStyle}${textColorStyle}" title="${titleText}">${escapedText}</span>`;
                 lastIndex = word.end;
             });
-            
-            const trailing = state.text.substring(lastIndex).replace(/ /g, '&nbsp;').replace(/\n/g, '<br>').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
+
+            const trailing = state.text.substring(lastIndex)
+                .replace(/ /g, '&nbsp;')
+                .replace(/\n/g, '<br>')
+                .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
             html += trailing;
-            
-            editorOverlay.innerHTML = html.trim() ? html : '<span style="color:var(--text-secondary)">Write your thoughts here...</span>';
-            
+
+            editorOverlay.innerHTML = html;
+            wordCountEl.textContent = `${state.words.length} word${state.words.length !== 1 ? 's' : ''}`;
+
             document.querySelectorAll('#editorOverlay .word').forEach(span => {
                 span.addEventListener('click', (e) => {
                     const wordIndex = parseInt(span.getAttribute('data-index'));
@@ -490,44 +984,57 @@
                     handleEditorClick();
                     e.stopPropagation();
                 });
-                
+
                 span.addEventListener('mousemove', (e) => {
                     const wordIndex = parseInt(span.getAttribute('data-index'));
                     const emotions = getActiveEmotionsAtWord(wordIndex);
-                    if (emotions.length > 0) showTooltip(emotions.map(em => `${em.label} (${em.intensity.toFixed(2)})`).join(', '), e.clientX, e.clientY);
-                    else hideTooltip();
+                    if (emotions.length > 0) {
+                        const word = state.words[wordIndex];
+                        let html = `<div style="margin-bottom:3px;font-weight:600;color:#fff;">"${word.text}"</div>`;
+                        emotions.forEach(em => {
+                            const pct = (em.intensity * 100).toFixed(0);
+                            html += `<div style="display:flex;align-items:center;gap:6px;margin-top:3px;">
+                                <span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:${em.color};box-shadow:0 0 4px ${em.color};"></span>
+                                <span>${em.label}</span>
+                                <span style="color:var(--text-muted);margin-left:auto;">${pct}%</span>
+                            </div>`;
+                        });
+                        showTooltip(html, e.clientX, e.clientY);
+                    } else {
+                        hideTooltip();
+                    }
                 });
                 span.addEventListener('mouseleave', hideTooltip);
             });
         }
 
-        // Canvas Setup & Coordinates
+        // Canvas Setup
         function resizeCanvas() {
             const container = canvas.parentElement;
             canvas.width = container.clientWidth;
-            canvas.height = 200;
+            canvas.height = 180;
         }
 
         function wordIndexToX(wordIndex) {
             const totalWords = state.words.length || 1;
-            const padding = 20, availableWidth = canvas.width - (padding * 2);
+            const padding = 30, availableWidth = canvas.width - (padding * 2);
             return padding + (wordIndex / totalWords) * availableWidth;
         }
 
         function xToWordIndex(x) {
-            const padding = 20, availableWidth = canvas.width - (padding * 2);
+            const padding = 30, availableWidth = canvas.width - (padding * 2);
             const totalWords = state.words.length || 1;
             const normalizedX = Math.max(0, Math.min(x - padding, availableWidth));
             return Math.round((normalizedX / availableWidth) * totalWords);
         }
 
         function intensityToY(intensity) {
-            const padding = 20, availableHeight = canvas.height - (padding * 2);
+            const padding = 25, availableHeight = canvas.height - (padding * 2);
             return padding + availableHeight - (intensity * availableHeight);
         }
 
         function yToIntensity(y) {
-            const padding = 20, availableHeight = canvas.height - (padding * 2);
+            const padding = 25, availableHeight = canvas.height - (padding * 2);
             const normalizedY = Math.max(padding, Math.min(y, canvas.height - padding));
             return 1 - ((normalizedY - padding) / availableHeight);
         }
@@ -541,22 +1048,32 @@
         function handleCanvasMouseDown(e) {
             const coords = getCanvasCoordinates(e);
             const clickedItem = findItemAtPosition(coords.x, coords.y);
-            
+
             if (clickedItem) {
                 state.selectedPoint = clickedItem;
                 state.dragging = true;
                 state.dragType = clickedItem.type;
                 state.dragStart = { x: coords.x, y: coords.y };
             } else {
-                const activeTrack = state.tracks[state.tracks.length - 1];
+                // Use selected track or last track
+                let activeTrack = state.tracks.find(t => t.id === state.selectedTrackId) || state.tracks[state.tracks.length - 1];
                 if (activeTrack) {
                     const wordIndex = xToWordIndex(coords.x);
-                    const newPoint = { id: Date.now(), wordIndex: wordIndex, intensity: Math.max(0, Math.min(1, yToIntensity(coords.y))), fadeIn: 0, fadeOut: 0 };
+                    const newPoint = {
+                        id: Date.now(),
+                        wordIndex: wordIndex,
+                        intensity: Math.max(0, Math.min(1, yToIntensity(coords.y))),
+                        fadeIn: 0,
+                        fadeOut: 0
+                    };
                     activeTrack.points.push(newPoint);
                     activeTrack.points.sort((a, b) => a.wordIndex - b.wordIndex);
                     state.selectedPoint = { type: 'point', point: newPoint, track: activeTrack };
-                    state.dragging = true; state.dragType = 'point';
-                    render(); updateOverlay(); saveToLocalStorage();
+                    state.dragging = true;
+                    state.dragType = 'point';
+                    render();
+                    updateOverlay();
+                    saveToLocalStorage();
                 }
             }
         }
@@ -566,8 +1083,17 @@
             if (!state.dragging) {
                 const item = findItemAtPosition(coords.x, coords.y);
                 if (item && item.type === 'point') {
-                    canvas.style.cursor = 'pointer';
-                    showTooltip(`${item.track.label} (Intensity: ${item.point.intensity.toFixed(2)})`, e.clientX, e.clientY);
+                    canvas.style.cursor = 'grab';
+                    const pct = (item.point.intensity * 100).toFixed(0);
+                    const wordText = state.words[item.point.wordIndex]?.text || '';
+                    showTooltip(`
+                        <div style="font-weight:600;color:${item.track.color};">${item.track.label}</div>
+                        <div style="margin-top:3px;">Intensity: ${pct}%</div>
+                        ${wordText ? `<div style="color:var(--text-muted);">Word: "${wordText}"</div>` : ''}
+                    `, e.clientX, e.clientY);
+                } else if (item) {
+                    canvas.style.cursor = 'ew-resize';
+                    showTooltip(`Drag to adjust ${item.type === 'fadeIn' ? 'fade in' : 'fade out'}`, e.clientX, e.clientY);
                 } else {
                     canvas.style.cursor = 'crosshair';
                     hideTooltip();
@@ -576,6 +1102,7 @@
             }
 
             if (!state.selectedPoint) return;
+            canvas.style.cursor = 'grabbing';
             const deltaX = coords.x - state.dragStart.x;
 
             if (state.dragType === 'point') {
@@ -591,18 +1118,26 @@
             }
 
             state.dragStart = { x: coords.x, y: coords.y };
-            render(); updateOverlay(); saveToLocalStorage();
+            render();
+            updateOverlay();
+            saveToLocalStorage();
         }
 
-        function handleCanvasMouseUp() { state.dragging = false; state.dragType = null; }
+        function handleCanvasMouseUp() {
+            state.dragging = false;
+            state.dragType = null;
+            canvas.style.cursor = 'crosshair';
+        }
 
         function handleCanvasDoubleClick(e) {
             const coords = getCanvasCoordinates(e);
             const clickedItem = findItemAtPosition(coords.x, coords.y);
             if (clickedItem && clickedItem.type === 'point') {
                 clickedItem.track.points = clickedItem.track.points.filter(p => p.id !== clickedItem.point.id);
-                render(); updateOverlay(); saveToLocalStorage();
-                showStatus('Emotion point removed', 'success');
+                render();
+                updateOverlay();
+                saveToLocalStorage();
+                showStatus('Point removed', 'success');
             }
         }
 
@@ -633,72 +1168,240 @@
         }
 
         function drawGrid() {
-            ctx.strokeStyle = '#2a2a3a'; ctx.lineWidth = 1;
-            const step = Math.max(1, Math.floor(state.words.length / 20));
-            for (let i = 0; i <= state.words.length; i += step) {
-                const x = wordIndexToX(i);
-                ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke();
-            }
+            const padding = 25;
+
+            // Horizontal intensity lines
             for (let i = 0; i <= 1; i += 0.25) {
                 const y = intensityToY(i);
-                ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke();
+                ctx.strokeStyle = i === 0 ? '#252535' : '#1a1a28';
+                ctx.lineWidth = 1;
+                ctx.beginPath();
+                ctx.moveTo(30, y);
+                ctx.lineTo(canvas.width - 10, y);
+                ctx.stroke();
+
+                // Labels
+                ctx.fillStyle = '#33334a';
+                ctx.font = '10px Inter, sans-serif';
+                ctx.textAlign = 'right';
+                ctx.fillText((i * 100).toFixed(0) + '%', 26, y + 3);
+            }
+
+            // Vertical word markers (subtle)
+            if (state.words.length > 0) {
+                const step = Math.max(1, Math.floor(state.words.length / 25));
+                for (let i = 0; i <= state.words.length; i += step) {
+                    const x = wordIndexToX(i);
+                    ctx.strokeStyle = '#14141f';
+                    ctx.lineWidth = 1;
+                    ctx.beginPath();
+                    ctx.moveTo(x, padding);
+                    ctx.lineTo(x, canvas.height - padding);
+                    ctx.stroke();
+                }
             }
         }
 
         function drawTrack(track) {
             if (track.points.length === 0) return;
-            ctx.strokeStyle = track.color; ctx.fillStyle = track.color; ctx.lineWidth = 2;
+
+            const rgb = hexToRgb(track.color);
+            const isSelected = track.id === state.selectedTrackId;
+
+            // Draw filled area
+            ctx.beginPath();
+            ctx.moveTo(wordIndexToX(track.points[0].wordIndex), canvas.height - 25);
+
+            // Generate smooth curve points
+            track.points.forEach((point, index) => {
+                const x = wordIndexToX(point.wordIndex);
+                const y = intensityToY(point.intensity);
+
+                if (index === 0) {
+                    ctx.lineTo(x, y);
+                } else {
+                    const prevX = wordIndexToX(track.points[index - 1].wordIndex);
+                    const prevY = intensityToY(track.points[index - 1].intensity);
+                    const cpx = (prevX + x) / 2;
+                    ctx.bezierCurveTo(cpx, prevY, cpx, y, x, y);
+                }
+            });
+
+            ctx.lineTo(wordIndexToX(track.points[track.points.length - 1].wordIndex), canvas.height - 25);
+            ctx.closePath();
+
+            // Gradient fill
+            const gradient = ctx.createLinearGradient(0, 25, 0, canvas.height - 25);
+            gradient.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${isSelected ? 0.2 : 0.1})`);
+            gradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);
+            ctx.fillStyle = gradient;
+            ctx.fill();
+
+            // Draw line
             ctx.beginPath();
             track.points.forEach((point, index) => {
-                const x = wordIndexToX(point.wordIndex), y = intensityToY(point.intensity);
-                index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+                const x = wordIndexToX(point.wordIndex);
+                const y = intensityToY(point.intensity);
+
+                if (index === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    const prevX = wordIndexToX(track.points[index - 1].wordIndex);
+                    const prevY = intensityToY(track.points[index - 1].intensity);
+                    const cpx = (prevX + x) / 2;
+                    ctx.bezierCurveTo(cpx, prevY, cpx, y, x, y);
+                }
             });
+
+            ctx.strokeStyle = track.color;
+            ctx.lineWidth = isSelected ? 3 : 2;
+            ctx.shadowColor = track.color;
+            ctx.shadowBlur = isSelected ? 12 : 6;
             ctx.stroke();
-            
-            ctx.globalAlpha = 0.1;
-            ctx.lineTo(wordIndexToX(track.points[track.points.length - 1].wordIndex), canvas.height - 20);
-            ctx.lineTo(wordIndexToX(track.points[0].wordIndex), canvas.height - 20);
-            ctx.closePath(); ctx.fill(); ctx.globalAlpha = 1;
-            
+            ctx.shadowBlur = 0;
+
+            // Draw points
             track.points.forEach(point => drawPoint(point, track));
         }
 
         function drawPoint(point, track) {
-            const x = wordIndexToX(point.wordIndex), y = intensityToY(point.intensity);
-            ctx.beginPath(); ctx.arc(x, y, 6, 0, Math.PI * 2); ctx.fillStyle = track.color; ctx.fill(); ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.stroke();
-            
+            const x = wordIndexToX(point.wordIndex);
+            const y = intensityToY(point.intensity);
+            const rgb = hexToRgb(track.color);
+
+            // Glow
+            ctx.beginPath();
+            ctx.arc(x, y, 12, 0, Math.PI * 2);
+            ctx.fillStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.15)`;
+            ctx.fill();
+
+            // Outer ring
+            ctx.beginPath();
+            ctx.arc(x, y, 6, 0, Math.PI * 2);
+            ctx.fillStyle = track.color;
+            ctx.fill();
+
+            // Inner dot
+            ctx.beginPath();
+            ctx.arc(x, y, 3, 0, Math.PI * 2);
+            ctx.fillStyle = '#fff';
+            ctx.fill();
+
+            // Fade handles
             if (point.fadeIn > 0) {
                 const fadeInX = wordIndexToX(point.wordIndex - point.fadeIn);
-                ctx.beginPath(); ctx.arc(fadeInX, y, 4, 0, Math.PI * 2); ctx.fillStyle = track.color; ctx.fill();
-                ctx.beginPath(); ctx.moveTo(fadeInX, y); ctx.lineTo(x, y); ctx.strokeStyle = track.color; ctx.lineWidth = 1; ctx.setLineDash([3, 3]); ctx.stroke(); ctx.setLineDash([]);
+                ctx.beginPath();
+                ctx.arc(fadeInX, y, 4, 0, Math.PI * 2);
+                ctx.fillStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.6)`;
+                ctx.fill();
+                ctx.strokeStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`;
+                ctx.lineWidth = 1;
+                ctx.setLineDash([4, 4]);
+                ctx.beginPath();
+                ctx.moveTo(fadeInX, y);
+                ctx.lineTo(x, y);
+                ctx.stroke();
+                ctx.setLineDash([]);
             }
             if (point.fadeOut > 0) {
                 const fadeOutX = wordIndexToX(point.wordIndex + point.fadeOut);
-                ctx.beginPath(); ctx.arc(fadeOutX, y, 4, 0, Math.PI * 2); ctx.fillStyle = track.color; ctx.fill();
-                ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(fadeOutX, y); ctx.strokeStyle = track.color; ctx.lineWidth = 1; ctx.setLineDash([3, 3]); ctx.stroke(); ctx.setLineDash([]);
+                ctx.beginPath();
+                ctx.arc(fadeOutX, y, 4, 0, Math.PI * 2);
+                ctx.fillStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.6)`;
+                ctx.fill();
+                ctx.strokeStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`;
+                ctx.lineWidth = 1;
+                ctx.setLineDash([4, 4]);
+                ctx.beginPath();
+                ctx.moveTo(x, y);
+                ctx.lineTo(fadeOutX, y);
+                ctx.stroke();
+                ctx.setLineDash([]);
             }
         }
 
         function drawCursorIndicator() {
             if (state.words.length === 0) return;
             const x = wordIndexToX(state.cursorWordIndex);
-            ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.setLineDash([5, 5]);
-            ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); ctx.setLineDash([]);
+
+            // Subtle glow line
+            const gradient = ctx.createLinearGradient(x, 0, x, canvas.height);
+            gradient.addColorStop(0, 'rgba(255,255,255,0)');
+            gradient.addColorStop(0.3, 'rgba(255,255,255,0.15)');
+            gradient.addColorStop(0.7, 'rgba(255,255,255,0.15)');
+            gradient.addColorStop(1, 'rgba(255,255,255,0)');
+
+            ctx.strokeStyle = gradient;
+            ctx.lineWidth = 1.5;
+            ctx.beginPath();
+            ctx.moveTo(x, 0);
+            ctx.lineTo(x, canvas.height);
+            ctx.stroke();
+
+            // Small diamond indicator at top
+            ctx.fillStyle = 'rgba(255,255,255,0.8)';
+            ctx.beginPath();
+            ctx.moveTo(x, 8);
+            ctx.lineTo(x + 4, 12);
+            ctx.lineTo(x, 16);
+            ctx.lineTo(x - 4, 12);
+            ctx.closePath();
+            ctx.fill();
         }
 
-        function updateEditorGlow() {
+        function updateEditorEffects() {
             const activeEmotions = getActiveEmotionsAtWord(state.cursorWordIndex);
-            if (activeEmotions.length === 0) { editorWrapper.style.boxShadow = 'none'; return; }
-            
-            let r=0, g=0, b=0, total=0;
+
+            // Update ambient glow
+            if (activeEmotions.length === 0) {
+                editorWrapper.style.boxShadow = 'none';
+                editorWrapper.classList.remove('has-emotion');
+                editorAmbient.style.background = 'none';
+                emotionSidebarFill.style.height = '0%';
+                activeEmotionsDisplay.innerHTML = '';
+                return;
+            }
+
+            editorWrapper.classList.add('has-emotion');
+
+            let r = 0, g = 0, b = 0, total = 0;
             activeEmotions.forEach(e => {
                 const rgb = hexToRgb(e.color);
-                r += rgb.r * e.intensity; g += rgb.g * e.intensity; b += rgb.b * e.intensity; total += e.intensity;
+                r += rgb.r * e.intensity;
+                g += rgb.g * e.intensity;
+                b += rgb.b * e.intensity;
+                total += e.intensity;
             });
-            if(total > 0) {
-                r = Math.round(r/total); g = Math.round(g/total); b = Math.round(b/total);
+
+            if (total > 0) {
+                r = Math.round(r / total);
+                g = Math.round(g / total);
+                b = Math.round(b / total);
                 const avgInt = total / activeEmotions.length;
-                editorWrapper.style.boxShadow = `0 0 15px rgba(${r}, ${g}, ${b}, ${avgInt * 0.6})`;
+
+                editorWrapper.style.boxShadow = `
+                    inset 0 0 80px rgba(${r}, ${g}, ${b}, ${avgInt * 0.08}),
+                    0 0 30px rgba(${r}, ${g}, ${b}, ${avgInt * 0.15})
+                `;
+                editorWrapper.style.borderColor = `rgba(${r}, ${g}, ${b}, ${Math.max(0.2, avgInt * 0.4)})`;
+
+                editorAmbient.style.background = `radial-gradient(ellipse at 50% 50%, rgba(${r},${g},${b},${avgInt * 0.1}), transparent 70%)`;
+
+                // Sidebar fill
+                emotionSidebarFill.style.height = `${avgInt * 100}%`;
+                emotionSidebarFill.style.background = `linear-gradient(to top, rgba(${r},${g},${b},0.6), rgba(${r},${g},${b},0.2))`;
+                emotionSidebarFill.style.boxShadow = `0 0 8px rgba(${r},${g},${b},0.4)`;
+
+                // Spawn particles
+                activeEmotions.forEach(e => spawnParticles(e.color, e.intensity * 0.3));
+
+                // Active emotions display
+                activeEmotionsDisplay.innerHTML = activeEmotions.map(e => `
+                    <div class="active-emotion-pill">
+                        <span class="active-emotion-dot" style="background:${e.color};box-shadow:0 0 4px ${e.color};"></span>
+                        ${e.label} ${(e.intensity * 100).toFixed(0)}%
+                    </div>
+                `).join('');
             }
         }
 
@@ -706,44 +1409,86 @@
             const activeEmotions = [];
             state.tracks.forEach(track => {
                 track.points.forEach(point => {
-                    const start = point.wordIndex - point.fadeIn, end = point.wordIndex + point.fadeOut;
+                    const start = point.wordIndex - point.fadeIn;
+                    const end = point.wordIndex + point.fadeOut;
                     if (wordIndex >= start && wordIndex <= end) {
                         let intensity = point.intensity;
-                        if (wordIndex < point.wordIndex && point.fadeIn > 0) intensity *= (wordIndex - start) / point.fadeIn;
-                        if (wordIndex > point.wordIndex && point.fadeOut > 0) intensity *= 1 - ((wordIndex - point.wordIndex) / point.fadeOut);
-                        activeEmotions.push({ label: track.label, color: track.color, intensity: Math.max(0, Math.min(1, intensity)) });
+                        if (wordIndex < point.wordIndex && point.fadeIn > 0)
+                            intensity *= (wordIndex - start) / point.fadeIn;
+                        if (wordIndex > point.wordIndex && point.fadeOut > 0)
+                            intensity *= 1 - ((wordIndex - point.wordIndex) / point.fadeOut);
+                        activeEmotions.push({
+                            label: track.label,
+                            color: track.color,
+                            intensity: Math.max(0, Math.min(1, intensity))
+                        });
                     }
                 });
             });
             return activeEmotions;
         }
 
-        // Tracks Management
+        // Track Management
         function addEmotionTrack() {
             const emotionName = emotionInput.value.trim();
             if (!emotionName) { showStatus('Please enter an emotion name', 'error'); return; }
-            state.tracks.push({ id: Date.now(), label: emotionName, color: colorPalette[colorIndex++ % colorPalette.length], points: [] });
+            const newTrack = {
+                id: Date.now(),
+                label: emotionName,
+                color: colorPalette[colorIndex++ % colorPalette.length],
+                points: []
+            };
+            state.tracks.push(newTrack);
+            state.selectedTrackId = newTrack.id;
             emotionInput.value = '';
-            renderTracksList(); render(); saveToLocalStorage();
-            showStatus(`Added track: ${emotionName}`, 'success');
+            renderTracksList();
+            render();
+            saveToLocalStorage();
+            showStatus(`Track "${emotionName}" added — click timeline to place points`, 'success');
         }
 
         function renderTracksList() {
-            tracksList.innerHTML = '';
+            tracksList.innerHTML = '<span class="tracks-label">Tracks</span>';
+            if (state.tracks.length === 0) {
+                tracksList.innerHTML += '<span style="font-size:0.8rem;color:var(--text-muted);font-style:italic;">No tracks yet</span>';
+                return;
+            }
             state.tracks.forEach(track => {
+                const isActive = track.id === state.selectedTrackId;
                 const item = document.createElement('div');
-                item.className = 'track-item';
-                item.innerHTML = `<div class="track-color" style="background:${track.color}"></div><span>${track.label}</span><span class="track-delete" onclick="deleteTrack(${track.id})">&times;</span>`;
+                item.className = 'track-item' + (isActive ? ' active' : '');
+                item.innerHTML = `
+                    <div class="track-color" style="background:${track.color};color:${track.color}"></div>
+                    <span>${track.label}</span>
+                    <span class="track-point-count">${track.points.length}pt</span>
+                    <span class="track-delete" data-id="${track.id}">&times;</span>
+                `;
+                item.addEventListener('click', (e) => {
+                    if (e.target.classList.contains('track-delete')) return;
+                    state.selectedTrackId = track.id;
+                    renderTracksList();
+                    render();
+                });
+                item.querySelector('.track-delete').addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    deleteTrack(track.id);
+                });
                 tracksList.appendChild(item);
             });
         }
 
         function deleteTrack(trackId) {
             state.tracks = state.tracks.filter(t => t.id !== trackId);
-            renderTracksList(); render(); updateOverlay(); saveToLocalStorage();
+            if (state.selectedTrackId === trackId) {
+                state.selectedTrackId = state.tracks.length > 0 ? state.tracks[state.tracks.length - 1].id : null;
+            }
+            renderTracksList();
+            render();
+            updateOverlay();
+            saveToLocalStorage();
         }
 
-        // Data Export & Clear
+        // Data Export
         function generateDataset() {
             const emotionalFlow = [];
             state.tracks.forEach(track => {
@@ -763,20 +1508,36 @@
             const jsonStr = JSON.stringify(generateDataset(), null, 2);
             const blob = new Blob([jsonStr], { type: 'application/json' });
             const a = document.createElement('a');
-            a.href = URL.createObjectURL(blob); a.download = 'self-distillation-dataset.json'; a.click();
+            a.href = URL.createObjectURL(blob);
+            a.download = 'self-distillation-dataset.json';
+            a.click();
             showStatus('Dataset exported successfully', 'success');
         }
 
         function clearAll() {
-            if (confirm('Are you sure you want to clear all text and emotion tracks? (HF credentials will be kept)')) {
+            if (confirm('Clear all text and emotion tracks?')) {
                 localStorage.removeItem('self_distillation_data');
-                state.text = ''; state.tracks = []; state.words = []; state.cursorWordIndex = 0;
-                editor.value = ''; updateOverlay(); renderTracksList(); render();
-                showStatus('All local data cleared', 'success');
+                state.text = '';
+                state.tracks = [];
+                state.words = [];
+                state.cursorWordIndex = 0;
+                state.selectedTrackId = null;
+                state.particles = [];
+                editor.value = '';
+                editorWrapper.style.boxShadow = 'none';
+                editorWrapper.style.borderColor = '';
+                editorWrapper.classList.remove('has-emotion');
+                editorAmbient.style.background = 'none';
+                emotionSidebarFill.style.height = '0%';
+                activeEmotionsDisplay.innerHTML = '';
+                updateOverlay();
+                renderTracksList();
+                render();
+                showStatus('All data cleared', 'success');
             }
         }
 
-        // HuggingFace Integration
+        // HuggingFace
         function showHFModal() {
             const savedToken = localStorage.getItem('hf_token');
             const savedRepo = localStorage.getItem('hf_repo_id');
@@ -791,12 +1552,12 @@
             const token = document.getElementById('hfToken').value.trim();
             const repoId = document.getElementById('hfRepoId').value.trim();
             if (!token || !repoId) { showStatus('Please provide both token and repository ID', 'error'); return; }
-            
+
             localStorage.setItem('hf_token', token);
             localStorage.setItem('hf_repo_id', repoId);
-            
+
             try {
-                showStatus('Fetching existing dataset to append...', 'success');
+                showStatus('Fetching existing dataset…', 'success');
                 let existingData = [];
                 try {
                     const res = await fetch(`https://huggingface.co/datasets/${repoId}/resolve/main/data.json`);
@@ -805,11 +1566,11 @@
                         existingData = JSON.parse(text);
                         if (!Array.isArray(existingData)) existingData = [existingData];
                     }
-                } catch(e) { console.log('No existing file, creating new.'); }
+                } catch (e) { console.log('No existing file, creating new.'); }
 
                 existingData.push(generateDataset());
 
-                showStatus('Uploading to HuggingFace...', 'success');
+                showStatus('Uploading to HuggingFace…', 'success');
                 const commitUrl = `https://huggingface.co/api/datasets/${repoId}/commit/main`;
                 const response = await fetch(commitUrl, {
                     method: "POST",
@@ -819,7 +1580,7 @@
                         operations: [{ key: "data.json", operation: "addOrUpdate", content: JSON.stringify(existingData, null, 2) }]
                     })
                 });
-                
+
                 if (!response.ok) throw new Error('Failed to commit to HF');
                 showStatus('Successfully appended to HuggingFace!', 'success');
                 closeHFModal();
@@ -828,9 +1589,14 @@
             }
         }
 
-        // LocalStorage & Utils
+        // Storage & Utils
         function saveToLocalStorage() {
-            localStorage.setItem('self_distillation_data', JSON.stringify({ text: state.text, tracks: state.tracks, colorIndex }));
+            localStorage.setItem('self_distillation_data', JSON.stringify({
+                text: state.text,
+                tracks: state.tracks,
+                colorIndex,
+                selectedTrackId: state.selectedTrackId
+            }));
         }
 
         function loadFromLocalStorage() {
@@ -838,19 +1604,28 @@
             if (saved) {
                 try {
                     const data = JSON.parse(saved);
-                    state.text = data.text || ''; state.tracks = data.tracks || []; colorIndex = data.colorIndex || 0;
-                    state.words = getWords(state.text); editor.value = state.text;
-                } catch (e) { console.error('Failed to load saved data:', e); }
+                    state.text = data.text || '';
+                    state.tracks = data.tracks || [];
+                    colorIndex = data.colorIndex || 0;
+                    state.selectedTrackId = data.selectedTrackId || null;
+                    state.words = getWords(state.text);
+                    editor.value = state.text;
+                } catch (e) { console.error('Failed to load:', e); }
             }
         }
 
         function hexToRgb(hex) {
             const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-            return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : { r: 0, g: 0, b: 0 };
+            return result ? {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16)
+            } : { r: 0, g: 0, b: 0 };
         }
 
         function showStatus(message, type) {
-            statusBar.textContent = message; statusBar.className = `status-bar active ${type}`;
+            statusBar.textContent = message;
+            statusBar.className = `status-bar active ${type}`;
             setTimeout(() => statusBar.classList.remove('active'), 3000);
         }