:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a25;--bg-glass: rgba(26, 26, 37, .8);--text-primary: #f0f0f5;--text-secondary: #a0a0b0;--text-muted: #606070;--accent-primary: #6366f1;--accent-secondary: #818cf8;--accent-glow: rgba(99, 102, 241, .3);--border-color: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .15);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--transition-fast: .15s ease;--transition-normal: .25s ease}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased}.app{display:flex;height:100vh;width:100vw}.ascii-container{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);position:relative;overflow:hidden}.control-sidebar{width:320px;min-width:320px;height:100vh;background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-left:1px solid var(--border-color);overflow-y:auto;display:flex;flex-direction:column}.glass-panel{background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-md)}.section-header{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--border-color)}.control-group{padding:var(--spacing-md);border-bottom:1px solid var(--border-color)}.control-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm)}.control-row:last-child{margin-bottom:0}.control-label{font-size:.85rem;color:var(--text-secondary)}.control-value{font-size:.8rem;color:var(--text-muted);font-family:SF Mono,monospace;min-width:40px;text-align:right}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--bg-tertiary);border-radius:2px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--accent-primary);border-radius:50%;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 10px var(--accent-glow)}.toggle{position:relative;width:40px;height:22px;background:var(--bg-tertiary);border-radius:11px;cursor:pointer;transition:background var(--transition-fast)}.toggle.active{background:var(--accent-primary)}.toggle:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform var(--transition-fast)}.toggle.active:after{transform:translate(18px)}select{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);font-size:.85rem;cursor:pointer;outline:none;transition:border-color var(--transition-fast)}select:hover,select:focus{border-color:var(--border-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.btn:hover{background:var(--bg-secondary);border-color:var(--border-hover)}.btn-primary{background:var(--accent-primary);border-color:var(--accent-primary)}.btn-primary:hover{background:var(--accent-secondary)}.btn-icon{padding:var(--spacing-sm);min-width:36px}.video-tabs{display:flex;border-bottom:1px solid var(--border-color)}.video-tab{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;color:var(--text-muted);font-size:.8rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);border-bottom:2px solid transparent}.video-tab:hover{color:var(--text-secondary);background:#ffffff05}.video-tab.active{color:var(--text-primary);background:#6366f11a;border-bottom-color:var(--accent-primary)}.video-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm);padding:var(--spacing-md)}.video-thumb{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--bg-tertiary);border:2px solid transparent;cursor:pointer;overflow:hidden;position:relative;transition:all var(--transition-fast)}.video-thumb:hover{border-color:var(--border-hover);transform:scale(1.02)}.video-thumb.active{border-color:var(--accent-primary);box-shadow:0 0 12px var(--accent-glow)}.video-thumb img{width:100%;height:100%;object-fit:cover}.video-thumb-label{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-xs) var(--spacing-sm);background:linear-gradient(transparent,#000c);font-size:.7rem;color:#fff}.upload-zone{grid-column:span 2;padding:var(--spacing-md);border:2px dashed var(--border-color);border-radius:var(--radius-sm);text-align:center;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.upload-zone:hover{border-color:var(--accent-primary);color:var(--text-secondary)}.upload-empty{grid-column:span 2;padding:var(--spacing-lg);text-align:center;color:var(--text-muted);font-size:.85rem}.video-thumb-delete{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:#ef4444e6;border:none;color:#fff;font-size:14px;line-height:1;cursor:pointer;opacity:0;transition:opacity var(--transition-fast);display:flex;align-items:center;justify-content:center}.video-thumb:hover .video-thumb-delete{opacity:1}.video-thumb-delete:hover{background:#dc2626}.video-thumb.processing{pointer-events:none}.code-export{padding:var(--spacing-md)}.code-block{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:var(--spacing-md);font-family:SF Mono,Fira Code,monospace;font-size:.75rem;line-height:1.6;overflow-x:auto;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word}.code-block .keyword{color:#c792ea}.code-block .string{color:#c3e88d}.code-block .number{color:#f78c6c}.code-block .component{color:#82aaff}.code-block .prop{color:#ffcb6b}.loading-skeleton{background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-secondary) 50%,var(--bg-tertiary) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.play-btn{width:48px;height:48px;border-radius:50%;background:var(--accent-primary);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.play-btn:hover{transform:scale(1.1);background:var(--accent-secondary)}.play-btn svg{fill:#fff;width:20px;height:20px}.sidebar-header{padding:var(--spacing-md);border-bottom:1px solid var(--border-color)}.sidebar-header h1{font-size:1rem;font-weight:600;margin-bottom:var(--spacing-xs)}.sidebar-header p{font-size:.75rem;color:var(--text-muted)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}