:root{--bg-primary: #0a0a12;--bg-secondary: #12121f;--bg-tertiary: #1a1a2e;--border-color: #2a2a4a;--text-primary: #e8e8f0;--text-secondary: #8888aa;--accent-primary: #00d4ff;--accent-secondary: #7b2dff;--accent-success: #00ff88;--accent-danger: #ff3366;--accent-warning: #ffaa00;--theme-bg: #0a0a12;--theme-text: #e8e8f0;--theme-dir: #00d4ff;--glass-bg: rgba(20, 20, 35, .7);--glass-border: rgba(255, 255, 255, .1)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;font-family:SF Mono,Fira Code,Consolas,monospace;background:var(--theme-bg);color:var(--theme-text);overflow:hidden}#canvas-container{position:absolute;top:0;left:0;right:0;bottom:0;touch-action:none}#canvas-container canvas{touch-action:none}#file-input{display:none}.hidden{display:none!important;opacity:0!important;pointer-events:none!important}.intro-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:900;padding:20px}.intro-screen.hidden{display:none}.intro-title{font-size:48px;font-weight:300;color:var(--accent-primary);margin-bottom:16px;letter-spacing:4px}.intro-subtitle{font-size:16px;color:var(--text-secondary);margin-bottom:40px}.drop-zone{width:100%;max-width:600px;border:2px dashed var(--border-color);border-radius:16px;padding:40px;text-align:center;cursor:pointer;transition:all .3s;background:var(--bg-secondary)}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent-primary);background:#00d4ff0d}.drop-zone-icon{font-size:48px;margin-bottom:16px;opacity:.6}.drop-zone-text{font-size:16px;color:var(--text-primary);margin-bottom:8px}.drop-zone-hint{font-size:13px;color:var(--text-secondary)}.command-box{width:100%;max-width:600px;margin-top:32px;background:var(--bg-tertiary);border-radius:12px;padding:16px;text-align:left}.command-label{font-size:12px;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}.command-text{font-size:13px;color:var(--accent-success);background:var(--bg-primary);padding:12px;border-radius:8px;overflow-x:auto;white-space:nowrap;cursor:pointer;border:1px solid var(--border-color);transition:all .2s}.command-text:hover{border-color:var(--accent-primary)}.command-hint{font-size:11px;color:var(--text-secondary);margin-top:8px;opacity:.7}.reference{margin-top:32px;font-size:12px;color:var(--text-secondary);text-align:center;line-height:1.6}.reference a{color:var(--accent-primary);text-decoration:none}.reference a:hover{text-decoration:underline}.powered-by{font-size:10px;margin-top:4px;opacity:.6}.powered-by a{color:inherit;text-decoration:none}.powered-by a:hover{text-decoration:underline}.stats-panel{position:fixed;top:16px;left:16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:16px;z-index:1000;display:none;min-width:180px}.stats-title{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border-color)}.stat-row:last-child{border-bottom:none}.stat-label{font-size:12px;color:var(--text-secondary)}.stat-value{font-size:14px;font-weight:600;color:var(--accent-primary)}.commit-panel{position:fixed;top:16px;right:16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:16px;z-index:1000;display:none;max-width:300px}.commit-author{display:flex;align-items:center;gap:10px;margin-bottom:12px}.author-avatar{width:36px;height:36px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--accent-primary)}.author-name{font-size:14px;font-weight:500}.commit-message{font-size:12px;color:var(--text-secondary);line-height:1.4;max-height:60px;overflow:hidden;text-overflow:ellipsis}.commit-files{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color)}.file-change{font-size:11px;padding:3px 0;display:flex;align-items:center;gap:6px}.file-change.added:before{content:"+";color:var(--accent-success);font-weight:700}.file-change.deleted:before{content:"-";color:var(--accent-danger);font-weight:700}.file-change.modified:before{content:"~";color:var(--accent-warning);font-weight:700}.file-change .line-stats{margin-left:auto;font-size:10px;white-space:nowrap}.file-change .line-stats .added{color:var(--accent-success)}.file-change .line-stats .deleted{color:var(--accent-danger)}.commit-line-summary{display:flex;justify-content:flex-end;gap:12px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-color);font-size:12px}.commit-line-summary .added{color:var(--accent-success)}.commit-line-summary .deleted{color:var(--accent-danger)}.reset-btn{position:fixed;top:16px;left:50%;transform:translate(-50%);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:8px 16px;color:var(--text-secondary);font-size:12px;cursor:pointer;z-index:1000;display:none;transition:all .2s}.reset-btn:hover{border-color:var(--accent-primary);color:var(--text-primary)}.control-panel{position:fixed;bottom:16px;left:50%;transform:translate(-50%);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:12px 20px;z-index:1000;display:none;box-shadow:0 8px 32px #0006}.timeline-container{display:flex;align-items:center;gap:16px}.play-btn{width:40px;height:40px;background:var(--accent-primary);border:none;border-radius:50%;color:#000;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.play-btn:hover{background:#00e5ff;transform:scale(1.1)}.timeline-slider{width:400px;-webkit-appearance:none;height:6px;background:var(--bg-tertiary);border-radius:3px;outline:none}.timeline-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--accent-primary);border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--accent-primary)}.timeline-info{display:flex;flex-direction:column;align-items:flex-end;min-width:120px}.timeline-date{font-size:14px;color:var(--text-primary);font-weight:500}.timeline-commit{font-size:11px;color:var(--text-secondary);margin-top:2px}.speed-control{display:flex;align-items:center;gap:8px;margin-left:16px;padding-left:16px;border-left:1px solid var(--border-color)}.speed-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;padding:4px 8px;color:var(--text-secondary);font-size:11px;cursor:pointer;transition:all .2s}.speed-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#000}.settings-btn{background:var(--bg-tertiary);border:none;color:var(--text-primary);width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s;margin-left:8px;opacity:.7}.settings-btn:hover{background:var(--accent-primary);color:#000;opacity:1;transform:rotate(30deg)}.btn-text{background:#ffffff1a;border:1px solid rgba(255,255,255,.1);color:var(--text-primary);padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;margin:0 8px;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.btn-text:hover{background:#ffffff26;border-color:#ffffff4d;transform:translateY(-1px)}.btn-text:active{transform:translateY(0)}.settings-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:24px;z-index:2000;width:90%;max-width:400px;box-shadow:0 10px 40px #00000080;display:none}.settings-modal.visible{display:block}.settings-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:1999;display:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.settings-overlay.visible{display:block}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid var(--border-color);padding-bottom:12px}.settings-title{font-size:18px;font-weight:600;color:var(--text-primary)}.close-btn{background:none;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;padding:0;line-height:1}.close-btn:hover{color:var(--text-primary)}.settings-group{margin-bottom:20px}.settings-label{font-size:12px;color:var(--text-secondary);margin-bottom:8px;display:block;text-transform:uppercase;letter-spacing:.5px}.color-picker-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:var(--bg-tertiary);padding:8px 12px;border-radius:8px}.color-picker-label{font-size:14px}input[type=color]{-webkit-appearance:none;border:none;width:32px;height:32px;background:none;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:2px solid var(--border-color);border-radius:50%}.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px}.preset-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);padding:8px;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}.preset-btn:hover{border-color:var(--accent-primary);color:var(--text-primary)}.preset-btn.active{background:var(--accent-primary);color:#000;border-color:var(--accent-primary)}.loading-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;background:#121214e6;padding:30px;border-radius:12px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;pointer-events:none;box-shadow:0 10px 30px #00000080;transition:opacity .3s ease;opacity:1}.loading-overlay.hidden{opacity:0;pointer-events:none;display:none}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 15px}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:16px;color:var(--text-secondary);margin-bottom:10px}.progress-bar{width:200px;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;margin:0 auto}.progress-fill{width:0%;height:100%;background:var(--accent-color);transition:width .2s ease}.date-overlay{position:fixed;top:30px;left:50%;transform:translate(-50%);font-size:28px;font-weight:300;color:#ffffffd9;text-shadow:0 2px 8px rgba(0,0,0,.6);z-index:500;pointer-events:none;letter-spacing:.5px;font-family:Inter,system-ui,sans-serif;white-space:nowrap}.tooltip{position:absolute;background:#0a0a0ef2;border:1px solid rgba(255,255,255,.15);color:#fff;padding:8px 12px;border-radius:6px;font-size:13px;pointer-events:none;z-index:2000;box-shadow:0 4px 12px #0006;transform:translate(-50%,-120%);transition:opcode .1s ease;white-space:nowrap}.error-toast,.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%);background:#dc3545f2;color:#fff;padding:12px 24px;border-radius:8px;border:1px solid rgba(255,255,255,.2);box-shadow:0 5px 15px #0000004d;z-index:3000;font-size:14px;animation:fadeUp .3s ease;display:none}@keyframes fadeUp{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}@media(max-width:800px){.intro-title{font-size:32px}.timeline-slider{width:200px}.command-text{font-size:11px}.stats-panel,.commit-panel{max-width:calc(50% - 24px)}}